:root {
  color-scheme: dark;
  --bg: #05060a;
  --panel: rgba(22, 26, 34, 0.56);
  --panel-soft: rgba(255, 255, 255, 0.045);
  --panel-strong: rgba(30, 35, 46, 0.72);
  --border: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(206, 145, 92, 0.34);
  --text: rgba(245, 247, 250, 0.94);
  --text-main: rgba(245, 247, 250, 0.94);
  --text-muted: rgba(215, 219, 225, 0.62);
  --muted: rgba(215, 219, 225, 0.62);
  --soft: rgba(215, 219, 225, 0.42);
  --cyan: #8bb3ff;
  --cyan-soft: rgba(122, 173, 255, 0.18);
  --gold: #d79a62;
  --gold-soft: rgba(206, 145, 92, 0.18);
  --accent: var(--gold);
  --accent-soft: var(--gold-soft);
  --shadow: 0 clamp(1.1rem, 1.8vw, 1.625rem) clamp(3rem, 5.2vw, 5rem) rgba(0, 0, 0, 0.48);
  --radius: 0.72rem;
  --page-pad-x: clamp(1rem, 2.1vw, 2rem);
  --page-pad-y: clamp(1rem, 1.6vw, 1.5rem);
  --grid-gap: clamp(0.75rem, 1.1vw, 1.125rem);
  --card-pad: clamp(1rem, 1.45vw, 1.375rem);
  --card-radius: clamp(0.5rem, 0.75vw, 0.75rem);
  --nav-pad-x: clamp(0.875rem, 1.4vw, 1.375rem);
  --nav-height: clamp(3rem, 4vw, 3.875rem);
  --brand-mark-size: clamp(2.25rem, 3vw, 2.625rem);
  --avatar-size: clamp(2.5rem, 3.6vw, 3.375rem);
  --hero-min-h: clamp(11rem, 17vw, 12.875rem);
  --hero-pad-x: clamp(1.5rem, 4.1vw, 4.5rem);
  --hero-pad-y: clamp(1.5rem, 2.6vw, 2.625rem);
  --thumb-w: clamp(3.25rem, 4.2vw, 3.875rem);
  --thumb-h: clamp(2.5rem, 3.3vw, 3rem);
  --ring-size: clamp(7.5rem, 10.6vw, 9.5rem);
  --control-height: clamp(2.5rem, 3vw, 3.625rem);
  --stage-max-w: 104rem;
  --portal-gap: clamp(1rem, 1.35vw, 1.45rem);
  --portal-card-w: clamp(10.25rem, 14.35cqw, 15.1rem);
  --portal-card-h: clamp(32rem, calc(100dvh - 8.25rem), 43rem);
  --zh-sans-font:
    "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC",
    "Hiragino Sans GB", "Heiti SC", "SF Pro Display", "Segoe UI", ui-sans-serif,
    system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-family: var(--zh-sans-font);
}

html {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 20rem;
  min-height: 0;
  margin: 0;
  font-family: var(--zh-sans-font);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  background:
    radial-gradient(circle at 78% 12%, rgba(122, 173, 255, 0.14), transparent 28%),
    radial-gradient(circle at 24% 82%, rgba(206, 145, 92, 0.16), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.04), transparent 22%),
    linear-gradient(135deg, #030405 0%, #080b10 44%, #05070a 100%);
  color: var(--text);
}

:root[data-theme="warmIvory"] body {
  background:
    radial-gradient(circle at 78% 12%, rgba(122, 173, 255, 0.14), transparent 28%),
    radial-gradient(circle at 24% 82%, rgba(206, 145, 92, 0.16), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.04), transparent 22%),
    linear-gradient(135deg, #030405 0%, #080b10 44%, #05070a 100%);
}

:root[data-theme="silverBlue"] body {
  background:
    radial-gradient(circle at 78% 12%, rgba(122, 173, 255, 0.14), transparent 28%),
    radial-gradient(circle at 24% 82%, rgba(206, 145, 92, 0.16), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.04), transparent 22%),
    linear-gradient(135deg, #030405 0%, #080b10 44%, #05070a 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

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

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100dvw;
  height: var(--app-height, 100dvh);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(0.625rem, 0.9vw, 0.75rem);
  padding: clamp(0.4rem, 0.6vw, 0.5rem) var(--nav-pad-x) clamp(1.5rem, 2.6vw, 2.375rem);
}

.brand-mark {
  display: grid;
  width: var(--brand-mark-size);
  height: var(--brand-mark-size);
  place-items: center;
  border: 1px solid rgba(206, 145, 92, 0.54);
  border-radius: 42%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.06), transparent 36%),
    rgba(206, 145, 92, 0.08);
  box-shadow: 0 0 clamp(1rem, 1.7vw, 1.5rem) rgba(206, 145, 92, 0.14);
  color: #f4d7b6;
  font-weight: 700;
}

.brand h1,
.topbar h2,
.hero-copy h3,
.panel h3,
.panel h4,
.card-title {
  margin: 0;
  letter-spacing: 0;
}

.brand h1 {
  color: rgba(255, 245, 231, 0.96);
  font-size: 1.5625rem;
  font-weight: 650;
}

.brand p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-list {
  display: grid;
  gap: clamp(0.45rem, 0.7vw, 0.625rem);
}

.nav-item {
  display: grid;
  grid-template-columns: clamp(1.35rem, 2vw, 1.75rem) 1fr;
  align-items: center;
  width: 100%;
  min-height: var(--nav-height);
  padding: clamp(0.625rem, 0.9vw, 0.75rem) var(--nav-pad-x);
  border: 1px solid transparent;
  border-radius: var(--card-radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.nav-item:hover {
  border-color: rgba(206, 145, 92, 0.24);
  background:
    radial-gradient(circle at 12% 16%, rgba(206, 145, 92, 0.08), transparent 26%),
    rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.nav-item.is-active {
  border-color: var(--line-strong);
  background:
    radial-gradient(circle at 12% 16%, rgba(206, 145, 92, 0.18), transparent 26%),
    linear-gradient(135deg, rgba(122, 173, 255, 0.12), rgba(206, 145, 92, 0.1));
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), 0 0 26px rgba(206, 145, 92, 0.08);
}

.nav-separator {
  height: 1px;
  margin: clamp(0.875rem, 1.2vw, 1.125rem) var(--nav-pad-x) clamp(0.625rem, 1vw, 0.875rem);
  background: rgba(255, 255, 255, 0.12);
}

.nav-group-label {
  margin: 0 var(--nav-pad-x) 0.25rem;
  color: var(--muted);
  font-size: 13px;
}

.nav-icon {
  color: var(--cyan);
  font-size: 17px;
}

.crown {
  color: var(--gold);
  font-size: 26px;
}

.main-stage {
  container-type: inline-size;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  width: min(100%, var(--stage-max-w));
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: var(--page-pad-y) var(--page-pad-x);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--grid-gap);
  min-height: var(--avatar-size);
  margin-bottom: clamp(1rem, 1.7vw, 1.6rem);
}

.topbar-spacer {
  display: none;
}

.user-area {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.625rem, 1.2vw, 1rem);
  margin-left: auto;
}

.top-brand {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  max-width: clamp(12rem, 15vw, 13.5rem);
  align-items: center;
  gap: clamp(0.42rem, 0.6vw, 0.54rem);
  min-height: clamp(2.65rem, 3.25vw, 3rem);
  padding: 0.22rem 0.52rem 0.22rem 0.24rem;
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.top-brand:hover,
.top-brand:focus-visible {
  border-color: rgba(206, 145, 92, 0.22);
  background:
    linear-gradient(135deg, rgba(206, 145, 92, 0.1), rgba(122, 173, 255, 0.045)),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.75rem 1.8rem rgba(0, 0, 0, 0.18);
}

.top-brand:active {
  transform: translateY(1px);
}

.brand-copy {
  display: block;
  min-width: 0;
}

.top-brand strong,
.top-brand em {
  display: block;
}

.top-brand strong {
  color: rgba(255, 245, 231, 0.96);
  font-size: clamp(1.05rem, 1.28vw, 1.28rem);
  font-style: normal;
  font-weight: 760;
  line-height: 0.9;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow: 0 0 22px rgba(206, 145, 92, 0.1);
}

.top-brand em {
  margin-top: clamp(0.24rem, 0.34vw, 0.3rem);
  color: rgba(197, 220, 255, 0.72);
  font-size: clamp(0.62rem, 0.72vw, 0.68rem);
  font-style: normal;
  font-weight: 520;
  line-height: 1;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.top-brand em::before {
  margin-right: 0.24rem;
  color: rgba(206, 145, 92, 0.78);
  content: "⌂";
  font-size: 0.82em;
}

body[data-active-module="home"] .top-brand em {
  color: rgba(222, 232, 238, 0.68);
}

body[data-active-module="home"] .top-brand em::before {
  content: "";
  margin-right: 0;
}

.top-nav {
  display: flex;
  flex: 1 1 auto;
  max-width: none;
  gap: 0.18rem;
  overflow: visible;
  padding: 0.2rem;
  scrollbar-width: none;
  min-width: 0;
}

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

.top-nav .nav-item {
  display: inline-flex;
  flex: 1 1 0;
  grid-template-columns: none;
  width: auto;
  min-width: clamp(3.8rem, 5.05vw, 6.1rem);
  justify-content: center;
  min-height: clamp(2.2rem, 2.7vw, 2.55rem);
  padding: 0.42rem 0.48rem;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  font-size: clamp(0.78rem, 0.84vw, 0.92rem);
  white-space: nowrap;
}

.top-nav .nav-item span:last-child,
.glass-button,
.portal-action,
.chip,
.member-pill,
.support-pill {
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-nav .nav-icon {
  margin-right: 0.22rem;
}

.member-pill,
.support-pill {
  min-height: clamp(2.25rem, 2.75vw, 2.55rem);
  padding: 0 0.72rem;
  border: 1px solid rgba(206, 145, 92, 0.28);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 20%, rgba(206, 145, 92, 0.08), transparent 28%),
    rgba(255, 255, 255, 0.03);
  color: var(--gold);
  cursor: pointer;
  white-space: nowrap;
}

.icon-button {
  position: relative;
  display: grid;
  width: var(--avatar-size);
  height: var(--avatar-size);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(6, 11, 16, 0.66);
  color: rgba(250, 248, 238, 0.92);
  cursor: pointer;
  font-size: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.8rem 1.8rem rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

.notification-button > span {
  position: relative;
  width: 1.05rem;
  height: 1.22rem;
  border: 1.7px solid currentColor;
  border-bottom: 0;
  border-radius: 999px 999px 0.42rem 0.42rem;
  color: rgba(255, 235, 188, 0.95);
}

.notification-button > span::before,
.notification-button > span::after {
  position: absolute;
  content: "";
}

.notification-button > span::before {
  left: 50%;
  top: -0.28rem;
  width: 0.24rem;
  height: 0.24rem;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}

.notification-button > span::after {
  left: 50%;
  bottom: -0.36rem;
  width: 0.44rem;
  height: 0.22rem;
  border-radius: 0 0 999px 999px;
  border-bottom: 1.7px solid currentColor;
  transform: translateX(-50%);
}

.message-unread-dot {
  position: absolute;
  right: 0.08rem;
  top: 0.02rem;
  display: grid;
  min-width: 1rem;
  height: 1rem;
  place-items: center;
  padding: 0 0.18rem;
  border: 1px solid rgba(255, 244, 218, 0.72);
  border-radius: 999px;
  background: linear-gradient(180deg, #f5d684, #c9993f);
  color: rgba(18, 13, 4, 0.92);
  font-size: 0.58rem;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 0 1rem rgba(226, 199, 120, 0.38);
}

.message-center-popover {
  position: absolute;
  top: calc(100% + 0.72rem);
  right: clamp(5rem, 7vw, 8rem);
  z-index: 60;
  display: grid;
  gap: 0.8rem;
  width: min(25rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 7rem));
  padding: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 12% 4%, rgba(206, 145, 92, 0.16), transparent 32%),
    radial-gradient(circle at 88% 0%, rgba(122, 173, 255, 0.12), transparent 26%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(5, 10, 16, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1.4rem 4rem rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(30px) saturate(1.18);
  -webkit-backdrop-filter: blur(30px) saturate(1.18);
}

.message-center-popover header,
.message-center-item footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.message-center-popover header strong {
  color: rgba(250, 250, 246, 0.98);
  font-size: 1.04rem;
}

.message-center-popover header button {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(240, 246, 248, 0.76);
  cursor: pointer;
}

.message-center-list {
  display: grid;
  gap: 0.58rem;
  min-height: 0;
  overflow: auto;
}

.message-center-item {
  display: grid;
  gap: 0.36rem;
  padding: 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.052);
}

.message-center-item.is-unread {
  border-color: rgba(226, 199, 120, 0.32);
  background:
    radial-gradient(circle at 0% 0%, rgba(226, 199, 120, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.065);
}

.message-center-item span,
.message-center-item small,
.message-empty {
  color: rgba(222, 232, 238, 0.62);
  font-size: 0.74rem;
}

.message-center-item strong {
  color: rgba(255, 242, 210, 0.98);
  font-size: 0.94rem;
}

.message-center-item p {
  margin: 0;
  color: rgba(238, 244, 246, 0.78);
  font-size: 0.82rem;
  line-height: 1.5;
}

.message-center-item a {
  color: rgba(255, 232, 178, 0.96);
  font-size: 0.78rem;
  font-weight: 720;
  text-decoration: none;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
}

.profile-settings-symbol {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(226, 193, 119, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(226, 193, 119, 0.92);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(116, 224, 255, 0.06);
  transition:
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}

.user-profile:hover .profile-settings-symbol {
  border-color: rgba(116, 224, 255, 0.42);
  background: rgba(116, 224, 255, 0.08);
  color: rgba(239, 244, 255, 0.96);
  transform: rotate(18deg);
}

.user-profile img {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  object-fit: cover;
}

@media (max-width: 1680px) {
  .member-pill,
  .support-pill,
  .user-profile span {
    display: none;
  }

  .user-area {
    gap: 0.45rem;
  }
}

@media (max-width: 1280px) {
  .user-area {
    display: none;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.topbar h2 {
  font-size: clamp(28px, 4.2vw, 58px);
  font-weight: 660;
  line-height: 1.02;
}

.endpoint-pill,
.chip,
.glass-button,
.select-like {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(18px) saturate(1.14);
}

.endpoint-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  color: var(--muted);
  white-space: nowrap;
}

.endpoint-pill span {
  color: var(--gold);
  font-size: 11px;
}

.endpoint-pill code {
  color: var(--cyan);
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
  gap: 16px;
  margin-bottom: 16px;
}

.hero-copy,
.hero-metrics,
.panel,
.module-card,
.piece-preview,
.report-line,
.profile-tile {
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background:
    radial-gradient(circle at 12% 12%, rgba(206, 145, 92, 0.06), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    var(--panel);
  backdrop-filter: blur(24px) saturate(1.18);
  box-shadow: var(--shadow);
}

.hero-copy {
  min-height: 190px;
  padding: clamp(22px, 4vw, 42px);
}

.hero-copy h3 {
  max-width: 980px;
  font-size: clamp(25px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.1;
}

.hero-copy p:last-child {
  max-width: 780px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.hero-metrics {
  display: grid;
  align-content: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  min-height: 190px;
  overflow: hidden;
}

.metric {
  display: grid;
  align-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.16);
}

.metric strong {
  color: var(--text);
  font-size: clamp(22px, 3.2vw, 38px);
  font-weight: 640;
}

.metric span {
  margin-top: 8px;
  color: var(--soft);
  font-size: 13px;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: start;
  gap: var(--grid-gap);
  min-height: 0;
  overflow: hidden;
}

.content-grid > * {
  min-width: 0;
}

.portal-strip {
  display: grid;
  grid-column: span 12;
  grid-auto-flow: column;
  grid-auto-columns: var(--portal-card-w);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--portal-gap);
  min-height: var(--portal-card-h);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.35rem;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

@media (max-width: 1280px) {
  .portal-strip {
    grid-template-columns: none;
  }
}

.portal-strip::-webkit-scrollbar {
  display: none;
}

.portal-card {
  --portal-card-pad: clamp(1.25rem, 1.7vw, 1.75rem);
  position: relative;
  display: grid;
  min-width: 0;
  min-height: var(--portal-card-h);
  overflow: hidden;
  padding: var(--portal-card-pad);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: clamp(0.7rem, 0.9vw, 0.9rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.04);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
  isolation: isolate;
  scroll-snap-align: start;
}

.portal-card.portal-bowing {
  --portal-card-pad: 0px;
  padding: 0;
}

.portal-card.portal-bowing > div {
  right: clamp(0.85rem, 1.3vw, 1.25rem);
  left: clamp(0.85rem, 1.3vw, 1.25rem);
}

.portal-card::before,
.portal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.portal-card::before {
  background:
    radial-gradient(circle at 72% 18%, rgba(140, 233, 242, 0.12), transparent 28%),
    linear-gradient(160deg, rgba(228, 199, 127, 0.12), transparent 45%);
}

.portal-card::after {
  opacity: 0.82;
  background: linear-gradient(180deg, transparent 0 28%, rgba(5, 6, 8, 0.78) 100%);
}

.portal-visual {
  position: absolute;
  top: clamp(1.35rem, 2.3vw, 2.2rem);
  right: clamp(0.85rem, 1.4vw, 1.35rem);
  left: clamp(0.85rem, 1.4vw, 1.35rem);
  height: clamp(10.5rem, 26vh, 17rem);
  z-index: 1;
  overflow: hidden;
  border-radius: 0.75rem;
  opacity: 0.92;
  pointer-events: none;
}

.portal-visual::before,
.portal-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.portal-visual::before {
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 24%, rgba(140, 233, 242, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
}

.portal-visual::after {
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(7, 8, 10, 0.82));
}

.portal-visual img,
.portal-visual span,
.portal-visual i,
.portal-visual b,
.portal-visual em {
  position: absolute;
}

.portal-visual img {
  user-select: none;
}

.portal-visual-fullbleed {
  top: calc(var(--portal-card-pad) * -1) !important;
  right: calc(var(--portal-card-pad) * -1) !important;
  bottom: calc(var(--portal-card-pad) * -1) !important;
  left: calc(var(--portal-card-pad) * -1) !important;
  width: auto;
  height: auto;
  border-radius: inherit;
  opacity: 1;
}

.portal-visual-fullbleed::before {
  border: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.34) 54%, rgba(0, 0, 0, 0.82) 100%),
    radial-gradient(circle at 54% 26%, rgba(228, 199, 127, 0.18), transparent 34%);
  z-index: 2;
}

.portal-visual-fullbleed::after {
  inset: 0;
  height: auto;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(3, 4, 5, 0.36), transparent 26%, transparent 72%, rgba(3, 4, 5, 0.28)),
    linear-gradient(180deg, transparent 0 46%, rgba(5, 6, 8, 0.86) 100%);
}

.portal-visual-fullbleed img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  filter: saturate(1.04) contrast(1.04) brightness(0.82);
}

.portal-visual-continue img {
  right: -22%;
  bottom: -20%;
  width: 118%;
  height: 118%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.06);
  opacity: 0.78;
}

.portal-visual-continue i {
  top: 18%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(228, 199, 127, 0.48), transparent);
  transform: rotate(-12deg);
}

.portal-visual-continue i:nth-of-type(1) { left: 28%; }
.portal-visual-continue i:nth-of-type(2) { left: 46%; }
.portal-visual-continue i:nth-of-type(3) { left: 64%; }

.pv-note {
  display: grid;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.42);
  border-radius: 50%;
  background: rgba(228, 199, 127, 0.14);
  color: var(--gold);
  box-shadow: 0 0 18px rgba(228, 199, 127, 0.18);
}

.pv-note-a {
  top: 29%;
  left: 20%;
  width: 2.1rem;
  height: 2.1rem;
}

.pv-note-b {
  top: 53%;
  left: 57%;
  width: 1.55rem;
  height: 1.55rem;
}

.portal-visual-generator {
  display: grid;
}

.portal-visual-generator .pv-staff {
  right: 8%;
  left: 8%;
  height: 1px;
  background: rgba(228, 199, 127, 0.34);
}

.portal-visual-generator .pv-staff:nth-child(1) { top: 31%; }
.portal-visual-generator .pv-staff:nth-child(2) { top: 41%; }
.portal-visual-generator .pv-staff:nth-child(3) { top: 51%; }
.portal-visual-generator .pv-staff:nth-child(4) { top: 61%; }

.portal-visual-generator b {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: rgba(140, 233, 242, 0.22);
  box-shadow: 0 0 22px rgba(140, 233, 242, 0.22);
}

.portal-visual-generator b:nth-of-type(1) { top: 36%; left: 25%; }
.portal-visual-generator b:nth-of-type(2) { top: 50%; left: 48%; }
.portal-visual-generator b:nth-of-type(3) { top: 42%; left: 70%; }

.portal-visual-generator em {
  top: 13%;
  right: 13%;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.4);
  border-radius: 50%;
  background: rgba(228, 199, 127, 0.12);
  color: rgba(255, 232, 190, 0.9);
  font-style: normal;
  font-weight: 700;
}

.portal-visual-pieces span {
  right: 12%;
  left: 12%;
  height: 2.8rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.55rem;
  background: linear-gradient(135deg, rgba(228, 199, 127, 0.14), rgba(140, 233, 242, 0.06));
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
}

.portal-visual-pieces span:nth-child(1) { top: 18%; transform: rotate(-3deg); }
.portal-visual-pieces span:nth-child(2) { top: 36%; transform: rotate(2deg); }
.portal-visual-pieces span:nth-child(3) { top: 54%; transform: rotate(-1deg); }

.portal-visual-pieces i {
  top: 25%;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(140, 233, 242, 0.36);
}

.portal-visual-pieces i:nth-of-type(1) { left: 22%; }
.portal-visual-pieces i:nth-of-type(2) { right: 22%; top: 60%; background: var(--gold); }

.portal-visual-waterfall img {
  inset: -20% auto auto 50%;
  width: 74%;
  height: 145%;
  object-fit: cover;
  transform: translateX(-50%);
  opacity: 0.55;
  filter: saturate(1.06) contrast(1.05);
}

.portal-visual-waterfall i {
  top: 10%;
  bottom: 8%;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(140, 233, 242, 0.18), rgba(140, 233, 242, 0.78), rgba(228, 199, 127, 0.22));
  transform: rotate(5deg);
}

.portal-visual-waterfall i:nth-of-type(1) { left: 34%; }
.portal-visual-waterfall i:nth-of-type(2) { left: 50%; }
.portal-visual-waterfall i:nth-of-type(3) { left: 66%; }

.portal-visual-waterfall b {
  right: 15%;
  bottom: 17%;
  left: 15%;
  height: 2px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.28);
}

.portal-visual-fingering img {
  inset: -18% auto auto 50%;
  width: 82%;
  height: 138%;
  object-fit: cover;
  transform: translateX(-50%) rotate(-6deg);
  opacity: 0.52;
  filter: saturate(0.92) contrast(1.08);
}

.portal-visual-fingering span {
  display: grid;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.48);
  border-radius: 50%;
  background: rgba(228, 199, 127, 0.18);
  color: rgba(255, 232, 190, 0.92);
  font-weight: 700;
  box-shadow: 0 0 22px rgba(228, 199, 127, 0.2);
}

.portal-visual-fingering span:nth-of-type(1) {
  top: 22%;
  left: 28%;
  width: 2.35rem;
  height: 2.35rem;
}

.portal-visual-fingering span:nth-of-type(2) {
  top: 42%;
  left: 52%;
  width: 2rem;
  height: 2rem;
  opacity: 0.85;
}

.portal-visual-fingering span:nth-of-type(3) {
  top: 61%;
  left: 36%;
  width: 1.65rem;
  height: 1.65rem;
  opacity: 0.72;
}

.portal-visual-bowing {
  z-index: 0;
  background: transparent;
}

.portal-visual-bowing img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 46%;
  transform: none;
  filter:
    saturate(1.05)
    contrast(1.04)
    brightness(0.82);
}

.portal-visual-tuner .pv-meter {
  top: 45%;
  right: 10%;
  left: 10%;
  height: 0.45rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(140, 233, 242, 0.2), rgba(228, 199, 127, 0.82), rgba(140, 233, 242, 0.2));
}

.portal-visual-tuner .pv-needle {
  top: 29%;
  left: calc(50% - 1px);
  width: 2px;
  height: 4.2rem;
  border-radius: 999px;
  background: rgba(255, 232, 190, 0.92);
  box-shadow: 0 0 18px rgba(228, 199, 127, 0.42);
}

.portal-visual-tuner b {
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 232, 190, 0.95);
  font-size: 1.6rem;
}

.portal-visual-tuner i {
  top: 57%;
  width: 1px;
  height: 1.1rem;
  background: rgba(140, 233, 242, 0.4);
}

.portal-visual-tuner i:nth-of-type(1) { left: 18%; }
.portal-visual-tuner i:nth-of-type(2) { left: 36%; }
.portal-visual-tuner i:nth-of-type(3) { left: 64%; }
.portal-visual-tuner i:nth-of-type(4) { left: 82%; }

.portal-wide {
  grid-column: auto;
  min-width: 0;
}

.portal-continue::before {
  background:
    linear-gradient(180deg, transparent 30%, rgba(5, 6, 8, 0.85)),
    url("/player/assets/violin-master-cropped.png") center / cover no-repeat;
}

.portal-generator::before,
.portal-pieces::before,
.portal-practice::before,
.portal-teacher::before,
.portal-tuner::before,
.portal-symbols::before,
.portal-settings::before {
  background:
    radial-gradient(circle at 50% 24%, rgba(228, 199, 127, 0.14), transparent 28%),
    linear-gradient(110deg, rgba(228, 199, 127, 0.1), rgba(140, 233, 242, 0.055));
}

.portal-pieces::before,
.portal-tuner::before {
  background:
    radial-gradient(circle at 50% 24%, rgba(140, 233, 242, 0.16), transparent 30%),
    linear-gradient(110deg, rgba(140, 233, 242, 0.1), rgba(228, 199, 127, 0.05));
}

.portal-card > div,
.portal-action {
  position: absolute;
  z-index: 2;
}

.portal-card > div {
  bottom: clamp(6.7rem, 13vh, 9rem);
  right: clamp(0.85rem, 1.3vw, 1.25rem);
  left: clamp(0.85rem, 1.3vw, 1.25rem);
  display: grid;
  grid-template-rows: auto clamp(3.4rem, 6vh, 4.55rem);
  align-items: start;
  justify-items: center;
  text-align: center;
  transform: none;
}

.portal-number {
  display: none;
  margin-bottom: 0;
  color: rgba(228, 199, 127, 0.6);
  font-size: 0.78rem;
}

.portal-wide .portal-number {
  margin-bottom: 0;
}

.portal-card h3 {
  width: auto;
  max-width: 100%;
  margin: 0;
  color: rgba(255, 232, 190, 0.98);
  font-size: clamp(1.55rem, 2vw, 2.15rem);
  line-height: 1.12;
  word-break: keep-all;
  overflow-wrap: normal;
}

.portal-card p {
  display: grid;
  min-height: clamp(3.4rem, 6vh, 4.55rem);
  align-items: start;
  max-width: min(12.5rem, 100%);
  margin: clamp(0.9rem, 1.25vw, 1.05rem) auto 0;
  color: var(--muted);
  line-height: 1.55;
}

.portal-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  bottom: clamp(2.2rem, 5vh, 3.6rem);
  left: 50%;
  justify-self: center;
  max-width: 100%;
  min-height: clamp(2.5rem, 3vw, 2.9rem);
  margin-top: 0;
  padding: 0 clamp(1rem, 1.35vw, 1.25rem);
  border: 1px solid rgba(228, 199, 127, 0.4);
  border-radius: 0.65rem;
  background: linear-gradient(135deg, rgba(228, 199, 127, 0.25), rgba(140, 233, 242, 0.08));
  color: var(--text);
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%) translateY(0.08rem);
}

.portal-action span {
  line-height: 1;
}

.dashboard-card,
.home-hero,
.home-studio,
.feature-card,
.quick-panel,
.teacher-guide {
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.038)),
    rgba(255, 255, 255, 0.04);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
}

.home-studio,
.feature-card,
.quick-panel,
.teacher-guide {
  position: relative;
  overflow: hidden;
}

.home-studio {
  display: grid;
  grid-template-columns: minmax(12rem, 0.25fr) minmax(0, 1fr);
  min-height: clamp(20rem, 31vw, 25rem);
}

.studio-violin-art {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-right: 1px solid rgba(228, 199, 127, 0.18);
  background:
    radial-gradient(circle at 68% 30%, rgba(228, 199, 127, 0.24), transparent 26%),
    linear-gradient(180deg, rgba(228, 199, 127, 0.08), rgba(0, 0, 0, 0.52));
}

.studio-violin-art img {
  position: absolute;
  inset: -7% auto auto -18%;
  width: min(28rem, 34vw);
  height: 115%;
  object-fit: cover;
  opacity: 0.9;
  filter: saturate(1.08) contrast(1.08);
}

.studio-violin-art::after,
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 56%, rgba(228, 199, 127, 0.18), transparent 28%),
    linear-gradient(90deg, transparent, rgba(5, 6, 8, 0.55));
  pointer-events: none;
}

.studio-dashboard {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(1rem, 1.4vw, 1.25rem);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
}

.studio-greeting {
  display: grid;
  grid-template-columns: minmax(0, auto) auto 1fr;
  align-items: start;
  gap: clamp(0.75rem, 1.2vw, 1rem);
}

.studio-greeting h2 {
  margin: 0;
  color: var(--gold);
  font-size: clamp(1.55rem, 2.25vw, 2rem);
  line-height: 1.15;
}

.studio-greeting p {
  margin: 0.5rem 0 0;
  color: var(--muted);
}

.studio-level {
  padding-top: 0.15rem;
}

.studio-level span {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border: 1px solid rgba(228, 199, 127, 0.34);
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.1);
  color: var(--gold);
  font-size: 0.78rem;
}

.studio-streak {
  justify-self: end;
  color: rgba(247, 250, 252, 0.8);
  white-space: nowrap;
}

.studio-streak strong {
  color: var(--gold);
  font-size: 1.3em;
}

.studio-summary {
  display: grid;
  grid-template-columns: minmax(16rem, 0.82fr) minmax(20rem, 1fr) minmax(13rem, 0.62fr);
  gap: var(--grid-gap);
}

.progress-panel,
.task-panel,
.advice-panel {
  min-width: 0;
  padding: var(--card-pad);
  border: 1px solid rgba(228, 199, 127, 0.14);
  border-radius: var(--card-radius);
  background:
    linear-gradient(145deg, rgba(228, 199, 127, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.22);
}

.progress-panel h3,
.task-panel h3,
.advice-panel h3,
.feature-card h3,
.quick-panel h3,
.teacher-guide h3 {
  margin: 0;
  color: rgba(255, 232, 190, 0.96);
  font-size: clamp(1rem, 1.25vw, 1.25rem);
}

.progress-body {
  display: grid;
  grid-template-columns: var(--ring-size) minmax(0, 1fr);
  gap: clamp(1rem, 1.4vw, 1.4rem);
  align-items: center;
  margin-top: clamp(1.15rem, 1.8vw, 1.75rem);
}

.studio-ring {
  --ring-size: clamp(7.25rem, 9vw, 9rem);
}

.study-metrics {
  display: grid;
  gap: clamp(0.75rem, 1.1vw, 1rem);
}

.study-metrics p {
  display: grid;
  gap: 0.2rem;
  margin: 0;
}

.study-metrics span {
  color: var(--muted);
  font-size: clamp(0.78rem, 0.9vw, 0.875rem);
}

.study-metrics strong {
  color: var(--text);
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
}

.home-task-list {
  display: grid;
  gap: clamp(0.55rem, 0.85vw, 0.75rem);
  margin-top: clamp(0.85rem, 1.25vw, 1.1rem);
}

.home-task-row {
  display: grid;
  grid-template-columns: clamp(2rem, 2.6vw, 2.35rem) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(0.6rem, 0.9vw, 0.875rem);
  min-height: clamp(3.25rem, 4.15vw, 3.8rem);
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--card-radius);
  background: rgba(255, 255, 255, 0.045);
}

.task-badge {
  display: grid;
  width: clamp(1.8rem, 2.35vw, 2.15rem);
  height: clamp(1.8rem, 2.35vw, 2.15rem);
  place-items: center;
  border-radius: 50%;
  background: rgba(228, 199, 127, 0.16);
  color: var(--gold);
  font-weight: 700;
}

.home-task-row strong,
.home-task-row em {
  display: block;
}

.home-task-row em {
  margin-top: 0.15rem;
  color: var(--muted);
  font-style: normal;
  font-size: clamp(0.75rem, 0.9vw, 0.84rem);
}

.home-task-row small {
  color: var(--muted);
  white-space: nowrap;
}

.home-task-row b {
  display: grid;
  min-height: 2rem;
  place-items: center;
  padding: 0 0.8rem;
  border: 1px solid rgba(228, 199, 127, 0.3);
  border-radius: 0.45rem;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 500;
}

.advice-panel {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.advice-medal {
  display: grid;
  width: clamp(3.25rem, 4.4vw, 4.25rem);
  height: clamp(3.25rem, 4.4vw, 4.25rem);
  margin: clamp(1rem, 1.6vw, 1.5rem) 0 0.75rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(228, 199, 127, 0.16);
  color: var(--gold);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.advice-panel strong {
  color: var(--text);
}

.advice-panel p {
  margin: 0.4rem 0 0.75rem;
  color: var(--muted);
}

.feature-card {
  display: grid;
  min-height: clamp(14rem, 19vw, 18rem);
  padding: clamp(1.5rem, 2.2vw, 2rem);
}

.feature-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: start;
  max-width: min(22rem, 70%);
}

.feature-copy h3 {
  font-size: clamp(2rem, 3vw, 2.75rem);
}

.feature-copy p,
.teacher-guide p {
  color: var(--muted);
}

.gold-cta.inline {
  width: auto;
  min-width: clamp(8rem, 11vw, 10rem);
  padding-right: clamp(1.25rem, 1.7vw, 1.6rem);
  padding-left: clamp(1.25rem, 1.7vw, 1.6rem);
}

.generate-feature {
  background:
    radial-gradient(circle at 72% 54%, rgba(228, 199, 127, 0.2), transparent 30%),
    linear-gradient(135deg, rgba(228, 199, 127, 0.12), rgba(0, 0, 0, 0.12)),
    rgba(255, 255, 255, 0.04);
}

.library-feature {
  background:
    radial-gradient(circle at 70% 58%, rgba(140, 233, 242, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(140, 233, 242, 0.09), rgba(228, 199, 127, 0.055)),
    rgba(255, 255, 255, 0.04);
}

.golden-violin {
  position: absolute;
  right: 4%;
  bottom: -18%;
  width: min(18rem, 34vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(228, 199, 127, 0.18), transparent 38%),
    url("/player/assets/violin-master-real-alpha.png") center / contain no-repeat;
  filter: sepia(0.35) saturate(1.25) drop-shadow(0 0 2rem rgba(228, 199, 127, 0.22));
  transform: rotate(24deg);
}

.library-stack-preview {
  position: absolute;
  right: clamp(1.25rem, 2.8vw, 2.4rem);
  bottom: clamp(1.1rem, 1.8vw, 1.5rem);
  display: grid;
  grid-auto-flow: column;
  gap: 0.7rem;
  align-items: end;
  perspective: 900px;
}

.library-stack-preview article {
  display: grid;
  align-content: end;
  width: clamp(6rem, 8.4vw, 7.75rem);
  aspect-ratio: 0.72;
  padding: 0.75rem;
  border: 1px solid rgba(228, 199, 127, 0.2);
  border-radius: 0.75rem;
  background:
    linear-gradient(180deg, rgba(228, 199, 127, 0.14), rgba(0, 0, 0, 0.72)),
    url("/player/assets/violin-master-cropped.png") center / cover;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.42);
}

.library-stack-preview article:nth-child(1) {
  transform: rotateY(-18deg) translateX(1rem) scale(0.92);
  opacity: 0.52;
}

.library-stack-preview article:nth-child(2) {
  transform: rotateY(-7deg);
  z-index: 2;
}

.library-stack-preview article:nth-child(3) {
  transform: rotateY(16deg) translateX(-1rem) scale(0.9);
  opacity: 0.45;
}

.library-stack-preview span,
.library-stack-preview strong,
.library-stack-preview em {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--text);
  font-style: normal;
}

.library-stack-preview strong,
.library-stack-preview em {
  color: var(--muted);
  font-size: 0.7rem;
}

.quick-panel,
.teacher-guide {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.5vw, 1.4rem);
  min-height: clamp(5rem, 7vw, 6.4rem);
  padding: clamp(1rem, 1.4vw, 1.25rem);
}

.quick-panel h3 {
  flex: 0 0 auto;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.85vw, 0.75rem);
  width: 100%;
}

.quick-actions button {
  display: inline-flex;
  min-height: clamp(3rem, 3.8vw, 3.45rem);
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--card-radius);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  cursor: pointer;
}

.quick-actions span {
  color: var(--gold);
  font-size: 1.2rem;
}

.teacher-guide {
  justify-content: space-between;
  background:
    radial-gradient(circle at 88% 50%, rgba(140, 233, 242, 0.16), transparent 28%),
    rgba(255, 255, 255, 0.04);
}

.teacher-orb {
  flex: 0 0 clamp(4rem, 6.2vw, 5.5rem);
  width: clamp(4rem, 6.2vw, 5.5rem);
  aspect-ratio: 1;
  border: 1px solid rgba(140, 233, 242, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(140, 233, 242, 0.85) 0 10%, transparent 11%),
    radial-gradient(circle at 35% 44%, rgba(140, 233, 242, 0.9) 0 4%, transparent 5%),
    radial-gradient(circle at 65% 44%, rgba(140, 233, 242, 0.9) 0 4%, transparent 5%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(140, 233, 242, 0.06));
  box-shadow: 0 0 1.8rem rgba(140, 233, 242, 0.2);
}

.home-hero {
  position: relative;
  display: grid;
  min-height: var(--hero-min-h);
  overflow: hidden;
  padding: var(--hero-pad-y) var(--hero-pad-x);
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 70%, rgba(228, 199, 127, 0.18), transparent 26%),
    linear-gradient(90deg, rgba(5, 8, 11, 0.96), rgba(8, 11, 15, 0.72), rgba(5, 8, 11, 0.2));
  z-index: 1;
}

.home-hero h3,
.home-hero p {
  position: relative;
  z-index: 2;
}

.home-hero h3 {
  margin: 0 0 clamp(0.75rem, 1.2vw, 1.125rem);
  font-size: clamp(2rem, 3.6vw, 3.625rem);
  font-weight: 800;
}

.home-hero p {
  max-width: 780px;
  margin: 0;
  color: rgba(242, 244, 247, 0.72);
  font-size: clamp(0.9375rem, 1.3vw, 1.1875rem);
}

.home-hero img {
  position: absolute;
  right: -6%;
  top: -48%;
  z-index: 0;
  width: min(45rem, 52vw);
  opacity: 0.88;
  transform: rotate(66deg);
}

.dashboard-card {
  min-width: 0;
  padding: var(--card-pad);
}

.dashboard-card.span-3 {
  grid-column: span 3;
}

.dashboard-card.span-4 {
  grid-column: span 4;
}

.dashboard-card.span-6 {
  grid-column: span 6;
}

.panel-header.compact {
  align-items: center;
  margin-bottom: clamp(0.75rem, 1.2vw, 1.125rem);
}

.panel-header.compact h3 {
  font-size: clamp(1rem, 1.25vw, 1.1875rem);
}

.today-card {
  position: relative;
  overflow: hidden;
  min-height: clamp(17.5rem, 23vw, 21.25rem);
}

.today-card h4 {
  margin: clamp(1.75rem, 3.1vw, 2.75rem) 0 clamp(0.625rem, 1vw, 0.875rem);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
}

.level-pill {
  display: inline-flex;
  padding: 0.3125rem 0.625rem;
  border: 1px solid rgba(228, 199, 127, 0.32);
  border-radius: 8px;
  color: var(--gold);
  font-size: clamp(0.75rem, 0.9vw, 0.8125rem);
}

.mini-progress {
  height: clamp(0.3rem, 0.45vw, 0.375rem);
  margin: clamp(1.125rem, 2vw, 1.75rem) 0 clamp(0.625rem, 1vw, 0.875rem);
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
}

.mini-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
}

.today-card p {
  display: flex;
  gap: 0.75rem;
  color: var(--cyan);
  font-size: clamp(0.8125rem, 0.96vw, 0.875rem);
}

.gold-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--control-height);
  margin-top: clamp(1.25rem, 2.4vw, 2.125rem);
  border: 1px solid rgba(228, 199, 127, 0.45);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(159, 111, 40, 0.44), rgba(228, 199, 127, 0.16));
  color: var(--text);
  font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
}

.gold-cta.small {
  min-height: clamp(2.5rem, 3.1vw, 2.875rem);
  margin-top: clamp(0.625rem, 1vw, 0.875rem);
  font-size: clamp(0.875rem, 1.05vw, 1rem);
}

.gold-cta.centered {
  width: min(20rem, 72%);
  margin-right: auto;
  margin-left: auto;
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.filter-row {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 0.9fr);
  gap: clamp(0.5rem, 0.8vw, 0.75rem);
  margin-bottom: clamp(0.75rem, 1.1vw, 1rem);
}

.filter-row span,
.filter-row button,
.generate-fields button,
.string-row button {
  min-height: clamp(2.25rem, 2.7vw, 2.5rem);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  color: var(--muted);
  padding: clamp(0.45rem, 0.65vw, 0.5625rem) clamp(0.625rem, 0.9vw, 0.8125rem);
}

.library-row {
  display: grid;
  grid-template-columns: var(--thumb-w) minmax(0, 1fr) minmax(3.4rem, 0.45fr) minmax(3.75rem, 0.42fr) minmax(4.9rem, 0.55fr) minmax(4.1rem, 0.45fr);
  align-items: center;
  gap: clamp(0.5rem, 0.95vw, 0.875rem);
  padding: clamp(0.5rem, 0.75vw, 0.625rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.library-row > * {
  min-width: 0;
}

.cover-thumb {
  width: var(--thumb-w);
  height: var(--thumb-h);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(140, 233, 242, 0.24), rgba(228, 199, 127, 0.12)),
    url("/player/assets/violin-master-cropped.png") center / cover;
}

.library-row strong,
.library-row span {
  display: block;
}

.library-row span {
  color: var(--muted);
}

.library-row em {
  justify-self: start;
  padding: 5px 9px;
  border: 1px solid rgba(140, 233, 242, 0.22);
  border-radius: 8px;
  color: var(--gold);
  font-style: normal;
  font-size: 13px;
}

.library-row b {
  color: var(--gold);
  font-weight: 600;
}

.library-row a {
  display: grid;
  min-height: clamp(2.25rem, 2.7vw, 2.375rem);
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.34);
  border-radius: 8px;
  background: rgba(228, 199, 127, 0.12);
}

.connected {
  color: #70d9a6;
  font-size: 14px;
}

.tuner-display {
  display: grid;
  min-height: clamp(8.5rem, 10.7vw, 9.625rem);
  place-items: center;
  border: 1px solid rgba(140, 233, 242, 0.12);
  border-radius: 12px;
  background: rgba(140, 233, 242, 0.06);
}

.tuner-display span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.tuner-display strong {
  font-size: clamp(1.6rem, 2.25vw, 2rem);
}

.tuner-display small {
  margin-left: 4px;
  color: var(--text);
}

.tuner-display p {
  margin: -8px 0 4px;
}

.tuner-pro-panel,
.tuner-hand-panel {
  overflow: hidden;
}

.tuner-hand-panel {
  display: grid;
  grid-template-rows: auto minmax(11rem, 1fr) auto auto auto;
  gap: clamp(0.5rem, 0.7vw, 0.7rem);
  min-height: 0;
}

.tuner-hand-panel .panel-header {
  margin-bottom: 0;
}

.tuner-hand-panel .panel-header p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tuner-pro-meter {
  display: grid;
  gap: clamp(0.8rem, 1vw, 1rem);
  padding: clamp(1rem, 1.5vw, 1.35rem);
  border: 1px solid rgba(140, 233, 242, 0.16);
  border-radius: calc(var(--radius) * 0.8);
  background:
    radial-gradient(circle at 50% 22%, rgba(140, 233, 242, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
}

.tuner-cent-scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

.tuner-cent-scale .is-center {
  color: var(--gold);
  font-weight: 700;
}

.tuner-arc {
  position: relative;
  min-height: clamp(13rem, 18vw, 17rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tuner-arc::before {
  position: absolute;
  right: 5%;
  bottom: 2%;
  left: 5%;
  height: 85%;
  border: 2px solid rgba(140, 233, 242, 0.2);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(circle at 50% 100%, rgba(228, 199, 127, 0.11), transparent 36%),
    linear-gradient(90deg, rgba(140, 233, 242, 0.08), rgba(228, 199, 127, 0.12), rgba(140, 233, 242, 0.08));
  content: "";
}

.tuner-arc i {
  position: absolute;
  bottom: 2%;
  left: 50%;
  width: 2px;
  height: calc(1.1rem + (var(--tick) % 5) * 0.18rem);
  border-radius: 999px;
  background: rgba(224, 236, 241, 0.3);
  transform:
    rotate(calc((var(--tick) - 12) * 5deg))
    translateY(clamp(-7.6rem, -10vw, -9.6rem));
  transform-origin: center bottom;
}

.tuner-arc b {
  position: absolute;
  bottom: 2%;
  left: 50%;
  width: 3px;
  height: 76%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(228, 199, 127, 0.95), rgba(228, 199, 127, 0.12));
  box-shadow: 0 0 1rem rgba(228, 199, 127, 0.28);
  transform: translateX(-50%);
}

.tuner-arc em {
  position: absolute;
  bottom: 2%;
  left: 50%;
  width: 4px;
  height: 78%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(140, 233, 242, 0.98), rgba(140, 233, 242, 0.12));
  box-shadow: 0 0 1.2rem rgba(140, 233, 242, 0.34);
  transform: translateX(-50%) rotate(calc(var(--needle-offset) * 0.8deg));
  transform-origin: center bottom;
}

.tuner-current-note {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  margin-top: -0.5rem;
}

.tuner-current-note span,
.tuner-current-note small {
  color: var(--muted);
}

.tuner-current-note strong {
  color: var(--gold);
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  line-height: 0.95;
  text-shadow: 0 0 1.5rem rgba(228, 199, 127, 0.16);
}

.tuner-string-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.55rem, 0.8vw, 0.75rem);
}

.tuner-string {
  display: grid;
  gap: 0.18rem;
  min-height: clamp(5.5rem, 7.5vw, 6.8rem);
  padding: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--radius) * 0.75);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  cursor: pointer;
}

.tuner-string strong {
  color: var(--cyan);
  font-size: clamp(1.4rem, 2.1vw, 2rem);
}

.tuner-string span,
.tuner-string small {
  color: var(--muted);
}

.tuner-string.is-active {
  border-color: rgba(228, 199, 127, 0.36);
  background: linear-gradient(145deg, rgba(228, 199, 127, 0.13), rgba(140, 233, 242, 0.07));
  box-shadow: 0 0 1.6rem rgba(228, 199, 127, 0.1);
}

.tuner-string.is-active strong {
  color: var(--gold);
}

.tuner-pegbox {
  position: relative;
  min-height: 0;
  height: clamp(12.5rem, 21vh, 16rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--radius) * 0.8);
  background:
    radial-gradient(circle at 72% 34%, rgba(228, 199, 127, 0.13), transparent 24%),
    radial-gradient(circle at 28% 68%, rgba(140, 233, 242, 0.1), transparent 28%),
    rgba(0, 0, 0, 0.16);
}

.pegbox-neck {
  position: absolute;
  left: 46%;
  top: 10%;
  width: 18%;
  height: 78%;
  border: 1px solid rgba(228, 199, 127, 0.18);
  border-radius: 1.2rem;
  background: linear-gradient(180deg, rgba(16, 24, 32, 0.86), rgba(4, 6, 8, 0.86));
  transform: rotate(5deg);
}

.peg {
  position: absolute;
  z-index: 2;
  display: grid;
  width: clamp(2.15rem, 3vw, 2.8rem);
  height: clamp(2.15rem, 3vw, 2.8rem);
  place-items: center;
  border: 1px solid rgba(140, 233, 242, 0.18);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035));
  color: var(--muted);
  font-weight: 800;
}

.peg.is-active {
  border-color: rgba(228, 199, 127, 0.42);
  color: var(--gold);
  box-shadow: 0 0 1.5rem rgba(228, 199, 127, 0.18);
}

.peg-g { left: 18%; top: 20%; }
.peg-d { left: 18%; bottom: 22%; }
.peg-a { right: 18%; top: 22%; }
.peg-e { right: 18%; bottom: 20%; }

.tuner-hand {
  position: absolute;
  right: 24%;
  top: 25%;
  z-index: 3;
  width: clamp(3.7rem, 5.4vw, 5rem);
  height: clamp(2.55rem, 3.8vw, 3.5rem);
  border-radius: 48% 42% 45% 40%;
  background:
    radial-gradient(circle at 76% 32%, rgba(255, 230, 190, 0.74), transparent 18%),
    linear-gradient(135deg, rgba(228, 199, 127, 0.72), rgba(140, 233, 242, 0.18));
  filter: drop-shadow(0 1rem 1.8rem rgba(0, 0, 0, 0.28));
  transform: rotate(-18deg);
}

.turn-arrow {
  position: absolute;
  right: 13%;
  top: 12%;
  z-index: 4;
  color: var(--gold);
  font-size: clamp(1.55rem, 2.35vw, 2.15rem);
  font-style: normal;
  animation: tunerTurn 1.8s ease-in-out infinite;
}

.tuner-instruction-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  min-height: 0;
}

.tuner-instruction-list article {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
  padding: 0.55rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--radius) * 0.65);
  background: rgba(255, 255, 255, 0.04);
}

.tuner-instruction-list strong {
  color: var(--gold);
  font-size: 0.82rem;
  white-space: nowrap;
}

.tuner-instruction-list span {
  color: var(--muted);
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.74rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tuner-hand-panel .row {
  gap: 0.35rem;
}

.tuner-hand-panel .chip {
  max-width: 100%;
  padding: 0.36rem 0.55rem;
  font-size: 0.74rem;
}

.tuner-hand-panel > .muted {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@keyframes tunerTurn {
  0%, 100% { transform: rotate(-10deg); opacity: 0.75; }
  50% { transform: rotate(18deg); opacity: 1; }
}

.wave-bars {
  display: flex;
  align-items: center;
  gap: clamp(0.125rem, 0.22vw, 0.1875rem);
  height: clamp(1.8rem, 2.4vw, 2.125rem);
}

.wave-bars i {
  width: clamp(0.125rem, 0.22vw, 0.1875rem);
  border-radius: 999px;
  background: rgba(81, 218, 210, 0.55);
}

.string-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 0.8vw, 0.75rem);
  margin-top: clamp(0.625rem, 1vw, 0.875rem);
}

.string-row button {
  border-radius: 8px;
  color: var(--text);
}

.string-row button.active {
  border-color: rgba(140, 233, 242, 0.42);
  background: rgba(140, 233, 242, 0.18);
}

.score-sheet {
  position: relative;
  display: grid;
  gap: clamp(0.625rem, 0.9vw, 0.8125rem);
  min-height: clamp(8.25rem, 11vw, 9.875rem);
  padding: clamp(1.125rem, 1.9vw, 1.75rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
}

.score-sheet i {
  height: 1px;
  background: rgba(228, 199, 127, 0.35);
}

.score-sheet span {
  position: absolute;
  top: clamp(0.75rem, 1.2vw, 1.125rem);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 232, 190, 0.82);
  font-size: 12px;
}

.generate-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.generate-fields button {
  border-radius: 8px;
  text-align: left;
}

.practice-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 0.8vw, 0.75rem);
}

.practice-modes a {
  display: grid;
  gap: clamp(0.45rem, 0.7vw, 0.625rem);
  min-height: clamp(9rem, 12vw, 10.875rem);
  padding: clamp(0.875rem, 1.45vw, 1.375rem) clamp(0.625rem, 0.95vw, 0.875rem);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}

.practice-modes a.active {
  border-color: rgba(140, 233, 242, 0.44);
  background: rgba(140, 233, 242, 0.08);
}

.practice-modes b {
  color: var(--gold);
  font-size: clamp(2rem, 2.8vw, 2.5rem);
}

.practice-modes span {
  color: var(--muted);
  font-size: clamp(0.75rem, 0.9vw, 0.8125rem);
  line-height: 1.5;
}

.progress-layout {
  display: grid;
  grid-template-columns: minmax(7.5rem, var(--ring-size)) minmax(0, 1fr);
  gap: clamp(1rem, 1.9vw, 1.75rem);
  align-items: center;
}

.ring-progress {
  display: grid;
  width: var(--ring-size);
  height: var(--ring-size);
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(6, 8, 10, 0.94) 55%, transparent 57%),
    conic-gradient(var(--cyan) 0 72%, rgba(255, 255, 255, 0.1) 72% 100%);
}

.ring-progress strong {
  margin-bottom: calc(var(--ring-size) * -0.28);
  font-size: clamp(1.875rem, 2.7vw, 2.4375rem);
}

.ring-progress span {
  margin-top: calc(var(--ring-size) * -0.22);
  color: var(--muted);
}

.skill-bars {
  display: grid;
  gap: clamp(0.5rem, 0.85vw, 0.75rem);
}

.skill-bars label {
  display: grid;
  grid-template-columns: minmax(3.5rem, 0.48fr) 1fr minmax(2.35rem, 0.32fr);
  gap: clamp(0.45rem, 0.7vw, 0.625rem);
  align-items: center;
  color: var(--muted);
}

.skill-bars i {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.skill-bars b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), rgba(255, 229, 173, 0.9));
}

.study-stats {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: clamp(0.875rem, 1.5vw, 1.375rem);
  padding-top: clamp(0.75rem, 1.2vw, 1.125rem);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--muted);
}

.panel {
  min-width: 0;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background:
    radial-gradient(circle at 12% 12%, rgba(206, 145, 92, 0.06), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
}

.panel.span-4 {
  grid-column: span 4;
}

.panel.span-5 {
  grid-column: span 5;
}

.panel.span-6 {
  grid-column: span 6;
}

.panel.span-7 {
  grid-column: span 7;
}

.panel.span-8 {
  grid-column: span 8;
}

.panel.span-12 {
  grid-column: span 12;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(0.625rem, 0.95vw, 0.875rem);
  margin-bottom: clamp(0.75rem, 1.1vw, 1rem);
}

.panel h3 {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  font-weight: 700;
}

.panel h4 {
  font-size: clamp(0.9375rem, 1.08vw, 1rem);
  font-weight: 650;
}

.muted {
  color: var(--muted);
  line-height: 1.65;
}

.stack {
  display: grid;
  gap: clamp(0.5rem, 0.8vw, 0.75rem);
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.45rem, 0.7vw, 0.625rem);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: clamp(1.75rem, 2.1vw, 1.875rem);
  padding: clamp(0.3rem, 0.45vw, 0.375rem) clamp(0.5rem, 0.7vw, 0.625rem);
  color: var(--muted);
  font-size: clamp(0.75rem, 0.9vw, 0.8125rem);
}

.chip.cyan {
  border-color: rgba(122, 173, 255, 0.28);
  color: var(--cyan);
}

.chip.gold {
  border-color: rgba(206, 145, 92, 0.3);
  color: var(--gold);
}

.glass-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(2.25rem, 2.65vw, 2.375rem);
  padding: clamp(0.45rem, 0.65vw, 0.5625rem) clamp(0.625rem, 0.9vw, 0.8125rem);
  color: var(--text);
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(18px) saturate(1.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.55rem 1.2rem rgba(0, 0, 0, 0.2);
}

.glass-button:hover {
  border-color: rgba(206, 145, 92, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

.glass-button.primary {
  border-color: rgba(206, 145, 92, 0.32);
  background:
    linear-gradient(135deg, rgba(206, 145, 92, 0.28), rgba(122, 173, 255, 0.16)),
    rgba(255, 255, 255, 0.04);
  color: rgba(255, 245, 232, 0.98);
}

.module-card {
  display: grid;
  gap: clamp(0.5rem, 0.8vw, 0.75rem);
  min-height: clamp(8.5rem, 11.4vw, 10.25rem);
  padding: var(--card-pad);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}

.module-card:hover {
  border-color: rgba(206, 145, 92, 0.3);
  background:
    radial-gradient(circle at 12% 12%, rgba(206, 145, 92, 0.06), transparent 24%),
    rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

.module-card .card-title {
  font-size: clamp(1.125rem, 1.45vw, 1.3125rem);
  font-weight: 650;
}

.module-card p {
  margin: 0;
}

.task-line,
.accordion-item,
.piece-preview,
.report-line,
.profile-tile {
  padding: clamp(0.75rem, 1vw, 0.875rem);
}

.piece-preview.is-selected {
  border-color: rgba(228, 199, 127, 0.28);
  background:
    linear-gradient(135deg, rgba(228, 199, 127, 0.09), rgba(140, 233, 242, 0.045)),
    rgba(0, 0, 0, 0.14);
}

.piece-detail-card {
  border-color: rgba(140, 233, 242, 0.18);
}

.score-editor-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 12%, rgba(140, 233, 242, 0.12), transparent 32%),
    radial-gradient(circle at 14% 86%, rgba(228, 199, 127, 0.1), transparent 30%),
    rgba(255, 255, 255, 0.055);
}

.score-editor-toolbar {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: clamp(0.45rem, 0.7vw, 0.625rem);
}

.score-tool {
  display: grid;
  place-items: center;
  gap: 0.25rem;
  min-height: clamp(3.75rem, 5vw, 4.75rem);
  padding: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: calc(var(--radius) * 0.72);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(0, 0, 0, 0.18);
  color: var(--text);
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.score-tool:hover,
.score-tool.is-active {
  transform: translateY(-1px);
  border-color: rgba(228, 199, 127, 0.34);
  background:
    linear-gradient(145deg, rgba(228, 199, 127, 0.14), rgba(140, 233, 242, 0.055)),
    rgba(0, 0, 0, 0.2);
}

.score-tool.is-play {
  border-color: rgba(140, 233, 242, 0.34);
}

.score-tool span {
  color: var(--gold);
  font-size: clamp(1.15rem, 1.75vw, 1.65rem);
}

.score-tool small {
  color: var(--muted);
  font-size: clamp(0.68rem, 0.8vw, 0.75rem);
}

.score-sheet-panel {
  display: grid;
  gap: clamp(0.75rem, 1vw, 1rem);
  min-height: clamp(27rem, 39vw, 37rem);
}

.score-sheet-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(0.75rem, 1.1vw, 1rem);
}

.score-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 0.75vw, 0.7rem);
}

.score-import-workbench {
  display: grid;
  grid-template-columns: minmax(15rem, 0.95fr) minmax(22rem, 1.45fr) minmax(13rem, 0.8fr);
  gap: clamp(0.65rem, 1vw, 1rem);
  align-items: stretch;
  margin-bottom: clamp(0.75rem, 1vw, 1rem);
}

.score-import-dropzone,
.score-import-route article,
.score-import-status {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: calc(var(--radius) * 0.62);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.18);
}

.score-import-dropzone {
  display: grid;
  align-content: center;
  gap: 0.35rem;
  min-height: clamp(5.7rem, 7vw, 7.5rem);
  padding: clamp(0.85rem, 1.2vw, 1.15rem);
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.score-import-dropzone:hover {
  transform: translateY(-1px);
  border-color: rgba(228, 199, 127, 0.34);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.2);
  background:
    linear-gradient(145deg, rgba(228, 199, 127, 0.12), rgba(140, 233, 242, 0.045)),
    rgba(0, 0, 0, 0.2);
}

.score-import-icon {
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.4);
  border-radius: 0.45rem;
  color: var(--gold);
  font-size: 1.25rem;
}

.score-import-dropzone strong,
.score-import-status strong {
  color: var(--text);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
}

.score-import-dropzone small,
.score-import-route span,
.score-import-status span {
  color: var(--muted);
  line-height: 1.55;
  font-size: clamp(0.72rem, 0.8vw, 0.8rem);
}

.score-import-route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.7vw, 0.65rem);
}

.score-import-route article {
  display: grid;
  align-content: center;
  gap: 0.3rem;
  padding: clamp(0.75rem, 0.95vw, 0.95rem);
}

.score-import-route b {
  color: var(--gold);
  font-size: clamp(0.82rem, 0.9vw, 0.92rem);
}

.score-import-status {
  display: grid;
  align-content: center;
  gap: 0.35rem;
  padding: clamp(0.85rem, 1vw, 1.05rem);
  border-color: rgba(140, 233, 242, 0.18);
}

.score-import-status.is-ready {
  border-color: rgba(228, 199, 127, 0.34);
  background:
    linear-gradient(145deg, rgba(228, 199, 127, 0.13), rgba(140, 233, 242, 0.045)),
    rgba(0, 0, 0, 0.2);
}

.score-import-status.is-processing {
  border-color: rgba(140, 233, 242, 0.32);
}

.score-title-input {
  width: min(100%, 30rem);
  border: 0;
  border-bottom: 1px solid rgba(228, 199, 127, 0.28);
  background: transparent;
  color: var(--text);
  font-size: clamp(1.45rem, 2.2vw, 2.25rem);
  font-weight: 650;
  outline: none;
}

.score-meta-row,
.score-template-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 0.7vw, 0.6rem);
  margin-top: 0.55rem;
}

.score-meta-row span {
  color: var(--muted);
  font-size: clamp(0.78rem, 0.92vw, 0.86rem);
}

.score-canvas {
  position: relative;
  min-height: clamp(15rem, 23vw, 22rem);
  overflow: hidden;
  border: 1px solid rgba(228, 199, 127, 0.18);
  border-radius: calc(var(--radius) * 0.9);
  background:
    linear-gradient(180deg, rgba(255, 249, 233, 0.9), rgba(221, 225, 221, 0.82)),
    #f0efe5;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 24px 60px rgba(0, 0, 0, 0.22);
}

.score-staff-line {
  position: absolute;
  left: clamp(1.25rem, 2vw, 2rem);
  right: clamp(1.25rem, 2vw, 2rem);
  top: calc(36% + var(--line-index, 0) * 7%);
  height: 1px;
  background: rgba(18, 24, 28, 0.72);
}

.score-staff-line:nth-child(1) { --line-index: 0; }
.score-staff-line:nth-child(2) { --line-index: 1; }
.score-staff-line:nth-child(3) { --line-index: 2; }
.score-staff-line:nth-child(4) { --line-index: 3; }
.score-staff-line:nth-child(5) { --line-index: 4; }

.score-measure-row {
  position: absolute;
  inset: 0 clamp(1.25rem, 2vw, 2rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.score-measure {
  position: relative;
  border-right: 2px solid rgba(18, 24, 28, 0.5);
}

.score-measure:first-child {
  border-left: 2px solid rgba(18, 24, 28, 0.5);
}

.score-measure b {
  position: absolute;
  top: 1rem;
  left: 0.8rem;
  color: rgba(18, 24, 28, 0.58);
  font-size: 0.8rem;
}

.score-note {
  position: absolute;
  left: var(--note-x);
  top: var(--note-y);
  display: block;
  width: clamp(3rem, 4vw, 4rem);
  height: clamp(4.5rem, 6vw, 6rem);
  border: 0;
  background: transparent;
  color: #f8f0d7;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.score-note:hover,
.score-note.is-selected {
  transform: translate(-50%, -50%) scale(1.08);
  filter: drop-shadow(0 0 0.65rem rgba(228, 199, 127, 0.38));
}

.score-note-head {
  position: absolute;
  left: 0.26rem;
  top: 50%;
  z-index: 2;
  display: grid;
  width: clamp(1.55rem, 2.15vw, 2rem);
  height: clamp(1.15rem, 1.6vw, 1.45rem);
  place-items: center;
  border: 1px solid rgba(15, 25, 30, 0.6);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.86), transparent 24%),
    #101820;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.22);
  transform: translateY(-50%) rotate(-18deg);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.score-note.duration-half .score-note-head,
.score-note.duration-whole .score-note-head {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 249, 233, 0.82) 0 34%, transparent 36%),
    #101820;
}

.score-note.duration-whole .score-note-head {
  width: clamp(1.9rem, 2.45vw, 2.35rem);
  height: clamp(1.05rem, 1.45vw, 1.25rem);
}

.score-note:hover .score-note-head,
.score-note.is-selected .score-note-head {
  border-color: rgba(126, 94, 30, 0.68);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.92), transparent 27%),
    linear-gradient(135deg, #d9ba67, #123f49);
  box-shadow:
    0 0 0 3px rgba(228, 199, 127, 0.14),
    0 10px 20px rgba(0, 0, 0, 0.26);
}

.score-note-accidental {
  position: absolute;
  left: -0.24rem;
  top: 50%;
  z-index: 3;
  color: rgba(16, 24, 32, 0.82);
  font-family: "Times New Roman", Georgia, serif;
  font-size: clamp(0.76rem, 1.05vw, 1rem);
  font-weight: 700;
  line-height: 1;
  transform: translate(-72%, -52%);
  text-shadow: 0 1px 0 rgba(255, 249, 233, 0.28);
}

.score-note-stem {
  position: absolute;
  z-index: 1;
  width: 1.5px;
  border-radius: 999px;
  background: #101820;
  box-shadow: 0 0 0 1px rgba(255, 249, 233, 0.1);
}

.score-note.stem-up .score-note-stem {
  left: calc(0.26rem + clamp(1.55rem, 2.15vw, 2rem) - 0.08rem);
  bottom: 50%;
  height: clamp(2.15rem, 3vw, 3rem);
}

.score-note.stem-down .score-note-stem {
  left: 0.32rem;
  top: 50%;
  height: clamp(2.15rem, 3vw, 3rem);
}

.score-note.duration-whole .score-note-stem {
  display: none;
}

.score-note-flag {
  position: absolute;
  z-index: 1;
  display: none;
  width: clamp(0.92rem, 1.35vw, 1.15rem);
  height: clamp(0.95rem, 1.4vw, 1.2rem);
  border-color: #101820;
}

.score-note.duration-eighth .score-note-flag,
.score-note.duration-sixteenth .score-note-flag {
  display: block;
}

.score-note.stem-up .score-note-flag {
  left: calc(0.26rem + clamp(1.55rem, 2.15vw, 2rem) - 0.06rem);
  bottom: calc(50% + clamp(1.85rem, 2.55vw, 2.4rem));
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 0 1rem 0.9rem 0;
  color: #101820;
  transform: skewY(20deg);
}

.score-note.stem-down .score-note-flag {
  left: 0.32rem;
  top: calc(50% + clamp(1.85rem, 2.55vw, 2.4rem));
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  border-radius: 0.9rem 0 0 1rem;
  color: #101820;
  transform: skewY(20deg);
}

.score-note.duration-sixteenth .score-note-flag::after {
  position: absolute;
  inset: 0.3rem -0.08rem auto 0.12rem;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.score-note small {
  position: absolute;
  left: calc(0.28rem + clamp(0.9rem, 1.25vw, 1.15rem));
  top: calc(50% + clamp(0.82rem, 1.12vw, 1rem));
  color: rgba(18, 24, 28, 0.62);
  font-size: 0.58rem;
  font-weight: 650;
  transform: translateX(-46%);
}

.score-editor-status,
.score-tutorial-modes {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.45rem, 0.7vw, 0.625rem);
}

.score-inspector-panel {
  display: grid;
  align-content: start;
  gap: clamp(0.75rem, 1vw, 1rem);
}

.score-editor-workflow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.score-editor-preview-card {
  display: grid;
  gap: 0.24rem;
  padding: clamp(0.68rem, 0.92vw, 0.86rem);
  border: 1px solid rgba(140, 233, 242, 0.16);
  border-radius: calc(var(--radius) * 0.62);
  background:
    radial-gradient(circle at 88% 10%, rgba(140, 233, 242, 0.08), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.02)),
    rgba(0, 0, 0, 0.13);
}

.score-editor-preview-card span {
  color: rgba(228, 199, 127, 0.78);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.score-editor-preview-card strong {
  color: rgba(248, 251, 253, 0.94);
  font-size: 0.96rem;
}

.score-editor-preview-card p {
  margin: 0;
  color: rgba(224, 233, 239, 0.6);
  font-size: 0.74rem;
  line-height: 1.45;
}

.score-editor-preview-card small {
  color: rgba(140, 233, 242, 0.7);
  font-size: 0.7rem;
}

.score-inspector-grid,
.score-check-list {
  display: grid;
  gap: clamp(0.55rem, 0.8vw, 0.75rem);
}

.score-apply-hint {
  display: grid;
  gap: 0.25rem;
  padding: clamp(0.65rem, 0.9vw, 0.85rem);
  border: 1px solid rgba(140, 233, 242, 0.2);
  border-radius: calc(var(--radius) * 0.55);
  background:
    linear-gradient(145deg, rgba(140, 233, 242, 0.075), rgba(228, 199, 127, 0.055)),
    rgba(0, 0, 0, 0.14);
}

.score-apply-hint strong {
  color: var(--gold);
  font-size: clamp(0.82rem, 0.95vw, 0.95rem);
}

.score-apply-hint span {
  color: var(--muted);
  line-height: 1.55;
  font-size: clamp(0.72rem, 0.8vw, 0.8rem);
}

.score-check-list h4,
.score-tutorial-modes h4 {
  margin-bottom: 0.1rem;
}

.score-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: clamp(0.6rem, 0.85vw, 0.75rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--radius) * 0.72);
  background: rgba(0, 0, 0, 0.16);
}

.score-check span {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: var(--muted);
}

.score-check.is-ok {
  border-color: rgba(140, 233, 242, 0.18);
}

.score-check.is-ok span {
  border-color: rgba(140, 233, 242, 0.38);
  color: var(--cyan);
}

.piece-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(0.625rem, 0.9vw, 0.875rem);
}

.task-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.5rem, 0.8vw, 0.75rem);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.12);
}

.task-minutes {
  display: grid;
  width: clamp(2.5rem, 3.35vw, 3rem);
  height: clamp(2.5rem, 3.35vw, 3rem);
  place-items: center;
  border: 1px solid rgba(140, 233, 242, 0.26);
  border-radius: var(--radius);
  color: var(--cyan);
  font-size: 13px;
}

.progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
}

.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
}

.accordion-item {
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.13);
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.accordion-content {
  display: none;
  margin-top: clamp(0.625rem, 1vw, 0.875rem);
}

.accordion-item.is-open .accordion-content {
  display: grid;
  gap: clamp(0.5rem, 0.8vw, 0.75rem);
  animation: fadeIn 180ms ease both;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.7vw, 0.625rem);
}

.select-like {
  width: 100%;
  min-height: clamp(2.375rem, 2.9vw, 2.625rem);
  padding: clamp(0.45rem, 0.65vw, 0.5625rem) clamp(0.55rem, 0.75vw, 0.6875rem);
  color: var(--text);
  outline: none;
}

.score-preview {
  display: grid;
  gap: clamp(0.5rem, 0.75vw, 0.6875rem);
  min-height: clamp(8.75rem, 11.8vw, 10.625rem);
  padding: var(--card-pad);
  border: 1px solid rgba(140, 233, 242, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(140, 233, 242, 0.08), transparent),
    rgba(0, 0, 0, 0.2);
}

.generator-quota-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.75rem, 1vw, 1rem);
  margin-bottom: clamp(0.75rem, 1vw, 0.875rem);
  padding: clamp(0.875rem, 1.2vw, 1.125rem);
  border: 1px solid rgba(228, 199, 127, 0.22);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 82% 26%, rgba(228, 199, 127, 0.14), transparent 32%),
    linear-gradient(145deg, rgba(228, 199, 127, 0.08), rgba(140, 233, 242, 0.045)),
    rgba(0, 0, 0, 0.16);
}

.generator-quota-card span {
  color: var(--muted);
  font-size: clamp(0.76rem, 0.9vw, 0.82rem);
}

.generator-quota-card strong {
  display: block;
  color: var(--gold);
  font-size: clamp(2.5rem, 4.2vw, 3.875rem);
  line-height: 0.95;
}

.generator-quota-card p {
  margin: 0;
}

.generator-flow-panel {
  overflow: hidden;
  border-color: rgba(228, 199, 127, 0.18);
  background:
    radial-gradient(circle at 82% 18%, rgba(228, 199, 127, 0.11), transparent 30%),
    radial-gradient(circle at 22% 86%, rgba(140, 233, 242, 0.105), transparent 32%),
    rgba(255, 255, 255, 0.058);
}

.content-grid[data-module="generator"] {
  align-content: start;
}

.content-grid[data-module="generator"] .panel {
  max-height: none;
  overflow: visible;
}

.generator-pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.82vw, 0.78rem);
}

.generator-pipeline article {
  position: relative;
  display: grid;
  gap: 0.24rem;
  min-height: 4.6rem;
  padding: clamp(0.58rem, 0.82vw, 0.78rem);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: calc(var(--radius) * 0.8);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.024)),
    rgba(0, 0, 0, 0.16);
}

.generator-pipeline article::after {
  position: absolute;
  top: 1.24rem;
  right: -0.65rem;
  width: 0.65rem;
  height: 1px;
  background: rgba(228, 199, 127, 0.22);
  content: "";
}

.generator-pipeline article:last-child::after {
  display: none;
}

.generator-pipeline article.is-active {
  border-color: rgba(140, 233, 242, 0.36);
  background:
    linear-gradient(145deg, rgba(140, 233, 242, 0.13), rgba(228, 199, 127, 0.05)),
    rgba(0, 0, 0, 0.2);
}

.generator-pipeline article.is-done {
  border-color: rgba(228, 199, 127, 0.3);
}

.generator-pipeline span {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.3);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(228, 199, 127, 0.08);
  font-size: 0.72rem;
  font-weight: 760;
}

.generator-pipeline strong {
  color: var(--text);
  font-size: clamp(0.82rem, 0.95vw, 0.94rem);
}

.generator-pipeline small {
  color: var(--muted);
  font-size: clamp(0.68rem, 0.78vw, 0.76rem);
  line-height: 1.35;
}

.generator-workbench {
  display: grid;
  grid-template-columns: minmax(18rem, 0.55fr) minmax(0, 1fr);
  gap: clamp(0.75rem, 1.05vw, 1rem);
  align-items: stretch;
}

.generator-settings-card,
.generator-editor-card,
.generator-result-grid article {
  border: 1px solid rgba(255, 255, 255, 0.108);
  border-radius: calc(var(--radius) * 0.92);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.026)),
    rgba(0, 0, 0, 0.18);
}

.generator-settings-card,
.generator-editor-card {
  display: grid;
  gap: clamp(0.65rem, 0.9vw, 0.85rem);
  padding: clamp(0.78rem, 1.05vw, 1rem);
}

.generator-settings-card .generator-quota-card {
  margin-bottom: 0;
}

.generator-field-grid {
  grid-template-columns: 1fr;
}

.generator-main-actions .glass-button {
  flex: 1;
}

.generator-editor-card {
  border-color: rgba(140, 233, 242, 0.16);
}

.generator-editor-card.is-ready {
  border-color: rgba(228, 199, 127, 0.24);
}

.generator-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.generator-title-input {
  width: min(100%, 32rem);
  border: 0;
  border-bottom: 1px solid rgba(228, 199, 127, 0.26);
  background: transparent;
  color: var(--text);
  font-size: clamp(1.15rem, 1.7vw, 1.7rem);
  font-weight: 720;
  outline: none;
}

.generator-title-input:disabled {
  opacity: 0.7;
}

.generator-score-canvas {
  min-height: clamp(11.5rem, 16vw, 16rem);
}

.generator-edit-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.75vw, 0.7rem);
}

.generator-result-panel {
  display: grid;
  gap: clamp(0.75rem, 1vw, 1rem);
}

.generator-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.6rem, 0.9vw, 0.8rem);
}

.generator-result-grid article {
  display: grid;
  align-content: start;
  gap: 0.34rem;
  min-height: 6.4rem;
  padding: clamp(0.72rem, 0.95vw, 0.9rem);
}

.generator-result-grid span {
  color: var(--muted);
  font-size: 0.72rem;
}

.generator-result-grid strong {
  color: var(--gold);
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.generator-stage-panel {
  min-height: min(44rem, calc(100vh - var(--topbar-h) - 2.4rem));
  overflow: hidden;
  border-color: rgba(228, 199, 127, 0.14);
  background:
    radial-gradient(circle at 50% 22%, rgba(228, 199, 127, 0.12), transparent 25%),
    radial-gradient(circle at 50% 54%, rgba(140, 233, 242, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.026)),
    rgba(4, 8, 12, 0.72);
}

.generator-add-screen,
.generator-queue-screen {
  position: relative;
  display: grid;
  min-height: min(40rem, calc(100vh - var(--topbar-h) - 6rem));
  place-items: center;
  align-content: center;
  gap: clamp(0.88rem, 1.4vw, 1.32rem);
  text-align: center;
}

.generator-add-screen::before {
  position: absolute;
  inset: 6% 9% auto;
  height: 42%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.105), transparent 62%);
  filter: blur(4px);
  opacity: 0.8;
  content: "";
  pointer-events: none;
}

.generator-add-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: clamp(0.34rem, 0.62vw, 0.54rem);
  max-width: min(34rem, 86vw);
  animation: generatorReveal 420ms ease both;
}

.generator-add-copy h3 {
  margin: 0;
  color: rgba(248, 251, 252, 0.98);
  font-size: clamp(2.25rem, 5.2vw, 5.8rem);
  font-weight: 760;
  letter-spacing: 0;
  line-height: 0.95;
}

.generator-add-copy p:not(.eyebrow) {
  margin: 0;
  color: rgba(222, 232, 238, 0.72);
  font-size: clamp(0.92rem, 1.28vw, 1.18rem);
  line-height: 1.55;
}

.generator-add-stage {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(31rem, 82vw);
  min-height: clamp(14rem, 26vw, 20rem);
  place-items: center;
  animation: generatorReveal 520ms ease 80ms both;
}

.generator-add-stage::before,
.generator-add-stage::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.generator-add-stage::before {
  width: clamp(13rem, 23vw, 20rem);
  aspect-ratio: 1;
  border: 1px solid rgba(228, 199, 127, 0.12);
  background:
    radial-gradient(circle, rgba(228, 199, 127, 0.11), transparent 58%);
  filter: blur(0.2px);
}

.generator-add-stage::after {
  width: clamp(18rem, 32vw, 28rem);
  aspect-ratio: 1;
  border: 1px solid rgba(140, 233, 242, 0.07);
  transform: rotate(-8deg);
}

.generator-count-pill {
  position: absolute;
  top: clamp(0.2rem, 1vw, 0.8rem);
  z-index: 4;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0.58rem;
  padding: 0.52rem 0.86rem;
  border: 1px solid rgba(228, 199, 127, 0.18);
  border-radius: 999px;
  background: rgba(8, 11, 14, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1rem 2.2rem rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(20px);
}

.generator-count-pill span {
  color: var(--muted);
  font-size: clamp(0.76rem, 0.9vw, 0.84rem);
}

.generator-count-pill strong {
  color: var(--gold);
  font-size: clamp(1.28rem, 1.9vw, 1.8rem);
  font-weight: 780;
  line-height: 1;
}

.generator-add-button {
  position: relative;
  display: grid;
  z-index: 3;
  width: clamp(8.8rem, 16vw, 13.8rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 32%;
  background:
    radial-gradient(circle at 38% 24%, rgba(255, 255, 255, 0.24), transparent 23%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.064) 54%, rgba(228, 199, 127, 0.1)),
    rgba(20, 25, 30, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1.8rem 4rem rgba(0, 0, 0, 0.13),
    0 2.2rem 5.5rem rgba(0, 0, 0, 0.42),
    0 0 3.5rem rgba(228, 199, 127, 0.08),
    0 0 0 1px rgba(228, 199, 127, 0.07);
  backdrop-filter: blur(28px);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
  animation: generatorFloat 5.8s ease-in-out infinite;
}

.generator-add-button:hover {
  border-color: rgba(228, 199, 127, 0.36);
  background:
    radial-gradient(circle at 38% 24%, rgba(255, 255, 255, 0.3), transparent 24%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.075) 54%, rgba(228, 199, 127, 0.14)),
    rgba(22, 27, 31, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1.8rem 4rem rgba(0, 0, 0, 0.14),
    0 2.4rem 6rem rgba(0, 0, 0, 0.38),
    0 0 3rem rgba(228, 199, 127, 0.18);
  transform: translateY(-2px) scale(1.012);
}

.generator-add-button span,
.generator-add-button span::after {
  position: relative;
  z-index: 2;
  width: clamp(2.2rem, 4.2vw, 3.5rem);
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 227, 176, 0.86);
  content: "";
}

.generator-add-button span::after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}

.generator-add-button i {
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(228, 199, 127, 0.13);
  border-radius: 28%;
  background:
    linear-gradient(180deg, transparent 23%, rgba(255, 249, 233, 0.09) 23% 24%, transparent 24% 36%, rgba(255, 249, 233, 0.075) 36% 37%, transparent 37% 49%, rgba(255, 249, 233, 0.065) 49% 50%, transparent 50% 62%, rgba(255, 249, 233, 0.055) 62% 63%, transparent 63%);
  opacity: 0.9;
}

.generator-add-button b {
  position: absolute;
  inset: -0.55rem;
  border: 1px solid rgba(228, 199, 127, 0.12);
  border-radius: 34%;
  opacity: 0;
  transition: opacity 180ms ease;
}

.generator-add-button:hover b {
  opacity: 1;
}

.generator-score-ghost {
  position: absolute;
  z-index: 1;
  right: clamp(1rem, 4.5vw, 3.6rem);
  bottom: clamp(1.4rem, 3.8vw, 3rem);
  display: grid;
  gap: 0.5rem;
  width: clamp(10rem, 17vw, 14.5rem);
  padding: clamp(0.95rem, 1.5vw, 1.25rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.22);
  opacity: 0.46;
  transform: rotate(5deg);
  pointer-events: none;
}

.generator-score-ghost span {
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 249, 233, 0.42);
}

.generator-stage-message {
  min-height: 1.35em;
  margin: 0;
  color: rgba(222, 232, 238, 0.7);
  font-size: clamp(0.82rem, 0.98vw, 0.92rem);
}

.generator-link-button {
  position: relative;
  z-index: 3;
  border: 0;
  background: transparent;
  color: rgba(228, 199, 127, 0.76);
  cursor: pointer;
  font-size: clamp(0.78rem, 0.9vw, 0.86rem);
}

.generator-link-button:hover {
  color: var(--gold);
}

.generator-hidden-fields {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.generator-editor-screen {
  display: grid;
  gap: clamp(0.75rem, 1.05vw, 1rem);
}

.generator-editor-screen .generator-score-canvas {
  min-height: clamp(17rem, 34vw, 28rem);
}

.generator-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.7rem, 1vw, 1rem);
}

.generator-editor-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.generator-editor-head-actions .glass-button {
  min-height: 2.2rem;
  padding-block: 0.44rem;
}

.generator-editor-actions .row {
  justify-content: flex-end;
}

.generator-queue-screen h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.55rem, 2.35vw, 2.35rem);
  font-weight: 760;
  letter-spacing: 0;
}

.generator-queue-screen .muted {
  max-width: 26rem;
  margin: 0;
}

.generator-queue-orbit {
  position: relative;
  width: clamp(6.2rem, 10vw, 8.5rem);
  aspect-ratio: 1;
  border: 1px solid rgba(228, 199, 127, 0.18);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
}

.generator-queue-orbit span,
.generator-queue-orbit i,
.generator-queue-orbit b {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.generator-queue-orbit span {
  inset: 24%;
  border: 1px solid rgba(228, 199, 127, 0.4);
  background: rgba(228, 199, 127, 0.08);
}

.generator-queue-orbit i {
  inset: -1px;
  border-top: 2px solid rgba(140, 233, 242, 0.72);
  border-right: 2px solid transparent;
  animation: generatorSpin 1.4s linear infinite;
}

.generator-queue-orbit b {
  left: 50%;
  top: 50%;
  width: 0.46rem;
  height: 0.46rem;
  background: var(--gold);
  box-shadow: 0 0 1rem rgba(228, 199, 127, 0.36);
  transform: translate(-50%, -50%);
}

.generator-queue-status {
  display: inline-flex;
  align-items: center;
  gap: 0.52rem;
  padding: 0.52rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
}

.generator-queue-status span {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: rgba(140, 233, 242, 0.8);
  box-shadow: 0 0 0 0 rgba(140, 233, 242, 0.35);
}

.generator-queue-status span.is-active {
  animation: generatorPulse 1.2s ease-in-out infinite;
}

.generator-queue-status span.is-done {
  background: var(--gold);
}

.generator-queue-status strong {
  color: var(--text);
  font-size: clamp(0.82rem, 0.95vw, 0.9rem);
}

@keyframes generatorSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes generatorReveal {
  from {
    opacity: 0;
    transform: translateY(0.65rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes generatorFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.42rem);
  }
}

@keyframes generatorPulse {
  70% {
    box-shadow: 0 0 0 0.5rem rgba(140, 233, 242, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(140, 233, 242, 0);
  }
}

.generator-topup-panel {
  display: grid;
  grid-template-columns: minmax(12rem, 0.42fr) minmax(0, 1fr);
  gap: clamp(0.625rem, 0.9vw, 0.875rem);
  margin-bottom: clamp(0.75rem, 1vw, 0.875rem);
  animation: fadeIn 180ms ease both;
}

.generator-purchase-card,
.generator-reward-card {
  display: grid;
  gap: clamp(0.625rem, 0.9vw, 0.875rem);
  padding: clamp(0.875rem, 1.2vw, 1.125rem);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)),
    rgba(0, 0, 0, 0.15);
}

.generator-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  color: var(--gold);
}

.generator-price small {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.generator-price strong {
  font-size: clamp(2.4rem, 4vw, 3.75rem);
  line-height: 0.95;
}

.generator-price em {
  color: var(--muted);
  font-style: normal;
}

.generator-task-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.7vw, 0.625rem);
}

.generator-task {
  display: grid;
  gap: 0.35rem;
  min-height: clamp(6.5rem, 8vw, 7.5rem);
  padding: clamp(0.75rem, 1vw, 0.875rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.generator-task:hover {
  border-color: rgba(140, 233, 242, 0.28);
  background: rgba(140, 233, 242, 0.08);
  transform: translateY(-1px);
}

.generator-task span {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border: 1px solid rgba(140, 233, 242, 0.24);
  border-radius: 50%;
  color: var(--cyan);
}

.generator-task strong {
  color: var(--text);
}

.generator-task small {
  color: var(--muted);
  line-height: 1.45;
}

.generator-task.is-done {
  border-color: rgba(228, 199, 127, 0.3);
  background: rgba(228, 199, 127, 0.08);
}

.staff-line {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.note-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(0.375rem, 0.7vw, 0.625rem);
  align-items: center;
  margin-top: 4px;
}

.note-dot {
  display: grid;
  width: clamp(1.85rem, 2.4vw, 2.125rem);
  height: clamp(1.85rem, 2.4vw, 2.125rem);
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.34);
  border-radius: 50%;
  background: rgba(228, 199, 127, 0.12);
  color: var(--gold);
  font-size: 12px;
  justify-self: center;
}

.fingerboard-mini {
  position: relative;
  min-height: clamp(12rem, 16vw, 14.375rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius);
  background:
    linear-gradient(100deg, transparent 0 11%, rgba(255, 255, 255, 0.09) 11% 11.5%, transparent 11.5% 33%, rgba(255, 255, 255, 0.08) 33% 33.5%, transparent 33.5% 55%, rgba(255, 255, 255, 0.08) 55% 55.5%, transparent 55.5%),
    linear-gradient(180deg, rgba(8, 9, 11, 0.96), rgba(13, 12, 12, 0.8));
}

.fingerboard-button {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(140, 233, 242, 0.5);
  background: rgba(140, 233, 242, 0.17);
  box-shadow: 0 0 26px rgba(140, 233, 242, 0.18);
  color: var(--text);
}

.fingerboard-button.current {
  top: 38%;
  left: 49%;
  width: clamp(3.5rem, 5vw, 4.5rem);
  height: clamp(3.5rem, 5vw, 4.5rem);
  font-size: clamp(1rem, 1.5vw, 1.375rem);
}

.fingerboard-button.next {
  top: 20%;
  left: 66%;
  width: clamp(2.25rem, 3vw, 2.625rem);
  height: clamp(2.25rem, 3vw, 2.625rem);
  opacity: 0.62;
}

.copyright-report-panel {
  border-color: rgba(228, 199, 127, 0.22);
  background:
    linear-gradient(145deg, rgba(228, 199, 127, 0.075), rgba(140, 233, 242, 0.045)),
    rgba(0, 0, 0, 0.22);
}

.copyright-report-shell {
  display: grid;
  grid-template-columns: minmax(10rem, 0.26fr) minmax(0, 1fr);
  gap: clamp(0.75rem, 1vw, 1rem);
}

.copyright-report-category,
.copyright-report-body {
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)),
    rgba(0, 0, 0, 0.16);
}

.copyright-report-category {
  display: grid;
  align-content: start;
  gap: clamp(0.75rem, 1vw, 0.875rem);
  padding: clamp(0.875rem, 1.2vw, 1.125rem);
}

.copyright-report-category span {
  color: var(--muted);
  font-size: clamp(0.78rem, 0.9vw, 0.85rem);
}

.copyright-report-category strong {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
}

.copyright-report-category i {
  display: grid;
  width: 1.625rem;
  height: 1.625rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(140, 233, 242, 0.18);
  color: var(--cyan);
  font-style: normal;
  box-shadow: 0 0 1.25rem rgba(140, 233, 242, 0.14);
}

.copyright-report-body {
  display: grid;
  gap: clamp(0.75rem, 1vw, 0.875rem);
  padding: clamp(1rem, 1.45vw, 1.375rem);
}

.copyright-report-body h4 {
  color: var(--gold);
}

.copyright-report-body p,
.copyright-report-body li {
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
}

.copyright-report-body b {
  color: var(--text);
}

.copyright-report-body ol {
  display: grid;
  gap: clamp(0.45rem, 0.7vw, 0.625rem);
  margin: 0;
  padding-left: 1.25rem;
}

.tool-visual {
  display: grid;
  min-height: clamp(13rem, 17.4vw, 15.625rem);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 45%, rgba(140, 233, 242, 0.15), transparent 28%),
    rgba(0, 0, 0, 0.18);
}

.meter {
  position: relative;
  width: min(82%, 26.25rem);
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(140, 233, 242, 0.28), rgba(228, 199, 127, 0.9), rgba(140, 233, 242, 0.28));
}

.meter::after {
  content: "";
  position: absolute;
  top: -16px;
  left: 48%;
  width: 2px;
  height: 40px;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(228, 199, 127, 0.4);
}

.bow-box {
  position: relative;
  width: min(86%, 20.625rem);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(140, 233, 242, 0.2);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.16);
}

.bow-box::before {
  content: "";
  position: absolute;
  right: 26px;
  bottom: 50px;
  left: 26px;
  height: 42px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transform: perspective(280px) rotateX(52deg);
}

.bow-box::after {
  content: "";
  position: absolute;
  right: 34px;
  bottom: 24px;
  left: 34px;
  height: 9px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold) 15%, var(--cyan) 15% 35%, var(--gold) 35% 65%, var(--cyan) 65% 85%, var(--gold) 85%);
}

.pressure {
  position: absolute;
  right: 18px;
  top: 28px;
  display: grid;
  gap: 7px;
}

.pressure span {
  width: 22px;
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
}

.pressure span:nth-child(2) {
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(140, 233, 242, 0.36);
}

.teacher-avatar {
  position: relative;
  display: grid;
  min-height: clamp(17rem, 23vw, 20.625rem);
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(228, 199, 127, 0.2);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 24%, rgba(140, 233, 242, 0.2), transparent 25%),
    radial-gradient(circle at 50% 68%, rgba(228, 199, 127, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  isolation: isolate;
}

.teacher-stage-glow {
  position: absolute;
  width: clamp(13rem, 19vw, 18rem);
  height: clamp(13rem, 19vw, 18rem);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(140, 233, 242, 0.18), rgba(140, 233, 242, 0.04) 48%, transparent 70%);
  filter: blur(2px);
  animation: teacherAura 4s ease-in-out infinite;
}

.teacher-violin-mark {
  position: absolute;
  right: clamp(1.2rem, 2.4vw, 2.2rem);
  bottom: clamp(2.1rem, 3.5vw, 3.5rem);
  width: clamp(5rem, 8vw, 7.5rem);
  height: clamp(7rem, 10.5vw, 9.75rem);
  border: 1px solid rgba(228, 199, 127, 0.25);
  border-radius: 48% 48% 44% 44%;
  background:
    radial-gradient(circle at 48% 30%, rgba(228, 199, 127, 0.22), transparent 22%),
    radial-gradient(circle at 50% 67%, rgba(228, 199, 127, 0.16), transparent 30%);
  opacity: 0.88;
  transform: rotate(-12deg);
}

.teacher-violin-mark::before,
.teacher-violin-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(228, 199, 127, 0.48);
}

.teacher-violin-mark::before {
  top: -2.6rem;
  height: 3rem;
}

.teacher-violin-mark::after {
  top: 1rem;
  bottom: 0.7rem;
}

.teacher-violin-mark i {
  position: absolute;
  top: -0.4rem;
  bottom: 0.55rem;
  width: 1px;
  background: rgba(140, 233, 242, 0.34);
}

.teacher-violin-mark i:nth-child(1) { left: 38%; }
.teacher-violin-mark i:nth-child(2) { left: 46%; }
.teacher-violin-mark i:nth-child(3) { left: 54%; }
.teacher-violin-mark i:nth-child(4) { left: 62%; }

.teacher-bow-mark {
  position: absolute;
  right: clamp(3.5rem, 6vw, 5.5rem);
  bottom: clamp(3.2rem, 5vw, 4.8rem);
  width: clamp(9rem, 14vw, 12.5rem);
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(140, 233, 242, 0.74), rgba(228, 199, 127, 0.64));
  transform: rotate(-34deg);
  box-shadow: 0 0 16px rgba(140, 233, 242, 0.2);
}

.teacher-figure {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto auto;
  place-items: center;
  width: clamp(10rem, 14vw, 12.5rem);
  min-height: clamp(13rem, 18vw, 16rem);
  color: var(--text);
  animation: breathe 3.6s ease-in-out infinite;
}

.teacher-head {
  position: relative;
  display: grid;
  width: clamp(6.8rem, 9.6vw, 8.6rem);
  height: clamp(7.4rem, 10.4vw, 9.4rem);
  place-items: center;
  border: 1px solid rgba(140, 233, 242, 0.22);
  border-radius: 46% 46% 42% 42%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.24), transparent 22%),
    linear-gradient(155deg, rgba(226, 214, 191, 0.92), rgba(124, 160, 159, 0.78) 58%, rgba(31, 44, 48, 0.72));
  box-shadow:
    inset 0 -18px 36px rgba(0, 0, 0, 0.14),
    0 0 38px rgba(140, 233, 242, 0.18);
}

.teacher-head::before {
  content: "";
  position: absolute;
  inset: -0.45rem -0.3rem auto;
  height: 3.2rem;
  border-radius: 48% 48% 24% 24%;
  background:
    linear-gradient(135deg, rgba(30, 36, 39, 0.88), rgba(21, 27, 31, 0.78));
  box-shadow: inset 0 -8px 16px rgba(228, 199, 127, 0.08);
}

.teacher-eye {
  position: absolute;
  top: 45%;
  width: 0.8rem;
  height: 0.28rem;
  border-radius: 99px;
  background: rgba(15, 24, 29, 0.86);
  box-shadow: 0 0 10px rgba(140, 233, 242, 0.28);
}

.teacher-eye.left {
  left: 30%;
}

.teacher-eye.right {
  right: 30%;
}

.teacher-mouth {
  position: absolute;
  left: 50%;
  bottom: 24%;
  display: grid;
  width: 1.25rem;
  height: 0.42rem;
  overflow: hidden;
  place-items: center;
  border-radius: 999px;
  background: rgba(52, 26, 26, 0.62);
  transform: translateX(-50%);
  transition: height 120ms ease, width 120ms ease;
}

.teacher-mouth i {
  display: none;
}

.teacher-avatar.is-speaking .teacher-mouth {
  animation: teacherSpeakMouth 560ms steps(5, end) infinite;
}

.teacher-avatar.is-speaking .teacher-mouth i {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  opacity: 0;
  animation: teacherVisemePulse 1.8s linear infinite;
  animation-delay: calc(var(--viseme-index) * 96ms);
}

.teacher-neck {
  width: clamp(1.6rem, 2.4vw, 2.1rem);
  height: clamp(1.2rem, 1.7vw, 1.5rem);
  margin-top: -0.35rem;
  border-radius: 0 0 1rem 1rem;
  background: rgba(178, 151, 119, 0.68);
}

.teacher-body {
  position: relative;
  width: clamp(8.8rem, 12vw, 11rem);
  height: clamp(5.5rem, 7.4vw, 6.8rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 3rem 3rem 0.8rem 0.8rem;
  background:
    linear-gradient(135deg, rgba(17, 31, 38, 0.9), rgba(35, 48, 48, 0.72)),
    rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 1px rgba(140, 233, 242, 0.08);
}

.teacher-lapel {
  position: absolute;
  inset: 0 28%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(228, 199, 127, 0.26), rgba(140, 233, 242, 0.08));
}

.teacher-chip {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(140, 233, 242, 0.28);
  border-radius: 50%;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.2);
}

.teacher-speech-bubble {
  position: absolute;
  z-index: 3;
  right: clamp(0.85rem, 1.4vw, 1.25rem);
  bottom: clamp(0.85rem, 1.4vw, 1.25rem);
  width: min(86%, 19rem);
  padding: clamp(0.75rem, 1vw, 0.95rem);
  border: 1px solid rgba(140, 233, 242, 0.18);
  border-radius: calc(var(--radius) * 0.9);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
    rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}

.teacher-speech-bubble span {
  color: var(--gold);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.teacher-speech-bubble p {
  margin: 0.3rem 0 0;
  color: var(--text);
  line-height: 1.6;
}

.teacher-avatar.is-speaking .teacher-speech-bubble {
  border-color: rgba(228, 199, 127, 0.28);
  box-shadow: 0 0 30px rgba(140, 233, 242, 0.12);
}

.teacher-promise-grid,
.teacher-knowledge-grid,
.teacher-report-grid,
.teacher-upload-fields {
  display: grid;
  gap: clamp(0.5rem, 0.75vw, 0.6875rem);
}

.teacher-promise-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(0.75rem, 1vw, 0.875rem);
}

.teacher-privacy-note {
  margin-top: clamp(0.75rem, 1vw, 0.875rem);
}

.upload-zone {
  display: grid;
  gap: clamp(0.45rem, 0.7vw, 0.625rem);
  place-items: center;
  min-height: clamp(16rem, 22vw, 20rem);
  padding: clamp(1rem, 1.5vw, 1.35rem);
  border: 1px dashed rgba(140, 233, 242, 0.28);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 18%, rgba(140, 233, 242, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(228, 199, 127, 0.08), rgba(140, 233, 242, 0.04)),
    rgba(140, 233, 242, 0.045);
  text-align: center;
}

.upload-icon {
  display: grid;
  width: clamp(3.4rem, 5vw, 4.4rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.34);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  color: var(--gold);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  box-shadow: 0 0 26px rgba(228, 199, 127, 0.12);
}

.teacher-upload-fields {
  width: min(100%, 36rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: left;
}

.teacher-file-pill {
  display: grid;
  width: min(100%, 36rem);
  gap: 0.35rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.16);
  cursor: pointer;
  text-align: left;
}

.teacher-file-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.teacher-file-pill span {
  color: var(--gold);
  font-weight: 680;
}

.teacher-file-pill b {
  color: var(--muted);
  font-size: 0.86rem;
}

.teacher-analyze-btn {
  width: min(100%, 36rem);
}

.teacher-knowledge-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.teacher-knowledge-card,
.teacher-report-card {
  display: grid;
  gap: 0.55rem;
  padding: clamp(0.75rem, 1vw, 0.875rem);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)),
    rgba(0, 0, 0, 0.14);
}

.teacher-knowledge-card strong,
.teacher-report-card strong {
  color: var(--text);
}

.teacher-report-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.teacher-feedback-principles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.75vw, 0.6875rem);
  margin-top: clamp(0.75rem, 1vw, 0.875rem);
}

.teacher-feedback-principles span {
  padding: clamp(0.65rem, 0.9vw, 0.8rem);
  border: 1px solid rgba(228, 199, 127, 0.18);
  border-radius: var(--radius);
  background: rgba(228, 199, 127, 0.06);
  color: var(--muted);
  line-height: 1.55;
}

.report-score {
  font-size: clamp(44px, 7vw, 80px);
  font-weight: 650;
  color: var(--gold);
}

.report-line {
  display: grid;
  gap: clamp(0.3rem, 0.45vw, 0.375rem);
}

.teacher-workbench-chat,
.teacher-workbench-tools {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(127, 78, 186, 0.105), rgba(255, 255, 255, 0.035)),
    rgba(3, 4, 8, 0.36);
  box-shadow: inset 0 0 0 1px rgba(140, 233, 242, 0.035);
}

.teacher-workbench-left,
.teacher-workflow-grid {
  display: grid;
  min-height: 0;
  gap: clamp(0.55rem, 0.85vw, 0.8rem);
}

.teacher-workbench-left {
  grid-template-rows: minmax(10rem, 0.92fr) minmax(8.5rem, 0.86fr) auto;
  flex: 1 1 auto;
}

.teacher-chat-phone {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: clamp(0.65rem, 0.9vw, 0.85rem);
}

.teacher-chat-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.72rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.teacher-chat-topbar h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1rem, 1.18vw, 1.12rem);
  text-align: center;
}

.teacher-chat-topbar span,
.teacher-chat-status span,
.teacher-topic-suggestions span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  text-align: center;
}

.teacher-chat-tools {
  display: flex;
  gap: 0.35rem;
}

.teacher-chat-tools button,
.teacher-chat-icon {
  display: grid;
  width: 2.1rem;
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
}

.teacher-chat-tools button:last-child {
  color: var(--cyan);
}

.teacher-chat-status {
  display: grid;
  gap: 0.28rem;
  justify-items: center;
  padding: 0.15rem 0;
}

.teacher-chat-status small {
  display: -webkit-box;
  max-width: 28rem;
  overflow: hidden;
  color: var(--soft);
  font-size: clamp(0.75rem, 0.86vw, 0.82rem);
  line-height: 1.45;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.teacher-video-window {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: hidden;
  align-content: end;
  padding: clamp(0.75rem, 1.05vw, 1rem);
  border: 1px solid rgba(228, 199, 127, 0.16);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 22%, rgba(140, 233, 242, 0.18), transparent 28%),
    radial-gradient(circle at 70% 74%, rgba(121, 63, 168, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028));
  isolation: isolate;
}

.teacher-video-window .teacher-figure {
  width: clamp(6.9rem, 9vw, 9.4rem);
  min-height: clamp(8.8rem, 11.5vw, 11.75rem);
  justify-self: center;
  align-self: center;
}

.teacher-video-window .teacher-head {
  width: clamp(4.7rem, 6.4vw, 6.2rem);
  height: clamp(5rem, 6.8vw, 6.8rem);
}

.teacher-video-window .teacher-body {
  width: clamp(6.2rem, 8.2vw, 7.8rem);
  height: clamp(3.6rem, 4.8vw, 4.8rem);
}

.teacher-video-window .teacher-stage-glow {
  width: clamp(8rem, 12vw, 11rem);
  height: clamp(8rem, 12vw, 11rem);
}

.teacher-video-window .teacher-violin-mark {
  right: clamp(0.9rem, 1.4vw, 1.25rem);
  bottom: clamp(2.1rem, 3vw, 2.8rem);
  width: clamp(3.5rem, 5vw, 4.6rem);
  height: clamp(5rem, 6.8vw, 6.3rem);
}

.teacher-video-window .teacher-bow-mark {
  right: clamp(2rem, 3.5vw, 3.6rem);
  bottom: clamp(2.8rem, 4vw, 3.9rem);
  width: clamp(6rem, 8vw, 8.2rem);
}

.teacher-video-window.is-speaking .teacher-mouth {
  animation: teacherSpeakMouth 560ms steps(5, end) infinite;
}

.teacher-video-window.is-speaking .teacher-mouth i {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  opacity: 0;
  animation: teacherVisemePulse 1.8s linear infinite;
  animation-delay: calc(var(--viseme-index) * 96ms);
}

.teacher-video-topline {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  right: 0.7rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.76rem;
}

.teacher-video-topline b,
.teacher-section-title > span {
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 700;
}

.teacher-video-window > p {
  position: relative;
  z-index: 3;
  margin: 0;
  padding: 0.66rem 0.72rem;
  border: 1px solid rgba(140, 233, 242, 0.14);
  border-radius: calc(var(--radius) * 0.85);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  line-height: 1.5;
}

.teacher-dialogue-log {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 0.5rem;
  overflow: hidden;
}

.teacher-chat-phone .teacher-dialogue-log {
  gap: 0.7rem;
  padding: 0.1rem 0.1rem 0;
}

.teacher-dialogue-log article,
.teacher-input-dock,
.teacher-score-annotation,
.teacher-prescription-panel,
.teacher-compact-report,
.teacher-error-item,
.teacher-task-list article,
.teacher-report-compare div {
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.028)),
    rgba(0, 0, 0, 0.18);
}

.teacher-dialogue-log article {
  width: min(92%, 24rem);
  padding: 0.55rem 0.65rem;
}

.teacher-chat-phone .teacher-dialogue-log article {
  width: min(86%, 25rem);
  padding: 0.72rem 0.85rem;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.085);
  box-shadow: none;
}

.teacher-dialogue-log .from-teacher {
  justify-self: end;
  border-color: rgba(140, 233, 242, 0.14);
}

.teacher-chat-phone .teacher-dialogue-log .from-teacher {
  justify-self: start;
  border-color: rgba(255, 255, 255, 0.08);
}

.teacher-chat-phone .teacher-dialogue-log article:not(.from-teacher) {
  justify-self: end;
  border-color: rgba(74, 161, 255, 0.24);
  background: linear-gradient(180deg, rgba(74, 161, 255, 0.92), rgba(54, 137, 241, 0.84));
}

.teacher-dialogue-log span {
  color: var(--gold);
  font-size: 0.72rem;
}

.teacher-dialogue-log p,
.teacher-task-list p,
.teacher-error-item p,
.teacher-report-compare small {
  margin: 0.22rem 0 0;
  color: var(--muted);
  line-height: 1.46;
}

.teacher-chat-phone .teacher-dialogue-log article:not(.from-teacher) span,
.teacher-chat-phone .teacher-dialogue-log article:not(.from-teacher) p {
  color: rgba(255, 255, 255, 0.94);
}

.teacher-topic-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.teacher-topic-suggestions span {
  flex-basis: 100%;
}

.teacher-topic-suggestions button {
  min-height: 2rem;
  padding: 0.32rem 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.052);
  color: var(--text);
  font-weight: 650;
  cursor: pointer;
}

.teacher-input-dock {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.65rem;
}

.teacher-chat-phone .teacher-input-dock {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.58rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.teacher-compact-select {
  display: grid;
  gap: 0.3rem;
}

.teacher-compact-select span {
  color: var(--muted);
  font-size: 0.75rem;
}

.teacher-message-row,
.teacher-upload-actions,
.teacher-file-status,
.teacher-action-row,
.teacher-section-title,
.teacher-report-compare {
  display: flex;
  min-width: 0;
  gap: 0.45rem;
}

.teacher-message-row,
.teacher-upload-actions,
.teacher-file-status {
  grid-column: 1 / -1;
}

.teacher-message-row input {
  min-width: 0;
  flex: 1 1 auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  padding: 0 0.72rem;
}

.teacher-message-row input::placeholder {
  color: var(--soft);
}

.teacher-upload-actions {
  flex-wrap: wrap;
}

.teacher-chat-phone .teacher-upload-actions {
  overflow: hidden;
  flex-wrap: nowrap;
  padding-bottom: 0.1rem;
}

.teacher-upload-actions .glass-button {
  flex: 1 1 5.5rem;
  min-height: 2.05rem;
  padding-inline: 0.5rem;
}

.teacher-chat-phone .teacher-upload-actions .glass-button {
  flex: 1 0 auto;
  min-height: 2.05rem;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.052);
  font-weight: 680;
}

.teacher-voice-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
}

.teacher-voice-main {
  min-height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: clamp(1rem, 1.18vw, 1.12rem);
  font-weight: 750;
  cursor: pointer;
}

.teacher-file-action {
  position: relative;
  overflow: hidden;
}

.teacher-file-action input {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.teacher-file-action span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teacher-file-status {
  align-items: center;
  justify-content: space-between;
}

.teacher-chat-phone .teacher-file-status {
  gap: 0.55rem;
}

.teacher-file-status span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teacher-chat-phone .teacher-file-status .teacher-analyze-btn {
  min-width: 8rem;
}

.teacher-hidden-selects {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.ai-teacher-chat-panel {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(0.65rem, 0.95vw, 0.9rem);
}

.ai-teacher-chat-panel.is-dragging {
  outline: 1px solid rgba(140, 233, 242, 0.48);
  outline-offset: -3px;
  background: rgba(140, 233, 242, 0.07);
}

.teacher-avatar-status {
  position: relative;
  display: flex;
  min-height: 14.375rem;
  overflow: hidden;
  align-items: flex-start;
  padding: clamp(1rem, 1.3vw, 1.2rem);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 18%, rgba(228, 199, 127, 0.11), transparent 32%),
    radial-gradient(circle at 74% 86%, rgba(140, 233, 242, 0.1), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.15);
}

.teacher-avatar-status::after {
  position: absolute;
  right: 3.5%;
  bottom: 0;
  z-index: 1;
  width: 58%;
  height: 54%;
  border-radius: 999px 999px 0 0;
  content: "";
  background:
    radial-gradient(ellipse at 50% 100%, rgba(228, 199, 127, 0.16), transparent 64%),
    radial-gradient(ellipse at 60% 64%, rgba(140, 233, 242, 0.12), transparent 58%);
  filter: blur(0.2px);
  opacity: 0.9;
  pointer-events: none;
}

.teacher-avatar-status h3,
.teacher-avatar-status p {
  margin: 0;
}

.teacher-avatar-copy {
  position: relative;
  z-index: 4;
  display: grid;
  width: 44%;
  gap: 0.24rem;
  padding-top: 0.05rem;
}

.teacher-avatar-copy h3 {
  font-size: clamp(1.04rem, 1.28vw, 1.18rem);
  line-height: 1.15;
}

.teacher-avatar-copy > p:last-child {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.42;
}

.teacher-avatar-state-label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 1.35rem;
  margin-top: 0.28rem;
  padding: 0 0.58rem;
  border: 1px solid rgba(228, 199, 127, 0.22);
  border-radius: 999px;
  color: rgba(255, 240, 202, 0.88);
  background: rgba(228, 199, 127, 0.09);
  font-size: 0.68rem;
  font-weight: 680;
  line-height: 1;
}

.teacher-avatar-stage {
  position: absolute;
  right: clamp(-2.9rem, -4vw, -2.25rem);
  bottom: -1.35rem;
  z-index: 2;
  width: min(70%, 19.5rem);
  height: 16.2rem;
  pointer-events: none;
}

.teacher-chat-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: clamp(5.6rem, 7.5vw, 6.8rem);
  gap: clamp(0.82rem, 1.1vw, 1rem);
  padding: clamp(0.78rem, 1vw, 0.95rem);
  border-radius: 1.05rem;
  background:
    radial-gradient(circle at 14% 20%, rgba(226, 199, 120, 0.14), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.032)),
    rgba(8, 13, 18, 0.72);
}

.teacher-chat-profile::after {
  display: none;
}

.teacher-chat-profile .teacher-avatar-copy {
  width: auto;
  padding-top: 0;
}

.teacher-chat-profile .teacher-avatar-copy h3 {
  font-size: clamp(1.08rem, 1.35vw, 1.28rem);
}

.teacher-profile-avatar {
  position: relative;
  display: block;
  width: clamp(4.6rem, 6.4vw, 5.6rem);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 235, 188, 0.34);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 245, 218, 0.16), transparent 52%),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 0.38rem rgba(226, 199, 120, 0.045),
    0 0.9rem 2rem rgba(0, 0, 0, 0.2);
}

.teacher-profile-avatar .avatar-renderer {
  inset: -12% -18% -18%;
  width: auto;
  height: auto;
}

.teacher-profile-avatar .avatar-png-body {
  transform: translate3d(0, 0.04rem, 0) scale(0.98);
  animation: avatarChatHeadFloat 5.2s ease-in-out infinite;
}

.teacher-profile-avatar .teacher-portrait-image {
  object-fit: contain;
  object-position: 50% 12%;
}

.teacher-profile-avatar .avatar-face-rig {
  inset: 0;
}

.teacher-profile-avatar .avatar-eye-mask {
  top: 32%;
  width: 7%;
  height: 3.2%;
}

.teacher-profile-avatar .avatar-eye-left {
  left: 39.6%;
}

.teacher-profile-avatar .avatar-eye-right {
  right: 38.4%;
}

.teacher-profile-avatar .avatar-mouth-rig {
  top: 44.4%;
  left: 50.2%;
  width: calc(6.4% + var(--mouth-wide) * 5%);
  height: 2.2%;
}

.teacher-profile-avatar .avatar-renderer[data-avatar-state="speaking"] .avatar-png-body {
  animation-name: avatarChatHeadSpeak;
  animation-duration: 2.2s;
}

.avatar-renderer,
.avatar-png-body,
.teacher-portrait-image,
.teacher-avatar-3d,
.avatar-vrm-placeholder {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.avatar-renderer {
  --mouth-open: 0;
  --mouth-wide: 0.12;
  z-index: 2;
}

.avatar-png-body {
  transform: translate3d(-0.25rem, 0.35rem, 0) scale(1.12);
  transform-origin: 50% 100%;
  animation: avatarIdleBreath 5.4s ease-in-out infinite;
  will-change: transform;
}

.teacher-portrait-image {
  object-fit: contain;
  object-position: center bottom;
  transform: translate3d(0, 0, 0);
  filter: saturate(1.02) contrast(1.03);
  will-change: transform;
}

.teacher-avatar-3d,
.avatar-vrm-placeholder {
  z-index: 2;
  opacity: 0;
  transition: opacity 220ms ease;
}

.avatar-renderer--vrm .avatar-vrm-placeholder,
.teacher-avatar-status[data-avatar-mode="3d"] .teacher-avatar-3d {
  opacity: 1;
}

.avatar-vrm-placeholder {
  display: grid;
  place-items: end center;
  padding-bottom: 2.4rem;
  border: 1px dashed rgba(140, 233, 242, 0.2);
  border-radius: calc(var(--radius) * 0.9);
  color: rgba(140, 233, 242, 0.72);
  background: rgba(140, 233, 242, 0.035);
  font-size: 0.72rem;
}

.avatar-renderer--vrm .avatar-png-body,
.teacher-avatar-status[data-avatar-mode="3d"] .teacher-portrait-image {
  opacity: 0;
}

.avatar-face-rig {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

.avatar-eye-mask {
  position: absolute;
  top: 24.35%;
  width: 7.4%;
  height: 1.75%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(247, 204, 177, 0.9), rgba(132, 82, 68, 0.68));
  box-shadow:
    inset 0 -0.06rem 0 rgba(57, 33, 30, 0.55),
    0 0.02rem 0.04rem rgba(0, 0, 0, 0.16);
  opacity: 0;
  transform: scaleY(0.16);
  transform-origin: center;
  transition:
    opacity 60ms ease,
    transform 86ms ease;
}

.avatar-eye-mask::after {
  content: "";
  position: absolute;
  right: 11%;
  bottom: 18%;
  left: 11%;
  height: 0.06rem;
  border-radius: 999px;
  background: rgba(37, 22, 20, 0.58);
}

.avatar-eye-left {
  left: 43.6%;
  transform: rotate(-2deg) scaleY(0.16);
}

.avatar-eye-right {
  left: 55.8%;
  transform: rotate(1.5deg) scaleY(0.16);
}

.avatar-renderer[data-blink="true"] .avatar-eye-mask {
  opacity: 0.94;
}

.avatar-renderer[data-blink="true"] .avatar-eye-left {
  transform: rotate(-2deg) scaleY(1);
}

.avatar-renderer[data-blink="true"] .avatar-eye-right {
  transform: rotate(1.5deg) scaleY(1);
}

.avatar-mouth-rig {
  position: absolute;
  top: 33.25%;
  left: 49.4%;
  width: calc(6.8% + var(--mouth-wide) * 5.2%);
  height: 2.3%;
  opacity: 0.88;
  transform: translateX(-50%) rotate(1deg);
  transform-origin: center;
}

.avatar-mouth-open,
.avatar-mouth-line {
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.avatar-mouth-open {
  top: 50%;
  height: calc(0.08rem + var(--mouth-open) * 0.62rem);
  background:
    radial-gradient(circle at 50% 70%, rgba(118, 43, 52, 0.78), rgba(62, 25, 30, 0.92));
  opacity: calc(var(--mouth-open) * 1.25);
  transform: translateY(-50%) scaleY(calc(0.22 + var(--mouth-open) * 1.45));
  transform-origin: center;
  box-shadow: inset 0 0.06rem 0.08rem rgba(0, 0, 0, 0.24);
}

.avatar-mouth-line {
  top: 50%;
  height: 0.09rem;
  background: rgba(132, 61, 63, 0.92);
  opacity: calc(0.82 - var(--mouth-open) * 0.48);
  transform: translateY(-50%);
  box-shadow: 0 0.03rem 0.05rem rgba(255, 190, 176, 0.15);
}

.avatar-renderer[data-performance-mode="low"] .avatar-mouth-rig {
  display: none;
}

.avatar-renderer[data-avatar-state="speaking"] .avatar-png-body {
  animation-name: avatarSpeakingBreath;
  animation-duration: 2.1s;
}

.avatar-renderer[data-avatar-state="thinking"] .avatar-png-body {
  animation-name: avatarThinkingBreath;
  animation-duration: 4.2s;
}

.avatar-renderer[data-avatar-state="listening"] .avatar-png-body {
  animation-name: avatarListeningBreath;
  animation-duration: 3.1s;
}

.avatar-renderer[data-avatar-state="warning"] .avatar-png-body {
  animation-name: avatarWarningBreath;
  animation-duration: 3.2s;
}

.avatar-renderer[data-avatar-state="encourage"] .avatar-png-body,
.avatar-renderer[data-avatar-state="explain"] .avatar-png-body {
  animation-name: avatarExplainBreath;
  animation-duration: 3.4s;
}

.avatar-renderer[data-emotion-state="encourage"] .teacher-portrait-image {
  filter: saturate(1.06) contrast(1.03) brightness(1.02);
}

.avatar-renderer[data-emotion-state="warning"] .teacher-portrait-image {
  filter: saturate(1.05) contrast(1.04) drop-shadow(0 0 0.38rem rgba(255, 150, 120, 0.12));
}

@keyframes avatarIdleBreath {
  0%,
  100% {
    transform: translate3d(-0.25rem, 0.35rem, 0) scale(1.12);
  }
  50% {
    transform: translate3d(-0.25rem, 0.27rem, 0) scale(1.123);
  }
}

@keyframes avatarSpeakingBreath {
  0%,
  100% {
    transform: translate3d(-0.25rem, 0.35rem, 0) scale(1.12);
  }
  35% {
    transform: translate3d(-0.28rem, 0.26rem, 0) scale(1.124);
  }
  70% {
    transform: translate3d(-0.22rem, 0.3rem, 0) scale(1.122);
  }
}

@keyframes avatarThinkingBreath {
  0%,
  100% {
    transform: translate3d(-0.25rem, 0.38rem, 0) scale(1.12) rotate(0deg);
  }
  50% {
    transform: translate3d(-0.28rem, 0.34rem, 0) scale(1.121) rotate(-0.6deg);
  }
}

@keyframes avatarListeningBreath {
  0%,
  100% {
    transform: translate3d(-0.25rem, 0.35rem, 0) scale(1.12) rotate(0deg);
  }
  50% {
    transform: translate3d(-0.21rem, 0.28rem, 0) scale(1.123) rotate(0.45deg);
  }
}

@keyframes avatarWarningBreath {
  0%,
  100% {
    transform: translate3d(-0.25rem, 0.35rem, 0) scale(1.12);
  }
  50% {
    transform: translate3d(-0.25rem, 0.31rem, 0) scale(1.121);
  }
}

@keyframes avatarExplainBreath {
  0%,
  100% {
    transform: translate3d(-0.25rem, 0.35rem, 0) scale(1.12);
  }
  50% {
    transform: translate3d(-0.31rem, 0.27rem, 0) scale(1.124);
  }
}

@keyframes avatarChatHeadFloat {
  0%,
  100% {
    transform: translate3d(0, 0.05rem, 0) scale(0.98) rotate(0deg);
  }
  50% {
    transform: translate3d(0.02rem, -0.02rem, 0) scale(0.985) rotate(-0.35deg);
  }
}

@keyframes avatarChatHeadSpeak {
  0%,
  100% {
    transform: translate3d(0, 0.05rem, 0) scale(0.985) rotate(0deg);
  }
  34% {
    transform: translate3d(-0.025rem, -0.02rem, 0) scale(0.992) rotate(-0.45deg);
  }
  68% {
    transform: translate3d(0.025rem, 0.01rem, 0) scale(0.989) rotate(0.35deg);
  }
}

.teacher-chat-stream {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 0.72rem;
  overflow: auto;
  padding: 0.15rem 0.34rem 0.15rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 233, 242, 0.28) transparent;
}

.teacher-suggested-questions {
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.teacher-message {
  display: grid;
  width: min(88%, 27rem);
  gap: 0.24rem;
  justify-self: start;
}

.teacher-message.is-user {
  justify-self: end;
}

.teacher-message.is-suggestion {
  width: min(82%, 17.6rem);
  cursor: pointer;
}

.teacher-message > span {
  color: var(--muted);
  font-size: 0.72rem;
}

.teacher-message.is-user > span {
  text-align: right;
}

.teacher-message > p,
.teacher-message-card,
.teacher-message.is-steps ol {
  margin: 0;
  padding: 0.82rem 0.94rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 0.95rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.048)),
    rgba(255, 255, 255, 0.045);
  color: var(--text);
  line-height: 1.52;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.7rem 1.6rem rgba(0, 0, 0, 0.12);
}

.teacher-message.is-user > p,
.teacher-message.is-user .teacher-message-card {
  border-color: rgba(80, 159, 255, 0.26);
  background: linear-gradient(180deg, rgba(76, 158, 255, 0.88), rgba(53, 129, 232, 0.82));
  color: rgba(255, 255, 255, 0.96);
  border-radius: 0.95rem;
}

.teacher-message.is-suggestion > span {
  font-size: 0.62rem;
  opacity: 0.68;
}

.teacher-message.is-suggestion > p {
  min-height: 2.55rem;
  padding: 0.58rem 0.72rem;
  border-color: rgba(228, 199, 127, 0.24);
  background:
    linear-gradient(180deg, rgba(228, 199, 127, 0.13), rgba(36, 47, 58, 0.32)),
    rgba(8, 13, 18, 0.58);
  color: rgba(255, 242, 211, 0.92);
  font-size: 0.86rem;
  line-height: 1.25;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0.42rem 1rem rgba(0, 0, 0, 0.1);
}

.teacher-message.is-suggestion.is-active > p,
.teacher-message.is-suggestion:hover > p {
  border-color: rgba(228, 199, 127, 0.48);
  background:
    linear-gradient(180deg, rgba(228, 199, 127, 0.18), rgba(19, 35, 46, 0.42)),
    rgba(8, 13, 18, 0.64);
}

.teacher-message-card {
  display: grid;
  gap: 0.22rem;
}

.teacher-message-card b {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
}

.teacher-message-card strong {
  color: inherit;
}

.teacher-message-card small {
  color: rgba(255, 255, 255, 0.72);
}

.teacher-message.is-steps ol {
  display: grid;
  gap: 0.38rem;
  padding-left: 1.85rem;
}

.teacher-input-area {
  display: grid;
  gap: 0.58rem;
}

.teacher-upload-bar {
  display: flex;
  gap: 0.48rem;
  overflow-x: auto;
  padding-bottom: 0.05rem;
  scrollbar-width: none;
}

.teacher-upload-bar::-webkit-scrollbar {
  display: none;
}

.teacher-upload-bar .glass-button {
  flex: 0 0 auto;
  min-height: 2.1rem;
  border-radius: 999px;
  white-space: nowrap;
}

.teacher-upload-button {
  position: relative;
  overflow: hidden;
}

.teacher-upload-button input {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.teacher-text-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.teacher-text-row input {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  padding: 0 0.78rem;
}

.teacher-text-row input::placeholder {
  color: var(--soft);
}

.content-grid[data-module="teacher"] .teacher-input-area {
  position: relative;
  gap: 0.48rem;
}

.content-grid[data-module="teacher"] .teacher-text-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.58rem;
  padding: 0.5rem;
  border: 1px solid rgba(228, 199, 127, 0.16);
  border-radius: 1rem;
  background:
    linear-gradient(135deg, rgba(228, 199, 127, 0.07), rgba(140, 233, 242, 0.045)),
    rgba(0, 0, 0, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.content-grid[data-module="teacher"] .teacher-text-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 2.52rem;
  padding-right: 0.32rem;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.06);
}

.content-grid[data-module="teacher"] .teacher-text-input-wrap input {
  min-height: 2.44rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: rgba(248, 251, 253, 0.92);
  padding: 0 0.7rem;
}

.content-grid[data-module="teacher"] .teacher-text-input-wrap input::placeholder {
  color: rgba(248, 251, 253, 0.46);
}

.content-grid[data-module="teacher"] .teacher-mode-button,
.content-grid[data-module="teacher"] .teacher-voice-hold {
  min-height: 2.52rem;
  border: 1px solid rgba(228, 199, 127, 0.24);
  background:
    linear-gradient(135deg, rgba(228, 199, 127, 0.11), rgba(140, 233, 242, 0.055)),
    rgba(255, 255, 255, 0.045);
  color: rgba(255, 238, 190, 0.95);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.content-grid[data-module="teacher"] .teacher-mode-button {
  display: grid;
  width: 2.52rem;
  height: 2.52rem;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  font-size: 1.05rem;
  white-space: nowrap;
}

.content-grid[data-module="teacher"] .teacher-mode-button:hover {
  border-color: rgba(140, 233, 242, 0.32);
  background:
    linear-gradient(135deg, rgba(140, 233, 242, 0.13), rgba(228, 199, 127, 0.08)),
    rgba(255, 255, 255, 0.055);
}

.content-grid[data-module="teacher"] .teacher-send-button {
  display: grid;
  min-width: 3.72rem;
  height: 2rem;
  padding: 0 0.92rem;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(228, 199, 127, 0.2), rgba(255, 248, 222, 0.08)),
    rgba(255, 255, 255, 0.055);
  color: rgba(255, 239, 194, 0.96);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 780;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.content-grid[data-module="teacher"] .teacher-send-button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 230, 164, 0.46);
  background:
    linear-gradient(145deg, rgba(228, 199, 127, 0.28), rgba(255, 248, 222, 0.1)),
    rgba(255, 255, 255, 0.07);
}

.content-grid[data-module="teacher"] .teacher-voice-icon,
.content-grid[data-module="teacher"] .teacher-keyboard-icon {
  display: block;
  width: 1.46rem;
  height: 1.46rem;
  color: currentColor;
  overflow: visible;
}

.content-grid[data-module="teacher"] .teacher-voice-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.content-grid[data-module="teacher"] .teacher-voice-icon path:first-child,
.content-grid[data-module="teacher"] .teacher-keyboard-icon rect {
  fill: currentColor;
  stroke: none;
}

.content-grid[data-module="teacher"] .teacher-voice-hold {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(248, 251, 253, 0.92);
  font-size: 1rem;
}

.content-grid[data-module="teacher"] .teacher-voice-hold:active {
  transform: scale(0.99);
  background: rgba(228, 199, 127, 0.12);
}

.content-grid[data-module="teacher"] .teacher-plus-button {
  display: grid;
  width: 2.52rem;
  height: 2.52rem;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.24);
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(228, 199, 127, 0.11), rgba(140, 233, 242, 0.055)),
    rgba(255, 255, 255, 0.045);
  color: rgba(255, 238, 190, 0.95);
  font: inherit;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.content-grid[data-module="teacher"] .teacher-plus-button span {
  position: relative;
  display: block;
  width: 1.18rem;
  height: 1.18rem;
}

.content-grid[data-module="teacher"] .teacher-plus-button span::before,
.content-grid[data-module="teacher"] .teacher-plus-button span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.18rem;
  height: 0.16rem;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.content-grid[data-module="teacher"] .teacher-plus-button span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.content-grid[data-module="teacher"] .teacher-plus-button[aria-expanded="true"] {
  transform: rotate(45deg);
  border-color: rgba(140, 233, 242, 0.32);
  background:
    linear-gradient(135deg, rgba(140, 233, 242, 0.13), rgba(228, 199, 127, 0.08)),
    rgba(255, 255, 255, 0.055);
}

.content-grid[data-module="teacher"] .teacher-upload-menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.64rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 10% 0%, rgba(228, 199, 127, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)),
    rgba(2, 5, 9, 0.88);
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.22);
}

.content-grid[data-module="teacher"] .teacher-upload-option {
  display: grid;
  min-height: 4.15rem;
  align-content: center;
  gap: 0.22rem;
  padding: 0.6rem 0.54rem;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.content-grid[data-module="teacher"] .teacher-upload-option:hover {
  border-color: rgba(228, 199, 127, 0.28);
  background: rgba(228, 199, 127, 0.08);
}

.content-grid[data-module="teacher"] .teacher-upload-option b {
  color: rgba(248, 251, 253, 0.95);
  font-size: 0.86rem;
}

.content-grid[data-module="teacher"] .teacher-upload-option span {
  color: rgba(224, 233, 239, 0.58);
  font-size: 0.68rem;
  line-height: 1.28;
}

.content-grid[data-module="teacher"] .teacher-message.is-user {
  cursor: pointer;
}

.content-grid[data-module="teacher"] .teacher-message.is-user p {
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.content-grid[data-module="teacher"] .teacher-message.is-user:hover p,
.content-grid[data-module="teacher"] .teacher-message.is-user.is-active p {
  transform: translateY(-1px);
  border-color: rgba(228, 199, 127, 0.38);
  box-shadow: 0 0 0 1px rgba(228, 199, 127, 0.12), 0 0.75rem 1.8rem rgba(0, 0, 0, 0.16);
}

.content-grid[data-module="teacher"] .teacher-answer-panel {
  display: grid;
  height: 100%;
  min-height: 0;
}

.content-grid[data-module="teacher"] .teacher-answer-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr);
  gap: clamp(0.85rem, 1.2vw, 1.15rem);
  min-height: 0;
}

.content-grid[data-module="teacher"] .teacher-answer-panel.is-answer-only .teacher-answer-layout {
  grid-template-columns: 1fr;
}

.content-grid[data-module="teacher"] .teacher-answer-card {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  gap: clamp(0.48rem, 0.7vw, 0.66rem);
  min-height: 0;
  padding: clamp(0.9rem, 1.2vw, 1.18rem);
  border: 1px solid rgba(255, 255, 255, 0.115);
  border-radius: clamp(0.9rem, 1.2vw, 1.15rem);
  background:
    radial-gradient(circle at 86% 8%, rgba(228, 199, 127, 0.14), transparent 29%),
    radial-gradient(circle at 16% 96%, rgba(140, 233, 242, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.024)),
    rgba(2, 5, 9, 0.78);
  box-shadow:
    0 1.8rem 4.6rem rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.content-grid[data-module="teacher"] .teacher-answer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.content-grid[data-module="teacher"] .teacher-answer-head h3,
.content-grid[data-module="teacher"] .teacher-current-question h4,
.content-grid[data-module="teacher"] .teacher-direct-answer h4,
.content-grid[data-module="teacher"] .teacher-reason-panel h4,
.content-grid[data-module="teacher"] .teacher-step-panel h4 {
  margin: 0;
}

.content-grid[data-module="teacher"] .teacher-answer-head h3 {
  color: rgba(248, 251, 253, 0.98);
  font-size: clamp(1.68rem, 2.35vw, 2.55rem);
  font-weight: 780;
  line-height: 1.02;
  letter-spacing: 0;
  white-space: nowrap;
}

.content-grid[data-module="teacher"] .teacher-answer-head span,
.content-grid[data-module="teacher"] .teacher-current-question > span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.7rem;
  padding: 0 0.68rem;
  border: 1px solid rgba(228, 199, 127, 0.22);
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.08);
  color: rgba(255, 237, 190, 0.9);
  font-size: 0.72rem;
  font-weight: 780;
  white-space: nowrap;
}

.content-grid[data-module="teacher"] .teacher-current-question {
  display: grid;
  gap: 0.26rem;
  padding: clamp(0.48rem, 0.65vw, 0.62rem);
  border: 1px solid rgba(140, 233, 242, 0.18);
  border-radius: 0.88rem;
  background:
    linear-gradient(135deg, rgba(140, 233, 242, 0.105), rgba(228, 199, 127, 0.035)),
    rgba(0, 0, 0, 0.14);
}

.content-grid[data-module="teacher"] .teacher-current-question h4 {
  color: rgba(248, 251, 253, 0.98);
  font-size: clamp(1.02rem, 1.3vw, 1.24rem);
  line-height: 1.25;
}

.content-grid[data-module="teacher"] .teacher-direct-answer {
  display: grid;
  gap: 0.34rem;
}

.content-grid[data-module="teacher"] .teacher-direct-answer h4,
.content-grid[data-module="teacher"] .teacher-reason-panel h4,
.content-grid[data-module="teacher"] .teacher-step-panel h4 {
  color: rgba(255, 232, 178, 0.92);
  font-size: 0.76rem;
  font-weight: 820;
  letter-spacing: 0;
}

.content-grid[data-module="teacher"] .teacher-direct-answer p,
.content-grid[data-module="teacher"] .teacher-reason-panel p {
  max-width: 58rem;
  margin: 0;
  color: rgba(237, 244, 247, 0.82);
  font-size: clamp(0.84rem, 0.92vw, 0.94rem);
  line-height: 1.36;
}

.content-grid[data-module="teacher"] .teacher-direct-answer p:first-of-type {
  color: rgba(248, 251, 253, 0.96);
  font-size: clamp(0.92rem, 1vw, 1rem);
  font-weight: 680;
}

.content-grid[data-module="teacher"] .teacher-reason-panel {
  display: grid;
  gap: 0.3rem;
}

.content-grid[data-module="teacher"] .teacher-step-panel {
  display: grid;
  align-content: start;
  gap: 0.38rem;
  min-height: 0;
  overflow: auto;
  padding-right: 0.12rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 233, 242, 0.26) transparent;
}

.content-grid[data-module="teacher"] .teacher-step-panel ol {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-grid[data-module="teacher"] .teacher-step-panel li {
  display: block;
}

.content-grid[data-module="teacher"] .teacher-step-panel li button {
  display: grid;
  grid-template-columns: 2.18rem minmax(0, 1fr);
  gap: 0.48rem;
  width: 100%;
  align-items: center;
  padding: 0.38rem 0.56rem;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 0.78rem;
  background:
    linear-gradient(90deg, rgba(140, 233, 242, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.content-grid[data-module="teacher"] .teacher-step-panel li button:hover,
.content-grid[data-module="teacher"] .teacher-step-panel li button.is-active {
  border-color: rgba(228, 199, 127, 0.3);
  background:
    linear-gradient(90deg, rgba(228, 199, 127, 0.12), rgba(140, 233, 242, 0.055)),
    rgba(255, 255, 255, 0.05);
}

.content-grid[data-module="teacher"] .teacher-step-panel li button b {
  display: grid;
  width: 1.58rem;
  height: 1.58rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(140, 233, 242, 0.12);
  color: rgba(185, 246, 241, 0.96);
  font-size: 0.78rem;
  font-weight: 850;
}

.content-grid[data-module="teacher"] .teacher-step-panel li button span {
  color: rgba(233, 240, 244, 0.84);
  font-size: 0.8rem;
  line-height: 1.28;
}

.content-grid[data-module="teacher"] .teacher-next-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.52rem;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.085);
  background: linear-gradient(180deg, rgba(2, 5, 9, 0), rgba(2, 5, 9, 0.5) 28%, rgba(2, 5, 9, 0.72));
}

.content-grid[data-module="teacher"] .teacher-next-actions div {
  display: grid;
  gap: 0.2rem;
}

.content-grid[data-module="teacher"] .teacher-next-actions strong {
  color: rgba(248, 251, 253, 0.94);
  font-size: 0.9rem;
}

.content-grid[data-module="teacher"] .teacher-next-actions span {
  color: rgba(224, 233, 239, 0.62);
  font-size: 0.72rem;
  line-height: 1.28;
}

.content-grid[data-module="teacher"] .teacher-next-actions .glass-button {
  min-height: 2.25rem;
  white-space: nowrap;
}

.content-grid[data-module="teacher"] .teacher-demo-card {
  display: grid;
  grid-template-rows: auto minmax(12rem, 1fr) auto auto;
  gap: clamp(0.72rem, 1vw, 0.95rem);
  min-height: 0;
  padding: clamp(1rem, 1.35vw, 1.25rem);
  border: 1px solid rgba(140, 233, 242, 0.14);
  border-radius: clamp(0.9rem, 1.2vw, 1.15rem);
  background:
    radial-gradient(circle at 82% 10%, rgba(140, 233, 242, 0.12), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(2, 6, 11, 0.72);
  box-shadow:
    0 1.3rem 3.4rem rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.content-grid[data-module="teacher"] .teacher-demo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
}

.content-grid[data-module="teacher"] .teacher-demo-head h4 {
  margin: 0;
  color: rgba(248, 251, 253, 0.96);
  font-size: clamp(1.25rem, 1.65vw, 1.72rem);
  line-height: 1.16;
}

.content-grid[data-module="teacher"] .teacher-demo-head span {
  display: inline-flex;
  min-height: 1.66rem;
  align-items: center;
  padding: 0 0.62rem;
  border: 1px solid rgba(228, 199, 127, 0.2);
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.07);
  color: rgba(255, 236, 190, 0.88);
  font-size: 0.72rem;
  font-weight: 780;
  white-space: nowrap;
}

.content-grid[data-module="teacher"] .teacher-sync-practice {
  display: grid;
  align-content: center;
  gap: 0.78rem;
  min-height: 12rem;
  padding: 0.88rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.95rem;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px) 0 0 / calc(100% / var(--group-count, 3)) 100%,
    radial-gradient(circle at 50% 50%, rgba(140, 233, 242, 0.1), transparent 42%),
    rgba(0, 0, 0, 0.16);
}

.content-grid[data-module="teacher"] .teacher-practice-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.content-grid[data-module="teacher"] .teacher-practice-meta strong {
  color: rgba(248, 251, 253, 0.94);
  font-size: 0.9rem;
  line-height: 1.25;
}

.content-grid[data-module="teacher"] .teacher-practice-meta span {
  color: rgba(140, 233, 242, 0.78);
  font-size: 0.72rem;
  font-weight: 780;
  white-space: nowrap;
}

.content-grid[data-module="teacher"] .teacher-player-embed-card {
  display: grid;
  gap: 0.62rem;
  min-height: 20rem;
  padding: 0.78rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.95rem;
  background:
    radial-gradient(circle at 22% 16%, rgba(228, 199, 127, 0.12), transparent 30%),
    linear-gradient(90deg, rgba(140, 233, 242, 0.07), transparent 46%),
    rgba(0, 0, 0, 0.2);
}

.content-grid[data-module="teacher"] .teacher-player-embed-shell {
  position: relative;
  min-height: clamp(15rem, 38vh, 22rem);
  overflow: hidden;
  border: 1px solid rgba(140, 233, 242, 0.13);
  border-radius: 0.82rem;
  background: rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1rem 2.2rem rgba(0, 0, 0, 0.22);
}

.content-grid[data-module="teacher"] .teacher-player-embed {
  position: absolute;
  top: -1rem;
  left: -17rem;
  width: 58rem;
  height: 36rem;
  border: 0;
  transform: scale(0.62);
  transform-origin: top left;
}

.content-grid[data-module="teacher"] .teacher-player-practice {
  display: grid;
  gap: 0.62rem;
  min-height: 20rem;
  padding: 0.78rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.95rem;
  background:
    radial-gradient(circle at 22% 16%, rgba(228, 199, 127, 0.12), transparent 30%),
    linear-gradient(90deg, rgba(140, 233, 242, 0.07), transparent 46%),
    rgba(0, 0, 0, 0.2);
}

.content-grid[data-module="teacher"] .teacher-player-score {
  position: relative;
  min-height: 4.45rem;
  overflow: hidden;
  border: 1px solid rgba(228, 199, 127, 0.24);
  border-radius: 0.78rem;
  background:
    linear-gradient(180deg, rgba(255, 238, 190, 0.84), rgba(229, 205, 154, 0.72)),
    rgba(255, 238, 190, 0.76);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.18), 0 0.7rem 1.4rem rgba(0, 0, 0, 0.2);
}

.content-grid[data-module="teacher"] .teacher-player-score-lines {
  position: absolute;
  top: 1.08rem;
  right: 0.7rem;
  left: 0.7rem;
  display: grid;
  gap: 0.34rem;
}

.content-grid[data-module="teacher"] .teacher-player-score-lines i {
  display: block;
  height: 1px;
  background: rgba(39, 34, 24, 0.46);
}

.content-grid[data-module="teacher"] .teacher-player-score-notes {
  position: absolute;
  right: 0.85rem;
  bottom: 0.72rem;
  left: 0.85rem;
  display: grid;
  grid-template-columns: repeat(var(--note-count), minmax(0, 1fr));
  align-items: end;
}

.content-grid[data-module="teacher"] .teacher-player-score-notes span {
  display: grid;
  justify-items: center;
  gap: 0.12rem;
  color: rgba(239, 112, 36, 0.92);
  font-size: 0.66rem;
  font-weight: 860;
  transform: translateY(calc(var(--note-lane, 0) * -0.34rem));
}

.content-grid[data-module="teacher"] .teacher-player-score-notes span::after {
  width: 0.52rem;
  height: 0.42rem;
  border-radius: 50%;
  background: rgba(74, 56, 35, 0.82);
  transform: rotate(-16deg);
  content: "";
}

.content-grid[data-module="teacher"] .teacher-player-stage {
  display: grid;
  grid-template-columns: minmax(4.8rem, 0.82fr) minmax(0, 1.1fr) minmax(4.4rem, 0.62fr);
  gap: 0.54rem;
  min-height: 12.4rem;
}

.content-grid[data-module="teacher"] .teacher-waterfall-lane,
.content-grid[data-module="teacher"] .teacher-player-violin,
.content-grid[data-module="teacher"] .teacher-player-controls {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.74rem;
  background: rgba(0, 0, 0, 0.24);
}

.content-grid[data-module="teacher"] .teacher-waterfall-lane {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 68%),
    url("/player/assets/waterfall-board.png") center / cover no-repeat,
    rgba(0, 0, 0, 0.38);
}

.content-grid[data-module="teacher"] .teacher-waterfall-strings {
  position: absolute;
  inset: 0.7rem 0.7rem 0.55rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  opacity: 0.72;
}

.content-grid[data-module="teacher"] .teacher-waterfall-strings i {
  justify-self: center;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.44);
  box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.16);
}

.content-grid[data-module="teacher"] .teacher-waterfall-note {
  position: absolute;
  left: calc(16% + var(--fall-index) * 19%);
  top: calc(9% + var(--fall-index) * 18%);
  z-index: 2;
  display: grid;
  width: 1.78rem;
  height: 1.78rem;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 177, 56, 0.98), rgba(238, 116, 16, 0.94));
  color: white;
  font-size: 0.92rem;
  font-weight: 900;
  box-shadow: 0 0.45rem 1rem rgba(238, 116, 16, 0.26);
}

.content-grid[data-module="teacher"] .teacher-waterfall-lane b {
  position: absolute;
  right: 0.6rem;
  bottom: 0.8rem;
  left: 0.6rem;
  height: 2px;
  background: rgba(255, 236, 190, 0.62);
  box-shadow: 0 0 0.9rem rgba(228, 199, 127, 0.36);
}

.content-grid[data-module="teacher"] .teacher-player-violin {
  background:
    radial-gradient(circle at 52% 62%, rgba(228, 199, 127, 0.18), transparent 24%),
    rgba(0, 0, 0, 0.18);
}

.content-grid[data-module="teacher"] .teacher-player-violin img {
  position: absolute;
  inset: -8% -18% -10% -10%;
  width: 132%;
  height: 120%;
  object-fit: cover;
  opacity: 0.68;
  filter: saturate(1.08) contrast(1.04);
}

.content-grid[data-module="teacher"] .teacher-player-violin span {
  position: relative;
  z-index: 1;
  display: block;
  margin: 1.18rem 0 0 0.82rem;
  color: rgba(255, 232, 178, 0.72);
  font-size: 0.8rem;
  font-weight: 860;
}

.content-grid[data-module="teacher"] .teacher-player-violin em {
  position: absolute;
  right: 28%;
  top: 42%;
  z-index: 2;
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 177, 56, 0.96);
  color: white;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 0 1.1rem rgba(255, 177, 56, 0.34);
}

.content-grid[data-module="teacher"] .teacher-player-controls {
  display: grid;
  align-content: start;
  gap: 0.42rem;
  padding: 0.5rem;
}

.content-grid[data-module="teacher"] .teacher-player-controls button,
.content-grid[data-module="teacher"] .teacher-player-controls strong,
.content-grid[data-module="teacher"] .teacher-player-controls span {
  display: grid;
  min-height: 1.8rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(226, 235, 240, 0.82);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 780;
}

.content-grid[data-module="teacher"] .teacher-player-controls strong {
  border-radius: 999px;
  background: rgba(255, 177, 56, 0.96);
  color: rgba(10, 9, 6, 0.96);
  font-size: 0.86rem;
}

.content-grid[data-module="teacher"] .teacher-demo-card.is-playing .teacher-waterfall-note,
.content-grid[data-module="teacher"] .teacher-demo-card.is-practicing .teacher-waterfall-note {
  animation: teacherWaterfallNote 3.8s linear both;
  animation-delay: calc(var(--fall-index) * 0.22s);
}

.content-grid[data-module="teacher"] .teacher-score-staff {
  position: relative;
  min-height: 6.8rem;
  overflow: hidden;
  border-radius: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.065);
  background:
    linear-gradient(90deg, rgba(228, 199, 127, 0.08), transparent 38%),
    rgba(0, 0, 0, 0.18);
}

.content-grid[data-module="teacher"] .teacher-score-labels {
  position: absolute;
  top: 0.52rem;
  right: 0.62rem;
  left: 0.62rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.content-grid[data-module="teacher"] .teacher-score-labels b {
  color: rgba(255, 232, 178, 0.9);
  font-size: 0.68rem;
  font-weight: 860;
}

.content-grid[data-module="teacher"] .teacher-score-labels span {
  overflow: hidden;
  color: rgba(220, 230, 236, 0.62);
  font-size: 0.68rem;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-grid[data-module="teacher"] .teacher-score-lines {
  position: absolute;
  top: 1.85rem;
  right: 0.5rem;
  left: 0.5rem;
  display: grid;
  gap: 0.58rem;
}

.content-grid[data-module="teacher"] .teacher-score-lines i {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.content-grid[data-module="teacher"] .teacher-score-notes {
  position: absolute;
  right: 0.65rem;
  bottom: 0.75rem;
  left: 0.65rem;
  display: grid;
  grid-template-columns: repeat(var(--note-count), minmax(0, 1fr));
  align-items: end;
  min-height: 4.7rem;
}

.content-grid[data-module="teacher"] .teacher-score-note {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.28rem;
  color: rgba(232, 239, 244, 0.76);
  transition: color 180ms ease, transform 180ms ease;
}

.content-grid[data-module="teacher"] .teacher-score-note::before {
  display: block;
  width: 1.05rem;
  height: 0.76rem;
  border-radius: 50%;
  background: rgba(255, 240, 198, 0.95);
  box-shadow: 0 0 0.8rem rgba(228, 199, 127, 0.2);
  transform: rotate(-18deg) translateY(calc(var(--note-lane, 0) * -0.34rem));
  content: "";
}

.content-grid[data-module="teacher"] .teacher-score-note b {
  font-size: 0.68rem;
  font-weight: 820;
}

.content-grid[data-module="teacher"] .teacher-score-cursor {
  position: absolute;
  top: 0.35rem;
  bottom: 0.1rem;
  left: 0;
  width: 2px;
  border-radius: 999px;
  background: rgba(140, 233, 242, 0.82);
  box-shadow: 0 0 1rem rgba(140, 233, 242, 0.4);
}

.content-grid[data-module="teacher"] .teacher-demo-card.is-playing .teacher-score-cursor {
  animation: teacherSyncCursor 5.1s linear both;
}

.content-grid[data-module="teacher"] .teacher-demo-card.is-playing .teacher-score-note {
  animation: teacherSyncNote 520ms ease both;
  animation-delay: calc(var(--note-index) * 0.42s);
}

.content-grid[data-module="teacher"] .teacher-demo-card.is-practicing .teacher-score-cursor {
  animation: teacherSyncCursor 10s linear both;
}

.content-grid[data-module="teacher"] .teacher-demo-card.is-practicing .teacher-score-note {
  animation: teacherSyncNote 740ms ease both;
  animation-delay: calc(var(--note-index) * 0.82s);
}

.content-grid[data-module="teacher"] .teacher-bow-groups {
  display: grid;
  grid-template-columns: repeat(var(--group-count, 3), minmax(0, 1fr));
  gap: 0.42rem;
}

.content-grid[data-module="teacher"] .teacher-bow-groups span {
  display: grid;
  min-height: 1.72rem;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.16);
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.055);
  color: rgba(255, 236, 190, 0.82);
  font-size: 0.7rem;
  font-weight: 780;
}

.content-grid[data-module="teacher"] .teacher-practice-live {
  display: grid;
  min-height: 1.9rem;
  place-items: center;
  border: 1px solid rgba(140, 233, 242, 0.2);
  border-radius: 999px;
  background: rgba(140, 233, 242, 0.08);
  color: rgba(185, 246, 241, 0.94);
  font-size: 0.72rem;
  font-weight: 820;
}

.content-grid[data-module="teacher"] .teacher-demo-copy {
  display: grid;
  gap: 0.54rem;
}

.content-grid[data-module="teacher"] .teacher-demo-copy p {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0.68rem 0.76rem;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 235, 240, 0.72);
  font-size: 0.82rem;
  line-height: 1.45;
}

.content-grid[data-module="teacher"] .teacher-demo-copy b {
  color: rgba(255, 232, 178, 0.92);
}

.content-grid[data-module="teacher"] .teacher-demo-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
}

.content-grid[data-module="teacher"] .teacher-demo-actions .glass-button {
  min-height: 2.42rem;
  justify-content: center;
}

@keyframes teacherSyncCursor {
  0% { left: 0; }
  100% { left: calc(100% - 2px); }
}

@keyframes teacherSyncNote {
  0%,
  100% {
    color: rgba(232, 239, 244, 0.76);
    filter: none;
    transform: translateY(0);
  }
  48% {
    color: rgba(255, 238, 190, 0.98);
    filter: drop-shadow(0 0 0.52rem rgba(228, 199, 127, 0.38));
    transform: translateY(-0.16rem);
  }
}

@keyframes teacherWaterfallNote {
  0% {
    opacity: 0.35;
    transform: translateY(-0.8rem) scale(0.92);
  }
  45% {
    opacity: 1;
    transform: translateY(3.6rem) scale(1);
  }
  100% {
    opacity: 0.76;
    transform: translateY(7.5rem) scale(0.96);
  }
}

.teacher-problem-workbench,
.teacher-empty-workbench {
  display: grid;
  height: 100%;
  min-height: 0;
}

.teacher-problem-workbench {
  grid-template-rows: auto minmax(0, 1fr);
}

.teacher-workbench-body {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-rows: minmax(0, 1.06fr) auto auto;
  gap: clamp(0.62rem, 0.9vw, 0.85rem);
}

.teacher-workbench-card {
  display: grid;
  min-height: 0;
  gap: 0.62rem;
  overflow: hidden;
  padding: clamp(0.75rem, 1vw, 0.95rem);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.16);
}

.teacher-material-preview {
  grid-row: 1 / span 2;
}

.teacher-conclusion-card {
  grid-column: 2;
}

.teacher-quick-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.teacher-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.teacher-card-title h4,
.teacher-conclusion-card p {
  margin: 0;
}

.teacher-card-title span {
  color: var(--gold);
  font-size: 0.74rem;
  white-space: nowrap;
}

.teacher-material-preview img,
.teacher-material-preview video {
  width: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.22);
}

.teacher-material-preview audio {
  width: 100%;
}

.teacher-preview-placeholder {
  display: grid;
  min-height: clamp(10rem, 24vh, 15rem);
  place-items: center;
  border: 1px dashed rgba(228, 199, 127, 0.2);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 14% 100%,
    rgba(228, 199, 127, 0.045);
  text-align: center;
}

.teacher-preview-placeholder span {
  color: var(--muted);
}

.teacher-preview-placeholder b {
  color: var(--gold);
}

.teacher-question-diagram {
  position: relative;
  display: grid;
  min-height: clamp(10rem, 24vh, 15rem);
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(140, 233, 242, 0.2);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, transparent 0 20%, rgba(140, 233, 242, 0.14) 20% 20.4%, transparent 20.4% 50%, rgba(228, 199, 127, 0.12) 50% 50.4%, transparent 50.4% 80%, rgba(140, 233, 242, 0.14) 80% 80.4%, transparent 80.4%),
    rgba(140, 233, 242, 0.045);
  text-align: center;
}

.teacher-question-diagram span {
  color: var(--gold);
  font-weight: 850;
}

.teacher-question-diagram i {
  position: absolute;
  top: 52%;
  width: 14%;
  height: 0.22rem;
  border-radius: 999px;
  background: var(--cyan);
}

.teacher-question-diagram i:nth-of-type(1) {
  left: 22%;
}

.teacher-question-diagram i:nth-of-type(2) {
  left: 43%;
}

.teacher-question-diagram i:nth-of-type(3) {
  left: 64%;
}

.teacher-question-diagram b {
  color: var(--muted);
  font-size: 0.82rem;
}

.teacher-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: clamp(7rem, 16vh, 10rem);
  border-radius: var(--radius);
  background: rgba(140, 233, 242, 0.055);
}

.teacher-waveform i {
  width: 0.42rem;
  height: calc(1.8rem + var(--wave-index, 1) * 0.55rem);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cyan), var(--gold));
}

.teacher-waveform i:nth-child(2) { --wave-index: 3; }
.teacher-waveform i:nth-child(3) { --wave-index: 5; }
.teacher-waveform i:nth-child(4) { --wave-index: 2; }
.teacher-waveform i:nth-child(5) { --wave-index: 4; }
.teacher-waveform i:nth-child(6) { --wave-index: 2; }

.teacher-annotation-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.52rem;
}

.teacher-annotation-tags article {
  display: grid;
  gap: 0.25rem;
  padding: 0.62rem;
  border: 1px solid rgba(228, 199, 127, 0.14);
  border-radius: calc(var(--radius) * 0.85);
  background: rgba(228, 199, 127, 0.05);
}

.teacher-annotation-tags span {
  color: var(--muted);
  font-size: 0.74rem;
}

.teacher-annotation-tags strong,
.teacher-frame-grid strong,
.teacher-material-preview > strong {
  color: var(--text);
  line-height: 1.38;
}

.teacher-frame-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.teacher-frame-grid article {
  display: grid;
  gap: 0.45rem;
}

.teacher-frame-thumb {
  display: grid;
  min-height: 5rem;
  place-items: center;
  border: 1px solid rgba(140, 233, 242, 0.16);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 45%, rgba(140, 233, 242, 0.14), transparent 34%),
    rgba(0, 0, 0, 0.2);
  color: var(--cyan);
  font-weight: 800;
}

.teacher-conclusion-card {
  border-color: rgba(228, 199, 127, 0.22);
  background:
    linear-gradient(145deg, rgba(228, 199, 127, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(0, 0, 0, 0.16);
}

.teacher-conclusion-card p {
  color: var(--text);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.62;
}

.teacher-practice-steps {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.35rem;
  color: var(--muted);
  line-height: 1.5;
}

.teacher-empty-workbench {
  align-content: center;
  gap: clamp(1rem, 1.5vw, 1.35rem);
}

.teacher-empty-workbench h3,
.teacher-empty-workbench p {
  margin: 0;
}

.teacher-empty-workbench h3 {
  font-size: clamp(1.4rem, 2.1vw, 2rem);
}

.teacher-quick-entry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.teacher-quick-entry-grid button {
  display: grid;
  gap: 0.42rem;
  min-height: clamp(7rem, 15vh, 9rem);
  align-content: center;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.14);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.teacher-quick-entry-grid button:hover {
  border-color: rgba(140, 233, 242, 0.32);
  background: rgba(140, 233, 242, 0.075);
}

.teacher-quick-entry-grid span {
  color: var(--muted);
  line-height: 1.48;
}

.teacher-workflow-grid {
  grid-template-rows: minmax(0, 1.18fr) minmax(0, 0.52fr) minmax(0, 0.32fr);
  flex: 1 1 auto;
}

.teacher-workbench-tools {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.teacher-score-annotation,
.teacher-prescription-panel,
.teacher-compact-report {
  display: grid;
  min-height: 0;
  gap: 0.56rem;
  padding: clamp(0.7rem, 0.95vw, 0.9rem);
  overflow: hidden;
}

.teacher-section-title {
  align-items: flex-start;
  justify-content: space-between;
}

.teacher-section-title h4 {
  margin: 0;
}

.teacher-section-title p {
  margin: 0.16rem 0 0;
}

.teacher-score-sheet {
  position: relative;
  min-height: clamp(6rem, 15vh, 8.5rem);
  overflow: hidden;
  border: 1px solid rgba(228, 199, 127, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 8.33% 100%,
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(8, 6, 15, 0.5);
}

.score-staff-lines {
  position: absolute;
  inset: 23% 3.5% 20%;
  display: grid;
  align-content: space-between;
}

.score-staff-lines i {
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.score-measure-note {
  position: absolute;
  top: calc(16% + var(--measure-index) * 16%);
  left: calc(15% + var(--measure-index) * 25%);
  display: grid;
  width: min(25%, 11rem);
  gap: 0.2rem;
  padding: 0.48rem 0.56rem;
  border-radius: calc(var(--radius) * 0.85);
  background: rgba(0, 0, 0, 0.36);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.score-measure-note span {
  position: absolute;
  top: -0.55rem;
  right: 0.55rem;
  display: grid;
  width: 1.28rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  color: white;
  font-size: 0.68rem;
  font-weight: 800;
}

.score-measure-note b,
.teacher-error-item span,
.teacher-task-list b {
  color: var(--gold);
  font-size: 0.76rem;
}

.score-measure-note p {
  margin: 0;
  color: var(--text);
  font-size: 0.8rem;
}

.score-measure-note.is-preview {
  border: 1px solid rgba(228, 199, 127, 0.2);
  background:
    linear-gradient(145deg, rgba(228, 199, 127, 0.14), rgba(140, 233, 242, 0.055)),
    rgba(0, 0, 0, 0.34);
}

.score-measure-note.is-preview span {
  position: static;
  width: auto;
  aspect-ratio: auto;
  justify-content: start;
  color: rgba(18, 24, 28, 0.66);
  font-size: 0.62rem;
}

.teacher-error-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  min-height: 0;
}

.teacher-error-item {
  display: grid;
  min-height: 0;
  gap: 0.48rem;
  padding: 0.62rem;
  border-left-width: 3px;
}

.teacher-error-item strong,
.teacher-task-list strong,
.teacher-report-compare strong {
  color: var(--text);
}

.teacher-action-row {
  flex-wrap: wrap;
  margin-top: auto;
}

.teacher-action-row .glass-button {
  flex: 1 1 calc(50% - 0.45rem);
  min-height: 1.95rem;
  padding: 0.34rem 0.42rem;
  font-size: 0.76rem;
}

.mark-red {
  border-color: rgba(255, 82, 98, 0.36);
}

.mark-red span {
  background: #d94b5a;
}

.mark-yellow {
  border-color: rgba(238, 190, 87, 0.38);
}

.mark-yellow span {
  background: #c99431;
}

.mark-purple {
  border-color: rgba(162, 96, 246, 0.42);
}

.mark-purple span {
  background: #8f5eea;
}

.teacher-task-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.52rem;
  min-height: 0;
}

.teacher-task-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem 0.6rem;
  padding: 0.62rem;
}

.teacher-task-list .glass-button {
  grid-column: 1 / -1;
  min-height: 2rem;
}

.teacher-report-compare {
  align-items: stretch;
}

.teacher-report-compare div {
  flex: 1 1 0;
  padding: 0.58rem 0.65rem;
}

.teacher-report-compare small {
  display: block;
  margin-top: 0;
  font-size: 0.73rem;
}

.teacher-report-compare strong {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  line-height: 1.35;
}

.practice-record-hero {
  position: relative;
}

.practice-record-hero.is-report-locked .record-score-grid {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) * 0.85);
  filter: blur(5px);
  opacity: 0.56;
  pointer-events: none;
  user-select: none;
}

.practice-record-hero.is-report-locked .record-score-grid::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.045)),
    rgba(10, 14, 17, 0.18);
  backdrop-filter: blur(16px) saturate(1.2);
}

.report-upgrade-lock {
  display: grid;
  gap: 0.22rem;
  margin: calc(clamp(0.75rem, 1vw, 0.875rem) * -0.35) 0 clamp(0.75rem, 1vw, 0.875rem);
  padding: clamp(0.7rem, 0.95vw, 0.9rem);
  border: 1px solid rgba(228, 199, 127, 0.28);
  border-radius: calc(var(--radius) * 0.82);
  background:
    linear-gradient(145deg, rgba(228, 199, 127, 0.15), rgba(140, 233, 242, 0.07)),
    rgba(0, 0, 0, 0.24);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.24);
}

.report-upgrade-lock strong {
  color: var(--gold);
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
}

.report-upgrade-lock span {
  color: var(--muted);
  line-height: 1.45;
  font-size: clamp(0.76rem, 0.88vw, 0.88rem);
}

.record-score-grid,
.record-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.75vw, 0.6875rem);
  margin-bottom: clamp(0.75rem, 1vw, 0.875rem);
}

.record-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.record-metric,
.practice-progress-card,
.practice-history-row,
.stuck-pattern-card {
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.14);
}

.record-metric {
  display: grid;
  gap: 0.35rem;
  padding: clamp(0.75rem, 1vw, 0.875rem);
}

.record-metric strong {
  color: var(--text);
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
}

.record-metric span {
  color: var(--muted);
  font-size: clamp(0.72rem, 0.86vw, 0.8rem);
}

.practice-progress-card {
  display: grid;
  gap: clamp(0.625rem, 0.9vw, 0.8125rem);
  padding: clamp(0.875rem, 1.2vw, 1.125rem);
}

.practice-progress-card strong {
  color: var(--gold);
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
}

.practice-progress-card > span {
  color: var(--text);
}

.practice-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: clamp(0.75rem, 1vw, 0.875rem);
}

.practice-history-row strong {
  color: var(--text);
}

.practice-history-row b {
  display: grid;
  width: clamp(2.75rem, 3.5vw, 3.25rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.3);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(228, 199, 127, 0.08);
}

.stuck-pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.625rem, 0.9vw, 0.875rem);
}

.stuck-pattern-card {
  position: relative;
  display: grid;
  gap: clamp(0.5rem, 0.75vw, 0.6875rem);
  align-content: start;
  min-height: clamp(12.5rem, 15vw, 14.5rem);
  overflow: hidden;
  padding: clamp(0.875rem, 1.2vw, 1.125rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075);
}

.problem-demo-frame {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(228, 199, 127, 0.22);
  border-radius: calc(var(--radius) * 0.72);
  background:
    radial-gradient(circle at 18% 20%, rgba(228, 199, 127, 0.12), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02)),
    rgba(0, 0, 0, 0.18);
}

.problem-demo-surface {
  display: grid;
  align-content: start;
  gap: 0.18rem;
  padding: 0.62rem 0.68rem;
}

.problem-demo-tag {
  width: fit-content;
  padding: 0.12rem 0.42rem;
  border: 1px solid rgba(228, 199, 127, 0.28);
  border-radius: 999px;
  color: rgba(255, 231, 188, 0.9);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.problem-demo-surface strong {
  color: rgba(255, 241, 205, 0.98);
  font-size: clamp(0.88rem, 1vw, 1rem);
}

.problem-demo-surface p {
  margin: 0;
  color: rgba(224, 233, 239, 0.68);
  font-size: clamp(0.72rem, 0.8vw, 0.78rem);
  line-height: 1.35;
}

.problem-demo-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.12rem;
  padding: 0.72rem 0.72rem 0.56rem;
  text-align: left;
  background: rgba(2, 5, 7, 0.06);
}

.problem-demo-overlay b {
  color: rgba(255, 246, 224, 0.98);
  font-size: clamp(0.86rem, 0.98vw, 1rem);
}

.problem-demo-overlay span {
  color: rgba(255, 231, 188, 0.86);
  font-size: 0.68rem;
}

.problem-demo-unlock {
  min-height: 2.1rem;
  padding: 0.3rem 0.95rem;
  border: 1px solid rgba(255, 236, 198, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.08);
  color: rgba(255, 242, 214, 0.98);
  font-size: 0.78rem;
  font-weight: 720;
  cursor: pointer;
  backdrop-filter: blur(20px) saturate(1.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0.8rem 1.6rem rgba(0, 0, 0, 0.18);
}

.problem-demo-frame.is-locked .problem-demo-surface {
  filter: blur(8px);
  transform: scale(1.03);
}

.problem-demo-frame.is-locked::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(8, 12, 14, 0.34), rgba(8, 12, 14, 0.68)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.22));
  backdrop-filter: blur(4px);
  content: "";
  pointer-events: none;
}

.problem-demo-frame.is-locked .problem-demo-overlay {
  z-index: 1;
  justify-items: center;
  align-content: center;
  gap: 0;
  padding: 0.72rem;
  text-align: center;
  background: rgba(2, 5, 7, 0.03);
}

.problem-demo-frame.is-locked .problem-demo-overlay::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at center, rgba(10, 14, 16, 0.08), rgba(10, 14, 16, 0.42)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
  content: "";
  pointer-events: none;
}

.problem-demo-frame.is-locked .problem-demo-overlay b,
.problem-demo-frame.is-locked .problem-demo-overlay span {
  position: relative;
  z-index: 1;
}

.problem-demo-frame.is-locked .problem-demo-overlay b {
  display: none;
}

.problem-demo-frame.is-locked .problem-demo-overlay span {
  display: none;
}

.problem-demo-frame.is-locked .problem-demo-unlock {
  z-index: 2;
}

.problem-demo-frame.is-available .problem-demo-overlay {
  display: none;
}

.stuck-pattern-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.1875rem;
  content: "";
  background: var(--cyan);
  opacity: 0.8;
}

.stuck-pattern-card::after {
  position: absolute;
  top: -35%;
  right: -18%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(140, 233, 242, 0.16), transparent 68%);
  pointer-events: none;
}

.stuck-pattern-card.severity-high {
  border-color: rgba(228, 199, 127, 0.26);
  background:
    linear-gradient(145deg, rgba(228, 199, 127, 0.115), rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.16);
}

.stuck-pattern-card.severity-high::before {
  background: var(--gold);
}

.stuck-pattern-card.severity-high::after {
  background: radial-gradient(circle, rgba(228, 199, 127, 0.18), transparent 70%);
}

.stuck-pattern-card.severity-medium {
  border-color: rgba(140, 233, 242, 0.22);
}

.stuck-pattern-card.severity-low {
  border-color: rgba(255, 255, 255, 0.12);
}

.stuck-pattern-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--muted);
  font-size: clamp(0.72rem, 0.86vw, 0.8rem);
}

.stuck-pattern-head span {
  display: inline-flex;
  align-items: center;
  min-height: 1.625rem;
  padding: 0 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}

.stuck-pattern-head b {
  color: var(--gold);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
}

.stuck-pattern-card strong,
.stuck-pattern-card small,
.stuck-pattern-card p,
.stuck-pattern-card button {
  position: relative;
  z-index: 1;
}

.stuck-pattern-card strong {
  color: var(--text);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
}

.stuck-pattern-card small {
  color: var(--cyan);
  font-size: clamp(0.72rem, 0.86vw, 0.8rem);
}

.stuck-pattern-card p {
  margin: 0;
}

.stuck-pattern-card .glass-button {
  justify-self: start;
  margin-top: 0.2rem;
}

.report-lesson-summary,
.report-focus-panel,
.report-next-plan,
.report-trend-panel {
  overflow: hidden;
}

.report-lesson-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr);
  gap: clamp(0.75rem, 1vw, 1rem);
  padding: clamp(0.72rem, 0.95vw, 0.9rem);
}

.report-summary-copy,
.report-score-side,
.report-focus-panel,
.report-next-plan,
.report-trend-panel {
  min-height: 0;
}

.report-section-heading,
.report-panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.report-section-heading h3,
.report-panel-title h3 {
  margin: 0;
  font-size: clamp(1.02rem, 1.28vw, 1.22rem);
  line-height: 1.16;
}

.report-section-heading .eyebrow,
.report-panel-title .eyebrow {
  margin-bottom: 0.22rem;
}

.report-summary-copy {
  display: grid;
  gap: clamp(0.38rem, 0.58vw, 0.52rem);
}

.report-summary-copy > p {
  max-width: 66rem;
  margin: 0;
  color: var(--text);
  font-size: clamp(0.88rem, 1vw, 1rem);
  font-weight: 620;
  line-height: 1.48;
}

.report-summary-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.42rem, 0.62vw, 0.58rem);
}

.report-summary-point {
  display: grid;
  gap: 0.24rem;
  min-height: 0;
  padding: clamp(0.52rem, 0.72vw, 0.66rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--radius) * 0.82);
  background: rgba(255, 255, 255, 0.045);
}

.report-summary-point span,
.report-focus-card span,
.report-plan-row span,
.report-trend-card span,
.report-modal span {
  color: var(--muted);
  font-size: clamp(0.7rem, 0.78vw, 0.78rem);
  line-height: 1.35;
}

.report-summary-point strong {
  color: var(--text);
  font-size: clamp(0.78rem, 0.88vw, 0.88rem);
  line-height: 1.42;
}

.report-summary-point.is-good {
  border-color: rgba(140, 233, 242, 0.16);
}

.report-summary-point.is-risk {
  border-color: rgba(255, 150, 120, 0.18);
}

.report-summary-point.is-next {
  border-color: rgba(228, 199, 127, 0.2);
}

.report-score-side {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.5rem;
}

.report-history-button {
  grid-column: 1 / -1;
  justify-self: end;
  min-height: 2rem;
  padding: 0.35rem 0.62rem;
  color: var(--muted);
  font-size: 0.74rem;
}

.report-score-mini,
.report-piece-progress {
  display: grid;
  align-content: center;
  gap: 0.2rem;
  min-height: 0;
  padding: clamp(0.5rem, 0.72vw, 0.64rem);
  border: 1px solid rgba(228, 199, 127, 0.2);
  border-radius: calc(var(--radius) * 0.86);
  background: rgba(228, 199, 127, 0.08);
}

.report-score-mini strong {
  color: var(--gold);
  font-size: clamp(1.95rem, 2.5vw, 2.4rem);
  line-height: 0.95;
}

.report-piece-progress strong {
  color: var(--text);
  font-size: clamp(0.98rem, 1.12vw, 1.1rem);
}

.report-focus-panel,
.report-next-plan,
.report-trend-panel {
  display: grid;
  gap: clamp(0.46rem, 0.7vw, 0.62rem);
  padding: clamp(0.66rem, 0.9vw, 0.82rem);
}

.report-focus-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.55rem, 0.82vw, 0.78rem);
}

.report-focus-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.28rem;
  min-height: 0;
  padding: clamp(0.58rem, 0.8vw, 0.72rem);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: calc(var(--radius) * 0.9);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.074), rgba(255, 255, 255, 0.026)),
    rgba(0, 0, 0, 0.16);
}

.report-focus-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.16rem;
  border-radius: 999px;
  content: "";
  background: rgba(255, 143, 107, 0.72);
}

.report-focus-card > strong {
  padding-right: 2rem;
  color: var(--text);
  font-size: clamp(0.94rem, 1.08vw, 1.06rem);
  line-height: 1.22;
}

.report-focus-card p {
  display: grid;
  gap: 0.16rem;
  margin: 0;
  color: rgba(236, 244, 248, 0.78);
  font-size: clamp(0.7rem, 0.78vw, 0.78rem);
  line-height: 1.3;
}

.report-focus-card p b {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 720;
}

.report-focus-card .glass-button,
.report-plan-row .glass-button {
  min-height: 2rem;
  padding: 0.36rem 0.68rem;
}

.report-compare-button {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 1px solid rgba(140, 233, 242, 0.2);
  border-radius: 50%;
  background: rgba(140, 233, 242, 0.075);
  color: var(--cyan);
  cursor: pointer;
}

.report-plan-list {
  display: grid;
  min-height: 0;
  gap: clamp(0.34rem, 0.5vw, 0.46rem);
}

.report-plan-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 0;
  padding: clamp(0.42rem, 0.58vw, 0.54rem);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: calc(var(--radius) * 0.86);
  background: rgba(255, 255, 255, 0.045);
}

.report-plan-row b {
  display: grid;
  width: 1.85rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: var(--gold);
  background: rgba(228, 199, 127, 0.1);
}

.report-plan-row div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.report-plan-row strong {
  color: var(--text);
  font-size: clamp(0.86rem, 0.96vw, 0.96rem);
  line-height: 1.25;
}

.report-trend-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.36rem, 0.55vw, 0.5rem);
}

.report-trend-card {
  display: grid;
  gap: 0.22rem;
  min-height: 0;
  padding: clamp(0.44rem, 0.62vw, 0.58rem);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: calc(var(--radius) * 0.86);
  background: rgba(255, 255, 255, 0.046);
}

.report-trend-card strong {
  color: var(--text);
  font-size: clamp(1.05rem, 1.45vw, 1.36rem);
  line-height: 1;
}

.report-trend-card small {
  color: rgba(140, 233, 242, 0.88);
  font-size: 0.72rem;
}

.report-mini-track {
  height: 0.32rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.report-mini-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(140, 233, 242, 0.72), rgba(228, 199, 127, 0.78));
}

.report-skeleton {
  display: grid;
  gap: 0.7rem;
  padding: var(--card-pad);
}

.report-skeleton i {
  display: block;
  height: 1.2rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  animation: reportSkeleton 1.1s ease-in-out infinite;
}

.report-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px);
}

.report-modal {
  display: grid;
  width: min(42rem, 92vw);
  max-height: min(35rem, 84vh);
  gap: 0.85rem;
  overflow: auto;
  padding: clamp(1rem, 1.4vw, 1.35rem);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05)),
    rgba(7, 10, 13, 0.94);
  box-shadow: var(--shadow);
}

.report-modal-head,
.report-history-list article,
.report-compare-grid {
  display: grid;
  gap: 0.65rem;
}

.report-modal-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.report-modal-head strong {
  color: var(--text);
  font-size: 1.12rem;
}

.report-history-list {
  display: grid;
  gap: 0.55rem;
}

.report-history-list article {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--radius) * 0.86);
  background: rgba(255, 255, 255, 0.045);
}

.report-history-list article span {
  grid-column: 1;
}

.report-history-list article b {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--gold);
}

.report-compare-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-compare-grid article {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--radius) * 0.86);
  background: rgba(255, 255, 255, 0.045);
}

.report-compare-grid strong {
  color: var(--gold);
}

@keyframes reportSkeleton {
  0%,
  100% {
    opacity: 0.46;
  }
  50% {
    opacity: 1;
  }
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.8vw, 0.75rem);
}

.profile-tile strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.theme-option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1vw, 1rem);
}

.theme-option-card {
  display: grid;
  gap: clamp(0.45rem, 0.7vw, 0.625rem);
  min-height: clamp(9rem, 13vw, 11rem);
  padding: clamp(0.875rem, 1.2vw, 1.125rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.04);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.theme-option-card:hover,
.theme-option-card.is-active {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background:
    linear-gradient(145deg, var(--cyan-soft), var(--gold-soft)),
    rgba(255, 255, 255, 0.06);
}

.theme-swatch-row {
  display: flex;
  gap: 0.45rem;
}

.theme-swatch-row i {
  display: block;
  width: clamp(2.25rem, 3.3vw, 3.25rem);
  height: clamp(2.25rem, 3.3vw, 3.25rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.55rem;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.theme-option-card strong {
  color: var(--text);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
}

.theme-option-card small {
  color: var(--muted);
  line-height: 1.65;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.625rem, 0.95vw, 0.875rem);
}

.feature-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-tile,
.membership-card,
.support-form {
  display: grid;
  gap: clamp(0.55rem, 0.8vw, 0.75rem);
  padding: clamp(0.875rem, 1.2vw, 1.125rem);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.14);
}

.content-grid[data-module="featureIntro"] .feature-tile {
  position: relative;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  min-height: clamp(18rem, 32vh, 24rem);
  isolation: isolate;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.content-grid[data-module="featureIntro"] .feature-tile::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    radial-gradient(circle at 20% 0%, rgba(140, 233, 242, 0.13), transparent 34%),
    radial-gradient(circle at 82% 12%, rgba(228, 199, 127, 0.11), transparent 36%);
  opacity: 0.74;
  pointer-events: none;
}

.content-grid[data-module="featureIntro"] .feature-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(140, 233, 242, 0.28);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.042)),
    rgba(0, 0, 0, 0.16);
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.24);
}

.feature-tour {
  position: relative;
  display: grid;
  grid-template-columns: minmax(9.5rem, 0.44fr) minmax(42rem, 1.82fr) minmax(15.5rem, 0.54fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.48rem, 0.72vw, 0.68rem);
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: clamp(0.62rem, 0.86vw, 0.82rem);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: clamp(0.78rem, 1vw, 0.95rem);
  background:
    radial-gradient(circle at 54% 12%, rgba(228, 199, 127, 0.12), transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(140, 233, 242, 0.1), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.022)),
    rgba(2, 5, 9, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 1.8rem 4rem rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(26px);
}

.feature-tour::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 8.2rem 100%,
    linear-gradient(180deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px) 0 0 / 100% 5.4rem;
  opacity: 0.38;
  content: "";
  pointer-events: none;
}

.feature-tour-nav,
.feature-tour-stage-shell,
.feature-tour-copy,
.feature-tour-progress {
  position: relative;
  z-index: 1;
}

.feature-tour-nav {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.5rem, 0.68vw, 0.64rem);
  min-height: 0;
}

.feature-tour-brand {
  display: grid;
  gap: 0.14rem;
  padding: clamp(0.54rem, 0.7vw, 0.66rem);
  border: 1px solid rgba(228, 199, 127, 0.14);
  border-radius: 0.72rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(228, 199, 127, 0.13), transparent 34%),
    rgba(255, 255, 255, 0.045);
}

.feature-tour-brand strong {
  color: rgba(250, 252, 252, 0.96);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  line-height: 1.08;
}

.feature-tour-brand small {
  color: rgba(224, 233, 239, 0.56);
  font-size: 0.68rem;
  line-height: 1.3;
}

.feature-tour-nav-list {
  display: grid;
  align-content: start;
  gap: 0.32rem;
  min-height: 0;
  overflow: auto;
  padding-right: 0.12rem;
  scrollbar-width: none;
}

.feature-tour-nav-list::-webkit-scrollbar {
  display: none;
}

.feature-tour-nav-list button {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
  min-height: clamp(2.12rem, 3.26vh, 2.46rem);
  padding: 0.28rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.58rem;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(224, 233, 239, 0.72);
  text-align: left;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.feature-tour-nav-list button:hover,
.feature-tour-nav-list button.is-active {
  transform: translateX(0.08rem);
  border-color: rgba(228, 199, 127, 0.3);
  background:
    linear-gradient(135deg, rgba(228, 199, 127, 0.11), rgba(140, 233, 242, 0.04)),
    rgba(255, 255, 255, 0.055);
  color: rgba(250, 252, 252, 0.94);
}

.feature-tour-nav-list span {
  display: grid;
  width: 1.75rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.22);
  border-radius: 999px;
  color: rgba(228, 199, 127, 0.82);
  font-size: 0.64rem;
  font-weight: 780;
}

.feature-tour-nav-list strong {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(0.72rem, 0.82vw, 0.82rem);
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feature-tour-stage-shell {
  container-type: size;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(228, 199, 127, 0.14);
  border-radius: clamp(0.76rem, 1vw, 0.92rem);
  background:
    radial-gradient(circle at 50% 50%, rgba(140, 233, 242, 0.08), transparent 52%),
    rgba(0, 0, 0, 0.26);
  box-shadow:
    0 0 0 1px rgba(228, 199, 127, 0.06),
    0 1rem 3rem rgba(0, 0, 0, 0.28);
}

.feature-player-preview {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #050505;
}

.feature-player-preview::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 4.5rem rgba(0, 0, 0, 0.28);
  content: "";
  pointer-events: none;
}

.feature-player-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #050505;
  pointer-events: none;
}

.feature-player-preview-label {
  pointer-events: none;
}

.feature-practice-demo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(11rem, 0.46fr);
  grid-template-rows: auto minmax(0, 1fr) minmax(6rem, 0.26fr);
  gap: clamp(0.42rem, 0.64vw, 0.58rem);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.48rem, 0.72vw, 0.68rem);
  background:
    radial-gradient(circle at 30% 28%, rgba(228, 199, 127, 0.08), transparent 30%),
    radial-gradient(circle at 76% 62%, rgba(140, 233, 242, 0.075), transparent 32%),
    linear-gradient(180deg, rgba(10, 18, 24, 0.82), rgba(3, 6, 10, 0.92));
  transition: transform 340ms ease;
}

.feature-practice-demo[data-focus="waterfall"],
.feature-practice-demo[data-focus="judgement"] {
  transform: scale(1.018);
  transform-origin: 38% 48%;
}

.feature-practice-demo[data-focus="fingerboard"],
.feature-practice-demo[data-focus="bowing"],
.feature-practice-demo[data-focus="intonation"],
.feature-practice-demo[data-focus="position"] {
  transform: scale(1.012);
  transform-origin: 80% 48%;
}

.feature-practice-demo[data-focus="score"],
.feature-practice-demo[data-focus="controls"],
.feature-practice-demo[data-focus="ai"] {
  transform: scale(1.01);
}

.feature-practice-demo::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(2, 5, 9, 0.24);
  opacity: 1;
  content: "";
  pointer-events: none;
  transition: opacity 240ms ease;
}

.feature-practice-demo[data-focus="overview"]::after {
  opacity: 0;
}

.feature-tour[data-feature-focus="overview"] .feature-tour-stage-shell {
  border-color: rgba(228, 199, 127, 0.42);
  box-shadow:
    0 0 0 1px rgba(228, 199, 127, 0.16),
    0 0 2.2rem rgba(228, 199, 127, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.feature-demo-topbar,
.feature-demo-waterfall,
.feature-demo-right > *,
.feature-demo-score,
.feature-demo-ai {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 0.64rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transition:
    transform 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease,
    filter 260ms ease,
    opacity 260ms ease;
}

.feature-demo-topbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.8rem;
  padding: 0.44rem 0.62rem;
}

.feature-demo-topbar strong {
  color: rgba(250, 252, 252, 0.96);
  font-size: 0.94rem;
}

.feature-demo-transport {
  display: flex;
  align-items: center;
  gap: 0.36rem;
}

.feature-demo-transport span,
.feature-demo-transport button {
  display: grid;
  min-width: 2.1rem;
  min-height: 1.82rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(224, 233, 239, 0.78);
  font-size: 0.7rem;
  font-weight: 720;
}

.feature-demo-waterfall {
  grid-row: 2 / span 2;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 25% 100%,
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 100% 16.66%,
    radial-gradient(circle at 50% 84%, rgba(228, 199, 127, 0.08), transparent 28%),
    rgba(1, 4, 8, 0.58);
}

.feature-demo-lanes {
  position: absolute;
  inset: 0.7rem 0.6rem;
}

.feature-demo-lane {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--lane-left);
  width: 0;
}

.feature-demo-lane > span {
  position: absolute;
  top: 0.16rem;
  left: 50%;
  z-index: 2;
  display: grid;
  width: 1.6rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(140, 233, 242, 0.18);
  border-radius: 999px;
  color: rgba(140, 233, 242, 0.82);
  font-size: 0.68rem;
  font-weight: 760;
  transform: translateX(-50%);
}

.feature-demo-lane i {
  position: absolute;
  left: 50%;
  top: var(--note-y);
  display: grid;
  width: clamp(2rem, 3.5vw, 2.8rem);
  height: clamp(3.4rem, 8.2vh, 5.8rem);
  place-items: center;
  border: 1px solid rgba(140, 233, 242, 0.24);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(140, 233, 242, 0.62), rgba(140, 233, 242, 0.12)),
    rgba(0, 0, 0, 0.22);
  color: rgba(248, 252, 252, 0.95);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 0 1.2rem rgba(140, 233, 242, 0.12);
  transform: translateX(-50%);
  animation: featureNoteFall 4.2s linear infinite;
  animation-delay: calc((var(--lane-index) * -0.42s) + (var(--note-index) * -0.96s));
}

.feature-demo-lane:nth-child(3) i {
  border-color: rgba(228, 199, 127, 0.36);
  background:
    linear-gradient(180deg, rgba(228, 199, 127, 0.68), rgba(228, 199, 127, 0.13)),
    rgba(0, 0, 0, 0.22);
}

.feature-demo-judge-line {
  position: absolute;
  z-index: 3;
  right: 0.75rem;
  bottom: 18%;
  left: 0.75rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 232, 184, 0.9), transparent);
  box-shadow: 0 0 1.2rem rgba(228, 199, 127, 0.28);
  animation: featureJudgePulse 1.4s ease-in-out infinite;
}

.feature-demo-right {
  display: grid;
  grid-row: 2;
  gap: clamp(0.46rem, 0.7vw, 0.62rem);
  min-height: 0;
}

.feature-demo-fingerboard {
  min-height: clamp(9.2rem, 21vh, 14rem);
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 17%, rgba(255, 239, 199, 0.22) 17.4% 17.8%, transparent 18.2% 39%, rgba(255, 239, 199, 0.24) 39.4% 39.8%, transparent 40.2% 61%, rgba(255, 239, 199, 0.22) 61.4% 61.8%, transparent 62.2% 83%, rgba(255, 239, 199, 0.2) 83.4% 83.8%, transparent 84.2%),
    linear-gradient(180deg, rgba(18, 17, 14, 0.86), rgba(3, 4, 5, 0.94));
}

.feature-demo-string {
  position: absolute;
  top: 0.72rem;
  bottom: 0.72rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 236, 198, 0.66), transparent);
}

.feature-demo-string:nth-child(1) { left: 22%; }
.feature-demo-string:nth-child(2) { left: 41%; }
.feature-demo-string:nth-child(3) { left: 60%; }
.feature-demo-string:nth-child(4) { left: 79%; }

.feature-demo-fingerboard i {
  position: absolute;
  display: grid;
  width: 2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.36);
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.14);
  color: rgba(255, 239, 198, 0.96);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 820;
  box-shadow: 0 0 1.4rem rgba(228, 199, 127, 0.16);
}

.feature-demo-fingerboard i:nth-of-type(1) { left: 21%; top: 65%; }
.feature-demo-fingerboard i:nth-of-type(2) { left: 51%; top: 42%; animation: featureFingerPulse 1.7s ease-in-out infinite; }
.feature-demo-fingerboard i:nth-of-type(3) { left: 68%; top: 23%; }

.feature-demo-fingerboard b {
  position: absolute;
  left: 0.68rem;
  bottom: 0.58rem;
  color: rgba(224, 233, 239, 0.72);
  font-size: 0.7rem;
}

.feature-demo-bow,
.feature-demo-feedback,
.feature-demo-position {
  display: grid;
  gap: 0.22rem;
  align-content: center;
  min-height: clamp(3.9rem, 6.6vh, 5rem);
  padding: 0.54rem 0.62rem;
}

.feature-demo-bow span,
.feature-demo-feedback span,
.feature-demo-position span,
.feature-demo-ai span {
  color: rgba(140, 233, 242, 0.68);
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature-demo-bow i {
  position: relative;
  display: block;
  width: 78%;
  height: 0.22rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(228, 199, 127, 0.85), rgba(140, 233, 242, 0.25));
  animation: featureBowSlide 1.9s ease-in-out infinite alternate;
}

.feature-demo-bow b {
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 1.05rem;
  aspect-ratio: 1;
  border-top: 2px solid rgba(255, 232, 184, 0.88);
  border-right: 2px solid rgba(255, 232, 184, 0.88);
  transform: translateY(-50%) rotate(45deg);
}

.feature-demo-feedback strong,
.feature-demo-position strong,
.feature-demo-ai strong {
  color: rgba(250, 252, 252, 0.96);
  font-size: clamp(0.92rem, 1.18vw, 1.1rem);
  line-height: 1.12;
}

.feature-demo-feedback em,
.feature-demo-position em,
.feature-demo-ai em {
  color: rgba(224, 233, 239, 0.6);
  font-size: 0.7rem;
  font-style: normal;
  line-height: 1.28;
}

.feature-demo-score {
  grid-column: 2;
  grid-row: 3;
  min-height: 0;
  overflow: hidden;
  padding: 0.55rem;
}

.feature-demo-staff {
  position: relative;
  height: 100%;
  min-height: 5rem;
  overflow: hidden;
  border-radius: 0.46rem;
  background: rgba(255, 255, 255, 0.032);
}

.feature-demo-staff span {
  position: absolute;
  right: 0.55rem;
  left: 0.55rem;
  height: 1px;
  background: rgba(255, 239, 198, 0.28);
}

.feature-demo-staff span:nth-child(1) { top: 24%; }
.feature-demo-staff span:nth-child(2) { top: 36%; }
.feature-demo-staff span:nth-child(3) { top: 48%; }
.feature-demo-staff span:nth-child(4) { top: 60%; }
.feature-demo-staff span:nth-child(5) { top: 72%; }

.feature-demo-staff i {
  position: absolute;
  top: 43%;
  width: 0.76rem;
  height: 0.56rem;
  border-radius: 50%;
  background: rgba(255, 239, 198, 0.92);
  box-shadow: 0 0 0.8rem rgba(228, 199, 127, 0.18);
  transform: rotate(-16deg);
}

.feature-demo-staff i:nth-of-type(1) { left: 18%; }
.feature-demo-staff i:nth-of-type(2) { left: 34%; top: 35%; }
.feature-demo-staff i:nth-of-type(3) { left: 52%; top: 55%; }
.feature-demo-staff i:nth-of-type(4) { left: 70%; top: 43%; }

.feature-demo-staff b {
  position: absolute;
  top: 0.42rem;
  bottom: 0.42rem;
  left: 38%;
  width: 0.14rem;
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.72);
  box-shadow: 0 0 1.1rem rgba(228, 199, 127, 0.24);
  animation: featureScoreCursor 3s ease-in-out infinite;
}

.feature-demo-ai {
  position: absolute;
  right: 0.82rem;
  bottom: 0.82rem;
  z-index: 3;
  display: grid;
  gap: 0.2rem;
  width: min(17rem, 40%);
  min-height: 4.8rem;
  padding: 0.62rem;
}

.feature-demo-focus-label {
  position: absolute;
  z-index: 7;
  left: 0.82rem;
  bottom: 0.82rem;
  display: grid;
  gap: 0.14rem;
  max-width: min(24rem, 62%);
  padding: 0.56rem 0.68rem;
  border: 1px solid rgba(228, 199, 127, 0.18);
  border-radius: 0.58rem;
  background: rgba(3, 6, 10, 0.68);
  backdrop-filter: blur(16px);
}

.feature-demo-focus-label span {
  color: rgba(228, 199, 127, 0.82);
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.feature-demo-focus-label strong {
  color: rgba(250, 252, 252, 0.94);
  font-size: 0.9rem;
}

.feature-practice-demo[data-focus="waterfall"] [data-tour-region="waterfall"],
.feature-practice-demo[data-focus="judgement"] [data-tour-region="waterfall"],
.feature-practice-demo[data-focus="judgement"] [data-tour-region="judgement"],
.feature-practice-demo[data-focus="fingerboard"] [data-tour-region="fingerboard"],
.feature-practice-demo[data-focus="bowing"] [data-tour-region="bowing"],
.feature-practice-demo[data-focus="score"] [data-tour-region="score"],
.feature-practice-demo[data-focus="intonation"] [data-tour-region="intonation"],
.feature-practice-demo[data-focus="position"] [data-tour-region="position"],
.feature-practice-demo[data-focus="controls"] [data-tour-region="controls"],
.feature-practice-demo[data-focus="ai"] [data-tour-region="ai"] {
  z-index: 6;
  transform: scale(1.018);
  border-color: rgba(228, 199, 127, 0.5);
  box-shadow:
    0 0 0 1px rgba(228, 199, 127, 0.18),
    0 0 0 0.5rem rgba(228, 199, 127, 0.035),
    0 0 2.2rem rgba(228, 199, 127, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  filter: saturate(1.12) brightness(1.08);
  animation: featureTourGlow 2s ease-in-out infinite;
}

.feature-practice-demo[data-focus="overview"] .feature-demo-ai {
  transform: none;
}

.feature-tour-copy {
  display: grid;
  align-content: start;
  gap: clamp(0.46rem, 0.64vw, 0.6rem);
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.68rem, 0.9vw, 0.86rem);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 0.78rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(228, 199, 127, 0.14), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.026)),
    rgba(5, 9, 13, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065);
}

.feature-tour-copy h3 {
  margin: 0;
  color: rgba(250, 252, 252, 0.98);
  font-size: clamp(1.42rem, 1.86vw, 1.92rem);
  font-weight: 780;
  line-height: 1.02;
  letter-spacing: 0;
}

.feature-tour-copy > p:not(.eyebrow) {
  margin: 0;
  color: rgba(224, 233, 239, 0.68);
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  line-height: 1.42;
}

.feature-tour-copy ul {
  display: grid;
  gap: 0.34rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-tour-copy li {
  position: relative;
  padding-left: 1rem;
  color: rgba(224, 233, 239, 0.64);
  font-size: 0.72rem;
  line-height: 1.34;
}

.feature-tour-copy li::before {
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.34rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.72);
  content: "";
}

.feature-tour-tip {
  display: grid;
  gap: 0.22rem;
  padding: 0.55rem 0.62rem;
  border: 1px solid rgba(228, 199, 127, 0.16);
  border-radius: 0.64rem;
  background: rgba(228, 199, 127, 0.05);
}

.feature-tour-tip span {
  color: rgba(140, 233, 242, 0.72);
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature-tour-tip strong {
  color: rgba(255, 239, 198, 0.92);
  font-size: 0.84rem;
  line-height: 1.42;
}

.feature-tour-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem;
  margin-top: 0;
}

.feature-tour-actions .glass-button {
  min-height: 2.08rem;
  padding: 0.42rem 0.58rem;
  font-size: 0.72rem;
  white-space: nowrap;
}

.feature-tour-actions .glass-button:last-child {
  grid-column: 1 / -1;
}

.feature-tour-actions .glass-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.feature-tour-progress {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(0.62rem, 0.95vw, 0.88rem);
  align-items: center;
  min-height: 2.65rem;
  padding: 0.42rem 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 0.68rem;
  background: rgba(255, 255, 255, 0.04);
}

.feature-tour-progress > span,
.feature-tour-progress > button {
  color: rgba(224, 233, 239, 0.68);
  font-size: 0.74rem;
  white-space: nowrap;
}

.feature-tour-progress > button {
  min-height: 1.85rem;
  padding: 0.22rem 0.58rem;
  border: 1px solid rgba(228, 199, 127, 0.18);
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.055);
  cursor: pointer;
}

.feature-tour-progress-track {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.28rem;
}

.feature-tour-progress-track button {
  height: 0.38rem;
  min-width: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

.feature-tour-progress-track button.is-active {
  background: linear-gradient(90deg, rgba(228, 199, 127, 0.88), rgba(140, 233, 242, 0.45));
  box-shadow: 0 0 1rem rgba(228, 199, 127, 0.18);
}

@keyframes featureNoteFall {
  0% {
    transform: translate(-50%, -9rem);
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  78% {
    opacity: 1;
  }

  100% {
    transform: translate(-50%, 17rem);
    opacity: 0;
  }
}

@keyframes featureJudgePulse {
  0%,
  100% {
    opacity: 0.72;
    box-shadow: 0 0 1rem rgba(228, 199, 127, 0.22);
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 2.4rem rgba(228, 199, 127, 0.42);
  }
}

@keyframes featureFingerPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.16);
  }
}

@keyframes featureBowSlide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(18%);
  }
}

@keyframes featureScoreCursor {
  0%,
  100% {
    left: 24%;
  }

  50% {
    left: 72%;
  }
}

@keyframes featureTourGlow {
  0%,
  100% {
    outline: 0 solid rgba(228, 199, 127, 0);
  }

  50% {
    outline: 0.36rem solid rgba(228, 199, 127, 0.055);
  }
}

@media (max-width: 1180px) {
  .feature-tour {
    height: auto;
    min-height: calc(100dvh - 8rem);
    overflow: auto;
    grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
    grid-template-rows: auto minmax(30rem, 58vh) auto auto;
  }

  .feature-tour-nav {
    grid-column: 1 / -1;
    grid-template-rows: auto auto;
  }

  .feature-tour-nav-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(9.8rem, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.15rem;
  }

  .feature-tour-stage-shell {
    grid-column: 1 / -1;
  }

  .feature-tour-copy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .feature-tour {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(34rem, 62vh) auto auto;
    padding: 0.58rem;
  }

  .feature-practice-demo {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(18rem, 1fr) minmax(16rem, auto) minmax(6rem, auto);
  }

  .feature-demo-waterfall {
    grid-row: 2;
  }

  .feature-demo-right {
    grid-row: 3;
  }

  .feature-demo-score {
    grid-column: 1;
    grid-row: 4;
  }

  .feature-demo-ai {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
  }

  .feature-tour-progress {
    grid-template-columns: 1fr;
  }

  .feature-tour-actions {
    grid-template-columns: 1fr;
  }

  .feature-tour-actions .glass-button:last-child {
    grid-column: auto;
  }
}

.feature-tile-visual {
  position: relative;
  display: grid;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 2 / 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.115);
  border-radius: calc(var(--radius) * 0.78);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.028)),
    rgba(4, 7, 10, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035),
    0 1rem 2rem rgba(0, 0, 0, 0.16);
}

.feature-tile-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent),
    radial-gradient(circle at 50% 100%, rgba(140, 233, 242, 0.08), transparent 62%);
  opacity: 0.55;
  pointer-events: none;
}

.feature-tile-visual svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.feature-tile > span,
.membership-card strong {
  color: var(--gold);
  font-size: clamp(1.35rem, 2vw, 1.875rem);
  font-weight: 680;
}

.membership-card small {
  color: var(--cyan);
  font-size: clamp(0.72rem, 0.86vw, 0.8rem);
  text-transform: uppercase;
}

.feature-tile strong {
  color: var(--text);
  font-size: clamp(0.98rem, 1.2vw, 1.125rem);
}

.membership-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.05vw, 1rem);
}

.membership-one-screen {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1.35fr);
  gap: clamp(0.55rem, 0.78vw, 0.78rem);
  min-height: 0;
  overflow: hidden;
}

.membership-one-screen .panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.8rem, 1.2vw, 1.2rem);
  margin-bottom: 0;
}

.membership-one-screen .panel-header > div:first-child {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: clamp(0.6rem, 0.9vw, 0.9rem);
  min-width: 0;
}

.membership-one-screen .panel-header .eyebrow,
.membership-one-screen .panel-header h3,
.membership-one-screen .panel-header .muted {
  margin: 0;
}

.membership-one-screen .panel-header h3 {
  font-size: clamp(1.05rem, 1.28vw, 1.28rem);
  font-weight: 760;
}

.membership-one-screen .panel-header .muted {
  max-width: none;
  margin-top: 0.18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.membership-current-pill {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: clamp(0.38rem, 0.58vw, 0.6rem);
  padding: clamp(0.32rem, 0.46vw, 0.42rem) clamp(0.62rem, 0.82vw, 0.78rem);
  border: 1px solid rgba(228, 199, 127, 0.22);
  border-radius: calc(var(--radius) * 0.72);
  background:
    linear-gradient(145deg, rgba(228, 199, 127, 0.1), rgba(140, 233, 242, 0.04)),
    rgba(0, 0, 0, 0.16);
}

.membership-current-pill span,
.membership-current-pill small {
  color: var(--muted);
  font-size: clamp(0.62rem, 0.72vw, 0.7rem);
  font-weight: 460;
  white-space: nowrap;
}

.membership-current-pill strong {
  color: var(--gold);
  font-size: clamp(0.88rem, 1.02vw, 1rem);
  font-weight: 760;
  white-space: nowrap;
}

.membership-plan-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: clamp(0.42rem, 0.6vw, 0.58rem);
  overflow: hidden;
  min-height: 0;
  padding: clamp(0.5rem, 0.66vw, 0.66rem) clamp(0.78rem, 1vw, 1rem);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: calc(var(--radius) * 0.72);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.032)),
    rgba(0, 0, 0, 0.16);
}

.membership-plan-card::after {
  position: absolute;
  right: -22%;
  bottom: -28%;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(140, 233, 242, 0.13), transparent 70%);
  pointer-events: none;
}

.membership-plan-card.is-recommended {
  border-color: rgba(228, 199, 127, 0.34);
  background:
    linear-gradient(145deg, rgba(228, 199, 127, 0.13), rgba(140, 233, 242, 0.048)),
    rgba(0, 0, 0, 0.17);
  box-shadow: 0 0 2.5rem rgba(228, 199, 127, 0.11);
}

.membership-plan-card.is-recommended::after {
  background: radial-gradient(circle, rgba(228, 199, 127, 0.18), transparent 70%);
}

.membership-plan-card.is-recommended .membership-plan-badge {
  border-color: rgba(255, 218, 139, 0.52);
  color: rgba(255, 247, 221, 0.98);
  background:
    linear-gradient(135deg, rgba(167, 111, 34, 0.88), rgba(228, 173, 73, 0.72) 46%, rgba(255, 232, 165, 0.22)),
    rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 225, 0.22),
    0 0 0.95rem rgba(228, 173, 73, 0.2);
  font-weight: 760;
}

.membership-plan-card.is-unlock-target {
  border-color: rgba(228, 199, 127, 0.54);
  box-shadow:
    0 0 0 1px rgba(228, 199, 127, 0.1),
    0 1rem 2.5rem rgba(228, 199, 127, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.membership-plan-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.22rem;
  align-items: start;
  min-width: 0;
}

.membership-plan-copy {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.2rem;
  min-width: 0;
}

.membership-plan-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.42rem;
  max-width: 100%;
}

.membership-plan-copy h4 {
  min-width: 0;
}

.membership-plan-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.18rem;
  padding: 0 0.46rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  color: var(--muted);
  font-size: clamp(0.62rem, 0.72vw, 0.72rem);
  font-weight: 520;
  line-height: 1;
  white-space: nowrap;
}

.membership-plan-note {
  align-self: center;
  color: rgba(255, 231, 188, 0.72);
  font-size: clamp(0.58rem, 0.66vw, 0.66rem);
  font-weight: 520;
  line-height: 1;
  white-space: nowrap;
}

.membership-plan-card.is-lifetime .membership-plan-badge {
  border-color: rgba(210, 142, 194, 0.34);
  color: rgba(255, 231, 188, 0.92);
  background:
    linear-gradient(135deg, rgba(88, 21, 39, 0.66), rgba(92, 58, 121, 0.48) 52%, rgba(191, 143, 72, 0.18)),
    rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 198, 0.16),
    0 0 0.9rem rgba(112, 56, 115, 0.14);
}

.membership-plan-card h4,
.membership-plan-card button,
.membership-price {
  position: relative;
  z-index: 1;
}

.membership-plan-card h4 {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  font-weight: 760;
}

.membership-one-screen .glass-button {
  min-height: clamp(1.72rem, 2.15vh, 1.96rem);
  padding-block: 0.24rem;
  font-weight: 620;
}

.membership-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  margin: 0.04rem 0 0;
  color: var(--gold);
  white-space: nowrap;
}

.membership-plan-card button {
  align-self: center;
  justify-self: stretch;
  white-space: nowrap;
}

.membership-price small {
  font-size: clamp(0.72rem, 0.86vw, 0.86rem);
  font-weight: 620;
}

.membership-price strong {
  font-size: clamp(1.95rem, 2.85vw, 3rem);
  font-weight: 820;
  line-height: 0.95;
}

.membership-price em {
  color: var(--muted);
  font-style: normal;
  font-weight: 420;
}

.membership-upgrade-note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid rgba(228, 199, 127, 0.18);
  border-radius: calc(var(--radius) * 0.66);
  background:
    linear-gradient(135deg, rgba(228, 199, 127, 0.105), rgba(140, 233, 242, 0.04)),
    rgba(0, 0, 0, 0.12);
  color: var(--muted);
  font-size: clamp(0.7rem, 0.78vw, 0.78rem);
  font-weight: 440;
  line-height: 1.35;
}

.membership-upgrade-note strong {
  flex: 0 0 auto;
  color: rgba(255, 231, 188, 0.92);
  font-weight: 720;
}

.membership-upgrade-note span {
  min-width: 0;
}

.content-grid[data-module="membership"] .membership-checkout-notice,
.content-grid[data-module="scoreEditor"] .score-editor-action-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.78rem 0.9rem;
  border: 1px solid rgba(228, 199, 127, 0.2);
  border-radius: 0.85rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(1, 4, 8, 0.58);
}

.content-grid[data-module="membership"] .membership-checkout-notice div,
.content-grid[data-module="scoreEditor"] .score-editor-action-status {
  min-width: 0;
}

.content-grid[data-module="membership"] .membership-checkout-notice span {
  display: block;
  color: rgba(140, 233, 242, 0.72);
  font-size: 0.68rem;
  font-weight: 800;
}

.content-grid[data-module="membership"] .membership-checkout-notice strong,
.content-grid[data-module="scoreEditor"] .score-editor-action-status strong {
  display: block;
  color: rgba(248, 251, 253, 0.92);
  font-size: 0.82rem;
  line-height: 1.35;
}

.content-grid[data-module="membership"] .membership-checkout-notice small,
.content-grid[data-module="scoreEditor"] .score-editor-action-status small {
  display: block;
  margin-top: 0.18rem;
  color: rgba(224, 233, 239, 0.58);
  font-size: 0.72rem;
}

.content-grid[data-module="membership"] .membership-checkout-notice.is-error,
.content-grid[data-module="scoreEditor"] .score-editor-action-status.is-error {
  border-color: rgba(255, 134, 120, 0.32);
  background: rgba(80, 22, 18, 0.22);
}

.membership-order-status {
  display: grid;
  gap: clamp(0.66rem, 0.9vw, 0.86rem);
  padding: clamp(0.76rem, 1vw, 0.98rem);
  border: 1px solid rgba(140, 233, 242, 0.16);
  border-radius: calc(var(--radius) * 0.68);
  background:
    radial-gradient(circle at 90% 12%, rgba(140, 233, 242, 0.08), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.02)),
    rgba(0, 0, 0, 0.14);
}

.membership-order-head,
.score-task-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(0.7rem, 1vw, 1rem);
}

.membership-order-head h3,
.score-task-head h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(0.98rem, 1.18vw, 1.18rem);
}

.membership-order-head p,
.score-task-head p {
  max-width: 42rem;
  margin: 0.18rem 0 0;
  color: var(--muted);
  font-size: clamp(0.74rem, 0.84vw, 0.84rem);
  line-height: 1.48;
}

.membership-order-actions,
.score-task-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.membership-order-flow,
.score-task-flow,
.score-editor-workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.membership-order-flow article,
.score-task-step,
.score-editor-workflow article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.52rem;
  min-width: 0;
  padding: 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.032);
}

.membership-order-flow article > span,
.score-task-step > span,
.score-editor-workflow article > span {
  display: grid;
  width: 1.68rem;
  height: 1.68rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(224, 233, 239, 0.58);
  font-size: 0.66rem;
  font-weight: 820;
}

.membership-order-flow strong,
.score-task-step strong,
.score-editor-workflow strong {
  display: block;
  color: rgba(248, 251, 253, 0.9);
  font-size: 0.78rem;
  line-height: 1.25;
}

.membership-order-flow small,
.score-task-step p,
.score-editor-workflow p {
  display: block;
  margin: 0.12rem 0 0;
  color: rgba(224, 233, 239, 0.56);
  font-size: 0.7rem;
  line-height: 1.42;
}

.membership-order-flow .is-done,
.score-task-step.is-done,
.score-editor-workflow .is-done {
  border-color: rgba(140, 233, 242, 0.22);
  background: rgba(140, 233, 242, 0.06);
}

.membership-order-flow .is-active,
.score-task-step.is-active,
.score-editor-workflow .is-active {
  border-color: rgba(228, 199, 127, 0.3);
  background: rgba(228, 199, 127, 0.08);
}

.membership-order-flow .is-error,
.score-task-step.is-error {
  border-color: rgba(255, 134, 120, 0.32);
  background: rgba(80, 22, 18, 0.18);
}

.membership-order-flow .is-done > span,
.score-task-step.is-done > span,
.score-editor-workflow .is-done > span {
  border-color: rgba(140, 233, 242, 0.34);
  color: rgba(170, 244, 249, 0.95);
}

.membership-order-flow .is-active > span,
.score-task-step.is-active > span,
.score-editor-workflow .is-active > span {
  border-color: rgba(228, 199, 127, 0.42);
  color: rgba(255, 238, 190, 0.96);
}

.membership-order-meta,
.score-task-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.46rem;
}

.membership-order-meta span,
.score-task-meta span {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 0.62rem;
  background: rgba(255, 255, 255, 0.028);
}

.membership-order-meta strong,
.score-task-meta strong {
  color: rgba(228, 199, 127, 0.76);
  font-size: 0.66rem;
  font-weight: 800;
}

.membership-order-meta small,
.score-task-meta small {
  overflow: hidden;
  color: rgba(248, 251, 253, 0.82);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-editor-workflow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.membership-unlock-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 1vw, 1rem);
  min-height: clamp(4.2rem, 7vh, 5rem);
  padding: clamp(0.72rem, 1vw, 0.95rem);
  border: 1px solid rgba(228, 199, 127, 0.26);
  border-radius: calc(var(--radius) * 0.78);
  background:
    radial-gradient(circle at 92% 0%, rgba(228, 199, 127, 0.14), transparent 42%),
    linear-gradient(135deg, rgba(228, 199, 127, 0.12), rgba(140, 233, 242, 0.05)),
    rgba(0, 0, 0, 0.16);
}

.membership-unlock-callout div {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.membership-unlock-callout span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.membership-unlock-callout strong {
  color: var(--text);
  font-size: clamp(1rem, 1.18vw, 1.18rem);
}

.membership-unlock-callout p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.76rem, 0.86vw, 0.86rem);
  line-height: 1.45;
}

.membership-unlock-callout .glass-button {
  flex: 0 0 auto;
  text-decoration: none;
  white-space: nowrap;
}

.membership-comparison {
  display: grid;
  overflow: hidden;
  align-self: stretch;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: calc(var(--radius) * 0.68);
  background: rgba(0, 0, 0, 0.14);
}

.membership-comparison-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1.05fr) repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.membership-comparison-row > * {
  display: grid;
  align-items: center;
  min-height: clamp(2rem, 3.8vh, 2.65rem);
  padding: clamp(0.38rem, 0.62vw, 0.58rem);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  line-height: 1.25;
  font-size: clamp(0.72rem, 0.84vw, 0.84rem);
  font-weight: 440;
}

.membership-comparison-row > *:last-child {
  border-right: 0;
}

.membership-comparison-row > *:not(:first-child) {
  justify-items: center;
  text-align: center;
}

.membership-comparison-row:last-child > * {
  border-bottom: 0;
}

.membership-comparison-row.is-head > * {
  color: var(--gold);
  background: rgba(228, 199, 127, 0.075);
  font-weight: 720;
}

.membership-comparison-row strong {
  color: var(--text);
  font-weight: 610;
}

.membership-comparison-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.membership-comparison-title strong {
  color: var(--text);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  font-weight: 760;
}

.membership-comparison-title span {
  color: var(--muted);
  font-size: clamp(0.68rem, 0.78vw, 0.78rem);
  font-weight: 430;
}

.membership-check,
.membership-cross,
.membership-level {
  display: inline-grid;
  justify-self: center;
  width: fit-content;
  min-width: 1.5rem;
  min-height: 1.5rem;
  place-items: center;
  border-radius: 999px;
  font-style: normal;
  font-weight: 700;
}

.membership-check {
  border: 1px solid rgba(140, 233, 242, 0.34);
  color: var(--cyan);
  background: rgba(140, 233, 242, 0.075);
}

.membership-cross {
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(221, 229, 232, 0.68);
  background: rgba(255, 255, 255, 0.085);
  opacity: 0.72;
}

.membership-level {
  width: auto;
  grid-template-columns: auto auto;
  gap: 0.28rem;
  padding: 0.16rem 0.46rem;
  border: 0;
  color: var(--gold);
  background: rgba(228, 199, 127, 0.05);
  font-size: clamp(0.68rem, 0.78vw, 0.78rem);
  line-height: 1;
}

.membership-level-number {
  order: 1;
  font-size: 1.12em;
  font-weight: 820;
  line-height: 1;
}

.membership-level-unit {
  display: block;
  order: 2;
  font-size: 0.92em;
  font-weight: 560;
  line-height: 1.05;
  white-space: nowrap;
}

.membership-level.is-lifetime-quota {
  border: 0;
  color: rgba(255, 224, 138, 0.92);
  background: transparent;
  box-shadow: none;
  font-weight: 780;
  text-shadow:
    0 0 0.22rem rgba(255, 222, 132, 0.24),
    0 0 0.52rem rgba(255, 222, 132, 0.12);
}

.knowledge-orbit {
  position: relative;
  min-height: clamp(15rem, 20vw, 18rem);
  overflow: hidden;
  border: 1px solid rgba(140, 233, 242, 0.17);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 46%, rgba(228, 199, 127, 0.18), transparent 14%),
    radial-gradient(circle at 50% 50%, rgba(140, 233, 242, 0.16), transparent 36%),
    rgba(0, 0, 0, 0.18);
}

.knowledge-orbit::before {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.knowledge-orbit span {
  position: absolute;
  display: grid;
  min-width: 4.5rem;
  min-height: 2.25rem;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.knowledge-orbit span:nth-child(1) {
  top: 12%;
  left: 42%;
}

.knowledge-orbit span:nth-child(2) {
  right: 10%;
  top: 44%;
}

.knowledge-orbit span:nth-child(3) {
  bottom: 13%;
  left: 42%;
}

.knowledge-orbit span:nth-child(4) {
  left: 10%;
  top: 44%;
}

.knowledge-one-screen {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(21rem, 0.86fr) minmax(0, 1.42fr);
  gap: clamp(0.78rem, 1.05vw, 1.08rem);
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.knowledge-violin-stage,
.knowledge-category-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(175, 206, 220, 0.14);
  border-radius: clamp(0.72rem, 0.95vw, 0.85rem);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.024)),
    rgba(5, 9, 13, 0.64);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(22px);
}

.knowledge-violin-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(0.6rem, 0.85vw, 0.82rem);
  padding: clamp(0.82rem, 1.08vw, 1rem);
  isolation: isolate;
}

.knowledge-violin-stage::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 22% 28%, rgba(228, 199, 127, 0.16), transparent 34%),
    radial-gradient(circle at 80% 72%, rgba(140, 233, 242, 0.12), transparent 38%);
  background-size: 4.2rem 4.2rem, 4.2rem 4.2rem, auto, auto;
  opacity: 0.74;
}

.knowledge-stage-copy {
  display: grid;
  gap: 0.28rem;
}

.knowledge-stage-copy h3,
.knowledge-category-head h3,
.knowledge-category-card h3 {
  margin: 0;
  letter-spacing: 0;
}

.knowledge-stage-copy h3 {
  color: var(--text);
  font-size: clamp(1.25rem, 1.75vw, 1.72rem);
  line-height: 1.1;
}

.knowledge-stage-copy p:not(.eyebrow) {
  display: -webkit-box;
  max-width: 28rem;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: clamp(0.78rem, 0.92vw, 0.92rem);
  line-height: 1.56;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.knowledge-violin-model {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(0.58rem, 0.76vw, 0.72rem);
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 236, 190, 0.16), transparent 33%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
}

.knowledge-violin-model::after {
  position: absolute;
  inset: auto 12% 9%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.42), transparent 68%);
  content: "";
  filter: blur(0.32rem);
}

.knowledge-violin-model img {
  position: relative;
  z-index: 1;
  width: min(95%, 28rem);
  max-height: 100%;
  object-fit: contain;
  opacity: 0.94;
  transform: rotate(-8deg) translateY(1%);
  filter:
    drop-shadow(0 1.4rem 2.2rem rgba(0, 0, 0, 0.42))
    saturate(1.08)
    contrast(1.05);
}

.knowledge-marker {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 1.62rem;
  padding: 0 0.58rem;
  border: 1px solid rgba(228, 199, 127, 0.34);
  border-radius: 999px;
  background: rgba(5, 9, 13, 0.54);
  color: rgba(255, 231, 188, 0.96);
  font-size: clamp(0.68rem, 0.78vw, 0.76rem);
  font-weight: 760;
  box-shadow: 0 0.7rem 1.8rem rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
}

.marker-bridge {
  top: 46%;
  right: 18%;
}

.marker-fingerboard {
  top: 22%;
  left: 16%;
}

.marker-body {
  right: 12%;
  bottom: 22%;
}

.marker-strings {
  top: 40%;
  left: 10%;
}

.knowledge-stage-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.45rem, 0.65vw, 0.6rem);
}

.knowledge-stage-stats article {
  display: grid;
  gap: 0.12rem;
  min-height: clamp(4rem, 7vh, 5rem);
  align-content: center;
  padding: clamp(0.55rem, 0.8vw, 0.72rem);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: clamp(0.48rem, 0.64vw, 0.58rem);
  background: rgba(255, 255, 255, 0.052);
}

.knowledge-stage-stats strong {
  color: var(--text);
  font-size: clamp(1.35rem, 2vw, 1.95rem);
  line-height: 1;
}

.knowledge-stage-stats span {
  color: var(--muted);
  font-size: clamp(0.72rem, 0.84vw, 0.8rem);
}

.knowledge-category-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.68rem, 0.9vw, 0.86rem);
  padding: clamp(0.82rem, 1.08vw, 1rem);
}

.knowledge-category-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.knowledge-category-head h3 {
  color: var(--text);
  font-size: clamp(1.1rem, 1.42vw, 1.36rem);
}

.knowledge-category-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 1.78rem;
  padding: 0 0.72rem;
  border: 1px solid rgba(140, 233, 242, 0.2);
  border-radius: 999px;
  color: rgba(222, 232, 238, 0.76);
  background: rgba(140, 233, 242, 0.06);
  font-size: clamp(0.72rem, 0.82vw, 0.8rem);
  white-space: nowrap;
}

.knowledge-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.68rem, 0.9vw, 0.86rem);
  min-height: 0;
}

.knowledge-category-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(0.46rem, 0.62vw, 0.58rem);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.8rem, 1.08vw, 1rem);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: clamp(0.58rem, 0.76vw, 0.72rem);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.03)),
    rgba(0, 0, 0, 0.13);
}

.knowledge-category-card .eyebrow {
  color: rgba(255, 222, 145, 0.95);
  font-size: clamp(1.02rem, 1.38vw, 1.34rem);
  font-weight: 840;
  line-height: 1;
}

.knowledge-category-card h3 {
  color: var(--text);
  font-size: clamp(1rem, 1.18vw, 1.16rem);
  line-height: 1.2;
}

.knowledge-category-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: clamp(0.78rem, 0.9vw, 0.88rem);
  line-height: 1.58;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.knowledge-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  align-self: end;
}

.knowledge-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 1.76rem;
  padding: 0 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0.42rem;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(232, 238, 242, 0.78);
  font-size: clamp(0.7rem, 0.78vw, 0.76rem);
  white-space: nowrap;
}

.knowledge-3d-lab {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(13.5rem, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(0.72rem, 1vw, 1rem);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.knowledge-3d-stage-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(175, 206, 220, 0.14);
  border-radius: clamp(0.72rem, 0.95vw, 0.9rem);
  background:
    radial-gradient(circle at 50% 42%, rgba(228, 199, 127, 0.18), transparent 22%),
    radial-gradient(circle at 56% 54%, rgba(140, 233, 242, 0.14), transparent 38%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(5, 9, 13, 0.72);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: grab;
  isolation: isolate;
  opacity: 0;
  transform: translateY(0.45rem);
  animation: knowledgeStageEnter 520ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.knowledge-section-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(175, 206, 220, 0.14);
  border-radius: clamp(0.72rem, 0.95vw, 0.9rem);
  background:
    radial-gradient(circle at 54% 38%, rgba(140, 233, 242, 0.12), transparent 34%),
    radial-gradient(circle at 42% 68%, rgba(228, 199, 127, 0.12), transparent 28%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(5, 9, 13, 0.72);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  isolation: isolate;
  opacity: 0;
  transform: translateY(0.45rem);
  animation: knowledgeStageEnter 520ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.knowledge-section-stage::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.036) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 4.4rem 4.4rem;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
  opacity: 0.62;
}

@keyframes knowledgeStageEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.knowledge-3d-stage-shell::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.042) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.034) 1px, transparent 1px);
  background-size: 4.4rem 4.4rem;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
  opacity: 0.72;
}

.knowledge-3d-stage-shell.is-dragging {
  cursor: grabbing;
}

.knowledge-3d-stage-shell.is-unavailable .knowledge-3d-loader {
  display: grid;
}

.knowledge-3d-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 1;
  transform: scale(1);
  transition: opacity 560ms ease, transform 780ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 560ms ease;
  pointer-events: none;
}

.knowledge-3d-poster-fallback {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-columns: 0.76rem auto;
  align-items: center;
  gap: 0.38rem 0.58rem;
  width: min(20rem, calc(100% - 2rem));
  padding: 0.72rem 0.84rem 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0.86rem;
  color: rgba(255, 236, 188, 0.88);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.032)), rgba(5, 9, 13, 0.58);
  box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.26);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(18px);
}

.knowledge-3d-poster-fallback span {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.92);
  animation: knowledgeLoaderPulse 1.15s ease-in-out infinite;
}

.knowledge-3d-poster-fallback strong {
  color: rgba(244, 235, 216, 0.88);
  font-size: 0.76rem;
  line-height: 1.2;
}

.knowledge-3d-poster-fallback i {
  position: relative;
  grid-column: 1 / -1;
  display: block;
  height: 0.28rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.knowledge-3d-poster-fallback i em {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(228, 199, 127, 0.42), rgba(140, 233, 242, 0.82), rgba(244, 235, 216, 0.72));
  box-shadow: 0 0 1.4rem rgba(140, 233, 242, 0.28);
  animation: knowledgeLoaderBar 1.75s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.knowledge-3d-poster-fallback small {
  grid-column: 1 / -1;
  color: rgba(213, 225, 225, 0.68);
  font-size: 0.66rem;
  line-height: 1.32;
}

.knowledge-3d-poster::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background:
    radial-gradient(circle at 55% 43%, rgba(226, 173, 87, 0.2), transparent 24%),
    radial-gradient(circle at 64% 58%, rgba(140, 233, 242, 0.14), transparent 32%),
    linear-gradient(90deg, rgba(5, 9, 13, 0.44), transparent 28%, transparent 72%, rgba(5, 9, 13, 0.58));
}

.knowledge-3d-poster-glow {
  position: absolute;
  z-index: 0;
  width: min(42vw, 26rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(228, 199, 127, 0.18), rgba(140, 233, 242, 0.1) 42%, transparent 70%);
  filter: blur(1.8rem);
}

.knowledge-3d-stage-shell.is-revealed .knowledge-3d-poster {
  opacity: 0;
  transform: scale(1.025);
  filter: blur(0.28rem);
}

.knowledge-3d-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.01;
  transform: scale(0.992);
  transition: opacity 520ms ease, transform 780ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.knowledge-3d-stage-shell.is-revealed .knowledge-3d-canvas {
  opacity: 1;
  transform: scale(1);
}

.knowledge-3d-loader {
  position: absolute;
  right: clamp(0.92rem, 1.15vw, 1.12rem);
  bottom: clamp(0.92rem, 1.15vw, 1.12rem);
  z-index: 5;
  display: grid;
  grid-template-columns: 0.76rem auto;
  align-items: center;
  gap: 0.34rem 0.52rem;
  width: min(21rem, calc(100% - 1.84rem));
  min-height: 3.25rem;
  padding: 0.58rem 0.72rem 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0.82rem;
  color: rgba(255, 236, 188, 0.86);
  font-size: 0.74rem;
  letter-spacing: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.032)), rgba(5, 9, 13, 0.58);
  box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.2);
  opacity: 1;
  transition: opacity 420ms ease, transform 420ms ease, backdrop-filter 420ms ease;
  transform: translateY(0);
  backdrop-filter: blur(18px);
  pointer-events: none;
}

.knowledge-3d-loader span {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.9);
  box-shadow: 0 0 0 0 rgba(228, 199, 127, 0.32);
  animation: knowledgeLoaderPulse 1.15s ease-in-out infinite;
}

.knowledge-3d-loader b {
  font: inherit;
  font-weight: 720;
  color: rgba(244, 235, 216, 0.84);
  white-space: nowrap;
}

.knowledge-3d-loader i {
  position: relative;
  grid-column: 1 / -1;
  display: block;
  height: 0.28rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.knowledge-3d-loader i em {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(228, 199, 127, 0.42), rgba(140, 233, 242, 0.82), rgba(244, 235, 216, 0.72));
  box-shadow: 0 0 1.4rem rgba(140, 233, 242, 0.28);
  animation: knowledgeLoaderBar 1.75s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.knowledge-3d-loader small {
  grid-column: 1 / -1;
  color: rgba(213, 225, 225, 0.62);
  font-size: 0.64rem;
  line-height: 1.25;
  white-space: nowrap;
}

@keyframes knowledgeLoaderPulse {
  0%, 100% {
    transform: scale(0.88);
    box-shadow: 0 0 0 0 rgba(228, 199, 127, 0.3);
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 0.42rem rgba(228, 199, 127, 0);
  }
}

@keyframes knowledgeLoaderBar {
  0% {
    transform: translateX(-105%) scaleX(0.82);
  }

  48% {
    transform: translateX(72%) scaleX(1);
  }

  100% {
    transform: translateX(246%) scaleX(0.78);
  }
}

.knowledge-3d-loader[hidden] {
  display: none;
}

.knowledge-3d-loader.is-leaving {
  opacity: 0;
  transform: translateY(0.42rem);
  backdrop-filter: blur(0);
}

.knowledge-3d-title {
  position: absolute;
  z-index: 4;
  top: clamp(0.82rem, 1.1vw, 1.08rem);
  left: clamp(0.82rem, 1.1vw, 1.08rem);
  display: grid;
  max-width: min(32rem, 54%);
  gap: 0.28rem;
  pointer-events: none;
}

.knowledge-3d-title h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.55rem, 2.4vw, 2.55rem);
  line-height: 1;
  letter-spacing: 0;
}

.knowledge-3d-title p:not(.eyebrow) {
  margin: 0;
  color: rgba(222, 232, 238, 0.72);
  font-size: clamp(0.8rem, 0.95vw, 0.94rem);
  line-height: 1.55;
}

.knowledge-basics-guide {
  position: absolute;
  z-index: 5;
  left: clamp(0.82rem, 1.1vw, 1.08rem);
  bottom: clamp(0.82rem, 1.1vw, 1.08rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.58rem;
  width: min(32rem, 54%);
  max-height: calc(100% - 8rem);
  pointer-events: auto;
}

.knowledge-basics-model-cue {
  position: absolute;
  z-index: 4;
  right: clamp(0.82rem, 1.1vw, 1.08rem);
  top: clamp(0.82rem, 1.1vw, 1.08rem);
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.46rem;
  width: auto;
  max-width: min(15rem, 28%);
  padding: 0.42rem 0.62rem;
  border: 1px solid rgba(228, 199, 127, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.024)),
    rgba(5, 7, 8, 0.48);
  color: rgba(244, 235, 216, 0.84);
  box-shadow:
    0 0.55rem 1.4rem rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  opacity: 0.82;
  pointer-events: none;
}

.knowledge-basics-model-cue span {
  color: rgba(140, 233, 242, 0.78);
  font-size: 0.58rem;
  font-weight: 840;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.knowledge-basics-model-cue strong {
  color: rgba(255, 251, 242, 0.98);
  min-width: 0;
  overflow: hidden;
  font-size: clamp(0.72rem, 0.82vw, 0.86rem);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-basics-model-cue p {
  display: none;
}

.knowledge-basics-step-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.38rem;
}

.knowledge-basics-step {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
  min-height: 3.05rem;
  padding: 0.46rem 0.52rem;
  border: 1px solid rgba(228, 199, 127, 0.17);
  border-radius: 0.58rem;
  color: rgba(244, 235, 216, 0.82);
  text-align: left;
  appearance: none;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(5, 7, 8, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.knowledge-basics-step:hover,
.knowledge-basics-step.is-active {
  border-color: rgba(228, 199, 127, 0.48);
  color: rgba(255, 245, 225, 0.98);
  background:
    linear-gradient(100deg, rgba(118, 79, 39, 0.88), rgba(230, 188, 126, 0.7) 48%, rgba(98, 68, 36, 0.84)),
    rgba(228, 199, 127, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.24),
    0 0.8rem 1.8rem rgba(0, 0, 0, 0.24);
  transform: translateY(-1px);
}

.knowledge-basics-step span {
  color: rgba(140, 233, 242, 0.74);
  font-size: 0.62rem;
  font-weight: 820;
  line-height: 1;
}

.knowledge-basics-step strong {
  min-width: 0;
  overflow: hidden;
  color: currentColor;
  font-size: clamp(0.74rem, 0.78vw, 0.86rem);
  font-weight: 820;
  line-height: 1.12;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-basics-guide-detail {
  display: grid;
  gap: 0.5rem;
  min-height: 0;
  overflow: auto;
  padding: clamp(0.78rem, 0.95vw, 0.98rem);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.68rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(228, 199, 127, 0.1), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.032)),
    rgba(7, 8, 9, 0.78);
  box-shadow:
    0 1rem 2.4rem rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.knowledge-basics-guide-detail::-webkit-scrollbar {
  width: 0.34rem;
}

.knowledge-basics-guide-detail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.28);
}

.knowledge-basics-guide-detail h4,
.knowledge-basics-guide-detail p,
.knowledge-basics-guide-detail ul {
  margin: 0;
}

.knowledge-basics-guide-detail h4 {
  color: rgba(255, 251, 242, 0.98);
  font-size: clamp(1.12rem, 1.38vw, 1.46rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.knowledge-basics-guide-detail > p:not(.eyebrow),
.knowledge-basics-guide-detail li,
.knowledge-basics-task p,
.knowledge-basics-outcome p,
.knowledge-basics-practice p,
.knowledge-basics-keyline span {
  color: rgba(236, 232, 220, 0.74);
  font-size: clamp(0.76rem, 0.82vw, 0.88rem);
  line-height: 1.52;
}

.knowledge-basics-guide-detail ul {
  display: grid;
  gap: 0.25rem;
  padding-left: 1.05rem;
}

.knowledge-basics-keyline,
.knowledge-basics-task,
.knowledge-basics-outcome,
.knowledge-basics-practice {
  display: grid;
  gap: 0.22rem;
  padding: 0.56rem 0.64rem;
  border: 1px solid rgba(228, 199, 127, 0.16);
  border-radius: 0.54rem;
  background: rgba(228, 199, 127, 0.055);
}

.knowledge-basics-keyline strong,
.knowledge-basics-task span,
.knowledge-basics-outcome span,
.knowledge-basics-practice span {
  color: rgba(255, 231, 188, 0.94);
  font-size: 0.72rem;
  font-weight: 840;
  line-height: 1.1;
}

.knowledge-basics-outcome {
  border-color: rgba(140, 233, 242, 0.18);
  background: rgba(140, 233, 242, 0.055);
}

.knowledge-basics-practice {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
}

.knowledge-basics-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 2.7rem;
  padding: 0.58rem 0.74rem;
  border: 1px solid rgba(228, 199, 127, 0.34);
  border-radius: 0.58rem;
  color: rgba(255, 245, 225, 0.96);
  text-align: left;
  appearance: none;
  cursor: pointer;
  background:
    linear-gradient(100deg, rgba(118, 79, 39, 0.88), rgba(230, 188, 126, 0.7) 48%, rgba(98, 68, 36, 0.84)),
    rgba(228, 199, 127, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.22),
    0 0.65rem 1.5rem rgba(0, 0, 0, 0.2);
}

.knowledge-basics-next span {
  color: rgba(255, 231, 188, 0.82);
  font-size: 0.7rem;
  font-weight: 820;
}

.knowledge-basics-next strong {
  color: currentColor;
  font-size: 0.9rem;
  line-height: 1.1;
}

.knowledge-basics-quiz {
  display: grid;
  gap: 0.4rem;
  padding: 0.64rem;
  border: 1px solid rgba(140, 233, 242, 0.18);
  border-radius: 0.58rem;
  background: rgba(140, 233, 242, 0.055);
}

.knowledge-basics-quiz > span {
  color: rgba(140, 233, 242, 0.88);
  font-size: 0.72rem;
  font-weight: 840;
}

.knowledge-basics-quiz div {
  display: grid;
  gap: 0.12rem;
}

.knowledge-basics-quiz-item {
  padding: 0.46rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.48rem;
  background: rgba(255, 255, 255, 0.028);
}

.knowledge-basics-quiz-item.is-correct {
  border-color: rgba(102, 221, 154, 0.34);
  background: rgba(102, 221, 154, 0.08);
}

.knowledge-basics-quiz-item.is-wrong {
  border-color: rgba(255, 170, 116, 0.34);
  background: rgba(255, 170, 116, 0.08);
}

.knowledge-basics-quiz-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.32rem;
}

.knowledge-basics-quiz-choices button {
  min-height: 2rem;
  padding: 0.34rem 0.42rem;
  border: 1px solid rgba(228, 199, 127, 0.16);
  border-radius: 0.44rem;
  color: rgba(245, 245, 243, 0.9);
  font-size: 0.72rem;
  font-weight: 780;
  appearance: none;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(10, 11, 12, 0.72);
}

.knowledge-basics-quiz-choices button.is-selected {
  border-color: rgba(228, 199, 127, 0.48);
  color: rgba(255, 245, 225, 0.98);
  background:
    linear-gradient(100deg, rgba(118, 79, 39, 0.88), rgba(230, 188, 126, 0.7) 48%, rgba(98, 68, 36, 0.84)),
    rgba(228, 199, 127, 0.22);
}

.knowledge-basics-quiz strong {
  color: rgba(255, 251, 242, 0.95);
  font-size: 0.78rem;
  line-height: 1.28;
}

.knowledge-basics-quiz p {
  margin: 0;
  color: rgba(236, 232, 220, 0.72);
  font-size: 0.74rem;
  line-height: 1.34;
}

.knowledge-3d-callout {
  position: absolute;
  z-index: 4;
  display: grid;
  align-items: start;
  grid-template-columns: 5rem minmax(16rem, 24rem);
  max-width: min(32rem, 48vw);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(238, 244, 247, 0.92);
  text-align: left;
  pointer-events: none;
  transform: translate(0.7rem, -1.1rem);
}

.knowledge-3d-callout[hidden] {
  display: none;
}

.knowledge-basics-stage .knowledge-3d-callout {
  left: auto !important;
  top: auto !important;
  right: clamp(0.82rem, 1.1vw, 1.08rem);
  bottom: clamp(0.82rem, 1.1vw, 1.08rem);
  grid-template-columns: minmax(16rem, 23rem);
  max-width: min(23rem, 36%);
  transform: none;
}

.knowledge-basics-stage .knowledge-3d-callout i {
  display: none;
}

.knowledge-3d-callout i {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 1.25rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(140, 233, 242, 0.72), rgba(228, 199, 127, 0.36));
  box-shadow: 0 0 0.9rem rgba(140, 233, 242, 0.36);
}

.knowledge-3d-callout article {
  display: grid;
  gap: 0.78rem;
  padding: clamp(0.95rem, 1.1vw, 1.12rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.64rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(140, 233, 242, 0.11), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(7, 11, 14, 0.76);
  box-shadow:
    0 1.2rem 2.6rem rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  animation: knowledgeCalloutEnter 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  pointer-events: auto;
}

.knowledge-basics-stage .knowledge-3d-callout article {
  gap: 0.62rem;
}

.knowledge-basics-stage .knowledge-3d-callout h3 {
  font-size: clamp(1.28rem, 1.55vw, 1.72rem);
}

@keyframes knowledgeCalloutEnter {
  from {
    opacity: 0;
    transform: translateX(-0.28rem) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.knowledge-3d-callout h3,
.knowledge-3d-callout p,
.knowledge-3d-callout ul {
  margin: 0;
}

.knowledge-3d-callout h3 {
  color: var(--text);
  font-size: clamp(1.45rem, 1.9vw, 2rem);
  line-height: 1;
  letter-spacing: 0;
}

.knowledge-3d-callout article > p:not(.eyebrow),
.knowledge-3d-callout li,
.knowledge-3d-callout div p {
  color: rgba(222, 232, 238, 0.75);
  font-size: clamp(0.78rem, 0.86vw, 0.9rem);
  line-height: 1.58;
}

.knowledge-3d-callout strong,
.knowledge-3d-callout div span {
  color: rgba(255, 231, 188, 0.94);
  font-size: 0.78rem;
  font-weight: 820;
}

.knowledge-3d-callout ul {
  display: grid;
  gap: 0.32rem;
  padding-left: 1rem;
}

.knowledge-3d-callout div {
  display: grid;
  gap: 0.28rem;
  padding: 0.72rem;
  border: 1px solid rgba(228, 199, 127, 0.16);
  border-radius: 0.58rem;
  background: rgba(228, 199, 127, 0.055);
}

.knowledge-3d-callout .knowledge-hotspot-beginner {
  border-color: rgba(140, 233, 242, 0.18);
  background: rgba(140, 233, 242, 0.055);
}

.knowledge-3d-callout .knowledge-hotspot-beginner span {
  color: rgba(140, 233, 242, 0.88);
  font-size: 0.74rem;
  line-height: 1.45;
}

.knowledge-hotspot-more {
  display: grid;
  gap: 0.58rem;
  padding: 0.68rem 0.72rem;
  border: 1px solid rgba(228, 199, 127, 0.14);
  border-radius: 0.58rem;
  background: rgba(255, 255, 255, 0.035);
}

.knowledge-hotspot-more summary {
  color: rgba(255, 231, 188, 0.94);
  font-size: 0.78rem;
  font-weight: 840;
  cursor: pointer;
}

.knowledge-hotspot-more[open] summary {
  margin-bottom: 0.18rem;
}

.knowledge-3d-dock {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(0.62rem, 0.86vw, 0.82rem);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.82rem, 1.08vw, 1rem);
  border: 1px solid rgba(175, 206, 220, 0.14);
  border-radius: clamp(0.72rem, 0.95vw, 0.9rem);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.024)),
    rgba(5, 9, 13, 0.72);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(22px);
}

.knowledge-side-slot {
  display: grid;
  align-content: center;
  gap: clamp(0.3rem, 0.42vw, 0.42rem);
  min-height: 0;
  padding: clamp(0.82rem, 1vw, 1rem);
  color: rgba(234, 241, 244, 0.86);
  text-align: left;
  appearance: none;
  cursor: pointer;
  opacity: 0;
  transform: translateX(0.5rem);
  animation: knowledgeDockSlotEnter 520ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.knowledge-side-slot:hover,
.knowledge-side-slot.is-active {
  border-color: rgba(228, 199, 127, 0.34);
  background:
    radial-gradient(circle at 100% 0%, rgba(228, 199, 127, 0.13), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.032)),
    rgba(5, 9, 13, 0.66);
  box-shadow:
    0 1.2rem 3rem rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(228, 199, 127, 0.05);
}

.knowledge-side-slot:hover {
  transform: translateX(-0.08rem);
}

.knowledge-side-slot span {
  color: rgba(140, 233, 242, 0.74);
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0.08em;
}

.knowledge-side-slot strong {
  color: rgba(247, 249, 247, 0.96);
  font-size: 1.14rem;
  line-height: 1.05;
  letter-spacing: 0;
}

.knowledge-side-slot em {
  color: rgba(228, 199, 127, 0.78);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.knowledge-side-slot p {
  margin: 0.15rem 0 0;
  color: rgba(220, 230, 234, 0.62);
  font-size: 0.78rem;
  line-height: 1.42;
}

.knowledge-side-slot:nth-child(2) {
  animation-delay: 60ms;
}

.knowledge-side-slot:nth-child(3) {
  animation-delay: 120ms;
}

.knowledge-side-slot:nth-child(4) {
  animation-delay: 180ms;
}

@keyframes knowledgeDockSlotEnter {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.premium-glass-card {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: clamp(0.72rem, 0.92vw, 0.86rem);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.026)),
    rgba(5, 9, 13, 0.62);
  box-shadow:
    0 1.1rem 3rem rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(22px);
}

.knowledge-video-frame,
.knowledge-note-atlas,
.knowledge-staff-preview {
  position: absolute;
  z-index: 1;
  right: clamp(2rem, 4vw, 4rem);
  bottom: clamp(2rem, 4vw, 4rem);
  left: clamp(2rem, 4vw, 4rem);
}

.knowledge-video-frame {
  top: clamp(7.4rem, 16vh, 9rem);
  bottom: clamp(8.4rem, 15vh, 10.2rem);
  display: grid;
  place-items: center;
  gap: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0.86rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    radial-gradient(circle at 50% 50%, rgba(140, 233, 242, 0.1), transparent 42%),
    rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1.4rem 3.5rem rgba(0, 0, 0, 0.22);
  text-align: center;
}

.knowledge-posture-stage .knowledge-video-frame {
  left: clamp(1.8rem, 3.4vw, 3.4rem);
  right: clamp(1.8rem, 3.4vw, 3.4rem);
}

.knowledge-play-symbol {
  width: clamp(3.8rem, 5.4vw, 5.2rem);
  aspect-ratio: 1;
  border: 1px solid rgba(228, 199, 127, 0.32);
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.08);
  box-shadow: 0 0 2rem rgba(228, 199, 127, 0.12);
}

.knowledge-play-symbol::before {
  display: block;
  width: 0;
  height: 0;
  margin: 50% 0 0 54%;
  border-top: 0.62rem solid transparent;
  border-bottom: 0.62rem solid transparent;
  border-left: 0.96rem solid rgba(255, 232, 184, 0.9);
  content: "";
  transform: translate(-50%, -50%);
}

.knowledge-video-frame strong,
.knowledge-note-demo h3 {
  color: rgba(247, 249, 247, 0.96);
}

.knowledge-video-frame p,
.knowledge-note-demo p,
.knowledge-stage-caption {
  margin: 0;
  color: rgba(220, 230, 234, 0.64);
  line-height: 1.5;
}

.knowledge-video-picker {
  position: absolute;
  z-index: 2;
  right: clamp(1.8rem, 3.4vw, 3.4rem);
  bottom: clamp(1.25rem, 2vw, 1.8rem);
  left: clamp(1.8rem, 3.4vw, 3.4rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.52rem, 0.86vw, 0.78rem);
}

.knowledge-video-picker button {
  position: relative;
  display: grid;
  gap: 0.18rem;
  min-height: 5.4rem;
  padding: 0.72rem 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 0.72rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.024)),
    rgba(5, 9, 13, 0.48);
  color: rgba(235, 242, 246, 0.9);
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.knowledge-video-picker button:hover,
.knowledge-video-picker button.is-active {
  border-color: rgba(228, 199, 127, 0.35);
  background:
    radial-gradient(circle at 100% 0%, rgba(228, 199, 127, 0.13), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.028)),
    rgba(5, 9, 13, 0.58);
}

.knowledge-video-picker button:hover {
  transform: translateY(-1px);
}

.knowledge-video-picker span {
  color: rgba(140, 233, 242, 0.7);
  font-size: 0.66rem;
  font-weight: 780;
  letter-spacing: 0.08em;
}

.knowledge-video-picker strong {
  color: rgba(247, 249, 247, 0.95);
  font-size: 0.96rem;
  line-height: 1.12;
}

.knowledge-video-picker p {
  margin: 0;
  color: rgba(220, 230, 234, 0.58);
  font-size: 0.72rem;
  line-height: 1.32;
}

.knowledge-video-picker em {
  position: absolute;
  right: 0.72rem;
  bottom: 0.64rem;
  color: rgba(228, 199, 127, 0.72);
  font-size: 0.66rem;
  font-style: normal;
}

.knowledge-stage-caption {
  position: absolute;
  z-index: 2;
  right: clamp(1.1rem, 1.6vw, 1.5rem);
  bottom: clamp(1rem, 1.4vw, 1.3rem);
  font-size: 0.78rem;
}

.knowledge-note-atlas {
  top: clamp(7.2rem, 16vh, 8.8rem);
  display: grid;
  grid-template-columns: minmax(24rem, 1.05fr) minmax(17rem, 0.95fr);
  gap: clamp(0.68rem, 1vw, 0.95rem);
  align-items: stretch;
}

.knowledge-note-grid {
  display: grid;
  align-content: start;
  gap: 0.34rem;
  max-height: 100%;
  overflow: auto;
  padding-right: 0.2rem;
  scrollbar-width: none;
}

.knowledge-note-grid::-webkit-scrollbar {
  display: none;
}

.knowledge-note-group {
  display: grid;
  gap: 0.22rem;
}

.knowledge-note-group > strong {
  color: rgba(228, 199, 127, 0.8);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.knowledge-note-group > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.24rem;
}

.knowledge-note-grid button {
  min-height: 1.72rem;
  padding: 0.12rem 0.16rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.34rem;
  color: rgba(247, 249, 247, 0.9);
  font-size: 0.68rem;
  font-weight: 780;
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knowledge-note-grid button.is-symbol {
  font-size: 1rem;
  line-height: 1;
}

.knowledge-note-grid button.is-selected {
  border-color: rgba(228, 199, 127, 0.45);
  background: rgba(228, 199, 127, 0.12);
  box-shadow: 0 0 2rem rgba(228, 199, 127, 0.12);
}

.knowledge-note-demo {
  display: grid;
  align-content: center;
  gap: 0.7rem;
  padding: clamp(1rem, 1.7vw, 1.5rem);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0.86rem;
  background: rgba(5, 9, 13, 0.52);
  backdrop-filter: blur(16px);
}

.knowledge-note-demo-caption {
  margin: -0.12rem 0 0;
  color: rgba(228, 239, 240, 0.72);
  font-size: 0.8rem;
  line-height: 1.45;
}

.knowledge-note-duration-hero {
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(228, 199, 127, 0.16);
  border-radius: 0.72rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.035);
}

.knowledge-note-duration-badge {
  justify-self: start;
  padding: 0.18rem 0.48rem;
  border: 1px solid rgba(228, 199, 127, 0.2);
  border-radius: 999px;
  color: rgba(255, 239, 198, 0.84);
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1;
}

.knowledge-note-duration-name {
  color: rgba(255, 239, 198, 0.98);
  font-size: 2.05rem;
  font-weight: 820;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 1.8rem rgba(228, 199, 127, 0.24);
}

.knowledge-note-duration-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  color: rgba(232, 238, 240, 0.76);
  font-size: 0.8rem;
}

.knowledge-note-duration-meta strong {
  color: rgba(255, 239, 198, 0.92);
  font-size: 0.9rem;
}

.knowledge-note-duration-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.knowledge-note-duration-strip span {
  height: 0.28rem;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(228, 199, 127, 0.12), rgba(255, 239, 198, 0.5), rgba(228, 199, 127, 0.12)),
    rgba(255, 255, 255, 0.08);
}

.knowledge-note-rest-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(4.8rem, 0.36fr) minmax(0, 1fr);
  gap: 0.72rem 0.9rem;
  align-items: center;
  min-height: 6.4rem;
  padding: 0.85rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(140, 233, 242, 0.16);
  border-radius: 0.72rem;
  background:
    radial-gradient(circle at 18% 48%, rgba(140, 233, 242, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
}

.knowledge-note-rest-badge {
  position: absolute;
  left: 0.82rem;
  top: 0.72rem;
  padding: 0.18rem 0.48rem;
  border: 1px solid rgba(140, 233, 242, 0.22);
  border-radius: 999px;
  color: rgba(197, 247, 250, 0.86);
  font-size: 0.65rem;
  font-weight: 720;
  line-height: 1;
}

.knowledge-note-rest-glyph {
  grid-row: span 2;
  color: rgba(215, 248, 250, 0.96);
  font-family: "Bravura", "Noto Music", "STIX Two Text", "Times New Roman", serif;
  font-size: 3.65rem;
  line-height: 0.9;
  text-align: center;
  text-shadow: 0 0 1.6rem rgba(140, 233, 242, 0.22);
  transform: translateY(0.28rem);
  animation: knowledgeNoteHeroPop 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.knowledge-note-rest-meta {
  display: grid;
  gap: 0.22rem;
  margin-top: 0.6rem;
}

.knowledge-note-rest-meta strong {
  color: rgba(247, 249, 247, 0.96);
  font-size: 1.28rem;
  line-height: 1.05;
}

.knowledge-note-rest-meta span {
  color: rgba(220, 230, 234, 0.66);
  font-size: 0.82rem;
}

.knowledge-note-rest-strip {
  display: grid;
  grid-template-columns: 1.2fr 0.72fr 0.42fr;
  gap: 0.34rem;
  align-self: end;
}

.knowledge-note-rest-strip span {
  height: 0.28rem;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(140, 233, 242, 0.08), rgba(197, 247, 250, 0.48), rgba(140, 233, 242, 0.08)),
    rgba(255, 255, 255, 0.07);
}

.knowledge-note-key-hero,
.knowledge-note-interval-hero {
  position: relative;
  display: grid;
  gap: 0.5rem;
  min-height: 6.4rem;
  padding: 0.85rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(228, 199, 127, 0.16);
  border-radius: 0.72rem;
  background:
    radial-gradient(circle at 82% 36%, rgba(228, 199, 127, 0.13), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
}

.knowledge-note-key-badge,
.knowledge-note-interval-badge {
  justify-self: start;
  padding: 0.18rem 0.48rem;
  border: 1px solid rgba(228, 199, 127, 0.22);
  border-radius: 999px;
  color: rgba(255, 239, 198, 0.86);
  font-size: 0.65rem;
  font-weight: 720;
  line-height: 1;
}

.knowledge-note-key-name {
  color: rgba(255, 239, 198, 0.98);
  font-size: 2.1rem;
  font-weight: 820;
  line-height: 1;
}

.knowledge-note-key-meta,
.knowledge-note-interval-meta {
  display: grid;
  gap: 0.22rem;
}

.knowledge-note-key-meta strong,
.knowledge-note-interval-meta strong {
  color: rgba(247, 249, 247, 0.94);
  font-size: 0.95rem;
}

.knowledge-note-key-meta span,
.knowledge-note-interval-meta span {
  color: rgba(220, 230, 234, 0.64);
  font-size: 0.8rem;
}

.knowledge-note-interval-hero {
  grid-template-columns: minmax(0, 1fr);
}

.knowledge-note-interval-line {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: min(13rem, 82%);
  margin: 0.2rem auto 0;
}

.knowledge-note-interval-line span {
  width: 1.28rem;
  height: 1.28rem;
  border: 1px solid rgba(255, 239, 198, 0.52);
  border-radius: 50%;
  background: rgba(255, 239, 198, 0.88);
  box-shadow: 0 0 1rem rgba(228, 199, 127, 0.2);
}

.knowledge-note-interval-line i {
  height: 1px;
  margin: 0 0.38rem;
  background: linear-gradient(90deg, rgba(255, 239, 198, 0.28), rgba(140, 233, 242, 0.58), rgba(255, 239, 198, 0.28));
}

.knowledge-note-interval-hero.is-close .knowledge-note-interval-line {
  width: min(8.2rem, 64%);
}

.knowledge-note-interval-hero.is-wide .knowledge-note-interval-line {
  width: min(13.5rem, 84%);
}

.knowledge-note-symbol-hero {
  display: grid;
  min-height: 5rem;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.16);
  border-radius: 0.72rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(228, 199, 127, 0.16), transparent 42%),
    rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.knowledge-note-symbol-hero span {
  color: rgba(255, 239, 198, 0.96);
  font-size: 3.15rem;
  font-weight: 820;
  line-height: 1;
  text-shadow: 0 0 1.8rem rgba(228, 199, 127, 0.24);
  animation: knowledgeNoteHeroPop 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.knowledge-note-staff-demo {
  position: relative;
  min-height: 7.2rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 0.68rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.22);
}

.knowledge-note-staff-demo i {
  position: absolute;
  right: 9%;
  left: 9%;
  height: 1px;
  background: rgba(232, 238, 240, 0.34);
}

.knowledge-note-staff-demo i:nth-child(1) { top: 31%; }
.knowledge-note-staff-demo i:nth-child(2) { top: 39%; }
.knowledge-note-staff-demo i:nth-child(3) { top: 47%; }
.knowledge-note-staff-demo i:nth-child(4) { top: 55%; }
.knowledge-note-staff-demo i:nth-child(5) { top: 63%; }

.knowledge-note-staff-demo > b {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 2;
  color: rgba(255, 239, 198, 0.96);
  font-size: 2.25rem;
  line-height: 1;
  text-shadow: 0 0 1.25rem rgba(228, 199, 127, 0.34);
  transform: translate(-50%, -50%);
  animation: knowledgeStaffSymbolDrop 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both;
}

.knowledge-staff-clef {
  position: absolute;
  left: 16%;
  top: var(--clef-top, 47%);
  z-index: 2;
  color: rgba(255, 239, 198, 0.92);
  font-size: 2.4rem;
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: knowledgeStaffSymbolDrop 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both;
}

.knowledge-staff-clef.is-tenor-clef {
  --clef-top: 55%;
}

.knowledge-staff-clef.is-featured {
  left: 50%;
  font-size: 4rem;
}

.knowledge-staff-note {
  position: absolute;
  left: var(--note-left, 52%);
  top: var(--note-top, 48%);
  z-index: 2;
  width: 0.88rem;
  height: 0.62rem;
  border-radius: 50%;
  background: rgba(255, 239, 198, 0.96);
  box-shadow: 0 0 0.85rem rgba(228, 199, 127, 0.22);
  transform: translate(-50%, -50%) rotate(-16deg);
  animation: knowledgeStaffNotePlace 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both;
}

.knowledge-staff-note::after {
  position: absolute;
  right: -0.12rem;
  bottom: 0.28rem;
  width: 1px;
  height: 2.35rem;
  background: rgba(255, 239, 198, 0.88);
  content: "";
  transform: rotate(16deg);
  transform-origin: bottom;
}

.knowledge-staff-note.is-stem-down {
  transform: translate(-50%, -50%) rotate(16deg);
}

.knowledge-staff-note.is-stem-down::after {
  right: auto;
  left: -0.12rem;
  bottom: auto;
  top: 0.28rem;
  transform: rotate(-16deg);
  transform-origin: top;
}

.knowledge-staff-ledger {
  position: absolute;
  left: var(--ledger-left, 52%);
  top: var(--ledger-top, 48%);
  width: 1.7rem;
  height: 1px;
  background: rgba(255, 239, 198, 0.7);
  transform: translate(-50%, -50%);
}

.knowledge-staff-ledger::before,
.knowledge-staff-ledger::after {
  position: absolute;
  top: 0;
  width: 1px;
  height: 0.68rem;
  background: rgba(255, 239, 198, 0.42);
  content: "";
}

.knowledge-staff-ledger::before {
  left: 0;
}

.knowledge-staff-ledger::after {
  right: 0;
}

.knowledge-staff-note.is-ghost {
  opacity: 0.46;
  background: rgba(140, 233, 242, 0.28);
  outline: 1px dashed rgba(140, 233, 242, 0.62);
  outline-offset: 0.18rem;
  box-shadow: 0 0 0.8rem rgba(140, 233, 242, 0.18);
}

.knowledge-staff-note.is-ghost.is-stem-down {
  transform: translate(-50%, -50%) rotate(16deg);
}

.knowledge-staff-note.is-ghost::after {
  background: repeating-linear-gradient(
    to top,
    rgba(140, 233, 242, 0.68) 0 0.26rem,
    transparent 0.26rem 0.46rem
  );
}

.knowledge-staff-dot {
  position: absolute;
  left: var(--dot-left, 61%);
  top: var(--dot-top, 47%);
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: rgba(255, 239, 198, 0.96);
  box-shadow: 0 0 0.65rem rgba(228, 199, 127, 0.26);
  transform: translate(-50%, -50%);
  animation: knowledgeStaffSymbolDrop 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both;
}

.knowledge-note-staff-demo.is-dotted .knowledge-staff-note::after {
  height: 1.95rem;
}

.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-whole,
.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-half {
  border: 2px solid rgba(255, 239, 198, 0.96);
  background: rgba(5, 9, 13, 0.92);
  box-shadow:
    inset 0 0 0 2px rgba(5, 9, 13, 0.66),
    0 0 0.85rem rgba(228, 199, 127, 0.22);
}

.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-whole {
  width: 1.05rem;
  height: 0.7rem;
}

.knowledge-staff-duration-font {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 2;
  color: rgba(255, 239, 198, 0.98);
  font-family:
    "Apple Symbols",
    "Noto Music",
    "Bravura",
    "Gonville",
    "Segoe UI Symbol",
    "Arial Unicode MS",
    serif;
  font-size: 2.15rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
  text-shadow: 0 0 0.85rem rgba(228, 199, 127, 0.22);
  transform: translate(-50%, -50%);
  animation: knowledgeStaffNotePlace 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both;
}

.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-whole::after,
.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-whole::before {
  opacity: 0;
}

.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-half::after {
  height: 2.25rem;
}

.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-quarter::after {
  height: 2.1rem;
}

.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-eighth::after,
.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-eighth-double::after,
.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-sixteenth::after,
.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-thirty-second::after,
.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-sixty-fourth::after {
  height: 2.45rem;
}

.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-eighth::after,
.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-eighth-double::after {
  box-shadow:
    0.18rem 0.88rem 0 0 rgba(255, 239, 198, 0.88);
}

.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-sixteenth::after,
.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-thirty-second::after,
.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-sixty-fourth::after {
  box-shadow:
    0.18rem 0.88rem 0 0 rgba(255, 239, 198, 0.88),
    0.18rem 1.22rem 0 0 rgba(255, 239, 198, 0.88);
}

.knowledge-note-staff-demo.is-duration .knowledge-staff-note.is-sixty-fourth::after {
  box-shadow:
    0.18rem 0.88rem 0 0 rgba(255, 239, 198, 0.88),
    0.18rem 1.22rem 0 0 rgba(255, 239, 198, 0.88),
    0.18rem 1.56rem 0 0 rgba(255, 239, 198, 0.88);
}

.knowledge-beamed-note {
  position: absolute;
  left: var(--note-left, 50%);
  top: var(--note-top, 47%);
  z-index: 2;
  width: 0.84rem;
  height: 0.6rem;
  border-radius: 50%;
  background: rgba(255, 239, 198, 0.96);
  box-shadow: 0 0 0.85rem rgba(228, 199, 127, 0.22);
  transform: translate(-50%, -50%) rotate(-16deg);
  animation: knowledgeStaffNotePlace 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both;
}

.knowledge-beamed-note::after {
  position: absolute;
  right: -0.12rem;
  bottom: 0.28rem;
  width: 1px;
  height: 2.35rem;
  background: rgba(255, 239, 198, 0.88);
  content: "";
  transform: rotate(16deg);
  transform-origin: bottom;
}

.knowledge-beamed-bar {
  position: absolute;
  left: 46.7%;
  top: 27%;
  z-index: 3;
  width: 4.1rem;
  height: 0.24rem;
  border-radius: 999px;
  background: rgba(255, 239, 198, 0.88);
  box-shadow: 0 0 0.72rem rgba(228, 199, 127, 0.18);
  transform: rotate(2deg);
  transform-origin: left center;
  animation: knowledgeBeamGrow 520ms ease-out 160ms both;
}

.knowledge-beamed-bar.is-sixteenth-double {
  box-shadow:
    0 0 0.72rem rgba(228, 199, 127, 0.18),
    0 0.38rem 0 0 rgba(255, 239, 198, 0.88);
}

.knowledge-staff-accidental {
  position: absolute;
  left: var(--accidental-left, 46%);
  top: var(--accidental-top, 48%);
  z-index: 2;
  color: rgba(255, 239, 198, 0.94);
  font-size: 1.8rem;
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: knowledgeStaffSymbolDrop 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both;
}

.knowledge-staff-accidental.is-large {
  font-size: 2.5rem;
}

.knowledge-staff-accidental span {
  display: inline-block;
  line-height: 1;
}

.knowledge-staff-meter,
.knowledge-staff-bar,
.knowledge-staff-text,
.knowledge-staff-tempo {
  position: absolute;
  z-index: 2;
  color: rgba(255, 239, 198, 0.96);
  text-shadow: 0 0 1rem rgba(228, 199, 127, 0.2);
  animation: knowledgeStaffSymbolDrop 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both;
}

.knowledge-staff-meter {
  left: 38%;
  top: 47%;
  font-size: 1.55rem;
  font-weight: 820;
  transform: translate(-50%, -50%);
}

.knowledge-meter-signature {
  position: absolute;
  left: 42%;
  top: 47%;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.02rem;
  min-width: 2.5rem;
  transform: translate(-50%, -50%);
  color: rgba(255, 239, 198, 0.98);
  text-shadow: 0 0 1rem rgba(228, 199, 127, 0.2);
  animation: knowledgeStaffSymbolDrop 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both;
}

.knowledge-meter-signature b {
  position: static;
  display: block;
  transform: none;
  animation: none;
  line-height: 1;
  font-size: 1.72rem;
  font-weight: 860;
  text-shadow: 0 0 1rem rgba(228, 199, 127, 0.2);
}

.knowledge-meter-common {
  position: absolute;
  left: 42%;
  top: 47%;
  z-index: 2;
  display: grid;
  place-items: center;
  color: rgba(255, 239, 198, 0.98);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3rem;
  font-weight: 650;
  line-height: 1;
  text-shadow: 0 0 1rem rgba(228, 199, 127, 0.24);
  transform: translate(-50%, -50%);
  animation: knowledgeStaffSymbolDrop 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both;
}

.knowledge-meter-common b {
  position: static;
  display: block;
  color: inherit;
  font: inherit;
  transform: none;
  animation: none;
  text-shadow: inherit;
}

.knowledge-meter-common i {
  position: absolute;
  top: 50%;
  width: 0.12rem;
  height: 3.05rem;
  border-radius: 99px;
  background: rgba(255, 239, 198, 0.92);
  box-shadow: 0 0 0.5rem rgba(228, 199, 127, 0.22);
  transform: translateY(-50%) rotate(9deg);
}

.knowledge-meter-common.is-cut {
  font-size: 3.05rem;
}

.knowledge-rest-symbol {
  position: absolute;
  left: 46%;
  top: var(--rest-top, 47%);
  z-index: 2;
  color: rgba(215, 248, 250, 0.96);
  font-family: "Bravura", "Noto Music", "STIX Two Text", "Times New Roman", serif;
  font-size: 2.8rem;
  line-height: 1;
  text-shadow: 0 0 1rem rgba(140, 233, 242, 0.22);
  transform: translate(-50%, -50%);
  animation: knowledgeStaffSymbolDrop 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both;
}

.knowledge-rest-symbol b {
  position: static;
  display: block;
  transform: none;
  animation: none;
  font: inherit;
  color: inherit;
  text-shadow: inherit;
}

.knowledge-note-staff-demo.is-rest em {
  border-color: rgba(140, 233, 242, 0.22);
}

.knowledge-note-staff-demo.is-interval .knowledge-staff-note:last-of-type {
  background: rgba(140, 233, 242, 0.82);
  box-shadow: 0 0 0.85rem rgba(140, 233, 242, 0.25);
}

.knowledge-staff-key {
  position: absolute;
  inset: 0;
}

.knowledge-staff-key-item {
  position: absolute;
  left: var(--key-left, 31%);
  top: var(--key-top, 47%);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.02rem;
  transform: translate(-50%, -50%);
  color: rgba(255, 239, 198, 0.95);
  animation: knowledgeStaffSymbolDrop 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both;
}

.knowledge-staff-key-item b {
  line-height: 1;
  font-size: 1.95rem;
  font-weight: 820;
}

.knowledge-staff-key-item i {
  display: block;
  color: rgba(255, 239, 198, 0.68);
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 720;
  line-height: 1;
}

.knowledge-staff-key-item.is-flat b {
  font-size: 2rem;
}

.knowledge-staff-bar {
  left: 55%;
  top: 47%;
  font-size: 3rem;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.knowledge-repeat-sign {
  position: absolute;
  left: 52%;
  top: 42%;
  z-index: 2;
  max-width: 58%;
  color: rgba(255, 239, 198, 0.96);
  font-size: 1.65rem;
  font-weight: 820;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 0 1rem rgba(228, 199, 127, 0.22);
  transform: translate(-50%, -50%);
  animation: knowledgeStaffSymbolDrop 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both;
}

.knowledge-repeat-sign.is-ending {
  top: 32%;
  font-size: 1.15rem;
}

.knowledge-ending-bracket {
  position: absolute;
  left: 37%;
  right: 20%;
  top: 24%;
  z-index: 2;
  height: 1.05rem;
  border-top: 1px solid rgba(255, 239, 198, 0.82);
  border-left: 1px solid rgba(255, 239, 198, 0.82);
  animation: knowledgeBeamGrow 520ms ease-out 140ms both;
}

.knowledge-staff-text.above,
.knowledge-staff-tempo {
  left: 50%;
  top: 20%;
  font-size: 1rem;
  font-weight: 780;
  transform: translateX(-50%);
  white-space: nowrap;
}

.knowledge-staff-text.below {
  left: 50%;
  bottom: 12%;
  font-size: 1.2rem;
  font-weight: 820;
  transform: translateX(-50%);
}

.knowledge-note-staff-demo em {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 4.8rem;
  height: 4.8rem;
  border: 1px solid rgba(228, 199, 127, 0.18);
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: knowledgeStaffPulse 680ms ease-out 120ms both;
}

.knowledge-note-staff-demo.is-tuplet,
.knowledge-note-staff-demo.is-slur,
.knowledge-note-staff-demo.is-technique {
  display: block;
}

.knowledge-tuplet-group {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(20rem, 72%);
  height: 4.7rem;
  transform: translate(-50%, -50%);
  animation: knowledgeStaffSymbolDrop 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both;
}

.knowledge-tuplet-note,
.knowledge-slur-note {
  position: absolute;
  bottom: 0.82rem;
  left: calc((100% / (var(--tuplet-count, 4) - 1)) * var(--note-index));
  width: 0.76rem;
  height: 0.56rem;
  border-radius: 50%;
  background: rgba(255, 239, 198, 0.96);
  box-shadow: 0 0 0.85rem rgba(228, 199, 127, 0.22);
  transform: rotate(-16deg);
  animation: knowledgeTupletNoteIn 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--note-index) * 70ms);
}

.knowledge-tuplet-note::after,
.knowledge-slur-note::after {
  position: absolute;
  right: -0.12rem;
  bottom: 0.28rem;
  width: 1px;
  height: 2.2rem;
  background: rgba(255, 239, 198, 0.9);
  content: "";
  transform: rotate(16deg);
  transform-origin: bottom;
}

.knowledge-tuplet-beam {
  position: absolute;
  left: 0.62rem;
  right: -0.18rem;
  top: 1.16rem;
  height: 0.24rem;
  border-radius: 999px;
  background: rgba(255, 239, 198, 0.86);
  box-shadow: 0 0 0.9rem rgba(228, 199, 127, 0.18);
  transform-origin: left center;
  animation: knowledgeBeamGrow 520ms ease-out 180ms both;
}

.knowledge-tuplet-bracket {
  position: absolute;
  top: -0.22rem;
  right: 0.15rem;
  left: 0.15rem;
  height: 1.15rem;
  border-top: 1px solid rgba(255, 239, 198, 0.82);
}

.knowledge-tuplet-bracket::before,
.knowledge-tuplet-bracket::after {
  position: absolute;
  top: 0;
  width: 1px;
  height: 0.5rem;
  background: rgba(255, 239, 198, 0.82);
  content: "";
}

.knowledge-tuplet-bracket::before {
  left: 0;
}

.knowledge-tuplet-bracket::after {
  right: 0;
}

.knowledge-tuplet-bracket b {
  position: absolute;
  left: 50%;
  top: -0.76rem;
  padding: 0 0.42rem;
  color: rgba(255, 239, 198, 0.96);
  font-size: 1rem;
  background: rgba(6, 10, 13, 0.8);
  transform: translateX(-50%);
}

.knowledge-slur-note {
  left: calc((100% / 3) * var(--note-index));
}

.knowledge-slur-curve {
  position: absolute;
  left: 21%;
  top: 28%;
  width: 58%;
  height: 2.8rem;
  border-top: 2px solid rgba(255, 239, 198, 0.82);
  border-radius: 50% 50% 0 0;
  animation: knowledgeBeamGrow 520ms ease-out 160ms both;
}

@keyframes knowledgeTupletNoteIn {
  from {
    opacity: 0;
    transform: translateY(-0.7rem) rotate(-16deg) scale(0.78);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(-16deg) scale(1);
  }
}

@keyframes knowledgeBeamGrow {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes knowledgeNoteHeroPop {
  from {
    opacity: 0;
    transform: scale(0.86);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes knowledgeStaffSymbolDrop {
  from {
    opacity: 0;
    transform: translate(-50%, -92%) scale(0.82);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes knowledgeStaffNotePlace {
  from {
    opacity: 0;
    transform: translate(-50%, -92%) rotate(-16deg) scale(0.8);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-16deg) scale(1);
  }
}

@keyframes knowledgeStaffPulse {
  0% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.55);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.3);
  }
}

.knowledge-note-detail-list {
  display: grid;
  gap: 0.42rem;
}

.knowledge-note-detail-list span {
  display: block;
  padding: 0.58rem 0.66rem;
  border: 1px solid rgba(228, 199, 127, 0.12);
  border-radius: 0.48rem;
  background: rgba(228, 199, 127, 0.045);
  color: rgba(220, 230, 234, 0.66);
  font-size: 0.76rem;
  line-height: 1.45;
}

.knowledge-mini-demo-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
  align-items: end;
  min-height: 5rem;
  margin-top: 0.4rem;
}

.knowledge-mini-demo-bars i {
  display: block;
  border-radius: 999px 999px 0.24rem 0.24rem;
  background: linear-gradient(180deg, rgba(140, 233, 242, 0.42), rgba(228, 199, 127, 0.28));
}

.knowledge-mini-demo-bars i:nth-child(1) { height: 42%; }
.knowledge-mini-demo-bars i:nth-child(2) { height: 72%; }
.knowledge-mini-demo-bars i:nth-child(3) { height: 54%; }
.knowledge-mini-demo-bars i:nth-child(4) { height: 88%; }

.knowledge-staff-preview {
  top: clamp(10rem, 23vh, 14rem);
  height: clamp(15rem, 32vh, 20rem);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0.86rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(5, 9, 13, 0.48);
  backdrop-filter: blur(14px);
}

.knowledge-staff-preview i {
  position: absolute;
  right: 8%;
  left: 8%;
  height: 1px;
  background: rgba(232, 238, 240, 0.38);
}

.knowledge-staff-preview i:nth-child(1) { top: 34%; }
.knowledge-staff-preview i:nth-child(2) { top: 42%; }
.knowledge-staff-preview i:nth-child(3) { top: 50%; }
.knowledge-staff-preview i:nth-child(4) { top: 58%; }
.knowledge-staff-preview i:nth-child(5) { top: 66%; }

.knowledge-clef,
.knowledge-staff-preview b {
  position: absolute;
  z-index: 1;
  color: rgba(255, 232, 184, 0.88);
  font-weight: 780;
}

.knowledge-clef {
  top: 31%;
  left: 12%;
  font-size: 4.2rem;
}

.knowledge-staff-preview b {
  top: 41%;
  font-size: 2.7rem;
}

.knowledge-staff-preview em {
  position: absolute;
  right: 8%;
  bottom: 18%;
  left: 8%;
  height: 0.22rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(140, 233, 242, 0.18), rgba(228, 199, 127, 0.72), rgba(140, 233, 242, 0.18));
  box-shadow: 0 0 1.6rem rgba(228, 199, 127, 0.16);
}

.knowledge-course-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem;
}

.knowledge-course-pill {
  display: grid;
  gap: 0.12rem;
  min-height: 4rem;
  align-content: center;
  padding: 0.58rem 0.64rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.64rem;
  background: rgba(255, 255, 255, 0.045);
}

.knowledge-course-pill span {
  color: rgba(255, 222, 145, 0.9);
  font-size: 0.72rem;
  font-weight: 840;
}

.knowledge-course-pill strong {
  color: rgba(238, 244, 247, 0.88);
  font-size: 0.78rem;
  line-height: 1.25;
}

.knowledge-course-pill.is-active {
  border-color: rgba(228, 199, 127, 0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(228, 199, 127, 0.16), transparent 46%),
    rgba(255, 255, 255, 0.055);
}

.knowledge-card {
  display: grid;
  gap: 0.72rem;
  min-height: 0;
  overflow: auto;
  padding: clamp(0.9rem, 1.12vw, 1.08rem);
}

.knowledge-card h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.32rem, 1.8vw, 1.76rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.knowledge-card > p:not(.eyebrow),
.knowledge-card li,
.knowledge-card-warning p {
  margin: 0;
  color: rgba(222, 232, 238, 0.72);
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  line-height: 1.58;
}

.knowledge-card-block {
  display: grid;
  gap: 0.4rem;
}

.knowledge-card-block strong,
.knowledge-card-warning span {
  color: rgba(255, 231, 188, 0.92);
  font-size: 0.78rem;
  font-weight: 820;
}

.knowledge-card-block ul {
  display: grid;
  gap: 0.34rem;
  margin: 0;
  padding-left: 1rem;
}

.knowledge-card-warning {
  display: grid;
  gap: 0.24rem;
  padding: 0.7rem;
  border: 1px solid rgba(228, 199, 127, 0.14);
  border-radius: 0.6rem;
  background: rgba(228, 199, 127, 0.055);
}

.knowledge-3d-category-stack {
  display: grid;
  gap: clamp(0.58rem, 0.78vw, 0.72rem);
  min-height: 0;
  overflow: auto;
  padding-right: 0.18rem;
  scrollbar-width: thin;
}

.knowledge-3d-category-stack .knowledge-category-card {
  min-height: 10.2rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(140, 233, 242, 0.1), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.03)),
    rgba(0, 0, 0, 0.14);
}

.knowledge-3d-category-stack .knowledge-category-card.is-active {
  border-color: rgba(228, 199, 127, 0.32);
  background:
    radial-gradient(circle at 100% 0%, rgba(228, 199, 127, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.036)),
    rgba(0, 0, 0, 0.16);
}

.knowledge-3d-mini-panel {
  display: grid;
  gap: 0.24rem;
  padding: 0.76rem;
  border: 1px solid rgba(140, 233, 242, 0.17);
  border-radius: 0.68rem;
  background: rgba(140, 233, 242, 0.055);
}

.knowledge-3d-mini-panel strong {
  color: rgba(255, 231, 188, 0.96);
  font-size: 0.9rem;
}

.knowledge-3d-mini-panel span {
  color: rgba(222, 232, 238, 0.68);
  font-size: 0.76rem;
  line-height: 1.5;
}

.platform-symbol-page {
  display: grid;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(28rem, 1fr) minmax(20rem, 0.78fr);
  gap: clamp(0.75rem, 1vw, 1rem);
  min-height: 0;
}

.platform-symbol-page > * {
  min-height: 0;
}

.platform-symbol-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(0.75rem, 1vw, 1rem);
  margin-bottom: 0.15rem;
}

.platform-symbol-search {
  width: min(32rem, 100%);
}

.platform-symbol-search input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid rgba(140, 233, 242, 0.18);
  border-radius: calc(var(--radius) * 0.72);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  outline: none;
}

.platform-symbol-categories,
.platform-symbol-list,
.platform-symbol-detail {
  display: grid;
  gap: 0.6rem;
  min-height: 0;
  padding: clamp(0.85rem, 1.1vw, 1.1rem);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: calc(var(--radius) * 0.72);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(0, 0, 0, 0.16);
}

.platform-symbol-categories {
  overflow: auto;
}

.platform-symbol-categories button {
  display: grid;
  gap: 0.22rem;
  width: 100%;
  padding: 0.72rem 0.8rem;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--radius) * 0.65);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.platform-symbol-categories button.active {
  border-color: rgba(228, 199, 127, 0.26);
  background: rgba(228, 199, 127, 0.08);
}

.platform-symbol-categories strong {
  color: var(--gold);
  font-size: 0.95rem;
}

.platform-symbol-categories span,
.platform-symbol-list-head span,
.platform-symbol-detail span,
.platform-symbol-detail p {
  color: var(--muted);
  line-height: 1.55;
}

.platform-symbol-list {
  overflow: hidden;
}

.platform-symbol-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.platform-symbol-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  overflow: auto;
}

.platform-symbol-card {
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--radius) * 0.65);
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
}

.platform-symbol-card.active {
  border-color: rgba(140, 233, 242, 0.28);
  background: rgba(140, 233, 242, 0.07);
}

.platform-symbol-glyph,
.platform-symbol-detail-glyph {
  display: grid;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.22);
  border-radius: calc(var(--radius) * 0.65);
  background: rgba(0, 0, 0, 0.18);
  color: var(--gold);
}

.platform-symbol-glyph {
  min-height: 3.8rem;
  font-size: 1.6rem;
}

.platform-symbol-card strong {
  color: var(--text);
}

.platform-symbol-card small {
  color: var(--muted);
}

.platform-symbol-detail {
  overflow: auto;
  align-content: start;
}

.platform-symbol-demo {
  display: grid;
  gap: 0.7rem;
  padding: 0.85rem;
  border: 1px solid rgba(140, 233, 242, 0.16);
  border-radius: calc(var(--radius) * 0.72);
  background:
    radial-gradient(circle at top left, rgba(140, 233, 242, 0.1), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.platform-symbol-demo-head,
.platform-symbol-demo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.platform-symbol-demo-head strong {
  color: var(--gold);
  font-size: 0.98rem;
}

.platform-symbol-demo-head p,
.platform-symbol-demo-foot {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.platform-symbol-demo-stage {
  position: relative;
  overflow: hidden;
  min-height: clamp(7rem, 10vw, 8.5rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--radius) * 0.62);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.12)),
    rgba(0, 0, 0, 0.18);
}

.platform-symbol-demo.is-playing .platform-symbol-demo-stage {
  box-shadow: 0 0 24px rgba(140, 233, 242, 0.08);
}

.platform-symbol-demo-stage::before {
  content: "";
  position: absolute;
  inset: 12% 8%;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  opacity: 0.8;
}

.platform-symbol-demo-stage::after {
  content: "";
  position: absolute;
  inset: auto 8% 16% 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228, 199, 127, 0.5), transparent);
}

.demo-note-length .demo-note-head,
.demo-note-length .demo-stem,
.demo-note-length .demo-beam,
.demo-dynamics .demo-wave,
.demo-dynamics .demo-bars i,
.demo-articulation .demo-accent,
.demo-articulation .demo-note,
.demo-articulation .demo-release,
.demo-bowing .demo-string,
.demo-bowing .demo-bow,
.demo-bowing .demo-bow-tip,
.demo-ornament .demo-swirl,
.demo-ornament .demo-core,
.demo-other .demo-marker,
.demo-other .demo-arc,
.demo-other .demo-flag {
  position: absolute;
}

.demo-note-length .demo-note-a {
  left: 20%;
  top: 34%;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--gold);
  animation: symbolPulse 1.5s ease-in-out infinite;
}

.demo-note-length .demo-note-b {
  left: 42%;
  top: 28%;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: rgba(140, 233, 242, 0.92);
  animation: symbolPulse 1.5s ease-in-out infinite 0.18s;
}

.demo-note-length .demo-note-c {
  left: 64%;
  top: 22%;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  animation: symbolPulse 1.5s ease-in-out infinite 0.36s;
}

.demo-note-length .demo-stem {
  left: 73%;
  top: 18%;
  width: 2px;
  height: 46%;
  background: linear-gradient(180deg, rgba(228, 199, 127, 0.92), rgba(228, 199, 127, 0.12));
}

.demo-note-length .demo-beam {
  left: 42%;
  top: 24%;
  width: 34%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(228, 199, 127, 0.92), rgba(140, 233, 242, 0.78));
  animation: symbolSweep 1.6s ease-in-out infinite;
}

.demo-dynamics .demo-wave {
  top: 52%;
  width: 12%;
  height: 12%;
  border: 2px solid rgba(140, 233, 242, 0.8);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: symbolWave 1.8s ease-in-out infinite;
}

.demo-dynamics .demo-wave:nth-child(1) { left: 18%; animation-delay: 0s; }
.demo-dynamics .demo-wave:nth-child(2) { left: 36%; animation-delay: 0.16s; }
.demo-dynamics .demo-wave:nth-child(3) { left: 54%; animation-delay: 0.32s; }

.demo-dynamics .demo-bars {
  left: 68%;
  top: 24%;
  display: flex;
  align-items: end;
  gap: 0.35rem;
  height: 56%;
}

.demo-dynamics .demo-bars i {
  width: 0.8rem;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(228, 199, 127, 0.95), rgba(140, 233, 242, 0.42));
  animation: symbolBars 1.6s ease-in-out infinite;
}

.demo-dynamics .demo-bars i:nth-child(1) { height: 28%; animation-delay: 0s; }
.demo-dynamics .demo-bars i:nth-child(2) { height: 42%; animation-delay: 0.14s; }
.demo-dynamics .demo-bars i:nth-child(3) { height: 64%; animation-delay: 0.28s; }
.demo-dynamics .demo-bars i:nth-child(4) { height: 82%; animation-delay: 0.42s; }

.demo-articulation .demo-accent {
  left: 20%;
  top: 34%;
  width: 16%;
  height: 16%;
  border-radius: 50%;
  background: rgba(228, 199, 127, 0.92);
  box-shadow: 0 0 18px rgba(228, 199, 127, 0.34);
}

.demo-articulation .demo-note {
  left: 46%;
  top: 30%;
  width: 14%;
  height: 14%;
  border-radius: 50%;
  background: rgba(140, 233, 242, 0.88);
  animation: symbolPulse 1.35s ease-in-out infinite;
}

.demo-articulation .demo-release {
  left: 68%;
  top: 38%;
  width: 15%;
  height: 15%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  transform: scale(1);
  animation: symbolRelease 1.35s ease-in-out infinite;
}

.demo-bowing .demo-string {
  left: 10%;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(228, 199, 127, 0.68), rgba(255, 255, 255, 0.18));
}

.demo-bowing .demo-string-a { top: 24%; }
.demo-bowing .demo-string-d { top: 41%; }
.demo-bowing .demo-string-g { top: 58%; }

.demo-bowing .demo-bow {
  left: 18%;
  top: 18%;
  width: 60%;
  height: 0.45rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(140, 233, 242, 0.18), rgba(228, 199, 127, 0.9), rgba(140, 233, 242, 0.18));
  transform-origin: center;
  transform: rotate(-10deg);
  animation: symbolBow 1.8s ease-in-out infinite;
}

.demo-bowing .demo-bow-tip {
  left: 69%;
  top: 15%;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: rgba(228, 199, 127, 0.95);
  box-shadow: 0 0 16px rgba(228, 199, 127, 0.32);
  animation: symbolBow 1.8s ease-in-out infinite;
}

.demo-ornament .demo-swirl {
  left: 22%;
  top: 24%;
  width: 28%;
  height: 28%;
  border: 2px solid rgba(140, 233, 242, 0.78);
  border-right-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  animation: symbolSpin 1.45s linear infinite;
}

.demo-ornament .swirl-2 {
  left: 42%;
  top: 30%;
  width: 22%;
  height: 22%;
  animation-duration: 1.1s;
  opacity: 0.7;
}

.demo-ornament .swirl-3 {
  left: 58%;
  top: 20%;
  width: 18%;
  height: 18%;
  animation-duration: 0.86s;
  opacity: 0.45;
}

.demo-ornament .demo-core {
  left: 73%;
  top: 43%;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: rgba(228, 199, 127, 0.96);
  animation: symbolPulse 1.1s ease-in-out infinite;
}

.demo-other .demo-marker {
  left: 18%;
  top: 42%;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: rgba(228, 199, 127, 0.92);
  animation: symbolPulse 1.35s ease-in-out infinite;
}

.demo-other .demo-arc {
  left: 28%;
  top: 24%;
  width: 44%;
  height: 44%;
  border: 2px dashed rgba(140, 233, 242, 0.72);
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  animation: symbolSpin 2s linear infinite;
}

.demo-other .demo-flag {
  left: 68%;
  top: 22%;
  width: 0.7rem;
  height: 3rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(228, 199, 127, 0.95), rgba(140, 233, 242, 0.55));
}

@keyframes symbolPulse {
  0%, 100% { transform: scale(0.96); opacity: 0.66; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes symbolSweep {
  0%, 100% { transform: translateX(0) scaleX(0.9); opacity: 0.78; }
  50% { transform: translateX(0.8rem) scaleX(1.08); opacity: 1; }
}

@keyframes symbolWave {
  0%, 100% { transform: scale(0.88); opacity: 0.48; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes symbolBars {
  0%, 100% { transform: scaleY(0.88); filter: brightness(0.88); }
  50% { transform: scaleY(1.08); filter: brightness(1.12); }
}

@keyframes symbolRelease {
  0%, 100% { transform: scale(0.92); opacity: 0.58; }
  50% { transform: scale(1.12); opacity: 1; }
}

@keyframes symbolBow {
  0%, 100% { transform: rotate(-12deg) translateY(0); }
  50% { transform: rotate(11deg) translateY(0.2rem); }
}

@keyframes symbolSpin {
  to { transform: rotate(360deg); }
}

.platform-symbol-detail-glyph {
  min-height: 8rem;
  font-size: 3.2rem;
}

.platform-symbol-detail article {
  display: grid;
  gap: 0.25rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: calc(var(--radius) * 0.55);
  background: rgba(255, 255, 255, 0.035);
}

.platform-symbol-detail article strong {
  color: var(--gold);
}

.platform-symbol-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pre-tune-panel {
  overflow: hidden;
}

.pre-tune-visual {
  position: relative;
  display: grid;
  min-height: clamp(16rem, 22vw, 20rem);
  place-items: center;
  margin-bottom: clamp(0.875rem, 1.2vw, 1.125rem);
  overflow: hidden;
  border: 1px solid rgba(140, 233, 242, 0.16);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 46%, rgba(228, 199, 127, 0.18), transparent 20%),
    radial-gradient(circle at 52% 48%, rgba(140, 233, 242, 0.13), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.2);
}

.pre-tune-meter {
  position: absolute;
  width: min(72%, 30rem);
  height: 0.5rem;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(140, 233, 242, 0.28), rgba(228, 199, 127, 0.92), rgba(140, 233, 242, 0.28));
  box-shadow: 0 0 30px rgba(228, 199, 127, 0.12);
}

.pre-tune-needle {
  position: absolute;
  width: 2px;
  height: clamp(5.5rem, 8vw, 7rem);
  border-radius: 99px;
  background: var(--gold);
  box-shadow: 0 0 22px rgba(228, 199, 127, 0.42);
  transform-origin: bottom center;
  animation: tuneNeedle 2.4s ease-in-out infinite;
}

.pre-tune-visual b {
  display: grid;
  width: clamp(5.25rem, 8vw, 7rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.34);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.055);
  color: var(--gold);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 680;
}

.pre-tune-visual i {
  position: absolute;
  display: grid;
  width: clamp(2.5rem, 3.5vw, 3rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.052);
  color: var(--muted);
  font-style: normal;
}

.pre-tune-visual i:nth-of-type(1) {
  left: 16%;
  bottom: 18%;
}

.pre-tune-visual i:nth-of-type(2) {
  left: 32%;
  top: 18%;
}

.pre-tune-visual i:nth-of-type(3) {
  right: 32%;
  top: 18%;
  color: var(--gold);
  border-color: rgba(228, 199, 127, 0.32);
}

.pre-tune-visual i:nth-of-type(4) {
  right: 16%;
  bottom: 18%;
}

.metronome-pro-panel {
  max-width: min(78rem, 100%);
  margin-inline: auto;
}

.metronome-workbench {
  display: grid;
  grid-template-columns: minmax(22rem, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(0.8rem, 1.2vw, 1.15rem);
  align-items: stretch;
}

.metronome-performance,
.metronome-settings {
  min-width: 0;
}

.metronome-performance {
  display: grid;
  align-content: start;
}

.metronome-settings {
  display: flex;
  flex-direction: column;
  gap: clamp(0.65rem, 0.9vw, 0.85rem);
}

.metronome-stage {
  display: grid;
  justify-items: center;
  gap: clamp(0.6rem, 0.9vw, 0.8rem);
  min-height: clamp(13.5rem, 19vw, 18rem);
  padding: clamp(0.85rem, 1.25vw, 1.2rem);
  border: 1px solid rgba(140, 233, 242, 0.16);
  border-radius: clamp(1.75rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 50% 45%, rgba(140, 233, 242, 0.14), transparent 28%),
    radial-gradient(circle at 50% 58%, rgba(228, 199, 127, 0.11), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.24)),
    rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1.5rem 4rem rgba(0, 0, 0, 0.32);
}

.metronome-ring {
  display: grid;
  width: clamp(10rem, 16vw, 13.5rem);
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(228, 199, 127, 0.26);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(140, 233, 242, 0.18), transparent 38%),
    radial-gradient(circle, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018) 60%, rgba(0, 0, 0, 0.28));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 3rem rgba(140, 233, 242, 0.12);
}

.metronome-stage.is-playing .metronome-ring {
  animation: softPulse 420ms ease-in-out infinite alternate;
}

.metronome-ring strong {
  color: var(--text);
  font-size: clamp(3.25rem, 6.2vw, 5.2rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
}

.metronome-ring span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.18em;
}

.metronome-ring em {
  margin-top: 0.55rem;
  padding: 0.38rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  font-style: normal;
}

.beat-dots {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}

.beat-dot {
  width: 0.54rem;
  height: 0.54rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.beat-dot.is-active {
  width: 1.65rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(140, 233, 242, 0.96), rgba(228, 199, 127, 0.94));
  box-shadow: 0 0 24px rgba(140, 233, 242, 0.3);
}

.metronome-main-controls {
  display: grid;
  grid-template-columns: clamp(3rem, 5vw, 4rem) minmax(12rem, 1fr) clamp(3rem, 5vw, 4rem);
  gap: clamp(0.5rem, 0.85vw, 0.75rem);
  align-items: center;
  margin-top: clamp(0.65rem, 0.95vw, 0.85rem);
}

.metronome-step-btn {
  display: grid;
  min-height: clamp(2.75rem, 3.8vw, 3.3rem);
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.18);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(140, 233, 242, 0.09), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  font-weight: 850;
  cursor: pointer;
}

.metronome-start-btn {
  min-height: clamp(2.75rem, 3.8vw, 3.3rem);
  border-radius: 1rem;
  border-color: rgba(228, 199, 127, 0.24);
  background:
    linear-gradient(135deg, rgba(140, 233, 242, 0.16), rgba(228, 199, 127, 0.1)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: 850;
  letter-spacing: 0.08em;
}

.metronome-tap-row,
.metronome-preset-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.8vw, 0.75rem);
  margin-top: clamp(0.45rem, 0.7vw, 0.6rem);
}

.metronome-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.45rem, 0.7vw, 0.6rem);
  margin: 0;
}

.metronome-field,
.metronome-controls label,
.support-form label {
  display: grid;
  gap: 0.45rem;
}

.metronome-slider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.45rem, 0.7vw, 0.6rem);
}

.metronome-range-card {
  display: grid;
  gap: 0.42rem;
  padding: clamp(0.6rem, 0.8vw, 0.75rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.18);
}

.metronome-range-card span {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.metronome-range-card b {
  color: var(--text);
}

.metronome-controls input[type="range"],
.metronome-range-card input[type="range"] {
  width: 100%;
  accent-color: var(--cyan);
}

.metronome-preset-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metronome-preset-row .glass-button {
  display: grid;
  min-height: 3rem;
  gap: 0.12rem;
}

.metronome-preset-row .glass-button span {
  color: var(--muted);
  font-size: 0.78rem;
}

html[data-active-module] .content-grid[data-module="metronome"] {
  grid-template-rows: minmax(0, 1fr);
}

.content-grid[data-module="metronome"] > .professional-metronome {
  grid-column: 1 / -1;
  min-height: 0;
}

.professional-metronome {
  --metro-gold: #dac078;
  --metro-gold-hot: #ffe6a3;
  --metro-purple: #8d78bb;
  --metro-violet-soft: rgba(141, 120, 187, 0.22);
  --metro-ink: rgba(5, 6, 9, 0.92);
  --metro-glass: rgba(255, 255, 255, 0.07);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.56rem;
  height: 100%;
  overflow: auto;
  padding: 0.78rem;
  border: 1px solid rgba(218, 192, 120, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(218, 192, 120, 0.13), transparent 33%),
    radial-gradient(circle at 12% 18%, rgba(141, 120, 187, 0.18), transparent 31%),
    linear-gradient(140deg, rgba(7, 8, 11, 0.98), rgba(16, 13, 22, 0.95) 48%, rgba(7, 8, 10, 0.98)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 30px);
  box-shadow: 0 1.2rem 3.5rem rgba(0, 0, 0, 0.35);
}

.metronome-command-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.68rem;
  align-items: center;
  min-height: 4.1rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.metronome-command-copy {
  display: grid;
  gap: 0.06rem;
  min-width: 0;
}

.metronome-command-copy h3 {
  margin: 0;
  color: rgba(255, 245, 218, 0.96);
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  line-height: 1.03;
}

.metronome-bpm-console {
  display: grid;
  grid-template-columns: 2.1rem minmax(5.5rem, 1fr) 2.1rem;
  gap: 0.28rem;
  align-items: center;
  padding: 0.36rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(18px);
}

.metronome-bpm-console button,
.metronome-top-actions button,
.metronome-control-card button,
.metronome-mode-list button {
  appearance: none;
  border-radius: 8px;
  cursor: pointer;
}

.metronome-bpm-console button {
  min-height: 2.3rem;
  border: 1px solid rgba(218, 192, 120, 0.2);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 237, 190, 0.94);
  font-size: 1.12rem;
  font-weight: 820;
}

.metronome-bpm-console div {
  display: grid;
  justify-items: center;
  min-width: 0;
  gap: 0.06rem;
}

.metronome-bpm-console strong {
  color: var(--metro-gold-hot);
  font-size: clamp(1.95rem, 3.4vw, 2.8rem);
  line-height: 0.92;
}

.metronome-bpm-console span {
  color: rgba(231, 235, 238, 0.62);
  font-size: 0.64rem;
  font-weight: 780;
  letter-spacing: 0.1em;
}

.metronome-top-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(4.8rem, 1fr));
  gap: 0.45rem;
}

.metronome-top-actions button {
  min-height: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(235, 240, 240, 0.82);
  font-weight: 840;
  letter-spacing: 0.08em;
}

.metronome-start-action {
  border-color: rgba(218, 192, 120, 0.38) !important;
  background:
    linear-gradient(135deg, rgba(255, 226, 157, 0.96), rgba(190, 153, 82, 0.94)) !important;
  color: rgba(20, 13, 7, 0.96) !important;
  box-shadow: 0 0.9rem 2.2rem rgba(218, 192, 120, 0.2);
}

.metronome-stage-shell,
.metronome-control-card {
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.028)),
    rgba(7, 9, 12, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.metronome-stage-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: clamp(24rem, 58vh, 40rem);
  overflow: hidden;
  padding: clamp(0.85rem, 1.45vw, 1.2rem);
  background:
    radial-gradient(circle at 50% 50%, rgba(218, 192, 120, 0.16), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(141, 120, 187, 0.13), transparent 52%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.022)),
    rgba(5, 6, 9, 0.62);
}

.metronome-stage-halo {
  position: absolute;
  left: 50%;
  top: 51%;
  width: min(84%, 58rem);
  aspect-ratio: 1;
  border: 1px solid rgba(218, 192, 120, 0.11);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.045), transparent 58%),
    conic-gradient(from 90deg, transparent, rgba(218, 192, 120, 0.12), rgba(141, 120, 187, 0.14), transparent);
  transform: translate(-50%, -50%);
  opacity: 0.92;
  pointer-events: none;
}

.professional-metronome.is-playing .metronome-stage-halo {
  animation: metronomeStageBreathe var(--beat-duration) ease-in-out infinite;
}

.metronome-stage-status {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  color: rgba(225, 231, 235, 0.72);
  text-align: center;
}

.metronome-stage-status span,
.metronome-stage-status em {
  padding: 0.34rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.78rem;
  font-style: normal;
}

.metronome-stage-status strong {
  color: rgba(255, 242, 204, 0.96);
  font-size: 1rem;
}

.metronome-beat-lane {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--beat-count), minmax(0, 1fr));
  gap: clamp(1rem, 2.3vw, 1.8rem);
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: min(100%, 78rem);
  margin: auto;
}

.metronome-big-beat {
  position: relative;
  display: grid;
  width: clamp(8.1rem, 13.5vw, 11.2rem);
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.12), transparent 35%),
    radial-gradient(circle, rgba(141, 120, 187, 0.2), rgba(255, 255, 255, 0.035) 62%, rgba(0, 0, 0, 0.32));
  color: rgba(235, 240, 240, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 1rem 2.4rem rgba(0, 0, 0, 0.28);
  transform: scale(1);
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease, background 300ms ease, opacity 300ms ease;
}

.metronome-visual-stage.beats-6 .metronome-big-beat {
  width: clamp(4.8rem, 7.7vw, 7.5rem);
}

.metronome-big-beat strong {
  position: relative;
  z-index: 2;
  color: rgba(244, 238, 223, 0.9);
  font-size: clamp(3.2rem, 6vw, 5.9rem);
  line-height: 0.85;
}

.metronome-big-beat small {
  position: relative;
  z-index: 2;
  margin-top: 0.4rem;
  color: rgba(225, 231, 235, 0.58);
  font-size: 0.76rem;
}

.metronome-big-beat.is-passed:not(.is-current) {
  opacity: 0.72;
}

.metronome-big-beat.is-current {
  border-color: rgba(255, 232, 166, 0.6);
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.24), transparent 34%),
    radial-gradient(circle, rgba(218, 192, 120, 0.42), rgba(141, 120, 187, 0.13) 62%, rgba(0, 0, 0, 0.2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 2.7rem rgba(218, 192, 120, 0.38),
    0 1.2rem 2.8rem rgba(0, 0, 0, 0.34);
  transform: scale(1.18);
}

.metronome-big-beat.is-current strong {
  color: rgba(255, 248, 218, 0.98);
}

.metronome-big-beat.is-accent {
  border-color: rgba(218, 192, 120, 0.34);
}

.metronome-big-beat.is-current.is-accent {
  border-color: rgba(255, 231, 157, 0.78);
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.32), transparent 31%),
    radial-gradient(circle, rgba(255, 226, 155, 0.55), rgba(218, 192, 120, 0.22) 48%, rgba(141, 120, 187, 0.16));
  box-shadow:
    0 0 3.5rem rgba(255, 226, 155, 0.5),
    0 0 6rem rgba(218, 192, 120, 0.2),
    0 1.4rem 3rem rgba(0, 0, 0, 0.38);
  transform: scale(1.24);
}

.beat-ripple {
  position: absolute;
  inset: -0.8rem;
  border: 2px solid rgba(255, 241, 205, 0.0);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.metronome-big-beat.is-current .beat-ripple.one {
  border-color: rgba(255, 255, 255, 0.46);
  animation: metronomeBeatRipple var(--beat-duration) ease-out 1;
}

.metronome-big-beat.is-current .beat-ripple.two {
  inset: -1.35rem;
  border-color: rgba(218, 192, 120, 0.42);
  animation: metronomeBeatRipple var(--beat-duration) ease-out 1 80ms;
}

.metronome-big-beat.is-current.is-accent .beat-ripple.one {
  border-width: 3px;
  border-color: rgba(255, 243, 207, 0.72);
}

.metronome-big-beat.is-current.is-accent .beat-ripple.two {
  inset: -1.65rem;
  border-width: 3px;
  border-color: rgba(255, 226, 155, 0.58);
}

.metronome-subdivision-lane {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--subdivision-count), minmax(0, 1fr));
  gap: 0.32rem;
  width: min(100%, 54rem);
  min-height: 1.3rem;
  margin: 0.25rem auto 0;
}

.metronome-subdivision-lane i {
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.metronome-subdivision-lane i.is-main {
  background: rgba(218, 192, 120, 0.3);
}

.metronome-subdivision-lane i.is-active {
  background: rgba(255, 237, 184, 0.96);
  box-shadow: 0 0 1rem rgba(218, 192, 120, 0.38);
  transform: scaleY(1.8);
}

.metronome-subdivision-lane.is-empty {
  display: flex;
  justify-content: center;
  color: rgba(225, 231, 235, 0.5);
  font-size: 0.78rem;
}

.metronome-control-deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  min-height: 0;
}

.metronome-control-strip {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.82fr) repeat(3, minmax(0, 1fr)) minmax(10rem, 0.9fr) minmax(12rem, 0.95fr);
  gap: 0.44rem;
  align-items: stretch;
}

.metronome-control-card {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  min-width: 0;
  min-height: 0;
  padding: 0.54rem 0.62rem;
  border-radius: 10px;
}

.metronome-control-card > span {
  color: rgba(225, 231, 235, 0.62);
  font-size: 0.75rem;
}

.metronome-control-card.is-wide button {
  min-height: 2.85rem;
  border: 1px solid rgba(218, 192, 120, 0.26);
  background: rgba(218, 192, 120, 0.1);
  color: rgba(255, 238, 190, 0.96);
  font-size: 0.98rem;
  font-weight: 880;
  letter-spacing: 0.12em;
}

.metronome-segment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.24rem;
}

.metronome-segment-grid.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metronome-segment-grid button {
  min-height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(225, 231, 235, 0.72);
  font-size: 0.76rem;
}

.metronome-segment-grid button.is-active {
  border-color: rgba(218, 192, 120, 0.38);
  background: rgba(218, 192, 120, 0.14);
  color: rgba(255, 237, 188, 0.96);
}

.metronome-sound-mini-panel,
.metronome-practice-mini-panel {
  display: grid;
  gap: 0.24rem;
}

.metronome-sound-mini-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metronome-sound-mini-panel button,
.metronome-practice-mini-panel button {
  min-height: 2.25rem;
  padding: 0.32rem 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(225, 231, 235, 0.72);
  text-align: left;
}

.metronome-sound-mini-panel button.is-active,
.metronome-practice-mini-panel button.is-active {
  border-color: rgba(218, 192, 120, 0.38);
  background: rgba(218, 192, 120, 0.14);
}

.metronome-sound-mini-panel button {
  display: grid;
  gap: 0.08rem;
}

.metronome-sound-mini-panel strong {
  color: rgba(255, 241, 205, 0.94);
  font-size: 0.72rem;
}

.metronome-sound-mini-panel small {
  color: rgba(225, 231, 235, 0.55);
  font-size: 0.62rem;
}

.metronome-practice-mini-panel button {
  display: grid;
  gap: 0.08rem;
}

.metronome-practice-mini-panel strong {
  color: rgba(255, 241, 205, 0.94);
  font-size: 0.7rem;
}

.metronome-practice-mini-panel small {
  color: rgba(225, 231, 235, 0.55);
  font-size: 0.6rem;
}

.metronome-tap-button {
  align-self: start;
  min-height: 2.85rem;
  padding: 0.5rem 0.72rem;
  border: 1px solid rgba(218, 192, 120, 0.3);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(218, 192, 120, 0.16), rgba(141, 120, 187, 0.08));
  color: rgba(255, 241, 205, 0.98);
  font-size: 0.88rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.metronome-volume-card input {
  width: 100%;
  accent-color: var(--metro-gold);
}

@keyframes metronomeBeatRipple {
  0% { opacity: 0.92; transform: scale(0.82); }
  72% { opacity: 0.18; }
  100% { opacity: 0; transform: scale(1.36); }
}

@keyframes metronomeStageBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.985); opacity: 0.72; }
  44% { transform: translate(-50%, -50%) scale(1.025); opacity: 1; }
}

@media (max-width: 1180px) {
  .professional-metronome {
    height: auto;
    overflow: visible;
  }

  .metronome-command-bar,
  .metronome-control-strip {
    grid-template-columns: 1fr;
  }

  .metronome-bpm-console,
  .metronome-top-actions {
    width: 100%;
  }

  .metronome-control-strip {
    grid-template-columns: 1fr 1fr;
  }

  .metronome-tap-button,
  .metronome-control-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .professional-metronome {
    gap: 0.62rem;
    padding: 0.75rem;
  }

  .metronome-big-beat,
  .metronome-big-beat {
    width: clamp(5.8rem, 27vw, 7.8rem);
  }

  .metronome-stage-status {
    flex-wrap: wrap;
  }

  .metronome-control-strip {
    grid-template-columns: 1fr;
  }
}

/* Premium violin metronome redesign: ViolinMetronomePage / BeatPerformanceStage */
.content-grid[data-module="metronome"] {
  padding: clamp(0.6rem, 1.1vw, 1rem);
}

.content-grid[data-module="metronome"] > .violin-metronome-page {
  min-height: calc(100dvh - 9.6rem);
}

.violin-metronome-page {
  --metro-gold: #d7b86c;
  --metro-gold-hot: #fff0b8;
  --metro-cold: #e9eef4;
  --metro-blue: #7fa8c9;
  --metro-violet: #7e6aa8;
  --metro-bg-a: #050911;
  --metro-bg-b: #111022;
  --metro-bg-c: #06140f;
  grid-template-rows: minmax(4.2rem, auto) minmax(20rem, 1fr) auto auto;
  gap: clamp(0.75rem, 1vw, 0.95rem);
  overflow: hidden;
  padding: clamp(0.78rem, 1.15vw, 1rem);
  border-color: rgba(215, 184, 108, 0.2);
  background:
    radial-gradient(circle at 50% 38%, rgba(215, 184, 108, 0.16), transparent 27rem),
    radial-gradient(circle at 80% 8%, rgba(126, 106, 168, 0.22), transparent 23rem),
    radial-gradient(circle at 14% 88%, rgba(77, 118, 107, 0.18), transparent 24rem),
    linear-gradient(135deg, var(--metro-bg-a), var(--metro-bg-b) 48%, var(--metro-bg-c));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 1.4rem 4.4rem rgba(0, 0, 0, 0.42);
}

.metronome-header {
  grid-template-columns: minmax(15rem, 1fr) auto;
  min-height: 3.6rem;
  padding: 0.5rem clamp(0.72rem, 1vw, 0.95rem);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018) 48%, transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent);
  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.075);
}

.metronome-command-copy .eyebrow {
  color: rgba(215, 184, 108, 0.78);
  letter-spacing: 0.16em;
}

.metronome-command-copy h3 {
  color: rgba(248, 244, 230, 0.98);
  font-size: clamp(1.24rem, 1.55vw, 1.62rem);
  letter-spacing: 0;
}

.metronome-subtitle-line {
  margin: 0.34rem 0 0;
  color: rgba(233, 238, 244, 0.62);
  font-size: clamp(0.86rem, 1vw, 1rem);
  font-weight: 660;
  letter-spacing: 0;
}

.metronome-header-meta {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  align-self: center;
  padding: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background: rgba(4, 7, 13, 0.34);
}

.metronome-header-meta span,
.metronome-header-meta b,
.metronome-header-meta em {
  display: inline-grid;
  min-height: 1.7rem;
  place-items: center;
  padding: 0 0.66rem;
  border-radius: 999px;
  color: rgba(233, 238, 244, 0.65);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.metronome-header-meta span {
  color: rgba(255, 241, 204, 0.9);
  background: rgba(215, 184, 108, 0.12);
}

.metronome-header-meta b {
  color: rgba(233, 238, 244, 0.8);
  background: rgba(255, 255, 255, 0.05);
}

.metronome-stage-controls {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(12.6rem, 13.5rem) minmax(5.2rem, 5.3rem) minmax(11.6rem, 12.2rem);
  gap: 0.38rem;
  align-items: stretch;
  justify-content: center;
  width: min(100%, 33.6rem);
  margin: 0 auto;
  padding: 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(4, 7, 13, 0.34);
  box-shadow:
    0 1.25rem 3.2rem rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px);
}

.metronome-stage-controls-glow {
  position: absolute;
  inset: -1px 14% auto;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 241, 204, 0.52), transparent);
  pointer-events: none;
}

.metronome-bpm-console {
  grid-template-columns: 2.35rem minmax(6.8rem, 1fr) 2.35rem;
  min-width: 12.6rem;
  padding: 0.18rem;
  border-radius: 14px;
  border-color: rgba(215, 184, 108, 0.13);
  background:
    radial-gradient(circle at 50% 25%, rgba(215, 184, 108, 0.15), transparent 68%),
    rgba(255, 255, 255, 0.035);
}

.metronome-bpm-console button {
  min-height: 2.55rem;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.metronome-bpm-console button:hover,
.metronome-tap-button:hover,
.metronome-top-actions button:hover,
.metronome-control-card button:hover {
  transform: translateY(-1px);
  border-color: rgba(215, 184, 108, 0.42);
}

.metronome-bpm-console strong {
  font-size: clamp(2.15rem, 3.4vw, 3rem);
  color: var(--metro-gold-hot);
  text-shadow: 0 0 2rem rgba(215, 184, 108, 0.22);
}

.metronome-bpm-console span {
  color: rgba(233, 238, 244, 0.66);
  letter-spacing: 0.16em;
}

.metronome-tap-top {
  display: grid;
  align-self: stretch;
  place-items: center;
  gap: 0.02rem;
  min-height: 3.55rem;
  margin: 0;
  border-radius: 14px;
}

.metronome-tap-top b,
.metronome-tap-top span {
  display: block;
}

.metronome-tap-top b {
  font-size: 1rem;
  letter-spacing: 0.14em;
}

.metronome-tap-top span {
  color: rgba(233, 238, 244, 0.62);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

.metronome-top-actions {
  grid-template-columns: minmax(7.2rem, 1fr) minmax(5.2rem, 0.72fr);
}

.metronome-top-actions button {
  min-height: 3.55rem;
  border-radius: 14px;
}

.metronome-start-action {
  border-color: rgba(255, 231, 160, 0.56) !important;
  background:
    linear-gradient(135deg, rgba(255, 237, 185, 0.98), rgba(190, 151, 78, 0.96)) !important;
  box-shadow:
    0 0.7rem 2rem rgba(215, 184, 108, 0.22),
    inset 0 1px rgba(255, 255, 255, 0.4);
}

.metronome-stop-action {
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(233, 238, 244, 0.78) !important;
}

.beat-performance-stage {
  isolation: isolate;
  min-height: clamp(19.5rem, 50vh, 34rem);
  padding: clamp(0.85rem, 1.25vw, 1.1rem) clamp(1.1rem, 1.7vw, 1.55rem) clamp(1.1rem, 1.7vw, 1.55rem);
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.105);
  background:
    radial-gradient(circle at 50% 58%, rgba(215, 184, 108, 0.16), transparent 36%),
    radial-gradient(circle at 50% 58%, rgba(127, 168, 201, 0.16), transparent 58%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.018)),
    rgba(2, 5, 10, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2rem 5rem rgba(0, 0, 0, 0.16);
}

.metronome-stage-spotlight {
  position: absolute;
  inset: 8% 7% 2%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(255, 236, 182, 0.13), transparent 36%),
    radial-gradient(ellipse at 50% 62%, rgba(127, 168, 201, 0.1), transparent 52%);
  filter: blur(2px);
}

.beat-performance-stage .metronome-stage-halo {
  width: min(75%, 45rem);
  top: 56%;
  border-color: rgba(215, 184, 108, 0.14);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.032), transparent 59%),
    conic-gradient(from 220deg, transparent, rgba(215, 184, 108, 0.22), rgba(127, 168, 201, 0.12), rgba(126, 106, 168, 0.16), transparent);
  animation: metronomeIdleHaloBreathe 24s ease-in-out infinite;
  will-change: transform, opacity, filter;
}

.metronome-wave-ring {
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: 0;
  width: min(58%, 34rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: metronomeIdleRingBreathe 30s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

.metronome-wave-ring.two {
  width: min(68%, 41rem);
  border-color: rgba(215, 184, 108, 0.075);
  animation-duration: 36s;
  animation-delay: -9s;
}

.violin-metronome-page.is-playing .beat-performance-stage .metronome-stage-halo {
  animation: metronomeStageHaloDrift 32s ease-in-out infinite;
}

.violin-metronome-page.is-playing .metronome-wave-ring.one {
  animation: metronomeWavePulse calc(var(--beat-duration) * 2) ease-in-out infinite;
}

.violin-metronome-page.is-playing .metronome-wave-ring.two {
  animation: metronomeWavePulse calc(var(--beat-duration) * 2) ease-in-out infinite 180ms;
}

.beat-performance-stage .metronome-stage-status {
  align-self: start;
  gap: 0.6rem;
  margin-top: 0.58rem;
}

.beat-performance-stage .metronome-stage-status span,
.beat-performance-stage .metronome-stage-status em {
  border-radius: 999px;
  background: rgba(3, 7, 13, 0.42);
}

.beat-performance-stage .metronome-stage-status strong {
  min-width: 6.2rem;
  color: rgba(255, 239, 192, 0.98);
  letter-spacing: 0.1em;
}

.beat-performance-stage .metronome-beat-lane {
  max-width: min(94%, 70rem);
  gap: clamp(0.9rem, 2vw, 1.6rem);
  align-self: center;
  margin-top: clamp(0.65rem, 2.8vh, 1.65rem);
}

.beat-performance-stage .metronome-big-beat {
  width: clamp(8.8rem, 13.2vw, 12.4rem);
  border-width: 1px;
  border-color: rgba(233, 238, 244, 0.14);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.15), transparent 33%),
    radial-gradient(circle, rgba(233, 238, 244, 0.13), rgba(127, 168, 201, 0.08) 56%, rgba(0, 0, 0, 0.34));
}

.beat-performance-stage.beats-6 .metronome-big-beat {
  width: clamp(5.7rem, 8vw, 8.2rem);
}

.beat-performance-stage.beats-2 .metronome-beat-lane {
  max-width: min(66%, 36rem);
}

.beat-performance-stage.beats-3 .metronome-beat-lane {
  max-width: min(78%, 48rem);
}

.beat-performance-stage .metronome-big-beat strong {
  font-size: clamp(3.8rem, 6.8vw, 6.5rem);
}

.beat-performance-stage.beats-6 .metronome-big-beat strong {
  font-size: clamp(2.8rem, 4.5vw, 4.7rem);
}

.beat-performance-stage .metronome-big-beat small {
  color: rgba(233, 238, 244, 0.58);
  font-size: 0.82rem;
}

.beat-performance-stage .metronome-big-beat.is-current {
  transform: scale(1.2);
  animation: beatOrbKick 360ms cubic-bezier(.18, .82, .24, 1);
}

.beat-performance-stage .metronome-big-beat.is-current.is-accent {
  transform: scale(1.25);
  animation: beatOrbKickStrong 420ms cubic-bezier(.18, .82, .24, 1);
}

.beat-performance-stage .metronome-subdivision-lane {
  width: min(62%, 42rem);
  margin-bottom: clamp(0.2rem, 1vh, 0.8rem);
}

.beat-performance-stage .metronome-subdivision-lane.is-empty span {
  opacity: 0;
}

.metronome-control-bar {
  min-height: 0;
}

.metronome-control-bar .metronome-control-strip {
  grid-template-columns: minmax(8.6rem, 0.82fr) minmax(8.2rem, 0.72fr) minmax(12rem, 1fr) minmax(13rem, 1.05fr) minmax(10rem, 0.78fr) minmax(13rem, 1fr);
  gap: clamp(0.5rem, 0.72vw, 0.7rem);
}

.metronome-control-bar .metronome-control-card {
  min-height: 6.2rem;
  padding: clamp(0.62rem, 0.85vw, 0.8rem);
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.086), rgba(255, 255, 255, 0.026)),
    rgba(2, 6, 11, 0.48);
}

.metronome-control-bar .metronome-control-card > span {
  color: rgba(233, 238, 244, 0.66);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.metronome-control-bar .metronome-segment-grid {
  gap: 0.28rem;
}

.metronome-control-bar .metronome-rhythm-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metronome-control-bar .metronome-segment-grid button,
.metronome-sound-mini-panel button,
.metronome-practice-mini-panel button {
  min-height: 2.18rem;
  border-radius: 9px;
  font-size: 0.72rem;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.metronome-control-bar .metronome-segment-grid button.is-active,
.metronome-sound-mini-panel button.is-active,
.metronome-practice-mini-panel button.is-active {
  border-color: rgba(215, 184, 108, 0.46);
  background:
    linear-gradient(135deg, rgba(215, 184, 108, 0.2), rgba(127, 168, 201, 0.065));
  color: rgba(255, 241, 204, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.metronome-volume-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.8rem;
  gap: 0.45rem;
  align-items: center;
  min-height: 4.9rem;
}

.metronome-volume-line small {
  color: rgba(233, 238, 244, 0.6);
  text-align: right;
}

.metronome-custom-accent-panel {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.24rem;
}

.metronome-custom-accent-panel button {
  display: grid;
  place-items: center;
  gap: 0.02rem;
  min-height: 2.2rem;
  padding: 0.24rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.042);
  color: rgba(233, 238, 244, 0.66);
  cursor: pointer;
}

.metronome-custom-accent-panel button.is-active {
  border-color: rgba(215, 184, 108, 0.52);
  background: radial-gradient(circle at 50% 20%, rgba(215, 184, 108, 0.24), rgba(215, 184, 108, 0.08));
  color: rgba(255, 241, 204, 0.98);
  box-shadow: 0 0 1rem rgba(215, 184, 108, 0.12);
}

.metronome-custom-accent-panel b {
  font-size: 0.78rem;
}

.metronome-custom-accent-panel span {
  font-size: 0.56rem;
}

.metronome-practice-mini-panel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metronome-practice-mini-panel button {
  text-align: center;
}

.metronome-practice-mini-panel strong {
  font-size: 0.68rem;
}

.metronome-ramp-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
}

.metronome-ramp-stepper {
  display: grid;
  grid-template-columns: 1.24rem minmax(1.8rem, 1fr) 1.24rem;
  gap: 0.18rem;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.2rem;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.048);
  color: rgba(233, 238, 244, 0.64);
  text-align: center;
}

.metronome-ramp-stepper small {
  grid-column: 1 / -1;
  color: rgba(233, 238, 244, 0.48);
  font-size: 0.55rem;
  line-height: 1;
}

.metronome-ramp-stepper button {
  display: grid;
  width: 1.24rem;
  height: 1.24rem;
  min-height: 0;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.04);
  color: rgba(255, 238, 196, 0.9);
  font-size: 0.74rem;
  line-height: 1;
}

.metronome-ramp-stepper button:hover {
  border-color: rgba(226, 199, 120, 0.42);
  background: rgba(226, 199, 120, 0.12);
  color: rgba(255, 242, 210, 0.98);
}

.metronome-ramp-stepper strong {
  color: rgba(244, 248, 250, 0.86);
  font-size: 0.66rem;
  font-weight: 760;
  line-height: 1;
}

.metronome-symbol-grid button strong {
  color: currentColor;
  font-size: 1.14rem;
  line-height: 1;
}

.metronome-rhythm-grid button {
  min-height: 1.92rem;
  padding: 0.18rem 0.25rem;
}

.metronome-rhythm-grid button strong {
  font-size: 1rem;
  white-space: nowrap;
}

.metronome-footer-hint {
  margin: -0.18rem 0 0;
  color: rgba(233, 238, 244, 0.6);
  font-size: 0.9rem;
  font-weight: 640;
  text-align: center;
}

@keyframes metronomeWavePulse {
  0%, 100% { opacity: 0.32; transform: translate(-50%, -50%) scale(0.98); }
  50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.045); }
}

@keyframes metronomeIdleHaloBreathe {
  0%, 100% {
    opacity: 0.68;
    filter: blur(0);
    transform: translate(-50%, -50%) rotate(-0.6deg) scale(0.985);
  }
  46% {
    opacity: 0.84;
    filter: blur(0.12rem);
    transform: translate(-49.55%, -50.35%) rotate(1.2deg) scale(1.035);
  }
  74% {
    opacity: 0.76;
    filter: blur(0.06rem);
    transform: translate(-50.35%, -49.7%) rotate(0.3deg) scale(1.01);
  }
}

@keyframes metronomeIdleRingBreathe {
  0%, 100% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.992);
  }
  50% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(1.035);
  }
}

@keyframes metronomeStageHaloDrift {
  0%, 100% {
    opacity: 0.72;
    filter: blur(0);
    transform: translate(-50%, -50%) rotate(-1.5deg) scale(0.985);
  }
  45% {
    opacity: 0.9;
    filter: blur(0.18rem);
    transform: translate(-49.2%, -50.8%) rotate(2.2deg) scale(1.035);
  }
  72% {
    opacity: 0.8;
    filter: blur(0.08rem);
    transform: translate(-50.8%, -49.5%) rotate(0.8deg) scale(1.01);
  }
}

@keyframes beatOrbKick {
  0% { transform: scale(0.98); }
  58% { transform: scale(1.22); }
  100% { transform: scale(1.2); }
}

@keyframes beatOrbKickStrong {
  0% { transform: scale(0.98); filter: brightness(1); }
  54% { transform: scale(1.29); filter: brightness(1.12); }
  100% { transform: scale(1.25); filter: brightness(1); }
}

@media (max-width: 1260px) {
  .metronome-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .metronome-control-bar .metronome-control-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metronome-volume-card,
  .metronome-practice-mini-card {
    grid-column: span 1;
  }
}

@media (max-width: 820px) {
  .content-grid[data-module="metronome"] > .violin-metronome-page {
    min-height: auto;
  }

  .violin-metronome-page {
    grid-template-rows: auto auto auto;
    overflow: visible;
  }

  .metronome-header,
  .metronome-control-bar .metronome-control-strip {
    grid-template-columns: 1fr;
  }

  .metronome-header-meta {
    justify-self: start;
  }

  .metronome-stage-controls {
    grid-template-columns: 1fr;
    width: min(100%, 20rem);
  }

  .metronome-top-actions {
    grid-template-columns: 1fr 0.72fr;
  }

  .beat-performance-stage {
    min-height: 31rem;
  }

  .beat-performance-stage .metronome-beat-lane {
    max-width: 100%;
    margin-top: 1.5rem;
  }

  .beat-performance-stage .metronome-big-beat,
  .beat-performance-stage.beats-6 .metronome-big-beat {
    width: clamp(4.9rem, 24vw, 7.2rem);
  }

  .beat-performance-stage .metronome-big-beat strong,
  .beat-performance-stage.beats-6 .metronome-big-beat strong {
    font-size: clamp(2.4rem, 12vw, 4rem);
  }

  .metronome-practice-mini-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metronome-custom-accent-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.membership-card {
  min-height: clamp(13rem, 18vw, 16rem);
  align-content: end;
  background:
    radial-gradient(circle at 78% 24%, rgba(228, 199, 127, 0.2), transparent 30%),
    radial-gradient(circle at 20% 82%, rgba(140, 233, 242, 0.12), transparent 32%),
    rgba(0, 0, 0, 0.18);
}

.membership-card span {
  color: var(--muted);
  line-height: 1.65;
}

.support-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 7rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.072);
  color: var(--text);
  outline: none;
  backdrop-filter: blur(18px);
}

.support-form textarea:focus,
.select-like:focus {
  border-color: rgba(140, 233, 242, 0.36);
}

.support-chat-shell {
  min-height: 0;
  height: calc(100dvh - 11.5rem);
  overflow: hidden;
}

.support-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.support-header-actions .glass-button {
  min-height: 2.15rem;
  padding: 0.42rem 0.75rem;
  white-space: nowrap;
}

.support-chat-panel {
  display: grid;
  align-content: start;
  gap: clamp(0.5rem, 0.75vw, 0.65rem);
  min-height: 0;
  height: clamp(12.5rem, 20vw, 17.5rem);
  overflow: auto;
  padding: clamp(0.6rem, 0.85vw, 0.8rem);
  border: 1px solid rgba(140, 233, 242, 0.13);
  border-radius: calc(var(--radius) * 0.9);
  background:
    radial-gradient(circle at 12% 8%, rgba(140, 233, 242, 0.11), transparent 32%),
    rgba(0, 0, 0, 0.2);
}

.support-message {
  display: grid;
  gap: 0.35rem;
  width: min(74%, 34rem);
  padding: clamp(0.55rem, 0.8vw, 0.75rem);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.032)),
    rgba(0, 0, 0, 0.2);
}

.support-message > span {
  color: var(--gold);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.support-message p {
  margin: 0;
  color: var(--text);
  line-height: 1.62;
  font-weight: 480;
}

.support-message.is-user {
  justify-self: end;
  border-color: rgba(228, 199, 127, 0.2);
  background:
    linear-gradient(145deg, rgba(228, 199, 127, 0.13), rgba(140, 233, 242, 0.052)),
    rgba(0, 0, 0, 0.22);
}

.support-message.is-user > span {
  color: var(--cyan);
}

.support-ask-form {
  display: grid;
  gap: clamp(0.4rem, 0.65vw, 0.55rem);
  margin-top: clamp(0.5rem, 0.7vw, 0.7rem);
}

.support-ask-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 4.5rem;
  padding: clamp(0.6rem, 0.85vw, 0.8rem);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: calc(var(--radius) * 0.8);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  outline: none;
  backdrop-filter: blur(18px);
}

.support-ask-form textarea:focus {
  border-color: rgba(140, 233, 242, 0.36);
  box-shadow: 0 0 0 3px rgba(140, 233, 242, 0.065);
}

.support-input-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.35rem, 0.6vw, 0.55rem);
}

.support-input-actions .glass-button {
  min-width: 7.5rem;
}

.support-ticket-note {
  margin-top: clamp(0.35rem, 0.55vw, 0.5rem);
}

.support-knowledge-grid {
  display: grid;
  gap: 0;
  max-height: calc(100dvh - 19rem);
  overflow: auto;
  padding-right: 0.15rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--radius) * 0.86);
  background: rgba(0, 0, 0, 0.13);
}

.support-knowledge-card {
  display: grid;
  gap: 0.18rem;
  width: 100%;
  padding: clamp(0.62rem, 0.82vw, 0.76rem) clamp(0.72rem, 0.95vw, 0.9rem);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.support-knowledge-card:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(140, 233, 242, 0.07);
}

.support-knowledge-card strong {
  font-size: clamp(0.9rem, 0.96vw, 0.96rem);
  font-weight: 700;
}

.support-knowledge-card p {
  margin: 0;
  color: var(--muted);
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.86rem;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.support-human-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.65rem, 1vw, 0.95rem);
  margin-bottom: clamp(0.65rem, 0.95vw, 0.85rem);
  padding: clamp(0.78rem, 1vw, 0.95rem) clamp(0.82rem, 1.08vw, 1.05rem);
  border: 1px solid rgba(228, 199, 127, 0.24);
  border-radius: calc(var(--radius) * 0.86);
  background:
    linear-gradient(135deg, rgba(228, 199, 127, 0.13), rgba(91, 65, 143, 0.11)),
    rgba(0, 0, 0, 0.24);
}

.support-human-card > div {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.support-human-card .chip {
  justify-self: start;
  width: auto;
  max-width: max-content;
  padding-inline: 0.62rem;
}

.support-human-card strong {
  color: var(--text);
  line-height: 1.4;
  font-size: 0.96rem;
  font-weight: 720;
}

.support-human-card p {
  margin: 0;
}

.support-human-card .glass-button {
  flex: 0 0 auto;
}

.support-knowledge-header {
  margin-bottom: clamp(0.45rem, 0.7vw, 0.6rem);
}

@keyframes softPulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.025);
  }
}

@keyframes tuneNeedle {
  0%,
  100% {
    transform: translateY(-3.2rem) rotate(-9deg);
  }
  50% {
    transform: translateY(-3.2rem) rotate(9deg);
  }
}

.fade-in {
  animation: fadeIn 220ms ease both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes teacherAura {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes teacherSpeakMouth {
  0%,
  100% {
    width: 1.1rem;
    height: 0.32rem;
    border-radius: 999px;
  }
  20% {
    width: 1.45rem;
    height: 0.72rem;
    border-radius: 50%;
  }
  42% {
    width: 0.9rem;
    height: 0.78rem;
    border-radius: 50%;
  }
  66% {
    width: 1.6rem;
    height: 0.44rem;
    border-radius: 999px;
  }
  82% {
    width: 1.25rem;
    height: 0.62rem;
    border-radius: 46%;
  }
}

@keyframes teacherVisemePulse {
  0%,
  12% {
    opacity: 0;
    transform: translateY(0);
  }
  14%,
  20% {
    opacity: 0.18;
    transform: translateY(-1px);
  }
  26%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 22px rgba(228, 199, 127, 0.14);
  }
  50% {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 0 34px rgba(140, 233, 242, 0.18);
  }
}

@media (max-width: 1180px) and (min-width: 1081px) {
  :root {
    --page-pad-x: clamp(0.875rem, 1.7vw, 1.5rem);
    --grid-gap: clamp(0.625rem, 0.95vw, 1rem);
    --portal-card-w: clamp(9.6rem, 16.45cqw, 13rem);
    --portal-card-h: clamp(30rem, calc(100dvh - 7.75rem), 40rem);
  }

  .content-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .portal-strip {
    grid-template-columns: none;
  }

  .home-hero,
  .home-studio,
  .portal-strip,
  .panel.span-12 {
    grid-column: span 8;
  }

  .portal-wide {
    grid-column: auto;
  }

  .dashboard-card.span-6,
  .dashboard-card.span-4,
  .feature-card.span-6,
  .quick-panel.span-8,
  .teacher-guide.span-4,
  .panel.span-6,
  .panel.span-7,
  .panel.span-8 {
    grid-column: span 4;
  }

  .dashboard-card.span-3,
  .panel.span-4,
  .panel.span-5 {
    grid-column: span 4;
  }

  .practice-modes {
    grid-template-columns: 1fr;
  }

  .home-studio {
    grid-template-columns: minmax(10rem, 0.22fr) minmax(0, 1fr);
  }

  .generator-topup-panel {
    grid-template-columns: 1fr;
  }

  .generator-pipeline,
  .generator-workbench,
  .generator-result-grid {
    grid-template-columns: 1fr;
  }

  .generator-pipeline article {
    min-height: 0;
  }

  .generator-pipeline article::after {
    display: none;
  }

  .generator-edit-strip {
    grid-template-columns: 1fr;
  }

  .generator-task-list {
    grid-template-columns: 1fr;
  }

  .membership-plan-grid {
    grid-template-columns: 1fr;
  }

  .membership-comparison {
    overflow-x: auto;
  }

  .studio-summary {
    grid-template-columns: 1fr;
  }

  .feature-grid,
  .feature-grid.compact,
  .theme-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .record-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .progress-body {
    grid-template-columns: var(--ring-size) minmax(0, 1fr);
  }

  .quick-panel,
  .teacher-guide {
    grid-column: span 8;
  }
}

@media (max-width: 1080px) {
  :root {
    --portal-card-w: clamp(9.2rem, 25.5cqw, 13rem);
    --portal-card-h: clamp(28rem, calc(100dvh - 10rem), 38rem);
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .top-nav {
    order: 3;
    flex-basis: 100%;
    max-width: 100%;
  }

  .hero-panel,
  .hero-metrics {
    grid-template-columns: 1fr;
  }

  .hero-metrics {
    min-height: 0;
  }

  .content-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .metronome-workbench {
    grid-template-columns: 1fr;
  }

  .metronome-stage {
    min-height: clamp(12rem, 28vw, 16rem);
  }

  .portal-strip {
    grid-template-columns: none;
  }

  .portal-wide {
    grid-column: auto;
  }

  .panel.span-4,
  .panel.span-5,
  .panel.span-6,
  .panel.span-7,
  .panel.span-8,
  .panel.span-12,
  .home-studio,
  .feature-card.span-6,
  .quick-panel.span-8,
  .teacher-guide.span-4,
  .dashboard-card.span-3,
  .dashboard-card.span-4,
  .dashboard-card.span-6 {
    grid-column: span 6;
  }

  .filter-row,
  .metronome-controls,
  .metronome-slider-grid,
  .metronome-preset-row,
  .score-editor-toolbar,
  .score-sheet-top,
  .score-inspector-grid,
  .support-input-actions,
  .teacher-knowledge-grid,
  .teacher-report-grid,
  .teacher-upload-fields,
  .teacher-feedback-principles,
  .progress-layout,
  .piece-detail-grid,
  .copyright-report-shell,
  .studio-summary {
    grid-template-columns: 1fr;
  }

  .home-studio {
    grid-template-columns: 1fr;
  }

  .studio-violin-art {
    min-height: clamp(9rem, 24vw, 13rem);
    border-right: 0;
    border-bottom: 1px solid rgba(228, 199, 127, 0.18);
  }

  .studio-violin-art img {
    inset: -34% auto auto 4%;
    width: min(30rem, 78vw);
    height: 165%;
  }

  .studio-greeting {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .studio-streak {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .quick-panel,
  .teacher-guide {
    align-items: stretch;
    flex-direction: column;
  }

  .quick-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .library-row {
    grid-template-columns: var(--thumb-w) minmax(0, 1fr) auto;
  }

  .library-row > span,
  .library-row b {
    display: none;
  }
}

@media (max-width: 1080px) and (min-width: 721px) {
  html[data-active-module],
  html[data-active-module] body {
    min-height: 100%;
  }

  html[data-active-module] .app-shell {
    min-height: 100dvh;
  }

  html[data-active-module] .main-stage {
    min-height: 100dvh;
  }

  .content-grid[data-module="home"] {
    min-height: calc(100dvh - 7.25rem);
  }

  .content-grid[data-module="home"] .portal-strip {
    height: calc(100dvh - 7.25rem);
    min-height: 0;
  }

  .content-grid[data-module="home"] .portal-card {
    height: 100%;
    min-height: 0;
  }

  .content-grid[data-module="metronome"] > .metronome-pro-panel {
    display: grid;
    min-height: calc(100dvh - 7.25rem);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .content-grid[data-module="metronome"] .metronome-workbench {
    min-height: 0;
  }

  .content-grid[data-module="teacher"] .teacher-knowledge-grid,
  .content-grid[data-module="teacher"] .teacher-feedback-principles,
  .content-grid[data-module="reports"] .stuck-pattern-grid,
  .content-grid[data-module="membership"] .membership-plan-grid,
  .content-grid[data-module="featureIntro"] .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid[data-module="scoreEditor"] .score-editor-toolbar {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .score-import-workbench {
    grid-template-columns: 1fr;
  }

  .score-import-route {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1081px) {
  html[data-active-module],
  html[data-active-module] body {
    height: 100%;
    overflow: hidden;
  }

  html[data-active-module] .app-shell {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  html[data-active-module] .main-stage {
    display: flex;
    width: min(100%, var(--stage-max-w));
    height: 100dvh;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: var(--page-pad-y);
  }

  html[data-active-module] .topbar {
    flex: 0 0 auto;
    min-height: 0;
    margin-bottom: clamp(0.65rem, 1.05vw, 1rem);
  }

  html[data-active-module] .content-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    align-content: stretch;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
  }

  .content-grid[data-module] .portal-strip,
  .content-grid[data-module] .panel.span-12 {
    grid-column: span 12;
  }

  .content-grid[data-module] .panel.span-8 {
    grid-column: span 8;
  }

  .content-grid[data-module] .panel.span-7 {
    grid-column: span 7;
  }

  .content-grid[data-module] .panel.span-6 {
    grid-column: span 6;
  }

  .content-grid[data-module] .panel.span-5 {
    grid-column: span 5;
  }

  .content-grid[data-module] .panel.span-4 {
    grid-column: span 4;
  }

  .content-grid[data-module] > .panel {
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    scrollbar-color: rgba(140, 233, 242, 0.36) rgba(255, 255, 255, 0.045);
    scrollbar-width: thin;
  }

  .content-grid[data-module] > .panel::-webkit-scrollbar {
    width: 0.45rem;
  }

  .content-grid[data-module] > .panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
  }

  .content-grid[data-module] > .panel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(140, 233, 242, 0.26);
  }

  .content-grid[data-module] .panel-header {
    margin-bottom: clamp(0.6rem, 0.85vw, 0.8rem);
  }

  .content-grid[data-module] .muted {
    line-height: 1.52;
  }

  .content-grid[data-module] .stack {
    gap: clamp(0.42rem, 0.62vw, 0.62rem);
  }

  .content-grid[data-module="tuner"] {
    grid-template-rows: minmax(0, 1fr);
  }

  .content-grid[data-module="tuner"] > .panel {
    overflow: hidden;
  }

  .content-grid[data-module="tuner"] > .tuner-hand-panel {
    grid-column: span 5;
  }

  .content-grid[data-module="home"] {
    grid-template-rows: minmax(0, 1fr);
  }

  .content-grid[data-module="home"] .portal-strip {
    height: 100%;
    min-height: 0;
    padding-bottom: 0;
  }

  .content-grid[data-module="home"] .portal-card {
    height: 100%;
    min-height: 0;
  }

  .content-grid[data-module="generator"],
  .content-grid[data-module="preTune"],
  .content-grid[data-module="practice"],
  .content-grid[data-module="tools"],
  .content-grid[data-module="violinKnowledge"],
  .content-grid[data-module="support"] {
    grid-template-rows: minmax(0, 1fr);
  }

  .content-grid[data-module="generator"] {
    display: block;
    overflow: auto;
  }

  .content-grid[data-module="generator"] > .panel {
    margin-bottom: var(--grid-gap);
    max-height: none;
    overflow: visible;
  }

  .content-grid[data-module="generator"] > .panel:last-child {
    margin-bottom: 0;
  }

  .content-grid[data-module="pieces"] {
    grid-template-rows: minmax(0, 1fr) minmax(0, 0.72fr);
  }

  .content-grid[data-module="pieces"] > .panel:nth-child(1) {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
  }

  .content-grid[data-module="pieces"] > .piece-detail-card {
    grid-column: 8 / span 5;
    grid-row: 1;
  }

  .content-grid[data-module="pieces"] > .panel:last-child {
    grid-column: 8 / span 5;
    grid-row: 2;
  }

  .content-grid[data-module="pieces"]:has(.copyright-report-panel) {
    grid-template-rows: minmax(0, 0.76fr) minmax(0, 1fr);
  }

  .content-grid[data-module="pieces"]:has(.copyright-report-panel) > .panel:nth-child(1) {
    grid-column: 1 / span 5;
    grid-row: 1 / span 2;
  }

  .content-grid[data-module="pieces"]:has(.copyright-report-panel) > .piece-detail-card {
    grid-column: 6 / span 4;
    grid-row: 1;
  }

  .content-grid[data-module="pieces"]:has(.copyright-report-panel) > .copyright-report-panel {
    grid-column: 6 / span 7;
    grid-row: 2;
  }

  .content-grid[data-module="pieces"]:has(.copyright-report-panel) > .panel:last-child {
    grid-column: 10 / span 3;
    grid-row: 1;
  }

  .content-grid[data-module="scoreEditor"] {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .content-grid[data-module="scoreEditor"] > .score-editor-hero {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .content-grid[data-module="scoreEditor"] > .score-sheet-panel {
    grid-column: 1 / span 8;
    grid-row: 2;
  }

  .content-grid[data-module="scoreEditor"] > .score-inspector-panel {
    grid-column: 9 / span 4;
    grid-row: 2;
  }

  .content-grid[data-module="scoreEditor"] .score-editor-toolbar {
    grid-template-columns: repeat(11, minmax(2.9rem, 1fr));
  }

  .content-grid[data-module="scoreEditor"] .score-tool {
    min-height: clamp(2.8rem, 3.7vw, 3.55rem);
  }

  .content-grid[data-module="scoreEditor"] .score-sheet-panel {
    min-height: 0;
  }

  .content-grid[data-module="scoreEditor"] .score-canvas {
    min-height: clamp(12rem, 20vh, 19rem);
  }

  .content-grid[data-module="membership"] {
    grid-template-rows: minmax(0, 1fr);
  }

  .content-grid[data-module="membership"] > .panel:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .content-grid[data-module="membership"] .membership-price strong {
    font-size: clamp(1.9rem, 3.05vw, 3rem);
  }

  .content-grid[data-module="featureIntro"] {
    grid-template-rows: minmax(0, 1fr);
  }

  .content-grid[data-module="featureIntro"] > .feature-tour {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .content-grid[data-module="metronome"] {
    grid-template-rows: minmax(0, 1fr);
  }

  .content-grid[data-module="metronome"] > .metronome-pro-panel {
    display: grid;
    max-width: none;
    height: 100%;
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .content-grid[data-module="metronome"] .metronome-workbench {
    min-height: 0;
    grid-template-columns: minmax(18rem, 0.78fr) minmax(0, 1.22fr);
  }

  .content-grid[data-module="metronome"] .metronome-settings {
    min-height: 0;
    overflow: auto;
    padding-right: 0.1rem;
  }

  .content-grid[data-module="support"] > .support-chat-shell,
  .content-grid[data-module="support"] > .panel:nth-child(2) {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
  }

  .content-grid[data-module="support"] .support-chat-panel,
  .content-grid[data-module="support"] .support-knowledge-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
  }

  .content-grid[data-module="support"] .support-human-card,
  .content-grid[data-module="support"] .support-ask-form {
    flex: 0 0 auto;
  }

  .content-grid[data-module="teacher"] {
    grid-template-rows: minmax(0, 0.95fr) minmax(0, 0.72fr);
  }

  .content-grid[data-module="teacher"] > .panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .content-grid[data-module="teacher"] > .panel:nth-child(1) {
    grid-column: 1 / span 5;
    grid-row: 1;
  }

  .content-grid[data-module="teacher"] > .panel:nth-child(2) {
    grid-column: 6 / span 7;
    grid-row: 1;
  }

  .content-grid[data-module="teacher"] > .panel:nth-child(3) {
    grid-column: 1 / span 5;
    grid-row: 2;
  }

  .content-grid[data-module="teacher"] > .panel:nth-child(4) {
    grid-column: 6 / span 7;
    grid-row: 2;
  }

  .content-grid[data-module="teacher"] .teacher-avatar,
  .content-grid[data-module="teacher"] .upload-zone {
    min-height: 0;
    flex: 1 1 auto;
  }

  .content-grid[data-module="teacher"] .teacher-avatar {
    min-height: clamp(8.8rem, 22vh, 12.5rem);
  }

  .content-grid[data-module="teacher"] .upload-zone {
    min-height: clamp(10.5rem, 24vh, 14rem);
    padding: clamp(0.62rem, 0.9vw, 0.85rem);
  }

  .content-grid[data-module="teacher"] .upload-icon {
    width: clamp(2.35rem, 3.4vw, 3.1rem);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
  }

  .content-grid[data-module="teacher"] .teacher-upload-fields {
    gap: clamp(0.42rem, 0.6vw, 0.58rem);
  }

  .content-grid[data-module="teacher"] .teacher-file-pill {
    padding: 0.55rem 0.72rem;
  }

  .content-grid[data-module="teacher"] .teacher-analyze-btn {
    min-height: clamp(2.05rem, 3vh, 2.35rem);
  }

  .content-grid[data-module="teacher"] .teacher-knowledge-grid,
  .content-grid[data-module="teacher"] .teacher-feedback-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid[data-module="teacher"] .teacher-knowledge-grid {
    flex: 1 1 auto;
    min-height: 0;
    align-content: stretch;
  }

  .content-grid[data-module="teacher"] .teacher-knowledge-card,
  .content-grid[data-module="teacher"] .teacher-report-card {
    gap: 0.35rem;
    min-height: 0;
    padding: clamp(0.55rem, 0.8vw, 0.72rem);
  }

  .content-grid[data-module="teacher"] .teacher-knowledge-card p,
  .content-grid[data-module="teacher"] .teacher-report-card p,
  .content-grid[data-module="teacher"] .report-line p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .content-grid[data-module="teacher"] .teacher-report-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.45rem, 0.64vw, 0.6rem);
  }

  .content-grid[data-module="teacher"] .teacher-onepage-report .stack {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .content-grid[data-module="teacher"] .teacher-onepage-report .report-score {
    font-size: clamp(2rem, 4.6vw, 3.8rem);
  }

  .content-grid[data-module="teacher"] .teacher-speech-bubble {
    width: min(78%, 16rem);
    padding: clamp(0.52rem, 0.74vw, 0.68rem);
  }

  .content-grid[data-module="teacher"] .teacher-speech-bubble p {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .content-grid[data-module="teacher"] .teacher-head {
    width: clamp(5.2rem, 8.2vw, 7.4rem);
  }

  .content-grid[data-module="teacher"] .teacher-body {
    width: clamp(6.8rem, 9.5vw, 8.5rem);
    height: clamp(4.2rem, 5.8vw, 5.2rem);
  }

  .content-grid[data-module="reports"] {
    grid-template-rows: minmax(0, 0.64fr) minmax(0, 1.02fr) minmax(0, 0.86fr);
  }

  .content-grid[data-module="reports"] > .panel:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .content-grid[data-module="reports"] > .panel:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .content-grid[data-module="reports"] > .panel:nth-child(3) {
    grid-column: 1 / span 7;
    grid-row: 3;
  }

  .content-grid[data-module="reports"] > .panel:nth-child(4) {
    grid-column: 8 / span 5;
    grid-row: 3;
  }

  .content-grid[data-module="reports"] > .panel {
    overflow: hidden;
    scrollbar-width: none;
  }

  .content-grid[data-module="reports"] > .panel::-webkit-scrollbar {
    display: none;
  }

  .content-grid[data-module="profile"] {
    grid-template-rows: none;
    grid-auto-rows: auto;
  }

  .content-grid[data-module="profile"] .theme-option-card {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  :root {
    --page-pad-x: 0.875rem;
    --page-pad-y: 1rem;
    --grid-gap: 0.75rem;
    --card-pad: 1rem;
    --control-height: 2.75rem;
    --portal-card-w: minmax(12.5rem, 72cqw);
    --portal-card-h: 22rem;
  }

  .main-stage {
    padding: var(--page-pad-y) var(--page-pad-x) 1.875rem;
  }

  .topbar {
    align-items: flex-start;
  }

  .top-brand {
    width: min(100%, 14rem);
  }

  .topbar-spacer {
    display: none;
  }

  .user-area {
    margin-left: auto;
    gap: 0.5rem;
  }

  .member-pill,
  .user-profile span,
  .user-profile b {
    display: none;
  }

  .top-nav .nav-item {
    min-height: 2.25rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.86rem;
  }

  .portal-strip {
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 0.875rem;
  }

  .content-grid[data-module="home"] .portal-strip {
    min-height: calc(100dvh - 9.5rem);
  }

  .portal-card {
    min-height: var(--portal-card-h);
  }

  .portal-wide {
    grid-column: span 1;
  }

  .endpoint-pill {
    display: none;
  }

  .content-grid,
  .feature-grid,
  .feature-grid.compact,
  .field-grid,
  .generator-pipeline,
  .generator-workbench,
  .generator-edit-strip,
  .generator-result-grid,
  .score-editor-toolbar,
  .score-measure-row,
  .score-inspector-grid,
  .generator-quota-card,
  .membership-plan-grid,
  .metronome-controls,
  .metronome-slider-grid,
  .metronome-preset-row,
  .support-input-actions,
  .teacher-knowledge-grid,
  .teacher-report-grid,
  .teacher-upload-fields,
  .teacher-feedback-principles,
  .profile-grid,
  .theme-option-grid,
  .record-score-grid,
  .record-summary-grid,
  .stuck-pattern-grid,
  .report-lesson-summary,
  .report-summary-points,
  .report-focus-grid,
  .report-trend-grid,
  .report-compare-grid,
  .practice-modes {
    grid-template-columns: 1fr;
  }

  .generator-quota-card .glass-button {
    justify-self: start;
  }

  .generator-stage-panel {
    min-height: calc(100dvh - 8rem);
  }

  .generator-add-screen {
    min-height: calc(100dvh - 11rem);
    gap: 0.85rem;
  }

  .generator-add-copy h3 {
    font-size: clamp(2.4rem, 15vw, 4.2rem);
  }

  .generator-add-copy p:not(.eyebrow) {
    max-width: 17rem;
    font-size: 0.92rem;
  }

  .generator-add-stage {
    width: min(22rem, 92vw);
    min-height: 15.5rem;
  }

  .generator-add-button {
    width: clamp(8.6rem, 42vw, 11rem);
  }

  .generator-score-ghost {
    right: 0.1rem;
    bottom: 1rem;
    width: 8.6rem;
    opacity: 0.32;
  }

  .metronome-main-controls {
    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  }

  .metronome-ring {
    width: min(15rem, 78vw);
  }

  .panel.span-4,
  .panel.span-5,
  .panel.span-6,
  .panel.span-7,
  .panel.span-8,
  .panel.span-12,
  .home-studio,
  .feature-card.span-6,
  .quick-panel.span-8,
  .teacher-guide.span-4,
  .dashboard-card.span-3,
  .dashboard-card.span-4,
  .dashboard-card.span-6 {
    grid-column: span 1;
  }

  .content-grid[data-module="reports"] {
    display: grid;
    overflow: auto;
    grid-auto-rows: auto;
  }

  .content-grid[data-module="reports"] > .panel {
    overflow: visible;
  }

  .report-lesson-summary,
  .report-focus-panel,
  .report-next-plan,
  .report-trend-panel {
    padding: 0.78rem;
  }

  .report-score-side {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .report-history-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .report-focus-card {
    grid-template-rows: auto;
  }

  .report-plan-row {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .report-plan-row .glass-button {
    grid-column: 2;
    justify-self: start;
  }

  .hero-copy {
    min-height: 0;
    padding: var(--card-pad);
  }

  .home-hero {
    min-height: 11.25rem;
    padding: 1.75rem 1.375rem;
  }

  .home-hero h3 {
    font-size: clamp(1.85rem, 8vw, 2.125rem);
  }

  .home-hero p,
  .user-profile {
    font-size: 0.9375rem;
  }

  .library-row {
    grid-template-columns: var(--thumb-w) minmax(0, 1fr);
  }

  .library-row em,
  .library-row a {
    grid-column: 2;
    justify-self: start;
  }

  .study-stats,
  .today-card p {
    display: grid;
  }

  .studio-dashboard {
    padding: var(--card-pad);
  }

  .studio-greeting,
  .progress-body,
  .home-task-row {
    grid-template-columns: 1fr;
  }

  .studio-level,
  .studio-streak,
  .home-task-row small,
  .home-task-row b {
    justify-self: start;
  }

  .feature-copy {
    max-width: 100%;
  }

  .golden-violin {
    right: -12%;
    bottom: -28%;
    width: min(18rem, 72vw);
    opacity: 0.58;
  }

  .library-stack-preview {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 1.25rem;
    transform: scale(0.92);
    transform-origin: left bottom;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .teacher-guide {
    text-align: left;
  }
}

@media (orientation: portrait) and (max-width: 920px) {
  .topbar {
    gap: 0.75rem;
  }

  .top-brand strong {
    font-size: clamp(1.55rem, 6vw, 1.95rem);
    letter-spacing: 0.045em;
  }

  .top-brand em {
    max-width: 16rem;
    font-size: clamp(0.68rem, 2.9vw, 0.8rem);
  }

  .portal-card > div {
    bottom: 6.1rem;
    transform: none;
  }

  .portal-number {
    margin-bottom: clamp(4.5rem, 20dvh, 8rem);
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  :root {
    --page-pad-y: 0.75rem;
    --portal-card-h: clamp(18rem, calc(100dvh - 5.75rem), 24rem);
  }

  .topbar {
    margin-bottom: 0.75rem;
  }

  .portal-number {
    margin-bottom: clamp(3rem, 15dvh, 5.5rem);
  }

  .portal-card > div {
    bottom: 5.4rem;
    transform: none;
  }

  .portal-action {
    bottom: 1.45rem;
    margin-top: 0;
  }
}

@media (min-width: 1680px) {
  :root {
    --stage-max-w: 112rem;
    --portal-card-w: clamp(12rem, 12.9cqw, 16.25rem);
    --portal-card-h: clamp(36rem, calc(100dvh - 9rem), 48rem);
  }
}

/* Visual refinement pass: preserve all modules, only tighten styling hierarchy. */
:root {
  --bg: #04060a;
  --panel: rgba(10, 15, 22, 0.64);
  --panel-strong: rgba(16, 23, 31, 0.82);
  --line: rgba(175, 206, 220, 0.14);
  --line-strong: rgba(132, 226, 235, 0.34);
  --text: rgba(248, 251, 253, 0.95);
  --muted: rgba(224, 233, 239, 0.64);
  --soft: rgba(224, 233, 239, 0.42);
  --cyan: #84e2eb;
  --cyan-soft: rgba(132, 226, 235, 0.16);
  --gold: #e7ca7a;
  --gold-soft: rgba(231, 202, 122, 0.15);
  --shadow: 0 1.5rem 4.2rem rgba(0, 0, 0, 0.36);
  --radius: 0.5rem;
}

body {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 78% 10%, rgba(132, 226, 235, 0.16), transparent 30%),
    radial-gradient(circle at 18% 86%, rgba(231, 202, 122, 0.12), transparent 34%),
    linear-gradient(135deg, #020304 0%, #090d13 46%, #04060a 100%);
}

body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  opacity: 0.28;
  content: "";
}

.main-stage {
  width: min(100%, 114rem);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0.35rem 0 0.7rem;
  margin-bottom: 1rem;
  background: linear-gradient(180deg, rgba(4, 6, 10, 0.94), rgba(4, 6, 10, 0.72), transparent);
  backdrop-filter: blur(18px);
}

.top-brand {
  max-width: clamp(12rem, 15vw, 13.5rem);
}

.top-brand strong {
  letter-spacing: 0.03em;
  text-shadow: 0 0 24px rgba(231, 202, 122, 0.1);
}

.top-nav {
  gap: 0.24rem;
  padding: 0.14rem;
}

.top-nav .nav-item {
  min-width: clamp(4rem, 5.2vw, 6.45rem);
  border-color: rgba(175, 206, 220, 0.12);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.top-nav .nav-item:hover,
.top-nav .nav-item.is-active {
  border-color: rgba(132, 226, 235, 0.3);
  background:
    linear-gradient(135deg, rgba(132, 226, 235, 0.12), rgba(231, 202, 122, 0.06)),
    rgba(255, 255, 255, 0.04);
}

.member-pill {
  border-color: rgba(231, 202, 122, 0.34);
  background: rgba(231, 202, 122, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.support-pill {
  border-color: rgba(132, 226, 235, 0.28);
  background: rgba(132, 226, 235, 0.08);
  color: rgba(222, 242, 250, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.user-profile img {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.16);
}

.hero-panel,
.dashboard-card,
.home-hero,
.home-studio,
.feature-card,
.quick-panel,
.teacher-guide,
.panel,
.module-card,
.piece-preview,
.report-line,
.profile-tile {
  border-color: rgba(175, 206, 220, 0.14);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.024)),
    linear-gradient(180deg, rgba(132, 226, 235, 0.035), transparent 42%),
    rgba(6, 10, 15, 0.6);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hero-copy,
.home-hero,
.feature-card,
.quick-panel,
.teacher-guide {
  position: relative;
  overflow: hidden;
}

.hero-copy::before,
.home-hero::before,
.feature-card::before,
.quick-panel::before,
.teacher-guide::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.08), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(132, 226, 235, 0.12), transparent 22%);
  opacity: 0.84;
  content: "";
}

.hero-copy > *,
.home-hero > *,
.feature-card > *,
.quick-panel > *,
.teacher-guide > * {
  position: relative;
  z-index: 1;
}

.hero-copy h3,
.home-hero h3 {
  text-wrap: balance;
  letter-spacing: 0;
}

.portal-card {
  border-color: rgba(175, 206, 220, 0.15);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.028)),
    rgba(6, 10, 15, 0.46);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.36);
}

.portal-card::before {
  background:
    radial-gradient(circle at 72% 18%, rgba(132, 226, 235, 0.12), transparent 28%),
    linear-gradient(160deg, rgba(231, 202, 122, 0.12), transparent 46%);
}

.portal-card::after {
  background: linear-gradient(180deg, transparent 0 28%, rgba(3, 4, 5, 0.8) 100%);
}

.portal-card > div {
  bottom: clamp(6.2rem, 12.4vh, 8.2rem);
}

.portal-card h3 {
  color: rgba(255, 239, 202, 0.98);
  text-shadow: 0 0 18px rgba(231, 202, 122, 0.08);
}

.portal-action,
.gold-cta {
  border-color: rgba(231, 202, 122, 0.4);
  background: linear-gradient(135deg, rgba(231, 202, 122, 0.24), rgba(132, 226, 235, 0.08));
}

.portal-action:hover,
.gold-cta:hover {
  border-color: rgba(132, 226, 235, 0.44);
  box-shadow: 0 0 0 1px rgba(132, 226, 235, 0.06), 0 18px 36px rgba(0, 0, 0, 0.22);
}

.studio-level span,
.level-pill,
.endpoint-pill span {
  color: var(--gold);
}

.quick-actions button,
.filter-row span,
.filter-row button,
.generate-fields button,
.string-row button,
.quick-entry,
.library-row a,
.library-row em,
.tuner-string,
.tuner-step-btn {
  border-color: rgba(175, 206, 220, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.022)),
    rgba(0, 0, 0, 0.14);
}

.quick-actions button:hover,
.filter-row button:hover,
.generate-fields button:hover,
.string-row button:hover,
.quick-entry:hover,
.library-row a:hover,
.tuner-string:hover {
  border-color: rgba(132, 226, 235, 0.34);
}

.home-hero {
  border-color: rgba(231, 202, 122, 0.2);
}

.home-hero::before {
  background:
    radial-gradient(circle at 70% 70%, rgba(231, 202, 122, 0.18), transparent 26%),
    linear-gradient(90deg, rgba(4, 6, 8, 0.96), rgba(8, 11, 15, 0.78), rgba(4, 6, 8, 0.2));
}

.home-hero img {
  opacity: 0.84;
  filter: saturate(1.04) contrast(1.02) brightness(0.86);
}

.section-header .pill,
.status-badge {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.024)),
    rgba(0, 0, 0, 0.12);
}

@media (min-width: 900px) {
  .content-grid[data-module="teacher"] {
    grid-template-rows: minmax(0, 0.95fr) minmax(0, 0.72fr);
    align-content: stretch;
    overflow: hidden;
  }

  .content-grid[data-module="teacher"] > .panel {
    display: flex;
    min-height: 0;
    max-height: 100%;
    flex-direction: column;
    overflow: hidden;
  }

  .content-grid[data-module="teacher"] > .panel:nth-child(1) {
    grid-column: 1 / span 5;
    grid-row: 1;
  }

  .content-grid[data-module="teacher"] > .panel:nth-child(2) {
    grid-column: 6 / span 7;
    grid-row: 1;
  }

  .content-grid[data-module="teacher"] > .panel:nth-child(3) {
    grid-column: 1 / span 4;
    grid-row: 2;
  }

  .content-grid[data-module="teacher"] > .panel:nth-child(4) {
    grid-column: 5 / span 8;
    grid-row: 2;
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="teacher"] {
    gap: 0.65rem;
  }

  .content-grid[data-module="teacher"] > .panel {
    overflow: visible;
    padding: 0.68rem;
  }

  .content-grid[data-module="teacher"] .panel-header {
    margin-bottom: 0.32rem;
  }

  .content-grid[data-module="teacher"] .panel-header h3 {
    font-size: 1rem;
  }

  .content-grid[data-module="teacher"] .panel-header .muted,
  .content-grid[data-module="teacher"] .panel-header .chip {
    display: none;
  }

  .teacher-onepage-library {
    display: none;
  }

  .teacher-avatar {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .teacher-stage-glow,
  .teacher-violin-mark,
  .teacher-bow-mark,
  .teacher-figure {
    display: none;
  }

  .teacher-speech-bubble {
    position: static;
    width: auto;
    padding: 0.52rem;
  }

  .teacher-speech-bubble p {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .upload-zone > p,
  .upload-zone > strong,
  .upload-icon {
    display: none;
  }

  .upload-zone {
    min-height: auto;
    padding: 0.55rem;
    gap: 0.38rem;
  }

  .teacher-upload-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .teacher-upload-fields label > span {
    display: none;
  }

  .select-like {
    min-height: 2.2rem;
  }

  .teacher-file-pill {
    padding: 0.42rem 0.58rem;
  }

  .teacher-file-pill span {
    font-size: 0.82rem;
  }

  .teacher-file-pill b {
    font-size: 0.76rem;
  }

  .teacher-analyze-btn {
    min-height: 2.15rem;
  }

  .teacher-onepage-report .report-score {
    display: none;
  }

  .teacher-onepage-report .stack {
    gap: 0.36rem;
  }

  .teacher-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .teacher-report-grid .teacher-report-card:nth-child(n + 3),
  .teacher-onepage-report .report-line:last-child {
    display: none;
  }

  .teacher-onepage-report .report-line:first-child {
    display: none;
  }

  .teacher-report-card {
    padding: 0.5rem;
  }

  .teacher-report-card p,
  .teacher-onepage-report .report-line p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .portal-card,
  .dashboard-card,
  .home-hero,
  .home-studio,
  .feature-card,
  .quick-panel,
  .teacher-guide {
    animation: platformFade 260ms ease both;
  }
}

@media (min-width: 1081px) {
  html[data-active-module] .content-grid[data-module="teacher"] {
    grid-template-columns: minmax(21rem, 24rem) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
  }

  html[data-active-module] .content-grid[data-module="teacher"] > .panel.teacher-workbench-chat:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  html[data-active-module] .content-grid[data-module="teacher"] > .panel.teacher-workbench-tools:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    overflow: hidden;
  }
}

@media (max-width: 1280px) and (min-width: 1081px) {
  .teacher-workbench-body {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    overflow: auto;
  }

  .teacher-material-preview,
  .teacher-conclusion-card,
  .teacher-quick-actions {
    grid-column: auto;
    grid-row: auto;
  }

  .teacher-quick-entry-grid,
  .teacher-frame-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teacher-error-list,
  .teacher-task-list {
    grid-template-columns: 1fr;
  }

  .teacher-score-sheet {
    min-height: 5.7rem;
  }

  .teacher-action-row .glass-button {
    flex-basis: calc(25% - 0.45rem);
  }

  .teacher-workflow-grid {
    grid-template-rows: minmax(0, 1.08fr) minmax(0, 0.62fr) minmax(0, 0.34fr);
  }
}

@media (max-width: 1080px) {
  .content-grid[data-module="teacher"] {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="teacher"] .teacher-answer-layout {
    grid-template-columns: 1fr;
  }

  .teacher-workbench-chat,
  .teacher-workbench-tools {
    grid-column: span 12;
  }

  .teacher-workbench-left,
  .teacher-workflow-grid {
    grid-template-rows: none;
  }

  .teacher-error-list,
  .teacher-task-list,
  .teacher-workbench-body,
  .teacher-quick-entry-grid,
  .teacher-frame-grid {
    grid-template-columns: 1fr;
  }

  .teacher-workbench-body {
    grid-template-rows: none;
  }

  .teacher-material-preview,
  .teacher-conclusion-card,
  .teacher-quick-actions {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 720px) {
  .teacher-workbench-chat,
  .teacher-workbench-tools {
    padding: 0.7rem;
  }

  .ai-teacher-chat-panel {
    min-height: 38rem;
  }

  .teacher-chat-stream {
    max-height: 18rem;
  }

  .teacher-avatar-status {
    min-height: 10.625rem;
    padding: 0.62rem;
  }

  .teacher-avatar-copy {
    width: 54%;
  }

  .teacher-avatar-copy h3 {
    font-size: 0.98rem;
  }

  .teacher-avatar-copy > p:last-child {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .teacher-avatar-stage {
    right: -2.65rem;
    bottom: -1rem;
    width: 54%;
    height: 12.4rem;
  }

  .avatar-png-body {
    transform: translate3d(-0.1rem, 0.34rem, 0) scale(1.08);
  }

  .teacher-text-row {
    grid-template-columns: 1fr;
  }

  .membership-plan-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .membership-one-screen .panel-header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .membership-one-screen .panel-header > div:first-child {
    grid-template-columns: 1fr;
    gap: 0.26rem;
  }

  .membership-one-screen .panel-header h3 {
    line-height: 1.1;
    writing-mode: horizontal-tb;
  }

  .membership-current-pill {
    flex-wrap: wrap;
    justify-self: stretch;
  }

  .membership-price {
    grid-column: 1;
    grid-row: auto;
    justify-content: center;
  }

  .membership-upgrade-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.22rem;
  }

  .content-grid[data-module="membership"] {
    height: calc(100dvh - var(--page-pad-y) * 2 - var(--avatar-size) - clamp(0.75rem, 1.1vw, 1rem) - 0.25rem);
  }

  .content-grid[data-module="membership"] > .membership-one-screen {
    grid-template-rows: auto minmax(1.45rem, auto) auto minmax(0, 1fr);
    gap: 0.1rem;
    padding: 0.22rem 0.3rem;
  }

  .content-grid[data-module="membership"] .membership-plan-grid {
    gap: 0.14rem;
  }

  .content-grid[data-module="membership"] .membership-plan-card {
    gap: 0.08rem;
    padding: 0.16rem 0.22rem;
  }

  .content-grid[data-module="membership"] .membership-plan-copy {
    display: contents;
  }

  .content-grid[data-module="membership"] .membership-price {
    padding-top: 0;
    transform: none;
  }

  .content-grid[data-module="membership"] .membership-price strong {
    font-size: clamp(1.46rem, 2.05vw, 1.95rem);
  }

  .content-grid[data-module="membership"] .membership-comparison-row > * {
    min-height: 0.82rem;
    padding: 0.04rem 0.08rem;
  }

  .teacher-upload-bar {
    margin-right: -0.7rem;
    padding-right: 0.7rem;
  }

  .teacher-annotation-tags {
    grid-template-columns: 1fr;
  }

  .teacher-empty-workbench {
    align-content: start;
  }

  .teacher-workbench-chat .panel-header .muted,
  .teacher-workbench-tools .panel-header .muted,
  .teacher-workbench-tools .panel-header .chip {
    display: none;
  }

  .teacher-video-window {
    min-height: 10.5rem;
  }

  .teacher-video-window .teacher-stage-glow {
    display: block;
  }

  .teacher-video-window .teacher-figure {
    display: grid;
  }

  .teacher-video-window .teacher-figure {
    width: 5.4rem;
    min-height: 7.2rem;
  }

  .teacher-video-window .teacher-head {
    width: 4.1rem;
    height: 4.6rem;
  }

  .teacher-video-window .teacher-body {
    width: 5.2rem;
    height: 3.2rem;
  }

  .teacher-video-window .teacher-violin-mark,
  .teacher-video-window .teacher-bow-mark {
    display: none;
  }

  .teacher-video-window > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .teacher-dialogue-log article:nth-child(3) {
    display: none;
  }

  .teacher-input-dock {
    grid-template-columns: 1fr;
  }

  .teacher-message-row,
  .teacher-upload-actions,
  .teacher-file-status {
    grid-column: auto;
  }

  .teacher-file-status {
    flex-direction: column;
    align-items: stretch;
  }

  .teacher-score-sheet {
    min-height: 8.75rem;
  }

  .score-measure-note {
    left: calc(4% + var(--measure-index) * 29%);
    width: min(7rem, 30%);
    padding: 0.42rem 0.46rem;
  }

  .score-measure-note p {
    font-size: 0.74rem;
  }

  .teacher-action-row .glass-button {
    flex-basis: calc(50% - 0.45rem);
  }

  .teacher-report-compare {
    flex-direction: column;
  }
}

/* Practice report: Apple-style progressive disclosure */
.content-grid[data-module="reports"] {
  gap: clamp(1.15rem, 1.8vw, 2rem);
  align-content: start;
}

.content-grid[data-module="reports"] > .panel {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.content-grid[data-module="reports"] .report-lesson-summary,
.content-grid[data-module="reports"] .report-focus-panel,
.content-grid[data-module="reports"] .report-soft-data {
  overflow: visible;
  padding: 0;
}

.content-grid[data-module="reports"] .report-lesson-summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13.5rem, 0.25fr);
  gap: clamp(1.5rem, 3vw, 3.25rem);
  align-items: center;
  min-height: clamp(18rem, 30vw, 27rem);
  padding: clamp(2rem, 4.2vw, 4.8rem) clamp(1.5rem, 4vw, 4.4rem);
  border-radius: clamp(1.4rem, 2vw, 2rem);
  background:
    radial-gradient(circle at 72% 36%, rgba(228, 199, 127, 0.16), transparent 31%),
    radial-gradient(circle at 20% 12%, rgba(140, 233, 242, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: 0 2.2rem 5rem rgba(0, 0, 0, 0.18);
}

.content-grid[data-module="reports"] .report-summary-copy {
  display: grid;
  gap: clamp(0.8rem, 1.2vw, 1.15rem);
}

.content-grid[data-module="reports"] .report-summary-copy .eyebrow,
.content-grid[data-module="reports"] .report-panel-title .eyebrow {
  color: rgba(228, 199, 127, 0.86);
  letter-spacing: 0.12em;
}

.content-grid[data-module="reports"] .report-summary-copy h3 {
  max-width: 54rem;
  margin: 0;
  color: rgba(248, 251, 253, 0.96);
  font-size: clamp(2rem, 4.4vw, 4.8rem);
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.08;
}

.report-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.report-hero-meta span {
  padding: 0.42rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(224, 233, 239, 0.66);
  font-size: clamp(0.78rem, 0.92vw, 0.88rem);
}

.content-grid[data-module="reports"] .report-score-side {
  display: grid;
  justify-items: center;
  gap: clamp(0.82rem, 1.15vw, 1.05rem);
}

.report-score-orb {
  position: relative;
  display: grid;
  width: clamp(8.8rem, 12vw, 11rem);
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  gap: 0.24rem;
  border: 1px solid rgba(228, 199, 127, 0.16);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(228, 199, 127, 0.18), transparent 58%),
    rgba(255, 255, 255, 0.045);
  box-shadow:
    0 0 4rem rgba(228, 199, 127, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.report-score-orb span {
  color: rgba(224, 233, 239, 0.62);
  font-size: 0.76rem;
}

.report-score-orb strong {
  color: var(--gold);
  font-size: clamp(3rem, 5.6vw, 4.8rem);
  line-height: 0.9;
  text-shadow: 0 0 2.4rem rgba(228, 199, 127, 0.2);
}

.report-main-practice {
  min-width: min(16rem, 100%);
  min-height: 3rem;
  border-color: rgba(228, 199, 127, 0.34);
  background:
    linear-gradient(135deg, rgba(228, 199, 127, 0.34), rgba(140, 233, 242, 0.2)),
    rgba(255, 255, 255, 0.08);
  color: rgba(255, 249, 233, 0.98);
  box-shadow: 0 1.1rem 2.6rem rgba(0, 0, 0, 0.22);
}

.content-grid[data-module="reports"] .report-history-button {
  border: 0;
  background: transparent;
  color: rgba(224, 233, 239, 0.54);
  cursor: pointer;
  font-size: 0.78rem;
}

.content-grid[data-module="reports"] .report-history-button:hover {
  color: var(--gold);
}

.content-grid[data-module="reports"] .report-focus-panel {
  display: grid;
  gap: clamp(0.8rem, 1.2vw, 1.2rem);
}

.content-grid[data-module="reports"] .report-panel-title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.content-grid[data-module="reports"] .report-panel-title h3 {
  margin: 0;
  color: rgba(248, 251, 253, 0.9);
  font-size: clamp(1.05rem, 1.6vw, 1.6rem);
  font-weight: 720;
  letter-spacing: 0;
}

.content-grid[data-module="reports"] .report-focus-grid {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.7rem, 1.1vw, 1rem);
}

.content-grid[data-module="reports"] .report-focus-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.018);
  box-shadow: none;
  transition:
    flex 220ms ease,
    border-radius 220ms ease,
    background 220ms ease,
    border-color 220ms ease;
}

.content-grid[data-module="reports"] .report-focus-card::before {
  content: none;
}

.content-grid[data-module="reports"] .report-focus-card[open] {
  flex: 1.35 1 0;
  border-color: rgba(228, 199, 127, 0.18);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 18% 10%, rgba(228, 199, 127, 0.09), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.02);
}

.content-grid[data-module="reports"] .report-focus-card summary {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.95rem;
  cursor: pointer;
  list-style: none;
}

.content-grid[data-module="reports"] .report-focus-card summary::-webkit-details-marker {
  display: none;
}

.content-grid[data-module="reports"] .report-focus-card summary strong {
  overflow: hidden;
  color: rgba(248, 251, 253, 0.92);
  font-size: clamp(0.9rem, 1.02vw, 1rem);
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-grid[data-module="reports"] .report-focus-card summary i {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(140, 233, 242, 0.08);
}

.content-grid[data-module="reports"] .report-focus-card summary i::before,
.content-grid[data-module="reports"] .report-focus-card summary i::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.48rem;
  height: 1px;
  border-radius: 999px;
  background: rgba(140, 233, 242, 0.8);
  content: "";
  transform: translate(-50%, -50%);
}

.content-grid[data-module="reports"] .report-focus-card summary i::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: opacity 160ms ease;
}

.content-grid[data-module="reports"] .report-focus-card[open] summary i::after {
  opacity: 0;
}

.report-focus-detail {
  display: grid;
  gap: 0.52rem;
  padding: 0 1rem 1rem;
  animation: reportReveal 180ms ease both;
}

.report-focus-detail span {
  color: rgba(224, 233, 239, 0.55);
  font-size: 0.76rem;
}

.report-focus-detail p {
  display: grid;
  gap: 0.16rem;
  margin: 0;
  color: rgba(236, 244, 248, 0.74);
  font-size: 0.82rem;
  line-height: 1.48;
}

.report-focus-detail p b {
  color: rgba(228, 199, 127, 0.86);
  font-size: 0.72rem;
}

.report-problem-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.1rem;
}

.report-ghost-action,
.report-text-action {
  border: 0;
  background: transparent;
  color: rgba(140, 233, 242, 0.82);
  cursor: pointer;
  font: inherit;
}

.report-ghost-action {
  min-height: 2rem;
  padding: 0.35rem 0.66rem;
  border: 1px solid rgba(140, 233, 242, 0.14);
  border-radius: 999px;
  background: rgba(140, 233, 242, 0.045);
  font-size: 0.78rem;
}

.report-text-action {
  justify-self: end;
  padding: 0;
  font-size: 0.78rem;
}

.report-ghost-action:hover,
.report-text-action:hover {
  color: rgba(255, 227, 176, 0.92);
}

.content-grid[data-module="reports"] .report-soft-data {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  gap: clamp(1rem, 1.6vw, 1.5rem);
  align-items: start;
  opacity: 0.82;
}

.content-grid[data-module="reports"] .report-next-plan,
.content-grid[data-module="reports"] .report-trend-panel {
  display: grid;
  gap: 0.72rem;
  min-height: 0;
  padding: clamp(0.8rem, 1.2vw, 1rem);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.026);
}

.content-grid[data-module="reports"] .report-plan-list {
  gap: 0.32rem;
}

.content-grid[data-module="reports"] .report-plan-row {
  grid-template-columns: 1.8rem minmax(0, 1fr) auto;
  min-height: 0;
  padding: 0.34rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.content-grid[data-module="reports"] .report-plan-row + .report-plan-row {
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.content-grid[data-module="reports"] .report-plan-row b {
  width: 1.45rem;
  color: rgba(228, 199, 127, 0.78);
  background: rgba(228, 199, 127, 0.07);
  font-size: 0.76rem;
}

.content-grid[data-module="reports"] .report-plan-row strong {
  color: rgba(248, 251, 253, 0.82);
  font-size: 0.86rem;
}

.content-grid[data-module="reports"] .report-plan-row span {
  color: rgba(224, 233, 239, 0.52);
  font-size: 0.74rem;
}

.content-grid[data-module="reports"] .report-trend-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.content-grid[data-module="reports"] .report-trend-card {
  gap: 0.22rem;
  padding: 0.34rem 0.2rem;
  border: 0;
  background: transparent;
}

.content-grid[data-module="reports"] .report-trend-card span {
  color: rgba(224, 233, 239, 0.5);
  font-size: 0.72rem;
}

.content-grid[data-module="reports"] .report-trend-card strong {
  color: rgba(248, 251, 253, 0.84);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
}

.content-grid[data-module="reports"] .report-mini-track {
  height: 0.22rem;
  background: rgba(255, 255, 255, 0.055);
}

.content-grid[data-module="reports"] .report-trend-card small {
  color: rgba(140, 233, 242, 0.68);
  font-size: 0.68rem;
}

@media (max-width: 1080px) {
  .content-grid[data-module="reports"] .report-lesson-summary,
  .content-grid[data-module="reports"] .report-soft-data {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="reports"] .report-score-side {
    justify-items: start;
  }

  .content-grid[data-module="reports"] .report-focus-grid {
    flex-direction: column;
  }

  .content-grid[data-module="reports"] .report-focus-card {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="reports"] .report-lesson-summary {
    min-height: 0;
    padding: 1.4rem;
  }

  .content-grid[data-module="reports"] .report-summary-copy h3 {
    font-size: clamp(1.65rem, 9vw, 2.8rem);
  }

  .report-score-orb {
    width: 7.4rem;
  }

  .content-grid[data-module="reports"] .report-trend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes reportReveal {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes platformFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Practice report: final Apple-style restraint pass */
.content-grid[data-module="reports"] {
  gap: clamp(0.68rem, 1vw, 1.05rem);
  grid-auto-rows: auto;
  grid-template-rows: none;
}

html[data-active-module] .content-grid[data-module="reports"] {
  overflow: hidden;
  align-content: start;
  grid-auto-rows: auto;
  grid-template-rows: none;
  scrollbar-width: none;
}

html[data-active-module] .content-grid[data-module="reports"]::-webkit-scrollbar {
  display: none;
}

html[data-active-module] .content-grid[data-module="reports"]:has(.report-focus-card[open]) {
  overflow: auto;
  scrollbar-width: thin;
}

.content-grid[data-module="reports"] > .panel:nth-child(1),
.content-grid[data-module="reports"] > .panel:nth-child(2),
.content-grid[data-module="reports"] > .panel:nth-child(3),
.content-grid[data-module="reports"] > .panel:nth-child(4) {
  grid-column: 1 / -1;
  grid-row: auto;
}

.content-grid[data-module="reports"] .report-lesson-summary {
  grid-template-columns: minmax(0, 1fr) minmax(12.75rem, 15.5rem);
  min-height: clamp(11.25rem, 18vw, 15.5rem);
  overflow: hidden;
  padding: clamp(1.2rem, 2.35vw, 2.55rem);
}

.content-grid[data-module="reports"] .report-summary-copy {
  max-width: 100%;
}

.content-grid[data-module="reports"] .report-summary-copy h3 {
  max-width: min(58rem, 100%);
  font-size: clamp(1.7rem, 2.82vw, 2.95rem);
  font-weight: 730;
  line-height: 1.1;
  text-wrap: balance;
}

.content-grid[data-module="reports"] .report-score-side {
  width: 100%;
  min-width: 0;
}

.report-score-orb {
  width: clamp(6.95rem, 8.4vw, 8.05rem);
}

.report-score-orb strong {
  font-size: clamp(2.45rem, 3.65vw, 3.25rem);
}

.report-main-practice {
  width: 100%;
  min-width: 0;
  min-height: 3.15rem;
  padding: 0.72rem 0.9rem;
  border-radius: 1rem;
  font-weight: 720;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

.content-grid[data-module="reports"] .report-focus-panel {
  gap: 0.68rem;
}

.content-grid[data-module="reports"] .report-focus-panel:has(.report-focus-card[open]) {
  min-height: 18rem;
}

.content-grid[data-module="reports"] .report-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.content-grid[data-module="reports"] .report-focus-card {
  display: block;
  grid-template-rows: none;
}

.content-grid[data-module="reports"] .report-panel-title h3 {
  font-size: clamp(0.98rem, 1.24vw, 1.25rem);
}

.content-grid[data-module="reports"] .report-focus-card summary {
  min-height: 2.85rem;
  padding: 0.66rem 0.85rem;
}

.content-grid[data-module="reports"] .report-focus-card summary strong {
  font-size: clamp(0.84rem, 0.95vw, 0.96rem);
}

.report-focus-detail {
  gap: 0.42rem;
  padding: 0 0.9rem 0.86rem;
}

.report-focus-detail p {
  font-size: 0.78rem;
}

.content-grid[data-module="reports"] .report-soft-data {
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.68fr);
  gap: clamp(0.75rem, 1.1vw, 1rem);
}

.content-grid[data-module="reports"] .report-next-plan,
.content-grid[data-module="reports"] .report-trend-panel {
  gap: 0.38rem;
  padding: clamp(0.62rem, 0.9vw, 0.78rem);
}

.content-grid[data-module="reports"] .report-plan-list {
  gap: 0;
}

.content-grid[data-module="reports"] .report-plan-row {
  grid-template-columns: 1.45rem minmax(0, 1fr) auto;
  gap: 0.42rem;
  padding: 0.14rem 0;
}

.content-grid[data-module="reports"] .report-plan-row b {
  width: 1.18rem;
  font-size: 0.66rem;
}

.content-grid[data-module="reports"] .report-plan-row strong {
  font-size: 0.78rem;
}

.content-grid[data-module="reports"] .report-plan-row span {
  font-size: 0.68rem;
  line-height: 1.28;
}

@media (max-width: 1080px) {
  .content-grid[data-module="reports"] .report-lesson-summary {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="reports"] .report-score-side {
    max-width: 18rem;
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="reports"] .report-summary-copy h3 {
    font-size: clamp(1.55rem, 8vw, 2.35rem);
  }

  .report-main-practice {
    white-space: normal;
  }
}

/* Score import: black-gold AI violin product page */
html[data-active-module] .content-grid[data-module="pieces"] {
  overflow: auto;
  align-content: start;
  grid-auto-rows: auto;
  grid-template-rows: none;
  gap: clamp(0.85rem, 1.25vw, 1.35rem);
  scrollbar-width: none;
}

html[data-active-module] .content-grid[data-module="pieces"]::-webkit-scrollbar {
  display: none;
}

.content-grid[data-module="pieces"] > .score-import-hero,
.content-grid[data-module="pieces"] > .score-import-main,
.content-grid[data-module="pieces"] > .score-import-features,
.content-grid[data-module="pieces"] > .score-import-flow {
  grid-column: 1 / -1;
  grid-row: auto;
}

.score-import-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: end;
  min-height: clamp(7.2rem, 11vw, 10rem);
  padding: clamp(1.1rem, 2vw, 1.8rem) clamp(1.05rem, 2.2vw, 2rem);
  border: 1px solid rgba(228, 199, 127, 0.1);
  border-radius: clamp(1.1rem, 1.6vw, 1.55rem);
  background:
    radial-gradient(circle at 82% 18%, rgba(228, 199, 127, 0.12), transparent 28%),
    radial-gradient(circle at 14% 80%, rgba(140, 233, 242, 0.075), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.026)),
    rgba(3, 6, 10, 0.66);
  box-shadow: 0 1.8rem 4.8rem rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(22px);
}

.score-import-title {
  display: grid;
  gap: 0.45rem;
}

.score-import-title h3 {
  max-width: 60rem;
  margin: 0;
  color: rgba(250, 252, 252, 0.98);
  font-size: clamp(2rem, 3.85vw, 4.25rem);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1.02;
  text-wrap: balance;
}

.score-import-title p:not(.eyebrow) {
  max-width: 44rem;
  margin: 0;
  color: rgba(224, 233, 239, 0.66);
  font-size: clamp(0.88rem, 1.15vw, 1.08rem);
  line-height: 1.58;
}

.score-import-quota {
  display: grid;
  justify-items: end;
  gap: 0.1rem;
  min-width: 6.2rem;
  padding: 0.62rem 0.82rem;
  border: 1px solid rgba(228, 199, 127, 0.2);
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.045);
}

.score-import-quota span {
  color: rgba(224, 233, 239, 0.58);
  font-size: 0.68rem;
}

.score-import-quota strong {
  color: var(--gold);
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  line-height: 0.95;
  text-shadow: 0 0 1.7rem rgba(228, 199, 127, 0.2);
}

.score-import-main {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(19rem, 0.8fr);
  gap: clamp(0.9rem, 1.4vw, 1.35rem);
  align-items: stretch;
}

.score-upload-spotlight,
.score-result-preview,
.score-import-features article,
.score-import-flow {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.024)),
    rgba(4, 7, 11, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 1.6rem 4rem rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(24px);
}

.score-upload-spotlight {
  position: relative;
  display: grid;
  min-height: clamp(24rem, 37vw, 35rem);
  overflow: hidden;
  place-items: center;
  align-content: center;
  gap: clamp(0.8rem, 1.25vw, 1.15rem);
  padding: clamp(1.4rem, 3vw, 3rem);
  border-color: rgba(228, 199, 127, 0.18);
  border-radius: clamp(1.3rem, 2vw, 2rem);
  background:
    radial-gradient(circle at 50% 42%, rgba(228, 199, 127, 0.18), transparent 28%),
    radial-gradient(circle at 34% 68%, rgba(140, 233, 242, 0.105), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.024)),
    rgba(2, 5, 9, 0.76);
  text-align: center;
  isolation: isolate;
}

.score-upload-spotlight::before {
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(228, 199, 127, 0.1);
  border-radius: calc(clamp(1.3rem, 2vw, 2rem) - 0.35rem);
  background:
    linear-gradient(90deg, transparent 0 49.85%, rgba(228, 199, 127, 0.08) 50%, transparent 50.15%),
    linear-gradient(180deg, transparent 0 49.85%, rgba(228, 199, 127, 0.055) 50%, transparent 50.15%);
  opacity: 0.58;
  content: "";
  pointer-events: none;
}

.score-upload-orbit {
  position: absolute;
  width: min(45rem, 82%);
  aspect-ratio: 1.75;
  border: 1px solid rgba(228, 199, 127, 0.12);
  border-radius: 50%;
  transform: rotate(-7deg);
}

.score-upload-staff {
  position: absolute;
  inset: 20% 9% auto;
  height: 38%;
  opacity: 0.56;
  transform: perspective(900px) rotateX(52deg) rotateZ(-3deg);
}

.score-upload-staff span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 235, 184, 0.5), transparent);
}

.score-upload-staff span:nth-child(1) { top: 16%; }
.score-upload-staff span:nth-child(2) { top: 31%; }
.score-upload-staff span:nth-child(3) { top: 46%; }
.score-upload-staff span:nth-child(4) { top: 61%; }
.score-upload-staff span:nth-child(5) { top: 76%; }

.score-upload-staff i {
  position: absolute;
  width: clamp(1rem, 1.7vw, 1.45rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(228, 199, 127, 0.42);
  box-shadow: 0 0 1.4rem rgba(228, 199, 127, 0.18);
}

.score-upload-staff i:nth-of-type(1) { left: 22%; top: 42%; }
.score-upload-staff i:nth-of-type(2) { left: 49%; top: 27%; }
.score-upload-staff i:nth-of-type(3) { left: 72%; top: 56%; }

.score-upload-violin {
  position: absolute;
  right: 8%;
  bottom: 8%;
  width: clamp(8.8rem, 15vw, 15rem);
  height: clamp(10rem, 16vw, 16rem);
  opacity: 0.2;
  transform: rotate(18deg);
}

.score-upload-violin i,
.score-upload-violin b,
.score-upload-violin em {
  position: absolute;
  display: block;
}

.score-upload-violin i {
  left: 28%;
  top: 12%;
  width: 40%;
  height: 58%;
  border: 1px solid rgba(228, 199, 127, 0.55);
  border-radius: 48% 48% 42% 42%;
}

.score-upload-violin b {
  left: 46%;
  top: 0;
  width: 0.18rem;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 235, 184, 0.5);
}

.score-upload-violin em {
  left: 9%;
  top: 51%;
  width: 82%;
  height: 1px;
  border-radius: 999px;
  background: rgba(140, 233, 242, 0.45);
  transform: rotate(-28deg);
}

.score-upload-cloud {
  position: relative;
  z-index: 2;
  display: grid;
  width: clamp(5.8rem, 8.2vw, 8rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.2);
  border-radius: 34%;
  background:
    radial-gradient(circle at 38% 22%, rgba(255, 255, 255, 0.23), transparent 22%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(228, 199, 127, 0.07)),
    rgba(16, 19, 23, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1.5rem 4rem rgba(0, 0, 0, 0.32),
    0 0 3.2rem rgba(228, 199, 127, 0.1);
}

.score-upload-cloud span {
  position: relative;
  width: 2.25rem;
  height: 1.38rem;
  border: 2px solid rgba(255, 227, 176, 0.82);
  border-top-color: transparent;
  border-radius: 0 0 1.6rem 1.6rem;
}

.score-upload-cloud span::before,
.score-upload-cloud span::after {
  position: absolute;
  content: "";
}

.score-upload-cloud span::before {
  left: 50%;
  bottom: 0.18rem;
  width: 1px;
  height: 1.45rem;
  border-radius: 999px;
  background: rgba(255, 227, 176, 0.86);
  transform: translateX(-50%);
}

.score-upload-cloud span::after {
  left: 50%;
  top: -0.22rem;
  width: 0.65rem;
  height: 0.65rem;
  border-top: 2px solid rgba(255, 227, 176, 0.86);
  border-left: 2px solid rgba(255, 227, 176, 0.86);
  transform: translateX(-50%) rotate(45deg);
}

.score-upload-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.36rem;
}

.score-upload-copy h4 {
  margin: 0;
  color: rgba(250, 252, 252, 0.96);
  font-size: clamp(1.65rem, 3.2vw, 3.4rem);
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1;
}

.score-upload-copy p:not(.eyebrow) {
  margin: 0;
  color: rgba(224, 233, 239, 0.62);
  font-size: clamp(0.86rem, 1vw, 1rem);
}

.score-upload-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  padding-top: 0.35rem;
}

.score-upload-primary,
.score-upload-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 720;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.score-upload-primary {
  min-width: 9.8rem;
  padding: 0.74rem 1.2rem;
  border: 1px solid rgba(228, 199, 127, 0.46);
  background:
    linear-gradient(135deg, rgba(228, 199, 127, 0.48), rgba(228, 199, 127, 0.18)),
    rgba(255, 255, 255, 0.08);
  color: rgba(255, 249, 233, 0.98);
  box-shadow: 0 0.9rem 2.2rem rgba(0, 0, 0, 0.24), 0 0 2rem rgba(228, 199, 127, 0.12);
}

.score-upload-secondary {
  min-width: 8.5rem;
  padding: 0.68rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.052);
  color: rgba(224, 233, 239, 0.76);
}

.score-upload-primary:hover,
.score-upload-secondary:hover {
  transform: translateY(-1px);
}

.score-upload-secondary:hover {
  border-color: rgba(140, 233, 242, 0.26);
  color: rgba(140, 233, 242, 0.94);
}

.score-result-preview {
  display: grid;
  gap: clamp(0.75rem, 1vw, 1rem);
  align-content: start;
  padding: clamp(0.9rem, 1.35vw, 1.2rem);
  border-radius: clamp(1.1rem, 1.55vw, 1.45rem);
}

.score-preview-head {
  display: grid;
  gap: 0.2rem;
}

.score-preview-head h3 {
  margin: 0;
  color: rgba(248, 251, 253, 0.92);
  font-size: clamp(1rem, 1.25vw, 1.22rem);
  font-weight: 720;
}

.score-preview-card {
  display: grid;
  gap: 0.62rem;
  min-height: clamp(12rem, 16.5vw, 15rem);
  overflow: hidden;
  padding: 0.74rem;
  border: 1px solid rgba(228, 199, 127, 0.12);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 84% 20%, rgba(228, 199, 127, 0.1), transparent 28%),
    rgba(255, 255, 255, 0.038);
}

.score-preview-card-title {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
}

.score-preview-card-title strong {
  color: rgba(248, 251, 253, 0.92);
  font-size: 0.95rem;
}

.score-preview-card-title span {
  color: rgba(224, 233, 239, 0.52);
  font-size: 0.72rem;
}

.score-editor-mini,
.score-practice-mini {
  position: relative;
  display: grid;
  min-height: 9.2rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 0.82rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.022)),
    rgba(1, 4, 8, 0.72);
}

.score-editor-mini-toolbar {
  display: flex;
  gap: 0.34rem;
  align-items: center;
  height: 2rem;
  padding: 0 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.score-editor-mini-toolbar span {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: rgba(228, 199, 127, 0.55);
}

.score-editor-mini-toolbar b {
  display: grid;
  width: 1.35rem;
  height: 1.1rem;
  margin-left: 0.15rem;
  place-items: center;
  border-radius: 0.28rem;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(140, 233, 242, 0.82);
  font-size: 0.72rem;
}

.score-editor-mini-page {
  display: grid;
  gap: 0.48rem;
  padding: 0.62rem;
}

.score-editor-mini-staff {
  position: relative;
  min-height: 4.55rem;
  border-radius: 0.62rem;
  background: rgba(255, 255, 255, 0.035);
}

.score-editor-mini-staff span {
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  height: 1px;
  background: rgba(255, 235, 184, 0.24);
}

.score-editor-mini-staff span:nth-child(1) { top: 18%; }
.score-editor-mini-staff span:nth-child(2) { top: 34%; }
.score-editor-mini-staff span:nth-child(3) { top: 50%; }
.score-editor-mini-staff span:nth-child(4) { top: 66%; }
.score-editor-mini-staff span:nth-child(5) { top: 82%; }

.score-editor-mini-staff i {
  position: absolute;
  width: 0.7rem;
  height: 0.52rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0.9rem rgba(228, 199, 127, 0.18);
}

.score-editor-mini-controls {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  gap: 0.44rem;
  align-items: center;
}

.score-editor-mini-controls em,
.score-editor-mini-controls strong {
  display: block;
  height: 0.34rem;
  border-radius: 999px;
  background: rgba(140, 233, 242, 0.22);
}

.score-editor-mini-controls strong {
  background: linear-gradient(90deg, rgba(140, 233, 242, 0.56), rgba(228, 199, 127, 0.55));
}

.score-practice-mini {
  grid-template-columns: 1fr 5.2rem;
  grid-template-rows: minmax(0, 1fr) auto;
}

.score-practice-waterfall {
  position: relative;
  min-height: 7rem;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 25% 100%,
    linear-gradient(180deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 100% 22%;
}

.score-practice-waterfall span {
  position: absolute;
  width: 1.05rem;
  height: 2.55rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(140, 233, 242, 0.88), rgba(140, 233, 242, 0.2));
}

.score-practice-waterfall span:nth-child(1) { left: 16%; top: 7%; }
.score-practice-waterfall span:nth-child(2) { left: 36%; top: 30%; background: linear-gradient(180deg, rgba(228, 199, 127, 0.92), rgba(228, 199, 127, 0.2)); }
.score-practice-waterfall span:nth-child(3) { left: 58%; top: 14%; }
.score-practice-waterfall span:nth-child(4) { left: 78%; top: 42%; background: linear-gradient(180deg, rgba(228, 199, 127, 0.92), rgba(228, 199, 127, 0.2)); }

.score-practice-waterfall i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(228, 199, 127, 0.82), transparent);
  box-shadow: 0 0 1rem rgba(228, 199, 127, 0.24);
}

.score-practice-violin {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 7rem;
}

.score-practice-violin b {
  width: 2.6rem;
  height: 4.2rem;
  border: 1px solid rgba(228, 199, 127, 0.38);
  border-radius: 50% 50% 44% 44%;
}

.score-practice-violin em {
  position: absolute;
  width: 3.7rem;
  height: 1px;
  background: rgba(140, 233, 242, 0.55);
  transform: rotate(-28deg);
}

.score-practice-controls {
  display: flex;
  grid-column: 1 / -1;
  gap: 0.4rem;
  padding: 0.48rem;
}

.score-practice-controls span {
  flex: 1;
  padding: 0.32rem 0.36rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.052);
  color: rgba(224, 233, 239, 0.66);
  font-size: 0.64rem;
  text-align: center;
}

.score-import-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.65rem, 1vw, 0.95rem);
}

.score-import-features article {
  display: grid;
  gap: 0.34rem;
  min-height: 7rem;
  padding: clamp(0.82rem, 1.2vw, 1rem);
  border-radius: 1rem;
}

.score-import-features span {
  color: rgba(228, 199, 127, 0.7);
  font-size: 0.72rem;
  font-weight: 760;
}

.score-import-features strong {
  color: rgba(248, 251, 253, 0.88);
  font-size: 0.98rem;
}

.score-import-features p {
  margin: 0;
  color: rgba(224, 233, 239, 0.54);
  font-size: 0.78rem;
  line-height: 1.48;
}

.score-import-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: 999px;
  opacity: 0.78;
}

.score-import-flow article {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 3.1rem;
  background: rgba(255, 255, 255, 0.032);
}

.score-import-flow article::after {
  position: absolute;
  right: -0.5rem;
  width: 1rem;
  height: 1px;
  background: rgba(228, 199, 127, 0.28);
  content: "";
}

.score-import-flow article:last-child::after {
  content: none;
}

.score-import-flow article.is-active {
  background: rgba(228, 199, 127, 0.075);
}

.score-import-flow span {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border: 1px solid rgba(228, 199, 127, 0.24);
  border-radius: 50%;
  color: rgba(228, 199, 127, 0.82);
  font-size: 0.7rem;
}

.score-import-flow strong {
  color: rgba(224, 233, 239, 0.62);
  font-size: 0.82rem;
}

@media (max-width: 1180px) {
  .score-import-main {
    grid-template-columns: 1fr;
  }

  .score-result-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .score-preview-head {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .score-import-hero,
  .score-import-main,
  .score-import-features,
  .score-import-flow {
    grid-template-columns: 1fr;
  }

  .score-import-quota {
    justify-items: start;
  }

  .score-result-preview {
    grid-template-columns: 1fr;
  }

  .score-upload-spotlight {
    min-height: 28rem;
  }

  .score-import-flow {
    border-radius: 1rem;
  }
}

/* Score import: one-screen high-end composition */
html[data-active-module] .content-grid[data-module="pieces"] {
  height: 100%;
  overflow: hidden;
  gap: clamp(0.55rem, 0.82vw, 0.78rem);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.content-grid[data-module="pieces"] .score-import-hero {
  min-height: 0;
  padding: clamp(0.72rem, 1.25vw, 1.05rem) clamp(0.95rem, 1.8vw, 1.55rem);
  align-items: center;
}

.content-grid[data-module="pieces"] .score-import-title {
  gap: 0.22rem;
}

.content-grid[data-module="pieces"] .score-import-title h3 {
  max-width: 58rem;
  font-size: clamp(1.9rem, 3.35vw, 3.72rem);
  line-height: 1.01;
}

.content-grid[data-module="pieces"] .score-import-title p:not(.eyebrow) {
  max-width: 50rem;
  font-size: clamp(0.76rem, 0.92vw, 0.94rem);
  line-height: 1.34;
}

.content-grid[data-module="pieces"] .score-import-title .eyebrow {
  margin-bottom: 0.12rem;
}

.content-grid[data-module="pieces"] .score-import-quota {
  padding: 0.5rem 0.72rem;
}

.content-grid[data-module="pieces"] .score-import-quota strong {
  font-size: clamp(1.12rem, 1.6vw, 1.45rem);
}

.content-grid[data-module="pieces"] .score-import-main {
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(0, 1.96fr) minmax(18rem, 0.76fr);
  gap: clamp(0.62rem, 0.95vw, 0.9rem);
}

.content-grid[data-module="pieces"] .score-upload-spotlight {
  min-height: 0;
  height: 100%;
  gap: clamp(0.42rem, 0.7vw, 0.64rem);
  padding: clamp(1rem, 2.1vw, 1.9rem);
  border-radius: clamp(1.05rem, 1.5vw, 1.45rem);
}

.content-grid[data-module="pieces"] .score-upload-spotlight::before {
  inset: 0.72rem;
  border-radius: 1rem;
}

.content-grid[data-module="pieces"] .score-upload-orbit {
  width: min(39rem, 84%);
}

.content-grid[data-module="pieces"] .score-upload-staff {
  inset: 15% 9% auto;
  height: 40%;
}

.content-grid[data-module="pieces"] .score-upload-violin {
  right: 8%;
  bottom: 5%;
  width: clamp(7rem, 12vw, 11rem);
  height: clamp(8rem, 13vw, 12rem);
  opacity: 0.18;
}

.content-grid[data-module="pieces"] .score-upload-cloud {
  width: clamp(4.65rem, 6.2vw, 6.1rem);
}

.content-grid[data-module="pieces"] .score-upload-cloud span {
  width: 1.9rem;
  height: 1.14rem;
}

.content-grid[data-module="pieces"] .score-upload-copy {
  gap: 0.18rem;
}

.content-grid[data-module="pieces"] .score-upload-copy h4 {
  font-size: clamp(1.45rem, 2.58vw, 2.75rem);
}

.content-grid[data-module="pieces"] .score-upload-copy p:not(.eyebrow) {
  font-size: clamp(0.74rem, 0.88vw, 0.86rem);
}

.content-grid[data-module="pieces"] .score-upload-actions {
  gap: 0.48rem;
  padding-top: 0.16rem;
}

.content-grid[data-module="pieces"] .score-upload-primary,
.content-grid[data-module="pieces"] .score-upload-secondary {
  min-height: 2.34rem;
  font-size: 0.84rem;
}

.content-grid[data-module="pieces"] .score-upload-primary {
  min-width: 8.7rem;
  padding: 0.58rem 1rem;
}

.content-grid[data-module="pieces"] .score-upload-secondary {
  min-width: 7.8rem;
  padding: 0.54rem 0.82rem;
}

.content-grid[data-module="pieces"] .score-result-preview {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  gap: 0.48rem;
  padding: 0.68rem;
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
}

.content-grid[data-module="pieces"] .score-preview-head {
  gap: 0.1rem;
}

.content-grid[data-module="pieces"] .score-preview-head h3 {
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
}

.content-grid[data-module="pieces"] .score-preview-card {
  min-height: 0;
  height: 100%;
  gap: 0.36rem;
  padding: 0.52rem;
  border-radius: 0.82rem;
}

.content-grid[data-module="pieces"] .score-preview-card-title strong {
  font-size: 0.82rem;
}

.content-grid[data-module="pieces"] .score-preview-card-title span {
  font-size: 0.64rem;
}

.content-grid[data-module="pieces"] .score-editor-mini,
.content-grid[data-module="pieces"] .score-practice-mini {
  min-height: 0;
  height: 100%;
  border-radius: 0.68rem;
}

.content-grid[data-module="pieces"] .score-editor-mini-toolbar {
  height: 1.45rem;
  padding: 0 0.45rem;
}

.content-grid[data-module="pieces"] .score-editor-mini-toolbar b {
  width: 1.1rem;
  height: 0.9rem;
  font-size: 0.62rem;
}

.content-grid[data-module="pieces"] .score-editor-mini-page {
  gap: 0.32rem;
  padding: 0.42rem;
}

.content-grid[data-module="pieces"] .score-editor-mini-staff {
  min-height: 3rem;
}

.content-grid[data-module="pieces"] .score-editor-mini-controls {
  grid-template-columns: 1.45rem 1fr 1.45rem;
  gap: 0.3rem;
}

.content-grid[data-module="pieces"] .score-practice-mini {
  grid-template-columns: 1fr 4.2rem;
}

.content-grid[data-module="pieces"] .score-practice-waterfall,
.content-grid[data-module="pieces"] .score-practice-violin {
  min-height: 0;
}

.content-grid[data-module="pieces"] .score-practice-controls {
  gap: 0.25rem;
  padding: 0.34rem;
}

.content-grid[data-module="pieces"] .score-practice-controls span {
  padding: 0.24rem 0.28rem;
  font-size: 0.58rem;
}

.content-grid[data-module="pieces"] .score-import-features {
  gap: clamp(0.45rem, 0.75vw, 0.68rem);
}

.content-grid[data-module="pieces"] .score-import-features article {
  min-height: 0;
  gap: 0.16rem;
  padding: clamp(0.52rem, 0.78vw, 0.68rem);
  border-radius: 0.82rem;
}

.content-grid[data-module="pieces"] .score-import-features span {
  font-size: 0.62rem;
}

.content-grid[data-module="pieces"] .score-import-features strong {
  font-size: 0.82rem;
}

.content-grid[data-module="pieces"] .score-import-features p {
  font-size: 0.67rem;
  line-height: 1.32;
}

.content-grid[data-module="pieces"] .score-import-flow article {
  min-height: 2.22rem;
}

.content-grid[data-module="pieces"] .score-import-flow span {
  width: 1.12rem;
  height: 1.12rem;
  font-size: 0.6rem;
}

.content-grid[data-module="pieces"] .score-import-flow strong {
  font-size: 0.74rem;
}

.content-grid[data-module="pieces"] > .score-import-steps {
  grid-column: 1 / -1;
  grid-row: auto;
}

.score-import-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.82rem, 1.18vw, 1.12rem);
}

.score-step-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(14rem, 1fr) auto;
  min-height: clamp(31rem, 58vh, 40rem);
  overflow: hidden;
  padding: clamp(0.88rem, 1.25vw, 1.15rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(1rem, 1.38vw, 1.28rem);
  background:
    radial-gradient(circle at 56% 26%, rgba(228, 199, 127, 0.12), transparent 32%),
    radial-gradient(circle at 16% 88%, rgba(140, 233, 242, 0.08), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.024)),
    rgba(4, 7, 11, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 1.6rem 4rem rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(24px);
}

.score-step-card > span {
  position: absolute;
  z-index: 4;
  top: 0.92rem;
  left: 0.96rem;
  color: rgba(228, 199, 127, 0.74);
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0.08em;
}

.score-step-card .score-upload-spotlight {
  min-height: 0;
  height: 100%;
  padding: clamp(1.1rem, 1.8vw, 1.7rem);
  border: 0;
  border-radius: 0.82rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(228, 199, 127, 0.16), transparent 30%),
    radial-gradient(circle at 30% 70%, rgba(140, 233, 242, 0.1), transparent 32%),
    rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 0 0 1px rgba(228, 199, 127, 0.1);
}

.score-step-card .score-upload-spotlight::before {
  inset: 0.62rem;
  border-radius: 0.68rem;
}

.score-step-card .score-upload-cloud article {
  position: relative;
  width: 2.25rem;
  height: 1.38rem;
  border: 2px solid rgba(255, 227, 176, 0.82);
  border-top-color: transparent;
  border-radius: 0 0 1.6rem 1.6rem;
}

.score-step-card .score-upload-cloud article::before,
.score-step-card .score-upload-cloud article::after {
  position: absolute;
  content: "";
}

.score-step-card .score-upload-cloud article::before {
  left: 50%;
  bottom: 0.18rem;
  width: 1px;
  height: 1.45rem;
  border-radius: 999px;
  background: rgba(255, 227, 176, 0.86);
  transform: translateX(-50%);
}

.score-step-card .score-upload-cloud article::after {
  left: 50%;
  top: -0.22rem;
  width: 0.65rem;
  height: 0.65rem;
  border-top: 2px solid rgba(255, 227, 176, 0.86);
  border-left: 2px solid rgba(255, 227, 176, 0.86);
  transform: translateX(-50%) rotate(45deg);
}

.score-step-card .score-editor-mini,
.score-step-card .score-practice-mini {
  align-self: stretch;
  min-height: 15rem;
  height: 100%;
  border-radius: 0.82rem;
}

.score-step-card .score-practice-mini {
  grid-template-columns: 1fr 5.2rem;
}

.score-step-copy {
  display: grid;
  gap: 0.34rem;
  align-content: end;
  min-height: 9.4rem;
  padding: clamp(0.76rem, 1vw, 0.95rem) 0.2rem 0.1rem;
}

.score-step-copy h4 {
  margin: 0;
  color: rgba(250, 252, 252, 0.96);
  font-size: 1.6rem;
  font-weight: 780;
  line-height: 1.05;
  letter-spacing: 0;
}

.score-step-copy p:not(.eyebrow) {
  max-width: 27rem;
  margin: 0;
  color: rgba(224, 233, 239, 0.62);
  font-size: 0.86rem;
  line-height: 1.5;
}

.score-step-copy .score-upload-actions {
  justify-content: flex-start;
  padding-top: 0.42rem;
}

.score-step-copy .score-upload-primary,
.score-step-copy .score-upload-secondary {
  min-height: 2.36rem;
  font-size: 0.82rem;
}

.score-step-copy .score-upload-primary {
  min-width: 8.6rem;
  padding: 0.58rem 1rem;
}

.score-step-copy .score-upload-secondary {
  min-width: 9.6rem;
  padding: 0.54rem 0.86rem;
}

@media (max-width: 1180px) {
  html[data-active-module] .content-grid[data-module="pieces"] {
    overflow: auto;
    height: auto;
  }

  .score-import-steps {
    grid-template-columns: 1fr;
  }

  .score-step-card {
    min-height: 26rem;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.82fr);
    grid-template-rows: auto;
    align-items: stretch;
  }
}

@media (max-width: 820px) {
  .content-grid[data-module="pieces"] .score-import-steps {
    grid-template-columns: 1fr;
  }

  .score-step-card {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(13rem, auto) auto;
    min-height: 0;
  }

  .score-step-copy .score-upload-actions {
    justify-content: center;
  }
}

/* AI score import: compact upload-first workflow */
html[data-active-module] .content-grid[data-module="pieces"] {
  height: 100%;
  overflow: hidden;
  gap: clamp(0.48rem, 0.72vw, 0.68rem);
  grid-auto-rows: auto;
  grid-template-rows: auto minmax(19rem, 1fr) auto;
}

@keyframes scoreUploadFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.28rem);
  }
}

@media (max-width: 1180px) {
  html[data-active-module] .content-grid[data-module="pieces"] {
    height: auto;
    overflow: auto;
  }

  .score-import-main-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  html[data-active-module] .content-grid[data-module="pieces"] {
    gap: 0.58rem;
  }

  .content-grid[data-module="pieces"] .score-import-hero {
    grid-template-columns: 1fr;
  }

  .score-upload-command {
    min-height: 18rem;
  }

  .score-upload-copy strong {
    font-size: clamp(1.9rem, 8vw, 2.9rem);
  }

  .score-import-flat-steps {
    grid-template-columns: 1fr;
  }

  .score-import-flat-steps article {
    min-height: 4rem;
  }
}

/* Restore 16:00 portal shell for non-generator pages */
html[data-active-module] .content-grid[data-module="home"] {
  min-height: calc(100dvh - 7.25rem);
  overflow: hidden;
  align-content: start;
  grid-auto-rows: auto;
  grid-template-rows: auto;
}

.content-grid[data-module="home"] .portal-strip {
  grid-column: 1 / -1;
  min-height: calc(100dvh - 7.25rem);
  height: auto;
  padding-bottom: 0;
}

.content-grid[data-module="home"] .portal-card {
  min-height: var(--portal-card-h);
  height: auto;
}

@media (min-width: 1081px) {
  html[data-active-module] .content-grid[data-module="home"] {
    flex: 1 1 auto;
    min-height: 0;
    align-content: stretch;
    grid-template-rows: minmax(0, 1fr);
  }

  .content-grid[data-module="home"] .portal-strip {
    height: 100%;
    min-height: 0;
  }

  .content-grid[data-module="home"] .portal-card {
    height: 100%;
    min-height: 0;
  }
}

/* Restore 16:00 practice-record layout outside the score-generation page. */
html[data-active-module] .content-grid[data-module="reports"] {
  gap: clamp(0.62rem, 0.95vw, 0.9rem);
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
}

.content-grid[data-module="reports"] > .panel {
  overflow: hidden;
  border: 1px solid rgba(175, 206, 220, 0.14);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.024)),
    linear-gradient(180deg, rgba(132, 226, 235, 0.035), transparent 42%),
    rgba(6, 10, 15, 0.6);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(22px);
}

.content-grid[data-module="reports"] .practice-record-hero,
.content-grid[data-module="reports"] .report-old-focus,
.content-grid[data-module="reports"] .report-old-plan,
.content-grid[data-module="reports"] .report-old-trend {
  display: grid;
  min-height: 0;
  gap: clamp(0.55rem, 0.8vw, 0.75rem);
  padding: clamp(0.8rem, 1.08vw, 1rem);
}

.content-grid[data-module="reports"] .practice-record-hero {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.content-grid[data-module="reports"] .report-old-focus {
  grid-template-rows: auto minmax(0, 1fr);
}

.content-grid[data-module="reports"] .report-old-plan,
.content-grid[data-module="reports"] .report-old-trend {
  grid-template-rows: auto minmax(0, 1fr);
}

.content-grid[data-module="reports"] .record-score-grid,
.content-grid[data-module="reports"] .record-summary-grid,
.content-grid[data-module="reports"] .stuck-pattern-grid,
.content-grid[data-module="reports"] .report-trend-compact-grid {
  min-height: 0;
}

.content-grid[data-module="reports"] .record-metric,
.content-grid[data-module="reports"] .practice-progress-card,
.content-grid[data-module="reports"] .practice-history-row,
.content-grid[data-module="reports"] .stuck-pattern-card,
.content-grid[data-module="reports"] .report-trend-card {
  border: 1px solid rgba(255, 255, 255, 0.105);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.14);
  box-shadow: none;
}

.content-grid[data-module="reports"] .report-trend-compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-grid[data-module="reports"] .report-trend-card {
  display: grid;
  gap: 0.22rem;
  padding: clamp(0.5rem, 0.72vw, 0.64rem);
  border-radius: calc(var(--radius) * 0.86);
}

.content-grid[data-module="reports"] .report-trend-card span {
  color: var(--muted);
  font-size: clamp(0.7rem, 0.78vw, 0.78rem);
}

.content-grid[data-module="reports"] .report-trend-card strong {
  color: var(--text);
  font-size: clamp(1.05rem, 1.45vw, 1.36rem);
}

.content-grid[data-module="reports"] .report-mini-track {
  height: 0.32rem;
  background: rgba(255, 255, 255, 0.08);
}

.content-grid[data-module="reports"] .report-recent-list {
  overflow: hidden;
}

.content-grid[data-module="reports"] > .practice-record-one-screen {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.72rem, 0.95vw, 0.9rem);
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: clamp(0.8rem, 1.08vw, 1rem);
  border: 1px solid rgba(175, 206, 220, 0.14);
  border-radius: clamp(0.72rem, 0.95vw, 0.85rem);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.024)),
    linear-gradient(180deg, rgba(132, 226, 235, 0.035), transparent 42%),
    rgba(6, 10, 15, 0.6);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(22px);
}

.content-grid[data-module="reports"] .record-command-bar {
  display: grid;
  grid-template-columns: minmax(17rem, 1.05fr) minmax(28rem, 1.35fr) auto;
  gap: clamp(0.6rem, 0.9vw, 0.86rem);
  align-items: stretch;
  min-height: 0;
}

.content-grid[data-module="reports"] .record-command-bar > div:first-child {
  display: grid;
  align-content: center;
  min-width: 0;
}

.content-grid[data-module="reports"] .record-command-bar h3,
.content-grid[data-module="reports"] .record-section-title h3 {
  color: var(--text);
  font-size: clamp(1.02rem, 1.34vw, 1.28rem);
  line-height: 1.12;
}

.content-grid[data-module="reports"] .record-command-bar p:not(.eyebrow) {
  display: -webkit-box;
  max-width: 40rem;
  margin: 0.28rem 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: clamp(0.76rem, 0.88vw, 0.88rem);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.content-grid[data-module="reports"] .record-command-bar > .glass-button {
  align-self: center;
  min-height: clamp(2.32rem, 3vw, 2.68rem);
  white-space: nowrap;
}

.content-grid[data-module="reports"] .record-score-strip {
  display: grid;
  grid-template-columns: minmax(12.5rem, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(0.42rem, 0.58vw, 0.54rem);
  min-height: 0;
}

.content-grid[data-module="reports"] .record-score-overview,
.content-grid[data-module="reports"] .record-score-support {
  display: grid;
  gap: 0.38rem;
}

.content-grid[data-module="reports"] .record-score-overview .record-metric,
.content-grid[data-module="reports"] .record-score-support .record-metric {
  min-height: clamp(4rem, 6vh, 4.8rem);
  padding: clamp(0.46rem, 0.62vw, 0.56rem);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: clamp(0.58rem, 0.76vw, 0.72rem);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.076), rgba(255, 255, 255, 0.028)),
    rgba(0, 0, 0, 0.14);
}

.content-grid[data-module="reports"] .record-score-overview .record-metric {
  display: grid;
  align-content: center;
  min-height: clamp(8.2rem, 12vh, 10rem);
  padding: 0.64rem 0.72rem;
  border-color: rgba(228, 199, 127, 0.18);
  background:
    radial-gradient(circle at 28% 22%, rgba(228, 199, 127, 0.16), transparent 28%),
    rgba(255, 255, 255, 0.04);
}

.content-grid[data-module="reports"] .record-score-overview .record-metric span {
  color: rgba(255, 235, 179, 0.84);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.content-grid[data-module="reports"] .record-score-overview .record-metric strong {
  color: rgba(255, 240, 205, 0.98);
  font-size: clamp(2.8rem, 4.5vw, 3.8rem);
  line-height: 0.92;
}

.content-grid[data-module="reports"] .record-score-overview .record-metric small {
  color: rgba(220, 229, 230, 0.62);
  font-size: 0.72rem;
}

.content-grid[data-module="reports"] .record-score-support {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.38rem;
}

.content-grid[data-module="reports"] .record-score-support .record-metric strong {
  font-size: clamp(1rem, 1.28vw, 1.22rem);
}

.content-grid[data-module="reports"] .record-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.56fr) minmax(18rem, 0.72fr);
  gap: clamp(0.62rem, 0.84vw, 0.78rem);
  min-height: 0;
  overflow: hidden;
}

.content-grid[data-module="reports"] .record-priority-zone,
.content-grid[data-module="reports"] .record-side-rail,
.content-grid[data-module="reports"] .record-mini-panel {
  min-height: 0;
  overflow: hidden;
}

.content-grid[data-module="reports"] .record-priority-zone,
.content-grid[data-module="reports"] .record-dashboard-grid {
  overflow: visible;
}

.content-grid[data-module="reports"] .record-priority-zone,
.content-grid[data-module="reports"] .record-mini-panel {
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: clamp(0.58rem, 0.76vw, 0.72rem);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.074), rgba(255, 255, 255, 0.026)),
    rgba(0, 0, 0, 0.14);
}

.content-grid[data-module="reports"] .record-priority-zone {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.52rem, 0.7vw, 0.62rem);
  padding: clamp(0.68rem, 0.9vw, 0.82rem);
  border-color: rgba(228, 199, 127, 0.18);
}

.content-grid[data-module="reports"] .record-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 0;
}

.content-grid[data-module="reports"] .record-section-title > span,
.content-grid[data-module="reports"] .record-section-title > strong {
  max-width: 18rem;
  color: var(--muted);
  font-size: clamp(0.76rem, 0.88vw, 0.86rem);
  font-weight: 560;
  line-height: 1.42;
  text-align: right;
}

.content-grid[data-module="reports"] .record-section-title > strong {
  color: var(--gold);
}

.content-grid[data-module="reports"] .record-section-title.is-compact {
  align-items: center;
  gap: 0.5rem;
}

.content-grid[data-module="reports"] .record-section-title.is-compact h3 {
  font-size: clamp(0.92rem, 1.08vw, 1.05rem);
}

.content-grid[data-module="reports"] .record-priority-zone .stuck-pattern-grid {
  grid-template-columns: minmax(16rem, 1.28fr) repeat(2, minmax(0, 0.98fr));
  gap: clamp(0.5rem, 0.68vw, 0.64rem);
  min-height: 0;
  height: 100%;
  margin: 0;
}

.content-grid[data-module="reports"] .record-priority-zone .stuck-pattern-card {
  grid-template-rows: auto auto auto minmax(0, 0.75fr) auto auto;
  min-height: 0;
  height: 100%;
  padding: clamp(0.72rem, 0.96vw, 0.88rem);
  border-radius: clamp(0.58rem, 0.76vw, 0.72rem);
}

.content-grid[data-module="reports"] .record-priority-zone .stuck-pattern-card.severity-high {
  grid-template-rows: auto auto auto auto auto;
  min-height: clamp(21.8rem, 27vw, 24rem);
  height: auto;
}

.content-grid[data-module="reports"] .record-priority-zone .stuck-pattern-card strong {
  font-size: clamp(1.02rem, 1.32vw, 1.24rem);
  line-height: 1.22;
}

.content-grid[data-module="reports"] .record-priority-zone .stuck-pattern-card p {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(0.78rem, 0.9vw, 0.88rem);
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.content-grid[data-module="reports"] .record-priority-zone .stuck-pattern-card.severity-high p {
  display: none;
}

.content-grid[data-module="reports"] .problem-note-map {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.36rem, 0.48vw, 0.46rem);
  align-self: stretch;
  min-height: clamp(12.6rem, 16vw, 14rem);
  overflow: hidden;
  padding: clamp(0.36rem, 0.52vw, 0.48rem);
  border: 1px solid rgba(228, 199, 127, 0.2);
  border-radius: clamp(0.52rem, 0.68vw, 0.62rem);
  background:
    linear-gradient(90deg, rgba(228, 199, 127, 0.08), transparent 34%),
    radial-gradient(circle at 72% 48%, rgba(228, 199, 127, 0.13), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.14);
}

.content-grid[data-module="reports"] .problem-practice-crop {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(140, 233, 242, 0.16);
  border-radius: 0.52rem;
  background:
    linear-gradient(135deg, rgba(140, 233, 242, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 0 1.4rem rgba(0, 0, 0, 0.34);
}

.content-grid[data-module="reports"] .problem-practice-crop-frame {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 1280px;
  height: 720px;
  max-width: none;
  max-height: none;
  border: 0;
  background: rgba(4, 7, 10, 0.92);
  transform: translate(-318px, -18px) scale(0.52);
  transform-origin: left top;
}

.content-grid[data-module="reports"] .problem-note-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.48rem;
  row-gap: 0.08rem;
  align-items: center;
  min-width: 0;
  padding: 0 0.08rem;
}

.content-grid[data-module="reports"] .problem-note-context span,
.content-grid[data-module="reports"] .problem-note-context em {
  overflow: hidden;
  color: rgba(222, 232, 238, 0.72);
  font-size: clamp(0.62rem, 0.72vw, 0.68rem);
  font-style: normal;
  font-weight: 740;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-grid[data-module="reports"] .problem-note-context b {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: grid;
  min-width: 2.15rem;
  min-height: 2.15rem;
  place-items: center;
  border: 1.5px solid rgba(255, 221, 132, 0.94);
  border-radius: 50%;
  color: rgba(255, 239, 199, 0.98);
  font-size: clamp(0.72rem, 0.84vw, 0.8rem);
  font-weight: 880;
  box-shadow: 0 0 0 3px rgba(228, 199, 127, 0.1), 0 0 1rem rgba(228, 199, 127, 0.2);
}

.content-grid[data-module="reports"] .problem-position-toggle {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 2;
  min-height: 1.35rem;
  padding: 0 0.45rem;
  border: 1px solid rgba(228, 199, 127, 0.26);
  border-radius: 999px;
  background: rgba(5, 9, 13, 0.68);
  color: rgba(255, 231, 188, 0.94);
  cursor: pointer;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 760;
}

@keyframes problemNotePulse {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(228, 199, 127, 0.1),
      0 0 1.05rem rgba(228, 199, 127, 0.22);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(228, 199, 127, 0.16),
      0 0 1.45rem rgba(228, 199, 127, 0.38);
  }
}

.content-grid[data-module="reports"] .record-priority-zone .report-problem-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 0.5rem;
  align-self: end;
  padding-top: 0.2rem;
}

.content-grid[data-module="reports"] .record-priority-zone .report-problem-actions .glass-button {
  justify-content: center;
  width: 100%;
  min-height: clamp(2.25rem, 3vw, 2.62rem);
  margin: 0;
  padding-right: 0.7rem;
  padding-left: 0.7rem;
  font-size: clamp(0.72rem, 0.84vw, 0.86rem);
  white-space: nowrap;
}

.content-grid[data-module="reports"] .record-priority-zone .report-ai-teacher-button {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-width: 0;
}

.content-grid[data-module="reports"] .record-priority-zone .report-ai-teacher-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-grid[data-module="reports"] .record-priority-zone .report-ai-teacher-button i {
  display: inline-grid;
  min-width: 2.1rem;
  min-height: 1.2rem;
  place-items: center;
  padding: 0 0.38rem;
  border: 1px solid rgba(255, 231, 188, 0.24);
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.12);
  color: rgba(255, 231, 188, 0.95);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 780;
  line-height: 1;
}

.content-grid[data-module="reports"] .record-priority-zone .report-ai-teacher-button.is-locked {
  border-color: rgba(228, 199, 127, 0.46);
  background:
    linear-gradient(135deg, rgba(228, 199, 127, 0.18), rgba(140, 233, 242, 0.09)),
    rgba(0, 0, 0, 0.16);
}

.content-grid[data-module="reports"] .record-side-rail {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: clamp(0.5rem, 0.68vw, 0.64rem);
}

.content-grid[data-module="reports"] .record-mini-panel {
  display: grid;
  gap: clamp(0.42rem, 0.58vw, 0.54rem);
  padding: clamp(0.6rem, 0.8vw, 0.72rem);
}

.content-grid[data-module="reports"] .record-next-plan {
  grid-template-rows: auto minmax(0, 1fr);
}

.content-grid[data-module="reports"] .record-plan-list,
.content-grid[data-module="reports"] .record-recent-list {
  display: grid;
  gap: clamp(0.36rem, 0.5vw, 0.46rem);
  min-height: 0;
  overflow: hidden;
}

.content-grid[data-module="reports"] .record-plan-list .practice-history-row,
.content-grid[data-module="reports"] .record-recent-list .practice-history-row {
  gap: 0.46rem;
  padding: clamp(0.42rem, 0.58vw, 0.52rem);
  border-radius: clamp(0.48rem, 0.64vw, 0.58rem);
}

.content-grid[data-module="reports"] .practice-history-row strong,
.content-grid[data-module="reports"] .practice-history-row span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.content-grid[data-module="reports"] .practice-history-row strong {
  -webkit-line-clamp: 1;
}

.content-grid[data-module="reports"] .practice-history-row span {
  font-size: clamp(0.72rem, 0.82vw, 0.8rem);
  line-height: 1.35;
  -webkit-line-clamp: 1;
}

.content-grid[data-module="reports"] .record-plan-list .glass-button {
  min-height: 2rem;
  padding: 0.38rem 0.62rem;
  white-space: nowrap;
}

.content-grid[data-module="reports"] .record-trend-panel {
  grid-template-rows: auto auto;
  align-self: start;
}

.content-grid[data-module="reports"] .record-trend-panel .report-trend-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.32rem, 0.46vw, 0.42rem);
  margin: 0;
}

.content-grid[data-module="reports"] .record-trend-panel .report-trend-compact-grid .report-trend-card {
  min-height: 4.35rem;
  padding: 0.38rem 0.48rem;
}

.content-grid[data-module="reports"] .record-trend-panel .report-trend-card {
  gap: 0.14rem;
  padding: clamp(0.38rem, 0.52vw, 0.48rem);
  border-radius: clamp(0.44rem, 0.58vw, 0.52rem);
}

.content-grid[data-module="reports"] .record-trend-panel .report-trend-card strong {
  font-size: clamp(0.82rem, 1.02vw, 0.96rem);
}

.content-grid[data-module="reports"] .record-trend-panel .report-trend-card span,
.content-grid[data-module="reports"] .record-trend-panel .report-trend-card small {
  font-size: clamp(0.6rem, 0.68vw, 0.66rem);
}

@media (min-width: 1081px) {
  html[data-active-module] .content-grid[data-module="reports"] {
    overflow: hidden;
    grid-template-rows: minmax(0, 1fr);
  }

  .content-grid[data-module="reports"] > .practice-record-one-screen {
    grid-row: 1;
  }

  .content-grid[data-module="reports"] > .practice-record-hero {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .content-grid[data-module="reports"] > .report-old-focus {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .content-grid[data-module="reports"] > .report-old-plan {
    grid-column: 1 / span 7;
    grid-row: 3;
  }

  .content-grid[data-module="reports"] > .report-old-trend {
    grid-column: 8 / span 5;
    grid-row: 3;
  }
}

@media (max-width: 1080px) {
  html[data-active-module] .content-grid[data-module="reports"] {
    overflow: auto;
    grid-auto-rows: auto;
  }

  .content-grid[data-module="reports"] > .panel {
    overflow: visible;
  }

  .content-grid[data-module="reports"] > .practice-record-one-screen {
    height: auto;
    overflow: visible;
  }

  .content-grid[data-module="reports"] .record-command-bar,
  .content-grid[data-module="reports"] .record-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="reports"] .record-score-strip,
  .content-grid[data-module="reports"] .record-priority-zone .stuck-pattern-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid[data-module="reports"] .record-side-rail {
    grid-template-rows: auto;
  }

  .knowledge-one-screen {
    height: auto;
    overflow: visible;
    grid-template-columns: 1fr;
  }

  .knowledge-3d-lab {
    height: auto;
    min-height: 48rem;
    overflow: visible;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .knowledge-3d-stage-shell {
    min-height: 34rem;
  }

  .knowledge-violin-stage,
  .knowledge-category-panel {
    overflow: visible;
  }

  .knowledge-violin-model {
    min-height: 24rem;
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="reports"] .record-score-strip,
  .content-grid[data-module="reports"] .record-priority-zone .stuck-pattern-grid,
  .content-grid[data-module="reports"] .record-trend-panel .report-trend-compact-grid {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="reports"] .record-score-summary {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="reports"] .record-score-mini-grid {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="reports"] .record-section-title {
    flex-direction: column;
  }

  .content-grid[data-module="reports"] .record-section-title > span,
  .content-grid[data-module="reports"] .record-section-title > strong {
    max-width: none;
    text-align: left;
  }

  .membership-unlock-callout {
    align-items: stretch;
    flex-direction: column;
  }

  .membership-unlock-callout .glass-button {
    justify-content: center;
  }

  .knowledge-category-head {
    flex-direction: column;
  }

  .knowledge-category-grid,
  .knowledge-stage-stats {
    grid-template-columns: 1fr;
  }

  .knowledge-3d-lab {
    min-height: 0;
  }

  .knowledge-3d-stage-shell {
    min-height: 28rem;
  }

  .knowledge-3d-title {
    max-width: calc(100% - 1.6rem);
  }

  .knowledge-basics-model-cue {
    top: 6.2rem;
    left: 0.8rem;
    right: 0.8rem;
    width: auto;
  }

  .knowledge-basics-stage .knowledge-3d-callout {
    position: relative;
    right: auto;
    bottom: auto;
    max-width: none;
    margin: 0 0.8rem 0.8rem;
  }

  .knowledge-basics-guide {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    max-height: none;
    margin: 6.8rem 0.8rem 0.8rem;
  }

  .knowledge-basics-guide-detail {
    overflow: visible;
  }

  .knowledge-basics-step-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knowledge-basics-step:last-child {
    grid-column: 1 / -1;
  }

  .knowledge-basics-quiz-choices {
    grid-template-columns: 1fr;
  }

  .knowledge-course-categories {
    grid-template-columns: 1fr;
  }

  .knowledge-violin-model {
    min-height: 19rem;
  }

  .knowledge-marker {
    display: none;
  }

  .knowledge-posture-stage {
    min-height: 44rem;
  }

  .knowledge-posture-stage .knowledge-video-frame {
    top: 8.8rem;
    bottom: 15.5rem;
  }

  .knowledge-video-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knowledge-notes-stage {
    min-height: 52rem;
  }

  .knowledge-note-atlas {
    grid-template-columns: 1fr;
    top: 8.8rem;
  }

  .knowledge-note-group > div {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Support page: scoped user help center */
html[data-active-module] .content-grid[data-module="support"] {
  height: 100%;
  overflow: hidden;
  align-content: stretch;
  grid-template-rows: minmax(0, 1fr);
}

.content-grid[data-module="support"] > .support-help-center {
  display: grid;
  grid-column: 1 / -1;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.78rem, 1.05vw, 1.08rem);
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: clamp(0.9rem, 1.25vw, 1.18rem);
  border: 1px solid rgba(217, 223, 230, 0.11);
  border-radius: clamp(1rem, 1.45vw, 1.34rem);
  background:
    radial-gradient(circle at 88% 8%, rgba(111, 226, 218, 0.12), transparent 30%),
    radial-gradient(circle at 8% 4%, rgba(232, 199, 118, 0.1), transparent 32%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.022)),
    rgba(4, 7, 11, 0.72);
  box-shadow:
    0 1.8rem 4.8rem rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(22px);
}

.content-grid[data-module="support"] .support-help-hero {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(0.78rem, 1.1vw, 1.12rem);
  align-items: stretch;
  min-height: clamp(12rem, 19vh, 14.8rem);
}

.content-grid[data-module="support"] .support-hero-copy,
.content-grid[data-module="support"] .support-search-card,
.content-grid[data-module="support"] .support-faq-panel,
.content-grid[data-module="support"] .support-answer-panel {
  border: 1px solid rgba(255, 255, 255, 0.105);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.074), rgba(255, 255, 255, 0.023)),
    rgba(3, 7, 12, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1rem 2.6rem rgba(0, 0, 0, 0.16);
}

.content-grid[data-module="support"] .support-hero-copy {
  position: relative;
  display: grid;
  align-content: center;
  gap: clamp(0.52rem, 0.78vw, 0.78rem);
  overflow: hidden;
  padding: clamp(1.05rem, 1.65vw, 1.52rem);
  border-radius: clamp(0.9rem, 1.2vw, 1.1rem);
}

.content-grid[data-module="support"] .support-hero-copy::before {
  position: absolute;
  inset: auto -9% -55% auto;
  width: min(22rem, 52%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 226, 218, 0.14), transparent 66%);
  content: "";
  pointer-events: none;
}

.content-grid[data-module="support"] .support-hero-copy > * {
  position: relative;
  z-index: 1;
}

.content-grid[data-module="support"] .support-hero-copy h3 {
  max-width: 34rem;
  margin: 0;
  color: rgba(248, 251, 253, 0.96);
  font-size: clamp(1.76rem, 2.7vw, 3rem);
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.08;
}

.content-grid[data-module="support"] .support-hero-copy p:not(.eyebrow) {
  max-width: 32rem;
  margin: 0;
  color: rgba(224, 233, 239, 0.68);
  font-size: clamp(0.86rem, 1vw, 1rem);
  line-height: 1.62;
}

.content-grid[data-module="support"] .support-search-card {
  display: grid;
  align-content: stretch;
  gap: clamp(0.58rem, 0.8vw, 0.78rem);
  padding: clamp(0.86rem, 1.25vw, 1.14rem);
  border-color: rgba(232, 199, 118, 0.16);
  border-radius: clamp(0.9rem, 1.2vw, 1.1rem);
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 199, 118, 0.12), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.026)),
    rgba(0, 0, 0, 0.2);
}

.content-grid[data-module="support"] .support-search-card label {
  color: rgba(255, 232, 178, 0.9);
  font-size: 0.76rem;
  font-weight: 740;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-grid[data-module="support"] .support-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.55rem;
  align-items: center;
}

.content-grid[data-module="support"] .support-search-card input {
  width: 100%;
  min-width: 0;
  min-height: 3.05rem;
  padding: 0.82rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.86rem;
  background: rgba(2, 5, 8, 0.52);
  color: var(--text);
  outline: none;
  font: inherit;
  line-height: 1.3;
}

.content-grid[data-module="support"] .support-search-card input:focus {
  border-color: rgba(111, 226, 218, 0.4);
  box-shadow: 0 0 0 3px rgba(111, 226, 218, 0.075);
}

.content-grid[data-module="support"] .support-primary-action {
  color: rgba(3, 16, 18, 0.96);
  background:
    linear-gradient(135deg, rgba(151, 246, 229, 0.96), rgba(94, 217, 205, 0.88));
  border-color: rgba(151, 246, 229, 0.38);
  box-shadow: 0 0.75rem 1.8rem rgba(94, 217, 205, 0.18);
}

.content-grid[data-module="support"] .support-secondary-action {
  border-color: rgba(232, 199, 118, 0.2);
  color: rgba(255, 234, 183, 0.88);
  background: rgba(232, 199, 118, 0.055);
}

.content-grid[data-module="support"] .support-search-row .glass-button {
  min-height: 3.05rem;
  padding-inline: 1rem;
  white-space: nowrap;
}

.content-grid[data-module="support"] .support-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.44rem;
}

.content-grid[data-module="support"] .support-category-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding: 0.48rem 0.66rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.042);
  color: rgba(224, 233, 239, 0.72);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.content-grid[data-module="support"] .support-category-tabs button:hover,
.content-grid[data-module="support"] .support-category-tabs button.is-active {
  border-color: rgba(111, 226, 218, 0.32);
  background: rgba(111, 226, 218, 0.085);
  color: rgba(218, 250, 248, 0.94);
  transform: translateY(-1px);
}

.content-grid[data-module="support"] .support-category-tabs span {
  display: grid;
  width: 1.18rem;
  height: 1.18rem;
  place-items: center;
  color: rgba(232, 199, 118, 0.9);
  font-size: 0.78rem;
}

.content-grid[data-module="support"] .support-help-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.72fr);
  gap: clamp(0.78rem, 1.05vw, 1.08rem);
  min-height: 0;
}

.content-grid[data-module="support"] .support-faq-panel,
.content-grid[data-module="support"] .support-answer-panel {
  display: grid;
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.8rem, 1.15vw, 1rem);
  border-radius: clamp(0.9rem, 1.2vw, 1.1rem);
}

.content-grid[data-module="support"] .support-faq-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.content-grid[data-module="support"] .support-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

.content-grid[data-module="support"] .support-section-title h3 {
  margin: 0;
  color: rgba(248, 251, 253, 0.94);
  font-size: clamp(1rem, 1.22vw, 1.2rem);
  font-weight: 760;
}

.content-grid[data-module="support"] .support-section-title span {
  padding: 0.38rem 0.62rem;
  border: 1px solid rgba(111, 226, 218, 0.22);
  border-radius: 999px;
  color: rgba(180, 247, 242, 0.9);
  font-size: 0.74rem;
  white-space: nowrap;
}

.content-grid[data-module="support"] .support-faq-list {
  display: grid;
  gap: 0.54rem;
  min-height: 0;
  overflow: auto;
  padding-right: 0.12rem;
}

.content-grid[data-module="support"] .support-faq-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.18rem 0.68rem;
  align-items: center;
  width: 100%;
  min-height: clamp(4.25rem, 7vh, 5.15rem);
  padding: 0.68rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 0.82rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.13);
  color: var(--text);
  text-align: left;
}

.content-grid[data-module="support"] .support-faq-item:hover {
  border-color: rgba(111, 226, 218, 0.22);
  background:
    linear-gradient(145deg, rgba(111, 226, 218, 0.07), rgba(255, 255, 255, 0.026)),
    rgba(0, 0, 0, 0.14);
}

.content-grid[data-module="support"] .support-faq-index {
  grid-row: 1 / span 2;
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 1px solid rgba(232, 199, 118, 0.16);
  border-radius: 50%;
  color: rgba(232, 199, 118, 0.78);
  font-size: 0.68rem;
  font-weight: 760;
}

.content-grid[data-module="support"] .support-faq-item strong {
  color: rgba(248, 251, 253, 0.94);
  font-size: clamp(0.9rem, 1vw, 0.98rem);
  font-weight: 760;
  line-height: 1.28;
}

.content-grid[data-module="support"] .support-faq-item p {
  display: -webkit-box;
  overflow: hidden;
  grid-column: 2;
  margin: 0;
  color: rgba(224, 233, 239, 0.6);
  font-size: 0.78rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.content-grid[data-module="support"] .support-link-button,
.content-grid[data-module="support"] .support-more-button {
  border: 0;
  background: transparent;
  color: rgba(151, 246, 229, 0.92);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 720;
  white-space: nowrap;
  cursor: pointer;
}

.content-grid[data-module="support"] .support-more-button {
  justify-self: start;
  margin-top: 0.6rem;
  padding: 0.34rem 0;
  color: rgba(232, 199, 118, 0.86);
}

.content-grid[data-module="support"] .support-answer-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.72rem;
  border-color: rgba(111, 226, 218, 0.13);
  background:
    radial-gradient(circle at 96% 0%, rgba(111, 226, 218, 0.1), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.02)),
    rgba(0, 0, 0, 0.18);
}

.content-grid[data-module="support"] .support-answer-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.content-grid[data-module="support"] .support-live-dot {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 0.36rem;
  padding: 0.32rem 0.56rem;
  border-radius: 999px;
  background: rgba(111, 226, 218, 0.08);
  color: rgba(180, 247, 242, 0.92);
  font-size: 0.72rem;
  font-weight: 720;
  white-space: nowrap;
}

.content-grid[data-module="support"] .support-live-dot::before {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0.7rem rgba(111, 226, 218, 0.42);
  content: "";
}

.content-grid[data-module="support"] .support-answer-content {
  display: grid;
  align-content: start;
  gap: 0.72rem;
  min-height: 0;
  overflow: auto;
  padding: 0.16rem 0.1rem 0.16rem 0;
}

.content-grid[data-module="support"] .support-answer-content strong {
  margin: 0;
  color: rgba(248, 251, 253, 0.94);
  font-size: clamp(1.05rem, 1.34vw, 1.28rem);
  font-weight: 780;
  line-height: 1.35;
}

.content-grid[data-module="support"] .support-answer-content p {
  margin: 0;
  color: rgba(224, 233, 239, 0.66);
  font-size: 0.86rem;
  line-height: 1.56;
}

.content-grid[data-module="support"] .support-step-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-grid[data-module="support"] .support-step-list li {
  position: relative;
  padding: 0.64rem 0.72rem 0.64rem 2.28rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(229, 237, 243, 0.82);
  font-size: 0.84rem;
  line-height: 1.5;
}

.content-grid[data-module="support"] .support-step-list li::before {
  position: absolute;
  top: 0.68rem;
  left: 0.72rem;
  display: grid;
  width: 1.14rem;
  height: 1.14rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(151, 246, 229, 0.12);
  color: rgba(151, 246, 229, 0.95);
  font-size: 0.72rem;
  font-weight: 760;
  content: counter(list-item);
}

.content-grid[data-module="support"] .support-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.52rem;
  padding-top: 0.08rem;
}

.content-grid[data-module="support"] .support-feedback-actions .glass-button {
  min-height: 2.45rem;
}

.content-grid[data-module="support"] .support-empty-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.content-grid[data-module="support"] .support-empty-hints span {
  padding: 0.38rem 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(224, 233, 239, 0.62);
  font-size: 0.74rem;
}

.content-grid[data-module="support"] .support-answer-content.is-solved,
.content-grid[data-module="support"] .support-answer-content.is-human {
  align-content: center;
  min-height: clamp(10rem, 22vh, 15rem);
}

.content-grid[data-module="support"] .support-answer-content.is-solved strong {
  color: rgba(151, 246, 229, 0.94);
}

.content-grid[data-module="support"] .support-answer-content.is-human strong {
  color: rgba(255, 232, 178, 0.94);
}

.content-grid[data-module="support"] .support-human-fallback {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.72rem;
  align-items: center;
  padding: 0.72rem;
  border: 1px solid rgba(232, 199, 118, 0.16);
  border-radius: 0.86rem;
  background:
    linear-gradient(135deg, rgba(232, 199, 118, 0.082), rgba(111, 226, 218, 0.035)),
    rgba(0, 0, 0, 0.14);
}

.content-grid[data-module="support"] .support-human-fallback div {
  display: grid;
  gap: 0.2rem;
}

.content-grid[data-module="support"] .support-human-fallback strong {
  color: rgba(248, 251, 253, 0.9);
  font-size: 0.86rem;
  font-weight: 740;
}

.content-grid[data-module="support"] .support-human-fallback span {
  color: rgba(224, 233, 239, 0.56);
  font-size: 0.74rem;
  line-height: 1.35;
}

.content-grid[data-module="support"] .support-human-fallback .glass-button {
  min-height: 2.35rem;
  padding-inline: 0.75rem;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  html[data-active-module] .content-grid[data-module="support"] {
    height: auto;
    overflow: auto;
  }

  .content-grid[data-module="support"] > .support-help-center,
  .content-grid[data-module="support"] .support-help-hero,
  .content-grid[data-module="support"] .support-help-grid {
    height: auto;
    overflow: visible;
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="support"] .support-faq-list,
  .content-grid[data-module="support"] .support-answer-content {
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] .support-hero-copy h3 {
    font-size: clamp(1.65rem, 8vw, 2.45rem);
  }

  .content-grid[data-module="support"] .support-search-row,
  .content-grid[data-module="support"] .support-human-fallback {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="support"] .support-category-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.18rem;
  }

  .content-grid[data-module="support"] .support-category-tabs button {
    flex: 0 0 auto;
  }

  .content-grid[data-module="support"] .support-faq-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .content-grid[data-module="support"] .support-link-button {
    grid-column: 2;
    justify-self: start;
  }
}

/* Support page: scoped two-panel customer center */
.content-grid[data-module="support"] > .support-two-panel {
  --support-bg: #05060a;
  --support-card: rgba(18, 22, 30, 0.58);
  --support-card-strong: rgba(26, 30, 40, 0.7);
  --support-border: rgba(255, 255, 255, 0.12);
  --support-glow-gold: rgba(206, 145, 92, 0.44);
  --support-glow-blue: rgba(122, 173, 255, 0.28);
  --support-text: rgba(245, 247, 250, 0.94);
  --support-muted: rgba(215, 219, 225, 0.62);
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 7fr) minmax(20rem, 3fr);
  gap: clamp(0.9rem, 1.25vw, 1.22rem);
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: clamp(0.8rem, 1.1vw, 1.1rem);
  border-radius: clamp(1rem, 1.45vw, 1.34rem);
  background:
    radial-gradient(circle at 18% 16%, rgba(206, 145, 92, 0.18), transparent 18%),
    radial-gradient(circle at 82% 20%, rgba(122, 173, 255, 0.14), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.06), transparent 22%),
    linear-gradient(180deg, #05060a 0%, #090b10 55%, #040507 100%);
}

.content-grid[data-module="support"] .support-entry-panel,
.content-grid[data-module="support"] .support-service-panel {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--support-border);
  border-radius: clamp(1rem, 1.45vw, 1.34rem);
  background:
    linear-gradient(180deg, var(--support-card-strong), var(--support-card)),
    rgba(10, 12, 18, 0.7);
  box-shadow:
    0 1.8rem 4.5rem rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 3rem rgba(206, 145, 92, 0.04);
  backdrop-filter: blur(28px) saturate(1.2);
  pointer-events: auto;
}

.content-grid[data-module="support"] .support-entry-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(0.58rem, 0.78vw, 0.78rem);
  padding: clamp(1rem, 1.45vw, 1.28rem);
  background:
    radial-gradient(circle at 10% 10%, rgba(206, 145, 92, 0.12), transparent 24%),
    radial-gradient(circle at 95% 8%, rgba(122, 173, 255, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

.content-grid[data-module="support"] .support-service-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(0.72rem, 1vw, 0.95rem);
  padding: clamp(1rem, 1.45vw, 1.32rem);
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 90% 8%, rgba(122, 173, 255, 0.12), transparent 28%),
    radial-gradient(circle at 20% 94%, rgba(206, 145, 92, 0.12), transparent 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

.content-grid[data-module="support"] .support-entry-head {
  display: grid;
  gap: 0.3rem;
  padding-bottom: 0.08rem;
}

.content-grid[data-module="support"] .support-entry-head h3,
.content-grid[data-module="support"] .support-service-head h3 {
  margin: 0;
  color: var(--support-text);
  font-size: clamp(1.62rem, 2.6vw, 3.08rem);
  font-weight: 740;
  letter-spacing: 0;
  line-height: 1.06;
  text-shadow: 0 0 1.4rem rgba(255, 255, 255, 0.08);
}

.content-grid[data-module="support"] .support-service-head h3 {
  font-size: clamp(1.35rem, 1.8vw, 2rem);
}

.content-grid[data-module="support"] .support-entry-head p:not(.eyebrow),
.content-grid[data-module="support"] .support-service-intro {
  max-width: 35rem;
  margin: 0;
  color: var(--support-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.content-grid[data-module="support"] .support-guess-block,
.content-grid[data-module="support"] .support-input-block {
  display: grid;
  gap: 0.58rem;
  min-height: 0;
}

.content-grid[data-module="support"] .support-guess-block {
  align-content: start;
  overflow: hidden;
}

.content-grid[data-module="support"] .support-input-block {
  padding: 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.content-grid[data-module="support"] .support-block-title,
.content-grid[data-module="support"] .support-service-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.8rem;
}

.content-grid[data-module="support"] .support-block-title strong {
  color: var(--support-text);
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  font-weight: 780;
  line-height: 1.22;
}

.content-grid[data-module="support"] .support-block-title span {
  padding: 0.32rem 0.52rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(230, 232, 236, 0.8);
  font-size: 0.7rem;
  white-space: nowrap;
}

.content-grid[data-module="support"] .support-guess-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.46rem 0.5rem;
  min-height: 0;
  overflow: auto;
  padding-right: 0.18rem;
  scrollbar-width: thin;
}

.content-grid[data-module="support"] .support-guess-list button {
  display: grid;
  align-content: center;
  gap: 0.24rem;
  width: 100%;
  min-height: 3.95rem;
  padding: 0.64rem 0.76rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.72rem;
  background:
    radial-gradient(circle at 18% 20%, rgba(206, 145, 92, 0.06), transparent 25%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
  color: var(--support-text);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.content-grid[data-module="support"] .support-guess-list button:hover,
.content-grid[data-module="support"] .support-guess-list button.is-active {
  transform: translateY(-1px);
  border-color: rgba(206, 145, 92, 0.32);
  background:
    radial-gradient(circle at 18% 20%, rgba(206, 145, 92, 0.1), transparent 25%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 1.5rem rgba(206, 145, 92, 0.08);
}

.content-grid[data-module="support"] .support-guess-list strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--support-text);
  font-size: 0.84rem;
  font-weight: 740;
  line-height: 1.28;
}

.content-grid[data-module="support"] .support-guess-list span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--support-muted);
  font-size: 0.72rem;
  line-height: 1.38;
  white-space: normal;
}

.content-grid[data-module="support"] .support-keyword-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  align-content: start;
  overflow: visible;
}

.content-grid[data-module="support"] .support-keyword-row button {
  min-height: 2.32rem;
  padding: 0.56rem 0.86rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 16%, rgba(206, 145, 92, 0.1), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
  color: var(--support-text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.42rem 1rem rgba(0, 0, 0, 0.18);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.content-grid[data-module="support"] .support-more-button {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.42rem;
  min-height: 2.16rem;
  padding: 0.3rem 0.36rem 0.3rem 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 20%, rgba(122, 173, 255, 0.14), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
  color: rgba(238, 242, 247, 0.92);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 820;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0.75rem 1.7rem rgba(0, 0, 0, 0.2);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.content-grid[data-module="support"] .support-more-button b {
  display: grid;
  width: 1.36rem;
  height: 1.36rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 900;
}

.content-grid[data-module="support"] .support-more-button:hover {
  transform: translateY(-1px);
  border-color: rgba(206, 145, 92, 0.3);
  background:
    radial-gradient(circle at 18% 20%, rgba(206, 145, 92, 0.12), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  color: rgba(255, 244, 225, 0.96);
}

.content-grid[data-module="support"] .support-keyword-row button:hover,
.content-grid[data-module="support"] .support-keyword-row button.is-active {
  transform: translateY(-1px);
  border-color: rgba(206, 145, 92, 0.42);
  background:
    radial-gradient(circle at 18% 16%, rgba(206, 145, 92, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  color: rgba(255, 243, 221, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 0.72rem 1.45rem rgba(206, 145, 92, 0.14);
}

.content-grid[data-module="support"] .support-input-block label {
  color: rgba(240, 241, 244, 0.8);
  font-size: 0.74rem;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.content-grid[data-module="support"] .support-input-block textarea {
  min-height: clamp(5rem, 9vh, 6.25rem);
  resize: none;
  padding: 0.82rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.86rem;
  background:
    radial-gradient(circle at 12% 8%, rgba(122, 173, 255, 0.1), transparent 24%),
    rgba(255, 255, 255, 0.04);
  color: var(--support-text);
  outline: none;
  font: inherit;
  line-height: 1.5;
}

.content-grid[data-module="support"] .support-input-block textarea:focus {
  border-color: rgba(206, 145, 92, 0.36);
  box-shadow: 0 0 0 4px rgba(206, 145, 92, 0.12);
}

.content-grid[data-module="support"] .support-entry-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.56rem;
}

.content-grid[data-module="support"] .support-entry-actions .glass-button {
  min-height: 2.72rem;
  white-space: nowrap;
}

.content-grid[data-module="support"] .support-service-intro {
  max-width: none;
  padding-bottom: 0.18rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.content-grid[data-module="support"] .support-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding: 0.34rem 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(240, 244, 248, 0.84);
  font-size: 0.72rem;
  font-weight: 720;
  white-space: nowrap;
}

.content-grid[data-module="support"] .support-live-dot::before {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0.72rem rgba(255, 255, 255, 0.15);
  content: "";
}

.content-grid[data-module="support"] .support-answer-content {
  display: grid;
  align-content: start;
  gap: 0.48rem;
  min-height: 0;
  overflow: hidden;
}

.content-grid[data-module="support"] .support-answer-content strong {
  color: var(--support-text);
  font-size: clamp(1.12rem, 1.45vw, 1.46rem);
  font-weight: 780;
  line-height: 1.34;
}

.content-grid[data-module="support"] .support-answer-content p {
  margin: 0;
  color: var(--support-muted);
  font-size: 0.88rem;
  line-height: 1.58;
}

.content-grid[data-module="support"] .support-step-list {
  display: grid;
  gap: 0.56rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-grid[data-module="support"] .support-step-list li {
  position: relative;
  padding: 0.7rem 0.82rem 0.7rem 2.38rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.82rem;
  background:
    radial-gradient(circle at 12% 12%, rgba(206, 145, 92, 0.08), transparent 22%),
    rgba(255, 255, 255, 0.035);
  color: rgba(236, 239, 244, 0.86);
  font-size: 0.86rem;
  line-height: 1.52;
}

.content-grid[data-module="support"] .support-step-list li::before {
  position: absolute;
  top: 0.72rem;
  left: 0.78rem;
  display: grid;
  width: 1.16rem;
  height: 1.16rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
  font-weight: 780;
  content: counter(list-item);
}

.content-grid[data-module="support"] .support-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.56rem;
}

.content-grid[data-module="support"] .support-human-fallback {
  display: grid;
  gap: 0.42rem;
  align-items: stretch;
  padding: 0.72rem 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 16% 10%, rgba(206, 145, 92, 0.1), transparent 22%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}

.content-grid[data-module="support"] .support-human-fallback strong {
  color: var(--support-text);
  font-size: 0.92rem;
  font-weight: 740;
}

.content-grid[data-module="support"] .support-human-fallback span {
  color: var(--support-muted);
  font-size: 0.72rem;
  line-height: 1.34;
}

.content-grid[data-module="support"] .support-human-dialog {
  display: grid;
  gap: 0.28rem;
}

.content-grid[data-module="support"] .support-human-dialog span {
  color: rgba(230, 232, 236, 0.8);
  font-size: 0.74rem;
  font-weight: 760;
}

.content-grid[data-module="support"] .support-human-dialog textarea {
  min-height: 4.3rem;
  resize: vertical;
  padding: 0.68rem 0.76rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.76rem;
  background:
    radial-gradient(circle at 16% 14%, rgba(122, 173, 255, 0.08), transparent 22%),
    rgba(255, 255, 255, 0.035);
  color: var(--support-text);
  outline: none;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.48;
  pointer-events: auto;
}

.content-grid[data-module="support"] .support-human-dialog textarea:focus {
  border-color: rgba(206, 145, 92, 0.34);
  box-shadow: 0 0 0 4px rgba(206, 145, 92, 0.1);
}

.content-grid[data-module="support"] .support-human-status {
  margin: -0.08rem 0 0;
  color: rgba(206, 145, 92, 0.88);
  font-size: 0.76rem;
  line-height: 1.35;
}

.content-grid[data-module="support"] .support-human-fallback .glass-button {
  width: 100%;
  min-height: 2.48rem;
  justify-content: center;
  padding-inline: 1rem;
  font-size: 0.88rem;
  font-weight: 780;
  pointer-events: auto;
}

.content-grid[data-module="support"] .support-primary-action {
  color: rgba(3, 16, 18, 0.96);
  background:
    linear-gradient(135deg, rgba(151, 246, 229, 0.96), rgba(94, 217, 205, 0.88));
  border-color: rgba(151, 246, 229, 0.38);
  box-shadow: 0 0.75rem 1.8rem rgba(94, 217, 205, 0.18);
}

.content-grid[data-module="support"] .support-secondary-action {
  border-color: rgba(206, 145, 92, 0.24);
  color: rgba(255, 245, 232, 0.98);
  background:
    linear-gradient(135deg, rgba(206, 145, 92, 0.24), rgba(122, 173, 255, 0.12)),
    rgba(255, 255, 255, 0.04);
}

.content-grid[data-module="support"] .support-answer-content.is-empty,
.content-grid[data-module="support"] .support-answer-content.is-solved,
.content-grid[data-module="support"] .support-answer-content.is-human {
  align-content: center;
  min-height: clamp(10.5rem, 20vh, 14rem);
}

.content-grid[data-module="support"] .support-answer-content.is-solved strong {
  color: rgba(122, 173, 255, 0.95);
}

.content-grid[data-module="support"] .support-answer-content.is-human strong {
  color: rgba(206, 145, 92, 0.95);
}

.content-grid[data-module="support"] .glass-button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.03);
  color: rgba(245, 247, 250, 0.88);
  backdrop-filter: blur(18px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.6rem 1.4rem rgba(0, 0, 0, 0.18);
}

.content-grid[data-module="support"] .glass-button.primary {
  border-color: rgba(206, 145, 92, 0.3);
  background:
    linear-gradient(135deg, rgba(206, 145, 92, 0.28), rgba(122, 173, 255, 0.16)),
    rgba(255, 255, 255, 0.04);
  color: rgba(255, 245, 232, 0.98);
  box-shadow:
    0 0 1.6rem rgba(206, 145, 92, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.content-grid[data-module="support"] .glass-button:hover {
  transform: translateY(-1px);
}

@media (max-width: 1080px) {
  .content-grid[data-module="support"] > .support-two-panel {
    height: auto;
    overflow: visible;
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="support"] .support-entry-panel,
  .content-grid[data-module="support"] .support-service-panel,
  .content-grid[data-module="support"] .support-guess-list,
  .content-grid[data-module="support"] .support-answer-content {
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] .support-entry-head h3 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .content-grid[data-module="support"] .support-keyword-row {
    flex-wrap: wrap;
    overflow: visible;
  }

  .content-grid[data-module="support"] .support-keyword-row button {
    flex: 0 0 auto;
  }

  .content-grid[data-module="support"] .support-entry-actions,
  .content-grid[data-module="support"] .support-human-fallback,
  .content-grid[data-module="support"] .support-service-head {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="support"] .support-service-head {
    display: grid;
    align-items: start;
  }
}

html[data-active-module] .content-grid[data-module="tuner"] {
  grid-template-rows: minmax(0, 1fr);
}

.content-grid[data-module="tuner"] > .professional-tuner {
  grid-column: 1 / -1;
  min-height: 0;
}

.professional-tuner {
  --tuner-flat: #7eb1cf;
  --tuner-sharp: #e3a170;
  --tuner-accurate: #c8d98f;
  --tuner-accurate-gold: #e2c778;
  --tuner-glass: rgba(255, 255, 255, 0.06);
  --tuner-glass-strong: rgba(255, 255, 255, 0.11);
  --tuner-wood: #36251d;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  height: 100%;
  overflow: hidden;
  padding: 0.92rem;
  border: 1px solid rgba(226, 199, 120, 0.18);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 0%, rgba(226, 199, 120, 0.09), transparent 24%),
    radial-gradient(circle at 86% 20%, rgba(120, 188, 212, 0.08), transparent 22%),
    linear-gradient(135deg, rgba(5, 8, 11, 0.98), rgba(15, 18, 20, 0.95) 56%, rgba(8, 11, 12, 0.98));
  box-shadow: 0 1.4rem 3.8rem rgba(0, 0, 0, 0.36);
}

.tuner-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.72rem;
  align-items: start;
  padding-bottom: 0.68rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tuner-title-block {
  min-width: 0;
}

.tuner-header h3 {
  margin: 0.05rem 0 0.2rem;
  color: rgba(255, 245, 222, 0.97);
  font-size: clamp(1.55rem, 1vw + 1.2rem, 2.08rem);
  line-height: 1.04;
}

.tuner-header p:not(.eyebrow) {
  max-width: 46rem;
  margin: 0;
  color: rgba(222, 230, 231, 0.66);
  line-height: 1.45;
}

.tuner-live-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.34rem;
}

.tuner-live-strip span,
.tuner-live-pill,
.tuner-control-group button,
.tuner-auto-toggle,
.tuner-string-status-card,
.tuner-stat-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(230, 235, 235, 0.84);
}

.tuner-live-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.18rem;
  padding: 0.34rem 0.6rem;
  font-size: 0.78rem;
}

.tuner-live-pill.is-on {
  border-color: rgba(201, 216, 141, 0.34);
  background: rgba(201, 216, 141, 0.14);
  color: rgba(237, 247, 199, 0.97);
}

.tuner-live-pill.is-close,
.tuner-live-pill.is-accurate {
  border-color: rgba(201, 216, 141, 0.34);
  background: rgba(201, 216, 141, 0.14);
  color: rgba(237, 247, 199, 0.97);
}

.tuner-workbench {
  display: grid;
  grid-template-columns: minmax(22rem, 39%) minmax(0, 36%) minmax(18rem, 25%);
  gap: 0.62rem;
  min-height: 0;
}

.tuner-visual-panel,
.tuner-center-panel,
.tuner-side-panel,
.tuner-control-deck,
.tuner-string-status-card {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(8, 12, 14, 0.48);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.tuner-visual-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  padding: 0.62rem;
}

.tuner-visual-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.7rem;
}

.tuner-visual-head h4 {
  margin: 0.08rem 0 0;
  color: rgba(255, 244, 219, 0.97);
  font-size: 0.95rem;
}

.tuner-visual-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.tuner-visual-summary article {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
  padding: 0.5rem 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.tuner-visual-summary span,
.tuner-stat-card span,
.tuner-control-group > span,
.tuner-mic-card span,
.tuner-string-status-card span,
.tuner-string-status-card small,
.tuner-cent-copy span {
  color: rgba(221, 229, 230, 0.62);
  font-size: 0.72rem;
  line-height: 1.4;
}

.tuner-visual-summary strong {
  color: rgba(255, 243, 210, 0.96);
  font-size: 0.96rem;
  line-height: 1.16;
}

.tuner-visual-summary small {
  color: rgba(221, 229, 230, 0.64);
}

.tuner-pegbox-stage {
  position: relative;
  --tuner-pegbox-image-offset-y: 1rem;
  min-height: 34rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 18%, rgba(226, 199, 120, 0.12), transparent 18%),
    linear-gradient(160deg, rgba(18, 20, 22, 0.94), rgba(9, 11, 12, 0.98));
}

.tuner-pegbox-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 42%;
  transform: translateY(var(--tuner-pegbox-image-offset-y)) scale(1.02);
  transform-origin: center center;
}

.tuner-stage-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translateY(var(--tuner-pegbox-image-offset-y));
}

.tuner-string-line {
  display: none;
  position: absolute;
  top: 33%;
  bottom: 5%;
  width: 0;
  border-radius: 999px;
  background: transparent;
  opacity: 0;
  transform: translateX(-50%);
}

.tuner-string-line::before,
.tuner-string-line::after {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 0.28rem;
  border-radius: 999px;
  content: "";
  transform: translateX(-50%);
}

.tuner-string-line::before {
  background: linear-gradient(180deg, transparent, rgba(245, 248, 244, 0.16), transparent);
  filter: blur(5px);
  opacity: 0.34;
}

.tuner-string-line::after {
  display: none;
}

.tuner-string-line.is-active {
  opacity: 1;
}

.tuner-string-line.is-active::before {
  width: 0.74rem;
  background: linear-gradient(180deg, transparent 5%, rgba(255, 236, 184, 0.12), rgba(226, 199, 120, 0.26), rgba(255, 236, 184, 0.11), transparent 95%);
  filter: blur(9px);
  opacity: 0.72;
}

.tuner-pegbox-stage[data-action="tighten"] .tuner-string-line.is-active::before,
.tuner-pegbox-stage[data-action="loosen"] .tuner-string-line.is-active::before {
  width: 1.05rem;
  background:
    linear-gradient(180deg, transparent 3%, rgba(255, 245, 210, 0.18), rgba(255, 218, 132, 0.42), rgba(255, 245, 210, 0.16), transparent 96%);
  filter: blur(10px);
  opacity: 0.95;
}

.tuner-pegbox-stage[data-action="tighten"] .tuner-string-line.is-active,
.tuner-pegbox-stage[data-action="loosen"] .tuner-string-line.is-active {
  mix-blend-mode: screen;
}

.tuner-string-line.is-active::after {
  display: none;
}

.tuner-peg-node {
  display: none;
  position: absolute;
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.07);
}

.tuner-peg-node.is-active {
  opacity: 0;
}

.tuner-focus-ring,
.tuner-peg-turn-cue {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.tuner-focus-ring {
  display: none;
  z-index: 4;
  width: 6.9rem;
  height: 4.9rem;
  border: 1px solid rgba(226, 199, 120, 0.58);
  border-radius: 50%;
  box-shadow:
    0 0 0 0.38rem rgba(226, 199, 120, 0.08),
    0 0 1.4rem rgba(226, 199, 120, 0.18);
  transform: translate(-50%, -50%) perspective(22rem) rotateX(64deg) rotateZ(-10deg);
  animation: tunerPegFocusPulse 1.7s ease-in-out infinite;
}

.tuner-focus-ring.direction-ccw {
  animation-direction: reverse;
}

.tuner-focus-ring.direction-hold {
  opacity: 0.46;
  animation: none;
}

.tuner-peg-turn-cue {
  --turn-color: rgba(255, 237, 194, 0.98);
  --turn-soft: rgba(226, 199, 120, 0.22);
  z-index: 6;
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  gap: 0.16rem;
  width: 4.6rem;
  height: 4.45rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.tuner-peg-turn-cue.side-left {
  transform: translate(-50%, -50%);
}

.tuner-peg-turn-cue.side-right {
  transform: translate(-50%, -50%);
}

.tuner-peg-turn-cue.tighten {
  --turn-color: rgba(177, 222, 245, 0.98);
  --turn-soft: rgba(128, 207, 244, 0.22);
}

.tuner-peg-turn-cue.loosen {
  --turn-color: rgba(246, 190, 145, 0.98);
  --turn-soft: rgba(241, 180, 132, 0.2);
}

.tuner-peg-turn-cue.hold,
.tuner-peg-turn-cue.wait {
  --turn-color: rgba(255, 244, 214, 0.72);
  --turn-soft: rgba(255, 244, 214, 0.1);
  opacity: 0.62;
}

.tuner-peg-turn-label {
  color: rgba(255, 244, 214, 0.96);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 0 0.75rem var(--turn-soft);
}

.tuner-peg-turn-cue small {
  color: rgba(233, 239, 240, 0.78);
  font-size: 0.56rem;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.6);
}

.tuner-peg-turn-orbit {
  position: relative;
  width: 3.74rem;
  height: 2.24rem;
  perspective: 24rem;
  transform: rotate(90deg);
  transform-origin: center;
  transform-style: preserve-3d;
}

.tuner-turn-arc,
.tuner-turn-shaft,
.tuner-turn-head {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.tuner-turn-arc {
  width: 3.42rem;
  height: 1.94rem;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(64deg);
}

.tuner-turn-arc.is-back {
  display: none;
}

.tuner-turn-arc.is-front {
  border: 2px solid transparent;
  border-bottom-color: var(--turn-color);
  border-left-color: transparent;
  border-right-color: transparent;
  box-shadow:
    0 0 0.85rem var(--turn-soft),
    0 0 1.7rem rgba(255, 255, 255, 0.08);
  animation: tunerPegOrbitSweep 4.8s cubic-bezier(0.42, 0, 0.2, 1) infinite;
}

.tuner-turn-shaft {
  width: 1.7rem;
  height: 0.74rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 42%, rgba(255, 255, 255, 0.38), transparent 24%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.13), rgba(226, 199, 120, 0.32), rgba(0, 0, 0, 0.2));
  box-shadow:
    inset 0 0.24rem 0.48rem rgba(255, 255, 255, 0.12),
    inset 0 -0.18rem 0.42rem rgba(0, 0, 0, 0.28),
    0 0.55rem 1rem rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%) rotate(-10deg);
}

.tuner-turn-head {
  width: 0.66rem;
  height: 0.66rem;
  border-top: 2px solid var(--turn-color);
  border-right: 2px solid var(--turn-color);
  filter: drop-shadow(0 0 0.5rem var(--turn-soft));
  transform-origin: center;
}

.tuner-peg-turn-cue.direction-cw .tuner-turn-head {
  transform: translate(1.62rem, 0.62rem) rotate(42deg);
  animation: tunerPegHeadCw 4.8s cubic-bezier(0.42, 0, 0.2, 1) infinite;
}

.tuner-peg-turn-cue.direction-ccw .tuner-turn-head {
  transform: translate(-2.05rem, 0.58rem) rotate(222deg);
  animation: tunerPegHeadCcw 4.8s cubic-bezier(0.42, 0, 0.2, 1) infinite;
}

.tuner-peg-turn-cue.direction-ccw .tuner-turn-arc.is-front {
  animation-name: tunerPegOrbitSweepReverse;
}

.tuner-peg-turn-cue.direction-hold .tuner-turn-arc.is-front,
.tuner-peg-turn-cue.direction-hold .tuner-turn-head,
.tuner-peg-turn-cue.wait .tuner-turn-arc.is-front,
.tuner-peg-turn-cue.wait .tuner-turn-head {
  animation: none;
}

.tuner-peg-turn-cue.direction-hold .tuner-turn-arc.is-front,
.tuner-peg-turn-cue.wait .tuner-turn-arc.is-front {
  opacity: 0.18;
  border-bottom-color: rgba(255, 244, 214, 0.34);
}

.tuner-peg-turn-cue.direction-hold .tuner-turn-head,
.tuner-peg-turn-cue.wait .tuner-turn-head {
  width: 0.52rem;
  height: 0.52rem;
  border: 0;
  border-radius: 50%;
  background: var(--turn-color);
  box-shadow:
    0 0 0 0.28rem rgba(255, 255, 255, 0.08),
    0 0 0.75rem var(--turn-soft);
  transform: translate(-50%, -50%);
}

@supports not (color: color-mix(in srgb, white, transparent)) {
  .tuner-turn-arc.is-front {
    border-left-color: rgba(255, 244, 214, 0.5);
    border-right-color: rgba(255, 244, 214, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tuner-turn-arc.is-front,
  .tuner-turn-head,
  .tuner-focus-ring {
    animation: none;
  }
}

.tuner-stage-copy {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  display: grid;
  gap: 0.2rem;
  max-width: 31rem;
  padding: 0.58rem 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(6, 8, 9, 0.52);
  backdrop-filter: blur(16px);
}

.tuner-stage-copy span {
  color: rgba(225, 233, 234, 0.62);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.tuner-stage-copy strong {
  color: rgba(255, 244, 214, 0.97);
  font-size: 0.98rem;
}

.tuner-stage-copy p {
  margin: 0;
  color: rgba(220, 229, 230, 0.66);
  line-height: 1.42;
}

.tuner-pegbox-image-badge {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.44rem 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(8, 11, 12, 0.54);
  color: rgba(236, 242, 244, 0.92);
  box-shadow: 0 0.7rem 1.4rem rgba(0, 0, 0, 0.28);
  font-size: 0.76rem;
}

.tuner-pegbox-image-badge strong {
  color: rgba(255, 236, 190, 0.96);
  font-weight: 600;
}

.tuner-center-panel {
  display: grid;
  grid-template-rows: minmax(0, 0.85fr) auto auto;
  align-content: stretch;
  gap: 0.42rem;
  min-height: 0;
  padding: 0.34rem;
  overflow: hidden;
  position: relative;
}

.tuner-center-panel::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 0%, rgba(226, 199, 120, 0.08), transparent 20%),
    radial-gradient(circle at 86% 18%, rgba(167, 210, 232, 0.05), transparent 26%);
  pointer-events: none;
  content: "";
}

.tuner-readout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.22rem;
}

.tuner-readout-grid .tuner-spec-card {
  min-height: 4.6rem;
}

.tuner-spec-card {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 0.08rem;
  min-height: 0;
  padding: 0.48rem 0.52rem 0.44rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0.65rem 1.2rem rgba(0, 0, 0, 0.12);
}

.tuner-spec-card span {
  color: rgba(221, 229, 230, 0.62);
  font-size: 0.72rem;
}

.tuner-spec-card strong {
  color: rgba(255, 243, 210, 0.97);
  font-size: clamp(1.06rem, 1.2vw, 1.36rem);
  line-height: 1;
}

.tuner-spec-card.is-accurate strong,
.tuner-cent-display.is-accurate strong,
.tuner-cent-display.is-accurate .tuner-cent-copy span {
  color: rgba(201, 216, 141, 0.98);
}

.tuner-spec-card.is-flat strong,
.tuner-cent-display.is-flat strong,
.tuner-cent-display.is-flat .tuner-cent-copy span {
  color: rgba(167, 210, 232, 0.98);
}

.tuner-spec-card.is-sharp strong,
.tuner-cent-display.is-sharp strong,
.tuner-cent-display.is-sharp .tuner-cent-copy span {
  color: rgba(241, 180, 132, 0.98);
}

.tuner-spec-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.48rem;
  margin-top: 0.04rem;
  padding-top: 0.14rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tuner-spec-meta b {
  color: rgba(255, 239, 190, 0.96);
  font-size: 0.92rem;
  font-weight: 760;
}

.tuner-spec-meta i {
  color: rgba(221, 229, 230, 0.54);
  font-style: normal;
  font-size: 0.66rem;
}

.tuner-cent-display {
  --dial-accent: rgba(226, 199, 120, 0.96);
  --dial-soft: rgba(226, 199, 120, 0.18);
  display: grid;
  grid-template-rows: auto minmax(10.2rem, 1fr);
  gap: 0.34rem;
  min-height: 0;
  padding: 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.115);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 115%, rgba(226, 199, 120, 0.13), transparent 42%),
    radial-gradient(circle at 14% 6%, rgba(126, 177, 207, 0.13), transparent 30%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.026) 44%, rgba(5, 8, 10, 0.2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035),
    0 0.85rem 2.1rem rgba(0, 0, 0, 0.2);
}

.tuner-cent-display.is-flat {
  --dial-accent: rgba(126, 177, 207, 0.98);
  --dial-soft: rgba(126, 177, 207, 0.19);
}

.tuner-cent-display.is-sharp {
  --dial-accent: rgba(227, 161, 112, 0.98);
  --dial-soft: rgba(227, 161, 112, 0.2);
}

.tuner-cent-display.is-accurate {
  --dial-accent: rgba(226, 199, 120, 0.98);
  --dial-soft: rgba(201, 216, 141, 0.2);
}

.tuner-cent-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label hint"
    "value hint";
  gap: 0.18rem 0.62rem;
  align-items: center;
  min-width: 0;
  padding: 0.22rem 0.16rem 0.04rem;
}

.tuner-cent-copy .eyebrow {
  grid-area: label;
}

.tuner-cent-copy strong {
  grid-area: value;
  color: rgba(255, 244, 214, 0.98);
  font-size: clamp(2.65rem, 4.1vw, 4.35rem);
  letter-spacing: 0;
  line-height: 0.84;
  text-shadow: 0 0 1.4rem var(--dial-soft);
}

.tuner-cent-copy strong small {
  font-size: 0.46em;
  color: inherit;
}

.tuner-cent-copy span {
  grid-area: hint;
  justify-self: end;
  max-width: 7.4rem;
  padding: 0.42rem 0.56rem;
  border: 1px solid color-mix(in srgb, var(--dial-accent) 34%, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.088), rgba(255, 255, 255, 0.032)),
    var(--dial-soft);
  color: rgba(235, 241, 239, 0.84);
  font-size: 0.73rem;
  line-height: 1.12;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tuner-cent-gauge {
  position: relative;
  min-height: 10.6rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 98%, rgba(255, 255, 255, 0.08), transparent 20%),
    radial-gradient(ellipse at 50% 100%, var(--dial-soft), transparent 38%),
    linear-gradient(180deg, rgba(3, 7, 9, 0.36), rgba(255, 255, 255, 0.035));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    inset 0 -1.4rem 2.6rem rgba(0, 0, 0, 0.18);
}

.tuner-cent-gauge::before {
  position: absolute;
  left: 50%;
  top: 1.2rem;
  z-index: 3;
  width: 2.85rem;
  height: 6.65rem;
  transform: translateX(-50%);
  border-inline: 1px solid rgba(226, 199, 120, 0.42);
  background:
    linear-gradient(90deg, transparent, rgba(226, 199, 120, 0.12) 42%, rgba(226, 199, 120, 0.18) 50%, rgba(226, 199, 120, 0.12) 58%, transparent);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  pointer-events: none;
  content: "";
}

.tuner-cent-gauge::after {
  position: absolute;
  left: 50%;
  bottom: 0.74rem;
  z-index: 4;
  width: 0.66rem;
  height: 0.66rem;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 244, 214, 0.74);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 214, 0.98), rgba(226, 199, 120, 0.58) 48%, rgba(226, 199, 120, 0.12) 72%);
  box-shadow:
    0 0 0 0.22rem rgba(226, 199, 120, 0.1),
    0 0 1.15rem rgba(226, 199, 120, 0.28);
  content: "";
}

.tuner-cent-track {
  position: absolute;
  left: 0.18rem;
  right: 0.18rem;
  top: 50%;
  height: 0.22rem;
  border-radius: 99px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(167, 210, 232, 0.2), rgba(226, 199, 120, 0.26), rgba(241, 180, 132, 0.2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.tuner-cent-track-fill {
  position: absolute;
  left: var(--needle-x, 50%);
  top: 50%;
  width: 0.24rem;
  height: 1.3rem;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 238, 181, 0.98), rgba(226, 199, 120, 0.16));
  transform: translate(-50%, -50%);
  box-shadow: 0 0 1.3rem rgba(226, 199, 120, 0.28);
}

.tuner-cent-knob {
  position: absolute;
  left: var(--needle-x, 50%);
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid rgba(255, 243, 208, 0.92);
  border-radius: 50%;
  background: rgba(255, 243, 208, 0.96);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 0.2rem rgba(255, 243, 208, 0.16),
    0 0 1rem rgba(226, 199, 120, 0.36);
}

.tuner-precision-dial {
  position: absolute;
  left: 50%;
  bottom: 0.72rem;
  width: min(21.5rem, 86%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 999rem 999rem 0 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(5, 8, 10, 0.96) 0 30%, transparent 31%),
    radial-gradient(ellipse at 50% 100%, transparent 0 61%, rgba(255, 255, 255, 0.075) 61.5%, transparent 63%),
    linear-gradient(90deg, rgba(126, 177, 207, 0.08), transparent 34%, rgba(226, 199, 120, 0.12) 50%, transparent 66%, rgba(227, 161, 112, 0.08));
  filter:
    drop-shadow(0 0 1.1rem rgba(126, 177, 207, 0.12))
    drop-shadow(0 0 1.2rem rgba(226, 199, 120, 0.09));
}

.tuner-precision-dial::before {
  position: absolute;
  inset: 4% 4.8% 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-top: 2px solid rgba(255, 247, 220, 0.42);
  border-left: 0;
  border-right: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.045), transparent 38%),
    linear-gradient(90deg, rgba(126, 177, 207, 0.055), transparent 34%, rgba(226, 199, 120, 0.08) 50%, transparent 66%, rgba(227, 161, 112, 0.055));
  box-shadow:
    0 -0.12rem 0.75rem rgba(226, 199, 120, 0.12),
    inset 0 0.65rem 1.35rem rgba(255, 255, 255, 0.028);
  content: "";
}

.tuner-precision-dial::after {
  position: absolute;
  left: 50%;
  top: 4.2%;
  width: 1.45rem;
  height: 0.2rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(226, 199, 120, 0.76);
  box-shadow:
    0 0 0.58rem rgba(226, 199, 120, 0.38),
    0 0 1.35rem rgba(226, 199, 120, 0.2);
  content: "";
}

.tuner-precision-dial > i:not(.tuner-dial-arc),
.tuner-precision-dial > i.tuner-dial-arc {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 50%;
  transform-origin: 50% 100%;
  transform: rotate(calc(-67.5deg + (var(--tick) * 5.625deg)));
}

.tuner-precision-dial > i:not(.tuner-dial-arc)::before {
  position: absolute;
  left: 50%;
  top: 2%;
  width: 1px;
  height: 0.28rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(232, 238, 230, 0.34);
  content: "";
}

.tuner-precision-dial > i.is-major::before {
  height: 0.62rem;
  background: rgba(238, 223, 168, 0.64);
}

.tuner-precision-dial > i.is-center::before {
  height: 0.95rem;
  width: 2px;
  background: rgba(255, 246, 218, 0.92);
  box-shadow: 0 0 0.8rem rgba(255, 239, 180, 0.34);
}

.tuner-dial-arc {
  display: none;
}

.tuner-dial-zero {
  position: absolute;
  left: 50%;
  bottom: 11%;
  width: 2px;
  height: 69%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 240, 183, 0.24) 44%, rgba(255, 240, 183, 0.04));
  box-shadow: 0 0 1.05rem rgba(255, 240, 183, 0.24);
}

.tuner-dial-needle,
.tuner-dial-glow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform-origin: 50% 100%;
  transform: rotate(var(--needle-deg, 0deg));
}

.tuner-dial-needle {
  width: 0.24rem;
  height: 62%;
  margin-left: -0.12rem;
  border-radius: 999px 999px 40% 40%;
  background:
    linear-gradient(180deg, rgba(255, 249, 226, 0.98), var(--dial-accent) 42%, rgba(255, 255, 255, 0.1) 78%, transparent);
  clip-path: polygon(50% 0, 100% 70%, 50% 100%, 0 70%);
  filter:
    drop-shadow(0 0 0.45rem var(--dial-soft))
    drop-shadow(0 0 0.85rem color-mix(in srgb, var(--dial-accent) 36%, transparent));
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tuner-dial-glow {
  width: 0.92rem;
  height: 0.92rem;
  margin-left: -0.46rem;
  margin-bottom: calc(62% - 0.46rem);
  border-radius: 50%;
  border: 1px solid rgba(255, 247, 220, 0.86);
  background: radial-gradient(circle, rgba(255, 249, 226, 0.96), var(--dial-accent) 58%, rgba(255, 255, 255, 0.02));
  box-shadow:
    0 0 0 0.18rem var(--dial-soft),
    0 0 1.3rem color-mix(in srgb, var(--dial-accent) 46%, transparent);
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dial-side,
.dial-number {
  position: absolute;
  z-index: 2;
  color: rgba(232, 238, 235, 0.72);
  font-size: 0.84rem;
  line-height: 1;
}

.dial-side {
  top: 0.92rem;
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(7, 10, 12, 0.48);
  backdrop-filter: blur(12px);
}

.dial-side.is-flat {
  left: 6%;
  color: rgba(167, 210, 232, 0.96);
}

.dial-side.is-sharp {
  right: 6%;
  color: rgba(241, 180, 132, 0.96);
}

.dial-number {
  bottom: 1.18rem;
  padding: 0.16rem 0.26rem;
  border-radius: 999px;
  background: rgba(4, 7, 9, 0.46);
  font-size: 0.72rem;
}

.dial-left { left: 12%; }
.dial-mid {
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 239, 190, 0.92);
}
.dial-right { right: 12%; }

.tuner-core-cue {
  display: grid;
  gap: 0.12rem;
  padding: 0.42rem 0.46rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.02);
}

.tuner-core-cue strong {
  color: rgba(255, 244, 214, 0.97);
  font-size: 1rem;
}

.tuner-core-cue p {
  margin: 0;
  color: rgba(220, 229, 230, 0.66);
  line-height: 1.28;
  font-size: 0.76rem;
}

.tuner-side-panel {
  display: grid;
  min-height: 0;
  padding: 0.34rem;
}

.tuner-control-deck {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(7.4rem, 0.86fr) auto auto minmax(4.7rem, 0.54fr);
  gap: 0.42rem;
  height: 100%;
  padding: 0.24rem;
  min-height: 0;
  overflow: hidden;
}

.tuner-auto-listening-card,
.tuner-control-group,
.tuner-guidance-card,
.tuner-mic-card {
  display: grid;
  align-content: start;
  gap: 0.16rem;
  min-width: 0;
}

.tuner-control-group {
  padding: 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.02);
}

.tuner-control-group > span {
  font-size: 0.76rem;
  font-weight: 680;
}

.tuner-auto-toggle.is-active,
.tuner-control-group button.is-active,
.tuner-string-status-card.is-current {
  border-color: rgba(201, 216, 141, 0.4);
  background: rgba(201, 216, 141, 0.13);
  color: rgba(237, 247, 199, 0.97);
}

.tuner-auto-listening-card {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: 0.68rem 0.72rem 0.52rem;
  border: 1px solid rgba(98, 212, 238, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 68%, rgba(76, 211, 245, 0.2), transparent 35%),
    radial-gradient(circle at 12% 12%, rgba(76, 211, 245, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018));
}

.tuner-auto-listening-card::before {
  position: absolute;
  inset: auto 12% 7% 12%;
  height: 3.1rem;
  content: "";
  background: radial-gradient(ellipse at center, rgba(76, 211, 245, 0.25), transparent 62%);
  filter: blur(18px);
  pointer-events: none;
  opacity: 0.18;
}

.tuner-auto-listening-card.is-working::before {
  opacity: 1;
  animation: tunerListeningGlow 2.8s ease-in-out infinite;
}

.tuner-auto-listening-card.is-demo {
  border-color: rgba(226, 199, 120, 0.24);
  background:
    radial-gradient(circle at 50% 68%, rgba(226, 199, 120, 0.13), transparent 36%),
    radial-gradient(circle at 12% 12%, rgba(140, 233, 242, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018));
}

.tuner-auto-listening-card.is-demo .tuner-detect-icon {
  color: rgba(255, 232, 178, 0.96);
  background: rgba(226, 199, 120, 0.12);
}

.tuner-auto-listening-card.is-paused .tuner-detect-icon {
  color: rgba(218, 224, 224, 0.7);
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 0 0.2rem rgba(255, 255, 255, 0.035),
    0 0 0.85rem rgba(0, 0, 0, 0.18);
}

.tuner-auto-listening-card.is-paused .tuner-detect-head strong {
  color: rgba(230, 235, 235, 0.72);
}

.tuner-auto-listening-card.is-working .wave-front {
  opacity: 0.92;
  animation: tunerWaveScan 2.8s linear infinite;
}

.tuner-auto-listening-card.is-working.is-demo .wave-front {
  opacity: 0.66;
  animation-duration: 4.8s;
}

.tuner-auto-listening-card small {
  color: rgba(221, 229, 230, 0.62);
  display: -webkit-box;
  overflow: hidden;
  max-width: 18rem;
  font-size: 0.74rem;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tuner-retry-mic-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.42rem;
  margin-top: 0.58rem;
  padding: 0.48rem 0.72rem;
  border: 1px solid rgba(226, 181, 105, 0.3);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(226, 181, 105, 0.26), rgba(122, 173, 255, 0.13)),
    rgba(255, 255, 255, 0.04);
  color: rgba(255, 244, 225, 0.96);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 820;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0.72rem 1.45rem rgba(0, 0, 0, 0.18),
    0 0 1.35rem rgba(226, 181, 105, 0.1);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.tuner-retry-mic-button:hover {
  transform: translateY(-1px);
  border-color: rgba(226, 181, 105, 0.48);
  background:
    linear-gradient(135deg, rgba(226, 181, 105, 0.34), rgba(122, 173, 255, 0.16)),
    rgba(255, 255, 255, 0.05);
}

.tuner-retry-mic-button:disabled {
  cursor: wait;
  opacity: 0.66;
  transform: none;
}

.tuner-detect-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.32rem;
}

.tuner-detect-icon {
  display: grid;
  width: 1.72rem;
  height: 1.72rem;
  place-items: center;
  border-radius: 50%;
  color: rgba(100, 225, 255, 0.98);
  background: rgba(76, 211, 245, 0.12);
  box-shadow:
    0 0 0 0.28rem rgba(76, 211, 245, 0.06),
    0 0 1.2rem rgba(76, 211, 245, 0.25);
}

.tuner-detect-head strong {
  color: rgba(108, 222, 255, 0.98);
  font-size: 1rem;
  line-height: 1.05;
}

.tuner-detect-wave {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 5%;
  z-index: 1;
  width: 86%;
  height: 38%;
  overflow: visible;
}

.wave-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wave-back {
  stroke: rgba(76, 211, 245, 0.2);
  stroke-width: 5;
  filter: blur(5px);
}

.wave-front {
  stroke: url(#tunerWaveGlow);
  stroke-width: 2.2;
  stroke-dasharray: 380;
  stroke-dashoffset: 0;
  opacity: 0.28;
  filter: drop-shadow(0 0 8px rgba(76, 211, 245, 0.28));
  animation: none;
}

.tuner-control-group > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.24rem;
}

.tuner-control-group:nth-of-type(3) > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tuner-control-group:nth-of-type(4) > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tuner-control-group button {
  min-height: 2rem;
  padding: 0.28rem 0.3rem;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 760;
}

.tuner-guidance-card {
  align-content: center;
  gap: 0.18rem;
  min-height: 0;
  padding: 0.58rem 0.66rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 20%, rgba(226, 199, 120, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018));
}

.tuner-guidance-card.tighten {
  border-color: rgba(167, 210, 232, 0.22);
  background:
    radial-gradient(circle at 20% 18%, rgba(167, 210, 232, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018));
}

.tuner-guidance-card.loosen {
  border-color: rgba(241, 180, 132, 0.22);
  background:
    radial-gradient(circle at 20% 18%, rgba(241, 180, 132, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018));
}

.tuner-guidance-card span {
  color: rgba(228, 199, 127, 0.72);
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0.08em;
}

.tuner-guidance-card strong {
  color: rgba(255, 244, 214, 0.97);
  font-size: clamp(0.98rem, 1.12vw, 1.16rem);
  line-height: 1.12;
}

.tuner-guidance-card p {
  margin: 0;
  color: rgba(231, 238, 240, 0.74);
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.74rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tuner-guidance-card small {
  color: rgba(221, 229, 230, 0.54);
  font-size: 0.66rem;
}

.tuner-permission-diagnostics {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.46rem;
  padding: 0.58rem;
  border: 1px solid rgba(226, 199, 120, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 10%, rgba(226, 199, 120, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.016));
}

.tuner-diagnostics-head {
  display: grid;
  gap: 0.16rem;
}

.tuner-diagnostics-head span {
  color: rgba(226, 199, 120, 0.72);
  font-size: 0.66rem;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.tuner-diagnostics-head strong {
  color: rgba(255, 244, 214, 0.96);
  font-size: 0.9rem;
}

.tuner-diagnostics-head p {
  margin: 0;
  color: rgba(221, 229, 230, 0.58);
  font-size: 0.68rem;
  line-height: 1.34;
}

.tuner-diagnostics-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.32rem;
}

.tuner-diagnostics-list article {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 0.62rem;
  background: rgba(255, 255, 255, 0.026);
}

.tuner-diagnostics-list span {
  color: rgba(221, 229, 230, 0.48);
  font-size: 0.62rem;
}

.tuner-diagnostics-list strong {
  overflow: hidden;
  color: rgba(238, 244, 244, 0.78);
  font-size: 0.68rem;
  line-height: 1.24;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tuner-diagnostics-list .is-ok {
  border-color: rgba(88, 235, 155, 0.18);
}

.tuner-diagnostics-list .is-active {
  border-color: rgba(76, 211, 245, 0.24);
}

.tuner-diagnostics-list .is-warning,
.tuner-diagnostics-list .is-error {
  border-color: rgba(226, 181, 105, 0.22);
}

.tuner-diagnostics-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.34rem;
}

.tuner-diagnostics-actions .glass-button {
  min-height: 2.18rem;
  padding-inline: 0.48rem;
  font-size: 0.72rem;
}

.tuner-mic-card {
  padding: 0.4rem 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.tuner-readout-panel .tuner-mic-card {
  grid-column: 1 / -1;
}

.tuner-mic-card strong {
  color: rgba(255, 243, 209, 0.95);
  line-height: 1.15;
}

.tuner-mic-card small {
  color: rgba(220, 229, 230, 0.62);
  line-height: 1.3;
  font-size: 0.68rem;
}

.tuner-string-status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.22rem;
  min-height: 4.1rem;
  overflow: hidden;
}

.tuner-string-status-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: 0.1rem 0.36rem;
  align-items: center;
  width: 100%;
  padding: 0.34rem 0.36rem;
  min-height: 0;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.02);
}

.tuner-string-status-card > div {
  display: grid;
  grid-column: 1;
  grid-row: 1 / 3;
  gap: 0.12rem;
  min-width: 0;
}

.tuner-string-status-card strong {
  color: rgba(255, 238, 194, 0.96);
  font-size: 1.08rem;
  line-height: 1;
}

.tuner-string-status-card b {
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: end;
  align-self: center;
  padding: 0.22rem 0.44rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(224, 232, 234, 0.76);
  font-size: 0.76rem;
}

.tuner-string-status-card p {
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: end;
  align-self: center;
  margin: 0;
  color: rgba(236, 240, 238, 0.9);
  font-size: 0.76rem;
  font-weight: 760;
}

.tuner-string-status-card small {
  grid-column: 1 / -1;
  justify-self: start;
  display: block;
  width: 100%;
  height: 0.18rem;
  margin-top: 0.08rem;
  overflow: hidden;
  text-indent: -999px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(226, 199, 120, 0.42), rgba(255, 255, 255, 0.08));
}

.tuner-string-status-card.is-tuned {
  border-color: rgba(201, 216, 141, 0.35);
  background:
    linear-gradient(145deg, rgba(201, 216, 141, 0.16), rgba(226, 199, 120, 0.08)),
    rgba(255, 255, 255, 0.04);
}

.tuner-string-status-card.is-tuned b {
  background: rgba(201, 216, 141, 0.16);
  color: rgba(235, 247, 190, 0.96);
}

.tuner-string-status-card.is-close b {
  color: rgba(255, 235, 181, 0.96);
}

.tuner-string-status-card.is-flat p {
  color: rgba(168, 213, 238, 0.96);
}

.tuner-string-status-card.is-sharp p {
  color: rgba(246, 188, 144, 0.96);
}

@keyframes tunerGlowPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.72;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
  }
}

@keyframes tunerPegFocusPulse {
  0%, 100% {
    transform: translate(-50%, -50%) perspective(22rem) rotateX(64deg) rotateZ(-10deg) scale(0.98);
    opacity: 0.58;
  }
  50% {
    transform: translate(-50%, -50%) perspective(22rem) rotateX(64deg) rotateZ(-10deg) scale(1.06);
    opacity: 0.96;
  }
}

@keyframes tunerPegOrbitSweep {
  0% {
    opacity: 0.55;
    transform: translate(-50%, -50%) rotateX(64deg) rotateZ(-18deg);
  }
  48% {
    opacity: 1;
    transform: translate(-50%, -50%) rotateX(64deg) rotateZ(14deg);
  }
  100% {
    opacity: 0.62;
    transform: translate(-50%, -50%) rotateX(64deg) rotateZ(34deg);
  }
}

@keyframes tunerPegOrbitSweepReverse {
  0% {
    opacity: 0.55;
    transform: translate(-50%, -50%) rotateX(64deg) rotateZ(18deg);
  }
  48% {
    opacity: 1;
    transform: translate(-50%, -50%) rotateX(64deg) rotateZ(-14deg);
  }
  100% {
    opacity: 0.62;
    transform: translate(-50%, -50%) rotateX(64deg) rotateZ(-34deg);
  }
}

@keyframes tunerPegHeadCw {
  0% {
    opacity: 0.62;
    transform: translate(1.12rem, -0.5rem) rotate(22deg) scale(0.86);
  }
  48% {
    opacity: 1;
    transform: translate(1.62rem, 0.62rem) rotate(42deg) scale(1);
  }
  100% {
    opacity: 0.68;
    transform: translate(1.18rem, 0.88rem) rotate(62deg) scale(0.9);
  }
}

@keyframes tunerPegHeadCcw {
  0% {
    opacity: 0.62;
    transform: translate(-1.68rem, -0.5rem) rotate(242deg) scale(0.86);
  }
  48% {
    opacity: 1;
    transform: translate(-2.05rem, 0.58rem) rotate(222deg) scale(1);
  }
  100% {
    opacity: 0.68;
    transform: translate(-1.7rem, 0.88rem) rotate(202deg) scale(0.9);
  }
}

@keyframes tunerWaveScan {
  0% {
    stroke-dashoffset: 760;
    opacity: 0.56;
  }
  45% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.72;
  }
}

@keyframes tunerListeningGlow {
  0%, 100% {
    transform: scaleX(0.82);
    opacity: 0.42;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@media (max-width: 1180px) {
  .professional-tuner {
    height: auto;
    overflow: visible;
  }

  .tuner-workbench {
    grid-template-columns: 1fr;
  }

  .tuner-side-panel {
    padding-top: 0;
  }

  .tuner-control-deck {
    grid-template-rows: auto auto auto;
  }

  .tuner-header {
    grid-template-columns: 1fr;
  }

  .tuner-live-strip {
    justify-content: flex-start;
  }

  .tuner-visual-summary {
    grid-template-columns: 1fr;
  }

  .tuner-cent-display {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .tuner-header,
  .tuner-string-status-strip {
    grid-template-columns: 1fr;
  }

  .tuner-live-strip {
    justify-content: flex-start;
  }

  .tuner-pegbox-stage {
    min-height: 21rem;
  }

  .tuner-auto-listening-card {
    min-height: 12rem;
  }

  .tuner-string-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tuner-cent-gauge > i {
    transform:
      rotate(calc((var(--tick) - 12) * 5.75deg))
      translateY(-7rem);
  }
}

/* Apple premium liquid-glass button skin: global frontend polish layer. */
:root {
  --apple-glass-button-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.135), rgba(255, 255, 255, 0.048)),
    rgba(255, 255, 255, 0.058);
  --apple-glass-button-border: rgba(255, 255, 255, 0.18);
  --apple-glass-button-border-hover: rgba(255, 244, 215, 0.38);
  --apple-glass-button-text: rgba(248, 251, 253, 0.92);
  --apple-glass-button-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035),
    0 0.65rem 1.8rem rgba(0, 0, 0, 0.2);
  --apple-glass-button-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0.85rem 2.4rem rgba(0, 0, 0, 0.25),
    0 0 1.6rem rgba(226, 199, 120, 0.08);
  --apple-glass-primary-bg:
    linear-gradient(180deg, rgba(255, 233, 179, 0.88), rgba(211, 171, 91, 0.78)),
    rgba(226, 199, 120, 0.72);
  --apple-glass-primary-text: rgba(18, 13, 6, 0.96);
}

button,
.glass-button,
.portal-action,
.member-pill,
.link-button,
.report-ghost-action,
.report-text-action,
.support-link-button,
.support-more-button,
.teacher-file-action,
.score-generate-action,
.generator-add-button,
.generator-link-button,
.report-history-button,
.report-compare-button {
  border-color: var(--apple-glass-button-border);
  background: var(--apple-glass-button-bg);
  color: var(--apple-glass-button-text);
  box-shadow: var(--apple-glass-button-shadow);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  transition:
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

button:hover,
.glass-button:hover,
.portal-action:hover,
.member-pill:hover,
.link-button:hover,
.report-ghost-action:hover,
.report-text-action:hover,
.support-link-button:hover,
.support-more-button:hover,
.teacher-file-action:hover,
.score-generate-action:hover,
.generator-add-button:hover,
.generator-link-button:hover,
.report-history-button:hover,
.report-compare-button:hover {
  border-color: var(--apple-glass-button-border-hover);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.065)),
    rgba(226, 199, 120, 0.08);
  color: rgba(255, 248, 230, 0.98);
  box-shadow: var(--apple-glass-button-shadow-hover);
  transform: translateY(-1px);
}

button:active,
.glass-button:active,
.portal-action:active,
.member-pill:active,
.link-button:active,
.report-ghost-action:active,
.report-text-action:active,
.support-link-button:active,
.support-more-button:active,
.teacher-file-action:active,
.score-generate-action:active,
.generator-add-button:active,
.generator-link-button:active,
.report-history-button:active,
.report-compare-button:active {
  transform: translateY(0) scale(0.985);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0.35rem 1rem rgba(0, 0, 0, 0.18);
}

button.primary,
button.is-active,
button.active,
.glass-button.primary,
.portal-action.primary,
.score-upload-primary,
.score-generate-action,
.metronome-start-action,
.teacher-send-button,
.support-primary-action,
.report-ai-teacher-button:not(.is-locked),
.membership-plan-card button,
.membership-one-screen .glass-button.primary {
  border-color: rgba(255, 226, 162, 0.5);
  background: var(--apple-glass-primary-bg);
  color: var(--apple-glass-primary-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0.9rem 2.4rem rgba(226, 199, 120, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.035);
}

button:disabled,
button[disabled],
.glass-button:disabled,
.portal-action:disabled,
.is-disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Apple premium glass treatment for the home portal cards. */
.portal-strip {
  perspective: 1200px;
}

.portal-card {
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: clamp(1rem, 1.15vw, 1.25rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    linear-gradient(145deg, rgba(226, 199, 120, 0.075), rgba(113, 198, 207, 0.045) 46%, rgba(5, 8, 12, 0.58)),
    rgba(8, 12, 15, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035),
    0 1.5rem 4.4rem rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(30px) saturate(1.2);
  -webkit-backdrop-filter: blur(30px) saturate(1.2);
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.portal-card:hover {
  border-color: rgba(255, 232, 180, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.045)),
    linear-gradient(145deg, rgba(226, 199, 120, 0.095), rgba(113, 198, 207, 0.06) 46%, rgba(5, 8, 12, 0.62)),
    rgba(10, 15, 18, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 1.8rem 5rem rgba(0, 0, 0, 0.48),
    0 0 2.2rem rgba(226, 199, 120, 0.07);
  transform: translateY(-3px);
}

.portal-card::after {
  opacity: 0.92;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 18%),
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.06), transparent 24%),
    linear-gradient(180deg, transparent 0 32%, rgba(4, 6, 8, 0.68) 70%, rgba(3, 4, 5, 0.92) 100%);
}

.portal-card:not(.portal-bowing) .portal-visual {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: clamp(0.8rem, 0.9vw, 1rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1rem 2.4rem rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(22px) saturate(1.14);
  -webkit-backdrop-filter: blur(22px) saturate(1.14);
}

.portal-card:not(.portal-bowing) .portal-visual::before {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.12), transparent 28%),
    radial-gradient(circle at 78% 22%, rgba(226, 199, 120, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018));
}

.portal-card h3 {
  color: rgba(255, 244, 218, 0.98);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 1.25rem rgba(226, 199, 120, 0.12);
}

.portal-card p {
  color: rgba(226, 233, 235, 0.68);
}

.portal-action {
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.8rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.07);
  color: rgba(255, 246, 226, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0.7rem 1.8rem rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(20px) saturate(1.16);
  -webkit-backdrop-filter: blur(20px) saturate(1.16);
}

.portal-action:hover {
  border-color: rgba(255, 232, 180, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 237, 190, 0.3), rgba(255, 255, 255, 0.07)),
    rgba(226, 199, 120, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0.9rem 2.25rem rgba(0, 0, 0, 0.26),
    0 0 1.5rem rgba(226, 199, 120, 0.12);
}

/* Membership page fits as a single compact offer sheet. */
html[data-active-module] .content-grid[data-module="membership"] {
  align-content: stretch;
  grid-auto-rows: minmax(0, 1fr);
  height: calc(100dvh - var(--page-pad-y) * 2 - var(--avatar-size) - clamp(1rem, 1.7vw, 1.6rem) - 0.35rem);
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

.content-grid[data-module="membership"] > .membership-one-screen {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  grid-template-rows: auto minmax(2.2rem, auto) auto minmax(0, 1fr);
  gap: clamp(0.24rem, 0.42vh, 0.38rem);
  padding: clamp(0.3rem, 0.55vw, 0.48rem) clamp(0.42rem, 0.72vw, 0.62rem);
}

.content-grid[data-module="membership"] .membership-comparison {
  align-self: stretch;
  overflow: hidden;
  min-height: 0;
}

.content-grid[data-module="membership"] .membership-plan-grid {
  gap: clamp(0.42rem, 0.72vw, 0.72rem);
}

.content-grid[data-module="membership"] .membership-plan-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(7.5rem, 0.85fr);
  grid-template-rows: auto auto;
  column-gap: clamp(0.5rem, 0.8vw, 0.9rem);
  row-gap: clamp(0.26rem, 0.42vw, 0.38rem);
  align-items: center;
  padding: clamp(0.32rem, 0.52vw, 0.48rem) clamp(0.42rem, 0.68vw, 0.72rem);
  border-radius: calc(var(--radius) * 0.58);
}

.content-grid[data-module="membership"] .membership-plan-head {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  align-content: start;
  gap: 0.26rem;
}

.content-grid[data-module="membership"] .membership-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem;
  align-items: center;
}

.content-grid[data-module="membership"] .membership-plan-card h4 {
  margin: 0;
  color: rgba(250, 252, 255, 0.98);
  font-size: clamp(1rem, 1.18vw, 1.22rem);
  line-height: 1.08;
  font-weight: 780;
}

.content-grid[data-module="membership"] .membership-plan-card button {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  align-self: center;
  min-width: clamp(5.6rem, 8vw, 6.6rem);
  min-height: clamp(1.7rem, 2.25vh, 2rem);
  padding: 0.22rem 0.9rem;
  font-size: clamp(0.8rem, 0.92vw, 0.96rem);
}

.content-grid[data-module="membership"] .membership-price {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-content: flex-end;
  align-self: center;
  margin: 0;
  padding: 0;
  transform: none;
  min-height: 0;
}

.content-grid[data-module="membership"] .membership-price small {
  font-size: clamp(0.72rem, 0.82vw, 0.86rem);
}

.content-grid[data-module="membership"] .membership-price strong {
  font-size: clamp(2.2rem, 3.35vw, 3.35rem);
  letter-spacing: -0.02em;
}

.content-grid[data-module="membership"] .membership-price em {
  font-size: clamp(0.6rem, 0.7vw, 0.74rem);
}

.content-grid[data-module="membership"] .membership-plan-badge {
  min-height: 1.02rem;
  padding-inline: 0.44rem;
  font-size: clamp(0.58rem, 0.66vw, 0.72rem);
}

.content-grid[data-module="membership"] .membership-plan-note {
  font-size: clamp(0.52rem, 0.58vw, 0.64rem);
}

.content-grid[data-module="membership"] .membership-upgrade-note {
  min-height: 1.15rem;
  padding: 0.18rem 0.36rem;
  font-size: clamp(0.56rem, 0.62vw, 0.68rem);
  line-height: 1.16;
}

.content-grid[data-module="membership"] .membership-comparison-title strong {
  font-size: clamp(0.82rem, 0.92vw, 0.94rem);
}

.content-grid[data-module="membership"] .membership-comparison-title span {
  font-size: clamp(0.56rem, 0.62vw, 0.68rem);
}

.content-grid[data-module="membership"] .membership-comparison-row > * {
  min-height: clamp(1.22rem, 2.1vh, 1.5rem);
  padding: clamp(0.1rem, 0.2vw, 0.18rem);
  font-size: clamp(0.58rem, 0.68vw, 0.76rem);
  line-height: 1.04;
}

.content-grid[data-module="membership"] .membership-check,
.content-grid[data-module="membership"] .membership-cross,
.content-grid[data-module="membership"] .membership-level {
  min-width: 0.84rem;
  min-height: 0.84rem;
}

.content-grid[data-module="membership"] .membership-level {
  padding: 0.04rem 0.24rem;
  font-size: clamp(0.52rem, 0.6vw, 0.66rem);
}

.content-grid[data-module="membership"] .membership-current-pill {
  padding: 0.22rem 0.48rem;
}

.content-grid[data-module="membership"] .membership-current-pill strong {
  font-size: clamp(0.84rem, 0.94vw, 1rem);
}

.content-grid[data-module="membership"] .membership-current-pill small {
  font-size: clamp(0.56rem, 0.62vw, 0.68rem);
}

.content-grid[data-module="membership"] .membership-one-screen .panel-header h3 {
  font-size: clamp(1rem, 1.16vw, 1.12rem);
}

.content-grid[data-module="membership"] .membership-one-screen .panel-header .muted {
  font-size: clamp(0.58rem, 0.66vw, 0.72rem);
}

.content-grid[data-module="membership"] > .membership-one-screen {
  grid-template-rows: auto minmax(1.65rem, auto) auto minmax(0, 1fr);
  gap: clamp(0.18rem, 0.28vh, 0.26rem);
  padding: clamp(0.28rem, 0.46vw, 0.4rem) clamp(0.38rem, 0.62vw, 0.56rem);
}

.content-grid[data-module="membership"] .membership-unlock-callout {
  min-height: clamp(2.25rem, 3.5vh, 2.7rem);
  padding: clamp(0.34rem, 0.48vw, 0.42rem);
}

.content-grid[data-module="membership"] .membership-upgrade-note {
  min-height: 0.84rem;
  padding: 0.1rem 0.26rem;
}

.content-grid[data-module="membership"] .membership-comparison-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.16rem;
  min-height: 0;
}

.content-grid[data-module="membership"] .membership-comparison {
  height: 100%;
  grid-auto-rows: minmax(1.1rem, 1fr);
  align-content: stretch;
}

.content-grid[data-module="membership"] .membership-comparison-row {
  min-height: 0;
}

.content-grid[data-module="membership"] .membership-comparison-row > * {
  min-height: clamp(0.92rem, 1.48vh, 1.08rem);
  padding: clamp(0.04rem, 0.1vw, 0.08rem);
  font-size: clamp(0.52rem, 0.58vw, 0.66rem);
}

.content-grid[data-module="membership"] .membership-comparison-title {
  margin-top: 0;
}

.content-grid[data-module="membership"] .membership-comparison-title strong {
  font-size: clamp(0.9rem, 1.02vw, 1.02rem);
}

.content-grid[data-module="membership"] .membership-comparison-title span {
  font-size: clamp(0.52rem, 0.58vw, 0.62rem);
}

.content-grid[data-module="membership"] .membership-current-pill {
  padding: 0.14rem 0.34rem;
}

.content-grid[data-module="membership"] .membership-current-pill strong {
  font-size: clamp(0.7rem, 0.8vw, 0.82rem);
}

.content-grid[data-module="membership"] .membership-current-pill small {
  font-size: clamp(0.42rem, 0.48vw, 0.52rem);
}

/* AI teacher: narrow the prescription column and give more room to the live player. */
.content-grid[data-module="teacher"] .teacher-answer-layout {
  grid-template-columns: minmax(24rem, 0.82fr) minmax(32rem, 1.18fr);
}

.content-grid[data-module="teacher"] .teacher-answer-card {
  padding: clamp(0.72rem, 1vw, 0.98rem);
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
}

.content-grid[data-module="teacher"] .teacher-answer-head h3 {
  font-size: clamp(1.42rem, 1.86vw, 2.12rem);
}

.content-grid[data-module="teacher"] .teacher-direct-answer p,
.content-grid[data-module="teacher"] .teacher-reason-panel p {
  max-width: 42rem;
}

.content-grid[data-module="teacher"] .teacher-next-actions {
  grid-template-columns: minmax(0, 1fr) auto;
}

.content-grid[data-module="teacher"] .teacher-demo-card {
  padding: clamp(0.9rem, 1.18vw, 1.14rem);
}

.content-grid[data-module="teacher"] .teacher-player-embed-card {
  min-height: 21rem;
}

.content-grid[data-module="teacher"] .teacher-player-embed-shell {
  min-height: clamp(16rem, 39vh, 23.5rem);
}

@media (max-width: 1280px) {
  .content-grid[data-module="teacher"] .teacher-answer-layout {
    grid-template-columns: minmax(22rem, 0.92fr) minmax(25rem, 1.08fr);
  }
}

/* AI teacher: keep chat bubbles and the advice panel inside the same premium glass language. */
.content-grid[data-module="teacher"] .teacher-message.is-user > p,
.content-grid[data-module="teacher"] .teacher-message.is-user .teacher-message-card {
  border-color: rgba(226, 181, 105, 0.24);
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 226, 162, 0.16), transparent 42%),
    radial-gradient(circle at 88% 18%, rgba(106, 169, 250, 0.11), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)),
    rgba(8, 11, 16, 0.76);
  color: rgba(252, 253, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035),
    0 0.9rem 1.8rem rgba(0, 0, 0, 0.24),
    0 0 1.4rem rgba(106, 169, 250, 0.06);
}

.content-grid[data-module="teacher"] .teacher-message.is-user:hover p,
.content-grid[data-module="teacher"] .teacher-message.is-user.is-active p {
  transform: translateY(1px);
  border-color: rgba(226, 181, 105, 0.4);
  background:
    radial-gradient(circle at 18% 0%, rgba(226, 181, 105, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(3, 6, 10, 0.86);
  color: rgba(255, 244, 218, 0.98);
  box-shadow:
    inset 0 0.12rem 0.7rem rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(226, 181, 105, 0.12),
    0 0.45rem 1.2rem rgba(0, 0, 0, 0.22),
    0 0 1.8rem rgba(226, 181, 105, 0.1);
}

.content-grid[data-module="teacher"] .teacher-answer-card {
  height: 100%;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: clamp(0.58rem, 0.82vw, 0.82rem);
  overflow: hidden;
}

.content-grid[data-module="teacher"] .teacher-answer-head {
  align-items: center;
}

.content-grid[data-module="teacher"] .teacher-answer-head h3 {
  font-size: clamp(1.65rem, 2.2vw, 2.45rem);
}

.content-grid[data-module="teacher"] .teacher-advice-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(0.48rem, 0.72vw, 0.68rem);
  min-height: 0;
}

.content-grid[data-module="teacher"] .teacher-direct-answer,
.content-grid[data-module="teacher"] .teacher-reason-panel {
  align-content: start;
  min-height: 0;
  padding: clamp(0.62rem, 0.86vw, 0.78rem);
  border: 1px solid rgba(236, 243, 255, 0.1);
  border-radius: 0.8rem;
  background:
    radial-gradient(circle at 12% 0%, rgba(226, 181, 105, 0.09), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(5, 8, 13, 0.56);
}

.content-grid[data-module="teacher"] .teacher-direct-answer p,
.content-grid[data-module="teacher"] .teacher-reason-panel p {
  display: -webkit-box;
  overflow: hidden;
  max-width: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.content-grid[data-module="teacher"] .teacher-step-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.5rem, 0.75vw, 0.72rem);
  align-content: stretch;
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.66rem, 0.9vw, 0.82rem);
  border: 1px solid rgba(236, 243, 255, 0.1);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 8% 8%, rgba(226, 181, 105, 0.1), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(106, 169, 250, 0.08), transparent 36%),
    rgba(2, 5, 9, 0.42);
}

.content-grid[data-module="teacher"] .teacher-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.content-grid[data-module="teacher"] .teacher-step-head span {
  color: rgba(220, 229, 239, 0.55);
  font-size: clamp(0.68rem, 0.78vw, 0.78rem);
  font-weight: 620;
  white-space: nowrap;
}

.content-grid[data-module="teacher"] .teacher-step-panel ol {
  display: grid;
  grid-auto-rows: minmax(3.45rem, 1fr);
  gap: clamp(0.42rem, 0.62vw, 0.6rem);
  height: 100%;
  min-height: 0;
}

.content-grid[data-module="teacher"] .teacher-step-panel li {
  min-height: 0;
}

.content-grid[data-module="teacher"] .teacher-step-panel li button {
  height: 100%;
  min-height: 0;
  padding: clamp(0.58rem, 0.82vw, 0.78rem);
  border-color: rgba(236, 243, 255, 0.12);
  border-radius: 0.82rem;
  background:
    radial-gradient(circle at 0% 50%, rgba(226, 181, 105, 0.11), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(8, 12, 18, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0.65rem 1.45rem rgba(0, 0, 0, 0.2);
}

.content-grid[data-module="teacher"] .teacher-step-panel li button:hover,
.content-grid[data-module="teacher"] .teacher-step-panel li button.is-active {
  border-color: rgba(226, 181, 105, 0.42);
  background:
    radial-gradient(circle at 0% 50%, rgba(226, 181, 105, 0.18), transparent 42%),
    radial-gradient(circle at 92% 18%, rgba(106, 169, 250, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.026)),
    rgba(7, 10, 15, 0.82);
}

.content-grid[data-module="teacher"] .teacher-step-panel li button b {
  background:
    radial-gradient(circle, rgba(185, 246, 241, 0.16), transparent 68%),
    rgba(106, 169, 250, 0.12);
}

.content-grid[data-module="teacher"] .teacher-step-panel li button span {
  font-size: clamp(0.86rem, 0.98vw, 1rem);
  line-height: 1.35;
}

@media (max-width: 920px) {
  .content-grid[data-module="teacher"] .teacher-advice-summary {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="teacher"] .teacher-step-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.18rem;
  }

  .content-grid[data-module="teacher"] .teacher-step-head span {
    white-space: normal;
  }
}

/* Practice report: reference-image layout with the existing dark premium palette. */
html[data-active-module] .content-grid[data-module="reports"] {
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
}

.content-grid[data-module="reports"] > .practice-record-one-screen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.72rem, 1vw, 0.95rem);
  height: 100%;
  padding: clamp(0.86rem, 1.2vw, 1.12rem);
  overflow: hidden;
  border-color: rgba(175, 206, 220, 0.16);
  border-radius: clamp(0.8rem, 1vw, 0.95rem);
  background:
    radial-gradient(circle at 18% 18%, rgba(226, 199, 120, 0.085), transparent 26%),
    radial-gradient(circle at 76% 12%, rgba(113, 198, 207, 0.075), transparent 30%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.024)),
    rgba(4, 9, 16, 0.74);
  box-shadow:
    0 1.5rem 4.5rem rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.record-report-shell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.45rem;
}

.record-report-shell-head > div {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.record-report-shell-head span {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 1px solid rgba(226, 199, 120, 0.34);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(226, 199, 120, 0.07);
}

.record-report-shell-head h3 {
  margin: 0;
  color: rgba(248, 251, 253, 0.98);
  font-size: clamp(1.05rem, 1.35vw, 1.32rem);
  font-weight: 780;
}

.record-report-shell-head p {
  margin: 0;
  color: rgba(224, 233, 239, 0.62);
  font-size: clamp(0.78rem, 0.92vw, 0.92rem);
}

.record-report-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.12fr) minmax(20rem, 0.88fr);
  gap: clamp(0.78rem, 1.05vw, 1rem);
  min-height: 0;
}

.record-report-main,
.record-side-rail {
  display: grid;
  gap: clamp(0.78rem, 1.05vw, 1rem);
  min-height: 0;
}

.record-report-main {
  grid-template-rows: minmax(12.2rem, 0.94fr) minmax(0, 1.42fr);
}

.record-side-rail {
  grid-template-rows: minmax(10.2rem, 0.9fr) minmax(10.4rem, 0.85fr) minmax(9.6rem, 0.78fr);
  overflow: hidden;
}

.record-summary-hero,
.record-main-problems,
.content-grid[data-module="reports"] .record-mini-panel {
  border: 1px solid rgba(255, 255, 255, 0.115);
  border-radius: clamp(0.7rem, 0.9vw, 0.86rem);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.028)),
    rgba(0, 0, 0, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 1rem 2.8rem rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(20px) saturate(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
}

.record-summary-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(12rem, 0.72fr) minmax(0, 1.58fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.3rem clamp(0.9rem, 1.4vw, 1.45rem);
  min-height: 0;
  padding: clamp(0.9rem, 1.25vw, 1.15rem);
  overflow: hidden;
}

.record-summary-hero .record-section-title {
  grid-column: 1 / -1;
}

.record-summary-score-orb {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  width: clamp(9.4rem, 13vw, 12.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 241, 198, 0.18), rgba(226, 199, 120, 0.08) 34%, transparent 68%),
    rgba(0, 0, 0, 0.16);
  box-shadow:
    0 0 0 1px rgba(226, 199, 120, 0.12),
    0 0 2.4rem rgba(226, 199, 120, 0.18);
}

.record-summary-score-orb::before {
  position: absolute;
  inset: 0.28rem;
  border: 1px solid rgba(226, 199, 120, 0.36);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  content: "";
  transform: rotate(-24deg);
}

.record-summary-score-orb strong {
  color: rgba(255, 233, 172, 0.98);
  font-size: clamp(4.4rem, 7.6vw, 7rem);
  font-weight: 850;
  line-height: 0.9;
  text-shadow: 0 0 1.6rem rgba(226, 199, 120, 0.26);
}

.record-summary-score-orb span {
  margin-top: -0.4rem;
  color: rgba(255, 232, 178, 0.95);
  font-size: clamp(0.86rem, 1vw, 1rem);
  font-weight: 760;
}

.record-summary-copyline {
  display: grid;
  align-content: center;
  gap: clamp(1rem, 1.45vw, 1.4rem);
  min-width: 0;
}

.record-summary-copyline p {
  margin: 0;
  color: rgba(243, 248, 250, 0.88);
  font-size: clamp(0.96rem, 1.28vw, 1.22rem);
  line-height: 1.6;
}

.record-summary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.68rem, 0.9vw, 0.86rem);
}

.record-summary-metrics .record-metric {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: clamp(4.5rem, 6.6vh, 5.4rem);
  padding: 0.72rem 0.9rem;
}

.record-summary-metrics .record-metric::before {
  content: "✓";
  display: grid;
  grid-row: 1 / span 3;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border: 1px solid rgba(226, 199, 120, 0.46);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(226, 199, 120, 0.06);
}

.record-summary-metrics .record-metric span,
.record-summary-metrics .record-metric small {
  display: none;
}

.record-summary-metrics .record-metric strong {
  color: rgba(255, 232, 178, 0.96);
  font-size: clamp(1.18rem, 1.62vw, 1.55rem);
}

.record-main-problems {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.62rem, 0.9vw, 0.82rem);
  min-height: 0;
  padding: clamp(0.88rem, 1.15vw, 1rem);
}

.content-grid[data-module="reports"] .record-main-problems .stuck-pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.7rem, 0.94vw, 0.9rem);
  min-height: 0;
  overflow: hidden;
  height: auto;
}

.content-grid[data-module="reports"] .record-main-problems .stuck-pattern-card {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: clamp(0.6rem, 0.82vw, 0.78rem);
}

.content-grid[data-module="reports"] .record-main-problems .stuck-pattern-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.content-grid[data-module="reports"] .record-main-problems .problem-note-map {
  min-height: 0;
  max-height: clamp(5.8rem, 10.4vh, 7rem);
}

.content-grid[data-module="reports"] .record-main-problems .problem-note-map.is-compact {
  display: grid;
  grid-template-rows: 1fr;
  min-height: 3.3rem;
  max-height: 3.6rem;
  padding: 0.4rem 0.48rem;
}

.content-grid[data-module="reports"] .record-main-problems .problem-note-map.is-compact .problem-note-context {
  grid-template-columns: minmax(0, 1fr) auto;
}

.content-grid[data-module="reports"] .record-main-problems .problem-note-map.is-compact .problem-note-context b {
  min-width: 1.95rem;
  min-height: 1.95rem;
}

.record-issue-list {
  display: grid;
  overflow: hidden;
  align-self: stretch;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.72rem;
}

.record-issue-list article {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr) auto;
  gap: 0.62rem;
  align-items: center;
  min-height: 2.7rem;
  padding: 0.48rem 0.72rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.035);
}

.record-issue-list article:last-child {
  border-bottom: 0;
}

.record-issue-list span {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border-radius: 999px;
  color: var(--gold);
  background: rgba(226, 199, 120, 0.09);
}

.record-issue-list strong {
  overflow: hidden;
  color: rgba(238, 244, 247, 0.86);
  font-size: clamp(0.78rem, 0.9vw, 0.88rem);
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-issue-list i {
  color: rgba(224, 233, 239, 0.56);
  font-style: normal;
  font-size: 1.4rem;
}

.content-grid[data-module="reports"] .record-trend-panel .report-trend-compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-grid[data-module="reports"] .record-recent-list .practice-history-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.content-grid[data-module="reports"] .record-recent-list .practice-history-row b {
  display: grid;
  width: 2.9rem;
  height: 2.9rem;
  place-items: center;
  border: 1px solid rgba(226, 199, 120, 0.45);
  border-radius: 999px;
  color: var(--gold);
  font-size: 1.08rem;
  box-shadow: 0 0 1.2rem rgba(226, 199, 120, 0.12);
}

@media (max-width: 1180px) {
  .record-report-layout {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .record-report-main,
  .record-side-rail {
    grid-template-rows: auto;
  }
}

/* Fit the report inside laptop-height windows without text overlap. */
.content-grid[data-module="reports"] > .practice-record-one-screen {
  gap: clamp(0.48rem, 0.7vw, 0.66rem);
  padding: clamp(0.62rem, 0.9vw, 0.82rem);
}

.record-report-layout {
  gap: clamp(0.62rem, 0.82vw, 0.78rem);
}

.record-report-main {
  grid-template-rows: minmax(9.8rem, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(0.52rem, 0.74vw, 0.68rem);
}

.record-summary-hero {
  grid-template-columns: minmax(9.2rem, 0.52fr) minmax(0, 1.48fr);
  gap: 0.18rem clamp(0.72rem, 1vw, 1rem);
  padding: clamp(0.62rem, 0.86vw, 0.78rem);
}

.record-summary-score-orb {
  width: clamp(7.4rem, 10vw, 9.2rem);
}

.record-summary-score-orb strong {
  font-size: clamp(3.6rem, 6vw, 5.1rem);
}

.record-summary-copyline {
  gap: clamp(0.54rem, 0.74vw, 0.7rem);
}

.record-summary-copyline p {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(0.82rem, 1.02vw, 0.98rem);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.record-summary-metrics {
  gap: clamp(0.42rem, 0.6vw, 0.56rem);
}

.record-summary-metrics .record-metric {
  min-height: 3.2rem;
  padding: 0.44rem 0.6rem;
}

.record-summary-metrics .record-metric::before {
  width: 1.7rem;
  height: 1.7rem;
}

.record-summary-metrics .record-metric strong {
  font-size: clamp(1rem, 1.34vw, 1.28rem);
}

.record-main-problems {
  gap: clamp(0.4rem, 0.58vw, 0.52rem);
  padding: clamp(0.6rem, 0.82vw, 0.74rem);
  overflow: hidden;
}

.record-section-title {
  min-height: 0;
}

.record-section-title .eyebrow {
  margin-bottom: 0.18rem;
}

.content-grid[data-module="reports"] .record-section-title h3 {
  font-size: clamp(0.94rem, 1.16vw, 1.08rem);
}

.content-grid[data-module="reports"] .record-main-problems .stuck-pattern-card {
  gap: 0.32rem;
}

.content-grid[data-module="reports"] .record-main-problems .stuck-pattern-card strong {
  font-size: clamp(0.96rem, 1.16vw, 1.08rem);
}

.content-grid[data-module="reports"] .record-main-problems .stuck-pattern-card small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.content-grid[data-module="reports"] .record-main-problems .report-problem-actions {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.38rem;
}

.content-grid[data-module="reports"] .record-main-problems .report-problem-actions .glass-button {
  min-height: 2rem;
  padding: 0.36rem 0.5rem;
  font-size: clamp(0.68rem, 0.78vw, 0.78rem);
}

.content-grid[data-module="reports"] .record-report-layout > .record-side-rail {
  grid-template-rows: minmax(9.2rem, 1fr) minmax(8.6rem, 0.92fr) minmax(8.4rem, 0.86fr);
  gap: clamp(0.52rem, 0.74vw, 0.68rem);
}

.content-grid[data-module="reports"] .record-report-layout > .record-side-rail > .record-mini-panel {
  padding: clamp(0.4rem, 0.56vw, 0.52rem);
}

.record-issue-list article {
  min-height: 2.12rem;
  padding: 0.32rem 0.56rem;
}

.content-grid[data-module="reports"] .record-trend-panel .report-trend-compact-grid {
  gap: 0.32rem;
}

.content-grid[data-module="reports"] .record-trend-panel .report-trend-compact-grid .report-trend-card {
  min-height: 3.4rem;
  padding: 0.28rem 0.4rem;
}

.content-grid[data-module="reports"] .record-trend-panel .report-trend-card strong {
  font-size: clamp(0.78rem, 0.94vw, 0.9rem);
}

.content-grid[data-module="reports"] .record-recent-list {
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  height: 100%;
  overflow: hidden;
}

.content-grid[data-module="reports"] .record-recent-list .practice-history-row {
  min-height: 0;
  padding: 0.26rem 0.42rem;
  gap: 0.32rem;
}

.content-grid[data-module="reports"] .record-recent-list .practice-history-row b {
  width: 1.92rem;
  height: 1.92rem;
  font-size: 0.78rem;
}

.content-grid[data-module="reports"] .record-recent-list .practice-history-row strong {
  font-size: clamp(0.76rem, 0.86vw, 0.82rem);
}

.content-grid[data-module="reports"] .record-recent-list .practice-history-row span {
  font-size: clamp(0.64rem, 0.72vw, 0.7rem);
  line-height: 1.2;
}

.content-grid[data-module="reports"] .record-recent-panel .record-section-title {
  margin-bottom: 0.04rem;
}

.content-grid[data-module="reports"] .record-recent-panel .record-section-title h3 {
  font-size: clamp(0.88rem, 1vw, 0.98rem);
}

.content-grid[data-module="reports"] .record-recent-panel .report-text-action {
  padding: 0.1rem 0.28rem;
  font-size: 0.66rem;
}

.content-grid[data-module="reports"] .record-recent-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

/* Premium hero treatment for the current practice report summary. */
.content-grid[data-module="reports"] .record-summary-hero {
  position: relative;
  isolation: isolate;
  border-color: rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 220, 138, 0.16), transparent 24%),
    radial-gradient(circle at 76% 8%, rgba(118, 217, 223, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.035)),
    rgba(5, 10, 16, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 1.4rem 3.8rem rgba(0, 0, 0, 0.32);
  animation: recordReportReveal 780ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.content-grid[data-module="reports"] .record-summary-hero::before,
.content-grid[data-module="reports"] .record-summary-hero::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.content-grid[data-module="reports"] .record-summary-hero::before {
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 4.8rem 100%,
    radial-gradient(circle at 15% 48%, rgba(255, 228, 160, 0.11), transparent 18%);
  opacity: 0.6;
  animation: recordReportGridDrift 9s linear infinite;
}

.content-grid[data-module="reports"] .record-summary-hero::after {
  right: 1.2rem;
  bottom: 1rem;
  left: 35%;
  z-index: -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 232, 178, 0.22), transparent);
  animation: recordReportScan 3.8s ease-in-out infinite;
}

.content-grid[data-module="reports"] .record-summary-hero .record-section-title {
  align-items: center;
}

.content-grid[data-module="reports"] .record-summary-hero .record-section-title h3 {
  font-size: clamp(1.08rem, 1.38vw, 1.32rem);
}

.record-summary-score-orb {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 238, 184, 0.24), rgba(226, 199, 120, 0.08) 40%, transparent 68%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 48%),
    rgba(0, 0, 0, 0.18);
  box-shadow:
    0 0 0 1px rgba(226, 199, 120, 0.2),
    0 0 0 0.52rem rgba(226, 199, 120, 0.035),
    0 0 2.8rem rgba(226, 199, 120, 0.26);
  animation: recordScoreOrbBreathe 3.4s ease-in-out infinite;
}

.record-summary-score-orb::before {
  inset: 0.22rem;
  border-width: 1.5px;
  border-color: rgba(255, 232, 178, 0.54);
  border-right-color: transparent;
  border-bottom-color: rgba(255, 232, 178, 0.08);
  animation: recordScoreRingSweep 6.4s linear infinite;
}

.record-summary-score-orb::after {
  position: absolute;
  top: 14%;
  right: 18%;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: rgba(255, 236, 184, 0.88);
  box-shadow: 0 0 1rem rgba(255, 232, 178, 0.5);
  content: "";
  animation: recordScoreSpark 2.6s ease-in-out infinite;
}

.record-summary-score-orb strong {
  background: linear-gradient(180deg, #fff5d0, #f4cf73 74%, #b98731);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.04em;
  animation: recordScoreNumberPop 680ms cubic-bezier(0.2, 0.95, 0.18, 1.15) 160ms both;
}

.record-summary-score-orb span {
  margin-top: -0.75rem;
  color: rgba(255, 235, 190, 0.96);
  font-size: clamp(0.72rem, 0.88vw, 0.86rem);
  text-shadow: 0 0 0.8rem rgba(226, 199, 120, 0.24);
}

.content-grid[data-module="reports"] .record-summary-score-orb {
  overflow: hidden;
}

.record-summary-copyline p {
  color: rgba(246, 250, 252, 0.9);
  font-weight: 620;
}

.content-grid[data-module="reports"] .record-summary-metrics .record-metric {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 0.8rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0.8rem 1.9rem rgba(0, 0, 0, 0.16);
  animation: recordMetricRise 620ms cubic-bezier(0.2, 0.9, 0.22, 1) both;
}

.content-grid[data-module="reports"] .record-summary-metrics .record-metric::after {
  position: absolute;
  left: 0;
  right: auto;
  top: auto;
  bottom: 0;
  width: var(--metric-fill, 72%);
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(226, 199, 120, 0.16), rgba(122, 207, 229, 0.08)),
    radial-gradient(circle at 92% 50%, rgba(255, 232, 178, 0.24), transparent 34%);
  content: "";
  opacity: 0.88;
  transform-origin: left center;
  animation: recordMetricFill 980ms cubic-bezier(0.22, 0.85, 0.2, 1) both;
  z-index: -1;
}

.record-summary-metrics .record-metric::before {
  border-color: rgba(255, 222, 145, 0.58);
  color: rgba(255, 232, 178, 0.96);
  background:
    radial-gradient(circle, rgba(255, 232, 178, 0.12), transparent 66%),
    rgba(226, 199, 120, 0.08);
  box-shadow: 0 0 1rem rgba(226, 199, 120, 0.12);
  animation: recordMetricCheckPulse 2.4s ease-in-out infinite;
}

.content-grid[data-module="reports"] .record-summary-metrics .record-metric:nth-child(2) {
  animation-delay: 100ms;
}

.content-grid[data-module="reports"] .record-summary-metrics .record-metric:nth-child(2)::after {
  animation-delay: 140ms;
}

.content-grid[data-module="reports"] .record-summary-metrics .record-metric:nth-child(3) {
  animation-delay: 200ms;
}

.content-grid[data-module="reports"] .record-summary-metrics .record-metric:nth-child(3)::after {
  animation-delay: 280ms;
}

@keyframes recordReportReveal {
  from {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes recordReportGridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 4.8rem 0, 0 0; }
}

@keyframes recordReportScan {
  0%, 100% {
    opacity: 0.18;
    transform: translateX(-8%);
  }
  50% {
    opacity: 0.95;
    transform: translateX(8%);
  }
}

@keyframes recordScoreOrbBreathe {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(226, 199, 120, 0.2),
      0 0 0 0.52rem rgba(226, 199, 120, 0.035),
      0 0 2.8rem rgba(226, 199, 120, 0.26);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 232, 178, 0.34),
      0 0 0 0.72rem rgba(226, 199, 120, 0.055),
      0 0 3.8rem rgba(226, 199, 120, 0.34);
  }
}

@keyframes recordScoreRingSweep {
  to { transform: rotate(336deg); }
}

@keyframes recordScoreSpark {
  0%, 100% {
    opacity: 0.56;
    transform: scale(0.82);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes recordScoreNumberPop {
  from {
    opacity: 0;
    transform: translateY(0.28rem) scale(0.9);
    filter: blur(0.18rem);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes recordMetricRise {
  from {
    opacity: 0;
    transform: translateY(0.36rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes recordMetricFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes recordMetricCheckPulse {
  0%, 100% {
    box-shadow: 0 0 1rem rgba(226, 199, 120, 0.12);
  }
  50% {
    box-shadow: 0 0 1.35rem rgba(226, 199, 120, 0.32);
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-grid[data-module="reports"] .record-summary-hero,
  .content-grid[data-module="reports"] .record-summary-hero::before,
  .content-grid[data-module="reports"] .record-summary-hero::after,
  .content-grid[data-module="reports"] .record-summary-score-orb,
  .content-grid[data-module="reports"] .record-summary-score-orb::before,
  .content-grid[data-module="reports"] .record-summary-score-orb::after,
  .content-grid[data-module="reports"] .record-summary-score-orb strong,
  .content-grid[data-module="reports"] .record-summary-metrics .record-metric,
  .content-grid[data-module="reports"] .record-summary-metrics .record-metric::before,
  .content-grid[data-module="reports"] .record-summary-metrics .record-metric::after {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .beat-performance-stage .metronome-stage-halo,
  .beat-performance-stage .metronome-wave-ring {
    animation: none;
  }
}

.content-grid[data-module="reports"] .record-report-layout > .record-side-rail {
  display: grid;
  grid-template-rows: minmax(10.2rem, 0.98fr) minmax(9.2rem, 0.9fr) minmax(9.8rem, 0.86fr);
  gap: clamp(0.78rem, 1.05vw, 1rem);
  min-height: 0;
  overflow: hidden;
}

.content-grid[data-module="reports"] .record-report-layout > .record-side-rail > .record-mini-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.content-grid[data-module="reports"] .record-report-layout .record-issue-overview {
  grid-template-rows: auto minmax(0, 1fr);
}

.content-grid[data-module="reports"] .record-report-layout .record-issue-list {
  min-height: 0;
  height: 100%;
}

.content-grid[data-module="reports"] .record-empty-report {
  position: relative;
}

.record-empty-report-layout {
  display: grid;
  grid-template-rows: minmax(0, 1.35fr) minmax(9rem, 0.65fr);
  gap: clamp(0.72rem, 1vw, 0.95rem);
  min-height: 0;
}

.record-empty-report-hero,
.record-empty-report-steps article {
  border: 1px solid rgba(236, 243, 255, 0.115);
  background:
    radial-gradient(circle at 14% 12%, rgba(226, 181, 105, 0.12), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(106, 169, 250, 0.1), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(5, 8, 13, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 1.4rem 3.6rem rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
}

.record-empty-report-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(11rem, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(1rem, 1.8vw, 1.8rem);
  align-items: center;
  min-height: 0;
  overflow: hidden;
  padding: clamp(1.25rem, 2.1vw, 2.1rem);
  border-radius: clamp(0.9rem, 1.1vw, 1.08rem);
}

.record-empty-report-hero::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px) 0 0 / 4.6rem 100%,
    radial-gradient(circle at 28% 50%, rgba(226, 181, 105, 0.11), transparent 26%);
  opacity: 0.64;
  content: "";
  animation: recordReportGridDrift 12s linear infinite;
}

.record-empty-report-orb,
.record-empty-report-copy {
  position: relative;
  z-index: 1;
}

.record-empty-report-orb {
  display: grid;
  place-items: center;
  justify-self: center;
  width: clamp(11rem, 17vw, 15.2rem);
  aspect-ratio: 1;
  border: 1px solid rgba(226, 181, 105, 0.24);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 226, 162, 0.2), rgba(226, 181, 105, 0.07) 42%, transparent 66%),
    radial-gradient(circle at 58% 58%, rgba(106, 169, 250, 0.1), transparent 60%),
    rgba(0, 0, 0, 0.18);
  box-shadow:
    0 0 0 0.62rem rgba(226, 181, 105, 0.035),
    0 0 3.2rem rgba(226, 181, 105, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.record-empty-report-orb strong {
  color: rgba(255, 235, 190, 0.86);
  font-size: clamp(3.4rem, 6vw, 5.8rem);
  font-weight: 820;
  line-height: 0.9;
}

.record-empty-report-orb span {
  margin-top: -0.8rem;
  color: rgba(255, 232, 178, 0.8);
  font-size: clamp(0.82rem, 0.96vw, 0.98rem);
  font-weight: 720;
}

.record-empty-report-copy {
  display: grid;
  gap: clamp(0.72rem, 1vw, 0.95rem);
  min-width: 0;
}

.record-empty-report-copy h3 {
  margin: 0;
  color: rgba(252, 253, 255, 0.98);
  font-size: clamp(2rem, 3.6vw, 4.3rem);
  font-weight: 820;
  line-height: 1.02;
}

.record-empty-report-copy p:not(.eyebrow) {
  max-width: 46rem;
  margin: 0;
  color: rgba(224, 233, 239, 0.72);
  font-size: clamp(0.98rem, 1.18vw, 1.22rem);
  line-height: 1.62;
}

.record-empty-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.62rem;
}

.record-empty-report-actions .glass-button {
  min-height: 2.55rem;
  padding-inline: 1rem;
}

.record-empty-report-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.72rem, 1vw, 0.95rem);
  min-height: 0;
}

.record-empty-report-steps article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.62rem, 0.9vw, 0.82rem);
  align-items: center;
  min-height: 0;
  padding: clamp(0.72rem, 1vw, 0.95rem);
  border-radius: clamp(0.76rem, 0.95vw, 0.9rem);
}

.record-empty-report-steps b {
  display: grid;
  width: clamp(2rem, 2.8vw, 2.6rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(106, 169, 250, 0.22);
  border-radius: 999px;
  color: rgba(185, 246, 241, 0.94);
  background: rgba(106, 169, 250, 0.1);
  font-size: clamp(0.82rem, 0.96vw, 1rem);
}

.record-empty-report-steps div {
  display: grid;
  gap: 0.24rem;
}

.record-empty-report-steps strong {
  color: rgba(255, 244, 218, 0.96);
  font-size: clamp(0.98rem, 1.18vw, 1.22rem);
}

.record-empty-report-steps span {
  color: rgba(220, 229, 239, 0.66);
  font-size: clamp(0.82rem, 0.92vw, 0.98rem);
  line-height: 1.42;
}

@media (max-width: 920px) {
  .record-empty-report-layout,
  .record-empty-report-hero,
  .record-empty-report-steps {
    grid-template-columns: 1fr;
  }

  .record-empty-report-layout {
    grid-template-rows: auto auto;
    overflow: auto;
  }

  .record-empty-report-hero {
    grid-template-columns: 1fr;
    text-align: left;
  }
}


/* AI生曲上传入口：对齐参考图的 Apple glass upload treatment. */
.content-grid[data-module="pieces"] .score-generate-upload {
  min-height: clamp(30rem, 60vh, 43rem);
  border-radius: clamp(1.9rem, 3vw, 3rem);
  border-color: rgba(255, 232, 184, 0.42);
  background:
    radial-gradient(circle at 50% 46%, rgba(228, 199, 127, 0.2), transparent 30%),
    radial-gradient(circle at 9% 50%, rgba(255, 232, 184, 0.12), transparent 4%),
    radial-gradient(circle at 91% 50%, rgba(255, 232, 184, 0.12), transparent 4%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.035) 48%, rgba(255, 255, 255, 0.07)),
    rgba(10, 14, 17, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 1.7rem 5rem rgba(0, 0, 0, 0.38),
    0 0 2.2rem rgba(228, 199, 127, 0.08);
}

.content-grid[data-module="pieces"] .score-generate-upload::before {
  inset: 0.62rem;
  border-radius: calc(clamp(1.9rem, 3vw, 3rem) - 0.42rem);
  border-color: rgba(255, 255, 255, 0.15);
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255, 232, 184, 0.11) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(180deg, transparent calc(50% - 0.5px), rgba(255, 232, 184, 0.07) 50%, transparent calc(50% + 0.5px)),
    radial-gradient(circle at 50% 50%, transparent 0 19%, rgba(255, 232, 184, 0.055) 19.2% 19.6%, transparent 19.8% 30%, rgba(255, 255, 255, 0.04) 30.2% 30.6%, transparent 31%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.14), transparent 34% 66%, rgba(255, 255, 255, 0.06));
}

.content-grid[data-module="pieces"] .score-generate-upload::after {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  z-index: 0;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 232, 184, 0.18) 18%, transparent 42%, transparent 58%, rgba(255, 232, 184, 0.18) 82%, transparent);
  content: "";
  transform: translateY(-50%);
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-spotlight {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(58rem, 92%);
  min-height: clamp(15rem, 30vh, 20.5rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-orbit {
  inset: 50% auto auto 50%;
  width: clamp(8.4rem, 12vw, 11.5rem);
  aspect-ratio: 1;
  border-color: rgba(255, 232, 184, 0.14);
  opacity: 0.75;
  transform: translate(-50%, -50%);
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-staff {
  inset: 32% 5% auto;
  height: 36%;
  opacity: 0.32;
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-staff i {
  display: none;
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-cloud {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(6.8rem, 9.6vw, 9.4rem);
  aspect-ratio: 1;
  border-radius: 28%;
  transform: translate(-50%, -50%);
  animation: scoreUploadFloat 3.8s ease-in-out infinite;
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-cloud span {
  border-color: rgba(255, 244, 215, 0.46);
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.48), transparent 26%),
    radial-gradient(circle at 62% 58%, rgba(228, 199, 127, 0.17), transparent 50%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.042)),
    rgba(20, 23, 25, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(255, 232, 184, 0.12),
    0 0 2.8rem rgba(228, 199, 127, 0.22),
    0 1.2rem 2.8rem rgba(0, 0, 0, 0.28);
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-cloud span::before {
  color: rgba(255, 232, 184, 0.98);
  font-size: clamp(2.9rem, 4.8vw, 4.6rem);
  text-shadow:
    0 0 1.3rem rgba(228, 199, 127, 0.42),
    0 0 3rem rgba(228, 199, 127, 0.16);
}

.content-grid[data-module="pieces"] .score-generate-action {
  min-width: 0;
  min-height: 0;
  margin-top: clamp(-0.3rem, -0.4vw, -0.12rem);
  padding: clamp(0.38rem, 0.62vw, 0.58rem) clamp(0.86rem, 1.25vw, 1.25rem);
  border: 1px solid rgba(255, 236, 196, 0.2);
  border-radius: 999px;
  background:
    radial-gradient(circle at 42% 18%, rgba(255, 255, 255, 0.26), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(255, 232, 184, 0.06);
  color: rgba(255, 236, 196, 0.96);
  font-size: clamp(1.32rem, 2vw, 2.05rem);
  font-weight: 760;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.045),
    0 0.9rem 2rem rgba(0, 0, 0, 0.22),
    0 0 1.4rem rgba(228, 199, 127, 0.1);
  text-shadow: 0 0 1.2rem rgba(228, 199, 127, 0.22);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.content-grid[data-module="pieces"] .score-generate-action::before {
  display: block;
  inset: 0.18rem;
  border-color: rgba(255, 255, 255, 0.08);
}

.content-grid[data-module="pieces"] .score-generate-upload > small {
  color: rgba(235, 238, 240, 0.58);
  font-size: clamp(0.9rem, 1.15vw, 1.15rem);
}

/* Fix AI生曲 viewport fit and upload icon centering for the current single-entry layout. */
html[data-active-module] .content-grid[data-module="pieces"] {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.48rem, 0.72vw, 0.68rem);
  padding-bottom: 0;
}

body:has(.content-grid[data-module="pieces"]) .main-stage {
  overflow: hidden;
}

.content-grid[data-module="pieces"] .score-generate-hero {
  padding: clamp(0.64rem, 1vw, 0.92rem) clamp(0.95rem, 1.6vw, 1.35rem);
}

.content-grid[data-module="pieces"] .score-generate-hero .score-import-title h3 {
  font-size: clamp(2.15rem, 3.7vw, 4.15rem);
}

.score-generate-panel {
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.36fr);
}

.content-grid[data-module="pieces"] .score-generate-upload {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  padding: clamp(1rem, 1.65vw, 1.7rem);
}

.content-grid[data-module="pieces"] .score-generate-upload::before {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.11), transparent 34% 66%, rgba(255, 255, 255, 0.05));
}

.content-grid[data-module="pieces"] .score-generate-upload::after {
  display: none;
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-spotlight {
  min-height: clamp(11rem, 21vh, 15rem);
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-cloud {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: none;
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-orbit,
.content-grid[data-module="pieces"] .score-generate-upload .score-upload-staff {
  display: none;
}

.content-grid[data-module="pieces"] .score-generate-info {
  grid-auto-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.content-grid[data-module="pieces"] .score-generate-info article {
  min-height: 0;
  padding: clamp(0.62rem, 0.9vw, 0.82rem);
}

.content-grid[data-module="pieces"] .score-generate-info strong {
  font-size: clamp(0.92rem, 1.05vw, 1.08rem);
}

.content-grid[data-module="pieces"] .score-generate-info p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* AI生曲上传引导动效：让主入口在未交互时轻轻招手。 */
.content-grid[data-module="pieces"] .score-generate-upload {
  animation: scoreUploadPanelInvite 9.6s ease-in-out infinite;
  will-change: transform, box-shadow, border-color;
}

.content-grid[data-module="pieces"] .score-generate-upload::before {
  animation: scoreUploadGlassSheen 7.8s ease-in-out infinite;
  will-change: opacity, transform;
}

.content-grid[data-module="pieces"] .score-generate-upload::after {
  display: block;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 232, 184, 0.34) 18%, transparent 34% 66%, rgba(143, 207, 255, 0.26) 82%, transparent);
  animation: scoreUploadGuideLine 6.8s ease-in-out infinite;
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-spotlight {
  isolation: isolate;
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-spotlight::before,
.content-grid[data-module="pieces"] .score-generate-upload .score-upload-spotlight::after {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 0;
  width: clamp(8.6rem, 13vw, 12.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-spotlight::before {
  border: 1px solid rgba(255, 232, 184, 0.18);
  box-shadow:
    0 0 1.8rem rgba(228, 199, 127, 0.14),
    inset 0 0 1.4rem rgba(143, 207, 255, 0.06);
  animation: scoreUploadInviteRing 8.8s ease-in-out infinite;
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-spotlight::after {
  width: clamp(5.9rem, 9vw, 8.6rem);
  background:
    radial-gradient(circle, rgba(255, 232, 184, 0.16), rgba(143, 207, 255, 0.07) 44%, transparent 68%);
  filter: blur(0.45rem);
  animation: scoreUploadInviteGlow 7.2s ease-in-out infinite;
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-cloud {
  animation: scoreUploadCloudInvite 5.8s ease-in-out infinite;
  will-change: transform, filter;
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-cloud span {
  animation: scoreUploadIconGlow 5.8s ease-in-out infinite;
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-cloud span {
  display: block;
  width: clamp(2rem, 3vw, 2.7rem);
  height: clamp(2rem, 3vw, 2.7rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-cloud span::before,
.content-grid[data-module="pieces"] .score-generate-upload .score-upload-cloud span::after {
  position: absolute;
  left: 50%;
  display: block;
  content: "";
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-cloud span::before {
  top: 17%;
  width: clamp(1rem, 1.45vw, 1.28rem);
  height: clamp(1rem, 1.45vw, 1.28rem);
  border-top: 2px solid rgba(255, 242, 215, 0.92);
  border-left: 2px solid rgba(255, 242, 215, 0.92);
  background: none;
  box-shadow: -0.08rem -0.08rem 0.9rem rgba(228, 199, 127, 0.18);
  transform: translateX(-50%) rotate(45deg);
  transform-origin: center;
}

.content-grid[data-module="pieces"] .score-generate-upload .score-upload-cloud span::after {
  top: 19%;
  width: 2px;
  height: clamp(1.55rem, 2.35vw, 2.15rem);
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(rgba(255, 242, 215, 0.92), rgba(255, 242, 215, 0.7));
  box-shadow: 0 0 1rem rgba(228, 199, 127, 0.22);
  transform: translateX(-50%);
}

.content-grid[data-module="pieces"] .score-generate-action {
  animation: scoreUploadButtonInvite 6.2s ease-in-out infinite;
  will-change: transform, box-shadow, filter;
}

.content-grid[data-module="pieces"] .score-generate-action::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 12%, rgba(255, 255, 255, 0.34) 42%, transparent 62%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-110%);
  animation: scoreUploadButtonSweep 5.8s ease-in-out infinite;
}

/* AI生曲上传按钮：所有光效只在按钮内部流动，不再向外溢出斜光。 */
.content-grid[data-module="pieces"] .score-generate-action {
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 1.6rem rgba(228, 199, 127, 0.12),
    0 0.55rem 1.35rem rgba(0, 0, 0, 0.22);
}

.content-grid[data-module="pieces"] .score-generate-action::after {
  inset: 0.08rem;
  border-radius: inherit;
  background:
    linear-gradient(105deg, transparent 8%, rgba(255, 255, 255, 0.28) 42%, transparent 62%),
    radial-gradient(circle at 34% 50%, rgba(255, 232, 184, 0.16), transparent 48%);
  mix-blend-mode: screen;
}

.content-grid[data-module="pieces"] .score-generate-upload:hover,
.content-grid[data-module="pieces"] .score-generate-upload:hover .score-upload-cloud,
.content-grid[data-module="pieces"] .score-generate-upload:hover .score-upload-cloud span,
.content-grid[data-module="pieces"] .score-generate-upload:hover .score-generate-action {
  animation-play-state: paused;
}

@keyframes scoreUploadPanelInvite {
  0%, 100% {
    border-color: rgba(255, 232, 184, 0.36);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 rgba(255, 255, 255, 0.06),
      0 1.7rem 5rem rgba(0, 0, 0, 0.38),
      0 0 2.2rem rgba(228, 199, 127, 0.08);
    transform: translateY(0);
  }
  48% {
    border-color: rgba(255, 232, 184, 0.58);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      inset 0 -1px 0 rgba(255, 255, 255, 0.08),
      0 1.9rem 5.4rem rgba(0, 0, 0, 0.4),
      0 0 3.4rem rgba(228, 199, 127, 0.16),
      0 0 3rem rgba(143, 207, 255, 0.08);
    transform: translateY(-0.12rem);
  }
}

@keyframes scoreUploadGlassSheen {
  0%, 100% { opacity: 0.72; transform: translateX(-0.4%); }
  50% { opacity: 1; transform: translateX(0.4%); }
}

@keyframes scoreUploadGuideLine {
  0%, 18%, 100% { opacity: 0; transform: translateY(-50%) scaleX(0.42); }
  42% { opacity: 0.92; transform: translateY(-50%) scaleX(1); }
  68% { opacity: 0.34; transform: translateY(-50%) scaleX(0.82); }
}

@keyframes scoreUploadInviteRing {
  0%, 100% { opacity: 0.34; transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes scoreUploadInviteGlow {
  0%, 100% { opacity: 0.42; transform: translate(-50%, -50%) scale(0.9); }
  50% { opacity: 0.86; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes scoreUploadCloudInvite {
  0%, 100% { filter: brightness(1); transform: translate(-50%, -50%) translateY(0) scale(1); }
  45% { filter: brightness(1.08); transform: translate(-50%, -50%) translateY(-0.42rem) scale(1.035); }
  72% { filter: brightness(1.03); transform: translate(-50%, -50%) translateY(-0.16rem) scale(1.012); }
}

@keyframes scoreUploadIconGlow {
  0%, 100% { box-shadow: 0 0 2.8rem rgba(228, 199, 127, 0.2), 0 1.2rem 2.8rem rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.34); }
  50% { box-shadow: 0 0 4.2rem rgba(228, 199, 127, 0.34), 0 0 2.6rem rgba(143, 207, 255, 0.14), 0 1.2rem 2.8rem rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.42); }
}

@keyframes scoreUploadButtonInvite {
  0%, 100% { filter: brightness(1); transform: translateY(0) scale(1); }
  48% { filter: brightness(1.08); transform: translateY(-0.08rem) scale(1.018); }
}

@keyframes scoreUploadButtonSweep {
  0%, 32% { opacity: 0; transform: translateX(-110%); }
  46% { opacity: 0.72; }
  64%, 100% { opacity: 0; transform: translateX(110%); }
}

@media (prefers-reduced-motion: reduce) {
  .content-grid[data-module="pieces"] .score-generate-upload,
  .content-grid[data-module="pieces"] .score-generate-upload::before,
  .content-grid[data-module="pieces"] .score-generate-upload::after,
  .content-grid[data-module="pieces"] .score-generate-upload .score-upload-spotlight::before,
  .content-grid[data-module="pieces"] .score-generate-upload .score-upload-spotlight::after,
  .content-grid[data-module="pieces"] .score-generate-upload .score-upload-cloud,
  .content-grid[data-module="pieces"] .score-generate-upload .score-upload-cloud span,
  .content-grid[data-module="pieces"] .score-generate-action,
  .content-grid[data-module="pieces"] .score-generate-action::after {
    animation: none;
  }
}

/* Global cinematic glass skin */
body {
  background:
    radial-gradient(circle at 78% 12%, rgba(122, 173, 255, 0.14), transparent 28%),
    radial-gradient(circle at 24% 82%, rgba(206, 145, 92, 0.16), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.04), transparent 22%),
    linear-gradient(135deg, #030405 0%, #080b10 44%, #05070a 100%);
}

:root[data-theme="warmIvory"] body,
:root[data-theme="silverBlue"] body {
  background:
    radial-gradient(circle at 78% 12%, rgba(122, 173, 255, 0.14), transparent 28%),
    radial-gradient(circle at 24% 82%, rgba(206, 145, 92, 0.16), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.04), transparent 22%),
    linear-gradient(135deg, #030405 0%, #080b10 44%, #05070a 100%);
}

.hero-copy,
.hero-metrics,
.panel,
.module-card,
.piece-preview,
.report-line,
.profile-tile,
.quick-panel,
.teacher-guide,
.progress-panel,
.task-panel,
.advice-panel,
.support-entry-panel,
.support-service-panel,
.professional-tuner,
.violin-metronome-page,
.membership-one-screen,
.generator-main-panel,
.score-import-main-panel,
.score-generate-panel,
.score-library-filter-panel,
.knowledge-category-panel,
.knowledge-3d-mini-panel,
.record-report-layout .record-mini-panel,
.record-trend-panel,
.record-focus-panel,
.record-main-problems,
.record-recent-panel {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--card-radius);
  background:
    radial-gradient(circle at 12% 12%, rgba(206, 145, 92, 0.06), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(18, 22, 30, 0.56);
  box-shadow:
    0 1.8rem 4.5rem rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
}

.glass-button,
.endpoint-pill,
.chip,
.member-pill,
.select-like,
.support-keyword-row button,
.support-more-button,
.support-human-fallback .glass-button,
.support-answer-content .glass-button,
.metronome-bpm-console button,
.metronome-top-actions button,
.metronome-control-card button,
.metronome-mode-list button,
.metronome-segment-grid button,
.metronome-sound-mini-panel button,
.metronome-practice-mini-panel button,
.teacher-action-row .glass-button,
.teacher-upload-actions .glass-button,
.teacher-next-actions .glass-button,
.membership-one-screen .glass-button,
.generator-main-actions .glass-button,
.score-generate-action,
.record-command-bar > .glass-button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.03);
  color: rgba(245, 247, 250, 0.92);
  backdrop-filter: blur(18px) saturate(1.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.55rem 1.2rem rgba(0, 0, 0, 0.2);
}

.glass-button.primary,
.metronome-start-action,
.support-secondary-action,
.membership-one-screen .glass-button.primary,
.score-generate-action,
.record-command-bar > .glass-button.primary {
  border-color: rgba(206, 145, 92, 0.32);
  background:
    linear-gradient(135deg, rgba(206, 145, 92, 0.28), rgba(122, 173, 255, 0.16)),
    rgba(255, 255, 255, 0.04);
  color: rgba(255, 245, 232, 0.98);
}

.glass-button:hover,
.endpoint-pill:hover,
.chip:hover,
.member-pill:hover,
.select-like:hover,
.support-keyword-row button:hover,
.support-more-button:hover,
.support-human-fallback .glass-button:hover,
.support-answer-content .glass-button:hover,
.metronome-bpm-console button:hover,
.metronome-top-actions button:hover,
.metronome-control-card button:hover,
.metronome-mode-list button:hover,
.metronome-segment-grid button:hover,
.metronome-sound-mini-panel button:hover,
.metronome-practice-mini-panel button:hover,
.teacher-action-row .glass-button:hover,
.teacher-upload-actions .glass-button:hover,
.teacher-next-actions .glass-button:hover,
.membership-one-screen .glass-button:hover,
.generator-main-actions .glass-button:hover,
.record-command-bar > .glass-button:hover {
  border-color: rgba(206, 145, 92, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.04);
}

.top-brand:hover,
.top-brand:focus-visible,
.nav-item:hover,
.nav-item.is-active,
.module-card:hover,
.piece-preview.is-selected,
.report-line:hover,
.profile-tile:hover,
.support-guess-list button:hover,
.support-guess-list button.is-active,
.support-keyword-row button:hover,
.support-keyword-row button.is-active,
.support-answer-content .glass-button:hover {
  box-shadow:
    0 0 1.6rem rgba(206, 145, 92, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Final global glass pass */
.content-grid[data-module] > .panel,
.content-grid[data-module] > .hero-copy,
.content-grid[data-module] > .hero-metrics,
.content-grid[data-module] > .module-card,
.content-grid[data-module] > .piece-preview,
.content-grid[data-module] > .report-line,
.content-grid[data-module] > .profile-tile,
.content-grid[data-module] > .quick-panel,
.content-grid[data-module] > .teacher-guide,
.content-grid[data-module] > .progress-panel,
.content-grid[data-module] > .task-panel,
.content-grid[data-module] > .advice-panel,
.content-grid[data-module] > .support-entry-panel,
.content-grid[data-module] > .support-service-panel,
.content-grid[data-module] > .professional-tuner,
.content-grid[data-module] > .violin-metronome-page,
.content-grid[data-module] > .membership-one-screen,
.content-grid[data-module] > .score-import-main-panel,
.content-grid[data-module] > .score-generate-panel,
.content-grid[data-module] > .score-library-filter-panel,
.content-grid[data-module] > .knowledge-category-panel,
.content-grid[data-module] > .knowledge-3d-mini-panel,
.content-grid[data-module] > .record-mini-panel,
.content-grid[data-module] > .record-trend-panel,
.content-grid[data-module] > .record-focus-panel,
.content-grid[data-module] > .record-main-problems,
.content-grid[data-module] > .record-recent-panel,
.content-grid[data-module] > .generator-main-panel {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--card-radius);
  background:
    radial-gradient(circle at 12% 12%, rgba(206, 145, 92, 0.06), transparent 24%),
    radial-gradient(circle at 88% 16%, rgba(122, 173, 255, 0.05), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(18, 22, 30, 0.56);
  box-shadow:
    0 1.8rem 4.5rem rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
}

.content-grid[data-module] .glass-button,
.content-grid[data-module] .endpoint-pill,
.content-grid[data-module] .chip,
.content-grid[data-module] .member-pill,
.content-grid[data-module] .select-like,
.content-grid[data-module] .support-keyword-row button,
.content-grid[data-module] .support-more-button,
.content-grid[data-module] .support-human-fallback .glass-button,
.content-grid[data-module] .support-answer-content .glass-button,
.content-grid[data-module] .metronome-bpm-console button,
.content-grid[data-module] .metronome-top-actions button,
.content-grid[data-module] .metronome-control-card button,
.content-grid[data-module] .metronome-mode-list button,
.content-grid[data-module] .metronome-segment-grid button,
.content-grid[data-module] .metronome-sound-mini-panel button,
.content-grid[data-module] .metronome-practice-mini-panel button,
.content-grid[data-module] .teacher-action-row .glass-button,
.content-grid[data-module] .teacher-upload-actions .glass-button,
.content-grid[data-module] .teacher-next-actions .glass-button,
.content-grid[data-module] .membership-one-screen .glass-button,
.content-grid[data-module] .generator-main-actions .glass-button,
.content-grid[data-module] .record-command-bar > .glass-button,
.content-grid[data-module] .score-generate-action {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.03);
  color: rgba(245, 247, 250, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.55rem 1.2rem rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px) saturate(1.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.14);
}

.content-grid[data-module] .glass-button.primary,
.content-grid[data-module] .metronome-start-action,
.content-grid[data-module] .support-secondary-action,
.content-grid[data-module] .membership-one-screen .glass-button.primary,
.content-grid[data-module] .score-generate-action,
.content-grid[data-module] .record-command-bar > .glass-button.primary {
  border-color: rgba(206, 145, 92, 0.32);
  background:
    linear-gradient(135deg, rgba(206, 145, 92, 0.28), rgba(122, 173, 255, 0.16)),
    rgba(255, 255, 255, 0.04);
  color: rgba(255, 245, 232, 0.98);
}

.content-grid[data-module] .glass-button:hover,
.content-grid[data-module] .endpoint-pill:hover,
.content-grid[data-module] .chip:hover,
.content-grid[data-module] .member-pill:hover,
.content-grid[data-module] .select-like:hover,
.content-grid[data-module] .support-keyword-row button:hover,
.content-grid[data-module] .support-more-button:hover,
.content-grid[data-module] .support-human-fallback .glass-button:hover,
.content-grid[data-module] .support-answer-content .glass-button:hover,
.content-grid[data-module] .metronome-bpm-console button:hover,
.content-grid[data-module] .metronome-top-actions button:hover,
.content-grid[data-module] .metronome-control-card button:hover,
.content-grid[data-module] .metronome-mode-list button:hover,
.content-grid[data-module] .metronome-segment-grid button:hover,
.content-grid[data-module] .metronome-sound-mini-panel button:hover,
.content-grid[data-module] .metronome-practice-mini-panel button:hover,
.content-grid[data-module] .teacher-action-row .glass-button:hover,
.content-grid[data-module] .teacher-upload-actions .glass-button:hover,
.content-grid[data-module] .teacher-next-actions .glass-button:hover,
.content-grid[data-module] .membership-one-screen .glass-button:hover,
.content-grid[data-module] .generator-main-actions .glass-button:hover,
.content-grid[data-module] .record-command-bar > .glass-button:hover {
  border-color: rgba(206, 145, 92, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.04);
}

/* Global premium dark override for remaining module surfaces */
.content-grid[data-module] .panel,
.content-grid[data-module] .dashboard-card,
.content-grid[data-module] .feature-card,
.content-grid[data-module] .quick-panel,
.content-grid[data-module] .teacher-guide,
.content-grid[data-module] .progress-panel,
.content-grid[data-module] .task-panel,
.content-grid[data-module] .advice-panel,
.content-grid[data-module] .hero-copy,
.content-grid[data-module] .hero-metrics,
.content-grid[data-module] .module-card,
.content-grid[data-module] .piece-preview,
.content-grid[data-module] .report-line,
.content-grid[data-module] .profile-tile,
.content-grid[data-module] .support-entry-panel,
.content-grid[data-module] .support-service-panel,
.content-grid[data-module] .support-answer-content,
.content-grid[data-module] .support-human-fallback,
.content-grid[data-module] .membership-one-screen,
.content-grid[data-module] .generator-main-panel,
.content-grid[data-module] .generator-flow-panel,
.content-grid[data-module] .generator-settings-card,
.content-grid[data-module] .generator-editor-card,
.content-grid[data-module] .generator-result-grid article,
.content-grid[data-module] .score-generate-panel,
.content-grid[data-module] .score-library-filter-panel,
.content-grid[data-module] .score-import-main-panel,
.content-grid[data-module] .score-import-dropzone,
.content-grid[data-module] .score-import-route article,
.content-grid[data-module] .score-import-status,
.content-grid[data-module] .knowledge-category-panel,
.content-grid[data-module] .knowledge-3d-mini-panel,
.content-grid[data-module] .knowledge-lesson-panel,
.content-grid[data-module] .knowledge-section-panel,
.content-grid[data-module] .knowledge-note-panel,
.content-grid[data-module] .violin-metronome-page,
.content-grid[data-module] .metronome-topbar,
.content-grid[data-module] .metronome-stage,
.content-grid[data-module] .metronome-control-card,
.content-grid[data-module] .metronome-practice-mini-panel,
.content-grid[data-module] .metronome-sound-mini-panel,
.content-grid[data-module] .tuner-page,
.content-grid[data-module] .tuner-pro-panel,
.content-grid[data-module] .tuner-hand-panel,
.content-grid[data-module] .tuner-display,
.content-grid[data-module] .tuner-pegbox,
.content-grid[data-module] .record-main-panel,
.content-grid[data-module] .record-trend-panel,
.content-grid[data-module] .record-focus-panel,
.content-grid[data-module] .record-recent-panel,
.content-grid[data-module] .record-main-problems,
.content-grid[data-module] .teacher-workbench-chat,
.content-grid[data-module] .teacher-workbench-tools,
.content-grid[data-module] .teacher-answer-card,
.content-grid[data-module] .teacher-demo-card,
.content-grid[data-module] .teacher-upload-menu,
.content-grid[data-module] .teacher-message,
.content-grid[data-module] .today-card,
.content-grid[data-module] .tuner-string,
.content-grid[data-module] .support-question-item,
.content-grid[data-module] .support-answer-card {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 12% 10%, rgba(206, 145, 92, 0.07), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(122, 173, 255, 0.06), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.044), rgba(255, 255, 255, 0.016)),
    rgba(11, 14, 20, 0.68);
  box-shadow:
    0 2rem 5rem rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(24px) saturate(1.16);
  -webkit-backdrop-filter: blur(24px) saturate(1.16);
}

.content-grid[data-module] .panel h3,
.content-grid[data-module] .panel h4,
.content-grid[data-module] .dashboard-card h3,
.content-grid[data-module] .feature-card h3,
.content-grid[data-module] .quick-panel h3,
.content-grid[data-module] .teacher-guide h3,
.content-grid[data-module] .progress-panel h3,
.content-grid[data-module] .task-panel h3,
.content-grid[data-module] .advice-panel h3,
.content-grid[data-module] .membership-one-screen h3,
.content-grid[data-module] .generator-main-panel h3,
.content-grid[data-module] .score-generate-panel h3,
.content-grid[data-module] .knowledge-category-panel h3,
.content-grid[data-module] .violin-metronome-page h3,
.content-grid[data-module] .tuner-page h3,
.content-grid[data-module] .record-main-panel h3,
.content-grid[data-module] .teacher-answer-card h3,
.content-grid[data-module] .teacher-demo-card h3 {
  color: rgba(250, 251, 253, 0.98);
}

.content-grid[data-module] .muted,
.content-grid[data-module] .support-answer-content p,
.content-grid[data-module] .teacher-message,
.content-grid[data-module] .teacher-demo-card p,
.content-grid[data-module] .generator-result-grid span,
.content-grid[data-module] .generator-pipeline small {
  color: rgba(220, 226, 232, 0.64);
}

.content-grid[data-module] .support-keyword-row button,
.content-grid[data-module] .support-more-button,
.content-grid[data-module] .support-human-fallback .glass-button,
.content-grid[data-module] .support-answer-content .glass-button,
.content-grid[data-module] .metronome-bpm-console button,
.content-grid[data-module] .metronome-top-actions button,
.content-grid[data-module] .metronome-control-card button,
.content-grid[data-module] .metronome-mode-list button,
.content-grid[data-module] .metronome-segment-grid button,
.content-grid[data-module] .metronome-sound-mini-panel button,
.content-grid[data-module] .metronome-practice-mini-panel button,
.content-grid[data-module] .teacher-action-row .glass-button,
.content-grid[data-module] .teacher-upload-actions .glass-button,
.content-grid[data-module] .teacher-next-actions .glass-button,
.content-grid[data-module] .membership-one-screen .glass-button,
.content-grid[data-module] .generator-main-actions .glass-button,
.content-grid[data-module] .record-command-bar > .glass-button,
.content-grid[data-module] .score-generate-action,
.content-grid[data-module] .nav-item,
.content-grid[data-module] .endpoint-pill,
.content-grid[data-module] .member-pill {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.11);
  color: rgba(244, 246, 249, 0.93);
}

.content-grid[data-module] .support-keyword-row button.is-active,
.content-grid[data-module] .metronome-mode-list button.is-active,
.content-grid[data-module] .metronome-segment-grid button.is-active,
.content-grid[data-module] .metronome-practice-mini-panel button.is-active,
.content-grid[data-module] .support-human-fallback .glass-button.primary,
.content-grid[data-module] .support-answer-content .glass-button.primary,
.content-grid[data-module] .membership-one-screen .glass-button.primary,
.content-grid[data-module] .generator-main-actions .glass-button.primary,
.content-grid[data-module] .record-command-bar > .glass-button.primary {
  border-color: rgba(206, 145, 92, 0.34);
  background:
    linear-gradient(135deg, rgba(206, 145, 92, 0.3), rgba(122, 173, 255, 0.16)),
    rgba(255, 255, 255, 0.04);
  color: rgba(255, 245, 232, 0.98);
}

.content-grid[data-module] .score-canvas,
.content-grid[data-module] .generator-stage-panel,
.content-grid[data-module] .tuner-display,
.content-grid[data-module] .knowledge-3d-mini-panel,
.content-grid[data-module] .metronome-stage,
.content-grid[data-module] .record-focus-panel {
  background:
    radial-gradient(circle at 50% 18%, rgba(206, 145, 92, 0.11), transparent 22%),
    radial-gradient(circle at 50% 58%, rgba(122, 173, 255, 0.08), transparent 34%),
    rgba(4, 8, 12, 0.82);
}

/* Platform-wide premium dark glass layer */
:root,
:root[data-theme="warmIvory"],
:root[data-theme="silverBlue"] {
  --bg: #010204;
  --panel: rgba(7, 10, 15, 0.78);
  --panel-strong: rgba(10, 14, 21, 0.88);
  --line: rgba(232, 240, 255, 0.13);
  --line-strong: rgba(226, 181, 105, 0.42);
  --text: rgba(250, 252, 255, 0.96);
  --muted: rgba(221, 229, 238, 0.68);
  --soft: rgba(204, 216, 230, 0.48);
  --cyan: #a8ccff;
  --cyan-soft: rgba(112, 169, 241, 0.24);
  --gold: #e2b469;
  --gold-soft: rgba(226, 181, 105, 0.23);
  --shadow:
    0 1.6rem 4.2rem rgba(0, 0, 0, 0.62),
    0 0 3.2rem rgba(78, 128, 196, 0.1);
}

body,
:root[data-theme="warmIvory"] body,
:root[data-theme="silverBlue"] body {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 72% 8%, rgba(101, 153, 226, 0.26) 0%, rgba(101, 153, 226, 0.12) 28%, transparent 58%),
    radial-gradient(ellipse at 16% 84%, rgba(226, 181, 105, 0.24) 0%, rgba(226, 181, 105, 0.11) 30%, transparent 62%),
    radial-gradient(ellipse at 54% 110%, rgba(168, 204, 255, 0.12) 0%, transparent 42%),
    linear-gradient(140deg, #010204 0%, #05070c 38%, #080b12 62%, #020305 100%);
}

.app-shell {
  position: relative;
}

.app-shell::before,
.app-shell::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.app-shell::before {
  background:
    radial-gradient(ellipse at 82% 22%, rgba(104, 166, 252, 0.18), transparent 48%),
    radial-gradient(ellipse at 12% 72%, rgba(226, 181, 105, 0.16), transparent 50%),
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.025) 46%, transparent 72%);
  filter: blur(18px);
  opacity: 0.9;
}

.app-shell::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 24%, rgba(142, 184, 244, 0.035) 54%, transparent 78%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: screen;
  opacity: 0.22;
}

.main-stage {
  position: relative;
  z-index: 1;
}

.topbar {
  position: relative;
  border-radius: var(--card-radius);
  background:
    radial-gradient(ellipse at 14% 20%, rgba(226, 181, 105, 0.09), transparent 36%),
    radial-gradient(ellipse at 84% 8%, rgba(107, 168, 248, 0.105), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(3, 5, 8, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(236, 243, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 1.4rem 3.2rem rgba(0, 0, 0, 0.38),
    0 0 2.2rem rgba(96, 150, 220, 0.09);
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
}

.top-brand,
.top-nav,
.user-profile,
.icon-button,
.member-pill,
.support-pill {
  box-shadow:
    inset 0 0 0 1px rgba(236, 243, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.6rem 1.4rem rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px) saturate(1.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.14);
}

.top-nav {
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(4, 7, 11, 0.48);
}

.top-nav .nav-item,
.member-pill,
.icon-button,
.support-pill,
.user-profile {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(226, 181, 105, 0.08), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
    rgba(5, 8, 13, 0.6);
}

.top-nav .nav-item:hover,
.top-nav .nav-item.is-active,
.member-pill:hover,
.icon-button:hover,
.support-pill:hover,
.user-profile:hover {
  border-color: rgba(226, 181, 105, 0.3);
  background:
    radial-gradient(ellipse at 18% 0%, rgba(226, 181, 105, 0.2), transparent 54%),
    radial-gradient(ellipse at 88% 18%, rgba(108, 169, 248, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
    rgba(7, 10, 15, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(226, 181, 105, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0.9rem 2rem rgba(0, 0, 0, 0.34),
    0 0 2.4rem rgba(226, 181, 105, 0.12),
    0 0 2.6rem rgba(103, 158, 230, 0.1);
}

.content-grid[data-module] :is(
  .panel,
  .dashboard-card,
  .feature-card,
  .feature-tour,
  .feature-tile,
  .quick-panel,
  .teacher-guide,
  .progress-panel,
  .task-panel,
  .advice-panel,
  .hero-copy,
  .hero-metrics,
  .metric,
  .module-card,
  .portal-card,
  .piece-preview,
  .report-line,
  .profile-tile,
  .support-entry-panel,
  .support-service-panel,
  .support-answer-content,
  .support-human-fallback,
  .support-guess-list button,
  .support-question-item,
  .support-answer-card,
  .membership-one-screen,
  .membership-plan-card,
  .membership-comparison-row > *,
  .generator-main-panel,
  .generator-flow-panel,
  .generator-settings-card,
  .generator-editor-card,
  .generator-stage-panel,
  .generator-result-grid article,
  .generator-pipeline,
  .score-generate-panel,
  .score-generate-info article,
  .score-library-filter-panel,
    .score-import-main-panel,
  .score-import-hero,
  .score-import-quota,
  .score-import-dropzone,
  .score-import-route article,
  .score-import-status,
  .score-step-card,
  .score-preview-card,
  .score-result-preview,
  .score-import-features article,
  .score-import-flow,
  .knowledge-category-panel,
  .knowledge-3d-mini-panel,
  .knowledge-lesson-panel,
  .knowledge-section-panel,
  .knowledge-note-panel,
  .knowledge-side-slot,
  .knowledge-card-block,
  .knowledge-card-warning,
  .violin-metronome-page,
  .professional-tuner,
  .metronome-topbar,
  .metronome-stage,
  .metronome-control-card,
  .metronome-practice-mini-panel,
  .metronome-sound-mini-panel,
  .tuner-page,
  .tuner-pro-panel,
  .tuner-hand-panel,
  .tuner-display,
  .tuner-pegbox,
  .tuner-string,
  .tuner-spec-card,
  .tuner-auto-listening-card,
  .tuner-guidance-card,
  .tuner-string-status-card,
  .practice-record-one-screen,
  .record-summary-hero,
  .record-main-panel,
  .record-mini-panel,
  .record-trend-panel,
  .record-focus-panel,
  .record-recent-panel,
  .record-main-problems,
  .stuck-pattern-card,
  .report-focus-card,
  .report-trend-card,
  .practice-history-row,
  .teacher-workbench-chat,
  .teacher-workbench-tools,
  .teacher-answer-card,
  .teacher-demo-card,
  .teacher-player-embed-card,
  .teacher-upload-menu,
  .teacher-message,
  .teacher-current-question,
  .teacher-direct-answer,
  .teacher-reason-panel,
  .teacher-step-panel,
  .teacher-next-actions,
  .teacher-player-embed-shell,
  .today-card
) {
  border-color: rgba(236, 243, 255, 0.11);
  background:
    radial-gradient(ellipse at 14% 8%, rgba(226, 181, 105, 0.105), transparent 36%),
    radial-gradient(ellipse at 90% 12%, rgba(101, 159, 235, 0.1), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.018)),
    rgba(5, 8, 13, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(236, 243, 255, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1.8rem 4.8rem rgba(0, 0, 0, 0.58),
    0 0 2.8rem rgba(79, 132, 204, 0.105),
    0 0 2.2rem rgba(226, 181, 105, 0.07);
  backdrop-filter: blur(28px) saturate(1.22);
  -webkit-backdrop-filter: blur(28px) saturate(1.22);
}

.content-grid[data-module] :is(
  .score-canvas,
  .teacher-player-embed,
  .teacher-player-practice,
  .teacher-player-score,
  .teacher-player-stage,
  .score-editor-mini,
  .score-practice-mini,
  .score-upload-spotlight,
  .problem-note-map,
  .record-issue-list,
  .record-issue-overview,
  .tuner-display,
  .metronome-stage,
  .knowledge-3d-mini-panel
) {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(226, 181, 105, 0.16), transparent 34%),
    radial-gradient(ellipse at 52% 70%, rgba(93, 157, 244, 0.13), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
    rgba(2, 5, 9, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(236, 243, 255, 0.085),
    inset 0 0 2.2rem rgba(100, 162, 247, 0.07),
    0 1.5rem 4.2rem rgba(0, 0, 0, 0.52);
}

.content-grid[data-module] :is(
  .glass-button,
  .endpoint-pill,
  .chip,
  .select-like,
  .support-keyword-row button,
  .support-more-button,
  .metronome-bpm-console button,
  .metronome-top-actions button,
  .metronome-control-card button,
  .metronome-mode-list button,
  .metronome-segment-grid button,
  .metronome-sound-mini-panel button,
  .metronome-practice-mini-panel button,
  .teacher-action-row .glass-button,
  .teacher-upload-actions .glass-button,
  .teacher-next-actions .glass-button,
  .membership-one-screen .glass-button,
  .generator-main-actions .glass-button,
  .record-command-bar > .glass-button,
  .score-generate-action,
  .score-upload-primary,
  .score-upload-secondary,
  .report-text-action,
  .report-ghost-action,
  .problem-position-toggle,
  .teacher-mode-button,
  .teacher-voice-hold,
  .teacher-send-button,
  .teacher-plus-button,
  .teacher-upload-option,
  .support-secondary-action
) {
  border-color: rgba(236, 243, 255, 0.12);
  background:
    radial-gradient(ellipse at 18% 0%, rgba(226, 181, 105, 0.09), transparent 48%),
    radial-gradient(ellipse at 88% 18%, rgba(106, 169, 250, 0.085), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.022)),
    rgba(6, 9, 14, 0.72);
  color: rgba(248, 250, 253, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0.7rem 1.5rem rgba(0, 0, 0, 0.28),
    0 0 1.6rem rgba(83, 137, 208, 0.075);
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
}

.content-grid[data-module] :is(
  .glass-button.primary,
  .score-generate-action,
  .score-upload-primary,
  .metronome-start-action,
  .support-secondary-action,
  .membership-one-screen .glass-button.primary,
  .generator-main-actions .glass-button.primary,
  .record-command-bar > .glass-button.primary,
  .support-keyword-row button.is-active,
  .support-guess-list button.is-active,
  .metronome-mode-list button.is-active,
  .metronome-segment-grid button.is-active,
  .metronome-practice-mini-panel button.is-active
) {
  border-color: rgba(226, 181, 105, 0.42);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 219, 150, 0.2), transparent 52%),
    radial-gradient(ellipse at 92% 18%, rgba(114, 176, 255, 0.18), transparent 48%),
    linear-gradient(135deg, rgba(226, 181, 105, 0.28), rgba(93, 151, 226, 0.19)),
    rgba(7, 10, 15, 0.8);
  color: rgba(255, 247, 232, 0.98);
  box-shadow:
    inset 0 0 0 1px rgba(255, 233, 188, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0.9rem 2.2rem rgba(0, 0, 0, 0.36),
    0 0 2.4rem rgba(226, 181, 105, 0.16),
    0 0 2.8rem rgba(93, 151, 226, 0.105);
}

.content-grid[data-module] :is(
  .glass-button,
  .endpoint-pill,
  .chip,
  .select-like,
  .support-keyword-row button,
  .support-more-button,
  .metronome-bpm-console button,
  .metronome-top-actions button,
  .metronome-control-card button,
  .metronome-mode-list button,
  .metronome-segment-grid button,
  .metronome-sound-mini-panel button,
  .metronome-practice-mini-panel button,
  .teacher-action-row .glass-button,
  .teacher-upload-actions .glass-button,
  .teacher-next-actions .glass-button,
  .membership-one-screen .glass-button,
  .generator-main-actions .glass-button,
  .record-command-bar > .glass-button,
  .score-generate-action,
  .score-upload-primary,
  .score-upload-secondary,
  .report-text-action,
  .report-ghost-action,
  .teacher-upload-option
):hover {
  border-color: rgba(226, 181, 105, 0.34);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(226, 181, 105, 0.17), transparent 52%),
    radial-gradient(ellipse at 90% 18%, rgba(104, 170, 255, 0.15), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.032)),
    rgba(7, 10, 15, 0.84);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 197, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1rem 2.4rem rgba(0, 0, 0, 0.36),
    0 0 2.6rem rgba(226, 181, 105, 0.14),
    0 0 2.8rem rgba(104, 170, 255, 0.11);
}

.content-grid[data-module] :is(input, textarea, select) {
  border-color: rgba(236, 243, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(2, 5, 9, 0.72);
  color: rgba(248, 250, 253, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    inset 0 1px 1.5rem rgba(0, 0, 0, 0.18);
  caret-color: var(--gold);
}

.content-grid[data-module] :is(input, textarea, select):focus {
  border-color: rgba(226, 181, 105, 0.38);
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(226, 181, 105, 0.16),
    0 0 0 3px rgba(226, 181, 105, 0.08),
    0 0 2rem rgba(106, 169, 250, 0.1);
}

.content-grid[data-module] :is(input, textarea)::placeholder {
  color: rgba(204, 216, 230, 0.44);
}

.content-grid[data-module] :is(h1, h2, h3, h4, strong, b) {
  color: rgba(252, 253, 255, 0.97);
}

.content-grid[data-module] :is(p, li, small, span, em, label) {
  text-shadow: 0 0 1.25rem rgba(106, 169, 250, 0.045);
}

.content-grid[data-module] :is(.muted, small, p:not(.eyebrow)) {
  color: rgba(220, 229, 239, 0.68);
}

.content-grid[data-module] :is(.eyebrow, .nav-icon, .portal-action, .support-live-dot, .score-import-quota span, .membership-plan-meta) {
  color: rgba(226, 181, 105, 0.82);
  text-shadow: 0 0 1.4rem rgba(226, 181, 105, 0.18);
}

.content-grid[data-module] :is(.piece-preview.is-selected, .module-card:hover, ..membership-plan-card.is-recommended, .membership-plan-card.is-unlock-target, .stuck-pattern-card:hover) {
  border-color: rgba(226, 181, 105, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(226, 181, 105, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1.9rem 5.2rem rgba(0, 0, 0, 0.6),
    0 0 3rem rgba(226, 181, 105, 0.16),
    0 0 3.2rem rgba(102, 162, 242, 0.12);
}

.content-grid[data-module] :is(.score-editor-mini-page, .score-preview-card, .teacher-score-staff, .teacher-player-score, .score-editor-mini, .score-practice-mini) {
  color-scheme: dark;
}

/* Membership comparison readability pass */
.content-grid[data-module="membership"] .membership-comparison-title strong {
  font-size: clamp(1.02rem, 1.2vw, 1.28rem);
}

.content-grid[data-module="membership"] .membership-comparison-title span {
  font-size: clamp(0.72rem, 0.82vw, 0.9rem);
}

.content-grid[data-module="membership"] .membership-comparison-row > * {
  padding: clamp(0.12rem, 0.22vw, 0.24rem);
  font-size: clamp(0.94rem, 1.04vw, 1.16rem);
  font-weight: 620;
  line-height: 1.12;
}

.content-grid[data-module="membership"] .membership-comparison-row.is-head > * {
  font-size: clamp(0.96rem, 1.08vw, 1.18rem);
  font-weight: 780;
}

.content-grid[data-module="membership"] .membership-comparison-row strong {
  font-size: clamp(0.96rem, 1.08vw, 1.18rem);
  font-weight: 760;
}

.content-grid[data-module="membership"] .membership-comparison-row > *:first-child {
  padding-left: clamp(0.72rem, 1vw, 1rem);
}

.content-grid[data-module="membership"] .membership-check,
.content-grid[data-module="membership"] .membership-cross {
  min-width: 1.14rem;
  min-height: 1.14rem;
  font-size: clamp(0.78rem, 0.9vw, 1rem);
}

.content-grid[data-module="membership"] .membership-level {
  min-width: 1.6rem;
  min-height: 1.18rem;
  padding: 0.1rem 0.42rem;
  font-size: clamp(0.9rem, 1vw, 1.08rem);
  font-weight: 760;
}

/* Support page readability boost */
.content-grid[data-module="support"] > .support-two-panel {
  grid-template-columns: minmax(0, 6.15fr) minmax(22rem, 3.85fr);
  gap: clamp(1rem, 1.35vw, 1.35rem);
  padding: clamp(1.15rem, 1.55vw, 1.55rem);
}

.content-grid[data-module="support"] .support-entry-panel,
.content-grid[data-module="support"] .support-service-panel {
  padding: clamp(1.2rem, 1.7vw, 1.55rem);
  gap: clamp(0.72rem, 1vw, 0.96rem);
}

.content-grid[data-module="support"] .support-entry-head {
  gap: 0.42rem;
}

.content-grid[data-module="support"] .support-entry-head h3 {
  font-size: clamp(2rem, 3vw, 3.4rem);
}

.content-grid[data-module="support"] .support-service-head h3 {
  font-size: clamp(1.55rem, 2.1vw, 2.35rem);
}

.content-grid[data-module="support"] .support-entry-head p:not(.eyebrow) {
  font-size: clamp(0.95rem, 1.02vw, 1.06rem);
  line-height: 1.58;
}

.content-grid[data-module="support"] .support-board-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.72rem, 0.95vw, 0.96rem);
}

.content-grid[data-module="support"] .support-board-card {
  position: relative;
  display: grid;
  min-height: clamp(11rem, 15vw, 14.5rem);
  align-content: space-between;
  gap: 0.72rem;
  overflow: hidden;
  padding: clamp(1rem, 1.25vw, 1.2rem);
  border: 1px solid rgba(236, 243, 255, 0.13);
  border-radius: 0.95rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.022)),
    rgba(7, 10, 15, 0.72);
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1rem 2.4rem rgba(0, 0, 0, 0.24);
}

.content-grid[data-module="support"] .support-board-card::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(226, 181, 105, 0.16), transparent 42%),
    radial-gradient(ellipse at 92% 18%, rgba(106, 169, 250, 0.14), transparent 46%);
  content: "";
  opacity: 0.78;
  pointer-events: none;
}

.content-grid[data-module="support"] .support-board-card > * {
  position: relative;
  z-index: 1;
}

.content-grid[data-module="support"] .support-board-card span {
  width: fit-content;
  max-width: 100%;
  padding: 0.24rem 0.58rem;
  border: 1px solid rgba(236, 243, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 181, 105, 0.9);
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1.15;
}

.content-grid[data-module="support"] .support-board-card strong {
  color: rgba(255, 250, 240, 0.98);
  font-size: clamp(1.28rem, 1.65vw, 1.72rem);
  line-height: 1.12;
}

.content-grid[data-module="support"] .support-board-card small {
  color: rgba(220, 229, 239, 0.72);
  font-size: clamp(0.82rem, 0.9vw, 0.94rem);
  line-height: 1.48;
}

.content-grid[data-module="support"] .support-board-card b {
  color: rgba(179, 232, 251, 0.9);
  font-size: 0.78rem;
  font-weight: 780;
}

.content-grid[data-module="support"] .support-board-card:hover,
.content-grid[data-module="support"] .support-board-card.is-active {
  border-color: rgba(226, 181, 105, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.032)),
    rgba(8, 12, 18, 0.86);
  box-shadow:
    inset 0 0 0 1px rgba(226, 181, 105, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1.35rem 3rem rgba(0, 0, 0, 0.34),
    0 0 2.2rem rgba(226, 181, 105, 0.13);
}

.content-grid[data-module="support"] .support-block-title strong {
  font-size: clamp(1.08rem, 1.32vw, 1.28rem);
}

.content-grid[data-module="support"] .support-block-title span {
  padding: 0.36rem 0.62rem;
  font-size: 0.74rem;
}

.content-grid[data-module="support"] .support-input-block {
  padding: 1rem;
}

.content-grid[data-module="support"] .support-keyword-row {
  gap: 0.56rem;
}

.content-grid[data-module="support"] .support-keyword-row button {
  min-height: 2.64rem;
  padding: 0.72rem 1.05rem;
  font-size: 0.94rem;
}

.content-grid[data-module="support"] .support-guess-block {
  gap: 0.72rem;
}

.content-grid[data-module="support"] .support-guess-list {
  gap: 0.56rem 0.56rem;
}

.content-grid[data-module="support"] .support-guess-list button {
  min-height: 5.1rem;
  padding: 0.92rem 1rem;
  border-radius: 0.8rem;
}

.content-grid[data-module="support"] .support-guess-list strong {
  font-size: 1.02rem;
  line-height: 1.3;
}

.content-grid[data-module="support"] .support-guess-list span {
  font-size: 0.84rem;
  line-height: 1.42;
}

.content-grid[data-module="support"] .support-more-button {
  min-height: 2.36rem;
  padding-left: 0.88rem;
  font-size: 0.8rem;
}

.content-grid[data-module="support"] .support-live-dot {
  padding: 0.38rem 0.68rem;
  font-size: 0.78rem;
}

.content-grid[data-module="support"] .support-answer-content {
  gap: 0.74rem;
  padding: 0.18rem 0 0.88rem;
}

.content-grid[data-module="support"] .support-answer-content strong {
  font-size: clamp(1.32rem, 1.8vw, 1.98rem);
  line-height: 1.24;
}

.content-grid[data-module="support"] .support-answer-content p {
  font-size: 1rem;
  line-height: 1.65;
}

.content-grid[data-module="support"] .support-step-list {
  gap: 0.78rem;
}

.content-grid[data-module="support"] .support-step-list li {
  padding: 0.98rem 1.08rem 0.98rem 2.96rem;
  font-size: 1rem;
  line-height: 1.56;
}

.content-grid[data-module="support"] .support-step-list li::before {
  top: 0.96rem;
  left: 0.96rem;
  width: 1.32rem;
  height: 1.32rem;
  font-size: 0.84rem;
}

.content-grid[data-module="support"] .support-human-fallback {
  gap: 0.64rem;
  padding: 1.02rem 1.08rem;
}

.content-grid[data-module="support"] .support-human-fallback strong {
  font-size: 1.08rem;
}

.content-grid[data-module="support"] .support-human-dialog {
  gap: 0.38rem;
}

.content-grid[data-module="support"] .support-human-dialog span {
  font-size: 0.86rem;
}

.content-grid[data-module="support"] .support-human-dialog textarea {
  min-height: 5.8rem;
  padding: 0.96rem 1rem;
  font-size: 0.96rem;
  line-height: 1.58;
}

.content-grid[data-module="support"] .support-human-status {
  font-size: 0.86rem;
}

.content-grid[data-module="support"] .support-human-fallback .glass-button {
  min-height: 3.24rem;
  font-size: 1rem;
}

.content-grid[data-module="support"] .support-answer-content.is-empty,
.content-grid[data-module="support"] .support-answer-content.is-solved,
.content-grid[data-module="support"] .support-answer-content.is-human {
  min-height: clamp(11rem, 22vh, 15rem);
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] > .support-two-panel {
    padding: 1.08rem;
    gap: 1.08rem;
  }

  .content-grid[data-module="support"] .support-entry-panel,
  .content-grid[data-module="support"] .support-service-panel {
    padding: 1.08rem;
  }

  .content-grid[data-module="support"] .support-entry-head h3 {
    font-size: clamp(2.45rem, 12vw, 3.45rem);
  }

  .content-grid[data-module="support"] .support-service-head h3 {
    font-size: clamp(1.9rem, 7vw, 2.55rem);
  }

  .content-grid[data-module="support"] .support-entry-head p:not(.eyebrow) {
    font-size: 1.02rem;
  }

  .content-grid[data-module="support"] .support-block-title strong {
    font-size: 1.08rem;
  }

  .content-grid[data-module="support"] .support-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.62rem;
  }

  .content-grid[data-module="support"] .support-board-card {
    min-height: 8rem;
    padding: 0.78rem;
    border-radius: 0.86rem;
  }

  .content-grid[data-module="support"] .support-board-card strong {
    font-size: clamp(1.28rem, 6vw, 1.68rem);
  }

  .content-grid[data-module="support"] .support-board-card small {
    display: none;
  }

  .content-grid[data-module="support"] .support-board-card b {
    font-size: 0.72rem;
  }

  .content-grid[data-module="support"] .support-keyword-row button {
    min-height: 3rem;
    padding: 0.74rem 1.08rem;
    font-size: 0.96rem;
  }

  .content-grid[data-module="support"] .support-guess-list {
    grid-template-columns: 1fr;
    gap: 0.62rem;
  }

  .content-grid[data-module="support"] .support-guess-list button {
    min-height: 5.6rem;
  }

  .content-grid[data-module="support"] .support-answer-content strong {
    font-size: clamp(1.48rem, 6.5vw, 2rem);
  }

  .content-grid[data-module="support"] .support-answer-content p,
  .content-grid[data-module="support"] .support-guess-list span {
    font-size: 0.98rem;
  }

  .content-grid[data-module="support"] .support-step-list li {
    font-size: 1rem;
  }

  .content-grid[data-module="support"] .support-human-fallback .glass-button {
    min-height: 3.4rem;
    font-size: 1rem;
  }

  .content-grid[data-module="support"] .support-upload-grid {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="support"] .support-upload-entry {
    min-height: 4.2rem;
  }
}

/* Support panel de-fragmentation pass */
.content-grid[data-module="support"] .support-service-panel {
  gap: 0.56rem;
}

.content-grid[data-module="support"] .support-service-intro {
  display: none;
}

.content-grid[data-module="support"] .support-answer-content {
  gap: 0.42rem;
  padding: 0.18rem 0 0.46rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.content-grid[data-module="support"] .support-answer-content.is-empty,
.content-grid[data-module="support"] .support-answer-content.is-solved,
.content-grid[data-module="support"] .support-answer-content.is-human {
  min-height: 0;
}

.content-grid[data-module="support"] .support-answer-content strong {
  font-size: clamp(1rem, 1.22vw, 1.2rem);
  line-height: 1.28;
}

.content-grid[data-module="support"] .support-answer-content p {
  font-size: 0.8rem;
  line-height: 1.45;
}

.content-grid[data-module="support"] .support-human-fallback {
  gap: 0.38rem;
  padding: 0.34rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.content-grid[data-module="support"] .support-human-fallback strong {
  font-size: 0.82rem;
}

.content-grid[data-module="support"] .support-human-dialog {
  gap: 0.22rem;
}

.content-grid[data-module="support"] .support-human-dialog textarea {
  min-height: 4rem;
}

.content-grid[data-module="support"] .support-human-status {
  margin-top: -0.02rem;
}

.content-grid[data-module="support"] .support-human-fallback .glass-button {
  max-width: 15rem;
}

.content-grid[data-module="support"] .support-human-fallback {
  grid-template-columns: 1fr;
}

.content-grid[data-module="support"] .support-human-fallback .glass-button,
.content-grid[data-module="support"] .support-human-fallback .support-secondary-action {
  width: 100%;
  max-width: none;
  min-height: 2.7rem;
  border-radius: 0.8rem;
}

.content-grid[data-module="support"] .support-human-dialog textarea {
  width: 100%;
}

.content-grid[data-module="support"] .support-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.48rem;
}

.content-grid[data-module="support"] .support-upload-entry {
  position: relative;
  display: grid;
  min-height: clamp(4.6rem, 8.2vh, 5.8rem);
  align-content: center;
  gap: 0.18rem;
  overflow: hidden;
  padding: 0.68rem 0.54rem;
  border: 1px solid rgba(236, 243, 255, 0.12);
  border-radius: 0.88rem;
  background:
    radial-gradient(ellipse at 20% 8%, rgba(226, 181, 105, 0.12), transparent 46%),
    radial-gradient(ellipse at 90% 16%, rgba(106, 169, 250, 0.1), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(6, 9, 14, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.8rem 1.7rem rgba(0, 0, 0, 0.22);
  color: rgba(244, 248, 252, 0.94);
  cursor: pointer;
  pointer-events: auto;
}

.content-grid[data-module="support"] .support-upload-entry input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.content-grid[data-module="support"] .support-upload-entry span {
  color: rgba(226, 181, 105, 0.9);
  font-size: 0.74rem;
  font-weight: 820;
}

.content-grid[data-module="support"] .support-upload-entry strong {
  font-size: clamp(0.88rem, 1vw, 1.02rem);
  line-height: 1.15;
}

.content-grid[data-module="support"] .support-upload-entry small {
  color: rgba(220, 229, 239, 0.62);
  font-size: 0.68rem;
  line-height: 1.2;
}

.content-grid[data-module="support"] .support-upload-entry:hover {
  border-color: rgba(226, 181, 105, 0.34);
  background:
    radial-gradient(ellipse at 20% 8%, rgba(226, 181, 105, 0.18), transparent 48%),
    radial-gradient(ellipse at 90% 16%, rgba(106, 169, 250, 0.14), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
    rgba(7, 10, 15, 0.76);
}

.content-grid[data-module="support"] .support-human-dialog-compact textarea {
  min-height: 3.2rem;
  padding: 0.72rem 0.86rem;
}

@media (max-width: 1080px) {
  .content-grid[data-module="support"] > .support-two-panel {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    overflow: visible;
  }

  .content-grid[data-module="support"] .support-entry-panel,
  .content-grid[data-module="support"] .support-service-panel {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .top-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .top-nav .nav-item {
    flex: 0 0 auto;
    min-width: 4rem;
  }

  .content-grid[data-module="support"] > .support-two-panel {
    padding: 0.72rem;
    gap: 0.82rem;
    border-radius: 0.86rem;
  }

  .content-grid[data-module="support"] .support-entry-panel,
  .content-grid[data-module="support"] .support-service-panel {
    padding: 0.9rem;
    border-radius: 0.82rem;
  }

  .content-grid[data-module="support"] .support-entry-head h3 {
    font-size: clamp(1.85rem, 8.5vw, 2.55rem);
  }

  .content-grid[data-module="support"] .support-service-head {
    align-items: start;
    flex-direction: column;
  }

  .content-grid[data-module="support"] .support-live-dot {
    width: 100%;
    white-space: normal;
  }

  .content-grid[data-module="support"] .support-input-block {
    padding: 0.72rem;
  }

  .content-grid[data-module="support"] .support-keyword-row {
    display: flex;
    gap: 0.44rem;
    overflow-x: auto;
    padding-bottom: 0.08rem;
    scrollbar-width: none;
  }

  .content-grid[data-module="support"] .support-keyword-row button {
    flex: 0 0 auto;
    min-height: 2.7rem;
    padding: 0.68rem 0.78rem;
    white-space: nowrap;
  }

  .content-grid[data-module="support"] .support-guess-list button {
    min-height: 4.75rem;
    padding: 0.82rem 0.88rem;
  }

  .content-grid[data-module="support"] .support-guess-list span {
    display: none;
  }

  .content-grid[data-module="support"] .support-upload-grid {
    grid-template-columns: 1fr;
  }
}

/* Membership comparison final header layout */
.content-grid[data-module="membership"] .membership-comparison-title {
  display: none;
}

.content-grid[data-module="membership"] .membership-comparison-row.is-head > *:first-child {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.48rem;
  color: var(--gold);
}

.content-grid[data-module="membership"] .membership-comparison-row.is-head > *:first-child strong {
  color: inherit;
  font-size: clamp(1rem, 1.08vw, 1.14rem);
  font-weight: 780;
}

.content-grid[data-module="membership"] .membership-comparison-row.is-head > *:first-child small {
  color: rgba(230, 232, 236, 0.84);
  font-size: clamp(0.54rem, 0.6vw, 0.68rem);
  font-weight: 460;
  white-space: nowrap;
}

/* Support center polish pass */
.content-grid[data-module="support"] .support-answer-content.is-empty {
  gap: 0.58rem;
  padding: 0.84rem 0.92rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.94rem;
  background:
    radial-gradient(circle at 10% 12%, rgba(206, 145, 92, 0.08), transparent 26%),
    radial-gradient(circle at 92% 14%, rgba(122, 173, 255, 0.06), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(255, 255, 255, 0.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.8rem 1.8rem rgba(0, 0, 0, 0.12);
}

.content-grid[data-module="support"] .support-answer-content.is-empty strong {
  font-size: clamp(1rem, 1.14vw, 1.16rem);
}

.content-grid[data-module="support"] .support-answer-content.is-empty p {
  margin: 0;
  color: rgba(224, 233, 239, 0.66);
  font-size: 0.8rem;
  line-height: 1.5;
}

.content-grid[data-module="support"] .support-empty-tags,
.content-grid[data-module="support"] .support-human-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.content-grid[data-module="support"] .support-empty-tags span,
.content-grid[data-module="support"] .support-human-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 1.62rem;
  padding: 0.14rem 0.56rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(236, 239, 244, 0.78);
  font-size: 0.7rem;
  font-weight: 700;
}

.content-grid[data-module="support"] .support-human-fallback {
  gap: 0.72rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(232, 199, 118, 0.16);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 14% 10%, rgba(206, 145, 92, 0.12), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(122, 173, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1.2rem 2.8rem rgba(0, 0, 0, 0.22);
}

.content-grid[data-module="support"] .support-human-copy {
  display: grid;
  gap: 0.28rem;
}

.content-grid[data-module="support"] .support-human-kicker {
  color: rgba(226, 181, 105, 0.88);
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-grid[data-module="support"] .support-human-copy strong {
  font-size: 1.02rem;
  line-height: 1.28;
}

.content-grid[data-module="support"] .support-human-copy p {
  margin: 0;
  color: rgba(224, 233, 239, 0.64);
  font-size: 0.78rem;
  line-height: 1.46;
}

.content-grid[data-module="support"] .support-human-dialog {
  gap: 0.34rem;
}

.content-grid[data-module="support"] .support-human-dialog span {
  font-size: 0.8rem;
}

.content-grid[data-module="support"] .support-human-dialog textarea {
  min-height: 5.2rem;
  padding: 0.9rem 0.95rem;
  border-radius: 0.84rem;
  font-size: 0.92rem;
  line-height: 1.56;
}

.content-grid[data-module="support"] .support-human-status {
  margin-top: -0.02rem;
  color: rgba(206, 145, 92, 0.9);
  font-size: 0.8rem;
}

.content-grid[data-module="support"] .support-human-fallback .glass-button {
  min-height: 3rem;
  padding-inline: 1rem;
  font-size: 0.98rem;
  font-weight: 780;
}

/* Membership comparison fill + softer left labels */
.content-grid[data-module="membership"] .membership-comparison-shell {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  align-self: stretch;
}

.content-grid[data-module="membership"] .membership-comparison {
  height: 100%;
  min-height: 0;
  grid-auto-rows: minmax(clamp(1.75rem, 2.8vh, 2.3rem), 1fr);
  align-content: stretch;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.008)),
    rgba(0, 0, 0, 0.14);
}

.content-grid[data-module="membership"] .membership-comparison-row > * {
  min-height: clamp(1.75rem, 2.8vh, 2.3rem);
  padding: clamp(0.1rem, 0.18vw, 0.18rem) clamp(0.18rem, 0.3vw, 0.34rem);
  font-size: clamp(0.7rem, 0.8vw, 0.86rem);
  line-height: 1.16;
}

.content-grid[data-module="membership"] .membership-comparison-row > *:first-child {
  padding-left: clamp(0.68rem, 0.94vw, 0.96rem);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)),
    rgba(255, 255, 255, 0.008);
}

.content-grid[data-module="membership"] .membership-comparison-row strong {
  color: rgba(238, 242, 247, 0.82);
  font-size: clamp(0.8rem, 0.9vw, 0.98rem);
  font-weight: 640;
  letter-spacing: 0.01em;
}

.content-grid[data-module="membership"] .membership-comparison-row.is-head > * {
  font-size: clamp(0.82rem, 0.96vw, 1rem);
  font-weight: 780;
}

.content-grid[data-module="membership"] .membership-comparison-row.is-head > *:first-child {
  gap: 0.36rem;
  color: rgba(255, 214, 148, 0.94);
  background:
    linear-gradient(90deg, rgba(228, 199, 127, 0.12), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.02);
}

.content-grid[data-module="membership"] .membership-comparison-row.is-head > *:first-child strong {
  color: inherit;
  font-size: clamp(0.9rem, 1vw, 1.06rem);
  font-weight: 780;
}

.content-grid[data-module="membership"] .membership-comparison-row.is-head > *:first-child small {
  color: rgba(236, 239, 244, 0.6);
  font-size: clamp(0.5rem, 0.56vw, 0.64rem);
  font-weight: 460;
  white-space: nowrap;
}

.content-grid[data-module="membership"] .membership-check,
.content-grid[data-module="membership"] .membership-cross {
  min-width: 1.02rem;
  min-height: 1.02rem;
  font-size: clamp(0.7rem, 0.8vw, 0.9rem);
  opacity: 0.88;
}

.content-grid[data-module="membership"] .membership-level {
  min-width: 1.5rem;
  min-height: 1.08rem;
  padding: 0.08rem 0.38rem;
  color: rgba(255, 231, 188, 0.9);
  font-size: clamp(0.76rem, 0.86vw, 0.94rem);
  font-weight: 700;
  text-shadow: 0 0 0.9rem rgba(226, 181, 105, 0.12);
}

/* Top navigation: bright idle pills, pressed active pill. */
.top-nav .nav-item,
.top-nav .nav-item:hover,
.top-nav .nav-item.is-active {
  border-color: transparent;
}

.top-nav .nav-item {
  color: rgba(244, 247, 250, 0.94);
  background:
    radial-gradient(ellipse at 18% 0%, rgba(226, 181, 105, 0.18), transparent 50%),
    radial-gradient(ellipse at 88% 18%, rgba(108, 169, 248, 0.14), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)),
    rgba(9, 12, 18, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0.6rem 1.35rem rgba(0, 0, 0, 0.18),
    0 0 1.2rem rgba(226, 181, 105, 0.08);
}

.top-nav .nav-item:hover {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(226, 181, 105, 0.24), transparent 52%),
    radial-gradient(ellipse at 88% 18%, rgba(108, 169, 248, 0.2), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)),
    rgba(10, 14, 20, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0.85rem 1.6rem rgba(0, 0, 0, 0.2),
    0 0 1.6rem rgba(226, 181, 105, 0.12);
}

.top-nav .nav-item.is-active {
  color: rgba(228, 232, 239, 0.9);
  background:
    radial-gradient(ellipse at 18% 0%, rgba(226, 181, 105, 0.08), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(6, 8, 12, 0.92);
  box-shadow:
    inset 0 0.2rem 0.7rem rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0.35rem 0.8rem rgba(0, 0, 0, 0.16);
  transform: translateY(1px);
}

/* Top navigation IA: four primary groups, second-level boards in content. */
.top-nav-group {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  min-width: clamp(5.8rem, 7.2vw, 8.2rem);
}

.top-nav-group .top-nav-trigger {
  width: 100%;
}


/* Final membership card composition: title, action, price. */
.content-grid[data-module="membership"] .membership-plan-grid {
  gap: clamp(0.45rem, 0.72vw, 0.74rem);
}

.content-grid[data-module="membership"] .membership-plan-card {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(9.2rem, 1.08fr) minmax(5.9rem, 0.8fr);
  grid-template-rows: auto auto;
  column-gap: clamp(0.4rem, 0.66vw, 0.76rem);
  row-gap: clamp(0.24rem, 0.36vw, 0.34rem);
  align-items: center;
  padding: clamp(0.36rem, 0.58vw, 0.54rem) clamp(0.5rem, 0.82vw, 0.86rem);
  border-radius: calc(var(--radius) * 0.6);
}

.content-grid[data-module="membership"] .membership-plan-head {
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 2;
  gap: 0.28rem;
  align-self: center;
}

.content-grid[data-module="membership"] .membership-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  align-items: center;
}

.content-grid[data-module="membership"] .membership-plan-card h4 {
  margin: 0;
  color: rgba(250, 252, 255, 0.98);
  font-size: clamp(1.02rem, 1.22vw, 1.28rem);
  line-height: 1.06;
  font-weight: 780;
}

.content-grid[data-module="membership"] .membership-plan-card button {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: center;
  align-self: center;
  width: min(100%, clamp(8.7rem, 11.8vw, 10.4rem));
  min-height: clamp(2.46rem, 3.18vh, 2.76rem);
  padding: 0.36rem 1.22rem;
  border-radius: 999px;
  font-size: clamp(1rem, 1.12vw, 1.18rem);
  font-weight: 840;
}

.content-grid[data-module="membership"] .membership-price {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-content: flex-end;
  align-self: center;
  margin: 0;
  padding: 0;
  transform: none;
  min-height: 0;
}

.content-grid[data-module="membership"] .membership-price small {
  font-size: clamp(0.74rem, 0.84vw, 0.88rem);
}

.content-grid[data-module="membership"] .membership-price strong {
  font-size: clamp(2.3rem, 3.5vw, 3.55rem);
  letter-spacing: -0.02em;
}

.content-grid[data-module="membership"] .membership-price em {
  font-size: clamp(0.62rem, 0.72vw, 0.78rem);
}

.content-grid[data-module="membership"] .membership-plan-badge {
  min-height: 1.04rem;
  padding-inline: 0.46rem;
  font-size: clamp(0.6rem, 0.68vw, 0.74rem);
}

.content-grid[data-module="membership"] .membership-plan-note {
  font-size: clamp(0.54rem, 0.6vw, 0.66rem);
}

.content-grid[data-module="membership"] .membership-plan-card.is-recommended .membership-plan-badge {
  position: relative;
  overflow: hidden;
  color: rgba(255, 248, 233, 0.98);
  background:
    linear-gradient(135deg, rgba(168, 115, 40, 0.92), rgba(228, 173, 73, 0.74) 52%, rgba(255, 232, 165, 0.2)),
    rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 225, 0.26),
    0 0 0 1px rgba(255, 232, 165, 0.08),
    0 0 1.2rem rgba(228, 173, 73, 0.24);
  animation: membershipRecommendBadgeBreathe 4.8s ease-in-out infinite;
}

.content-grid[data-module="membership"] .membership-plan-card.is-recommended .membership-plan-badge::after {
  position: absolute;
  inset: -35% auto -35% -58%;
  width: 46%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  content: "";
  opacity: 0;
  transform: skewX(-18deg);
  animation: membershipRecommendBadgeSheen 5.6s ease-in-out infinite;
}

.content-grid[data-module="membership"] .membership-plan-card.is-recommended button,
.content-grid[data-module="membership"] .membership-plan-card.is-unlock-target button {
  color: rgba(255, 248, 233, 0.98);
}

.content-grid[data-module="membership"] .membership-plan-card:not(.is-recommended):not(.is-unlock-target) button {
  color: rgba(245, 248, 252, 0.96);
  background:
    radial-gradient(ellipse at 18% 0%, rgba(226, 181, 105, 0.06), transparent 48%),
    radial-gradient(ellipse at 88% 18%, rgba(106, 169, 250, 0.07), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(6, 9, 14, 0.66);
}

@keyframes membershipRecommendBadgeBreathe {
  0%, 100% {
    border-color: rgba(255, 218, 139, 0.44);
    filter: brightness(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 249, 225, 0.26),
      0 0 0 1px rgba(255, 232, 165, 0.08),
      0 0 1.2rem rgba(228, 173, 73, 0.24);
  }
  50% {
    border-color: rgba(255, 238, 185, 0.68);
    filter: brightness(1.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 249, 225, 0.34),
      0 0 0 1px rgba(255, 232, 165, 0.14),
      0 0 1.65rem rgba(228, 173, 73, 0.38),
      0 0 1.4rem rgba(106, 169, 250, 0.08);
  }
}

@keyframes membershipRecommendBadgeSheen {
  0%, 34% {
    opacity: 0;
    transform: translateX(0) skewX(-18deg);
  }
  48% {
    opacity: 0.72;
  }
  66%, 100% {
    opacity: 0;
    transform: translateX(360%) skewX(-18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-grid[data-module="membership"] .membership-plan-card.is-recommended .membership-plan-badge,
  .content-grid[data-module="membership"] .membership-plan-card.is-recommended .membership-plan-badge::after {
    animation: none;
  }
}

/* Top account entry: a softer glass control with a two-item account menu. */
.user-area {
  isolation: isolate;
}

.user-profile {
  position: relative;
  min-height: clamp(2.55rem, 3.1vw, 3rem);
  padding: 0.18rem 0.32rem 0.18rem 0.2rem;
  border: 1px solid rgba(236, 243, 255, 0.12);
  border-radius: 999px;
  background:
    radial-gradient(circle at 16% 0%, rgba(226, 181, 105, 0.1), transparent 46%),
    radial-gradient(circle at 92% 16%, rgba(106, 169, 250, 0.105), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(5, 8, 13, 0.68);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0.75rem 1.8rem rgba(0, 0, 0, 0.24);
}

.user-profile:hover,
.user-profile[aria-expanded="true"] {
  border-color: rgba(226, 181, 105, 0.34);
  background:
    radial-gradient(circle at 18% 0%, rgba(226, 181, 105, 0.18), transparent 48%),
    radial-gradient(circle at 92% 18%, rgba(106, 169, 250, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.026)),
    rgba(7, 10, 15, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(226, 181, 105, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0.9rem 2rem rgba(0, 0, 0, 0.34),
    0 0 1.7rem rgba(226, 181, 105, 0.09);
}

.user-profile img {
  border-color: rgba(226, 181, 105, 0.2);
  box-shadow:
    0 0 0 0.18rem rgba(255, 255, 255, 0.035),
    0 0 1.1rem rgba(106, 169, 250, 0.08);
}

.user-profile span {
  padding-inline: 0.18rem;
  color: rgba(252, 253, 255, 0.96);
  font-weight: 720;
}

.profile-settings-symbol {
  width: 1.88rem;
  height: 1.88rem;
  border-color: rgba(236, 243, 255, 0.14);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.12), transparent 48%),
    rgba(255, 255, 255, 0.05);
  color: rgba(226, 181, 105, 0.9);
  font-size: 0.86rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0.9rem rgba(106, 169, 250, 0.08);
}

.user-profile:hover .profile-settings-symbol,
.user-profile[aria-expanded="true"] .profile-settings-symbol {
  border-color: rgba(226, 181, 105, 0.38);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 232, 178, 0.18), transparent 52%),
    rgba(226, 181, 105, 0.08);
  color: rgba(255, 239, 202, 0.98);
  transform: rotate(28deg);
}

.account-menu-popover {
  position: absolute;
  top: calc(100% + 0.62rem);
  right: 0;
  z-index: 80;
  display: grid;
  width: min(15rem, calc(100vw - 2rem));
  gap: 0.42rem;
  padding: 0.48rem;
  border: 1px solid rgba(236, 243, 255, 0.13);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 18% 6%, rgba(226, 181, 105, 0.12), transparent 38%),
    radial-gradient(circle at 88% 14%, rgba(106, 169, 250, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.024)),
    rgba(4, 7, 11, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1.3rem 3rem rgba(0, 0, 0, 0.42),
    0 0 2rem rgba(106, 169, 250, 0.08);
  backdrop-filter: blur(28px) saturate(1.18);
  -webkit-backdrop-filter: blur(28px) saturate(1.18);
}

.account-menu-popover::before {
  position: absolute;
  top: -0.42rem;
  right: 1.35rem;
  width: 0.78rem;
  height: 0.78rem;
  border-top: 1px solid rgba(236, 243, 255, 0.13);
  border-left: 1px solid rgba(236, 243, 255, 0.13);
  background: rgba(4, 7, 11, 0.92);
  content: "";
  transform: rotate(45deg);
}

.account-menu-popover button {
  position: relative;
  display: grid;
  gap: 0.18rem;
  min-height: 3.3rem;
  padding: 0.7rem 0.78rem;
  border: 1px solid rgba(236, 243, 255, 0.1);
  border-radius: 0.72rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.035);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.account-menu-popover button:hover {
  border-color: rgba(226, 181, 105, 0.32);
  background:
    radial-gradient(circle at 12% 0%, rgba(226, 181, 105, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.024)),
    rgba(255, 255, 255, 0.05);
}

.account-menu-popover strong {
  color: rgba(255, 244, 218, 0.98);
  font-size: 0.96rem;
}

.account-menu-popover span {
  color: rgba(220, 229, 239, 0.62);
  font-size: 0.76rem;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .content-grid[data-module="membership"] .membership-plan-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 0.3rem;
  }

  .content-grid[data-module="membership"] .membership-plan-head {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .content-grid[data-module="membership"] .membership-plan-card button {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    width: min(100%, clamp(9.2rem, 56vw, 11.2rem));
    min-height: clamp(2.52rem, 4.2vh, 3rem);
  }

  .content-grid[data-module="membership"] .membership-price {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
  }
}

/* Membership comparison header vertical balance. */
.content-grid[data-module="membership"] .membership-comparison-row.is-head > * {
  align-content: center;
  align-items: center;
}

.content-grid[data-module="membership"] .membership-comparison-row.is-head > *:first-child {
  align-items: center;
  padding-top: clamp(0.2rem, 0.34vw, 0.32rem);
  padding-bottom: clamp(0.22rem, 0.36vw, 0.34rem);
}

.content-grid[data-module="membership"] .membership-comparison-head-label {
  transform: translateY(0.08rem);
}

/* Final support upload material block. */
.content-grid[data-module="support"] .support-human-fallback {
  gap: 0.56rem;
  padding: 0.82rem 0.9rem;
  align-content: start;
  justify-content: stretch;
}

.content-grid[data-module="support"] .support-human-copy {
  gap: 0.2rem;
}

.content-grid[data-module="support"] .support-human-copy strong {
  font-size: clamp(1rem, 1.12vw, 1.12rem);
}

.content-grid[data-module="support"] .support-human-copy p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.38;
}

.content-grid[data-module="support"] .support-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.44rem;
}

.content-grid[data-module="support"] .support-upload-entry {
  position: relative;
  display: grid;
  min-height: clamp(3.55rem, 5.6vh, 4.25rem);
  align-content: center;
  gap: 0.16rem;
  overflow: hidden;
  padding: 0.54rem 0.58rem;
  border: 1px solid rgba(236, 243, 255, 0.12);
  border-radius: 0.82rem;
  background:
    radial-gradient(ellipse at 20% 8%, rgba(226, 181, 105, 0.12), transparent 46%),
    radial-gradient(ellipse at 90% 16%, rgba(106, 169, 250, 0.1), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(6, 9, 14, 0.62);
  color: rgba(244, 248, 252, 0.94);
  cursor: pointer;
}

.content-grid[data-module="support"] .support-upload-entry input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.content-grid[data-module="support"] .support-upload-entry strong {
  color: rgba(255, 236, 197, 0.94);
  font-size: clamp(0.94rem, 1.06vw, 1.1rem);
  font-weight: 820;
  line-height: 1.12;
}

.content-grid[data-module="support"] .support-upload-entry small {
  overflow: hidden;
  color: rgba(220, 229, 239, 0.62);
  font-size: 0.62rem;
  line-height: 1.14;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-grid[data-module="support"] .support-human-dialog-compact textarea {
  min-height: clamp(10rem, 24vh, 15rem);
  padding: 0.86rem 0.95rem;
}

.content-grid[data-module="support"] .support-chat-card {
  gap: 0.72rem;
  overflow: hidden;
  padding: 0.82rem;
  border: 1px solid rgba(120, 222, 248, 0.16);
  border-radius: 0.94rem;
  background:
    radial-gradient(ellipse at 18% 14%, rgba(120, 222, 248, 0.12), transparent 36%),
    radial-gradient(ellipse at 92% 10%, rgba(226, 181, 105, 0.08), transparent 34%),
    rgba(3, 8, 13, 0.58);
}

.content-grid[data-module="support"] .support-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 0.56rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.content-grid[data-module="support"] .support-chat-head strong {
  display: block;
  font-size: 1rem;
}

.content-grid[data-module="support"] .support-chat-head p {
  margin: 0.1rem 0 0;
  color: rgba(210, 232, 240, 0.62);
  font-size: 0.72rem;
}

.content-grid[data-module="support"] .support-chat-head > span {
  flex: 0 0 auto;
  padding: 0.22rem 0.5rem;
  border: 1px solid rgba(120, 222, 248, 0.16);
  border-radius: 999px;
  color: rgba(176, 231, 248, 0.78);
  font-size: 0.68rem;
  font-weight: 760;
}

.content-grid[data-module="support"] .support-chat-thread {
  display: grid;
  gap: 0.48rem;
  max-height: clamp(8rem, 19vh, 13rem);
  overflow: auto;
  padding-right: 0.18rem;
}

.content-grid[data-module="support"] .support-chat-message {
  display: grid;
  max-width: 86%;
  gap: 0.18rem;
}

.content-grid[data-module="support"] .support-chat-message span,
.content-grid[data-module="support"] .support-chat-message time {
  color: rgba(212, 230, 238, 0.52);
  font-size: 0.62rem;
  font-weight: 720;
}

.content-grid[data-module="support"] .support-chat-message p {
  margin: 0;
  padding: 0.56rem 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(242, 247, 250, 0.9);
  font-size: 0.82rem;
  line-height: 1.48;
}

.content-grid[data-module="support"] .support-chat-message.is-user {
  justify-self: end;
  text-align: right;
}

.content-grid[data-module="support"] .support-chat-message.is-user p {
  border-color: rgba(226, 181, 105, 0.24);
  background:
    linear-gradient(135deg, rgba(226, 181, 105, 0.2), rgba(120, 222, 248, 0.08)),
    rgba(255, 255, 255, 0.04);
}

.content-grid[data-module="support"] .support-chat-message.is-agent p {
  border-color: rgba(120, 222, 248, 0.2);
  background:
    linear-gradient(135deg, rgba(120, 222, 248, 0.16), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.04);
}

.content-grid[data-module="support"] .support-chat-message.is-system {
  justify-self: center;
  max-width: 100%;
  text-align: center;
}

.content-grid[data-module="support"] .support-chat-message.is-system p {
  border-style: dashed;
  color: rgba(220, 231, 238, 0.62);
  font-size: 0.74rem;
}

/* Support motion assistant slot. */
.content-grid[data-module="support"] .support-motion-stage {
  position: relative;
  display: grid;
  contain: layout paint style;
  min-height: clamp(8.8rem, 17vh, 11rem);
  overflow: hidden;
  border: 1px solid rgba(120, 222, 248, 0.22);
  border-radius: 0.78rem;
  background:
    linear-gradient(90deg, rgba(120, 222, 248, 0.075) 1px, transparent 1px),
    linear-gradient(0deg, rgba(120, 222, 248, 0.05) 1px, transparent 1px),
    radial-gradient(ellipse at 22% 24%, rgba(93, 210, 248, 0.22), transparent 42%),
    radial-gradient(ellipse at 88% 14%, rgba(236, 186, 96, 0.18), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.018)),
    rgba(4, 8, 13, 0.82);
  background-size: 2.6rem 2.6rem, 2.6rem 2.6rem, auto, auto, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(120, 222, 248, 0.08),
    0 1.1rem 2.5rem rgba(0, 0, 0, 0.26),
    0 0 1.9rem rgba(103, 196, 226, 0.1);
  pointer-events: none;
  user-select: none;
}

.content-grid[data-module="support"] .support-motion-stage *,
.content-grid[data-module="support"] .support-motion-stage::before,
.content-grid[data-module="support"] .support-motion-stage::after {
  pointer-events: none;
}

.content-grid[data-module="support"] .support-motion-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 18% 82%, rgba(255, 255, 255, 0.04)),
    radial-gradient(ellipse at 50% 110%, rgba(120, 222, 248, 0.18), transparent 58%);
  opacity: 0.68;
  pointer-events: none;
}

.content-grid[data-module="support"] .support-motion-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  pointer-events: none;
}

.content-grid[data-module="support"] .support-motion-figure,
.content-grid[data-module="support"] .support-motion-ambient {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}

.content-grid[data-module="support"] .support-motion-figure {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  z-index: 2;
}

.content-grid[data-module="support"] .support-motion-ambient {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.content-grid[data-module="support"] .support-motion-scan {
  position: absolute;
  inset: -45% auto -45% -22%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(154, 233, 252, 0.18), transparent);
  filter: blur(0.2rem);
  transform: skewX(-18deg);
  animation: supportMotionScan 7.6s ease-in-out infinite;
  will-change: transform, opacity;
}

.content-grid[data-module="support"] .support-motion-pulse {
  position: absolute;
  left: 16%;
  top: 50%;
  width: clamp(4.5rem, 8vw, 6.4rem);
  aspect-ratio: 1;
  border: 1px solid rgba(120, 222, 248, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 1.6rem rgba(120, 222, 248, 0.1);
  transform: translate(-50%, -50%);
  animation: supportMotionPulse 4.8s ease-out infinite;
  will-change: transform, opacity;
}

.content-grid[data-module="support"] .support-motion-pulse.is-secondary {
  left: auto;
  right: 9%;
  top: 32%;
  width: clamp(3rem, 5.4vw, 4.6rem);
  border-color: rgba(236, 186, 96, 0.16);
  animation-delay: 0.75s;
}

.content-grid[data-module="support"] .support-motion-orbit {
  position: absolute;
  width: clamp(5.8rem, 10.8vw, 8rem);
  aspect-ratio: 1;
  border: 1px solid rgba(128, 217, 247, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 1.2rem rgba(94, 210, 248, 0.12);
  transform: rotate(-18deg) scaleX(1.26);
  animation: supportMotionOrbit 14s linear infinite;
  will-change: transform;
}

.content-grid[data-module="support"] .support-motion-orbit.is-secondary {
  width: clamp(3.8rem, 7.2vw, 5.2rem);
  border-color: rgba(226, 181, 105, 0.2);
  transform: rotate(32deg) scaleX(1.38);
  animation-duration: 18s;
  animation-direction: reverse;
}

.content-grid[data-module="support"] .support-motion-avatar {
  position: relative;
  display: grid;
  width: clamp(4.35rem, 7.6vw, 5.7rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(199, 236, 250, 0.24);
  border-radius: 38% 42% 44% 36%;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.2), transparent 16%),
    linear-gradient(160deg, rgba(113, 208, 236, 0.38), rgba(226, 181, 105, 0.16)),
    rgba(7, 12, 18, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0.8rem 1.5rem rgba(0, 0, 0, 0.24),
    0 0 1.8rem rgba(104, 207, 237, 0.18);
  animation: supportMotionFloat 6.4s ease-in-out infinite;
  will-change: transform;
  z-index: 2;
}

.content-grid[data-module="support"] .support-motion-hud {
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.56rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
  align-items: center;
  z-index: 4;
}

.content-grid[data-module="support"] .support-motion-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.42rem;
  max-width: 8.2rem;
  gap: 0.28rem;
  overflow: hidden;
  padding: 0.16rem 0.48rem;
  border: 1px solid rgba(184, 237, 252, 0.18);
  border-radius: 999px;
  background: rgba(4, 10, 15, 0.58);
  color: rgba(228, 248, 255, 0.82);
  font-size: 0.62rem;
  font-weight: 760;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.content-grid[data-module="support"] .support-motion-pill i {
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: rgba(118, 244, 190, 0.95);
  box-shadow: 0 0 0.75rem rgba(118, 244, 190, 0.72);
  animation: supportMotionLiveDot 1.8s ease-in-out infinite;
}

.content-grid[data-module="support"] .support-motion-pill.is-topic {
  border-color: rgba(236, 186, 96, 0.2);
  color: rgba(255, 230, 185, 0.86);
}

.content-grid[data-module="support"] .support-motion-pill.is-state {
  margin-left: auto;
  color: rgba(179, 232, 251, 0.76);
}

.content-grid[data-module="support"] .support-motion-stage.support-motion-state-answered {
  border-color: rgba(120, 222, 248, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1.1rem 2.5rem rgba(0, 0, 0, 0.26),
    0 0 2.5rem rgba(103, 196, 226, 0.16);
}

.content-grid[data-module="support"] .support-motion-stage.support-motion-state-solved {
  border-color: rgba(118, 244, 190, 0.26);
}

.content-grid[data-module="support"] .support-motion-stage.support-motion-state-human {
  border-color: rgba(236, 186, 96, 0.3);
  background:
    linear-gradient(90deg, rgba(236, 186, 96, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(120, 222, 248, 0.045) 1px, transparent 1px),
    radial-gradient(ellipse at 22% 24%, rgba(93, 210, 248, 0.18), transparent 42%),
    radial-gradient(ellipse at 88% 14%, rgba(236, 186, 96, 0.26), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.018)),
    rgba(4, 8, 13, 0.82);
  background-size: 2.6rem 2.6rem, 2.6rem 2.6rem, auto, auto, auto, auto;
}

.content-grid[data-module="support"] .support-motion-avatar i,
.content-grid[data-module="support"] .support-motion-avatar b {
  position: absolute;
  display: block;
}

.content-grid[data-module="support"] .support-motion-avatar i {
  width: 58%;
  height: 30%;
  border: 1px solid rgba(236, 249, 255, 0.34);
  border-radius: 999px;
  background: rgba(2, 8, 13, 0.48);
  transform: translateY(20%);
}

.content-grid[data-module="support"] .support-motion-avatar b {
  top: 38%;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: rgba(220, 250, 255, 0.94);
  box-shadow: 0 0 0.75rem rgba(113, 221, 247, 0.72);
}

.content-grid[data-module="support"] .support-motion-avatar b:nth-of-type(1) {
  left: 34%;
}

.content-grid[data-module="support"] .support-motion-avatar b:nth-of-type(2) {
  right: 34%;
}

.content-grid[data-module="support"] .support-motion-wave {
  position: absolute;
  right: 13%;
  bottom: 20%;
  display: inline-flex;
  align-items: end;
  gap: 0.16rem;
  z-index: 3;
}

.content-grid[data-module="support"] .support-motion-wave i {
  display: block;
  width: 0.22rem;
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(120, 221, 248, 0.76);
  box-shadow: 0 0 0.75rem rgba(120, 221, 248, 0.28);
  animation: supportMotionWave 2s ease-in-out infinite;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .content-grid[data-module="support"] .support-motion-scan,
  .content-grid[data-module="support"] .support-motion-pulse,
  .content-grid[data-module="support"] .support-motion-orbit,
  .content-grid[data-module="support"] .support-motion-avatar,
  .content-grid[data-module="support"] .support-motion-wave i,
  .content-grid[data-module="support"] .support-motion-pill i {
    animation: none;
  }
}

.content-grid[data-module="support"] .support-motion-wave i:nth-child(2) {
  animation-delay: 90ms;
}

.content-grid[data-module="support"] .support-motion-wave i:nth-child(3) {
  animation-delay: 180ms;
}

.content-grid[data-module="support"] .support-motion-wave i:nth-child(4) {
  animation-delay: 270ms;
}

@keyframes supportMotionFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-0.34rem) rotate(2deg); }
}

@keyframes supportMotionOrbit {
  to { rotate: 360deg; }
}

@keyframes supportMotionWave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.52; }
  50% { transform: scaleY(1.18); opacity: 1; }
}

@keyframes supportMotionScan {
  0%, 18% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  34% { opacity: 1; }
  62%, 100% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}

@keyframes supportMotionPulse {
  0% { transform: translate(-50%, -50%) scale(0.62); opacity: 0.62; }
  100% { transform: translate(-50%, -50%) scale(1.36); opacity: 0; }
}

@keyframes supportMotionLiveDot {
  0%, 100% { transform: scale(0.82); opacity: 0.7; }
  50% { transform: scale(1.12); opacity: 1; }
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] .support-upload-grid {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="support"] .support-upload-entry {
    min-height: 3.65rem;
  }

  .content-grid[data-module="support"] .support-motion-stage {
    min-height: 8.2rem;
  }

  .content-grid[data-module="support"] .support-motion-pill.is-state {
    margin-left: 0;
  }
}

/* Metronome control deck touch-density pass */
.content-grid[data-module="metronome"] .metronome-control-bar .metronome-control-strip {
  grid-template-columns:
    minmax(10.2rem, 0.86fr)
    minmax(10.4rem, 0.86fr)
    minmax(14rem, 1.08fr)
    minmax(16rem, 1.22fr)
    minmax(11.4rem, 0.88fr)
    minmax(15rem, 1.12fr);
  gap: clamp(0.58rem, 0.82vw, 0.86rem);
  align-items: stretch;
}

.content-grid[data-module="metronome"] .metronome-control-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  min-height: clamp(7.4rem, 9.1vw, 8.65rem);
  padding: clamp(0.74rem, 0.92vw, 0.96rem);
  gap: clamp(0.42rem, 0.52vw, 0.56rem);
}

.content-grid[data-module="metronome"] .metronome-control-card > span {
  font-size: clamp(0.78rem, 0.82vw, 0.9rem);
  line-height: 1;
}

.content-grid[data-module="metronome"] .metronome-segment-grid,
.content-grid[data-module="metronome"] .metronome-sound-mini-panel,
.content-grid[data-module="metronome"] .metronome-practice-mini-panel {
  height: 100%;
  min-height: 0;
  gap: clamp(0.36rem, 0.46vw, 0.5rem);
  grid-auto-rows: minmax(0, 1fr);
}

.content-grid[data-module="metronome"] .metronome-segment-grid button,
.content-grid[data-module="metronome"] .metronome-sound-mini-panel button,
.content-grid[data-module="metronome"] .metronome-practice-mini-panel button {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: clamp(2.65rem, 3.1vw, 3.2rem);
  padding: 0.46rem 0.7rem;
  text-align: center;
}

.content-grid[data-module="metronome"] .metronome-rhythm-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}

.content-grid[data-module="metronome"] .metronome-rhythm-grid button strong {
  font-size: clamp(1.1rem, 1.2vw, 1.34rem);
}

.content-grid[data-module="metronome"] .metronome-sound-mini-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}

.content-grid[data-module="metronome"] .metronome-sound-mini-panel button:nth-child(3) {
  grid-column: 1 / -1;
}

.content-grid[data-module="metronome"] .metronome-sound-mini-panel button {
  align-content: center;
  justify-items: start;
  padding-inline: clamp(0.78rem, 0.9vw, 0.95rem);
  text-align: left;
}

.content-grid[data-module="metronome"] .metronome-sound-mini-panel strong {
  font-size: clamp(0.76rem, 0.86vw, 0.94rem);
  line-height: 1.08;
}

.content-grid[data-module="metronome"] .metronome-sound-mini-panel small {
  font-size: clamp(0.62rem, 0.7vw, 0.76rem);
  line-height: 1.1;
}

.content-grid[data-module="metronome"] .metronome-practice-mini-panel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-grid[data-module="metronome"] .metronome-practice-mini-panel strong,
.content-grid[data-module="metronome"] .metronome-segment-grid button {
  font-size: clamp(0.78rem, 0.88vw, 0.98rem);
  font-weight: 820;
}

.content-grid[data-module="metronome"] .metronome-volume-card {
  grid-template-rows: auto minmax(0, 1fr);
}

.content-grid[data-module="metronome"] .metronome-volume-line {
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 3.2rem;
  align-content: center;
  gap: 0.58rem;
}

.content-grid[data-module="metronome"] .metronome-volume-line small {
  font-size: clamp(0.82rem, 0.9vw, 1rem);
}

@media (max-width: 1180px) {
  .content-grid[data-module="metronome"] .metronome-control-bar .metronome-control-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Home portal buttons: keep centered and feel physically pressed. */
.portal-card .portal-action {
  transform: translateX(-50%) translateY(0);
  transition:
    transform 130ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    filter 150ms ease;
}

.portal-card:hover .portal-action,
.portal-card .portal-action:hover {
  transform: translateX(-50%) translateY(-1px);
}

.portal-card:active .portal-action,
.portal-card .portal-action:active {
  border-color: rgba(255, 224, 166, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(4, 6, 9, 0.56);
  box-shadow:
    inset 0 0.22rem 0.65rem rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0.24rem 0.7rem rgba(0, 0, 0, 0.22);
  filter: brightness(0.9) saturate(0.96);
  transform: translateX(-50%) translateY(2px) scale(0.97);
}

/* Profile center: membership, practice, favorites and partner channels. */
.content-grid[data-module="profile"] {
  grid-auto-rows: auto;
  align-content: stretch;
}

.content-grid[data-module="profile"] .profile-dashboard {
  display: grid;
  grid-column: span 12;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: var(--grid-gap);
  min-height: 0;
}

.profile-glass-card {
  position: relative;
  display: grid;
  gap: clamp(0.78rem, 1vw, 1rem);
  min-width: 0;
  min-height: 0;
  padding: clamp(1rem, 1.35vw, 1.35rem);
  overflow: hidden;
  border: 1px solid rgba(236, 243, 255, 0.11);
  border-radius: var(--card-radius);
  background:
    radial-gradient(ellipse at 16% 8%, rgba(226, 181, 105, 0.12), transparent 38%),
    radial-gradient(ellipse at 92% 14%, rgba(101, 159, 235, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.074), rgba(255, 255, 255, 0.018)),
    rgba(5, 8, 13, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(236, 243, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 1.6rem 4.4rem rgba(0, 0, 0, 0.52),
    0 0 2.4rem rgba(79, 132, 204, 0.1);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
}

.profile-account-card {
  grid-column: span 5;
  min-height: clamp(16rem, 26vh, 20rem);
}

.profile-member-card {
  grid-column: span 7;
  min-height: clamp(16rem, 26vh, 20rem);
}

.profile-benefits-card {
  grid-column: span 6;
}

.profile-recent-card {
  grid-column: span 6;
}

.profile-favorites-card,
.profile-collab-card,
.profile-settings-card {
  grid-column: span 4;
}

.profile-account-top,
.profile-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(0.72rem, 1vw, 1rem);
}

.profile-account-top {
  justify-content: flex-start;
}

.profile-avatar-mark {
  display: grid;
  width: clamp(3.6rem, 5.8vw, 5rem);
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(226, 181, 105, 0.34);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 245, 220, 0.26), transparent 34%),
    linear-gradient(145deg, rgba(226, 181, 105, 0.28), rgba(99, 158, 232, 0.18)),
    rgba(255, 255, 255, 0.05);
  color: rgba(255, 244, 220, 0.98);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 900;
  box-shadow: 0 0 2.2rem rgba(226, 181, 105, 0.14);
}

.profile-account-card h3,
.profile-member-card h3,
.profile-glass-card h3 {
  margin: 0;
  font-size: clamp(1.2rem, 1.55vw, 1.55rem);
  line-height: 1.1;
}

.profile-account-card p:not(.eyebrow) {
  margin-top: 0.4rem;
  color: rgba(222, 230, 239, 0.7);
}

.profile-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 0.8rem;
  border: 1px solid rgba(226, 181, 105, 0.28);
  border-radius: 999px;
  background: rgba(226, 181, 105, 0.1);
  color: rgba(255, 236, 198, 0.94);
  font-size: 0.76rem;
  font-weight: 820;
}

.profile-quick-stats,
.profile-member-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.48rem, 0.7vw, 0.72rem);
}

.profile-quick-stats span,
.profile-member-metrics span,
.profile-benefit-grid span,
.profile-piece-list span,
.profile-settings-list span,
.profile-collab-grid button,
.profile-empty-state {
  border: 1px solid rgba(236, 243, 255, 0.1);
  border-radius: 0.9rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.profile-quick-stats span,
.profile-member-metrics span {
  display: grid;
  gap: 0.2rem;
  min-height: 4.2rem;
  align-content: center;
  padding: 0.72rem;
}

.profile-quick-stats b,
.profile-member-metrics b,
.profile-member-name {
  color: rgba(255, 244, 220, 0.98);
  font-size: clamp(1.05rem, 1.3vw, 1.35rem);
}

.profile-quick-stats small,
.profile-member-metrics small {
  color: rgba(220, 229, 239, 0.58);
  font-size: 0.68rem;
}

.profile-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: auto;
}

.profile-member-name {
  display: block;
  font-size: clamp(1.8rem, 2.6vw, 2.8rem);
  line-height: 1;
}

.profile-benefit-grid,
.profile-collab-grid,
.profile-settings-list {
  display: grid;
  gap: 0.62rem;
}

.profile-benefit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-benefit-grid span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.18rem 0.62rem;
  min-height: 5.2rem;
  align-content: center;
  padding: 0.78rem;
}

.profile-benefit-grid b {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  grid-row: span 2;
  place-items: center;
  border-radius: 50%;
  background: rgba(226, 181, 105, 0.12);
  color: rgba(255, 236, 198, 0.94);
  font-size: 0.72rem;
}

.profile-benefit-grid strong,
.profile-piece-list strong,
.profile-settings-list strong,
.profile-collab-grid strong,
.profile-empty-state strong {
  color: rgba(250, 252, 255, 0.96);
}

.profile-benefit-grid small,
.profile-piece-list small,
.profile-settings-list small,
.profile-collab-grid small,
.profile-empty-state p {
  color: rgba(220, 229, 239, 0.62);
  line-height: 1.45;
}

.profile-piece-list {
  display: grid;
  gap: 0.56rem;
}

.profile-piece-list span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.18rem 0.65rem;
  align-items: center;
  min-height: 4.25rem;
  padding: 0.72rem 0.8rem;
}

.profile-piece-list small {
  grid-column: 1;
}

.profile-piece-list b {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: rgba(226, 181, 105, 0.9);
  font-size: 0.8rem;
}

.profile-empty-state {
  display: grid;
  gap: 0.35rem;
  min-height: 8rem;
  align-content: center;
  padding: 1rem;
}

.profile-collab-grid button {
  display: grid;
  gap: 0.24rem;
  width: 100%;
  min-height: 5.1rem;
  padding: 0.82rem;
  text-align: left;
  cursor: pointer;
}

.profile-collab-grid button span {
  color: rgba(226, 181, 105, 0.86);
  font-size: 0.68rem;
  font-weight: 820;
}

.profile-settings-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 3.25rem;
  padding: 0.72rem 0.82rem;
}

.profile-settings-list small {
  text-align: right;
}

@media (max-width: 1180px) {
  .profile-account-card,
  .profile-member-card,
  .profile-benefits-card,
  .profile-recent-card,
  .profile-favorites-card,
  .profile-collab-card,
  .profile-settings-card {
    grid-column: span 6;
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="profile"] .profile-dashboard {
    grid-template-columns: 1fr;
  }

  .profile-account-card,
  .profile-member-card,
  .profile-benefits-card,
  .profile-recent-card,
  .profile-favorites-card,
  .profile-collab-card,
  .profile-settings-card {
    grid-column: span 1;
  }

  .profile-benefit-grid,
  .profile-quick-stats,
  .profile-member-metrics {
    grid-template-columns: 1fr;
  }
}

/* Profile center compact account overview. */
.content-grid[data-module="profile"] .profile-hero-card,
.content-grid[data-module="profile"] .profile-service-card {
  grid-column: span 12;
}

.content-grid[data-module="profile"] .profile-hero-card {
  grid-template-columns: minmax(0, 1.18fr) minmax(22rem, 0.82fr);
  align-items: stretch;
  min-height: clamp(17rem, 32vh, 23rem);
  padding: clamp(1.25rem, 2vw, 2rem);
}

.profile-hero-main {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.6rem);
  min-width: 0;
}

.profile-hero-copy {
  display: grid;
  gap: clamp(0.5rem, 0.8vw, 0.78rem);
  min-width: 0;
}

.profile-hero-copy h3 {
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  letter-spacing: 0;
}

.profile-hero-copy p:not(.eyebrow),
.profile-hero-note {
  grid-column: 1 / -1;
  max-width: 58rem;
  margin: 0;
  color: rgba(226, 234, 242, 0.7);
  font-size: clamp(0.98rem, 1vw, 1.12rem);
  line-height: 1.55;
}

.content-grid[data-module="profile"] .profile-hero-card .profile-avatar-mark {
  width: clamp(5.2rem, 8vw, 7rem);
  box-shadow:
    0 0 0 1px rgba(226, 181, 105, 0.18),
    0 0 3rem rgba(226, 181, 105, 0.2),
    0 1rem 3rem rgba(0, 0, 0, 0.35);
}

.content-grid[data-module="profile"] .profile-hero-card .profile-member-metrics {
  align-self: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-grid[data-module="profile"] .profile-hero-card .profile-member-metrics span {
  min-height: clamp(5.4rem, 8.4vh, 7rem);
  padding: clamp(0.9rem, 1.2vw, 1.15rem);
}

.content-grid[data-module="profile"] .profile-benefits-card,
.content-grid[data-module="profile"] .profile-recent-card {
  grid-column: span 6;
  min-height: clamp(22rem, 42vh, 31rem);
}

.content-grid[data-module="profile"] .profile-benefit-grid {
  grid-template-columns: 1fr;
}

.content-grid[data-module="profile"] .profile-benefit-grid span {
  min-height: clamp(4.9rem, 7vh, 6.2rem);
}

.profile-practice-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(0.72rem, 1vw, 1rem);
  min-height: 0;
}

.profile-practice-current {
  display: grid;
  align-content: center;
  gap: 0.46rem;
  min-height: 100%;
  padding: clamp(1rem, 1.35vw, 1.3rem);
  border: 1px solid rgba(226, 181, 105, 0.2);
  border-radius: 1rem;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(226, 181, 105, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(255, 255, 255, 0.026);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1.3rem 3.2rem rgba(0, 0, 0, 0.28);
}

.profile-practice-current span,
.profile-list-label {
  color: rgba(226, 181, 105, 0.92);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-practice-current strong {
  color: rgba(255, 250, 238, 0.98);
  font-size: clamp(1.25rem, 1.8vw, 2rem);
  line-height: 1.08;
}

.profile-practice-current small {
  color: rgba(226, 234, 242, 0.66);
  line-height: 1.45;
}

.profile-practice-current b {
  justify-self: start;
  padding: 0.38rem 0.66rem;
  border-radius: 999px;
  background: rgba(226, 181, 105, 0.13);
  color: rgba(255, 236, 198, 0.96);
  font-size: 0.86rem;
}

.content-grid[data-module="profile"] .profile-recent-card .profile-piece-list {
  align-content: start;
}

.profile-list-label {
  display: block;
  margin-bottom: -0.12rem;
}

.content-grid[data-module="profile"] .profile-service-card {
  min-height: clamp(17rem, 30vh, 24rem);
}

.profile-service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  gap: clamp(0.72rem, 1vw, 1rem);
}

.content-grid[data-module="profile"] .profile-service-card .profile-collab-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-grid[data-module="profile"] .profile-service-card .profile-settings-list {
  align-content: start;
}

.content-grid[data-module="profile"] .profile-service-card .profile-settings-list span {
  min-height: 3.75rem;
}

@media (max-width: 1180px) {
  .content-grid[data-module="profile"] .profile-hero-card,
  .profile-practice-layout,
  .profile-service-grid {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="profile"] .profile-benefits-card,
  .content-grid[data-module="profile"] .profile-recent-card,
  .content-grid[data-module="profile"] .profile-service-card {
    grid-column: span 12;
  }

  .content-grid[data-module="profile"] .profile-service-card .profile-collab-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .profile-hero-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .content-grid[data-module="profile"] .profile-hero-card .profile-member-metrics,
  .content-grid[data-module="profile"] .profile-benefit-grid {
    grid-template-columns: 1fr;
  }
}

/* Tuner professional dial: red deviation, green in tune. */
.professional-tuner {
  --tuner-ok: rgba(88, 235, 155, 0.98);
  --tuner-ok-soft: rgba(88, 235, 155, 0.2);
  --tuner-bad: rgba(255, 91, 92, 0.98);
  --tuner-bad-soft: rgba(255, 91, 92, 0.2);
  --tuner-bad-deep: rgba(118, 24, 30, 0.38);
}

.professional-tuner.status-tuned {
  --dial-accent: var(--tuner-ok);
  --dial-soft: var(--tuner-ok-soft);
}

.professional-tuner.status-flat,
.professional-tuner.status-sharp {
  --dial-accent: var(--tuner-bad);
  --dial-soft: var(--tuner-bad-soft);
}

.content-grid[data-module="tuner"] .tuner-cent-display.is-tuned,
.content-grid[data-module="tuner"] .tuner-cent-display.is-accurate {
  --dial-accent: var(--tuner-ok);
  --dial-soft: var(--tuner-ok-soft);
}

.content-grid[data-module="tuner"] .tuner-cent-display.is-flat,
.content-grid[data-module="tuner"] .tuner-cent-display.is-sharp {
  --dial-accent: var(--tuner-bad);
  --dial-soft: var(--tuner-bad-soft);
}

.content-grid[data-module="tuner"] .tuner-spec-card.is-tuned strong,
.content-grid[data-module="tuner"] .tuner-spec-card.is-accurate strong,
.content-grid[data-module="tuner"] .tuner-cent-display.is-tuned strong,
.content-grid[data-module="tuner"] .tuner-cent-display.is-accurate strong,
.content-grid[data-module="tuner"] .tuner-cent-display.is-tuned .tuner-cent-copy span,
.content-grid[data-module="tuner"] .tuner-cent-display.is-accurate .tuner-cent-copy span {
  color: var(--tuner-ok);
}

.content-grid[data-module="tuner"] .tuner-spec-card.is-flat strong,
.content-grid[data-module="tuner"] .tuner-spec-card.is-sharp strong,
.content-grid[data-module="tuner"] .tuner-cent-display.is-flat strong,
.content-grid[data-module="tuner"] .tuner-cent-display.is-sharp strong,
.content-grid[data-module="tuner"] .tuner-cent-display.is-flat .tuner-cent-copy span,
.content-grid[data-module="tuner"] .tuner-cent-display.is-sharp .tuner-cent-copy span {
  color: var(--tuner-bad);
}

.content-grid[data-module="tuner"] .tuner-cent-display {
  border-color: rgba(236, 243, 255, 0.12);
  background:
    radial-gradient(ellipse at 50% 108%, color-mix(in srgb, var(--dial-accent) 18%, transparent), transparent 42%),
    radial-gradient(ellipse at 20% 8%, rgba(255, 255, 255, 0.055), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.018)),
    rgba(3, 7, 11, 0.82);
}

.content-grid[data-module="tuner"] .tuner-cent-gauge {
  min-height: clamp(12rem, 19vw, 16rem);
  border-color: color-mix(in srgb, var(--dial-accent) 24%, rgba(255, 255, 255, 0.1));
  background:
    linear-gradient(90deg, rgba(255, 91, 92, 0.16), transparent 22%, transparent 78%, rgba(255, 91, 92, 0.16)),
    radial-gradient(ellipse at 50% 104%, color-mix(in srgb, var(--dial-accent) 18%, transparent), transparent 40%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(2, 5, 8, 0.44), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2rem 3.5rem rgba(0, 0, 0, 0.28),
    0 0 2rem color-mix(in srgb, var(--dial-accent) 12%, transparent);
}

.content-grid[data-module="tuner"] .tuner-cent-gauge::before {
  width: 3.4rem;
  height: 7.7rem;
  border-inline-color: rgba(88, 235, 155, 0.4);
  background:
    linear-gradient(90deg, transparent, rgba(88, 235, 155, 0.08) 36%, rgba(88, 235, 155, 0.22) 50%, rgba(88, 235, 155, 0.08) 64%, transparent);
}

.content-grid[data-module="tuner"] .tuner-cent-gauge::after {
  border-color: color-mix(in srgb, var(--dial-accent) 72%, rgba(255, 255, 255, 0.5));
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98), var(--dial-accent) 52%, rgba(0, 0, 0, 0.14) 74%);
  box-shadow:
    0 0 0 0.24rem color-mix(in srgb, var(--dial-accent) 18%, transparent),
    0 0 1.4rem color-mix(in srgb, var(--dial-accent) 48%, transparent);
}

.content-grid[data-module="tuner"] .tuner-precision-dial {
  width: min(25rem, 90%);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(2, 5, 7, 0.98) 0 29.5%, transparent 30.4%),
    conic-gradient(from 270deg at 50% 100%,
      rgba(255, 91, 92, 0.34) 0deg 58deg,
      rgba(88, 235, 155, 0.46) 63deg 72deg,
      rgba(255, 91, 92, 0.34) 77deg 135deg,
      transparent 135deg 360deg);
  filter:
    drop-shadow(0 0 1rem rgba(255, 91, 92, 0.12))
    drop-shadow(0 0 1.2rem color-mix(in srgb, var(--dial-accent) 18%, transparent));
}

.content-grid[data-module="tuner"] .tuner-precision-dial::before {
  border-top-color: rgba(242, 249, 248, 0.48);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.04), transparent 38%),
    conic-gradient(from 270deg at 50% 100%,
      rgba(255, 91, 92, 0.18) 0deg 58deg,
      rgba(88, 235, 155, 0.2) 63deg 72deg,
      rgba(255, 91, 92, 0.18) 77deg 135deg,
      transparent 135deg 360deg);
  box-shadow:
    0 -0.12rem 0.8rem color-mix(in srgb, var(--dial-accent) 20%, transparent),
    inset 0 0.72rem 1.5rem rgba(255, 255, 255, 0.03);
}

.content-grid[data-module="tuner"] .tuner-dial-safe-zone,
.content-grid[data-module="tuner"] .tuner-dial-alert-zone {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: 2px;
  height: 100%;
  transform-origin: 50% 100%;
  pointer-events: none;
}

.content-grid[data-module="tuner"] .tuner-dial-safe-zone {
  transform: rotate(0deg);
}

.content-grid[data-module="tuner"] .tuner-dial-safe-zone::before {
  position: absolute;
  left: 50%;
  top: 3%;
  width: 2.8rem;
  height: 0.44rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(88, 235, 155, 0.9);
  box-shadow:
    0 0 0.8rem rgba(88, 235, 155, 0.62),
    0 0 2.2rem rgba(88, 235, 155, 0.22);
  content: "";
}

.content-grid[data-module="tuner"] .tuner-dial-alert-zone.is-left {
  transform: rotate(-46deg);
}

.content-grid[data-module="tuner"] .tuner-dial-alert-zone.is-right {
  transform: rotate(46deg);
}

.content-grid[data-module="tuner"] .tuner-dial-alert-zone::before {
  position: absolute;
  left: 50%;
  top: 7%;
  width: 1.15rem;
  height: 0.18rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 91, 92, 0.84);
  box-shadow: 0 0 1.1rem rgba(255, 91, 92, 0.32);
  content: "";
}

.content-grid[data-module="tuner"] .tuner-precision-dial > i:not(.tuner-dial-arc)::before {
  background: rgba(230, 239, 236, 0.42);
}

.content-grid[data-module="tuner"] .tuner-precision-dial > i.is-major::before {
  height: 0.72rem;
  background: rgba(255, 255, 255, 0.7);
}

.content-grid[data-module="tuner"] .tuner-precision-dial > i.is-center::before {
  height: 1.08rem;
  background: rgba(88, 235, 155, 0.98);
  box-shadow: 0 0 0.95rem rgba(88, 235, 155, 0.42);
}

.content-grid[data-module="tuner"] .tuner-dial-zero {
  background: linear-gradient(180deg, rgba(220, 255, 235, 0.98), rgba(88, 235, 155, 0.34) 46%, rgba(88, 235, 155, 0.04));
  box-shadow: 0 0 1.25rem rgba(88, 235, 155, 0.28);
}

.content-grid[data-module="tuner"] .tuner-dial-needle {
  width: 0.18rem;
  height: 65%;
  margin-left: -0.09rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), var(--dial-accent) 38%, rgba(255, 255, 255, 0.1) 78%, transparent);
  filter:
    drop-shadow(0 0 0.5rem var(--dial-soft))
    drop-shadow(0 0 1rem color-mix(in srgb, var(--dial-accent) 44%, transparent));
}

.content-grid[data-module="tuner"] .tuner-dial-glow {
  margin-bottom: calc(65% - 0.46rem);
  border-color: color-mix(in srgb, var(--dial-accent) 72%, rgba(255, 255, 255, 0.62));
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98), var(--dial-accent) 58%, rgba(255, 255, 255, 0.02));
}

.content-grid[data-module="tuner"] .dial-side.is-flat,
.content-grid[data-module="tuner"] .dial-side.is-sharp {
  color: rgba(255, 196, 196, 0.98);
  border-color: rgba(255, 91, 92, 0.2);
  background: rgba(70, 16, 20, 0.5);
}

.content-grid[data-module="tuner"] .dial-mid {
  color: rgba(150, 255, 196, 0.96);
}

/* Support center final board layout: large topic cards left, FAQ + compact human handoff right. */
.content-grid[data-module="support"] > .support-two-panel {
  grid-template-columns: minmax(38rem, 1.36fr) minmax(25rem, 0.64fr);
  gap: clamp(0.82rem, 1.1vw, 1.1rem);
  padding: clamp(0.82rem, 1.08vw, 1.08rem);
}

.content-grid[data-module="support"] .support-entry-panel {
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.7rem, 0.92vw, 0.92rem);
}

.content-grid[data-module="support"] .support-entry-head {
  max-width: 45rem;
}

.content-grid[data-module="support"] .support-entry-head h3 {
  font-size: clamp(1.72rem, 2.2vw, 2.58rem);
}

.content-grid[data-module="support"] .support-entry-head p:not(.eyebrow) {
  max-width: 42rem;
  font-size: clamp(0.82rem, 0.9vw, 0.94rem);
  line-height: 1.45;
}

.content-grid[data-module="support"] .support-board-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 0.18rem;
  gap: clamp(0.58rem, 0.72vw, 0.76rem);
  scrollbar-width: thin;
}

.content-grid[data-module="support"] .support-board-card {
  min-height: clamp(7.35rem, 10.3vw, 9.15rem);
  gap: 0.46rem;
  padding: clamp(0.76rem, 0.92vw, 0.92rem);
  border-radius: 0.78rem;
}

.content-grid[data-module="support"] .support-board-card span {
  padding: 0.2rem 0.5rem;
  font-size: clamp(0.62rem, 0.68vw, 0.72rem);
}

.content-grid[data-module="support"] .support-board-card strong {
  font-size: clamp(1.04rem, 1.22vw, 1.34rem);
  line-height: 1.12;
}

.content-grid[data-module="support"] .support-board-card small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: clamp(0.7rem, 0.78vw, 0.82rem);
  line-height: 1.36;
}

.content-grid[data-module="support"] .support-board-card b {
  font-size: clamp(0.66rem, 0.72vw, 0.76rem);
}

.content-grid[data-module="support"] .support-input-block {
  display: none;
}

.content-grid[data-module="support"] .support-service-panel {
  grid-template-rows: auto minmax(8.3rem, 0.74fr) minmax(0, 1fr) auto;
  gap: clamp(0.52rem, 0.68vw, 0.72rem);
  align-content: stretch;
}

.content-grid[data-module="support"] .support-service-head {
  align-items: center;
}

.content-grid[data-module="support"] .support-service-head h3 {
  font-size: clamp(1.18rem, 1.48vw, 1.62rem);
}

.content-grid[data-module="support"] .support-live-dot {
  padding: 0.28rem 0.56rem;
  font-size: 0.7rem;
}

.content-grid[data-module="support"] .support-guess-block {
  min-height: 0;
  overflow: hidden;
  padding: 0.76rem;
  border: 1px solid rgba(236, 243, 255, 0.1);
  border-radius: 0.82rem;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(226, 181, 105, 0.1), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(4, 8, 13, 0.36);
}

.content-grid[data-module="support"] .support-block-title strong {
  font-size: clamp(0.92rem, 1vw, 1.08rem);
}

.content-grid[data-module="support"] .support-block-title span {
  max-width: 9rem;
  overflow: hidden;
  padding: 0.26rem 0.46rem;
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-grid[data-module="support"] .support-guess-list {
  grid-template-columns: 1fr;
  gap: 0.42rem;
  min-height: 0;
  overflow: auto;
  padding-right: 0.1rem;
}

.content-grid[data-module="support"] .support-guess-list button {
  min-height: 3.7rem;
  padding: 0.62rem 0.72rem;
  border-radius: 0.68rem;
}

.content-grid[data-module="support"] .support-guess-list strong {
  -webkit-line-clamp: 1;
  font-size: clamp(0.78rem, 0.86vw, 0.92rem);
}

.content-grid[data-module="support"] .support-guess-list span {
  -webkit-line-clamp: 2;
  font-size: clamp(0.68rem, 0.72vw, 0.76rem);
  line-height: 1.35;
}

.content-grid[data-module="support"] .support-more-button {
  min-height: 1.95rem;
  padding: 0.22rem 0.32rem 0.22rem 0.68rem;
  font-size: 0.7rem;
}

.content-grid[data-module="support"] .support-advice-stack {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.52rem;
  min-height: 0;
  overflow: hidden;
}

.content-grid[data-module="support"] .support-motion-stage {
  min-height: clamp(4.7rem, 7vh, 6.1rem);
  border-radius: 0.72rem;
}

.content-grid[data-module="support"] .support-motion-avatar {
  width: clamp(2.8rem, 4vw, 3.45rem);
}

.content-grid[data-module="support"] .support-motion-orbit {
  width: clamp(3.65rem, 5.4vw, 4.6rem);
}

.content-grid[data-module="support"] .support-motion-orbit.is-secondary {
  width: clamp(2.5rem, 3.9vw, 3.25rem);
}

.content-grid[data-module="support"] .support-motion-hud {
  left: 0.52rem;
  right: 0.52rem;
  bottom: 0.42rem;
}

.content-grid[data-module="support"] .support-motion-pill {
  min-height: 1.22rem;
  max-width: 7rem;
  padding: 0.12rem 0.4rem;
  font-size: 0.56rem;
}

.content-grid[data-module="support"] .support-answer-content {
  min-height: 0;
  overflow: auto;
  padding: 0.04rem 0.08rem 0.08rem 0;
  border-bottom: 0;
}

.content-grid[data-module="support"] .support-answer-content.is-empty {
  padding: 0.72rem;
}

.content-grid[data-module="support"] .support-answer-content strong,
.content-grid[data-module="support"] .support-answer-content.is-empty strong {
  font-size: clamp(0.95rem, 1.05vw, 1.12rem);
}

.content-grid[data-module="support"] .support-answer-content p,
.content-grid[data-module="support"] .support-answer-content.is-empty p {
  font-size: 0.76rem;
  line-height: 1.42;
}

.content-grid[data-module="support"] .support-step-list {
  gap: 0.42rem;
}

.content-grid[data-module="support"] .support-step-list li {
  padding: 0.56rem 0.66rem 0.56rem 2.18rem;
  border-radius: 0.66rem;
  font-size: 0.76rem;
  line-height: 1.42;
}

.content-grid[data-module="support"] .support-step-list li::before {
  top: 0.56rem;
  left: 0.66rem;
  width: 1.08rem;
  height: 1.08rem;
  font-size: 0.66rem;
}

.content-grid[data-module="support"] .support-feedback-actions .glass-button {
  min-height: 2rem;
  padding: 0.36rem 0.72rem;
  font-size: 0.76rem;
}

.content-grid[data-module="support"] .support-human-fallback {
  align-self: end;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.36rem 0.46rem;
  padding: 0.52rem;
  border-radius: 0.76rem;
}

.content-grid[data-module="support"] .support-human-copy {
  grid-column: 1;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem;
  align-content: center;
}

.content-grid[data-module="support"] .support-human-kicker {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.content-grid[data-module="support"] .support-human-copy strong {
  font-size: clamp(0.78rem, 0.86vw, 0.92rem);
}

.content-grid[data-module="support"] .support-upload-grid {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.28rem;
}

.content-grid[data-module="support"] .support-upload-entry {
  min-height: 2.42rem;
  gap: 0.08rem;
  padding: 0.34rem 0.36rem;
  border-radius: 0.58rem;
}

.content-grid[data-module="support"] .support-upload-entry strong {
  font-size: 0.72rem;
}

.content-grid[data-module="support"] .support-upload-entry small {
  font-size: 0.58rem;
}

.content-grid[data-module="support"] .support-human-dialog {
  grid-column: 1;
  gap: 0.2rem;
}

.content-grid[data-module="support"] .support-human-dialog span {
  font-size: 0.68rem;
}

.content-grid[data-module="support"] .support-human-dialog textarea,
.content-grid[data-module="support"] .support-human-dialog-compact textarea {
  min-height: 2.56rem;
  max-height: 4rem;
  padding: 0.5rem 0.62rem;
  border-radius: 0.64rem;
  font-size: 0.78rem;
  line-height: 1.36;
  resize: vertical;
}

.content-grid[data-module="support"] .support-human-status {
  grid-column: 1 / -1;
  font-size: 0.68rem;
}

.content-grid[data-module="support"] .support-human-fallback .glass-button,
.content-grid[data-module="support"] .support-human-fallback .support-secondary-action {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: stretch;
  width: 5.6rem;
  min-height: 0;
  padding: 0.5rem 0.58rem;
  border-radius: 0.66rem;
  font-size: 0.74rem;
  line-height: 1.2;
  white-space: normal;
}

@media (max-width: 1180px) {
  .content-grid[data-module="support"] > .support-two-panel {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    overflow: visible;
  }

  .content-grid[data-module="support"] .support-entry-panel,
  .content-grid[data-module="support"] .support-service-panel,
  .content-grid[data-module="support"] .support-board-grid,
  .content-grid[data-module="support"] .support-guess-list,
  .content-grid[data-module="support"] .support-advice-stack,
  .content-grid[data-module="support"] .support-answer-content {
    overflow: visible;
  }

  .content-grid[data-module="support"] .support-service-panel {
    grid-template-rows: auto auto auto auto;
  }

  .content-grid[data-module="support"] .support-human-fallback {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-grid[data-module="support"] .support-human-fallback .glass-button,
  .content-grid[data-module="support"] .support-human-fallback .support-secondary-action {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-height: 2.3rem;
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] > .support-two-panel {
    padding: 0.68rem;
  }

  .content-grid[data-module="support"] .support-entry-panel,
  .content-grid[data-module="support"] .support-service-panel {
    padding: 0.78rem;
  }

  .content-grid[data-module="support"] .support-entry-head h3 {
    font-size: clamp(1.72rem, 8vw, 2.38rem);
  }

  .content-grid[data-module="support"] .support-entry-head p:not(.eyebrow) {
    font-size: 0.86rem;
  }

  .content-grid[data-module="support"] .support-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.52rem;
  }

  .content-grid[data-module="support"] .support-board-card {
    min-height: 7.2rem;
    padding: 0.66rem;
  }

  .content-grid[data-module="support"] .support-board-card strong {
    font-size: clamp(1.02rem, 5.3vw, 1.32rem);
  }

  .content-grid[data-module="support"] .support-board-card small {
    display: none;
  }

  .content-grid[data-module="support"] .support-service-head,
  .content-grid[data-module="support"] .support-block-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.44rem;
  }

  .content-grid[data-module="support"] .support-live-dot {
    width: fit-content;
  }

  .content-grid[data-module="support"] .support-motion-stage {
    min-height: 5.6rem;
  }

  .content-grid[data-module="support"] .support-upload-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 个人中心排版修复：恢复正常文档流，避免卡片互相覆盖或左侧被裁切。 */
.content-grid[data-module="profile"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-items: start;
  align-content: start;
  overflow: visible;
  padding-inline: clamp(0.2rem, 0.8vw, 0.8rem);
}

.content-grid[data-module="profile"] .profile-dashboard {
  grid-column: 1 / -1;
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: auto;
  align-items: start;
  gap: clamp(0.9rem, 1.2vw, 1.25rem);
  overflow: visible;
  margin: 0;
  padding: 0;
  transform: none;
}

.content-grid[data-module="profile"] .profile-glass-card {
  position: relative;
  inset: auto;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  transform: none;
}

.content-grid[data-module="profile"] .profile-hero-card {
  grid-column: 1 / -1;
  grid-row: auto;
}

.content-grid[data-module="profile"] .profile-benefits-card {
  grid-column: 1 / span 6;
  grid-row: auto;
}

.content-grid[data-module="profile"] .profile-recent-card {
  grid-column: 7 / -1;
  grid-row: auto;
}

.content-grid[data-module="profile"] .profile-service-card {
  grid-column: 1 / -1;
  grid-row: auto;
  clear: both;
}

.content-grid[data-module="profile"] .profile-hero-card,
.content-grid[data-module="profile"] .profile-benefits-card,
.content-grid[data-module="profile"] .profile-recent-card,
.content-grid[data-module="profile"] .profile-service-card {
  align-self: start;
}

.content-grid[data-module="profile"] .profile-hero-main,
.content-grid[data-module="profile"] .profile-hero-copy,
.content-grid[data-module="profile"] .profile-member-metrics,
.content-grid[data-module="profile"] .profile-practice-layout,
.content-grid[data-module="profile"] .profile-service-grid,
.content-grid[data-module="profile"] .profile-benefit-grid,
.content-grid[data-module="profile"] .profile-piece-list,
.content-grid[data-module="profile"] .profile-collab-grid,
.content-grid[data-module="profile"] .profile-settings-list {
  min-width: 0;
  max-width: 100%;
}

.content-grid[data-module="profile"] .profile-card-head {
  min-width: 0;
}

.content-grid[data-module="profile"] .profile-card-head > div {
  min-width: 0;
}

@media (max-width: 1180px) {
  .content-grid[data-module="profile"] .profile-benefits-card,
  .content-grid[data-module="profile"] .profile-recent-card,
  .content-grid[data-module="profile"] .profile-service-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .content-grid[data-module="profile"] {
    padding-inline: 0;
  }

  .content-grid[data-module="profile"] .profile-dashboard,
  .content-grid[data-module="profile"] .profile-hero-card,
  .content-grid[data-module="profile"] .profile-benefits-card,
  .content-grid[data-module="profile"] .profile-recent-card,
  .content-grid[data-module="profile"] .profile-service-card {
    grid-column: 1 / -1;
  }

  .content-grid[data-module="profile"] .profile-hero-card,
  .content-grid[data-module="profile"] .profile-practice-layout,
  .content-grid[data-module="profile"] .profile-service-grid,
  .content-grid[data-module="profile"] .profile-service-card .profile-collab-grid {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="profile"] .profile-card-head,
  .content-grid[data-module="profile"] .profile-action-row {
    align-items: stretch;
  }
}

/* 节拍器设置区：六个板块改为左右两列、每列三个。 */
.content-grid[data-module="metronome"] .metronome-control-bar .metronome-control-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: minmax(6.9rem, auto);
  align-items: stretch;
  gap: clamp(0.65rem, 0.95vw, 0.9rem);
}

.content-grid[data-module="metronome"] .metronome-control-bar .metronome-control-card {
  min-height: 6.9rem;
  height: 100%;
  overflow: hidden;
}

.content-grid[data-module="metronome"] .metronome-control-bar .metronome-segment-grid,
.content-grid[data-module="metronome"] .metronome-control-bar .metronome-sound-mini-panel,
.content-grid[data-module="metronome"] .metronome-control-bar .metronome-practice-mini-panel,
.content-grid[data-module="metronome"] .metronome-control-bar .metronome-volume-line {
  min-height: 0;
}

.content-grid[data-module="metronome"] .metronome-control-bar .metronome-segment-grid button,
.content-grid[data-module="metronome"] .metronome-control-bar .metronome-sound-mini-panel button,
.content-grid[data-module="metronome"] .metronome-control-bar .metronome-practice-mini-panel button {
  min-height: 2.5rem;
}

.content-grid[data-module="metronome"] .metronome-control-bar .metronome-volume-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  height: 100%;
}

@media (max-width: 900px) {
  .content-grid[data-module="metronome"] .metronome-control-bar .metronome-control-strip {
    grid-template-columns: 1fr;
  }
}

/* 会员价格文案：永久会员显示活动价为主，原价弱化为价值锚点。 */
.content-grid[data-module="membership"] .membership-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.16rem 0.42rem;
}

.content-grid[data-module="membership"] .membership-current-price {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.content-grid[data-module="membership"] .membership-original-price {
  color: rgba(220, 229, 239, 0.42);
  font-size: clamp(0.58rem, 0.68vw, 0.72rem);
  font-weight: 720;
  line-height: 1;
  text-decoration: line-through;
  white-space: nowrap;
}

.content-grid[data-module="tuner"] .tuner-action-label.is-tuned,
.content-grid[data-module="tuner"] .tuner-action-label.is-accurate {
  color: var(--tuner-ok);
}

.content-grid[data-module="tuner"] .tuner-action-label.is-flat,
.content-grid[data-module="tuner"] .tuner-action-label.is-sharp {
  color: var(--tuner-bad);
}

.content-grid[data-module="tuner"] .tuner-string-status-card.is-tuned {
  border-color: rgba(88, 235, 155, 0.34);
  background:
    linear-gradient(145deg, rgba(88, 235, 155, 0.16), rgba(88, 235, 155, 0.04)),
    rgba(255, 255, 255, 0.04);
}

.content-grid[data-module="tuner"] .tuner-string-status-card.is-flat p,
.content-grid[data-module="tuner"] .tuner-string-status-card.is-sharp p {
  color: var(--tuner-bad);
}

@media (max-width: 720px) {
  body .topbar .top-nav {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  body .topbar .top-nav .nav-item {
    flex: 0 0 auto;
    min-width: 4rem;
  }

  body .content-grid[data-module="teacher"] .teacher-answer-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body .content-grid[data-module="teacher"] .teacher-answer-card,
  body .content-grid[data-module="teacher"] .teacher-demo-card,
  body .content-grid[data-module="teacher"] .teacher-player-embed-card,
  body .content-grid[data-module="teacher"] .teacher-demo-copy,
  body .content-grid[data-module="teacher"] .teacher-demo-actions {
    width: 100%;
    min-width: 0;
  }

  body .content-grid[data-module="teacher"] .teacher-answer-head,
  body .content-grid[data-module="teacher"] .teacher-demo-head,
  body .content-grid[data-module="teacher"] .teacher-practice-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  body .content-grid[data-module="teacher"] .teacher-player-embed-shell {
    min-height: clamp(13rem, 54vw, 18rem);
  }

  body .content-grid[data-module="teacher"] .teacher-player-embed {
    left: 50%;
    width: min(58rem, 190vw);
    transform: translateX(-50%) scale(0.5);
    transform-origin: top center;
  }

  body .content-grid[data-module="teacher"] .teacher-demo-actions {
    grid-template-columns: 1fr;
  }
}

.mobile-bottom-nav {
  display: none;
}

@media (max-width: 720px) {
  html[data-active-module] .main-stage {
    padding-bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
  }

  .mobile-bottom-nav {
    position: fixed;
    right: max(0.72rem, env(safe-area-inset-right, 0px));
    bottom: max(0.72rem, env(safe-area-inset-bottom, 0px));
    left: max(0.72rem, env(safe-area-inset-left, 0px));
    z-index: 90;
    display: grid;
    gap: 0.48rem;
    pointer-events: none;
  }

  .mobile-bottom-primary,
  .mobile-more-sheet {
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
      rgba(11, 15, 18, 0.82);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 1rem 2.6rem rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
  }

  .mobile-bottom-primary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.18rem;
    min-height: 4.3rem;
    padding: 0.42rem;
    border-radius: 1.1rem;
  }

  .mobile-bottom-item {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    min-height: 3.25rem;
    place-items: center;
    border: 0;
    border-radius: 0.86rem;
    background: transparent;
    color: rgba(224, 233, 239, 0.68);
    font: inherit;
    cursor: pointer;
  }

  .mobile-bottom-item span {
    display: grid;
    width: 1.42rem;
    height: 1.42rem;
    place-items: center;
    color: rgba(228, 199, 127, 0.78);
    font-size: 1rem;
    line-height: 1;
  }

  .mobile-bottom-item strong {
    overflow: hidden;
    max-width: 100%;
    font-size: 0.62rem;
    font-weight: 760;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-bottom-item.is-active {
    background: rgba(228, 199, 127, 0.12);
    color: rgba(255, 244, 214, 0.98);
  }

  .mobile-bottom-item.is-active span {
    color: rgba(255, 238, 190, 0.98);
  }

  .mobile-more-sheet {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.42rem;
    padding: 0.62rem;
    border-radius: 1rem;
  }

  .mobile-more-sheet button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    min-height: 2.64rem;
    padding: 0.48rem 0.56rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.78rem;
    background: rgba(255, 255, 255, 0.036);
    color: rgba(238, 244, 244, 0.84);
    font: inherit;
  }

  .mobile-more-sheet span {
    color: rgba(228, 199, 127, 0.82);
  }

  .mobile-more-sheet strong {
    overflow: hidden;
    font-size: 0.74rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-more-sheet button.is-active {
    border-color: rgba(228, 199, 127, 0.28);
    background: rgba(228, 199, 127, 0.1);
  }

}

/* AI生曲页面回正：恢复上传入口和任务中心的正常横向布局，避免被全局 glass/pass 样式挤成竖排。 */
html[data-active-module] .content-grid[data-module="pieces"] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: start;
  gap: clamp(0.8rem, 1.1vw, 1.05rem);
  height: auto;
  min-height: 100%;
  overflow: auto;
  padding-bottom: clamp(1rem, 1.8vw, 1.6rem);
  writing-mode: horizontal-tb;
}

body:has(.content-grid[data-module="pieces"]) .main-stage {
  overflow: auto;
}

.content-grid[data-module="pieces"] > .score-generate-hero,
.content-grid[data-module="pieces"] > .score-generate-panel,
.content-grid[data-module="pieces"] > .score-task-center {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  writing-mode: horizontal-tb;
}

.content-grid[data-module="pieces"] .score-generate-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 1.6rem);
  min-height: auto;
}

.content-grid[data-module="pieces"] .score-import-title,
.content-grid[data-module="pieces"] .score-import-title h3,
.content-grid[data-module="pieces"] .score-import-title p,
.content-grid[data-module="pieces"] .score-task-head,
.content-grid[data-module="pieces"] .score-task-head h3,
.content-grid[data-module="pieces"] .score-task-head p,
.content-grid[data-module="pieces"] .score-task-step,
.content-grid[data-module="pieces"] .score-task-step strong,
.content-grid[data-module="pieces"] .score-task-step p,
.content-grid[data-module="pieces"] .score-task-meta,
.content-grid[data-module="pieces"] .score-task-meta span,
.content-grid[data-module="pieces"] .score-task-meta strong,
.content-grid[data-module="pieces"] .score-task-meta small,
.content-grid[data-module="pieces"] .score-generate-info,
.content-grid[data-module="pieces"] .score-generate-info article,
.content-grid[data-module="pieces"] .score-generate-info strong,
.content-grid[data-module="pieces"] .score-generate-info p {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.content-grid[data-module="pieces"] .score-generate-panel {
  display: grid;
  grid-template-columns: minmax(22rem, 1fr) minmax(18rem, 0.34fr);
  gap: clamp(0.85rem, 1.2vw, 1.1rem);
  min-height: clamp(23rem, 48vh, 34rem);
}

.content-grid[data-module="pieces"] .score-generate-upload {
  min-height: clamp(23rem, 48vh, 34rem);
  height: auto;
  max-height: none;
  place-items: center;
  text-align: center;
}

.content-grid[data-module="pieces"] .score-generate-info {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(0.62rem, 0.9vw, 0.82rem);
}

.content-grid[data-module="pieces"] .score-generate-info article {
  display: grid;
  align-content: center;
  min-height: 6.4rem;
}

.content-grid[data-module="pieces"] .score-task-center {
  display: grid;
  gap: clamp(0.7rem, 0.95vw, 0.95rem);
  padding: clamp(0.85rem, 1.25vw, 1.1rem);
}

.content-grid[data-module="pieces"] .score-task-head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(0.9rem, 1.2vw, 1.2rem);
}

.content-grid[data-module="pieces"] .score-task-head > div:first-child {
  min-width: 0;
}

.content-grid[data-module="pieces"] .score-task-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.content-grid[data-module="pieces"] .score-task-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.75vw, 0.7rem);
}

.content-grid[data-module="pieces"] .score-task-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  min-width: 0;
  padding: clamp(0.58rem, 0.8vw, 0.74rem);
}

.content-grid[data-module="pieces"] .score-task-step > span {
  display: grid;
  width: 1.72rem;
  height: 1.72rem;
  place-items: center;
  flex: 0 0 auto;
}

.content-grid[data-module="pieces"] .score-task-step strong,
.content-grid[data-module="pieces"] .score-task-step p {
  overflow-wrap: anywhere;
  white-space: normal;
}

.content-grid[data-module="pieces"] .score-task-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.45rem, 0.65vw, 0.58rem);
}

@media (max-width: 1180px) {
  .content-grid[data-module="pieces"] .score-generate-panel {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="pieces"] .score-generate-info {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .content-grid[data-module="pieces"] .score-generate-hero,
  .content-grid[data-module="pieces"] .score-task-head {
    flex-direction: column;
  }

  .content-grid[data-module="pieces"] .score-generate-info,
  .content-grid[data-module="pieces"] .score-task-flow,
  .content-grid[data-module="pieces"] .score-task-meta {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="pieces"] .score-task-actions {
    width: 100%;
    justify-content: stretch;
  }

  .content-grid[data-module="pieces"] .score-task-actions .glass-button {
    flex: 1 1 10rem;
  }
}

/* AI生曲精简页：普通用户入口只保留标题、次数、上传区和右侧三项信息。 */
html[data-active-module="pieces"] .content-grid[data-module="pieces"] {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

html[data-active-module="pieces"] body:has(.content-grid[data-module="pieces"]) .main-stage {
  overflow: hidden;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] > .score-generate-hero,
html[data-active-module="pieces"] .content-grid[data-module="pieces"] > .score-generate-panel {
  grid-column: 1 / -1;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-hero {
  min-height: 0;
  padding: clamp(0.5rem, 0.78vw, 0.72rem) clamp(0.95rem, 1.6vw, 1.35rem);
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-hero .score-import-title h3 {
  font-size: clamp(2.25rem, 4.15vw, 4.4rem);
  line-height: 0.92;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-hero .score-import-title p {
  margin-top: clamp(0.28rem, 0.45vw, 0.42rem);
  line-height: 1.25;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-import-quota {
  min-width: clamp(9.2rem, 14vw, 13rem);
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr);
  gap: clamp(0.75rem, 1.05vw, 1rem);
  height: 100%;
  min-height: 0;
  max-height: 100%;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-upload {
  --score-upload-radius: clamp(1.55rem, 2.35vw, 2.15rem);
  --score-upload-inner-inset: clamp(0.45rem, 0.72vw, 0.64rem);
  --score-upload-inner-radius: calc(var(--score-upload-radius) - var(--score-upload-inner-inset));
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: clamp(0.78rem, 1.18vw, 1.18rem);
  border-radius: var(--score-upload-radius);
  background:
    radial-gradient(circle at 50% 45%, rgba(228, 199, 127, 0.15), transparent 30%),
    radial-gradient(circle at 11% 50%, rgba(255, 232, 184, 0.08), transparent 7%),
    radial-gradient(circle at 89% 50%, rgba(143, 207, 255, 0.07), transparent 7%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.028) 50%, rgba(255, 255, 255, 0.058)),
    rgba(6, 10, 13, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.065),
    0 1.45rem 4rem rgba(0, 0, 0, 0.34);
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-upload::before {
  inset: var(--score-upload-inner-inset);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--score-upload-inner-radius);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.095), transparent 32% 68%, rgba(255, 255, 255, 0.035)),
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.055), transparent 32%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-upload::after {
  display: none;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-info {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  gap: clamp(0.62rem, 0.9vw, 0.82rem);
  overflow: hidden;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-info article {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 0;
  padding: clamp(0.58rem, 0.82vw, 0.78rem);
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-info strong {
  font-size: clamp(0.94rem, 1.08vw, 1.12rem);
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-info p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-info-card.has-action {
  padding-right: clamp(5.4rem, 8vw, 7.2rem);
}

html[data-active-module="pieces"] .score-generate-info-refresh {
  position: absolute;
  top: clamp(0.7rem, 1vw, 0.9rem);
  right: clamp(0.7rem, 1vw, 0.9rem);
  min-height: 2rem;
  padding: 0 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(7, 10, 14, 0.44);
  color: rgba(242, 246, 249, 0.9);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 720;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0.55rem 1.4rem rgba(0, 0, 0, 0.22);
}

html[data-active-module="pieces"] .score-generate-info-refresh:hover {
  border-color: rgba(228, 199, 127, 0.36);
  color: rgba(255, 236, 196, 0.96);
}

html[data-active-module="pieces"] .score-generate-info-refresh:disabled {
  cursor: wait;
  opacity: 0.62;
}

/* AI生曲最终流程页：上传区与进度中心同时出现时保持正常宽度。 */
html[data-active-module="pieces"] .content-grid[data-module="pieces"] {
  grid-template-rows: auto minmax(26rem, auto) auto;
  align-content: start;
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: clamp(1rem, 1.8vw, 1.6rem);
}

html[data-active-module="pieces"] body:has(.content-grid[data-module="pieces"]) .main-stage {
  overflow: hidden;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] > .score-generate-hero,
html[data-active-module="pieces"] .content-grid[data-module="pieces"] > .score-generate-panel,
html[data-active-module="pieces"] .content-grid[data-module="pieces"] > .score-task-center {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-panel {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.32fr);
  min-height: clamp(24rem, 52vh, 36rem);
  height: auto;
  max-height: none;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-upload {
  min-height: clamp(24rem, 52vh, 36rem);
  height: auto;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-task-center {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-task-flow {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-task-meta {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-task-step strong,
html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-task-step p,
html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-task-meta small,
html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-status p {
  overflow-wrap: anywhere;
  white-space: normal;
}

html[data-active-module="pieces"] .score-generate-status.is-processing,
html[data-active-module="pieces"] .score-generate-status.is-review,
html[data-active-module="pieces"] .score-generate-status.is-queued {
  border-color: rgba(228, 199, 127, 0.32);
}

@media (max-width: 900px) {
  html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-panel {
    grid-template-columns: 1fr;
  }

  html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-info {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 721px) and (max-width: 1080px) {
  html[data-active-module="pieces"],
  html[data-active-module="pieces"] body {
    height: 100%;
    overflow: hidden;
  }

  html[data-active-module="pieces"] .app-shell {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  html[data-active-module="pieces"] .main-stage {
    display: flex;
    width: min(100%, var(--stage-max-w));
    height: 100dvh;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: var(--page-pad-y);
  }

  html[data-active-module="pieces"] .topbar {
    flex: 0 0 auto;
    min-height: 0;
    margin-bottom: clamp(0.5rem, 0.9vw, 0.78rem);
  }

  html[data-active-module="pieces"] .content-grid[data-module="pieces"] {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    gap: clamp(0.42rem, 0.68vw, 0.58rem);
    overflow: hidden;
  }

  html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-hero {
    flex: 0 0 auto;
    padding: 0.45rem 0.78rem;
  }

  html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-hero .score-import-title h3 {
    font-size: clamp(2rem, 6.3vw, 3.35rem);
  }

  html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-hero .score-import-title p {
    font-size: 0.72rem;
    line-height: 1.18;
  }

  html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-import-quota {
    min-width: 7.8rem;
    padding: 0.46rem 0.62rem;
  }

  html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-panel {
    grid-template-columns: minmax(0, 1fr) minmax(15.5rem, 0.38fr);
    gap: 0.56rem;
    height: 100%;
    min-height: 0;
  }

  html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-upload {
    --score-upload-radius: clamp(1.25rem, 3.6vw, 1.72rem);
    --score-upload-inner-inset: 0.46rem;
  }

  html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-info {
    gap: 0.42rem;
  }

  html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-info article {
    padding: 0.48rem 0.58rem;
  }

  html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-info-card.has-action {
    padding-right: 4.8rem;
  }

  html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-info span {
    font-size: 0.62rem;
  }

  html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-info strong {
    font-size: 0.92rem;
    line-height: 1.15;
  }

  html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-info p {
    font-size: 0.68rem;
    line-height: 1.34;
  }

  html[data-active-module="pieces"] .score-generate-info-refresh {
    top: 0.58rem;
    right: 0.58rem;
    min-height: 1.72rem;
    padding: 0 0.62rem;
    font-size: 0.68rem;
  }
}

/* 节拍器控制条精修：降低胶囊感，改善按钮文字排版和扫描性。 */
.content-grid[data-module="metronome"] .metronome-control-card {
  border-radius: 10px;
  padding: clamp(0.66rem, 0.82vw, 0.82rem);
}

.content-grid[data-module="metronome"] .metronome-control-card > span {
  color: rgba(230, 236, 244, 0.72);
  font-size: clamp(0.72rem, 0.78vw, 0.82rem);
  font-weight: 720;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.content-grid[data-module="metronome"] .metronome-segment-grid,
.content-grid[data-module="metronome"] .metronome-sound-mini-panel,
.content-grid[data-module="metronome"] .metronome-practice-mini-panel {
  gap: clamp(0.34rem, 0.42vw, 0.46rem);
}

.content-grid[data-module="metronome"] .metronome-segment-grid button,
.content-grid[data-module="metronome"] .metronome-sound-mini-panel button,
.content-grid[data-module="metronome"] .metronome-practice-mini-panel button {
  border-radius: 10px;
  min-height: clamp(2.36rem, 2.72vw, 2.92rem);
  padding: 0.42rem 0.58rem;
  letter-spacing: 0;
  line-height: 1.18;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.32rem 0.82rem rgba(0, 0, 0, 0.18);
}

.content-grid[data-module="metronome"] .metronome-segment-grid button {
  font-size: clamp(0.86rem, 0.92vw, 1rem);
  font-weight: 780;
}

.content-grid[data-module="metronome"] .metronome-rhythm-grid button strong {
  font-size: clamp(1.02rem, 1.08vw, 1.18rem);
  line-height: 1;
}

.content-grid[data-module="metronome"] .metronome-sound-mini-panel button {
  justify-items: start;
  align-content: center;
  gap: 0.12rem;
  padding-inline: clamp(0.72rem, 0.88vw, 0.9rem);
  text-align: left;
}

.content-grid[data-module="metronome"] .metronome-sound-mini-panel strong {
  font-size: clamp(0.78rem, 0.84vw, 0.92rem);
  font-weight: 820;
  line-height: 1.08;
}

.content-grid[data-module="metronome"] .metronome-sound-mini-panel small {
  color: rgba(225, 232, 240, 0.58);
  font-size: clamp(0.6rem, 0.66vw, 0.72rem);
  line-height: 1.12;
}

.content-grid[data-module="metronome"] .metronome-practice-mini-panel button {
  align-content: center;
  gap: 0.16rem;
  padding-inline: 0.48rem;
}

.content-grid[data-module="metronome"] .metronome-practice-mini-panel strong {
  font-size: clamp(0.8rem, 0.88vw, 0.96rem);
  font-weight: 820;
  line-height: 1.08;
}

.content-grid[data-module="metronome"] .metronome-practice-mini-panel small {
  color: rgba(225, 232, 240, 0.6);
  font-size: clamp(0.58rem, 0.64vw, 0.7rem);
  line-height: 1.1;
}

.content-grid[data-module="metronome"] .metronome-segment-grid button.is-active,
.content-grid[data-module="metronome"] .metronome-sound-mini-panel button.is-active,
.content-grid[data-module="metronome"] .metronome-practice-mini-panel button.is-active {
  border-color: rgba(215, 184, 108, 0.54);
  background:
    radial-gradient(circle at 34% 18%, rgba(255, 236, 176, 0.2), transparent 42%),
    linear-gradient(145deg, rgba(215, 184, 108, 0.22), rgba(102, 136, 164, 0.08)),
    rgba(255, 255, 255, 0.035);
  color: rgba(255, 243, 210, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 1.05rem rgba(215, 184, 108, 0.1),
    0 0.42rem 1rem rgba(0, 0, 0, 0.2);
}

/* 调音器仪表盘：横向密集刻度 + 中心绿色/偏离红色指针。 */
.content-grid[data-module="tuner"] .tuner-cent-gauge {
  min-height: clamp(10.5rem, 16vw, 13.8rem);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(255, 76, 82, 0.2), rgba(255, 76, 82, 0.08) 22%, rgba(88, 235, 155, 0.09) 47%, rgba(88, 235, 155, 0.16) 50%, rgba(88, 235, 155, 0.09) 53%, rgba(255, 76, 82, 0.08) 78%, rgba(255, 76, 82, 0.2)),
    radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, 0.05), transparent 40%),
    linear-gradient(180deg, rgba(5, 9, 12, 0.78), rgba(5, 7, 10, 0.94));
}

.content-grid[data-module="tuner"] .tuner-cent-gauge::before {
  left: 50%;
  top: 1rem;
  bottom: 1.9rem;
  z-index: 2;
  width: 4.8rem;
  height: auto;
  transform: translateX(-50%);
  border-inline: 1px solid rgba(88, 235, 155, 0.35);
  background:
    linear-gradient(90deg, transparent, rgba(88, 235, 155, 0.08) 35%, rgba(88, 235, 155, 0.2) 50%, rgba(88, 235, 155, 0.08) 65%, transparent);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 86%, transparent 100%);
}

.content-grid[data-module="tuner"] .tuner-cent-gauge::after {
  display: none;
}

.content-grid[data-module="tuner"] .tuner-precision-dial {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 48%;
  bottom: auto;
  width: auto;
  height: clamp(5.6rem, 8.3vw, 7.2rem);
  aspect-ratio: auto;
  transform: translateY(-50%);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255, 92, 92, 0.22), rgba(255, 92, 92, 0.06) 36%, rgba(88, 235, 155, 0.16) 49%, rgba(88, 235, 155, 0.22) 50%, rgba(88, 235, 155, 0.16) 51%, rgba(255, 92, 92, 0.06) 64%, rgba(255, 92, 92, 0.22)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  filter: drop-shadow(0 0 1.2rem color-mix(in srgb, var(--dial-accent) 16%, transparent));
}

.content-grid[data-module="tuner"] .tuner-precision-dial::before {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 92, 92, 0.45), rgba(255, 255, 255, 0.24) 45%, rgba(88, 235, 155, 0.9) 50%, rgba(255, 255, 255, 0.24) 55%, rgba(255, 92, 92, 0.45));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 1.2rem rgba(88, 235, 155, 0.12);
  content: "";
}

.content-grid[data-module="tuner"] .tuner-precision-dial::after {
  position: absolute;
  left: 50%;
  top: calc(50% - 0.22rem);
  width: clamp(2.2rem, 4.4vw, 3.8rem);
  height: 0.44rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(88, 235, 155, 0.92);
  box-shadow:
    0 0 0.85rem rgba(88, 235, 155, 0.56),
    0 0 2.2rem rgba(88, 235, 155, 0.2);
  content: "";
}

.content-grid[data-module="tuner"] .tuner-dial-safe-zone,
.content-grid[data-module="tuner"] .tuner-dial-alert-zone {
  display: none;
}

.content-grid[data-module="tuner"] .tuner-precision-dial > i:not(.tuner-dial-arc) {
  position: absolute;
  left: var(--tick-x);
  top: 50%;
  bottom: auto;
  width: 1px;
  height: 1.35rem;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.content-grid[data-module="tuner"] .tuner-precision-dial > i:not(.tuner-dial-arc)::before {
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 100%;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(232, 238, 230, 0.34);
  content: "";
}

.content-grid[data-module="tuner"] .tuner-precision-dial > i.is-medium::before {
  height: 1.9rem;
  background: rgba(238, 223, 168, 0.56);
}

.content-grid[data-module="tuner"] .tuner-precision-dial > i.is-major::before {
  height: 2.55rem;
  width: 2px;
  background: rgba(255, 224, 224, 0.68);
}

.content-grid[data-module="tuner"] .tuner-precision-dial > i.is-center::before {
  height: 3.45rem;
  width: 2px;
  background: rgba(88, 235, 155, 0.98);
  box-shadow: 0 0 1rem rgba(88, 235, 155, 0.44);
}

.content-grid[data-module="tuner"] .tuner-dial-zero {
  left: 50%;
  top: 6%;
  bottom: 6%;
  width: 2px;
  height: auto;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(88, 235, 155, 0.98) 16% 84%, transparent);
  box-shadow: 0 0 1rem rgba(88, 235, 155, 0.34);
}

.content-grid[data-module="tuner"] .tuner-dial-needle,
.content-grid[data-module="tuner"] .tuner-dial-glow {
  left: var(--needle-x, 50%);
  top: 50%;
  bottom: auto;
  transform-origin: center;
  transform: translate(-50%, -50%);
}

.content-grid[data-module="tuner"] .tuner-dial-needle {
  width: 0.2rem;
  height: 5.25rem;
  margin-left: 0;
  border-radius: 999px;
  clip-path: none;
  background:
    linear-gradient(180deg, transparent 0%, var(--dial-accent) 12%, rgba(255, 255, 255, 0.98) 50%, var(--dial-accent) 88%, transparent 100%);
  filter:
    drop-shadow(0 0 0.52rem var(--dial-soft))
    drop-shadow(0 0 1.05rem color-mix(in srgb, var(--dial-accent) 44%, transparent));
  transition:
    left 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    background 160ms ease,
    filter 160ms ease;
}

.content-grid[data-module="tuner"] .tuner-dial-glow {
  width: 1rem;
  height: 1rem;
  margin: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--dial-accent) 72%, rgba(255, 255, 255, 0.62));
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98), var(--dial-accent) 58%, rgba(255, 255, 255, 0.02));
  box-shadow:
    0 0 0 0.18rem var(--dial-soft),
    0 0 1.3rem color-mix(in srgb, var(--dial-accent) 46%, transparent);
  transition:
    left 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.content-grid[data-module="tuner"] .tuner-cent-display.is-tuned,
.content-grid[data-module="tuner"] .tuner-cent-display.is-accurate {
  --dial-accent: #58eb9b;
  --dial-soft: rgba(88, 235, 155, 0.22);
}

.content-grid[data-module="tuner"] .tuner-cent-display.is-flat,
.content-grid[data-module="tuner"] .tuner-cent-display.is-sharp {
  --dial-accent: #ff5b5c;
  --dial-soft: rgba(255, 91, 92, 0.2);
}

.content-grid[data-module="tuner"] .dial-side {
  top: 0.82rem;
  border-radius: 0.55rem;
  color: rgba(255, 196, 196, 0.98);
  border-color: rgba(255, 91, 92, 0.2);
  background: rgba(70, 16, 20, 0.5);
}

.content-grid[data-module="tuner"] .dial-side.is-flat { left: 6%; }
.content-grid[data-module="tuner"] .dial-side.is-sharp { right: 6%; }

.content-grid[data-module="tuner"] .dial-number {
  bottom: 0.8rem;
  border-radius: 0.4rem;
  background: rgba(4, 7, 9, 0.52);
}

.content-grid[data-module="tuner"] .dial-left { left: 8%; }
.content-grid[data-module="tuner"] .dial-right { right: 8%; }
.content-grid[data-module="tuner"] .dial-mid {
  color: rgba(150, 255, 196, 0.96);
}
/* Support center final lock: keep FAQ on the right and human handoff compact. */
.content-grid[data-module="support"] > .support-two-panel {
  grid-template-columns: minmax(38rem, 1.36fr) minmax(25rem, 0.64fr);
}

.content-grid[data-module="support"] .support-entry-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.content-grid[data-module="support"] .support-board-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  overflow: auto;
}

.content-grid[data-module="support"] .support-board-card {
  min-height: clamp(7.35rem, 10.3vw, 9.15rem);
  border-radius: 0.78rem;
}

.content-grid[data-module="support"] .support-board-card strong {
  font-size: clamp(1.04rem, 1.22vw, 1.34rem);
}

.content-grid[data-module="support"] .support-board-card small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.content-grid[data-module="support"] .support-input-block {
  display: none;
}

.content-grid[data-module="support"] .support-service-panel {
  grid-template-rows: auto minmax(8.3rem, 0.74fr) minmax(0, 1fr) auto;
  gap: clamp(0.52rem, 0.68vw, 0.72rem);
}

.content-grid[data-module="support"] .support-guess-block {
  min-height: 0;
  overflow: hidden;
  padding: 0.76rem;
  border: 1px solid rgba(236, 243, 255, 0.1);
  border-radius: 0.82rem;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(226, 181, 105, 0.1), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(4, 8, 13, 0.36);
}

.content-grid[data-module="support"] .support-guess-list {
  grid-template-columns: 1fr;
  gap: 0.42rem;
  min-height: 0;
  overflow: auto;
}

.content-grid[data-module="support"] .support-guess-list button {
  min-height: 3.7rem;
  padding: 0.62rem 0.72rem;
}

.content-grid[data-module="support"] .support-advice-stack {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.52rem;
  min-height: 0;
  overflow: hidden;
}

.content-grid[data-module="support"] .support-motion-stage {
  min-height: clamp(4.7rem, 7vh, 6.1rem);
}

.content-grid[data-module="support"] .support-answer-content {
  min-height: 0;
  overflow: auto;
  border-bottom: 0;
}

.content-grid[data-module="support"] .support-human-fallback {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.6rem;
  gap: 0.36rem 0.46rem;
  align-self: end;
  padding: 0.52rem;
  border-radius: 0.76rem;
}

.content-grid[data-module="support"] .support-human-copy {
  grid-column: 1;
  align-content: center;
}

.content-grid[data-module="support"] .support-human-copy strong {
  font-size: clamp(0.78rem, 0.86vw, 0.92rem);
}

.content-grid[data-module="support"] .support-upload-grid {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.28rem;
}

.content-grid[data-module="support"] .support-upload-entry {
  min-height: 2.42rem;
  padding: 0.34rem 0.36rem;
  border-radius: 0.58rem;
}

.content-grid[data-module="support"] .support-upload-entry strong {
  font-size: 0.72rem;
}

.content-grid[data-module="support"] .support-upload-entry small {
  font-size: 0.58rem;
}

.content-grid[data-module="support"] .support-human-dialog {
  grid-column: 1;
}

.content-grid[data-module="support"] .support-human-dialog textarea,
.content-grid[data-module="support"] .support-human-dialog-compact textarea {
  min-height: 2.56rem;
  max-height: 4rem;
  padding: 0.5rem 0.62rem;
  font-size: 0.78rem;
  line-height: 1.36;
}

.content-grid[data-module="support"] .support-human-fallback .glass-button,
.content-grid[data-module="support"] .support-human-fallback .support-secondary-action {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: stretch;
  width: 5.6rem;
  min-height: 0;
  padding: 0.5rem 0.58rem;
  border-radius: 0.66rem;
  font-size: 0.74rem;
  line-height: 1.2;
  white-space: normal;
}

@media (max-width: 1180px) {
  .content-grid[data-module="support"] > .support-two-panel {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    overflow: visible;
  }

  .content-grid[data-module="support"] .support-service-panel {
    grid-template-rows: auto auto auto auto;
  }

  .content-grid[data-module="support"] .support-board-grid,
  .content-grid[data-module="support"] .support-guess-list,
  .content-grid[data-module="support"] .support-advice-stack,
  .content-grid[data-module="support"] .support-answer-content {
    overflow: visible;
  }

  .content-grid[data-module="support"] .support-human-fallback {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-grid[data-module="support"] .support-human-fallback .glass-button,
  .content-grid[data-module="support"] .support-human-fallback .support-secondary-action {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-height: 2.3rem;
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] .support-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid[data-module="support"] .support-board-card {
    min-height: 7.2rem;
  }

  .content-grid[data-module="support"] .support-board-card small {
    display: none;
  }
}

/* Membership final lock: remove the top intro strip and let the offer blocks fill the page. */
html[data-active-module] .content-grid[data-module="membership"] {
  align-content: stretch;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.content-grid[data-module="membership"] > .membership-one-screen {
  display: grid;
  grid-template-rows: minmax(11.8rem, 0.42fr) minmax(0, 1fr);
  gap: clamp(0.62rem, 0.9vw, 0.86rem);
  height: 100%;
  min-height: 0;
  padding: clamp(0.9rem, 1.18vw, 1.15rem);
}

.content-grid[data-module="membership"] > .membership-one-screen.has-unlock-callout,
.content-grid[data-module="membership"] > .membership-one-screen.has-checkout-notice {
  grid-template-rows: auto minmax(11.8rem, 0.42fr) minmax(0, 1fr);
}

.content-grid[data-module="membership"] > .membership-one-screen.has-unlock-callout.has-checkout-notice {
  grid-template-rows: auto auto minmax(11.8rem, 0.42fr) minmax(0, 1fr);
}

.content-grid[data-module="membership"] .membership-one-screen > .panel-header,
.content-grid[data-module="membership"] .membership-upgrade-note,
.content-grid[data-module="membership"] .membership-current-pill {
  display: none;
}

.content-grid[data-module="membership"] .membership-unlock-callout,
.content-grid[data-module="membership"] .membership-checkout-notice {
  min-height: clamp(3.4rem, 5.2vh, 4.4rem);
}

.content-grid[data-module="membership"] .membership-plan-grid {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.72rem, 1vw, 1rem);
  min-height: 0;
}

.content-grid[data-module="membership"] .membership-plan-card {
  grid-template-columns: minmax(0, 0.9fr) minmax(8.8rem, 0.86fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  align-items: stretch;
  min-height: clamp(10.8rem, 17vh, 13.6rem);
  padding: clamp(0.9rem, 1.12vw, 1.14rem);
  border-radius: 0.82rem;
}

.content-grid[data-module="membership"] .membership-plan-head {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-content: start;
  gap: clamp(0.44rem, 0.6vw, 0.58rem);
}

.content-grid[data-module="membership"] .membership-plan-card h4 {
  font-size: clamp(1.22rem, 1.55vw, 1.62rem);
  line-height: 1.08;
}

.content-grid[data-module="membership"] .membership-plan-meta {
  gap: 0.45rem;
}

.content-grid[data-module="membership"] .membership-plan-badge {
  min-height: 1.28rem;
  padding-inline: 0.58rem;
  font-size: clamp(0.66rem, 0.76vw, 0.84rem);
}

.content-grid[data-module="membership"] .membership-plan-note {
  font-size: clamp(0.6rem, 0.68vw, 0.76rem);
}

.content-grid[data-module="membership"] .membership-plan-card button {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  width: min(100%, clamp(8.2rem, 11vw, 10.2rem));
  min-height: clamp(2.55rem, 3.8vh, 3.1rem);
  padding-inline: 1.15rem;
  font-size: clamp(0.98rem, 1.12vw, 1.18rem);
}

.content-grid[data-module="membership"] .membership-price {
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-content: flex-end;
  align-self: center;
}

.content-grid[data-module="membership"] .membership-price small {
  font-size: clamp(0.8rem, 0.94vw, 1rem);
}

.content-grid[data-module="membership"] .membership-price strong {
  font-size: clamp(2.75rem, 4.15vw, 4.3rem);
}

.content-grid[data-module="membership"] .membership-price em {
  font-size: clamp(0.68rem, 0.78vw, 0.86rem);
}

.content-grid[data-module="membership"] .membership-original-price {
  font-size: clamp(0.62rem, 0.72vw, 0.8rem);
}

.content-grid[data-module="membership"] .membership-comparison-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  align-self: stretch;
}

.content-grid[data-module="membership"] .membership-comparison {
  height: 100%;
  min-height: 0;
  grid-auto-rows: minmax(clamp(1.95rem, 3.25vh, 2.7rem), 1fr);
  align-content: stretch;
}

.content-grid[data-module="membership"] .membership-comparison-row > * {
  min-height: clamp(1.95rem, 3.25vh, 2.7rem);
  padding: clamp(0.18rem, 0.32vw, 0.34rem) clamp(0.32rem, 0.52vw, 0.58rem);
  font-size: clamp(0.82rem, 0.92vw, 1rem);
  line-height: 1.18;
}

.content-grid[data-module="membership"] .membership-comparison-row strong {
  font-size: clamp(0.86rem, 0.98vw, 1.08rem);
}

.content-grid[data-module="membership"] .membership-comparison-row.is-head > * {
  font-size: clamp(0.9rem, 1vw, 1.08rem);
}

.content-grid[data-module="membership"] .membership-comparison-row.is-head > *:first-child strong {
  font-size: clamp(1rem, 1.12vw, 1.2rem);
}

.content-grid[data-module="membership"] .membership-comparison-row.is-head > *:first-child small {
  font-size: clamp(0.58rem, 0.66vw, 0.72rem);
}

.content-grid[data-module="membership"] .membership-check,
.content-grid[data-module="membership"] .membership-cross {
  min-width: 1.18rem;
  min-height: 1.18rem;
}

.content-grid[data-module="membership"] .membership-level {
  min-height: 1.25rem;
  padding: 0.12rem 0.48rem;
  font-size: clamp(0.82rem, 0.92vw, 1rem);
}

@media (max-width: 900px) {
  .content-grid[data-module="membership"] > .membership-one-screen {
    grid-template-rows: auto auto auto;
    overflow: visible;
  }

  .content-grid[data-module="membership"] .membership-plan-grid {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="membership"] .membership-plan-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .content-grid[data-module="membership"] .membership-plan-head,
  .content-grid[data-module="membership"] .membership-plan-card button,
  .content-grid[data-module="membership"] .membership-price {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .content-grid[data-module="membership"] .membership-price {
    justify-content: flex-start;
  }
}

/* AI teacher final lock: answer panel focuses on advice, logic and practice steps. */
.content-grid[data-module="teacher"] .teacher-current-question {
  display: none;
}

.content-grid[data-module="teacher"] .teacher-answer-card {
  grid-template-rows: auto minmax(7.4rem, 0.34fr) minmax(0, 1fr);
  gap: clamp(0.68rem, 0.95vw, 0.9rem);
}

.content-grid[data-module="teacher"] .teacher-advice-summary {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(0.58rem, 0.86vw, 0.78rem);
  min-height: 0;
}

.content-grid[data-module="teacher"] .teacher-direct-answer,
.content-grid[data-module="teacher"] .teacher-reason-panel {
  align-content: start;
  min-height: clamp(6.8rem, 12vh, 8.8rem);
  padding: clamp(0.76rem, 1vw, 0.95rem);
}

.content-grid[data-module="teacher"] .teacher-direct-answer h4,
.content-grid[data-module="teacher"] .teacher-reason-panel h4,
.content-grid[data-module="teacher"] .teacher-step-panel h4 {
  font-size: clamp(0.84rem, 0.92vw, 0.96rem);
}

.content-grid[data-module="teacher"] .teacher-direct-answer p,
.content-grid[data-module="teacher"] .teacher-reason-panel p {
  -webkit-line-clamp: 4;
  font-size: clamp(0.92rem, 1.02vw, 1.08rem);
  line-height: 1.42;
}

.content-grid[data-module="teacher"] .teacher-step-panel {
  min-height: 0;
  padding: clamp(0.78rem, 1.06vw, 1rem);
}

.content-grid[data-module="teacher"] .teacher-step-panel ol {
  grid-auto-rows: minmax(clamp(3.7rem, 7vh, 4.8rem), 1fr);
}

@media (max-width: 920px) {
  .content-grid[data-module="teacher"] .teacher-answer-card {
    grid-template-rows: auto auto auto;
  }

  .content-grid[data-module="teacher"] .teacher-advice-summary {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="teacher"] .teacher-direct-answer,
  .content-grid[data-module="teacher"] .teacher-reason-panel {
    min-height: 0;
  }
}

/* Practice report final lock: make the empty-report action buttons easier to tap. */
.content-grid[data-module="reports"] .record-empty-report-actions {
  gap: clamp(0.72rem, 1vw, 0.95rem);
}

.content-grid[data-module="reports"] .record-empty-report-actions .glass-button {
  min-width: clamp(5.9rem, 8.2vw, 7.8rem);
  min-height: clamp(3rem, 5.2vh, 3.45rem);
  padding-inline: clamp(1.18rem, 1.65vw, 1.58rem);
  border-radius: 999px;
  font-size: clamp(1rem, 1.16vw, 1.16rem);
  font-weight: 820;
  letter-spacing: 0;
}

.content-grid[data-module="reports"] .record-empty-report-actions .glass-button.primary {
  min-width: clamp(7.5rem, 10vw, 9.35rem);
}

@media (max-width: 720px) {
  .content-grid[data-module="reports"] .record-empty-report-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .content-grid[data-module="reports"] .record-empty-report-actions .glass-button {
    width: 100%;
    min-width: 0;
    min-height: 3.28rem;
    padding-inline: 0.72rem;
    white-space: nowrap;
  }
}

/* Tuner final lock: remove the lower guidance card and let the controls fill the space. */
.content-grid[data-module="tuner"] .tuner-guidance-card,
.content-grid[data-module="tuner"] .tuner-core-cue {
  display: none;
}

.content-grid[data-module="tuner"] .tuner-center-panel {
  grid-template-rows: minmax(0, 1fr) minmax(7.1rem, 0.34fr);
  gap: clamp(0.58rem, 0.86vw, 0.78rem);
  padding: clamp(0.5rem, 0.78vw, 0.7rem);
}

.content-grid[data-module="tuner"] .tuner-cent-display {
  grid-template-rows: auto minmax(12.2rem, 1fr);
  gap: clamp(0.48rem, 0.72vw, 0.66rem);
  padding: clamp(0.76rem, 1vw, 0.95rem);
}

.content-grid[data-module="tuner"] .tuner-cent-copy strong {
  font-size: clamp(3.15rem, 4.9vw, 5.05rem);
}

.content-grid[data-module="tuner"] .tuner-cent-gauge {
  min-height: clamp(13rem, 31vh, 18.5rem);
}

.content-grid[data-module="tuner"] .tuner-readout-grid {
  gap: clamp(0.46rem, 0.7vw, 0.62rem);
  min-height: 0;
}

.content-grid[data-module="tuner"] .tuner-readout-grid .tuner-spec-card {
  min-height: clamp(6.4rem, 12.5vh, 8.2rem);
}

.content-grid[data-module="tuner"] .tuner-spec-card {
  gap: clamp(0.12rem, 0.26vw, 0.22rem);
  padding: clamp(0.76rem, 1vw, 0.95rem);
}

.content-grid[data-module="tuner"] .tuner-spec-card strong {
  font-size: clamp(1.35rem, 1.65vw, 1.75rem);
}

.content-grid[data-module="tuner"] .tuner-spec-meta b {
  font-size: clamp(1rem, 1.12vw, 1.14rem);
}

.content-grid[data-module="tuner"] .tuner-control-deck {
  grid-template-rows: minmax(10rem, 1.15fr) minmax(4.7rem, 0.55fr) minmax(4.7rem, 0.55fr);
  gap: clamp(0.54rem, 0.82vw, 0.78rem);
  padding: clamp(0.42rem, 0.7vw, 0.62rem);
}

.content-grid[data-module="tuner"] .tuner-auto-listening-card {
  align-content: start;
  padding: clamp(0.92rem, 1.18vw, 1.12rem);
}

.content-grid[data-module="tuner"] .tuner-auto-listening-card small {
  max-width: none;
  font-size: clamp(0.82rem, 0.9vw, 0.92rem);
  line-height: 1.4;
  -webkit-line-clamp: 3;
}

.content-grid[data-module="tuner"] .tuner-detect-head {
  gap: clamp(0.58rem, 0.82vw, 0.78rem);
}

.content-grid[data-module="tuner"] .tuner-detect-icon {
  width: clamp(2rem, 2.45vw, 2.35rem);
  height: clamp(2rem, 2.45vw, 2.35rem);
}

.content-grid[data-module="tuner"] .tuner-detect-head strong {
  font-size: clamp(1.06rem, 1.25vw, 1.28rem);
}

.content-grid[data-module="tuner"] .tuner-control-group {
  align-content: center;
  gap: clamp(0.34rem, 0.52vw, 0.46rem);
  padding: clamp(0.64rem, 0.9vw, 0.82rem);
}

.content-grid[data-module="tuner"] .tuner-control-group > span {
  font-size: clamp(0.82rem, 0.92vw, 0.96rem);
}

.content-grid[data-module="tuner"] .tuner-control-group button {
  min-height: clamp(2.48rem, 4.3vh, 2.92rem);
  font-size: clamp(0.94rem, 1.06vw, 1.08rem);
}

@media (max-width: 1180px) {
  .content-grid[data-module="tuner"] .tuner-control-deck {
    grid-template-rows: auto auto auto;
  }
}

/* Support human upload final lock: collapse media uploads into one plus button. */
.content-grid[data-module="support"] .support-upload-grid,
.content-grid[data-module="support"] .support-upload-entry {
  display: none;
}

.content-grid[data-module="support"] .support-human-fallback {
  grid-template-columns: minmax(0, 1fr) auto 5.6rem;
  align-items: stretch;
}

.content-grid[data-module="support"] .support-human-dialog {
  grid-column: 1;
}

.content-grid[data-module="support"] .support-upload-plus {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: stretch;
  display: grid;
  width: clamp(2.65rem, 4vw, 3.1rem);
  min-height: 2.56rem;
  place-items: center;
  cursor: pointer;
  border: 1px solid rgba(236, 243, 255, 0.14);
  border-radius: 0.72rem;
  background:
    radial-gradient(ellipse at 26% 8%, rgba(226, 181, 105, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.024)),
    rgba(8, 12, 18, 0.72);
  color: rgba(255, 244, 218, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 0.72rem 1.5rem rgba(0, 0, 0, 0.24);
}

.content-grid[data-module="support"] .support-upload-plus input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.content-grid[data-module="support"] .support-upload-plus span {
  color: inherit;
  font-size: clamp(1.45rem, 2vw, 1.86rem);
  font-weight: 760;
  line-height: 1;
}

.content-grid[data-module="support"] .support-human-fallback .glass-button,
.content-grid[data-module="support"] .support-human-fallback .support-secondary-action {
  grid-column: 3;
}

@media (max-width: 1180px) {
  .content-grid[data-module="support"] .support-human-fallback {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .content-grid[data-module="support"] .support-upload-plus {
    grid-column: 2;
    grid-row: 2;
  }

  .content-grid[data-module="support"] .support-human-fallback .glass-button,
  .content-grid[data-module="support"] .support-human-fallback .support-secondary-action {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* Support left rail final lock: keep the board fixed with no inner scrolling. */
.content-grid[data-module="support"] .support-entry-panel {
  min-height: 0;
  overflow: hidden;
}

.content-grid[data-module="support"] .support-entry-head {
  gap: clamp(0.24rem, 0.42vw, 0.38rem);
}

.content-grid[data-module="support"] .support-entry-head h3 {
  font-size: clamp(1.95rem, 2.55vw, 3.05rem);
}

.content-grid[data-module="support"] .support-entry-head p:not(.eyebrow) {
  display: -webkit-box;
  overflow: hidden;
  max-width: 48rem;
  font-size: clamp(0.78rem, 0.9vw, 0.96rem);
  line-height: 1.36;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.content-grid[data-module="support"] .support-board-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.content-grid[data-module="support"] .support-board-card {
  min-height: 0;
  height: 100%;
  grid-template-rows: auto auto;
  align-content: center;
  gap: clamp(0.28rem, 0.42vw, 0.38rem);
  padding: clamp(0.68rem, 0.88vw, 0.82rem) clamp(0.86rem, 1vw, 1rem);
}

.content-grid[data-module="support"] .support-board-card span {
  display: inline-flex;
  align-items: center;
  min-height: 1.28rem;
  padding: 0.16rem 0.52rem 0.14rem;
  line-height: 1;
}

.content-grid[data-module="support"] .support-board-card strong {
  display: block;
  font-size: clamp(0.98rem, 1.08vw, 1.2rem);
  line-height: 1.08;
}

.content-grid[data-module="support"] .support-board-card small,
.content-grid[data-module="support"] .support-board-card b {
  display: none;
}

@media (max-width: 1180px) {
  .content-grid[data-module="support"] > .support-two-panel {
    grid-template-rows: auto auto;
    height: auto;
  }

  .content-grid[data-module="support"] .support-entry-panel,
  .content-grid[data-module="support"] .support-board-grid {
    height: auto;
    overflow: visible;
  }

  .content-grid[data-module="support"] .support-entry-panel {
    grid-template-rows: auto auto;
  }

  .content-grid[data-module="support"] .support-board-grid {
    grid-auto-rows: auto;
  }

  .content-grid[data-module="support"] .support-board-card {
    height: auto;
    min-height: clamp(5.2rem, 10vh, 6.8rem);
  }
}

/* Support final lock: right rail shows FAQ and human handling only. */
.content-grid[data-module="support"] .support-service-head,
.content-grid[data-module="support"] .support-advice-stack,
.content-grid[data-module="support"] .support-motion-stage,
.content-grid[data-module="support"] .support-answer-content {
  display: none;
}

.content-grid[data-module="support"] .support-service-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.72rem, 1vw, 0.95rem);
  min-height: 0;
  overflow: hidden;
}

.content-grid[data-module="support"] .support-guess-block {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  padding: clamp(0.9rem, 1.14vw, 1.08rem);
}

.content-grid[data-module="support"] .support-block-title strong {
  font-size: clamp(1.14rem, 1.4vw, 1.48rem);
}

.content-grid[data-module="support"] .support-guess-list {
  align-content: start;
  gap: clamp(0.58rem, 0.82vw, 0.72rem);
  min-height: 0;
  overflow: auto;
}

.content-grid[data-module="support"] .support-guess-list button {
  min-height: clamp(4.7rem, 8.5vh, 6.1rem);
  padding: clamp(0.84rem, 1.06vw, 1rem);
}

.content-grid[data-module="support"] .support-guess-list strong {
  font-size: clamp(0.96rem, 1.12vw, 1.12rem);
}

.content-grid[data-module="support"] .support-guess-list span {
  font-size: clamp(0.8rem, 0.9vw, 0.94rem);
}

.content-grid[data-module="support"] .support-human-fallback {
  align-self: stretch;
  padding: clamp(0.78rem, 1.02vw, 0.96rem);
}

@media (max-width: 1180px) {
  .content-grid[data-module="support"] .support-service-panel {
    grid-template-rows: auto auto;
    overflow: visible;
  }
}

/* Tuner control rail final lock: keep only the three essential control blocks. */
.content-grid[data-module="tuner"] .tuner-permission-diagnostics {
  display: none;
}

.content-grid[data-module="tuner"] .tuner-side-panel {
  grid-template-rows: minmax(0, 1fr);
  padding: clamp(0.42rem, 0.7vw, 0.62rem);
}

.content-grid[data-module="tuner"] .tuner-control-shell {
  display: grid;
  min-height: 0;
}

.content-grid[data-module="tuner"] .tuner-control-deck {
  grid-template-rows: minmax(11.2rem, 1.22fr) minmax(6.8rem, 0.74fr) minmax(6.8rem, 0.74fr);
  height: 100%;
}

.content-grid[data-module="tuner"] .tuner-auto-listening-card,
.content-grid[data-module="tuner"] .tuner-control-group {
  min-height: 0;
}

.content-grid[data-module="tuner"] .tuner-control-group > div {
  gap: clamp(0.34rem, 0.52vw, 0.46rem);
}

.content-grid[data-module="tuner"] .tuner-string-group button,
.content-grid[data-module="tuner"] .tuner-a4-group button {
  min-height: clamp(2.65rem, 5.1vh, 3.28rem);
}

@media (max-width: 1180px) {
  .content-grid[data-module="tuner"] .tuner-control-deck {
    grid-template-rows: auto auto auto;
  }
}

/* Support breakpoint release: keep topic cards from being vertically compressed. */
@media (max-width: 1180px) {
  html[data-active-module] .content-grid[data-module="support"] {
    grid-template-rows: auto;
    grid-auto-rows: auto;
    align-content: start;
    align-items: start;
    overflow: auto;
  }

  .content-grid[data-module="support"] > .support-two-panel {
    align-self: start;
    align-content: start;
    grid-template-rows: auto auto;
    height: auto;
    overflow: visible;
  }

  .content-grid[data-module="support"] .support-entry-panel {
    align-self: start;
    align-content: start;
    grid-template-rows: auto auto;
    height: auto;
    overflow: visible;
  }

  .content-grid[data-module="support"] .support-board-grid {
    align-content: start;
    grid-auto-rows: auto;
    height: auto;
    overflow: visible;
  }

  .content-grid[data-module="support"] .support-board-card {
    height: auto;
    min-height: clamp(5.2rem, 10vh, 6.8rem);
  }

  .content-grid[data-module="support"] .support-service-panel {
    align-self: start;
    height: auto;
    overflow: visible;
  }
}

/* Support human handoff: one-line prompt with clear horizontal actions. */
.content-grid[data-module="support"] .support-human-fallback {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: clamp(0.42rem, 0.62vw, 0.58rem);
  align-items: stretch;
  padding: clamp(0.66rem, 0.92vw, 0.84rem);
}

.content-grid[data-module="support"] .support-human-copy {
  grid-column: 1 / -1;
  display: block;
}

.content-grid[data-module="support"] .support-human-copy strong {
  display: block;
  font-size: clamp(0.92rem, 1vw, 1.05rem);
  line-height: 1.18;
  white-space: nowrap;
}

.content-grid[data-module="support"] .support-human-dialog {
  grid-column: 1;
  align-self: stretch;
}

.content-grid[data-module="support"] .support-human-dialog > span {
  display: none;
}

.content-grid[data-module="support"] .support-human-dialog textarea,
.content-grid[data-module="support"] .support-human-dialog-compact textarea {
  min-height: clamp(3rem, 5.8vh, 3.72rem);
  max-height: 5rem;
  padding: 0.72rem 0.82rem;
  font-size: clamp(0.82rem, 0.9vw, 0.92rem);
}

.content-grid[data-module="support"] .support-upload-plus {
  grid-column: 2;
  grid-row: 2;
  width: clamp(3.1rem, 4.6vw, 3.65rem);
  min-height: clamp(3rem, 5.8vh, 3.72rem);
}

.content-grid[data-module="support"] .support-human-fallback .glass-button,
.content-grid[data-module="support"] .support-human-fallback .support-secondary-action {
  grid-column: 3;
  grid-row: 2;
  width: clamp(9.2rem, 13.5vw, 11.8rem);
  min-height: clamp(3rem, 5.8vh, 3.72rem);
  padding: 0.64rem 1rem;
  line-height: 1.18;
  white-space: normal;
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] .support-human-fallback {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .content-grid[data-module="support"] .support-human-copy strong {
    white-space: normal;
  }

  .content-grid[data-module="support"] .support-human-fallback .glass-button,
  .content-grid[data-module="support"] .support-human-fallback .support-secondary-action {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Membership compact pricing: give more vertical room to the comparison table. */
html[data-active-module] .content-grid[data-module="membership"] {
  grid-template-rows: minmax(0, 1fr);
}

.content-grid[data-module="membership"] > .membership-one-screen {
  grid-template-rows: clamp(8.1rem, 15.2vh, 9.8rem) minmax(0, 1fr);
  gap: clamp(0.42rem, 0.68vw, 0.62rem);
  padding: clamp(0.66rem, 0.9vw, 0.86rem);
}

.content-grid[data-module="membership"] .membership-plan-grid {
  gap: clamp(0.5rem, 0.72vw, 0.72rem);
}

.content-grid[data-module="membership"] .membership-plan-card {
  grid-template-columns: minmax(0, 1fr) minmax(6.2rem, auto);
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 0;
  padding: clamp(0.68rem, 0.9vw, 0.84rem) clamp(0.82rem, 1.08vw, 1rem);
}

.content-grid[data-module="membership"] .membership-plan-head {
  grid-column: 1;
  grid-row: 1;
  align-content: start;
  gap: clamp(0.28rem, 0.42vw, 0.4rem);
}

.content-grid[data-module="membership"] .membership-plan-meta {
  gap: 0.36rem;
}

.content-grid[data-module="membership"] .membership-plan-badge {
  min-height: 1.1rem;
  padding: 0.12rem 0.5rem;
  font-size: clamp(0.58rem, 0.66vw, 0.72rem);
  line-height: 1;
}

.content-grid[data-module="membership"] .membership-plan-note {
  font-size: clamp(0.56rem, 0.62vw, 0.68rem);
  line-height: 1.1;
}

.content-grid[data-module="membership"] .membership-plan-card h4 {
  font-size: clamp(1.02rem, 1.25vw, 1.32rem);
  line-height: 1.05;
}

.content-grid[data-module="membership"] .membership-plan-card button {
  grid-column: 1;
  grid-row: 2;
  width: min(100%, clamp(6.9rem, 9vw, 8.25rem));
  min-height: clamp(2.05rem, 3.2vh, 2.45rem);
  padding: 0.42rem 0.9rem;
  font-size: clamp(0.82rem, 0.94vw, 1rem);
}

.content-grid[data-module="membership"] .membership-price {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-content: flex-end;
  min-width: 6.2rem;
}

.content-grid[data-module="membership"] .membership-price small {
  font-size: clamp(0.62rem, 0.72vw, 0.82rem);
}

.content-grid[data-module="membership"] .membership-price strong {
  font-size: clamp(2.12rem, 3.35vw, 3.45rem);
  line-height: 0.92;
}

.content-grid[data-module="membership"] .membership-price em {
  font-size: clamp(0.58rem, 0.68vw, 0.78rem);
}

.content-grid[data-module="membership"] .membership-original-price {
  margin-top: 0.08rem;
  font-size: clamp(0.54rem, 0.62vw, 0.7rem);
}

.content-grid[data-module="membership"] .membership-comparison {
  grid-auto-rows: minmax(clamp(2.15rem, 3.65vh, 3rem), 1fr);
}

.content-grid[data-module="membership"] .membership-comparison-row > * {
  min-height: clamp(2.15rem, 3.65vh, 3rem);
}

@media (max-width: 900px) {
  .content-grid[data-module="membership"] > .membership-one-screen {
    grid-template-rows: auto auto;
  }

  .content-grid[data-module="membership"] .membership-plan-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .content-grid[data-module="membership"] .membership-price {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
  }
}

/* AI teacher practice card: keep one concise hint and give actions more room. */
.content-grid[data-module="teacher"] .teacher-demo-card {
  grid-template-rows: auto minmax(12rem, 1fr) auto auto;
  gap: clamp(0.56rem, 0.78vw, 0.76rem);
}

.content-grid[data-module="teacher"] .teacher-demo-copy {
  display: block;
}

.content-grid[data-module="teacher"] .teacher-demo-copy p {
  display: block;
  min-height: 0;
  padding: clamp(0.52rem, 0.72vw, 0.66rem) clamp(0.68rem, 0.9vw, 0.86rem);
  overflow: hidden;
  font-size: clamp(0.78rem, 0.88vw, 0.92rem);
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-grid[data-module="teacher"] .teacher-demo-copy b {
  margin-right: 0.5rem;
}

.content-grid[data-module="teacher"] .teacher-demo-actions {
  gap: clamp(0.72rem, 1vw, 1rem);
}

.content-grid[data-module="teacher"] .teacher-demo-actions .glass-button {
  min-height: clamp(2.9rem, 5.2vh, 3.55rem);
  font-size: clamp(0.98rem, 1.08vw, 1.14rem);
  font-weight: 820;
}

@media (max-width: 720px) {
  .content-grid[data-module="teacher"] .teacher-demo-copy p {
    white-space: normal;
  }

  .content-grid[data-module="teacher"] .teacher-demo-actions {
    grid-template-columns: 1fr;
  }
}

/* Metronome layout release: keep the stage compact and prevent settings from being clipped. */
html[data-active-module] .content-grid[data-module="metronome"] {
  grid-template-rows: auto;
  grid-auto-rows: auto;
  align-content: start;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(0.52rem, 0.9vw, 0.82rem);
  scrollbar-gutter: stable;
}

.content-grid[data-module="metronome"] > .violin-metronome-page {
  grid-column: 1 / -1;
  align-self: start;
  min-height: 0;
}

.content-grid[data-module="metronome"] .violin-metronome-page {
  grid-template-rows: auto auto auto auto;
  align-content: start;
  height: auto;
  max-height: none;
  overflow: visible;
  gap: clamp(0.42rem, 0.62vw, 0.62rem);
  padding: clamp(0.66rem, 0.92vw, 0.88rem);
}

.content-grid[data-module="metronome"] .metronome-header {
  min-height: 0;
  padding: clamp(0.44rem, 0.62vw, 0.58rem) clamp(0.68rem, 0.92vw, 0.86rem);
}

.content-grid[data-module="metronome"] .metronome-command-copy .eyebrow {
  font-size: clamp(0.6rem, 0.7vw, 0.72rem);
  line-height: 1;
}

.content-grid[data-module="metronome"] .metronome-command-copy h3 {
  font-size: clamp(1.14rem, 1.38vw, 1.42rem);
  line-height: 1.08;
}

.content-grid[data-module="metronome"] .metronome-subtitle-line {
  margin-top: 0.2rem;
  font-size: clamp(0.76rem, 0.86vw, 0.9rem);
  line-height: 1.14;
}

.content-grid[data-module="metronome"] .beat-performance-stage {
  grid-template-rows: auto auto minmax(7.2rem, 1fr) auto;
  align-items: stretch;
  min-height: clamp(15rem, 31vh, 20rem);
  height: auto;
  gap: clamp(0.34rem, 0.58vw, 0.56rem);
  padding: clamp(0.64rem, 0.92vw, 0.84rem) clamp(0.82rem, 1.18vw, 1.08rem);
  overflow: hidden;
}

.content-grid[data-module="metronome"] .metronome-stage-controls {
  grid-template-columns:
    minmax(10.8rem, 12rem)
    minmax(6.4rem, 7.4rem)
    minmax(10.8rem, 12rem);
  grid-auto-flow: column;
  align-items: stretch;
  width: min(100%, 34rem);
  min-height: 0;
  margin: 0 auto;
  padding: 0.34rem;
}

.content-grid[data-module="metronome"] .metronome-stage-controls .metronome-tap-button {
  grid-column: auto;
}

.content-grid[data-module="metronome"] .metronome-bpm-console,
.content-grid[data-module="metronome"] .metronome-top-actions {
  width: auto;
  min-width: 0;
}

.content-grid[data-module="metronome"] .metronome-bpm-console {
  grid-template-columns: 2.08rem minmax(4.8rem, 1fr) 2.08rem;
  min-width: 0;
}

.content-grid[data-module="metronome"] .metronome-bpm-console button,
.content-grid[data-module="metronome"] .metronome-tap-top,
.content-grid[data-module="metronome"] .metronome-top-actions button {
  min-height: clamp(2.55rem, 4.2vh, 3rem);
}

.content-grid[data-module="metronome"] .metronome-bpm-console strong {
  font-size: clamp(1.95rem, 2.85vw, 2.55rem);
}

.content-grid[data-module="metronome"] .metronome-top-actions {
  grid-template-columns: minmax(5.7rem, 1fr) minmax(4.6rem, 0.78fr);
}

.content-grid[data-module="metronome"] .metronome-stage-status {
  flex-wrap: wrap;
  align-self: center;
  margin-top: 0;
}

.content-grid[data-module="metronome"] .metronome-stage-status span,
.content-grid[data-module="metronome"] .metronome-stage-status strong,
.content-grid[data-module="metronome"] .metronome-stage-status em {
  min-height: 1.55rem;
  padding: 0.24rem 0.54rem;
  font-size: clamp(0.68rem, 0.76vw, 0.8rem);
  line-height: 1;
}

.content-grid[data-module="metronome"] .beat-performance-stage .metronome-beat-lane {
  align-self: center;
  margin-top: 0;
  gap: clamp(0.56rem, 1.2vw, 1rem);
  max-width: min(92%, 48rem);
}

.content-grid[data-module="metronome"] .beat-performance-stage .metronome-big-beat {
  width: clamp(5.2rem, 8.8vw, 6.9rem);
}

.content-grid[data-module="metronome"] .beat-performance-stage.beats-6 .metronome-big-beat {
  width: clamp(4.15rem, 6.2vw, 5.2rem);
}

.content-grid[data-module="metronome"] .beat-performance-stage .metronome-big-beat strong {
  font-size: clamp(2.4rem, 4.25vw, 3.65rem);
}

.content-grid[data-module="metronome"] .beat-performance-stage.beats-6 .metronome-big-beat strong {
  font-size: clamp(1.92rem, 3.05vw, 2.75rem);
}

.content-grid[data-module="metronome"] .beat-performance-stage .metronome-subdivision-lane {
  width: min(58%, 34rem);
  min-height: 0.92rem;
  margin: 0 auto;
}

.content-grid[data-module="metronome"] .metronome-control-bar {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.content-grid[data-module="metronome"] .metronome-control-bar .metronome-control-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: auto;
  align-items: stretch;
  height: auto;
  overflow: visible;
  gap: clamp(0.48rem, 0.7vw, 0.68rem);
}

.content-grid[data-module="metronome"] .metronome-control-bar .metronome-control-card,
.content-grid[data-module="metronome"] .metronome-control-bar .metronome-control-card:last-child {
  grid-column: auto;
  height: auto;
  min-height: clamp(5.35rem, 8.4vh, 6.45rem);
  overflow: visible;
  padding: clamp(0.52rem, 0.72vw, 0.68rem);
  gap: clamp(0.34rem, 0.45vw, 0.45rem);
}

.content-grid[data-module="metronome"] .metronome-control-bar .metronome-segment-grid,
.content-grid[data-module="metronome"] .metronome-control-bar .metronome-sound-mini-panel,
.content-grid[data-module="metronome"] .metronome-control-bar .metronome-practice-mini-panel {
  height: auto;
  grid-auto-rows: minmax(2rem, auto);
  gap: clamp(0.28rem, 0.38vw, 0.4rem);
}

.content-grid[data-module="metronome"] .metronome-control-bar .metronome-segment-grid button,
.content-grid[data-module="metronome"] .metronome-control-bar .metronome-sound-mini-panel button,
.content-grid[data-module="metronome"] .metronome-control-bar .metronome-practice-mini-panel button {
  min-height: clamp(2.08rem, 3.3vh, 2.42rem);
  padding: 0.34rem 0.52rem;
}

.content-grid[data-module="metronome"] .metronome-control-bar .metronome-volume-line {
  min-height: clamp(3.3rem, 5.5vh, 4.2rem);
  height: auto;
}

.content-grid[data-module="metronome"] .metronome-footer-hint {
  display: none;
}

@media (max-width: 900px) {
  .content-grid[data-module="metronome"] .metronome-stage-controls,
  .content-grid[data-module="metronome"] .metronome-control-bar .metronome-control-strip {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="metronome"] .metronome-stage-controls .metronome-tap-button {
    grid-column: 1;
  }
}

/* Customer support ebony theme test. Remove data-customer-service-theme to fall back to legacy support styles. */
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] {
  --cs-bg: #0E1013;
  --cs-panel: #15181D;
  --cs-card: #1C2027;
  --cs-card-elevated: #242933;
  --cs-text-main: #F0E8DA;
  --cs-text-secondary: #B9AD9B;
  --cs-text-muted: #746F66;
  --cs-primary: #2F6F73;
  --cs-primary-hover: #3F7F83;
  --cs-primary-soft: rgba(47, 111, 115, 0.16);
  --cs-gold: #A98245;
  --cs-gold-soft: rgba(169, 130, 69, 0.18);
  --cs-wine: #7B2E3A;
  --cs-wine-soft: rgba(123, 46, 58, 0.18);
  --cs-border-soft: rgba(242, 235, 221, 0.08);
  --cs-border-medium: rgba(242, 235, 221, 0.14);
  --cs-shadow-soft: rgba(0, 0, 0, 0.34);
  --cs-text-on-primary: #F4EEE2;
  --cs-input-bg: #101318;
  --cs-focus-ring: rgba(47, 111, 115, 0.36);
  --cs-disabled-bg: rgba(28, 32, 39, 0.62);
  --cs-disabled-text: rgba(185, 173, 155, 0.52);
  --cs-warm-highlight: rgba(240, 232, 218, 0.035);
  --cs-card-shadow:
    0 1.1rem 2.6rem var(--cs-shadow-soft),
    inset 0 1px 0 var(--cs-border-soft);
  align-items: stretch;
  border-color: var(--cs-border-medium);
  background: var(--cs-bg);
  color: var(--cs-text-main);
  box-shadow: var(--cs-card-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-guess-block,
  .support-answer-content,
  .support-human-fallback
) {
  border-color: var(--cs-border-soft);
  background: var(--cs-panel);
  color: var(--cs-text-main);
  box-shadow: var(--cs-card-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-entry-panel,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-service-panel {
  border-radius: 0.92rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-service-panel {
  grid-template-rows: minmax(10rem, 1fr) auto auto;
  gap: clamp(0.7rem, 0.95vw, 0.9rem);
  background: var(--cs-panel);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(
  .support-entry-head,
  .support-block-title,
  .support-human-copy,
  .support-chat-head
) {
  color: var(--cs-text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .eyebrow,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-block-title span,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-dialog > span,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(.support-chat-message span, .support-chat-message time) {
  color: var(--cs-gold);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(
  .support-entry-head h3,
  .support-block-title strong,
  .support-answer-content strong,
  .support-human-copy strong,
  .support-chat-head strong
) {
  color: var(--cs-text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(
  .support-entry-head p:not(.eyebrow),
  .support-answer-content p,
  .support-chat-head p
) {
  color: var(--cs-text-secondary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card {
  border-color: var(--cs-border-soft);
  background: var(--cs-card);
  color: var(--cs-text-main);
  box-shadow: var(--cs-card-shadow);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card::before {
  background: var(--cs-warm-highlight);
  opacity: 1;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card span {
  border-color: var(--cs-border-soft);
  background: var(--cs-gold-soft);
  color: var(--cs-gold);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card strong {
  color: var(--cs-text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card small {
  color: var(--cs-text-secondary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card b {
  color: var(--cs-primary-hover);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card.is-active {
  transform: translateY(-1px);
  border-color: var(--cs-gold);
  background: var(--cs-card-elevated);
  box-shadow:
    0 1.2rem 2.5rem var(--cs-shadow-soft),
    inset 0 0 0 1px var(--cs-gold-soft);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-block {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--cs-card);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-list {
  gap: clamp(0.52rem, 0.76vw, 0.68rem);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-list button {
  border: 1px solid var(--cs-border-soft);
  background: var(--cs-panel);
  color: var(--cs-text-main);
  box-shadow: inset 0 1px 0 var(--cs-border-soft);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-list button:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-list button.is-active {
  transform: translateY(-1px);
  border-color: var(--cs-primary);
  background: var(--cs-card-elevated);
  box-shadow:
    0 0.8rem 1.65rem var(--cs-shadow-soft),
    inset 0 0 0 1px var(--cs-primary-soft);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-list strong {
  color: var(--cs-text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-list span {
  color: var(--cs-text-secondary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-more-button {
  border-color: var(--cs-border-soft);
  background: var(--cs-panel);
  color: var(--cs-text-secondary);
  box-shadow: none;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-more-button:hover {
  border-color: var(--cs-gold);
  background: var(--cs-card-elevated);
  color: var(--cs-text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-advice-stack {
  display: grid;
  min-height: 0;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-answer-content {
  display: grid;
  gap: 0.58rem;
  min-height: 0;
  overflow: auto;
  padding: clamp(0.78rem, 1vw, 0.95rem);
  border-radius: 0.82rem;
  background: var(--cs-card);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-answer-content.is-empty {
  border-color: var(--cs-border-soft);
  background: var(--cs-card);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-answer-content.is-solved {
  border-color: var(--cs-gold);
  background: var(--cs-gold-soft);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-answer-content.is-human {
  border-color: var(--cs-primary);
  background: var(--cs-card);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-step-list li {
  border-color: var(--cs-border-soft);
  background: var(--cs-panel);
  color: var(--cs-text-secondary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-step-list li::before {
  border-color: var(--cs-gold);
  background: var(--cs-gold-soft);
  color: var(--cs-gold);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-empty-tags span {
  border: 1px solid var(--cs-border-soft);
  background: var(--cs-gold-soft);
  color: var(--cs-gold);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-feedback-actions .glass-button,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback .glass-button {
  border-color: var(--cs-border-soft);
  background: var(--cs-card);
  color: var(--cs-text-secondary);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-feedback-actions .glass-button.primary,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-secondary-action {
  border-color: var(--cs-primary);
  background: var(--cs-primary);
  color: var(--cs-text-on-primary);
  box-shadow: 0 0.82rem 1.7rem var(--cs-shadow-soft);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-feedback-actions .glass-button:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback .glass-button:hover {
  border-color: var(--cs-primary-hover);
  background: var(--cs-card-elevated);
  color: var(--cs-text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-feedback-actions .glass-button.primary:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-secondary-action:hover {
  border-color: var(--cs-primary-hover);
  background: var(--cs-primary-hover);
  color: var(--cs-text-on-primary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback .support-secondary-action {
  border-color: var(--cs-primary);
  background: var(--cs-primary);
  color: var(--cs-text-on-primary);
  box-shadow: 0 0.82rem 1.7rem var(--cs-shadow-soft);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback .support-secondary-action:hover {
  border-color: var(--cs-primary-hover);
  background: var(--cs-primary-hover);
  color: var(--cs-text-on-primary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8.8rem, 0.32fr);
  grid-template-areas:
    "copy copy"
    "input submit"
    "uploads submit"
    "status status";
  gap: clamp(0.52rem, 0.76vw, 0.68rem);
  align-self: stretch;
  align-items: stretch;
  padding: clamp(0.78rem, 1vw, 0.96rem);
  background: var(--cs-card);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-copy {
  grid-area: copy;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-dialog {
  grid-area: input;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-dialog textarea,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-dialog-compact textarea {
  min-height: clamp(3.4rem, 6.2vh, 4rem);
  max-height: 6rem;
  border-color: var(--cs-border-soft);
  background: var(--cs-input-bg);
  color: var(--cs-text-main);
  caret-color: var(--cs-gold);
  box-shadow: inset 0 1px 0 var(--cs-border-soft);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-dialog textarea::placeholder {
  color: var(--cs-text-muted);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-dialog textarea:focus {
  outline: 2px solid var(--cs-focus-ring);
  outline-offset: 2px;
  border-color: var(--cs-primary);
  background: var(--cs-panel);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-plus {
  display: none;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-grid {
  grid-area: uploads;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-entry {
  position: relative;
  display: grid;
  min-height: 3.08rem;
  align-content: center;
  gap: 0.08rem;
  overflow: hidden;
  padding: 0.46rem 0.5rem;
  border: 1px solid var(--cs-border-soft);
  border-radius: 0.62rem;
  background: var(--cs-panel);
  color: var(--cs-text-main);
  box-shadow: inset 0 1px 0 var(--cs-border-soft);
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-entry input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-entry span {
  color: var(--cs-gold);
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1.1;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-entry small {
  overflow: hidden;
  color: var(--cs-text-muted);
  font-size: 0.62rem;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-entry:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-entry:focus-within {
  transform: translateY(-1px);
  border-color: var(--cs-gold);
  background: var(--cs-card-elevated);
  box-shadow:
    0 0.72rem 1.45rem var(--cs-shadow-soft),
    inset 0 0 0 1px var(--cs-gold-soft);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-secondary-action {
  grid-area: submit;
  align-self: stretch;
  width: 100%;
  min-height: 100%;
  border-color: var(--cs-primary);
  border-radius: 0.68rem;
  background: var(--cs-primary);
  color: var(--cs-text-on-primary);
  box-shadow: 0 0.82rem 1.7rem var(--cs-shadow-soft);
  font-size: clamp(0.82rem, 0.9vw, 0.94rem);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] button.support-secondary-action {
  border-color: var(--cs-primary);
  background: var(--cs-primary);
  color: var(--cs-text-on-primary);
  box-shadow: 0 0.82rem 1.7rem var(--cs-shadow-soft);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] button.support-secondary-action:hover {
  border-color: var(--cs-primary-hover);
  background: var(--cs-primary-hover);
  color: var(--cs-text-on-primary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-secondary-action:active,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card:active,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-list button:active,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-entry:active {
  transform: translateY(0);
  box-shadow: inset 0 0.2rem 0.7rem var(--cs-shadow-soft);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(button:disabled, .support-secondary-action.is-loading) {
  border-color: var(--cs-border-soft);
  background: var(--cs-disabled-bg);
  color: var(--cs-disabled-text);
  box-shadow: inset 0 1px 0 var(--cs-border-soft);
  opacity: 1;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-secondary-action.is-loading::before {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  margin-right: 0.42rem;
  border: 2px solid var(--cs-border-medium);
  border-top-color: var(--cs-gold);
  border-radius: 50%;
  content: "";
  vertical-align: -0.12rem;
  animation: supportEbonySpin 820ms linear infinite;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-status {
  grid-area: status;
  margin: 0;
  padding: 0.5rem 0.58rem;
  border: 1px solid var(--cs-border-soft);
  border-radius: 0.58rem;
  background: var(--cs-gold-soft);
  color: var(--cs-gold);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-status.is-error {
  border-color: var(--cs-wine);
  background: var(--cs-wine-soft);
  color: var(--cs-text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-status.is-loading {
  border-color: var(--cs-primary);
  background: var(--cs-primary-soft);
  color: var(--cs-text-secondary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-chat-card {
  border-color: var(--cs-border-soft);
  background: var(--cs-card);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-chat-head {
  border-bottom-color: var(--cs-border-soft);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-chat-head > span {
  border-color: var(--cs-primary);
  background: var(--cs-primary-soft);
  color: var(--cs-text-secondary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-chat-message p {
  border-color: var(--cs-border-soft);
  background: var(--cs-panel);
  color: var(--cs-text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-chat-message.is-user p {
  border-color: var(--cs-primary);
  background: var(--cs-primary);
  color: var(--cs-text-on-primary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-chat-message.is-agent p {
  border-color: var(--cs-border-medium);
  background: var(--cs-card-elevated);
  color: var(--cs-text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-chat-message.is-system p {
  border-color: var(--cs-gold);
  background: var(--cs-gold-soft);
  color: var(--cs-text-secondary);
}

@keyframes supportEbonySpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1180px) {
  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-service-panel {
    grid-template-rows: auto auto auto;
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] {
    gap: 0.72rem;
    padding: 0.68rem;
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "input"
      "uploads"
      "submit"
      "status";
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-secondary-action {
    min-height: 2.9rem;
  }
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback button.support-secondary-action.is-loading,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback button.support-secondary-action:disabled,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback button.support-secondary-action[aria-busy="true"] {
  border-color: var(--cs-border-soft) !important;
  background: var(--cs-disabled-bg) !important;
  background-color: var(--cs-disabled-bg) !important;
  background-image: none !important;
  color: var(--cs-disabled-text) !important;
  box-shadow: inset 0 1px 0 var(--cs-border-soft) !important;
  opacity: 1;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] button.support-secondary-action.is-loading,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] button.support-secondary-action:disabled,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] button.support-secondary-action[aria-busy="true"] {
  border-color: var(--cs-border-soft) !important;
  background: var(--cs-disabled-bg) !important;
  background-color: var(--cs-disabled-bg) !important;
  background-image: none !important;
  color: var(--cs-disabled-text) !important;
  box-shadow: inset 0 1px 0 var(--cs-border-soft) !important;
  opacity: 1;
}

/* Premium customer service workbench. Remove data-customer-service-theme="premium" to fall back to legacy support styles. */
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] {
  --cs-bg-main: #0B0D10;
  --cs-bg-deep: #0F1217;
  --cs-panel-solid: rgba(20, 24, 30, 0.82);
  --cs-panel-soft: rgba(28, 33, 40, 0.72);
  --cs-panel-elevated: rgba(36, 42, 51, 0.78);
  --cs-glass-clear: rgba(255, 255, 255, 0.06);
  --cs-glass-soft: rgba(255, 255, 255, 0.08);
  --cs-glass-strong: rgba(255, 255, 255, 0.12);
  --cs-glass-stroke: rgba(255, 255, 255, 0.10);
  --cs-glass-stroke-strong: rgba(255, 255, 255, 0.16);
  --cs-text-main: #F3EEE4;
  --cs-text-secondary: #B9B1A4;
  --cs-text-muted: #777B84;
  --cs-primary: #5C8E92;
  --cs-primary-deep: #476F73;
  --cs-primary-active: #3D6266;
  --cs-primary-soft: rgba(92, 142, 146, 0.18);
  --cs-champagne: #B08A57;
  --cs-champagne-soft: rgba(176, 138, 87, 0.18);
  --cs-wine: #6F3142;
  --cs-wine-soft: rgba(111, 49, 66, 0.18);
  --cs-silver: #89929C;
  --cs-silver-soft: rgba(137, 146, 156, 0.18);
  --cs-copper: #9B6848;
  --cs-copper-soft: rgba(155, 104, 72, 0.18);
  --cs-danger: #B94E4C;
  --cs-danger-soft: rgba(185, 78, 76, 0.18);
  --cs-success: #6B8773;
  --cs-success-soft: rgba(107, 135, 115, 0.18);
  --cs-border-soft: rgba(255, 255, 255, 0.08);
  --cs-border-medium: rgba(255, 255, 255, 0.14);
  --cs-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.22);
  --cs-shadow-medium: 0 16px 40px rgba(0, 0, 0, 0.28);
  --cs-shadow-glass: 0 12px 32px rgba(0, 0, 0, 0.26);
  --cs-text-on-primary: #F7F1E6;
  --cs-focus-ring: rgba(92, 142, 146, 0.38);
  --cs-disabled-bg: rgba(28, 33, 40, 0.52);
  --cs-disabled-text: rgba(185, 177, 164, 0.56);
  --cs-main-glass-bg:
    linear-gradient(180deg, var(--cs-glass-soft) 0%, rgba(255, 255, 255, 0.03) 100%),
    rgba(24, 28, 34, 0.70);
  --cs-panel-glass-bg:
    linear-gradient(180deg, var(--cs-glass-soft) 0%, rgba(255, 255, 255, 0.03) 100%),
    var(--cs-panel-solid);
  --cs-pseudo-glass-bg:
    linear-gradient(180deg, var(--cs-glass-clear), rgba(255, 255, 255, 0.02)),
    var(--cs-panel-soft);
  --cs-pseudo-elevated-bg:
    linear-gradient(180deg, var(--cs-glass-soft), rgba(255, 255, 255, 0.025)),
    var(--cs-panel-elevated);
  --cs-user-bubble-bg:
    linear-gradient(180deg, var(--cs-primary-deep), var(--cs-primary-active));
  --cs-agent-bubble-bg:
    linear-gradient(180deg, var(--cs-glass-soft), rgba(255, 255, 255, 0.025)),
    var(--cs-bg-deep);
  --cs-input-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(10, 13, 17, 0.76);
  --cs-active-shadow:
    inset 0 0 0 1px var(--cs-border-medium),
    var(--cs-shadow-soft);
  grid-template-areas: "sessions chat details";
  grid-template-columns: minmax(15.5rem, 0.74fr) minmax(26rem, 1.45fr) minmax(18rem, 0.86fr);
  gap: clamp(0.72rem, 1vw, 0.96rem);
  align-items: stretch;
  min-height: min(47rem, calc(100vh - 8.7rem));
  padding: clamp(0.72rem, 1vw, 0.96rem);
  border: 1px solid var(--cs-glass-stroke);
  border-radius: 1rem;
  background: var(--cs-bg-main);
  color: var(--cs-text-main);
  box-shadow: var(--cs-shadow-medium);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .premium-cs-glass {
  border: 1px solid var(--cs-glass-stroke);
  background: var(--cs-panel-glass-bg);
  box-shadow:
    inset 0 1px 0 var(--cs-glass-soft),
    var(--cs-shadow-glass);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(button, textarea, input) {
  font: inherit;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(button, textarea):focus-visible {
  outline: 2px solid var(--cs-focus-ring);
  outline-offset: 2px;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-entry-panel {
  grid-area: sessions;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.72rem;
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.74rem, 1vw, 0.94rem);
  border-radius: 0.86rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-workspace {
  grid-area: chat;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 0.72rem;
  min-width: 0;
  min-height: 0;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-service-panel {
  grid-area: details;
  display: grid;
  grid-template-rows: auto auto minmax(8rem, 0.95fr) minmax(8rem, 0.85fr) auto auto;
  gap: 0.72rem;
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.74rem, 1vw, 0.94rem);
  border-radius: 0.86rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-entry-head {
  display: grid;
  gap: 0.3rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .eyebrow {
  margin: 0;
  color: var(--cs-champagne);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(h3, p, strong, small, time, b, em) {
  letter-spacing: 0;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] h3 {
  margin: 0;
  color: var(--cs-text-main);
  font-size: clamp(1.08rem, 1.35vw, 1.32rem);
  font-weight: 780;
  line-height: 1.16;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] p {
  margin: 0;
  color: var(--cs-text-secondary);
  font-size: 0.82rem;
  line-height: 1.48;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-category-strip {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.1rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(.support-category-chip, .support-category-tag, .support-status-pill, .support-priority-pill) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max-content;
  border: 1px solid var(--cs-border-soft);
  border-radius: 999px;
  background: var(--cs-pseudo-glass-bg);
  color: var(--cs-text-secondary);
  font-size: 0.72rem;
  font-weight: 740;
  line-height: 1;
  white-space: nowrap;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-category-chip {
  min-height: 2.1rem;
  padding: 0.42rem 0.66rem;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-category-chip:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-category-chip.is-active {
  transform: translateY(-1px);
  border-color: currentColor;
  background: var(--cs-pseudo-elevated-bg);
  color: var(--cs-text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(.is-champagne, .support-category-tag.is-champagne) {
  border-color: var(--cs-champagne);
  background: var(--cs-champagne-soft);
  color: var(--cs-champagne);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(.is-primary, .support-category-tag.is-primary) {
  border-color: var(--cs-primary);
  background: var(--cs-primary-soft);
  color: var(--cs-primary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(.is-wine, .support-category-tag.is-wine) {
  border-color: var(--cs-wine);
  background: var(--cs-wine-soft);
  color: var(--cs-wine);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(.is-silver, .support-category-tag.is-silver) {
  border-color: var(--cs-silver);
  background: var(--cs-silver-soft);
  color: var(--cs-silver);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(.is-copper, .support-category-tag.is-copper) {
  border-color: var(--cs-copper);
  background: var(--cs-copper-soft);
  color: var(--cs-copper);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(.is-success, .support-category-tag.is-success) {
  border-color: var(--cs-success);
  background: var(--cs-success-soft);
  color: var(--cs-success);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-category-chip.is-active {
  background: var(--cs-bg-deep);
  color: var(--cs-text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-conversation-list {
  display: grid;
  align-content: start;
  gap: 0.56rem;
  min-height: 0;
  overflow: auto;
  padding-right: 0.1rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-conversation-item {
  position: relative;
  display: grid;
  grid-template-columns: 2.42rem minmax(0, 1fr) auto;
  gap: 0.56rem;
  align-items: start;
  min-width: 0;
  padding: 0.62rem;
  border: 1px solid var(--cs-border-soft);
  border-radius: 0.74rem;
  background: var(--cs-pseudo-glass-bg);
  color: var(--cs-text-main);
  box-shadow: inset 0 1px 0 var(--cs-glass-clear);
  cursor: pointer;
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-conversation-item:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-conversation-item.is-active {
  transform: translateY(-1px);
  border-color: var(--cs-primary);
  background: var(--cs-pseudo-elevated-bg);
  box-shadow: var(--cs-active-shadow);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-user-avatar {
  display: grid;
  width: 2.42rem;
  height: 2.42rem;
  place-items: center;
  border: 1px solid var(--cs-border-medium);
  border-radius: 50%;
  background: var(--cs-primary-soft);
  color: var(--cs-text-on-primary);
  font-size: 0.88rem;
  font-weight: 820;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-user-avatar.is-large {
  width: 3.1rem;
  height: 3.1rem;
  background: var(--cs-champagne-soft);
  color: var(--cs-champagne);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-conversation-main {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-conversation-row,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-conversation-meta {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-conversation-row {
  justify-content: space-between;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-conversation-row strong {
  overflow: hidden;
  color: var(--cs-text-main);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-conversation-row time {
  color: var(--cs-text-muted);
  font-size: 0.68rem;
  white-space: nowrap;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-conversation-last {
  overflow: hidden;
  color: var(--cs-text-secondary);
  font-size: 0.75rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-category-tag,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-status-pill,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-priority-pill {
  min-height: 1.36rem;
  padding: 0.26rem 0.42rem;
  font-size: 0.62rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-status-pill.is-pending {
  border-color: var(--cs-champagne);
  background: var(--cs-champagne-soft);
  color: var(--cs-champagne);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-status-pill.is-replied {
  border-color: var(--cs-primary);
  background: var(--cs-primary-soft);
  color: var(--cs-primary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-status-pill.is-human {
  border-color: var(--cs-copper);
  background: var(--cs-copper-soft);
  color: var(--cs-copper);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-status-pill.is-closed {
  border-color: var(--cs-success);
  background: var(--cs-success-soft);
  color: var(--cs-success);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-unread-badge {
  display: grid;
  width: 1.34rem;
  height: 1.34rem;
  place-items: center;
  border-radius: 50%;
  background: var(--cs-wine);
  color: var(--cs-text-on-primary);
  font-size: 0.68rem;
  font-weight: 820;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-toolbar {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.76rem, 1vw, 0.96rem);
  border-radius: 0.86rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  justify-content: flex-end;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-human-takeover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-action-grid button,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-quick-replies button,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-feedback-actions .glass-button {
  min-height: 2.16rem;
  padding: 0.44rem 0.7rem;
  border: 1px solid var(--cs-border-soft);
  border-radius: 0.64rem;
  background: var(--cs-pseudo-glass-bg);
  color: var(--cs-text-secondary);
  box-shadow: inset 0 1px 0 var(--cs-glass-clear);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-human-takeover {
  border-color: var(--cs-primary);
  background: var(--cs-primary-deep);
  color: var(--cs-text-on-primary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(.support-human-takeover, .support-action-grid button, .support-quick-replies button, .support-feedback-actions .glass-button):hover {
  transform: translateY(-1px);
  border-color: var(--cs-champagne);
  background: var(--cs-pseudo-elevated-bg);
  color: var(--cs-text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .premium-cs-thread {
  display: grid;
  align-content: start;
  gap: 0.74rem;
  min-height: 0;
  overflow: auto;
  padding: clamp(0.78rem, 1vw, 1rem);
  border: 1px solid var(--cs-border-soft);
  border-radius: 0.86rem;
  background: var(--cs-bg-deep);
  box-shadow: inset 0 1px 0 var(--cs-glass-clear), var(--cs-shadow-soft);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-message {
  display: grid;
  justify-items: start;
  max-width: min(88%, 34rem);
  gap: 0.24rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-message span,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-message time {
  color: var(--cs-text-muted);
  font-size: 0.66rem;
  line-height: 1;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-message p {
  margin: 0;
  padding: 0.62rem 0.76rem;
  border: 1px solid var(--cs-border-soft);
  border-radius: 0.76rem;
  background: var(--cs-agent-bubble-bg);
  color: var(--cs-text-main);
  box-shadow: inset 0 1px 0 var(--cs-glass-clear);
  font-size: 0.86rem;
  line-height: 1.55;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-message.is-user {
  justify-items: start;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-message.is-user p {
  border-color: var(--cs-primary);
  background-color: var(--cs-primary-deep);
  background: var(--cs-user-bubble-bg);
  color: var(--cs-text-on-primary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-message.is-agent {
  justify-self: end;
  justify-items: end;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-message.is-agent p {
  border-color: var(--cs-border-medium);
  background: var(--cs-agent-bubble-bg);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-message.is-suggestion {
  justify-self: center;
  max-width: min(92%, 36rem);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-message.is-suggestion span {
  color: var(--cs-champagne);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-message.is-suggestion p,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-message.is-system p {
  border-color: var(--cs-champagne);
  background: var(--cs-bg-deep);
  color: var(--cs-text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-quick-replies {
  display: flex;
  gap: 0.46rem;
  overflow-x: auto;
  padding-bottom: 0.1rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-quick-replies button {
  min-width: max-content;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-human-fallback {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.36fr);
  grid-template-areas:
    "input send"
    "uploads send"
    "status status";
  gap: 0.56rem;
  padding: clamp(0.72rem, 0.9vw, 0.88rem);
  border-radius: 0.86rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-human-dialog {
  display: grid;
  grid-area: input;
  gap: 0.28rem;
  min-width: 0;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-human-dialog span {
  color: var(--cs-champagne);
  font-size: 0.7rem;
  font-weight: 800;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-human-dialog textarea {
  width: 100%;
  min-height: 4rem;
  max-height: 7rem;
  resize: vertical;
  padding: 0.74rem 0.82rem;
  border: 1px solid var(--cs-border-soft);
  border-radius: 0.68rem;
  background: var(--cs-input-bg);
  color: var(--cs-text-main);
  caret-color: var(--cs-champagne);
  box-shadow: inset 0 1px 0 var(--cs-glass-clear);
  line-height: 1.45;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-human-dialog textarea::placeholder {
  color: var(--cs-text-muted);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-human-dialog textarea:focus {
  border-color: var(--cs-primary);
  background: var(--cs-bg-deep);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-upload-grid {
  display: grid;
  grid-area: uploads;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-upload-entry {
  position: relative;
  display: grid;
  min-height: 3rem;
  align-content: center;
  gap: 0.1rem;
  overflow: hidden;
  padding: 0.44rem 0.52rem;
  border: 1px solid var(--cs-border-soft);
  border-radius: 0.62rem;
  background: var(--cs-pseudo-glass-bg);
  color: var(--cs-text-main);
  box-shadow: inset 0 1px 0 var(--cs-glass-clear);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-upload-entry input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-upload-entry span {
  color: var(--cs-champagne);
  font-size: 0.72rem;
  font-weight: 820;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-upload-entry small {
  overflow: hidden;
  color: var(--cs-text-muted);
  font-size: 0.62rem;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-upload-entry:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-upload-entry:focus-within {
  transform: translateY(-1px);
  border-color: var(--cs-champagne);
  background: var(--cs-pseudo-elevated-bg);
  box-shadow: var(--cs-active-shadow);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-secondary-action {
  grid-area: send;
  min-height: 100%;
  border: 1px solid var(--cs-primary);
  border-radius: 0.68rem;
  background: var(--cs-primary-deep);
  color: var(--cs-text-on-primary);
  box-shadow: var(--cs-shadow-soft);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-secondary-action:hover {
  transform: translateY(-1px);
  border-color: var(--cs-primary);
  background: var(--cs-primary-active);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(.support-secondary-action, .support-conversation-item, .support-category-chip, .support-upload-entry, .support-quick-replies button, .support-action-grid button):active {
  transform: translateY(0);
  box-shadow: inset 0 0.2rem 0.7rem rgba(0, 0, 0, 0.22);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(button:disabled, .support-secondary-action.is-loading) {
  border-color: var(--cs-border-soft);
  background: var(--cs-disabled-bg);
  color: var(--cs-disabled-text);
  box-shadow: inset 0 1px 0 var(--cs-glass-clear);
  cursor: not-allowed;
  opacity: 1;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-secondary-action.is-loading::before {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  margin-right: 0.42rem;
  border: 2px solid var(--cs-border-medium);
  border-top-color: var(--cs-champagne);
  border-radius: 50%;
  content: "";
  vertical-align: -0.12rem;
  animation: supportEbonySpin 820ms linear infinite;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-human-status {
  grid-area: status;
  margin: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--cs-champagne);
  border-radius: 0.58rem;
  background: var(--cs-champagne-soft);
  color: var(--cs-text-main);
  font-size: 0.75rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-human-status.is-error {
  border-color: var(--cs-danger);
  background: var(--cs-wine);
  color: var(--cs-text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-human-status.is-loading {
  border-color: var(--cs-primary);
  background: var(--cs-primary-soft);
  color: var(--cs-text-secondary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(.support-customer-card, .support-order-card, .support-guess-block, .support-answer-content, .support-note-card, .support-action-grid) {
  border: 1px solid var(--cs-border-soft);
  border-radius: 0.74rem;
  background: var(--cs-pseudo-glass-bg);
  box-shadow: inset 0 1px 0 var(--cs-glass-clear);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(.support-customer-card, .support-order-card, .support-note-card) {
  display: grid;
  gap: 0.62rem;
  padding: 0.72rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-customer-head {
  display: flex;
  gap: 0.62rem;
  align-items: center;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-customer-head strong {
  display: block;
  color: var(--cs-text-main);
  font-size: 0.94rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-customer-head small {
  color: var(--cs-text-muted);
  font-size: 0.72rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-info-grid span {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.48rem;
  border: 1px solid var(--cs-border-soft);
  border-radius: 0.56rem;
  background: var(--cs-bg-deep);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-info-grid b {
  color: var(--cs-text-muted);
  font-size: 0.62rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-info-grid em {
  overflow: hidden;
  color: var(--cs-text-main);
  font-size: 0.76rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-block-title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-block-title strong {
  color: var(--cs-text-main);
  font-size: 0.86rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-block-title span {
  color: var(--cs-champagne);
  font-size: 0.68rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-order-card p,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-note-card p {
  color: var(--cs-text-secondary);
  font-size: 0.78rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-guess-block {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.56rem;
  min-height: 0;
  overflow: hidden;
  padding: 0.68rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-guess-list {
  display: grid;
  gap: 0.42rem;
  min-height: 0;
  overflow: auto;
  padding-right: 0.08rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-guess-list button {
  display: grid;
  gap: 0.2rem;
  padding: 0.52rem;
  border: 1px solid var(--cs-border-soft);
  border-radius: 0.58rem;
  background: var(--cs-bg-deep);
  color: var(--cs-text-main);
  cursor: pointer;
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-guess-list button:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-guess-list button.is-active {
  transform: translateY(-1px);
  border-color: var(--cs-champagne);
  background: var(--cs-pseudo-elevated-bg);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-guess-list strong {
  color: var(--cs-text-main);
  font-size: 0.78rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-guess-list span {
  color: var(--cs-text-muted);
  font-size: 0.68rem;
  line-height: 1.34;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-advice-stack {
  display: grid;
  min-height: 0;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-answer-content {
  display: grid;
  align-content: start;
  gap: 0.56rem;
  min-height: 0;
  overflow: auto;
  padding: 0.7rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-suggestion-label {
  justify-self: start;
  padding: 0.26rem 0.46rem;
  border: 1px solid var(--cs-champagne);
  border-radius: 999px;
  background: var(--cs-champagne-soft);
  color: var(--cs-champagne);
  font-size: 0.64rem;
  font-weight: 780;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-answer-content strong {
  color: var(--cs-text-main);
  font-size: 0.86rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-answer-content p {
  color: var(--cs-text-secondary);
  font-size: 0.78rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-answer-content.is-solved {
  border-color: var(--cs-success);
  background: var(--cs-success-soft);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-empty-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-empty-tags span {
  padding: 0.3rem 0.48rem;
  border: 1px solid var(--cs-border-soft);
  border-radius: 999px;
  background: var(--cs-champagne-soft);
  color: var(--cs-champagne);
  font-size: 0.66rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-feedback-actions .glass-button.primary {
  border-color: var(--cs-primary);
  background: var(--cs-primary);
  color: var(--cs-text-on-primary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
  padding: 0.62rem;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-action-grid button {
  min-width: 0;
  min-height: 2.24rem;
  padding-inline: 0.5rem;
  font-size: 0.72rem;
  white-space: normal;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] :is(
  .support-conversation-item,
  .support-category-chip,
  .support-category-tag,
  .support-status-pill,
  .support-priority-pill,
  .support-unread-badge,
  .support-human-takeover,
  .support-action-grid,
  .support-action-grid button,
  .support-quick-replies button,
  .support-feedback-actions .glass-button,
  .support-chat-message p,
  .support-customer-card,
  .support-order-card,
  .support-guess-block,
  .support-guess-list button,
  .support-answer-content,
  .support-note-card,
  .support-info-grid span,
  .support-upload-entry,
  .support-secondary-action,
  .support-human-status,
  .support-empty-tags span,
  .support-suggestion-label
) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"],
  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .premium-cs-glass {
    background: var(--cs-panel-solid);
  }
}

@media (max-width: 1180px) {
  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] {
    grid-template-areas:
      "sessions chat"
      "details chat";
    grid-template-columns: minmax(15rem, 0.8fr) minmax(24rem, 1.2fr);
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-service-panel {
    grid-template-rows: auto auto minmax(7rem, 1fr) auto;
  }
}

@media (max-width: 860px) {
  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] {
    grid-template-areas:
      "chat"
      "sessions"
      "details";
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    height: auto;
    overflow: visible;
    padding: 0.64rem;
    backdrop-filter: blur(10px) saturate(118%);
    -webkit-backdrop-filter: blur(10px) saturate(118%);
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .premium-cs-glass {
    backdrop-filter: blur(10px) saturate(118%);
    -webkit-backdrop-filter: blur(10px) saturate(118%);
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-entry-panel {
    max-height: 21rem;
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-service-panel {
    grid-template-rows: auto auto auto auto auto auto;
    overflow: visible;
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-workspace {
    min-height: 38rem;
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-human-fallback {
    position: sticky;
    z-index: 2;
    bottom: 0.6rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "input"
      "uploads"
      "send"
      "status";
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-secondary-action {
    min-height: 2.85rem;
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-quick-replies {
    scroll-snap-type: x proximity;
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-quick-replies button {
    scroll-snap-align: start;
  }
}

@media (max-width: 520px) {
  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-upload-grid,
  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-info-grid,
  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-action-grid {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .support-chat-message {
    max-width: 96%;
  }
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] button.support-secondary-action,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="premium"] .glass-button.support-secondary-action {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Customer support Apple-style restrained glass. This final layer neutralizes the prior black-gold glow test. */
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] {
  --bg-page: #060606;
  --bg-page-2: #050505;
  --bg-panel: rgba(16, 16, 15, 0.52);
  --bg-panel-hover: rgba(24, 23, 21, 0.68);
  --surface-1: var(--bg-panel);
  --surface-2: rgba(16, 16, 15, 0.48);
  --surface-3: rgba(26, 25, 22, 0.50);
  --surface-field: rgba(5, 5, 5, 0.38);
  --surface-action: rgba(34, 30, 24, 0.88);
  --surface-action-hover: rgba(40, 36, 29, 0.92);
  --surface-active: rgba(22, 21, 19, 0.64);
  --border-soft: rgba(255, 255, 255, 0.085);
  --border-soft-hover: rgba(255, 255, 255, 0.13);
  --border-warm: rgba(214, 190, 140, 0.18);
  --border-active: rgba(235, 215, 170, 0.48);
  --border-active-hover: rgba(245, 225, 180, 0.62);
  --border-error: rgba(141, 71, 72, 0.34);
  --text-main: #F2EEE7;
  --text-card-title: #EEE8DD;
  --text-secondary: #B9B4AA;
  --text-description: #AAA49A;
  --text-muted: #7F7A70;
  --gold-main: #CDB98A;
  --gold-soft: #A89162;
  --gold-border: rgba(226, 205, 160, 0.32);
  --gold-dim: rgba(205, 185, 138, 0.58);
  --gold-glow: rgba(205, 185, 138, 0.10);
  --wine-main: #8D4748;
  --wine-soft: rgba(141, 71, 72, 0.16);
  --success-soft: rgba(125, 130, 105, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.074);
  --glass-midlight: rgba(255, 255, 255, 0.028);
  --glass-highlight-hover: rgba(255, 255, 255, 0.088);
  --glass-midlight-hover: rgba(255, 255, 255, 0.038);
  --glass-lowlight: rgba(255, 255, 255, 0.014);
  --glass-lowlight-hover: rgba(255, 255, 255, 0.020);
  --inner-highlight: rgba(255, 255, 255, 0.10);
  --inner-highlight-strong: rgba(255, 255, 255, 0.13);
  --inner-lowlight: rgba(0, 0, 0, 0.42);
  --inner-lowlight-soft: rgba(0, 0, 0, 0.35);
  --shadow-panel: rgba(0, 0, 0, 0.38);
  --shadow-action: rgba(0, 0, 0, 0.42);
  --focus-ring: rgba(226, 205, 160, 0.28);
  --disabled-bg: rgba(18, 18, 17, 0.52);
  --disabled-text: rgba(185, 180, 170, 0.52);
  --ambient-warm: rgba(160, 115, 55, 0.06);
  --ambient-white: rgba(255, 255, 255, 0.018);
  --ambient-flow-opacity: 0.210;
  --ambient-flow-opacity-peak: 0.270;
  --ambient-shell-opacity: 0.170;
  --ambient-shell-opacity-peak: 0.220;
  --support-flow-art: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20900%20280'%3E%3Cg%20fill='none'%20stroke='%23CDB98A'%20stroke-linecap='round'%3E%3Cpath%20d='M-20%20235%20C160%20120%20260%20260%20430%20184%20S710%20112%20930%20194'%20stroke-opacity='.34'%20stroke-width='1.35'/%3E%3Cpath%20d='M-10%20214%20C190%20138%20250%20234%20438%20174%20S706%20132%20920%20160'%20stroke-opacity='.22'%20stroke-width='.9'/%3E%3Cpath%20d='M10%20250%20C180%20186%20300%20224%20460%20205%20S710%20170%20910%20214'%20stroke-opacity='.14'%20stroke-width='.8'/%3E%3Cpath%20d='M80%20278%20C150%20190%20190%20166%20260%20226%20C215%20246%20152%20250%2080%20278Z'%20stroke-opacity='.18'%20stroke-width='1.1'/%3E%3Ccircle%20cx='438'%20cy='184'%20r='2.8'%20fill='%23CDB98A'%20fill-opacity='.34'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --texture-line: rgba(255, 255, 255, 0);
  --texture-opacity: 0;
  --glass-blur: blur(22px) saturate(125%);
  --glass-blur-soft: blur(18px) saturate(120%);
  --cs-bg: var(--bg-page);
  --cs-panel: var(--surface-1);
  --cs-card: var(--surface-2);
  --cs-card-elevated: var(--surface-action-hover);
  --cs-text-main: var(--text-main);
  --cs-text-secondary: var(--text-secondary);
  --cs-text-muted: var(--text-muted);
  --cs-primary: var(--gold-main);
  --cs-primary-hover: var(--gold-main);
  --cs-primary-soft: var(--gold-glow);
  --cs-gold: var(--gold-main);
  --cs-gold-soft: var(--gold-glow);
  --cs-wine: var(--wine-main);
  --cs-wine-soft: var(--wine-soft);
  --cs-border-soft: var(--border-soft);
  --cs-border-medium: var(--border-warm);
  --cs-shadow-soft: var(--shadow-panel);
  --cs-text-on-primary: var(--text-main);
  --cs-input-bg: var(--surface-field);
  --cs-focus-ring: var(--focus-ring);
  --cs-disabled-bg: var(--disabled-bg);
  --cs-disabled-text: var(--disabled-text);
  --cs-warm-highlight: var(--gold-glow);
  --glass-card-bg:
    linear-gradient(180deg, var(--glass-highlight) 0%, var(--glass-midlight) 45%, var(--glass-lowlight) 100%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.018), transparent 28%, rgba(205, 185, 138, 0.020) 62%, transparent 100%),
    var(--surface-1);
  --glass-card-bg-hover:
    linear-gradient(180deg, var(--glass-highlight-hover) 0%, var(--glass-midlight-hover) 45%, var(--glass-lowlight-hover) 100%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.022), transparent 28%, rgba(205, 185, 138, 0.026) 62%, transparent 100%),
    var(--bg-panel-hover);
  --glass-card-bg-rich:
    linear-gradient(180deg, var(--glass-highlight) 0%, var(--glass-midlight) 45%, var(--glass-lowlight) 100%),
    linear-gradient(118deg, rgba(205, 185, 138, 0.030), transparent 34%, rgba(255, 255, 255, 0.016) 66%, transparent 100%),
    var(--surface-1);
  --glass-card-bg-deep:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.014) 100%),
    var(--surface-field);
  --active-card-bg:
    linear-gradient(90deg, rgba(205, 185, 138, 0.072), rgba(255, 255, 255, 0.030) 45%, rgba(205, 185, 138, 0.052)),
    var(--surface-active);
  --primary-action-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.045) 42%, rgba(0, 0, 0, 0.10) 100%),
    linear-gradient(110deg, rgba(205, 185, 138, 0.26), rgba(95, 78, 48, 0.18)),
    var(--surface-action);
  --primary-action-bg-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.145) 0%, rgba(255, 255, 255, 0.055) 42%, rgba(0, 0, 0, 0.08) 100%),
    linear-gradient(110deg, rgba(205, 185, 138, 0.30), rgba(105, 84, 50, 0.22)),
    var(--surface-action-hover);
  --primary-action-sheen: linear-gradient(100deg, transparent 0%, rgba(235, 215, 170, 0.10) 42%, rgba(235, 215, 170, 0.18) 52%, transparent 70%);
  --quiet-sheen: linear-gradient(100deg, transparent 0%, rgba(235, 215, 170, 0.055) 50%, transparent 72%);
  --message-user-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.022)),
    rgba(30, 29, 26, 0.80);
  --control-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
  --control-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.30);
  --active-press-shadow:
    inset 0 0.2rem 0.72rem rgba(0, 0, 0, 0.36),
    inset 0 1px 0 var(--inner-highlight);
  --glass-shadow:
    inset 0 1px 0 var(--inner-highlight),
    inset 0 -1px 0 var(--inner-lowlight),
    0 20px 52px rgba(0, 0, 0, 0.40);
  --active-shadow:
    inset 0 1px 0 var(--inner-highlight-strong),
    0 0 0 1px rgba(205, 185, 138, 0.035),
    0 10px 32px var(--shadow-panel);
  --action-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40),
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(235, 215, 170, 0.06);
  --action-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38),
    0 18px 46px rgba(0, 0, 0, 0.48),
    0 0 24px rgba(205, 185, 138, 0.10);
  --action-shadow-press:
    inset 0 0.18rem 0.62rem rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.34);
  position: relative;
  isolation: isolate;
  border-color: var(--border-warm);
  background:
    radial-gradient(ellipse at 16% 82%, var(--ambient-warm), transparent 42%),
    radial-gradient(ellipse at 72% 18%, var(--ambient-white), transparent 35%),
    linear-gradient(180deg, var(--bg-page) 0%, var(--bg-page-2) 100%);
  color: var(--text-main);
  box-shadow:
    inset 0 1px 0 var(--inner-highlight),
    0 22px 56px var(--shadow-panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"]::before {
  position: absolute;
  inset: -1.5%;
  z-index: 0;
  background:
    var(--support-flow-art) left bottom / 82% 55% no-repeat,
    radial-gradient(ellipse at 14% 96%, rgba(190, 150, 92, 0.18), transparent 30%),
    conic-gradient(from 224deg at 15% 92%, transparent 0deg, rgba(205, 185, 138, 0.15) 14deg, transparent 33deg, rgba(255, 255, 255, 0.050) 46deg, transparent 72deg),
    linear-gradient(112deg, transparent 0%, transparent 42%, rgba(205, 185, 138, 0.080) 56%, rgba(255, 255, 255, 0.030) 61%, transparent 72%),
    linear-gradient(28deg, transparent 0%, rgba(110, 77, 40, 0.085) 16%, transparent 36%);
  content: "";
  filter: brightness(0.55) contrast(1.05) saturate(0.65);
  -webkit-mask-image:
    radial-gradient(ellipse at 15% 94%, rgba(0, 0, 0, 0.88), transparent 46%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.32) 46%, rgba(0, 0, 0, 0.74) 100%);
  mask-image:
    radial-gradient(ellipse at 15% 94%, rgba(0, 0, 0, 0.88), transparent 46%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.32) 46%, rgba(0, 0, 0, 0.74) 100%);
  mix-blend-mode: screen;
  opacity: var(--ambient-flow-opacity);
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 18% 82%;
  animation: supportTextureBreath 17s ease-in-out infinite;
  will-change: transform, opacity;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"]::after {
  display: none;
  content: none;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] > :is(.support-entry-panel, .support-service-panel) {
  position: relative;
  z-index: 1;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-advice-stack,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-answer-content {
  display: none;
}

html[data-active-module="support"] body {
  background:
    radial-gradient(ellipse at 16% 82%, rgba(160, 115, 55, 0.06), transparent 42%),
    radial-gradient(ellipse at 72% 18%, rgba(255, 255, 255, 0.018), transparent 35%),
    linear-gradient(180deg, #060606 0%, #050505 100%);
}

html[data-active-module="support"] .app-shell::before {
  background:
    var(--support-flow-art) left bottom / 74% 42% no-repeat,
    radial-gradient(ellipse at 10% 86%, rgba(160, 115, 55, 0.42), transparent 38%),
    conic-gradient(from 228deg at 12% 92%, transparent 0deg, rgba(205, 185, 138, 0.17) 16deg, transparent 38deg, rgba(255, 255, 255, 0.060) 54deg, transparent 82deg),
    linear-gradient(126deg, transparent 0%, transparent 50%, rgba(205, 185, 138, 0.070) 61%, rgba(255, 255, 255, 0.026) 66%, transparent 74%);
  filter: brightness(0.55) contrast(1.05) saturate(0.65);
  -webkit-mask-image: radial-gradient(ellipse at 15% 84%, rgba(0, 0, 0, 0.92), transparent 58%);
  mask-image: radial-gradient(ellipse at 15% 84%, rgba(0, 0, 0, 0.92), transparent 58%);
  mix-blend-mode: screen;
  opacity: var(--ambient-shell-opacity, 0.095);
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 12% 88%;
  animation: supportAmbientBreath 22s ease-in-out infinite;
  will-change: transform, opacity;
}

html[data-active-module="support"] .app-shell::after {
  background: none;
  mix-blend-mode: normal;
  opacity: 0;
}

@keyframes supportTextureBreath {
  0%,
  100% {
    opacity: var(--ambient-flow-opacity);
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    opacity: var(--ambient-flow-opacity-peak);
    transform: translate3d(0, -2px, 0) scale(1.008);
  }
}

@keyframes supportAmbientBreath {
  0%,
  100% {
    opacity: var(--ambient-shell-opacity, 0.095);
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    opacity: var(--ambient-shell-opacity-peak, 0.115);
    transform: translate3d(2px, -1px, 0) scale(1.006);
  }
}

html[data-active-module="support"] .topbar {
  background: linear-gradient(180deg, rgba(6, 6, 6, 0.94), rgba(8, 8, 7, 0.70), transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 18px 42px rgba(0, 0, 0, 0.32);
}

html[data-active-module="support"] .brand-mark {
  border-color: rgba(214, 190, 140, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(22, 22, 20, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 10px 24px rgba(0, 0, 0, 0.28);
  color: #CDB98A;
}

html[data-active-module="support"] .top-brand strong {
  color: #F2EEE7;
  text-shadow: none;
}

html[data-active-module="support"] .top-brand em {
  color: rgba(185, 180, 170, 0.78);
}

html[data-active-module="support"] .top-nav .nav-item {
  border-color: rgba(255, 255, 255, 0.075);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(18, 18, 17, 0.72);
  color: rgba(242, 238, 231, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 10px 24px rgba(0, 0, 0, 0.24);
}

html[data-active-module="support"] .top-nav .nav-item:hover {
  border-color: rgba(255, 255, 255, 0.105);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.024)),
    rgba(24, 24, 22, 0.76);
  color: #F2EEE7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.085),
    0 10px 26px rgba(0, 0, 0, 0.28);
}

html[data-active-module="support"] .top-nav .nav-item.is-active {
  border-color: rgba(226, 205, 160, 0.32);
  background:
    linear-gradient(90deg, rgba(205, 185, 138, 0.052), rgba(255, 255, 255, 0.024) 48%, rgba(205, 185, 138, 0.038)),
    rgba(15, 15, 14, 0.86);
  color: #F2EEE7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.085),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.30);
}

html[data-active-module="support"] .top-nav .nav-icon {
  color: #CDB98A;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .glass-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--glass-card-bg);
  color: var(--text-main);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(
  .support-board-card,
  .support-guess-list button,
  .support-more-button,
  .support-feedback-actions .glass-button,
  .support-human-fallback .glass-button,
  .support-upload-entry
) {
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .glass-card:hover {
  border-color: var(--border-soft-hover);
  background: var(--glass-card-bg-hover);
  box-shadow: var(--glass-shadow);
  transform: translateY(-1px);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-guess-block,
  .support-answer-content,
  .support-human-fallback
) {
  border-color: var(--border-soft);
  background: var(--glass-card-bg-rich);
  box-shadow: var(--glass-shadow);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-entry-panel::after,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-service-panel::after {
  position: absolute;
  right: -9%;
  bottom: -9%;
  left: -9%;
  height: 52%;
  background:
    var(--support-flow-art) left bottom / 86% 96% no-repeat,
    radial-gradient(ellipse at 18% 96%, rgba(205, 185, 138, 0.18), transparent 28%),
    conic-gradient(from 246deg at 18% 88%, transparent 0deg, rgba(205, 185, 138, 0.150) 12deg, transparent 28deg, rgba(255, 255, 255, 0.048) 43deg, transparent 66deg),
    linear-gradient(168deg, transparent 0%, rgba(205, 185, 138, 0.090) 44%, rgba(255, 255, 255, 0.030) 52%, transparent 72%);
  content: "";
  filter: brightness(0.84) contrast(1.06) saturate(0.76);
  mix-blend-mode: screen;
  opacity: 0.48;
  pointer-events: none;
  z-index: 0;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-entry-panel,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-service-panel {
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.085);
  background: var(--glass-card-bg-rich);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 20px 52px rgba(0, 0, 0, 0.40);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
)::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.088), transparent 31%),
    linear-gradient(104deg, transparent 0%, rgba(205, 185, 138, 0.052) 31%, rgba(255, 255, 255, 0.030) 43%, transparent 63%);
  content: "";
  opacity: 0.36;
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
) > * {
  position: relative;
  z-index: 1;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(
  .support-entry-head h3,
  .support-block-title strong,
  .support-answer-content strong,
  .support-human-copy strong,
  .support-chat-head strong
) {
  color: var(--text-main);
  text-shadow: none;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card strong {
  color: var(--text-card-title);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(
  .support-entry-head p:not(.eyebrow),
  .support-answer-content p,
  .support-chat-head p,
  .support-guess-list span
) {
  color: var(--text-description);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(
  .eyebrow,
  .support-human-dialog > span,
  .support-chat-message span,
  .support-chat-message time
) {
  color: var(--gold-dim);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card {
  border-color: rgba(255, 255, 255, 0.090);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.078) 0%, rgba(255, 255, 255, 0.030) 45%, rgba(255, 255, 255, 0.014) 100%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.018), transparent 32%, rgba(205, 185, 138, 0.020) 72%, transparent 100%),
    rgba(16, 16, 15, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38),
    0 14px 34px rgba(0, 0, 0, 0.32);
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card::before {
  background:
    linear-gradient(112deg, transparent 0%, rgba(205, 185, 138, 0.060) 34%, rgba(255, 255, 255, 0.025) 48%, transparent 70%);
  opacity: 0.36;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card span,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-block-title span,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-suggestion-label,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-empty-tags span {
  border: 1px solid var(--border-warm);
  background:
    linear-gradient(180deg, var(--glass-highlight), var(--glass-lowlight)),
    var(--surface-3);
  color: var(--gold-main);
  box-shadow: inset 0 1px 0 var(--inner-highlight);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card span {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.092), rgba(255, 255, 255, 0.026)),
    rgba(28, 26, 22, 0.64);
  border-color: rgba(226, 205, 160, 0.16);
  color: #CDB98A;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 8px 22px rgba(0, 0, 0, 0.28);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card small {
  color: var(--text-description);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card b {
  color: rgba(205, 185, 138, 0.70);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card.is-active {
  border-color: var(--border-active);
  background: var(--active-card-bg);
  box-shadow:
    inset 0 1px 0 var(--inner-highlight-strong),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(205, 185, 138, 0.035),
    0 16px 38px rgba(0, 0, 0, 0.38),
    0 0 24px rgba(205, 185, 138, 0.055);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card:hover::before,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-board-card.is-active::before {
  background: var(--quiet-sheen);
  opacity: 0.56;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-block {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.016)),
    linear-gradient(122deg, rgba(205, 185, 138, 0.030), transparent 34%, rgba(255, 255, 255, 0.016) 66%, transparent 100%),
    rgba(8, 8, 8, 0.28);
  border-color: rgba(255, 255, 255, 0.055);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-block::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0%, transparent 34%, rgba(205, 185, 138, 0.038) 45%, rgba(255, 255, 255, 0.018) 51%, transparent 64%, transparent 100%);
  content: "";
  opacity: 0.42;
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-block > * {
  position: relative;
  z-index: 1;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-block::after {
  position: absolute;
  right: -10%;
  bottom: -11%;
  left: -10%;
  height: 48%;
  background:
    var(--support-flow-art) center bottom / 118% 100% no-repeat,
    radial-gradient(ellipse at 50% 88%, rgba(205, 185, 138, 0.24), transparent 24%),
    conic-gradient(from 258deg at 42% 80%, transparent 0deg, rgba(205, 185, 138, 0.22) 13deg, transparent 28deg, rgba(255, 255, 255, 0.060) 43deg, transparent 65deg),
    linear-gradient(170deg, transparent 0%, rgba(205, 185, 138, 0.130) 46%, rgba(255, 255, 255, 0.036) 54%, transparent 72%);
  content: "";
  filter: brightness(0.88) saturate(0.74);
  mix-blend-mode: screen;
  opacity: 0.54;
  pointer-events: none;
  z-index: 0;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-list {
  position: relative;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-list::before {
  position: absolute;
  inset: 10% 7%;
  border: 1px solid rgba(255, 255, 255, 0.042);
  border-radius: 0.9rem;
  background:
    linear-gradient(118deg, transparent 0%, rgba(205, 185, 138, 0.040) 32%, transparent 56%),
    linear-gradient(62deg, transparent 0%, rgba(255, 255, 255, 0.020) 48%, transparent 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.036),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  content: "";
  opacity: 0.72;
  pointer-events: none;
  z-index: 0;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-list::after {
  position: absolute;
  inset: 21% 18%;
  border-top: 1px solid rgba(205, 185, 138, 0.070);
  border-bottom: 1px solid rgba(255, 255, 255, 0.032);
  content: "";
  opacity: 0.58;
  pointer-events: none;
  transform: skewY(-8deg);
  z-index: 0;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-list button,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-more-button,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-feedback-actions .glass-button,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback .glass-button,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-entry {
  border-color: var(--border-soft);
  background:
    linear-gradient(180deg, var(--glass-highlight), var(--glass-lowlight)),
    var(--surface-2);
  color: var(--text-main);
  box-shadow:
    inset 0 1px 0 var(--inner-highlight),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    var(--control-shadow);
  cursor: pointer;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-list button {
  position: relative;
  z-index: 1;
  border-color: rgba(255, 255, 255, 0.080);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(18, 18, 17, 0.62);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-list button:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-list button.is-active,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-more-button:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-feedback-actions .glass-button:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback .glass-button:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-entry:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-entry:focus-within {
  border-color: rgba(226, 205, 160, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.018)),
    rgba(20, 20, 18, 0.58);
  color: var(--text-main);
  box-shadow:
    inset 0 1px 0 var(--inner-highlight-strong),
    inset 0 -1px 0 rgba(0, 0, 0, 0.26),
    var(--control-shadow-hover),
    0 0 0 1px rgba(205, 185, 138, 0.035);
  transform: translateY(-1px);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-guess-list button.is-active {
  border-color: var(--border-active);
  background: var(--active-card-bg);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-answer-content {
  border-color: var(--border-soft);
  background:
    linear-gradient(180deg, var(--glass-highlight), var(--glass-lowlight)),
    var(--surface-2);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-answer-content.is-empty {
  background:
    linear-gradient(180deg, var(--glass-highlight), var(--glass-lowlight)),
    var(--surface-2);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-answer-content.is-solved {
  border-color: var(--border-warm);
  background:
    linear-gradient(180deg, var(--glass-highlight), var(--glass-lowlight)),
    var(--success-soft);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-answer-content.is-human,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-chat-card {
  border-color: var(--border-warm);
  background: var(--glass-card-bg);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-step-list li {
  border-color: var(--border-soft);
  background:
    linear-gradient(180deg, var(--glass-highlight), var(--glass-lowlight)),
    var(--surface-2);
  color: var(--text-description);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-step-list li::before {
  border-color: var(--border-warm);
  background: var(--surface-3);
  color: var(--gold-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback {
  border-color: rgba(226, 205, 160, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.074) 0%, rgba(255, 255, 255, 0.026) 45%, rgba(255, 255, 255, 0.014) 100%),
    linear-gradient(118deg, rgba(205, 185, 138, 0.050), transparent 38%, rgba(255, 255, 255, 0.018) 76%),
    rgba(16, 16, 15, 0.52);
  box-shadow:
    var(--glass-shadow),
    inset 0 0 0 1px rgba(205, 185, 138, 0.035);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-copy strong {
  color: var(--text-main);
  font-weight: 780;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-dialog textarea,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-dialog-compact textarea {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.040), rgba(255, 255, 255, 0.010)),
    rgba(5, 5, 5, 0.38);
  color: var(--text-main);
  caret-color: var(--gold-main);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 var(--inner-lowlight-soft),
    0 0 0 1px rgba(255, 255, 255, 0.024),
    0 10px 24px rgba(0, 0, 0, 0.26);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  transition:
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-dialog textarea::placeholder {
  color: var(--text-muted);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-dialog textarea:focus {
  border-color: rgba(226, 205, 160, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.014)),
    rgba(5, 5, 5, 0.42);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow:
    inset 0 1px 0 var(--inner-highlight-strong),
    inset 0 -1px 0 var(--inner-lowlight-soft),
    0 0 0 1px rgba(226, 205, 160, 0.10);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-entry span {
  color: var(--gold-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-entry small {
  color: var(--text-muted);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-upload-entry {
  border-color: rgba(255, 255, 255, 0.075);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
    rgba(18, 18, 17, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.085),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 10px 24px rgba(0, 0, 0, 0.24);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .primary-action,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-secondary-action,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] button.support-secondary-action,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback .primary-action,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback .support-secondary-action,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-feedback-actions .glass-button.primary {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(235, 215, 170, 0.48);
  background: var(--primary-action-bg);
  color: var(--text-main);
  box-shadow: var(--action-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  cursor: pointer;
  font-weight: 760;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34);
  transform: translateY(0);
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease,
    color 170ms ease;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .primary-action:not(.is-loading)::before,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-feedback-actions .glass-button.primary::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--primary-action-sheen);
  content: "";
  opacity: 0.62;
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .primary-action:not(.is-loading)::after,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-feedback-actions .glass-button.primary::after {
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 36%),
    linear-gradient(90deg, transparent, rgba(235, 215, 170, 0.10) 52%, transparent);
  content: "";
  opacity: 0.42;
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .primary-action:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-secondary-action:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] button.support-secondary-action:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback .primary-action:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback .support-secondary-action:hover,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-feedback-actions .glass-button.primary:hover {
  border-color: var(--border-active-hover);
  background: var(--primary-action-bg-hover);
  color: var(--text-main);
  box-shadow: var(--action-shadow-hover);
  transform: translateY(-1px);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .primary-action:hover::before,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-feedback-actions .glass-button.primary:hover::before {
  opacity: 0.70;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .primary-action:hover::after,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-feedback-actions .glass-button.primary:hover::after {
  opacity: 0.60;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(
  button,
  textarea,
  input
):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(
  .support-secondary-action,
  .support-board-card,
  .support-guess-list button,
  .support-upload-entry
):active {
  transform: translateY(0);
  box-shadow: var(--active-press-shadow);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(.primary-action, .support-secondary-action):active {
  transform: translateY(1px);
  box-shadow: var(--action-shadow-press);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] button.support-secondary-action.is-loading,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] button.support-secondary-action:disabled,
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] button.support-secondary-action[aria-busy="true"],
.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(button:disabled, .support-secondary-action.is-loading) {
  border-color: var(--border-soft) !important;
  background: var(--glass-card-bg-deep) !important;
  background-color: var(--disabled-bg) !important;
  color: var(--disabled-text) !important;
  box-shadow:
    inset 0 1px 0 var(--inner-highlight),
    inset 0 -1px 0 var(--inner-lowlight-soft) !important;
  opacity: 1;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-secondary-action.is-loading::before {
  border-color: var(--border-soft-hover);
  border-top-color: var(--gold-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-status {
  border-color: var(--border-warm);
  background:
    linear-gradient(180deg, var(--glass-highlight), var(--glass-lowlight)),
    var(--surface-3);
  color: var(--gold-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-status.is-error {
  border-color: var(--border-error);
  background:
    linear-gradient(180deg, var(--glass-highlight), var(--glass-lowlight)),
    var(--wine-soft);
  color: var(--text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-status.is-loading {
  border-color: var(--border-warm);
  background:
    linear-gradient(180deg, var(--glass-highlight), var(--glass-lowlight)),
    var(--surface-3);
  color: var(--text-secondary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-chat-head {
  border-bottom-color: var(--border-soft);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-chat-head > span {
  border-color: var(--border-warm);
  background: var(--surface-3);
  color: var(--gold-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-chat-message p {
  border-color: var(--border-soft);
  background: var(--glass-card-bg-deep);
  color: var(--text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-chat-message.is-user p {
  border-color: var(--border-active);
  background: var(--message-user-bg);
  color: var(--text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-chat-message.is-agent p {
  border-color: var(--border-soft-hover);
  background: var(--glass-card-bg);
  color: var(--text-main);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-chat-message.is-system p {
  border-color: var(--border-warm);
  background:
    linear-gradient(180deg, var(--glass-highlight), var(--glass-lowlight)),
    var(--surface-3);
  color: var(--text-secondary);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback button.support-secondary-action.primary-action {
  position: relative;
  overflow: hidden;
  border-color: rgba(235, 215, 170, 0.48);
  background: var(--primary-action-bg);
  color: var(--text-main);
  box-shadow: var(--action-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  cursor: pointer;
  font-weight: 780;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34);
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease,
    color 170ms ease;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback button.support-secondary-action.primary-action:not(.is-loading)::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--primary-action-sheen);
  content: "";
  opacity: 0.55;
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback button.support-secondary-action.primary-action:hover {
  border-color: rgba(245, 225, 180, 0.62);
  background: var(--primary-action-bg-hover);
  color: var(--text-main);
  box-shadow: var(--action-shadow-hover);
  transform: translateY(-1px);
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback button.support-secondary-action.primary-action:hover::before {
  opacity: 0.62;
}

.content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-human-fallback button.support-secondary-action.primary-action:active {
  box-shadow: var(--action-shadow-press);
  transform: translateY(1px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"],
  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .glass-card,
  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] :is(
    .support-board-card,
    .support-guess-list button,
    .support-more-button,
    .support-feedback-actions .glass-button,
    .support-human-fallback .glass-button,
    .support-upload-entry,
    textarea
  ) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] {
    --glass-blur: blur(14px) saturate(112%);
    --glass-blur-soft: blur(10px) saturate(108%);
    --ambient-flow-opacity: 0.125;
    --ambient-flow-opacity-peak: 0.160;
    --ambient-shell-opacity: 0.105;
    --ambient-shell-opacity-peak: 0.130;
    --texture-opacity: 0;
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"]::before {
    animation-duration: 24s;
  }

  html[data-active-module="support"] .app-shell::before {
    animation-duration: 28s;
  }

  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-entry-panel::after,
  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"] .support-service-panel::after {
    opacity: 0.34;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-grid[data-module="support"] > .support-two-panel[data-customer-service-theme="ebony"]::before {
    animation: none;
    opacity: 0.052;
    transform: none;
    will-change: auto;
  }

  html[data-active-module="support"] .app-shell::before {
    animation: none;
    opacity: 0.075;
    transform: none;
    will-change: auto;
  }
}

/* Customer support fixed reference implementation: real background layers + transparent glass. */
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] {
  --support-bg: #050505;
  --support-bg-deep: #030303;
  --glass-bg: rgba(5, 5, 4, 0.68);
  --glass-bg-strong: rgba(9, 9, 8, 0.72);
  --glass-border: rgba(255, 255, 255, 0.115);
  --glass-highlight: rgba(255, 255, 255, 0.14);
  --text-main: #F2EEE7;
  --text-card-title: #F2EEE7;
  --text-secondary: #B9B4AA;
  --text-description: #B9B4AA;
  --text-muted: #7F7A70;
  --gold-main: #CDB98A;
  --gold-soft: #A89162;
  --gold-border: rgba(226, 205, 160, 0.34);
  --gold-dim: rgba(205, 185, 138, 0.70);
  --gold-glow: rgba(205, 185, 138, 0.10);
  --support-reference-image: url("/player/assets/violin-master-real-alpha.png");
  --support-reference-panel-bg: rgba(6, 6, 5, 0.38);
  --support-reference-card-bg: rgba(3, 3, 3, 0.48);
  --support-reference-subcard-bg: rgba(4, 4, 3, 0.42);
  --wine-main: #8D4748;
  --wine-soft: rgba(141, 71, 72, 0.16);
  --border-soft: var(--glass-border);
  --border-soft-hover: rgba(255, 255, 255, 0.12);
  --border-warm: var(--gold-border);
  --border-active: rgba(226, 205, 160, 0.34);
  --border-active-hover: rgba(245, 225, 185, 0.68);
  --focus-ring: rgba(226, 205, 160, 0.28);
  --glass-blur: blur(24px) saturate(128%);
  --glass-blur-soft: blur(18px) saturate(118%);
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.080) 0%, rgba(255, 255, 255, 0.020) 24%, rgba(0, 0, 0, 0.22) 100%),
    linear-gradient(135deg, rgba(205, 185, 138, 0.018) 0%, transparent 34%, rgba(255, 255, 255, 0.008) 100%),
    var(--glass-bg);
  --glass-card-bg-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.096) 0%, rgba(255, 255, 255, 0.026) 24%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(135deg, rgba(205, 185, 138, 0.026) 0%, transparent 34%, rgba(255, 255, 255, 0.010) 100%),
    var(--glass-bg-strong);
  --glass-card-bg-rich: var(--glass-card-bg);
  --glass-card-bg-deep:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    rgba(5, 5, 5, 0.38);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.026),
    inset 0 -22px 38px rgba(0, 0, 0, 0.30),
    0 24px 62px rgba(0, 0, 0, 0.52);
  --primary-action-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.055) 45%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(105deg, rgba(205, 185, 138, 0.34), rgba(92, 72, 38, 0.20)),
    rgba(36, 31, 24, 0.88);
  --primary-action-bg-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.066) 45%, rgba(0, 0, 0, 0.10) 100%),
    linear-gradient(105deg, rgba(205, 185, 138, 0.38), rgba(102, 78, 38, 0.24)),
    rgba(40, 34, 25, 0.92);
  --action-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 18px 46px rgba(0, 0, 0, 0.46),
    0 0 22px rgba(205, 185, 138, 0.08);
  --action-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 20px 52px rgba(0, 0, 0, 0.50),
    0 0 26px rgba(205, 185, 138, 0.12);
  --action-shadow-press:
    inset 0 0.18rem 0.62rem rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.34);
  --active-press-shadow:
    inset 0 0.2rem 0.72rem rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  position: relative;
  display: block;
  grid-column: 1 / -1;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(0.8rem, 1.1vw, 1.1rem);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: clamp(1rem, 1.45vw, 1.34rem);
  background:
    radial-gradient(ellipse at 12% 76%, rgba(140, 95, 42, 0.050), transparent 42%),
    radial-gradient(ellipse at 72% 18%, rgba(255, 255, 255, 0.018), transparent 36%),
    linear-gradient(180deg, var(--support-bg) 0%, var(--support-bg-deep) 100%);
  color: var(--text-main);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.052),
    0 22px 56px rgba(0, 0, 0, 0.42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"]::before,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"]::after {
  display: none;
  content: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background:
    linear-gradient(90deg, rgba(3, 3, 3, 0.06) 0%, rgba(3, 3, 3, 0.30) 28%, rgba(3, 3, 3, 0.78) 68%, rgba(3, 3, 3, 0.94) 100%),
    radial-gradient(ellipse at 7% 52%, transparent 0%, rgba(0, 0, 0, 0.16) 42%, rgba(0, 0, 0, 0.74) 72%),
    url("/player/assets/violin-master-real-alpha.png") left center / auto 122% no-repeat;
  background-repeat: no-repeat;
  filter: brightness(0.58) contrast(1.16) saturate(0.82);
  mix-blend-mode: normal;
  opacity: 0.58;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: left center;
  will-change: transform, opacity;
  animation: supportBgBreath 20s ease-in-out infinite;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
  position: absolute;
  inset: 0;
  height: auto;
  background:
    radial-gradient(circle at 82% 4%, rgba(226, 178, 104, 0.42), transparent 25%),
    radial-gradient(ellipse at 24% 31%, rgba(205, 142, 55, 0.22), transparent 31%),
    linear-gradient(116deg, transparent 12%, rgba(214, 160, 76, 0.00) 20%, rgba(214, 160, 76, 0.30) 28%, rgba(255, 224, 162, 0.18) 31%, transparent 43%),
    linear-gradient(158deg, transparent 48%, rgba(166, 104, 39, 0.16) 61%, rgba(244, 199, 119, 0.34) 73%, transparent 85%),
    linear-gradient(14deg, transparent 54%, rgba(205, 185, 138, 0.16) 66%, transparent 77%);
  mix-blend-mode: screen;
  opacity: 0.72;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  animation: supportFlowBreath 24s ease-in-out infinite;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 6.15fr) minmax(22rem, 3.85fr);
  gap: clamp(1rem, 1.35vw, 1.35rem);
  min-height: 0;
  height: 100%;
}

@keyframes supportBgBreath {
  0% {
    opacity: 0.50;
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    opacity: 0.62;
    transform: translate3d(0, -2px, 0) scale(1.004);
  }

  100% {
    opacity: 0.50;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes supportFlowBreath {
  0% {
    opacity: 0.62;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0.78;
    transform: translate3d(3px, -1px, 0);
  }

  100% {
    opacity: 0.62;
    transform: translate3d(0, 0, 0);
  }
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .glass-card,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-board-card,
  .support-guess-block,
  .support-human-fallback,
  .support-guess-list button,
  .support-upload-entry
) {
  border: 1px solid var(--glass-border);
  background: var(--glass-card-bg);
  color: var(--text-main);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(24px) saturate(128%);
  -webkit-backdrop-filter: blur(24px) saturate(128%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
)::before,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-guess-block
)::after {
  display: none;
  content: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-guess-block,
  .support-guess-list
)::before,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-guess-list
)::after {
  display: none;
  content: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-entry-panel,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-service-panel {
  position: relative;
  z-index: 2;
  min-height: 0;
  overflow: hidden;
  padding: clamp(1.2rem, 1.7vw, 1.55rem);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.115);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.060) 0%, rgba(255, 255, 255, 0.014) 22%, rgba(0, 0, 0, 0.26) 100%),
    rgba(5, 5, 4, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.52),
    0 13px 32px rgba(0, 0, 0, 0.40);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active {
  border-color: rgba(226, 205, 160, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.078) 0%, rgba(255, 255, 255, 0.020) 24%, rgba(0, 0, 0, 0.20) 100%),
    rgba(9, 9, 8, 0.72);
  transform: translateY(-1px);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::before {
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 30%),
    linear-gradient(118deg, transparent 0%, rgba(205, 185, 138, 0.024) 48%, transparent 76%);
  content: "";
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card > * {
  position: relative;
  z-index: 1;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-block {
  border-color: rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052) 0%, rgba(255, 255, 255, 0.012) 24%, rgba(0, 0, 0, 0.26) 100%),
    rgba(4, 4, 3, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 16px 42px rgba(0, 0, 0, 0.38);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list {
  background: transparent;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-board-card span,
  .support-block-title span,
  .support-suggestion-label,
  .support-empty-tags span
) {
  border-color: var(--gold-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.020)),
    rgba(18, 18, 17, 0.58);
  color: var(--gold-main);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-head h3,
  .support-board-card strong,
  .support-block-title strong,
  .support-human-copy strong
) {
  color: var(--text-main);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-head p:not(.eyebrow),
  .support-board-card small,
  .support-guess-list span
) {
  color: var(--text-secondary);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .eyebrow,
  .support-board-card b,
  .support-human-dialog > span
) {
  color: var(--gold-dim);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog-compact textarea {
  border-color: rgba(255, 255, 255, 0.085);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.010)),
    rgba(3, 3, 3, 0.56);
  color: var(--text-main);
  caret-color: var(--gold-main);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38),
    0 10px 24px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry {
  border-color: rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.010)),
    rgba(5, 5, 4, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 10px 26px rgba(0, 0, 0, 0.30);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea:focus {
  border-color: var(--gold-border);
  outline: 2px solid rgba(226, 205, 160, 0.24);
  outline-offset: 2px;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
) {
  cursor: pointer;
  border: 1px solid rgba(240, 220, 175, 0.56);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.066) 45%, rgba(0, 0, 0, 0.16) 100%),
    linear-gradient(105deg, rgba(205, 185, 138, 0.36), rgba(82, 62, 32, 0.24)),
    rgba(26, 22, 17, 0.94);
  color: var(--text-main);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 18px 46px rgba(0, 0, 0, 0.46),
    0 0 22px rgba(205, 185, 138, 0.08);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
):hover {
  border-color: rgba(245, 225, 185, 0.68);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.066) 45%, rgba(0, 0, 0, 0.10) 100%),
    linear-gradient(105deg, rgba(205, 185, 138, 0.38), rgba(102, 78, 38, 0.24)),
    rgba(40, 34, 25, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 20px 52px rgba(0, 0, 0, 0.50),
    0 0 26px rgba(205, 185, 138, 0.12);
  transform: translateY(-1px);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
):active {
  transform: translateY(0);
}

html[data-active-module="support"] body {
  background:
    radial-gradient(ellipse at 12% 76%, rgba(140, 95, 42, 0.050), transparent 42%),
    radial-gradient(ellipse at 72% 18%, rgba(255, 255, 255, 0.018), transparent 36%),
    linear-gradient(180deg, #050505 0%, #030303 100%);
}

html[data-active-module="support"] body::before {
  display: none;
  content: none;
}

html[data-active-module="support"] .app-shell::before,
html[data-active-module="support"] .app-shell::after {
  background: none;
  opacity: 0;
  animation: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
) {
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.056) 0%, rgba(255, 255, 255, 0.012) 18%, rgba(0, 0, 0, 0.34) 100%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.052) 42%, rgba(205, 185, 138, 0.105)) border-box;
  --glass-border: transparent;
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    inset 0 0 0 1px rgba(255, 255, 255, 0.020),
    inset 0 -26px 48px rgba(0, 0, 0, 0.34),
    0 26px 68px rgba(0, 0, 0, 0.54);
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.068) 0%, rgba(255, 255, 255, 0.018) 18%, rgba(0, 0, 0, 0.30) 100%),
    linear-gradient(145deg, rgba(205, 185, 138, 0.014), transparent 32%),
    rgba(3, 3, 3, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    inset 0 0 0 1px rgba(255, 255, 255, 0.020),
    inset 0 -26px 48px rgba(0, 0, 0, 0.34),
    0 26px 68px rgba(0, 0, 0, 0.54);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card {
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.006) 18%, rgba(0, 0, 0, 0.38) 100%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.145), rgba(255, 255, 255, 0.040) 48%, rgba(205, 185, 138, 0.090)) border-box;
  --glass-border: transparent;
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.58),
    0 12px 28px rgba(0, 0, 0, 0.42);
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.040) 0%, rgba(255, 255, 255, 0.010) 18%, rgba(0, 0, 0, 0.34) 100%),
    rgba(3, 3, 3, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.58),
    0 12px 28px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px) saturate(116%);
  -webkit-backdrop-filter: blur(18px) saturate(116%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), transparent 18%),
    linear-gradient(105deg, transparent 0%, rgba(205, 185, 138, 0.018) 52%, transparent 72%);
  opacity: 0.42;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active {
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.044) 0%, rgba(255, 255, 255, 0.010) 18%, rgba(0, 0, 0, 0.34) 100%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(226, 205, 160, 0.18) 48%, rgba(205, 185, 138, 0.16)) border-box;
  --glass-border: transparent;
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.58),
    0 14px 32px rgba(0, 0, 0, 0.46);
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.054) 0%, rgba(255, 255, 255, 0.014) 18%, rgba(0, 0, 0, 0.30) 100%),
    rgba(5, 5, 4, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.58),
    0 14px 32px rgba(0, 0, 0, 0.46);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-block {
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.006) 24%, rgba(0, 0, 0, 0.40)) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) 44%, rgba(205, 185, 138, 0.075)) border-box;
  --glass-border: transparent;
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 14px 34px rgba(0, 0, 0, 0.42);
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.040), rgba(255, 255, 255, 0.008) 24%, rgba(0, 0, 0, 0.36)),
    rgba(3, 3, 3, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 14px 34px rgba(0, 0, 0, 0.42);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-upload-entry,
  .support-guess-list button
) {
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0.006)) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035) 46%, rgba(205, 185, 138, 0.060)) border-box;
  --glass-border: transparent;
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 9px 22px rgba(0, 0, 0, 0.34);
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.008)),
    rgba(3, 3, 3, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 9px 22px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px) saturate(112%);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::after {
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), rgba(205, 185, 138, 0.20), transparent);
  content: "";
  opacity: 0.46;
  pointer-events: none;
  z-index: 1;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
) {
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.044) 0%, rgba(255, 255, 255, 0.010) 18%, rgba(0, 0, 0, 0.26) 100%),
    rgba(6, 6, 5, 0.80);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.56),
    0 26px 68px rgba(0, 0, 0, 0.56);
  border-color: rgba(255, 255, 255, 0.10);
  background: var(--glass-card-bg);
  box-shadow: var(--glass-shadow);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card {
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.004) 18%, rgba(0, 0, 0, 0.26) 100%),
    rgba(3, 3, 3, 0.84);
  --glass-border: rgba(255, 255, 255, 0.088);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.62),
    0 12px 28px rgba(0, 0, 0, 0.44);
  border-color: rgba(255, 255, 255, 0.088);
  background: var(--glass-card-bg);
  box-shadow: var(--glass-shadow);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.050), transparent 18%),
    linear-gradient(105deg, transparent 0%, rgba(205, 185, 138, 0.012) 54%, transparent 74%);
  opacity: 0.34;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::after {
  right: 16%;
  left: 16%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), rgba(205, 185, 138, 0.13), transparent);
  opacity: 0.34;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active {
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.034) 0%, rgba(255, 255, 255, 0.008) 18%, rgba(0, 0, 0, 0.22) 100%),
    rgba(5, 5, 4, 0.86);
  --glass-border: rgba(226, 205, 160, 0.22);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.62),
    0 14px 32px rgba(0, 0, 0, 0.48);
  border-color: rgba(226, 205, 160, 0.22);
  background: var(--glass-card-bg);
  box-shadow: var(--glass-shadow);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-block {
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.004) 22%, rgba(0, 0, 0, 0.30)),
    rgba(4, 4, 3, 0.82);
  --glass-border: rgba(255, 255, 255, 0.080);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.60),
    0 14px 34px rgba(0, 0, 0, 0.44);
  border-color: rgba(255, 255, 255, 0.080);
  background: var(--glass-card-bg);
  box-shadow: var(--glass-shadow);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-upload-entry,
  .support-guess-list button
) {
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.004)),
    rgba(4, 4, 3, 0.72);
  --glass-border: rgba(255, 255, 255, 0.076);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 9px 22px rgba(0, 0, 0, 0.34);
  border-color: rgba(255, 255, 255, 0.076);
  background: var(--glass-card-bg);
  box-shadow: var(--glass-shadow);
}

@media (max-width: 1180px) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-content {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] {
    min-height: 100vh;
    padding: 0.72rem;
    border-radius: 0.86rem;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-content {
    gap: 0.82rem;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .glass-card,
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
    .support-entry-panel,
    .support-service-panel,
    .support-board-card,
    .support-guess-block,
    .support-human-fallback,
    .support-guess-list button,
    .support-upload-entry
  ) {
    backdrop-filter: blur(14px) saturate(112%);
    -webkit-backdrop-filter: blur(14px) saturate(112%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin,
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/* Customer support reference-background hook.
   Real image hook: replace /platform/assets/support-reference-bg.png with the provided image. */
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin {
  inset: -2.5%;
  background:
    linear-gradient(90deg, rgba(3, 3, 3, 0.00) 0%, rgba(3, 3, 3, 0.10) 42%, rgba(3, 3, 3, 0.38) 72%, rgba(3, 3, 3, 0.58) 100%),
    radial-gradient(ellipse at 58% 48%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 62%, rgba(0, 0, 0, 0.38) 100%),
    var(--support-reference-image) center center / cover no-repeat;
  filter: brightness(1.10) contrast(1.04) saturate(0.88);
  opacity: 0.98;
  transform-origin: center center;
  animation: supportReferenceImageBreath 19s ease-in-out infinite;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 7%, rgba(226, 178, 104, 0.32), transparent 24%),
    linear-gradient(118deg, transparent 13%, rgba(214, 160, 76, 0) 22%, rgba(214, 160, 76, 0.18) 31%, rgba(255, 224, 162, 0.10) 35%, transparent 49%),
    linear-gradient(153deg, transparent 47%, rgba(166, 104, 39, 0.10) 61%, rgba(244, 199, 119, 0.20) 74%, transparent 86%);
  mix-blend-mode: screen;
  opacity: 0.48;
  animation: supportReferenceFlowBreath 23s ease-in-out infinite;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
) {
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070) 0%, rgba(255, 255, 255, 0.020) 26%, rgba(0, 0, 0, 0.18) 100%),
    var(--support-reference-panel-bg);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 24px 62px rgba(0, 0, 0, 0.48);
  border-color: var(--glass-border);
  background: var(--glass-card-bg);
  box-shadow: var(--glass-shadow);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card {
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.050) 0%, rgba(255, 255, 255, 0.014) 28%, rgba(0, 0, 0, 0.18) 100%),
    var(--support-reference-card-bg);
  --glass-border: rgba(255, 255, 255, 0.105);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.52),
    0 12px 30px rgba(0, 0, 0, 0.38);
  border-color: var(--glass-border);
  background: var(--glass-card-bg);
  box-shadow: var(--glass-shadow);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active {
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.064) 0%, rgba(255, 255, 255, 0.018) 28%, rgba(0, 0, 0, 0.16) 100%),
    rgba(8, 8, 7, 0.62);
  border-color: rgba(226, 205, 160, 0.25);
  background: var(--glass-card-bg);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-block {
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.012) 28%, rgba(0, 0, 0, 0.20)),
    var(--support-reference-subcard-bg);
  --glass-border: rgba(255, 255, 255, 0.095);
  border-color: var(--glass-border);
  background: var(--glass-card-bg);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-upload-entry,
  .support-guess-list button
) {
  --glass-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.040), rgba(255, 255, 255, 0.010)),
    rgba(5, 5, 4, 0.52);
  --glass-border: rgba(255, 255, 255, 0.085);
  border-color: var(--glass-border);
  background: var(--glass-card-bg);
}

@keyframes supportReferenceImageBreath {
  0% {
    opacity: 0.90;
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(1.006);
  }

  100% {
    opacity: 0.90;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes supportReferenceFlowBreath {
  0% {
    opacity: 0.42;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0.56;
    transform: translate3d(3px, -1px, 0);
  }

  100% {
    opacity: 0.42;
    transform: translate3d(0, 0, 0);
  }
}

/* Customer support black-gold final theme. Scoped to support only; no layout or copy changes. */
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] {
  --support-bg: #030303;
  --support-bg-deep: #010101;
  --support-surface: rgba(8, 8, 7, 0.48);
  --support-surface-strong: rgba(12, 12, 10, 0.58);
  --support-surface-solid: rgba(16, 15, 13, 0.74);
  --support-glass-line: rgba(255, 255, 255, 0.105);
  --support-glass-line-strong: rgba(255, 255, 255, 0.16);
  --support-glass-warm: rgba(226, 205, 160, 0.28);
  --support-highlight: rgba(255, 255, 255, 0.13);
  --text-main: #F4EFE6;
  --text-card-title: #F4EFE6;
  --text-secondary: #BDB6AA;
  --text-description: #ABA398;
  --text-muted: #837C72;
  --gold-main: #CDB98A;
  --gold-soft: #A89162;
  --gold-dim: rgba(205, 185, 138, 0.72);
  --gold-border: rgba(226, 205, 160, 0.34);
  --gold-glow: rgba(205, 185, 138, 0.11);
  --wine-main: #8B4147;
  --wine-soft: rgba(139, 65, 71, 0.18);
  --glass-border: var(--support-glass-line);
  --border-soft: var(--support-glass-line);
  --border-warm: var(--gold-border);
  --focus-ring: rgba(226, 205, 160, 0.28);
  --support-major-glass:
    linear-gradient(180deg, rgba(255, 255, 255, 0.074) 0%, rgba(255, 255, 255, 0.026) 34%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(138deg, rgba(205, 185, 138, 0.040) 0%, transparent 32%, rgba(255, 255, 255, 0.012) 100%),
    var(--support-surface);
  --support-card-glass:
    linear-gradient(180deg, rgba(255, 255, 255, 0.060) 0%, rgba(255, 255, 255, 0.018) 34%, rgba(0, 0, 0, 0.22) 100%),
    rgba(4, 4, 3, 0.54);
  --support-control-glass:
    linear-gradient(180deg, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.012)),
    rgba(5, 5, 4, 0.56);
  --glass-card-bg: var(--support-major-glass);
  --glass-card-bg-deep:
    linear-gradient(180deg, rgba(255, 255, 255, 0.044), rgba(255, 255, 255, 0.010)),
    rgba(2, 2, 2, 0.48);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 24px 64px rgba(0, 0, 0, 0.52);
  --primary-action-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.060) 42%, rgba(0, 0, 0, 0.16) 100%),
    linear-gradient(106deg, rgba(205, 185, 138, 0.34), rgba(76, 58, 30, 0.26) 58%, rgba(18, 16, 13, 0.30)),
    rgba(30, 25, 18, 0.90);
  --primary-action-bg-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.072) 42%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(106deg, rgba(205, 185, 138, 0.40), rgba(88, 66, 32, 0.30) 58%, rgba(22, 18, 13, 0.34)),
    rgba(36, 30, 21, 0.94);
  --primary-action-sheen: linear-gradient(102deg, transparent 0%, rgba(255, 244, 215, 0.10) 42%, rgba(255, 235, 184, 0.22) 52%, transparent 70%);
  position: relative;
  background:
    radial-gradient(ellipse at 14% 82%, rgba(160, 116, 54, 0.070), transparent 42%),
    radial-gradient(ellipse at 76% 14%, rgba(255, 238, 196, 0.040), transparent 32%),
    linear-gradient(180deg, var(--support-bg) 0%, var(--support-bg-deep) 100%);
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.070);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.060),
    0 24px 66px rgba(0, 0, 0, 0.48);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 19% 74%, rgba(205, 146, 72, 0.080), transparent 42%),
    radial-gradient(ellipse at 72% 15%, rgba(255, 235, 188, 0.036), transparent 34%),
    linear-gradient(180deg, #050505 0%, #020202 100%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::before,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
  position: absolute;
  inset: -8%;
  content: "";
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::before {
  background:
    radial-gradient(ellipse at 17% 78%, rgba(205, 185, 138, 0.11), transparent 42%),
    radial-gradient(ellipse at 78% 12%, rgba(255, 242, 214, 0.050), transparent 34%);
  opacity: 0.56;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform, opacity;
  animation: supportBlackGoldAmbient 24s ease-in-out infinite;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
  background-image:
    radial-gradient(circle at 28% 34%, rgba(255, 255, 255, 0.040) 0 1px, transparent 1px),
    radial-gradient(circle at 68% 72%, rgba(205, 185, 138, 0.036) 0 1px, transparent 1px);
  background-size: 4px 4px, 7px 7px;
  mix-blend-mode: overlay;
  opacity: 0.16;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin {
  inset: -3% -2% -8% -8%;
  width: auto;
  height: auto;
  background:
    linear-gradient(90deg, rgba(2, 2, 2, 0.04) 0%, rgba(2, 2, 2, 0.22) 34%, rgba(2, 2, 2, 0.76) 72%, rgba(2, 2, 2, 0.94) 100%),
    radial-gradient(ellipse at 10% 60%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.24) 56%, rgba(0, 0, 0, 0.70) 84%),
    url("/player/assets/violin-master-real-alpha.png") left center / auto 118% no-repeat;
  filter: brightness(0.72) contrast(1.08) saturate(0.58);
  mix-blend-mode: soft-light;
  opacity: 0.34;
  transform-origin: left center;
  will-change: transform, opacity;
  animation: supportBlackGoldViolinBreath 28s ease-in-out infinite;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
  inset: -6%;
  height: auto;
  background:
    linear-gradient(114deg, transparent 16%, rgba(205, 185, 138, 0) 28%, rgba(205, 185, 138, 0.145) 38%, rgba(255, 237, 190, 0.070) 42%, transparent 54%),
    linear-gradient(156deg, transparent 48%, rgba(151, 100, 45, 0.075) 62%, rgba(222, 184, 112, 0.13) 74%, transparent 88%),
    radial-gradient(ellipse at 82% 8%, rgba(205, 185, 138, 0.13), transparent 24%);
  mix-blend-mode: screen;
  opacity: 0.38;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  animation: supportBlackGoldFlowBreath 26s ease-in-out infinite;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
) {
  border: 1px solid var(--support-glass-line);
  background: var(--support-major-glass);
  color: var(--text-main);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
)::before {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 20%),
    linear-gradient(112deg, transparent 0%, rgba(205, 185, 138, 0.035) 44%, transparent 68%);
  content: "";
  opacity: 0.52;
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
) > * {
  position: relative;
  z-index: 1;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-guess-block,
  .support-answer-content,
  .support-guess-list button,
  .support-upload-entry,
  .support-more-button
) {
  border: 1px solid var(--support-glass-line);
  background: var(--support-card-glass);
  color: var(--text-main);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 12px 30px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(12px) saturate(116%);
  -webkit-backdrop-filter: blur(12px) saturate(116%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card {
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::before {
  display: block;
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.082), transparent 22%),
    linear-gradient(108deg, transparent 0%, rgba(205, 185, 138, 0.030) 48%, transparent 73%);
  content: "";
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::after {
  position: absolute;
  top: 0;
  right: 14%;
  left: 14%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), rgba(205, 185, 138, 0.22), transparent);
  content: "";
  opacity: 0.52;
  pointer-events: none;
  z-index: 1;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active {
  transform: translateY(-1px);
  border-color: rgba(226, 205, 160, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.074), rgba(255, 255, 255, 0.024) 34%, rgba(0, 0, 0, 0.18)),
    rgba(12, 10, 7, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 14px 34px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(205, 185, 138, 0.050);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-board-card span,
  .support-block-title span,
  .support-suggestion-label,
  .support-empty-tags span
) {
  border-color: rgba(226, 205, 160, 0.30);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.018)),
    rgba(40, 33, 22, 0.46);
  color: var(--gold-main);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .eyebrow,
  .support-board-card b,
  .support-human-dialog > span
) {
  color: var(--gold-dim);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-head h3,
  .support-board-card strong,
  .support-block-title strong,
  .support-human-copy strong,
  .support-answer-content strong
) {
  color: var(--text-main);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-head p:not(.eyebrow),
  .support-board-card small,
  .support-guess-list span,
  .support-answer-content p
) {
  color: var(--text-secondary);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-block {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.018) 30%, rgba(0, 0, 0, 0.24)),
    rgba(5, 5, 4, 0.52);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button {
  cursor: pointer;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button.is-active,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry:focus-within,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-more-button:hover {
  transform: translateY(-1px);
  border-color: rgba(226, 205, 160, 0.30);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.018)),
    rgba(14, 12, 9, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 12px 28px rgba(0, 0, 0, 0.40);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog-compact textarea {
  border: 1px solid rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.010)),
    rgba(0, 0, 0, 0.46);
  color: var(--text-main);
  caret-color: var(--gold-main);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38),
    0 10px 24px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px) saturate(118%);
  -webkit-backdrop-filter: blur(14px) saturate(118%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea:focus {
  border-color: rgba(226, 205, 160, 0.38);
  outline: 2px solid rgba(226, 205, 160, 0.22);
  outline-offset: 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.016)),
    rgba(4, 4, 3, 0.58);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry {
  background: var(--support-control-glass);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry span {
  color: var(--gold-main);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry small {
  color: var(--text-muted);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(240, 220, 175, 0.58);
  background: var(--primary-action-bg);
  color: var(--text-main);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 18px 46px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(205, 185, 138, 0.055),
    0 0 24px rgba(205, 185, 138, 0.085);
  font-weight: 850;
  letter-spacing: 0;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .primary-action:not(.is-loading)::before {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--primary-action-sheen);
  content: "";
  opacity: 0.74;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .primary-action:not(.is-loading)::after {
  display: block;
  position: absolute;
  inset: 1px;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 42%);
  content: "";
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
):hover {
  transform: translateY(-1px);
  border-color: rgba(246, 228, 190, 0.72);
  background: var(--primary-action-bg-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 20px 52px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(205, 185, 138, 0.070),
    0 0 28px rgba(205, 185, 138, 0.12);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .primary-action:hover::before {
  opacity: 0.90;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(.primary-action, .support-secondary-action):active {
  transform: translateY(0);
  box-shadow:
    inset 0 0.18rem 0.68rem rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 10px 26px rgba(0, 0, 0, 0.36);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(button, textarea):focus-visible {
  outline: 2px solid rgba(226, 205, 160, 0.28);
  outline-offset: 2px;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(button:disabled, .support-secondary-action.is-loading) {
  border-color: rgba(255, 255, 255, 0.080) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.040), rgba(255, 255, 255, 0.010)),
    rgba(18, 17, 15, 0.56) !important;
  color: rgba(189, 182, 170, 0.56) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.080) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-secondary-action.is-loading::before {
  border-color: rgba(255, 255, 255, 0.16);
  border-top-color: var(--gold-main);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-status {
  border-color: rgba(226, 205, 160, 0.28);
  background: rgba(54, 43, 26, 0.36);
  color: var(--gold-main);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-status.is-error {
  border-color: rgba(139, 65, 71, 0.48);
  background: var(--wine-soft);
  color: var(--text-main);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-status.is-loading {
  border-color: rgba(226, 205, 160, 0.22);
  background: rgba(24, 21, 16, 0.46);
  color: var(--text-secondary);
}

@keyframes supportBlackGoldAmbient {
  0% {
    opacity: 0.48;
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    opacity: 0.64;
    transform: translate3d(2px, -2px, 0) scale(1.006);
  }

  100% {
    opacity: 0.48;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes supportBlackGoldViolinBreath {
  0% {
    opacity: 0.26;
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    opacity: 0.38;
    transform: translate3d(0, -2px, 0) scale(1.006);
  }

  100% {
    opacity: 0.26;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes supportBlackGoldFlowBreath {
  0% {
    opacity: 0.30;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0.44;
    transform: translate3d(3px, -1px, 0);
  }

  100% {
    opacity: 0.30;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
    .support-entry-panel,
    .support-service-panel,
    .support-human-fallback
  ) {
    backdrop-filter: blur(14px) saturate(116%);
    -webkit-backdrop-filter: blur(14px) saturate(116%);
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
    .support-board-card,
    .support-guess-block,
    .support-answer-content,
    .support-guess-list button,
    .support-upload-entry,
    .support-more-button,
    .support-human-dialog textarea
  ) {
    backdrop-filter: blur(8px) saturate(108%);
    -webkit-backdrop-filter: blur(8px) saturate(108%);
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin {
    opacity: 0.22;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::before,
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin,
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
    .support-entry-panel,
    .support-service-panel,
    .support-human-fallback,
    .support-board-card,
    .support-guess-block,
    .support-answer-content,
    .support-guess-list button,
    .support-upload-entry,
    .support-more-button
  ) {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.014)),
      rgba(10, 10, 9, 0.86);
  }
}

/* Customer support macOS Tahoe dark liquid glass pass. Layout and copy stay unchanged. */
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] {
  --support-bg: #020304;
  --support-bg-deep: #03060b;
  --support-blue-black: #090d14;
  --support-surface: rgba(232, 236, 242, 0.052);
  --support-surface-strong: rgba(232, 236, 242, 0.086);
  --support-surface-soft: rgba(232, 236, 242, 0.034);
  --support-glass-line: rgba(255, 255, 255, 0.105);
  --support-glass-line-strong: rgba(255, 255, 255, 0.145);
  --support-glass-warm-line: rgba(255, 255, 255, 0.105);
  --support-text-main: #F5F5F7;
  --support-text-secondary: rgba(245, 245, 247, 0.62);
  --support-text-muted: rgba(245, 245, 247, 0.36);
  --support-gold-main: #8CC7FF;
  --support-gold-soft: #2F8FFF;
  --support-gold-bright: #B8DDFF;
  --support-gold-line: rgba(95, 170, 255, 0.30);
  --support-gold-shadow: rgba(47, 143, 255, 0.14);
  --support-glass-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.082) 0%, rgba(255, 255, 255, 0.026) 48%, rgba(0, 0, 0, 0.18) 100%),
    rgba(12, 13, 15, 0.58);
  --support-glass-bg-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.098) 0%, rgba(255, 255, 255, 0.034) 48%, rgba(0, 0, 0, 0.14) 100%),
    rgba(16, 18, 21, 0.64);
  --support-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 34px 90px rgba(0, 0, 0, 0.58);
  --support-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.020) 50%, rgba(0, 0, 0, 0.18)),
    rgba(255, 255, 255, 0.034);
  --support-card-bg-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.086), rgba(255, 255, 255, 0.028) 50%, rgba(0, 0, 0, 0.14)),
    rgba(255, 255, 255, 0.052);
  --support-metal-cta:
    linear-gradient(180deg, rgba(126, 190, 255, 0.96), rgba(36, 129, 235, 0.96)),
    #2F8FFF;
  --support-metal-cta-hover:
    linear-gradient(180deg, rgba(146, 202, 255, 0.98), rgba(51, 142, 244, 0.98)),
    #3A9BFF;
  border-color: rgba(255, 255, 255, 0.060);
  background:
    radial-gradient(ellipse at 17% 16%, rgba(47, 143, 255, 0.105), transparent 32%),
    radial-gradient(ellipse at 76% 12%, rgba(210, 224, 255, 0.052), transparent 34%),
    radial-gradient(ellipse at 58% 88%, rgba(78, 70, 110, 0.105), transparent 42%),
    linear-gradient(145deg, var(--support-bg), var(--support-blue-black) 46%, var(--support-bg-deep)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.060),
    0 42px 130px rgba(0, 0, 0, 0.56);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::before {
  background:
    linear-gradient(118deg, transparent 0 52%, rgba(255, 255, 255, 0.030) 57%, transparent 66%),
    linear-gradient(18deg, transparent 0 38%, rgba(47, 143, 255, 0.050) 47%, transparent 62%);
  opacity: 0.76;
  mix-blend-mode: screen;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(47, 143, 255, 0.075), transparent 40%),
    radial-gradient(ellipse at 84% 12%, rgba(245, 245, 247, 0.040), transparent 36%);
  opacity: 0.48;
  mix-blend-mode: screen;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin {
  opacity: 0.10;
  filter: brightness(0.28) contrast(1.08) saturate(0.38);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
  background:
    linear-gradient(118deg, transparent 0 44%, rgba(47, 143, 255, 0.060) 52%, transparent 66%),
    radial-gradient(ellipse at 70% 76%, rgba(150, 190, 255, 0.075), transparent 46%);
  opacity: 0.36;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
) {
  border-color: rgba(255, 255, 255, 0.105);
  background: var(--support-glass-bg) !important;
  box-shadow: var(--support-glass-shadow);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card {
  border-color: rgba(255, 255, 255, 0.098);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.020) 50%, rgba(0, 0, 0, 0.18)),
    rgba(255, 255, 255, 0.034) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.105),
    0 12px 34px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(24px) saturate(138%);
  -webkit-backdrop-filter: blur(24px) saturate(138%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.066), transparent 28%),
    linear-gradient(106deg, transparent, rgba(47, 143, 255, 0.034) 54%, transparent 78%);
  opacity: 0.72;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::after {
  background: linear-gradient(90deg, transparent, rgba(126, 190, 255, 0.32), transparent);
  opacity: 0.42;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active {
  border-color: rgba(95, 170, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.086), rgba(255, 255, 255, 0.028) 50%, rgba(0, 0, 0, 0.14)),
    rgba(255, 255, 255, 0.052) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.145),
    0 14px 38px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(47, 143, 255, 0.040);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-icon {
  border-color: rgba(255, 255, 255, 0.10) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.024)),
    rgba(255, 255, 255, 0.044) !important;
  color: rgba(245, 245, 247, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.28) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-copy em,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card > span:not(.support-card-icon):not(.support-card-arrow) {
  border-color: rgba(255, 255, 255, 0.092);
  background: rgba(255, 255, 255, 0.052);
  color: rgba(245, 245, 247, 0.42);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-arrow {
  border-color: rgba(255, 255, 255, 0.080) !important;
  background: rgba(255, 255, 255, 0.040) !important;
  color: #7DBDFF !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card:hover .support-card-arrow,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active .support-card-arrow {
  border-color: rgba(95, 170, 255, 0.38);
  background: rgba(47, 143, 255, 0.12);
  color: #B8DDFF;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card b,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-entry-head .eyebrow,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog > span {
  color: #8CC7FF;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-block,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-fallback {
  border-color: rgba(255, 255, 255, 0.095);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.020)),
    rgba(0, 0, 0, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.090),
    0 16px 38px rgba(0, 0, 0, 0.30);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-block-title span,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-suggestion-label,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-empty-tags span {
  border-color: rgba(47, 143, 255, 0.22);
  background: rgba(47, 143, 255, 0.12);
  color: #9FD1FF;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-focus {
  border-color: rgba(255, 255, 255, 0.078);
  background:
    radial-gradient(circle at 50% 42%, rgba(47, 143, 255, 0.105), transparent 46%),
    rgba(0, 0, 0, 0.30);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-orb {
  border-color: rgba(95, 170, 255, 0.20);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.10), transparent 32%),
    radial-gradient(circle, rgba(47, 143, 255, 0.12), rgba(47, 143, 255, 0.024) 58%, transparent 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 20px rgba(47, 143, 255, 0.055);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-mark {
  border-color: rgba(95, 170, 255, 0.30);
  color: #8CC7FF;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-line {
  background: linear-gradient(90deg, transparent, rgba(126, 190, 255, 0.34), transparent);
  opacity: 0.50;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-more-button,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry {
  border-color: rgba(255, 255, 255, 0.082);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.012)),
    rgba(8, 10, 13, 0.48) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button.is-active,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-more-button:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry:focus-within {
  border-color: rgba(95, 170, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.016)),
    rgba(10, 14, 20, 0.54) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-answer-content {
  border-color: rgba(255, 255, 255, 0.072);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.040), rgba(255, 255, 255, 0.008)),
    rgba(0, 0, 0, 0.30) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog-compact textarea {
  border-color: rgba(255, 255, 255, 0.090);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.010)),
    rgba(0, 0, 0, 0.36) !important;
  caret-color: #8CC7FF;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea:focus {
  border-color: rgba(95, 170, 255, 0.38);
  outline-color: rgba(47, 143, 255, 0.22);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
) {
  border-color: rgba(126, 190, 255, 0.45);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(126, 190, 255, 0.96), rgba(36, 129, 235, 0.96)),
    #2F8FFF !important;
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 16px 38px rgba(47, 143, 255, 0.18),
    0 16px 42px rgba(0, 0, 0, 0.36);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .primary-action::before {
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.18) 42%, rgba(255, 255, 255, 0.34) 52%, transparent 72%);
  opacity: 0.38;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
):hover {
  border-color: rgba(184, 221, 255, 0.58);
  background:
    linear-gradient(180deg, rgba(146, 202, 255, 0.98), rgba(51, 142, 244, 0.98)),
    #3A9BFF !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 18px 44px rgba(47, 143, 255, 0.22),
    0 18px 46px rgba(0, 0, 0, 0.40);
}

html[data-active-module="support"] body {
  background:
    radial-gradient(ellipse at 17% 16%, rgba(47, 143, 255, 0.085), transparent 32%),
    radial-gradient(ellipse at 76% 12%, rgba(210, 224, 255, 0.040), transparent 34%),
    linear-gradient(145deg, #020304, #090d14 46%, #03060b) !important;
}

/* Keep the premium texture fast: real blur only on large panels and the input. */
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-board-card,
  .support-guess-block,
  .support-answer-content,
  .support-guess-list button,
  .support-upload-entry,
  .support-more-button,
  .primary-action,
  .support-secondary-action
) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.glass-card,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-block.glass-card,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-answer-content.glass-card,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button.glass-card,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry.glass-card,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-more-button.glass-card,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .primary-action,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-secondary-action {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
) {
  backdrop-filter: blur(20px) saturate(124%);
  -webkit-backdrop-filter: blur(20px) saturate(124%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog-compact textarea {
  backdrop-filter: blur(12px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(112%) !important;
}

/* Brighter champagne-gold pass: visible glow lives below glass, content stays still. */
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] {
  --gold-main: #E2C884;
  --gold-soft: #C5A25E;
  --gold-dim: rgba(226, 200, 132, 0.82);
  --gold-border: rgba(244, 218, 154, 0.46);
  --gold-glow: rgba(226, 200, 132, 0.18);
  --support-glass-warm: rgba(244, 218, 154, 0.38);
  --primary-action-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.076) 42%, rgba(0, 0, 0, 0.14) 100%),
    linear-gradient(106deg, rgba(226, 200, 132, 0.46), rgba(98, 74, 34, 0.32) 58%, rgba(22, 18, 12, 0.28)),
    rgba(34, 27, 17, 0.92);
  --primary-action-bg-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.090) 42%, rgba(0, 0, 0, 0.10) 100%),
    linear-gradient(106deg, rgba(236, 210, 142, 0.54), rgba(114, 84, 36, 0.36) 58%, rgba(28, 21, 12, 0.30)),
    rgba(42, 32, 18, 0.95);
  --primary-action-sheen: linear-gradient(102deg, transparent 0%, rgba(255, 248, 224, 0.16) 40%, rgba(255, 228, 160, 0.34) 52%, transparent 72%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
  inset: -12%;
  background:
    radial-gradient(ellipse at 24% 30%, rgba(255, 222, 150, 0.18), rgba(255, 222, 150, 0.052) 18%, transparent 36%),
    radial-gradient(ellipse at 29% 72%, rgba(226, 174, 88, 0.16), rgba(226, 174, 88, 0.045) 20%, transparent 40%),
    radial-gradient(ellipse at 79% 21%, rgba(255, 232, 178, 0.18), rgba(255, 232, 178, 0.050) 17%, transparent 35%),
    radial-gradient(ellipse at 78% 78%, rgba(226, 200, 132, 0.12), rgba(226, 200, 132, 0.034) 19%, transparent 38%);
  mix-blend-mode: screen;
  opacity: 0.58;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform, opacity;
  animation: supportGoldHaloBreath 18s ease-in-out infinite;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
  background:
    linear-gradient(114deg, transparent 14%, rgba(226, 200, 132, 0) 27%, rgba(226, 200, 132, 0.19) 38%, rgba(255, 238, 188, 0.10) 43%, transparent 56%),
    linear-gradient(156deg, transparent 47%, rgba(176, 118, 48, 0.095) 62%, rgba(244, 202, 122, 0.18) 75%, transparent 88%),
    radial-gradient(ellipse at 82% 8%, rgba(226, 200, 132, 0.20), transparent 26%);
  opacity: 0.46;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-board-card span,
  .support-block-title span,
  .support-suggestion-label,
  .support-empty-tags span
) {
  border-color: rgba(244, 218, 154, 0.44);
  color: var(--gold-main);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 0 14px rgba(226, 200, 132, 0.08);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-board-card:hover,
  .support-board-card.is-active,
  .support-guess-list button:hover,
  .support-guess-list button.is-active,
  .support-upload-entry:hover,
  .support-upload-entry:focus-within
) {
  border-color: rgba(244, 218, 154, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 14px 34px rgba(0, 0, 0, 0.44),
    0 0 18px rgba(226, 200, 132, 0.10);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
) {
  border-color: rgba(250, 226, 166, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 18px 46px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(226, 200, 132, 0.085),
    0 0 30px rgba(226, 200, 132, 0.16);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
):hover {
  border-color: rgba(255, 236, 190, 0.80);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.27),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 20px 52px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(226, 200, 132, 0.11),
    0 0 36px rgba(226, 200, 132, 0.22);
}

@keyframes supportGoldHaloBreath {
  0% {
    opacity: 0.42;
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    opacity: 0.70;
    transform: translate3d(2px, -2px, 0) scale(1.012);
  }

  100% {
    opacity: 0.42;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
    opacity: 0.48;
    animation-duration: 22s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/* Champagne metal pass: stronger gold mass, visible under-glass breathing halos. */
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] {
  --gold-main: #F0DCA8;
  --gold-soft: #C8A96A;
  --gold-dim: rgba(240, 220, 168, 0.88);
  --gold-border: rgba(255, 232, 178, 0.62);
  --gold-glow: rgba(240, 205, 132, 0.26);
  --champagne-metal:
    radial-gradient(circle at 50% 0%, rgba(255, 248, 222, 0.34), transparent 42%),
    linear-gradient(112deg, rgba(86, 67, 36, 0.28) 0%, rgba(196, 169, 108, 0.48) 34%, rgba(255, 236, 185, 0.72) 53%, rgba(128, 98, 48, 0.38) 78%, rgba(48, 38, 24, 0.26) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.045)),
    rgba(112, 92, 58, 0.62);
  --champagne-metal-hover:
    radial-gradient(circle at 50% 0%, rgba(255, 252, 232, 0.42), transparent 44%),
    linear-gradient(112deg, rgba(96, 74, 38, 0.34) 0%, rgba(212, 184, 118, 0.58) 34%, rgba(255, 241, 198, 0.82) 53%, rgba(148, 112, 54, 0.44) 78%, rgba(58, 44, 24, 0.30) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.060)),
    rgba(130, 104, 62, 0.70);
  --primary-action-bg: var(--champagne-metal);
  --primary-action-bg-hover: var(--champagne-metal-hover);
  --primary-action-sheen: linear-gradient(104deg, transparent 0%, rgba(255, 255, 238, 0.18) 35%, rgba(255, 239, 184, 0.46) 52%, transparent 73%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
  inset: -16%;
  background:
    radial-gradient(ellipse at 18% 24%, rgba(255, 225, 158, 0.30), rgba(255, 225, 158, 0.12) 18%, rgba(255, 225, 158, 0.035) 34%, transparent 52%),
    radial-gradient(ellipse at 31% 76%, rgba(232, 170, 72, 0.28), rgba(232, 170, 72, 0.105) 20%, rgba(232, 170, 72, 0.032) 38%, transparent 58%),
    radial-gradient(ellipse at 82% 17%, rgba(255, 238, 190, 0.32), rgba(255, 238, 190, 0.12) 18%, rgba(255, 238, 190, 0.035) 34%, transparent 54%),
    radial-gradient(ellipse at 78% 80%, rgba(240, 205, 132, 0.24), rgba(240, 205, 132, 0.090) 20%, rgba(240, 205, 132, 0.030) 38%, transparent 58%);
  opacity: 0.78;
  animation: supportGoldHaloBreathStrong 15s ease-in-out infinite;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
  background:
    linear-gradient(113deg, transparent 12%, rgba(240, 220, 168, 0) 25%, rgba(240, 220, 168, 0.27) 38%, rgba(255, 242, 203, 0.16) 44%, transparent 58%),
    linear-gradient(156deg, transparent 45%, rgba(176, 118, 48, 0.13) 60%, rgba(244, 202, 122, 0.26) 75%, transparent 89%),
    radial-gradient(ellipse at 82% 8%, rgba(240, 220, 168, 0.30), transparent 28%);
  opacity: 0.62;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-board-card span,
  .support-block-title span,
  .support-suggestion-label,
  .support-empty-tags span
) {
  border-color: rgba(255, 232, 178, 0.58);
  background:
    linear-gradient(110deg, rgba(255, 239, 190, 0.18), rgba(156, 117, 54, 0.22) 45%, rgba(255, 247, 218, 0.20)),
    rgba(70, 54, 28, 0.56);
  color: #F6E5B8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 0 18px rgba(240, 205, 132, 0.18);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
) {
  background: var(--champagne-metal);
  border-color: rgba(255, 238, 194, 0.78);
  color: #fff6df;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 18px 46px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 232, 178, 0.13),
    0 0 42px rgba(240, 205, 132, 0.24);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
):hover {
  background: var(--champagne-metal-hover);
  border-color: rgba(255, 246, 218, 0.90);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 20px 52px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 232, 178, 0.18),
    0 0 52px rgba(240, 205, 132, 0.34);
}

@keyframes supportGoldHaloBreathStrong {
  0% {
    opacity: 0.54;
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    opacity: 0.88;
    transform: translate3d(3px, -2px, 0) scale(1.018);
  }

  100% {
    opacity: 0.54;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
    opacity: 0.66;
    animation-duration: 18s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/* Quiet interaction motion: only active category and filled-submit state breathe. */
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::before,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
  animation: none;
  transform: none;
  will-change: auto;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active::after {
  inset: -1px;
  width: auto;
  height: auto;
  border: 1px solid rgba(255, 232, 178, 0.50);
  border-radius: inherit;
  background: transparent;
  opacity: 0.55;
  transform: scale(1);
  transform-origin: center;
  will-change: opacity, transform;
  animation: supportActiveCardEdgeBreath 3.6s ease-in-out infinite;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-fallback:not(:has(.support-human-dialog textarea:not(:placeholder-shown))) .primary-action:not(.is-loading)::before {
  animation: none;
  opacity: 0.40;
  transform: scaleX(1);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-fallback:has(.support-human-dialog textarea:not(:placeholder-shown)) .primary-action:not(.is-loading)::before {
  will-change: opacity, transform;
  animation: supportSubmitSheenBreath 3.6s ease-in-out infinite;
}

@keyframes supportActiveCardEdgeBreath {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }

  50% {
    opacity: 0.90;
    transform: scale(1.006);
  }

  100% {
    opacity: 0.55;
    transform: scale(1);
  }
}

@keyframes supportSubmitSheenBreath {
  0% {
    opacity: 0.42;
    transform: scaleX(1);
  }

  50% {
    opacity: 0.82;
    transform: scaleX(1.008);
  }

  100% {
    opacity: 0.42;
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active::after,
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-fallback:has(.support-human-dialog textarea:not(:placeholder-shown)) .primary-action:not(.is-loading)::before {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/* Metronome one-screen layout: no sticky panels, no inner scroll split, no clipped controls. */
@media (min-width: 1081px) {
  html[data-active-module="metronome"] .content-grid[data-module="metronome"] {
    grid-template-rows: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: clamp(0.42rem, 0.68vw, 0.64rem);
    scrollbar-gutter: auto;
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] > .violin-metronome-page {
    align-self: stretch;
    height: 100%;
    min-height: 0;
  }

  html[data-active-module="metronome"] .violin-metronome-page.professional-metronome {
    display: grid;
    grid-template-rows: auto minmax(0, 6.5fr) minmax(0, 3.5fr);
    align-content: stretch;
    gap: clamp(0.38rem, 0.58vw, 0.56rem);
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: clamp(0.52rem, 0.78vw, 0.72rem);
  }

  html[data-active-module="metronome"] .metronome-footer-hint {
    display: none;
  }

  html[data-active-module="metronome"] .metronome-header {
    min-height: 0;
    padding: clamp(0.38rem, 0.54vw, 0.5rem) clamp(0.62rem, 0.86vw, 0.82rem);
  }

  html[data-active-module="metronome"] .metronome-command-copy .eyebrow {
    margin-bottom: 0.2rem;
    font-size: clamp(0.56rem, 0.64vw, 0.68rem);
    line-height: 1;
  }

  html[data-active-module="metronome"] .metronome-command-copy h3 {
    font-size: clamp(1.05rem, 1.24vw, 1.32rem);
    line-height: 1.04;
  }

  html[data-active-module="metronome"] .metronome-subtitle-line {
    margin-top: 0.16rem;
    font-size: clamp(0.72rem, 0.78vw, 0.84rem);
    line-height: 1.1;
  }

  html[data-active-module="metronome"] .metronome-header-meta {
    padding: 0.24rem;
  }

  html[data-active-module="metronome"] .metronome-header-meta span,
  html[data-active-module="metronome"] .metronome-header-meta b,
  html[data-active-module="metronome"] .metronome-header-meta em {
    min-height: 1.46rem;
    padding: 0 0.52rem;
    font-size: 0.62rem;
  }

  html[data-active-module="metronome"] .beat-performance-stage {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-items: stretch;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    gap: clamp(0.25rem, 0.42vw, 0.42rem);
    overflow: hidden;
    padding: clamp(0.54rem, 0.72vw, 0.72rem) clamp(0.72rem, 1vw, 0.98rem);
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .metronome-stage-controls {
    grid-template-columns:
      minmax(9.8rem, 11.2rem)
      minmax(5.8rem, 6.4rem)
      minmax(9.8rem, 11rem);
    width: min(100%, 31rem);
    padding: 0.28rem;
    gap: 0.28rem;
    border-radius: 14px;
  }

  html[data-active-module="metronome"] .metronome-bpm-console {
    grid-template-columns: 1.95rem minmax(4.5rem, 1fr) 1.95rem;
  }

  html[data-active-module="metronome"] .metronome-bpm-console button,
  html[data-active-module="metronome"] .metronome-tap-top,
  html[data-active-module="metronome"] .metronome-top-actions button {
    min-height: clamp(2.2rem, 3.2vh, 2.62rem);
    border-radius: 11px;
  }

  html[data-active-module="metronome"] .metronome-bpm-console strong {
    font-size: clamp(1.72rem, 2.42vw, 2.22rem);
  }

  html[data-active-module="metronome"] .metronome-stage-status {
    align-self: center;
    gap: 0.38rem;
    margin-top: 0;
  }

  html[data-active-module="metronome"] .metronome-stage-status span,
  html[data-active-module="metronome"] .metronome-stage-status strong,
  html[data-active-module="metronome"] .metronome-stage-status em {
    min-height: 1.34rem;
    padding: 0.2rem 0.46rem;
    font-size: clamp(0.62rem, 0.68vw, 0.72rem);
    line-height: 1;
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .beat-performance-stage .metronome-beat-lane {
    align-self: center;
    max-width: min(98%, 62rem);
    gap: clamp(1rem, 2vw, 1.7rem);
    margin-top: clamp(1rem, 2.2vh, 1.7rem);
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .beat-performance-stage .metronome-big-beat {
    width: clamp(7.1rem, 12.2vw, 9.45rem);
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .beat-performance-stage.beats-6 .metronome-big-beat {
    width: clamp(5.4rem, 7.8vw, 6.55rem);
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .beat-performance-stage .metronome-big-beat strong {
    font-size: clamp(3.4rem, 6.15vw, 5rem);
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .beat-performance-stage.beats-6 .metronome-big-beat strong {
    font-size: clamp(2.45rem, 3.92vw, 3.35rem);
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .beat-performance-stage .metronome-big-beat small {
    font-size: 0.86rem;
  }

  html[data-active-module="metronome"] .beat-performance-stage .metronome-subdivision-lane {
    width: min(54%, 31rem);
    min-height: 0.82rem;
    margin: 0 auto;
  }

  html[data-active-module="metronome"] .metronome-control-bar {
    align-self: stretch;
    height: 100%;
    min-height: 0;
    overflow: visible;
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .metronome-control-bar .metronome-control-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    align-items: stretch;
    height: 100%;
    min-height: 0;
    overflow: visible;
    gap: clamp(0.36rem, 0.54vw, 0.52rem);
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .metronome-control-bar .metronome-control-card,
  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .metronome-control-bar .metronome-control-card:last-child {
    display: grid;
    align-content: stretch;
    height: 100%;
    min-height: 0;
    overflow: visible;
    padding: clamp(0.34rem, 0.48vw, 0.48rem);
    gap: clamp(0.18rem, 0.26vw, 0.28rem);
  }

  html[data-active-module="metronome"] .metronome-control-bar .metronome-control-card > span {
    font-size: 0.68rem;
    line-height: 1;
  }

  html[data-active-module="metronome"] .metronome-control-bar .metronome-segment-grid,
  html[data-active-module="metronome"] .metronome-sound-mini-panel,
  html[data-active-module="metronome"] .metronome-practice-mini-panel {
    gap: clamp(0.2rem, 0.28vw, 0.28rem);
  }

  html[data-active-module="metronome"] .metronome-control-bar .metronome-segment-grid button,
  html[data-active-module="metronome"] .metronome-sound-mini-panel button,
  html[data-active-module="metronome"] .metronome-practice-mini-panel button {
    min-height: clamp(1.42rem, 2.2vh, 1.78rem);
    padding: 0.18rem 0.32rem;
    border-radius: 8px;
    font-size: 0.68rem;
  }

  html[data-active-module="metronome"] .metronome-symbol-grid button strong {
    font-size: 0.92rem;
  }

  html[data-active-module="metronome"] .metronome-sound-mini-panel strong,
  html[data-active-module="metronome"] .metronome-practice-mini-panel strong {
    font-size: 0.64rem;
    line-height: 1.05;
  }

  html[data-active-module="metronome"] .metronome-sound-mini-panel small,
  html[data-active-module="metronome"] .metronome-practice-mini-panel small {
    font-size: 0.54rem;
    line-height: 1.05;
  }

  html[data-active-module="metronome"] .metronome-volume-line {
    grid-template-columns: minmax(0, 1fr) 2.35rem;
    min-height: 0;
    height: 100%;
  }

  html[data-active-module="metronome"] .metronome-custom-accent-panel {
    gap: 0.18rem;
  }

  html[data-active-module="metronome"] .metronome-custom-accent-panel button {
    min-height: 1.72rem;
    padding: 0.16rem;
  }

  html[data-active-module="metronome"] .metronome-ramp-preview {
    gap: 0.18rem;
  }

  html[data-active-module="metronome"] .metronome-ramp-stepper {
    min-height: 1.22rem;
    padding: 0.15rem;
  }
}

@media (min-width: 1081px) and (max-height: 760px) {
  html[data-active-module="metronome"] .violin-metronome-page.professional-metronome {
    grid-template-rows: auto minmax(0, 6.5fr) minmax(0, 3.5fr);
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .beat-performance-stage .metronome-big-beat {
    width: clamp(6.2rem, 9.6vw, 7.55rem);
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .beat-performance-stage.beats-6 .metronome-big-beat {
    width: clamp(4.75rem, 6.8vw, 5.55rem);
  }

  html[data-active-module="metronome"] .metronome-stage-status em {
    max-width: 24rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 721px) and (max-width: 1080px) {
  html[data-active-module="metronome"],
  html[data-active-module="metronome"] body {
    height: 100%;
    overflow: hidden;
  }

  html[data-active-module="metronome"] .app-shell {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  html[data-active-module="metronome"] .main-stage {
    display: flex;
    width: min(100%, var(--stage-max-w));
    height: 100dvh;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: var(--page-pad-y);
  }

  html[data-active-module="metronome"] .topbar {
    flex: 0 0 auto;
    min-height: 0;
    margin-bottom: clamp(0.5rem, 0.9vw, 0.78rem);
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] {
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: clamp(0.34rem, 0.56vw, 0.5rem);
    scrollbar-gutter: auto;
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] > .violin-metronome-page {
    align-self: stretch;
    height: 100%;
    min-height: 0;
  }

  html[data-active-module="metronome"] .violin-metronome-page.professional-metronome {
    display: grid;
    grid-template-rows: auto minmax(0, 6.5fr) minmax(0, 3.5fr);
    align-content: stretch;
    gap: clamp(0.32rem, 0.52vw, 0.48rem);
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: clamp(0.46rem, 0.68vw, 0.62rem);
  }

  html[data-active-module="metronome"] .metronome-footer-hint {
    display: none;
  }

  html[data-active-module="metronome"] .metronome-header {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    padding: 0.36rem 0.58rem;
  }

  html[data-active-module="metronome"] .metronome-command-copy .eyebrow {
    margin-bottom: 0.14rem;
    font-size: 0.56rem;
    line-height: 1;
  }

  html[data-active-module="metronome"] .metronome-command-copy h3 {
    font-size: clamp(0.98rem, 1.9vw, 1.18rem);
    line-height: 1.02;
  }

  html[data-active-module="metronome"] .metronome-subtitle-line {
    margin-top: 0.12rem;
    font-size: 0.68rem;
    line-height: 1.05;
  }

  html[data-active-module="metronome"] .metronome-header-meta {
    gap: 0.2rem;
    padding: 0.2rem;
  }

  html[data-active-module="metronome"] .metronome-header-meta span,
  html[data-active-module="metronome"] .metronome-header-meta b,
  html[data-active-module="metronome"] .metronome-header-meta em {
    min-height: 1.32rem;
    padding: 0 0.42rem;
    font-size: 0.56rem;
  }

  html[data-active-module="metronome"] .beat-performance-stage {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    gap: 0.24rem;
    overflow: hidden;
    padding: 0.46rem 0.58rem;
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .metronome-stage-controls {
    grid-template-columns: minmax(8.6rem, 10rem) minmax(5.1rem, 5.9rem) minmax(8.8rem, 10rem);
    width: min(100%, 27.8rem);
    gap: 0.24rem;
    padding: 0.24rem;
    border-radius: 12px;
  }

  html[data-active-module="metronome"] .metronome-bpm-console {
    grid-template-columns: 1.8rem minmax(4rem, 1fr) 1.8rem;
  }

  html[data-active-module="metronome"] .metronome-bpm-console button,
  html[data-active-module="metronome"] .metronome-tap-top,
  html[data-active-module="metronome"] .metronome-top-actions button {
    min-height: 2.05rem;
    border-radius: 10px;
  }

  html[data-active-module="metronome"] .metronome-bpm-console strong {
    font-size: clamp(1.46rem, 3.2vw, 1.92rem);
  }

  html[data-active-module="metronome"] .metronome-tap-top b {
    font-size: 0.78rem;
  }

  html[data-active-module="metronome"] .metronome-tap-top span {
    font-size: 0.54rem;
  }

  html[data-active-module="metronome"] .metronome-stage-status {
    align-self: center;
    gap: 0.24rem;
    margin-top: 0;
  }

  html[data-active-module="metronome"] .metronome-stage-status span,
  html[data-active-module="metronome"] .metronome-stage-status strong,
  html[data-active-module="metronome"] .metronome-stage-status em {
    min-height: 1.18rem;
    padding: 0.16rem 0.36rem;
    font-size: 0.56rem;
    line-height: 1;
  }

  html[data-active-module="metronome"] .metronome-stage-status em {
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .beat-performance-stage .metronome-beat-lane {
    align-self: center;
    max-width: min(98%, 48rem);
    gap: clamp(0.72rem, 2.2vw, 1.26rem);
    margin-top: clamp(1rem, 2.4vh, 1.6rem);
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .beat-performance-stage .metronome-big-beat {
    width: clamp(6.5rem, 15.2vw, 7.75rem);
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .beat-performance-stage.beats-6 .metronome-big-beat {
    width: clamp(4.6rem, 9.4vw, 5.2rem);
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .beat-performance-stage .metronome-big-beat strong {
    font-size: clamp(3.22rem, 8.5vw, 4.25rem);
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .beat-performance-stage.beats-6 .metronome-big-beat strong {
    font-size: clamp(2.18rem, 5.2vw, 2.72rem);
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .beat-performance-stage .metronome-big-beat small {
    font-size: 0.78rem;
  }

  html[data-active-module="metronome"] .beat-performance-stage .metronome-subdivision-lane {
    width: min(58%, 25rem);
    min-height: 0.72rem;
    margin: 0 auto;
  }

  html[data-active-module="metronome"] .metronome-control-bar {
    height: 100%;
    min-height: 0;
    overflow: visible;
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .metronome-control-bar .metronome-control-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    align-items: stretch;
    height: 100%;
    min-height: 0;
    overflow: visible;
    gap: 0.36rem;
  }

  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .metronome-control-bar .metronome-control-card,
  html[data-active-module="metronome"] .content-grid[data-module="metronome"] .metronome-control-bar .metronome-control-card:last-child {
    display: grid;
    align-content: stretch;
    height: 100%;
    min-height: 0;
    overflow: visible;
    padding: 0.3rem;
    gap: 0.16rem;
  }

  html[data-active-module="metronome"] .metronome-control-bar .metronome-control-card > span {
    font-size: 0.62rem;
    line-height: 1;
  }

  html[data-active-module="metronome"] .metronome-control-bar .metronome-segment-grid,
  html[data-active-module="metronome"] .metronome-sound-mini-panel,
  html[data-active-module="metronome"] .metronome-practice-mini-panel {
    gap: 0.18rem;
  }

  html[data-active-module="metronome"] .metronome-control-bar .metronome-segment-grid button,
  html[data-active-module="metronome"] .metronome-sound-mini-panel button,
  html[data-active-module="metronome"] .metronome-practice-mini-panel button {
    min-height: clamp(1.32rem, 2.55vh, 1.62rem);
    padding: 0.14rem 0.24rem;
    border-radius: 7px;
    font-size: 0.6rem;
  }

  html[data-active-module="metronome"] .metronome-symbol-grid button strong {
    font-size: 0.78rem;
  }

  html[data-active-module="metronome"] .metronome-sound-mini-panel strong,
  html[data-active-module="metronome"] .metronome-practice-mini-panel strong {
    font-size: 0.58rem;
    line-height: 1.04;
  }

  html[data-active-module="metronome"] .metronome-sound-mini-panel small,
  html[data-active-module="metronome"] .metronome-practice-mini-panel small {
    font-size: 0.5rem;
    line-height: 1.02;
  }

  html[data-active-module="metronome"] .metronome-volume-line {
    grid-template-columns: minmax(0, 1fr) 2.05rem;
    height: 100%;
    min-height: 0;
  }

  html[data-active-module="metronome"] .metronome-volume-line small {
    font-size: 0.6rem;
  }
}

/* Customer support static premium theme: Apple-like black-gold glass, no continuous motion. */
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] {
  --support-bg: #020304;
  --support-bg-deep: #050505;
  --support-blue-black: #07090d;
  --support-surface: rgba(8, 9, 10, 0.58);
  --support-surface-strong: rgba(12, 12, 11, 0.68);
  --support-surface-soft: rgba(16, 16, 15, 0.46);
  --support-glass-line: rgba(255, 255, 255, 0.095);
  --support-glass-line-strong: rgba(255, 255, 255, 0.14);
  --support-glass-warm-line: rgba(221, 196, 137, 0.24);
  --support-text-main: #F3EFE8;
  --support-text-secondary: #BDB6AA;
  --support-text-muted: #80796F;
  --support-gold-main: #D6BE83;
  --support-gold-soft: #AC8F58;
  --support-gold-bright: #F1DDA6;
  --support-gold-line: rgba(230, 203, 142, 0.42);
  --support-gold-shadow: rgba(214, 190, 131, 0.16);
  --support-radius-lg: clamp(1rem, 1.35vw, 1.24rem);
  --support-radius-md: 0.92rem;
  --support-glass-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070) 0%, rgba(255, 255, 255, 0.022) 42%, rgba(0, 0, 0, 0.20) 100%),
    linear-gradient(136deg, rgba(214, 190, 131, 0.028), transparent 38%),
    rgba(7, 8, 9, 0.60);
  --support-glass-bg-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.086) 0%, rgba(255, 255, 255, 0.030) 42%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(136deg, rgba(214, 190, 131, 0.044), transparent 38%),
    rgba(10, 10, 10, 0.66);
  --support-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 24px 58px rgba(0, 0, 0, 0.48);
  --support-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.056), rgba(255, 255, 255, 0.012) 48%, rgba(0, 0, 0, 0.22)),
    rgba(8, 9, 10, 0.54);
  --support-card-bg-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.076), rgba(255, 255, 255, 0.018) 48%, rgba(0, 0, 0, 0.18)),
    rgba(12, 12, 12, 0.62);
  --support-metal-cta:
    radial-gradient(circle at 50% 0%, rgba(255, 248, 224, 0.26), transparent 42%),
    linear-gradient(112deg, rgba(72, 56, 31, 0.54) 0%, rgba(166, 133, 73, 0.74) 34%, rgba(236, 211, 154, 0.88) 52%, rgba(122, 91, 45, 0.62) 78%, rgba(42, 32, 20, 0.55) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.040)),
    rgba(70, 55, 32, 0.88);
  --support-metal-cta-hover:
    radial-gradient(circle at 50% 0%, rgba(255, 252, 234, 0.34), transparent 44%),
    linear-gradient(112deg, rgba(82, 62, 32, 0.60) 0%, rgba(182, 146, 80, 0.82) 34%, rgba(248, 225, 170, 0.94) 52%, rgba(138, 102, 48, 0.70) 78%, rgba(48, 36, 21, 0.60) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.052)),
    rgba(84, 64, 34, 0.92);
  --gold-main: var(--support-gold-main);
  --gold-soft: var(--support-gold-soft);
  --gold-border: var(--support-gold-line);
  --gold-glow: var(--support-gold-shadow);
  --text-main: var(--support-text-main);
  --text-secondary: var(--support-text-secondary);
  --text-muted: var(--support-text-muted);
  position: relative;
  min-height: 100%;
  padding: clamp(0.82rem, 1.08vw, 1.08rem) !important;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: clamp(1.05rem, 1.42vw, 1.34rem);
  background:
    radial-gradient(ellipse at 12% 78%, rgba(160, 116, 55, 0.080), transparent 44%),
    radial-gradient(ellipse at 84% 14%, rgba(170, 190, 220, 0.040), transparent 38%),
    linear-gradient(145deg, rgba(10, 13, 18, 0.74), rgba(3, 3, 3, 0.96) 54%),
    linear-gradient(180deg, var(--support-bg) 0%, var(--support-bg-deep) 100%);
  color: var(--support-text-main);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.050),
    0 26px 68px rgba(0, 0, 0, 0.46);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"],
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] * {
  letter-spacing: 0;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"]::before,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"]::after {
  display: none !important;
  content: none !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 58%, rgba(214, 190, 131, 0.060) 63%, transparent 71%),
    linear-gradient(14deg, transparent 0 44%, rgba(214, 190, 131, 0.035) 49%, transparent 57%);
  content: "";
  opacity: 0.54;
  mix-blend-mode: screen;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 21% 84%, rgba(219, 172, 86, 0.12), rgba(219, 172, 86, 0.030) 26%, transparent 48%),
    radial-gradient(ellipse at 78% 18%, rgba(255, 244, 218, 0.065), rgba(255, 244, 218, 0.018) 23%, transparent 42%);
  content: "";
  opacity: 0.55;
  mix-blend-mode: screen;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin {
  position: absolute;
  left: -10%;
  bottom: -20%;
  width: min(48rem, 64%);
  height: min(38rem, 64%);
  background:
    linear-gradient(90deg, transparent 0%, rgba(2, 3, 4, 0.14) 42%, rgba(2, 3, 4, 0.88) 100%),
    url("/player/assets/violin-master-real-alpha.png") left bottom / contain no-repeat;
  filter: brightness(0.42) contrast(1.08) saturate(0.62);
  opacity: 0.18;
  mix-blend-mode: soft-light;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
  position: absolute;
  right: -7%;
  bottom: -4%;
  width: min(44rem, 72%);
  height: min(24rem, 38%);
  background:
    linear-gradient(156deg, transparent 10%, rgba(184, 133, 62, 0.10) 38%, rgba(241, 221, 166, 0.11) 49%, transparent 66%),
    linear-gradient(116deg, transparent 42%, rgba(214, 190, 131, 0.070) 54%, transparent 72%),
    radial-gradient(ellipse at 72% 74%, rgba(214, 190, 131, 0.14), transparent 46%);
  opacity: 0.58;
  mix-blend-mode: screen;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::before,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active::after,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .primary-action::before {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 6.25fr) minmax(22rem, 3.75fr);
  gap: clamp(1rem, 1.3vw, 1.32rem);
  min-height: 0;
  height: 100%;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
) {
  border: 1px solid var(--support-glass-line);
  border-radius: var(--support-radius-lg);
  background: var(--support-glass-bg) !important;
  box-shadow: var(--support-glass-shadow);
  backdrop-filter: blur(22px) saturate(126%);
  -webkit-backdrop-filter: blur(22px) saturate(126%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
)::before,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
)::after {
  display: none !important;
  content: none !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-entry-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(1rem, 1.3vw, 1.24rem);
  min-height: 0;
  padding: clamp(1.16rem, 1.6vw, 1.5rem);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-entry-head {
  max-width: 42rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-entry-head .eyebrow {
  margin: 0 0 0.32rem;
  color: var(--support-gold-main);
  font-size: clamp(0.68rem, 0.72vw, 0.78rem);
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-entry-head h3 {
  margin: 0;
  color: var(--support-text-main);
  font-size: clamp(2.15rem, 4.1vw, 4.45rem);
  font-weight: 780;
  line-height: 0.98;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-entry-head p:not(.eyebrow) {
  max-width: 38rem;
  margin: 0.68rem 0 0;
  color: var(--support-text-secondary);
  font-size: clamp(0.88rem, 0.98vw, 1.02rem);
  line-height: 1.62;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.64rem, 0.86vw, 0.9rem);
  min-height: 0;
  overflow: auto;
  padding: 0.05rem 0.1rem 0.16rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card {
  position: relative;
  display: grid;
  grid-template-columns: clamp(2.68rem, 3.4vw, 3.15rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.12rem 0.76rem;
  align-items: center;
  min-height: clamp(5.1rem, 8.2vh, 6.15rem);
  padding: clamp(0.72rem, 0.9vw, 0.86rem) clamp(2.74rem, 3.2vw, 3.1rem) clamp(0.72rem, 0.9vw, 0.86rem) clamp(0.72rem, 0.9vw, 0.86rem);
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: var(--support-radius-md);
  background: var(--support-card-bg) !important;
  color: var(--support-text-main);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 14px 30px rgba(0, 0, 0, 0.32);
  text-align: left;
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::before {
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 24%),
    linear-gradient(106deg, transparent, rgba(214, 190, 131, 0.040) 54%, transparent 78%);
  content: "";
  opacity: 0.72;
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::after {
  position: absolute;
  right: 14%;
  bottom: 0;
  left: 14%;
  height: 1px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(230, 203, 142, 0.30), transparent);
  content: "";
  opacity: 0.58;
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active {
  border-color: var(--support-gold-line);
  background: var(--support-card-bg-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 16px 36px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(214, 190, 131, 0.035);
  transform: translateY(-1px);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card:active {
  transform: translateY(0);
  box-shadow:
    inset 0 0.2rem 0.7rem rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 8px 18px rgba(0, 0, 0, 0.30);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-icon {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 2;
  display: grid;
  width: clamp(2.42rem, 3.1vw, 2.86rem);
  height: clamp(2.42rem, 3.1vw, 2.86rem);
  place-items: center;
  border: 1px solid rgba(230, 203, 142, 0.22);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.026)),
    rgba(9, 9, 9, 0.62);
  color: var(--support-gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 9px 20px rgba(0, 0, 0, 0.32);
  font-size: clamp(0.82rem, 1vw, 1.05rem);
  font-weight: 760;
  line-height: 1;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-copy {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  gap: 0.2rem;
  align-content: center;
  color: inherit;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-copy em,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card > span:not(.support-card-icon):not(.support-card-arrow) {
  justify-self: start;
  padding: 0.2rem 0.46rem;
  border: 1px solid rgba(230, 203, 142, 0.30);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.020)),
    rgba(64, 48, 24, 0.34);
  color: var(--support-gold-main);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  font-size: clamp(0.58rem, 0.64vw, 0.68rem);
  font-style: normal;
  font-weight: 740;
  line-height: 1;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card strong {
  color: var(--support-text-main);
  font-size: clamp(0.92rem, 1.04vw, 1.06rem);
  font-weight: 760;
  line-height: 1.24;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--support-text-secondary);
  font-size: clamp(0.7rem, 0.77vw, 0.8rem);
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: clamp(0.72rem, 0.9vw, 0.9rem);
  display: grid;
  width: 1.72rem;
  height: 1.72rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(241, 221, 166, 0.84);
  font-size: 1.36rem;
  line-height: 1;
  transform: translateY(-50%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card:hover .support-card-arrow,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active .support-card-arrow {
  border-color: rgba(230, 203, 142, 0.36);
  background: rgba(214, 190, 131, 0.090);
  color: var(--support-gold-bright);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card b {
  position: relative;
  z-index: 1;
  grid-column: 2;
  align-self: end;
  color: rgba(214, 190, 131, 0.88);
  font-size: clamp(0.64rem, 0.7vw, 0.72rem);
  font-weight: 720;
  line-height: 1;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-service-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.82rem, 1.05vw, 1rem);
  min-height: 0;
  padding: clamp(1rem, 1.35vw, 1.26rem);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-block,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-fallback {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.082);
  border-radius: var(--support-radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.012) 44%, rgba(0, 0, 0, 0.22)),
    rgba(6, 7, 8, 0.56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 16px 36px rgba(0, 0, 0, 0.34);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-block {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: 0.74rem;
  min-height: 0;
  padding: clamp(0.94rem, 1.2vw, 1.12rem);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-block-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-block-title strong,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-copy strong {
  color: var(--support-text-main);
  font-size: clamp(1rem, 1.1vw, 1.16rem);
  font-weight: 760;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-block-title span,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-suggestion-label,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-empty-tags span {
  padding: 0.28rem 0.52rem;
  border: 1px solid rgba(230, 203, 142, 0.30);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
    rgba(64, 48, 24, 0.28);
  color: var(--support-gold-main);
  box-shadow: none;
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-focus {
  position: relative;
  display: grid;
  min-height: clamp(5.8rem, 11vh, 7.4rem);
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.060);
  border-radius: 0.88rem;
  background:
    radial-gradient(ellipse at 50% 36%, rgba(214, 190, 131, 0.105), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.006)),
    rgba(2, 3, 4, 0.32);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-orb {
  position: absolute;
  width: clamp(4.4rem, 7.4vw, 6.2rem);
  aspect-ratio: 1;
  border: 1px solid rgba(230, 203, 142, 0.24);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.13), transparent 32%),
    radial-gradient(circle, rgba(214, 190, 131, 0.14), rgba(214, 190, 131, 0.026) 58%, transparent 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 28px rgba(214, 190, 131, 0.075);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-mark {
  position: relative;
  display: grid;
  width: clamp(2.38rem, 4vw, 3.1rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(230, 203, 142, 0.34);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.030)),
    rgba(10, 10, 10, 0.54);
  color: var(--support-gold-bright);
  font-size: clamp(1.05rem, 1.6vw, 1.38rem);
  font-weight: 780;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-line {
  position: absolute;
  right: 18%;
  bottom: 1.02rem;
  left: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(241, 221, 166, 0.48), transparent);
  opacity: 0.72;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-copy {
  margin: -0.08rem 0 0;
  color: var(--support-text-secondary);
  font-size: 0.78rem;
  line-height: 1.55;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list {
  display: grid;
  gap: 0.48rem;
  min-height: 0;
  overflow: auto;
  padding-right: 0.1rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list::before,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list::after {
  display: none !important;
  content: none !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-more-button,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry {
  border: 1px solid rgba(255, 255, 255, 0.074);
  border-radius: 0.74rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.044), rgba(255, 255, 255, 0.010)),
    rgba(7, 8, 9, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 8px 18px rgba(0, 0, 0, 0.24);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button.is-active,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-more-button:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry:focus-within {
  border-color: rgba(230, 203, 142, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.014)),
    rgba(11, 11, 11, 0.54) !important;
  transform: translateY(-1px);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list strong,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-answer-content strong {
  color: var(--support-text-main);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list span,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-answer-content p {
  color: var(--support-text-secondary);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-advice-stack.support-advice-inline {
  display: block;
  min-height: auto;
  margin-top: 0.08rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-answer-content {
  display: grid;
  gap: 0.42rem;
  padding: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.064);
  border-radius: 0.78rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.006)),
    rgba(2, 3, 4, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-answer-content p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.48;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-feedback-actions {
  gap: 0.44rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-fallback {
  display: grid;
  gap: 0.72rem;
  padding: clamp(0.96rem, 1.22vw, 1.14rem);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-copy {
  display: grid;
  gap: 0.26rem;
  margin: 0;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-copy p {
  margin: 0;
  color: var(--support-text-secondary);
  font-size: 0.76rem;
  line-height: 1.5;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog-compact {
  display: grid;
  gap: 0.42rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog > span {
  color: var(--support-gold-main);
  font-size: 0.7rem;
  font-weight: 720;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog-compact textarea {
  min-height: clamp(5.2rem, 10vh, 6.4rem);
  border: 1px solid rgba(255, 255, 255, 0.086);
  border-radius: 0.82rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.010)),
    rgba(1, 2, 3, 0.42) !important;
  color: var(--support-text-main);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.095),
    inset 0 0.42rem 1.1rem rgba(0, 0, 0, 0.18);
  caret-color: var(--support-gold-bright);
  backdrop-filter: blur(14px) saturate(114%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(114%) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea::placeholder {
  color: rgba(189, 182, 170, 0.54);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea:focus {
  border-color: rgba(230, 203, 142, 0.40);
  outline: 2px solid rgba(230, 203, 142, 0.20);
  outline-offset: 2px;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.48rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry {
  min-height: 3.24rem;
  padding: 0.5rem 0.48rem;
  text-align: center;
  cursor: pointer;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry span {
  color: var(--support-text-main);
  font-size: 0.75rem;
  font-weight: 720;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry small {
  color: var(--support-text-muted);
  font-size: 0.61rem;
  line-height: 1.25;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-plus {
  display: none !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
) {
  position: relative;
  min-height: 3.2rem;
  overflow: hidden;
  border: 1px solid rgba(255, 232, 178, 0.62);
  border-radius: 0.86rem;
  background: var(--support-metal-cta) !important;
  color: #fff8e7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 18px 42px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(255, 232, 178, 0.10),
    0 0 26px rgba(214, 190, 131, 0.16);
  font-weight: 790;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.30);
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .primary-action::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 238, 0.16) 38%, rgba(255, 239, 184, 0.38) 52%, transparent 72%);
  content: "";
  opacity: 0.56;
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
):hover {
  border-color: rgba(255, 244, 214, 0.78);
  background: var(--support-metal-cta-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 20px 48px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(255, 232, 178, 0.14),
    0 0 32px rgba(214, 190, 131, 0.20);
  transform: translateY(-1px);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
):active {
  transform: translateY(0);
  box-shadow:
    inset 0 0.24rem 0.8rem rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.34);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(button, textarea):focus-visible {
  outline: 2px solid rgba(230, 203, 142, 0.26);
  outline-offset: 2px;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-wait-copy {
  margin: -0.24rem 0 0;
  color: var(--support-text-muted);
  font-size: 0.68rem;
  text-align: center;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-status {
  border-color: rgba(230, 203, 142, 0.28);
  background: rgba(58, 45, 24, 0.30);
  color: var(--support-gold-main);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-status.is-error {
  border-color: rgba(147, 68, 70, 0.46);
  background: rgba(147, 68, 70, 0.16);
  color: #F5D9D7;
}

html[data-active-module="support"] body {
  background:
    radial-gradient(ellipse at 12% 78%, rgba(160, 116, 55, 0.055), transparent 44%),
    linear-gradient(180deg, #020304 0%, #050505 100%) !important;
}

html[data-active-module="support"] body::before,
html[data-active-module="support"] .app-shell::before,
html[data-active-module="support"] .app-shell::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

@media (max-width: 980px) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-content {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-service-panel {
    min-height: 42rem;
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] {
    padding: 0.72rem !important;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin {
    width: 92%;
    opacity: 0.12;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-grid {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card {
    min-height: 5rem;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
    .support-entry-panel,
    .support-service-panel,
    .support-human-fallback
  ) {
    backdrop-filter: blur(14px) saturate(118%);
    -webkit-backdrop-filter: blur(14px) saturate(118%);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
    .support-entry-panel,
    .support-service-panel,
    .support-human-fallback
  ) {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.014)),
      rgba(9, 10, 11, 0.88) !important;
  }
}

/* Customer support final macOS Tahoe dark liquid glass override. */
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] {
  --support-bg: #020304;
  --support-bg-deep: #03060b;
  --support-blue-black: #090d14;
  --support-surface: rgba(232, 236, 242, 0.052);
  --support-surface-strong: rgba(232, 236, 242, 0.086);
  --support-surface-soft: rgba(232, 236, 242, 0.034);
  --support-glass-line: rgba(255, 255, 255, 0.105);
  --support-glass-line-strong: rgba(255, 255, 255, 0.145);
  --support-glass-warm-line: rgba(255, 255, 255, 0.105);
  --support-text-main: #F5F5F7;
  --support-text-secondary: rgba(245, 245, 247, 0.62);
  --support-text-muted: rgba(245, 245, 247, 0.36);
  --support-gold-main: #8CC7FF;
  --support-gold-soft: #2F8FFF;
  --support-gold-bright: #B8DDFF;
  --support-gold-line: rgba(95, 170, 255, 0.30);
  --support-gold-shadow: rgba(47, 143, 255, 0.14);
  --support-glass-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.082) 0%, rgba(255, 255, 255, 0.026) 48%, rgba(0, 0, 0, 0.18) 100%),
    rgba(12, 13, 15, 0.58);
  --support-glass-bg-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.098) 0%, rgba(255, 255, 255, 0.034) 48%, rgba(0, 0, 0, 0.14) 100%),
    rgba(16, 18, 21, 0.64);
  --support-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 34px 90px rgba(0, 0, 0, 0.58);
  --support-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.020) 50%, rgba(0, 0, 0, 0.18)),
    rgba(255, 255, 255, 0.034);
  --support-card-bg-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.086), rgba(255, 255, 255, 0.028) 50%, rgba(0, 0, 0, 0.14)),
    rgba(255, 255, 255, 0.052);
  --support-metal-cta:
    linear-gradient(180deg, rgba(126, 190, 255, 0.96), rgba(36, 129, 235, 0.96)),
    #2F8FFF;
  --support-metal-cta-hover:
    linear-gradient(180deg, rgba(146, 202, 255, 0.98), rgba(51, 142, 244, 0.98)),
    #3A9BFF;
  border-color: rgba(255, 255, 255, 0.060);
  background:
    radial-gradient(ellipse at 17% 16%, rgba(47, 143, 255, 0.105), transparent 32%),
    radial-gradient(ellipse at 76% 12%, rgba(210, 224, 255, 0.052), transparent 34%),
    radial-gradient(ellipse at 58% 88%, rgba(78, 70, 110, 0.105), transparent 42%),
    linear-gradient(145deg, var(--support-bg), var(--support-blue-black) 46%, var(--support-bg-deep)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.060),
    0 42px 130px rgba(0, 0, 0, 0.56);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::before {
  background:
    linear-gradient(118deg, transparent 0 52%, rgba(255, 255, 255, 0.030) 57%, transparent 66%),
    linear-gradient(18deg, transparent 0 38%, rgba(47, 143, 255, 0.050) 47%, transparent 62%);
  opacity: 0.76;
  mix-blend-mode: screen;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(47, 143, 255, 0.075), transparent 40%),
    radial-gradient(ellipse at 84% 12%, rgba(245, 245, 247, 0.040), transparent 36%);
  opacity: 0.48;
  mix-blend-mode: screen;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin {
  opacity: 0.10;
  filter: brightness(0.28) contrast(1.08) saturate(0.38);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
  background:
    linear-gradient(118deg, transparent 0 44%, rgba(47, 143, 255, 0.060) 52%, transparent 66%),
    radial-gradient(ellipse at 70% 76%, rgba(150, 190, 255, 0.075), transparent 46%);
  opacity: 0.36;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
) {
  border-color: rgba(255, 255, 255, 0.105);
  background: var(--support-glass-bg) !important;
  box-shadow: var(--support-glass-shadow);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card {
  border-color: rgba(255, 255, 255, 0.098);
  background: var(--support-card-bg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.105),
    0 12px 34px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(24px) saturate(138%);
  -webkit-backdrop-filter: blur(24px) saturate(138%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.066), transparent 28%),
    linear-gradient(106deg, transparent, rgba(47, 143, 255, 0.034) 54%, transparent 78%);
  opacity: 0.72;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::after {
  background: linear-gradient(90deg, transparent, rgba(126, 190, 255, 0.32), transparent);
  opacity: 0.42;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active {
  border-color: rgba(95, 170, 255, 0.34);
  background: var(--support-card-bg-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.145),
    0 14px 38px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(47, 143, 255, 0.040);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-icon {
  border-color: rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.024)),
    rgba(255, 255, 255, 0.044);
  color: rgba(245, 245, 247, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.28);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-copy em,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card > span:not(.support-card-icon):not(.support-card-arrow) {
  border-color: rgba(255, 255, 255, 0.092);
  background: rgba(255, 255, 255, 0.052);
  color: rgba(245, 245, 247, 0.42);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-arrow {
  border-color: rgba(255, 255, 255, 0.080);
  background: rgba(255, 255, 255, 0.040);
  color: #7DBDFF;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card:hover .support-card-arrow,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active .support-card-arrow {
  border-color: rgba(95, 170, 255, 0.38);
  background: rgba(47, 143, 255, 0.12);
  color: #B8DDFF;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card b,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-entry-head .eyebrow,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog > span {
  color: #8CC7FF;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-block,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-fallback {
  border-color: rgba(255, 255, 255, 0.095);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.020)),
    rgba(0, 0, 0, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.090),
    0 16px 38px rgba(0, 0, 0, 0.30);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-block-title span,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-suggestion-label,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-empty-tags span {
  border-color: rgba(47, 143, 255, 0.22);
  background: rgba(47, 143, 255, 0.12);
  color: #9FD1FF;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-focus {
  border-color: rgba(255, 255, 255, 0.078);
  background:
    radial-gradient(circle at 50% 42%, rgba(47, 143, 255, 0.105), transparent 46%),
    rgba(0, 0, 0, 0.30);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-orb {
  border-color: rgba(95, 170, 255, 0.20);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.10), transparent 32%),
    radial-gradient(circle, rgba(47, 143, 255, 0.12), rgba(47, 143, 255, 0.024) 58%, transparent 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 20px rgba(47, 143, 255, 0.055);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-mark {
  border-color: rgba(95, 170, 255, 0.30);
  color: #8CC7FF;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-line {
  background: linear-gradient(90deg, transparent, rgba(126, 190, 255, 0.34), transparent);
  opacity: 0.50;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-more-button,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry {
  border-color: rgba(255, 255, 255, 0.082);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.012)),
    rgba(8, 10, 13, 0.48) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button.is-active,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-more-button:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry:focus-within {
  border-color: rgba(95, 170, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.016)),
    rgba(10, 14, 20, 0.54) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-answer-content {
  border-color: rgba(255, 255, 255, 0.072);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.040), rgba(255, 255, 255, 0.008)),
    rgba(0, 0, 0, 0.30) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog-compact textarea {
  border-color: rgba(255, 255, 255, 0.090);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.010)),
    rgba(0, 0, 0, 0.36) !important;
  caret-color: #8CC7FF;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea:focus {
  border-color: rgba(95, 170, 255, 0.38);
  outline-color: rgba(47, 143, 255, 0.22);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
) {
  border-color: rgba(126, 190, 255, 0.45);
  border-radius: 999px;
  background: var(--support-metal-cta) !important;
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 16px 38px rgba(47, 143, 255, 0.18),
    0 16px 42px rgba(0, 0, 0, 0.36);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .primary-action::before {
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.18) 42%, rgba(255, 255, 255, 0.34) 52%, transparent 72%);
  opacity: 0.38;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
):hover {
  border-color: rgba(184, 221, 255, 0.58);
  background: var(--support-metal-cta-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 18px 44px rgba(47, 143, 255, 0.22),
    0 18px 46px rgba(0, 0, 0, 0.40);
}

html[data-active-module="support"] body {
  background:
    radial-gradient(ellipse at 17% 16%, rgba(47, 143, 255, 0.085), transparent 32%),
    radial-gradient(ellipse at 76% 12%, rgba(210, 224, 255, 0.040), transparent 34%),
    linear-gradient(145deg, #020304, #090d14 46%, #03060b) !important;
}

/* Tuner mechanical meter rebuild: clear horizontal scale, fixed center line, moving needle only. */
html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-cent-display {
  --dial-accent: rgba(220, 190, 118, 0.98);
  --dial-soft: rgba(220, 190, 118, 0.16);
  --tuner-flat-color: rgba(138, 185, 217, 0.94);
  --tuner-sharp-color: rgba(224, 156, 116, 0.94);
  display: grid;
  grid-template-rows: auto minmax(13.5rem, 1fr);
  gap: clamp(0.72rem, 0.95vw, 0.95rem);
  padding: clamp(0.86rem, 1.08vw, 1.08rem);
  border-color: rgba(220, 190, 118, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    radial-gradient(ellipse at 50% 116%, rgba(220, 190, 118, 0.08), transparent 42%),
    rgba(5, 8, 12, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 0.85rem 2rem rgba(0, 0, 0, 0.22);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-cent-display.is-tuned,
html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-cent-display.is-accurate {
  --dial-accent: rgba(220, 190, 118, 0.98);
  --dial-soft: rgba(220, 190, 118, 0.18);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-cent-display.is-flat {
  --dial-accent: var(--tuner-flat-color);
  --dial-soft: rgba(138, 185, 217, 0.16);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-cent-display.is-sharp {
  --dial-accent: var(--tuner-sharp-color);
  --dial-soft: rgba(224, 156, 116, 0.16);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-meter-head {
  display: grid;
  grid-template-columns: minmax(7rem, 0.78fr) repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(0.48rem, 0.72vw, 0.72rem);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-note-readout,
html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-meter-stat {
  display: grid;
  align-content: center;
  min-height: 4.75rem;
  padding: clamp(0.68rem, 0.88vw, 0.86rem);
  border: 1px solid rgba(236, 224, 188, 0.11);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(2, 5, 8, 0.36);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-note-readout {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "label label"
    "note octave";
  column-gap: 0.52rem;
  align-items: baseline;
  border-color: rgba(220, 190, 118, 0.18);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-note-readout span,
html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-meter-stat span {
  color: rgba(219, 229, 234, 0.56);
  font-size: 0.7rem;
  font-weight: 780;
  line-height: 1;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-note-readout span {
  grid-area: label;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-note-readout strong {
  grid-area: note;
  color: rgba(255, 246, 220, 0.98);
  font-size: clamp(3rem, 5.2vw, 5.6rem);
  font-weight: 760;
  line-height: 0.86;
  letter-spacing: 0;
  text-shadow: 0 0 1.2rem rgba(220, 190, 118, 0.16);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-note-readout em {
  grid-area: octave;
  color: rgba(220, 190, 118, 0.82);
  font-size: clamp(1rem, 1.24vw, 1.25rem);
  font-style: normal;
  font-weight: 800;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-meter-stat {
  gap: 0.26rem;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-meter-stat strong {
  color: rgba(247, 249, 244, 0.94);
  font-size: clamp(1.28rem, 1.78vw, 1.92rem);
  font-weight: 760;
  line-height: 1;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-meter-stat.is-offset strong {
  color: var(--dial-accent);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-meter-stat strong small {
  margin-left: 0.18rem;
  color: inherit;
  font-size: 0.48em;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-meter-stat em {
  color: rgba(219, 229, 234, 0.62);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 650;
  line-height: 1.2;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-cent-copy {
  display: none;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-cent-gauge {
  min-height: clamp(13.4rem, 27vh, 18rem);
  overflow: hidden;
  border-color: rgba(220, 190, 118, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    radial-gradient(ellipse at 50% 120%, rgba(220, 190, 118, 0.1), transparent 44%),
    rgba(3, 7, 10, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1.2rem 2.8rem rgba(0, 0, 0, 0.2);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-cent-gauge::before,
html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-cent-gauge::after {
  display: none;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-precision-dial {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 52%;
  bottom: auto;
  width: auto;
  height: clamp(7.1rem, 11.4vw, 9.6rem);
  aspect-ratio: auto;
  transform: translateY(-50%);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.028)),
    linear-gradient(90deg, rgba(138, 185, 217, 0.12), transparent 31%, rgba(220, 190, 118, 0.08) 50%, transparent 69%, rgba(224, 156, 116, 0.12));
  filter: none;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-precision-dial::before {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(138, 185, 217, 0.56), rgba(232, 226, 205, 0.36) 47%, rgba(220, 190, 118, 0.92) 50%, rgba(232, 226, 205, 0.36) 53%, rgba(224, 156, 116, 0.56));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  content: "";
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-precision-dial::after {
  position: absolute;
  left: 50%;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 4.2rem;
  height: auto;
  transform: translateX(-50%);
  border: 1px solid rgba(220, 190, 118, 0.18);
  border-width: 0 1px;
  border-radius: 0;
  background:
    linear-gradient(90deg, transparent, rgba(220, 190, 118, 0.075) 50%, transparent);
  box-shadow: none;
  content: "";
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-dial-safe-zone,
html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-dial-alert-zone {
  display: none;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-precision-dial > i:not(.tuner-dial-arc) {
  position: absolute;
  left: var(--tick-x);
  top: 50%;
  bottom: auto;
  width: 1px;
  height: 2rem;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-precision-dial > i:not(.tuner-dial-arc)::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(226, 232, 224, 0.34);
  content: "";
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-precision-dial > i.is-major::before {
  width: 2px;
  height: 3.35rem;
  background: rgba(236, 222, 181, 0.72);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-precision-dial > i.is-center::before {
  width: 3px;
  height: 5.6rem;
  background: rgba(255, 242, 202, 0.96);
  box-shadow: 0 0 0.78rem rgba(220, 190, 118, 0.28);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-precision-dial > i > span {
  position: absolute;
  left: 50%;
  top: calc(50% + 2.45rem);
  transform: translateX(-50%);
  color: rgba(224, 230, 222, 0.56);
  font-size: 0.58rem;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-precision-dial > i.is-minor > span {
  display: none;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-precision-dial > i.is-center > span {
  top: calc(50% + 3.2rem);
  color: rgba(255, 242, 202, 0.96);
  font-size: 0.78rem;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-dial-zero {
  left: 50%;
  top: 0.36rem;
  bottom: 0.36rem;
  z-index: 4;
  width: 2px;
  height: auto;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(255, 242, 202, 0.96) 14% 86%, transparent);
  box-shadow: 0 0 1rem rgba(220, 190, 118, 0.28);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-dial-needle,
html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-dial-glow {
  left: var(--needle-x, 50%);
  top: 50%;
  bottom: auto;
  z-index: 5;
  transform-origin: center;
  transform: translate(-50%, -50%);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-dial-needle {
  width: 0.16rem;
  height: clamp(6.4rem, 10.4vw, 8.7rem);
  margin: 0;
  border-radius: 999px;
  clip-path: none;
  background:
    linear-gradient(180deg, transparent 0%, var(--dial-accent) 8%, rgba(255, 250, 232, 0.98) 50%, var(--dial-accent) 92%, transparent 100%);
  filter:
    drop-shadow(0 0 0.36rem var(--dial-soft))
    drop-shadow(0 0 0.62rem color-mix(in srgb, var(--dial-accent) 34%, transparent));
  transition:
    left 180ms cubic-bezier(0.2, 0.7, 0.2, 1),
    background 150ms ease,
    filter 150ms ease;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-dial-glow {
  width: 0.74rem;
  height: 0.74rem;
  margin: 0;
  border: 1px solid rgba(255, 245, 214, 0.82);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 232, 0.98), var(--dial-accent) 60%, rgba(255, 255, 255, 0.02));
  box-shadow:
    0 0 0 0.13rem var(--dial-soft),
    0 0 0.9rem color-mix(in srgb, var(--dial-accent) 36%, transparent);
  transition:
    left 180ms cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .dial-side {
  top: 0.9rem;
  z-index: 6;
  padding: 0.34rem 0.54rem;
  border: 1px solid rgba(220, 190, 118, 0.12);
  border-radius: 8px;
  background: rgba(2, 5, 8, 0.46);
  backdrop-filter: none;
  color: rgba(222, 229, 224, 0.72);
  font-size: 0.76rem;
  font-weight: 760;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .dial-side.is-flat {
  left: 4%;
  color: rgba(170, 204, 226, 0.96);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .dial-side.is-sharp {
  right: 4%;
  color: rgba(232, 180, 142, 0.96);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .dial-number {
  bottom: 0.72rem;
  z-index: 6;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(224, 230, 222, 0.56);
  font-size: 0.72rem;
  font-weight: 820;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .dial-left {
  left: 7%;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .dial-right {
  right: 7%;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .dial-mid {
  left: 50%;
  color: rgba(255, 242, 202, 0.96);
  transform: translateX(-50%);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-debug-panel {
  margin-top: 0.64rem;
  border: 1px solid rgba(220, 190, 118, 0.14);
  border-radius: 10px;
  background: rgba(2, 5, 8, 0.48);
  color: rgba(226, 232, 224, 0.74);
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-debug-panel summary {
  cursor: pointer;
  padding: 0.56rem 0.72rem;
  color: rgba(220, 190, 118, 0.9);
  font-size: 0.72rem;
  font-weight: 820;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-debug-panel > div {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.7fr) minmax(0, 1fr);
  gap: 0.34rem 0.68rem;
  padding: 0 0.72rem 0.72rem;
  font-size: 0.68rem;
  line-height: 1.25;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-debug-panel span {
  color: rgba(219, 229, 234, 0.48);
  font-weight: 760;
}

html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-debug-panel strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: rgba(244, 246, 240, 0.82);
  font-weight: 720;
}

@media (max-width: 880px) {
  html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-meter-head {
    grid-template-columns: 1fr;
  }

  html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-note-readout,
  html[data-active-module="tuner"] .content-grid[data-module="tuner"] .tuner-meter-stat {
    min-height: 4rem;
  }
}

/* Final override: AI生曲任务中心出现后仍保持完整页面流。 */
html[data-active-module="pieces"] .content-grid[data-module="pieces"] {
  grid-template-rows: auto minmax(24rem, auto) auto !important;
  align-content: start;
  height: auto !important;
  min-height: 100%;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding-bottom: clamp(1rem, 1.8vw, 1.6rem);
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] > .score-generate-panel,
html[data-active-module="pieces"] .content-grid[data-module="pieces"] > .score-task-center {
  grid-column: 1 / -1;
  min-width: 0;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-panel {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.32fr);
  min-height: clamp(24rem, 52vh, 36rem);
  height: auto;
  max-height: none;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-upload {
  min-height: clamp(24rem, 52vh, 36rem);
  height: auto;
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-task-flow {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-task-meta {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-task-step strong,
html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-task-step p,
html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-task-meta small,
html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-status p {
  overflow-wrap: anywhere;
  white-space: normal;
}

html[data-active-module="pieces"] .score-generate-status.is-processing,
html[data-active-module="pieces"] .score-generate-status.is-review,
html[data-active-module="pieces"] .score-generate-status.is-queued {
  border-color: rgba(228, 199, 127, 0.32);
}

@media (max-width: 900px) {
  html[data-active-module="pieces"] .content-grid[data-module="pieces"] .score-generate-panel {
    grid-template-columns: 1fr;
  }
}

/* Customer support afternoon v34 restore.
   Keeps the客服中心 at the May 30 afternoon black-gold glass state while leaving layout and copy untouched. */
html[data-active-module="support"] body {
  background:
    radial-gradient(ellipse at 14% 82%, rgba(160, 116, 54, 0.070), transparent 42%),
    radial-gradient(ellipse at 76% 14%, rgba(255, 238, 196, 0.040), transparent 32%),
    linear-gradient(180deg, #030303 0%, #010101 100%) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] {
  --support-bg: #030303;
  --support-bg-deep: #010101;
  --support-surface: rgba(8, 8, 7, 0.48);
  --support-surface-strong: rgba(12, 12, 10, 0.58);
  --support-glass-line: rgba(255, 255, 255, 0.105);
  --support-highlight: rgba(255, 255, 255, 0.13);
  --text-main: #F4EFE6;
  --text-card-title: #F4EFE6;
  --text-secondary: #BDB6AA;
  --text-description: #ABA398;
  --text-muted: #837C72;
  --gold-main: #F0DCA8;
  --gold-soft: #C8A96A;
  --gold-dim: rgba(240, 220, 168, 0.88);
  --gold-border: rgba(255, 232, 178, 0.62);
  --gold-glow: rgba(240, 205, 132, 0.26);
  --wine-main: #8B4147;
  --wine-soft: rgba(139, 65, 71, 0.18);
  --support-major-glass:
    linear-gradient(180deg, rgba(255, 255, 255, 0.074) 0%, rgba(255, 255, 255, 0.026) 34%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(138deg, rgba(205, 185, 138, 0.040) 0%, transparent 32%, rgba(255, 255, 255, 0.012) 100%),
    var(--support-surface);
  --support-card-glass:
    linear-gradient(180deg, rgba(255, 255, 255, 0.060) 0%, rgba(255, 255, 255, 0.018) 34%, rgba(0, 0, 0, 0.22) 100%),
    rgba(4, 4, 3, 0.54);
  --support-control-glass:
    linear-gradient(180deg, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.012)),
    rgba(5, 5, 4, 0.56);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 24px 64px rgba(0, 0, 0, 0.52);
  --champagne-metal:
    radial-gradient(circle at 50% 0%, rgba(255, 248, 222, 0.34), transparent 42%),
    linear-gradient(112deg, rgba(86, 67, 36, 0.28) 0%, rgba(196, 169, 108, 0.48) 34%, rgba(255, 236, 185, 0.72) 53%, rgba(128, 98, 48, 0.38) 78%, rgba(48, 38, 24, 0.26) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.045)),
    rgba(112, 92, 58, 0.62);
  --champagne-metal-hover:
    radial-gradient(circle at 50% 0%, rgba(255, 252, 232, 0.42), transparent 44%),
    linear-gradient(112deg, rgba(96, 74, 38, 0.34) 0%, rgba(212, 184, 118, 0.58) 34%, rgba(255, 241, 198, 0.82) 53%, rgba(148, 112, 54, 0.44) 78%, rgba(58, 44, 24, 0.30) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.060)),
    rgba(130, 104, 62, 0.70);
  --primary-action-bg: var(--champagne-metal);
  --primary-action-bg-hover: var(--champagne-metal-hover);
  --primary-action-sheen: linear-gradient(104deg, transparent 0%, rgba(255, 255, 238, 0.18) 35%, rgba(255, 239, 184, 0.46) 52%, transparent 73%);
  color: var(--text-main) !important;
  border-color: rgba(255, 255, 255, 0.070) !important;
  background:
    radial-gradient(ellipse at 14% 82%, rgba(160, 116, 54, 0.070), transparent 42%),
    radial-gradient(ellipse at 76% 14%, rgba(255, 238, 196, 0.040), transparent 32%),
    linear-gradient(180deg, var(--support-bg) 0%, var(--support-bg-deep) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.060),
    0 24px 66px rgba(0, 0, 0, 0.48) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 19% 74%, rgba(205, 146, 72, 0.080), transparent 42%),
    radial-gradient(ellipse at 72% 15%, rgba(255, 235, 188, 0.036), transparent 34%),
    linear-gradient(180deg, #050505 0%, #020202 100%) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::before,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
  position: absolute;
  inset: -16%;
  content: "";
  pointer-events: none;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::before {
  background:
    radial-gradient(ellipse at 17% 78%, rgba(205, 185, 138, 0.11), transparent 42%),
    radial-gradient(ellipse at 78% 12%, rgba(255, 242, 214, 0.050), transparent 34%) !important;
  opacity: 0.56 !important;
  mix-blend-mode: screen;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
  background:
    radial-gradient(ellipse at 18% 24%, rgba(255, 225, 158, 0.30), rgba(255, 225, 158, 0.12) 18%, rgba(255, 225, 158, 0.035) 34%, transparent 52%),
    radial-gradient(ellipse at 31% 76%, rgba(232, 170, 72, 0.28), rgba(232, 170, 72, 0.105) 20%, rgba(232, 170, 72, 0.032) 38%, transparent 58%),
    radial-gradient(ellipse at 82% 17%, rgba(255, 238, 190, 0.32), rgba(255, 238, 190, 0.12) 18%, rgba(255, 238, 190, 0.035) 34%, transparent 54%),
    radial-gradient(ellipse at 78% 80%, rgba(240, 205, 132, 0.24), rgba(240, 205, 132, 0.090) 20%, rgba(240, 205, 132, 0.030) 38%, transparent 58%) !important;
  opacity: 0.78 !important;
  mix-blend-mode: screen;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin {
  inset: -3% -2% -8% -8%;
  width: auto;
  height: auto;
  background:
    linear-gradient(90deg, rgba(2, 2, 2, 0.04) 0%, rgba(2, 2, 2, 0.22) 34%, rgba(2, 2, 2, 0.76) 72%, rgba(2, 2, 2, 0.94) 100%),
    radial-gradient(ellipse at 10% 60%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.24) 56%, rgba(0, 0, 0, 0.70) 84%),
    url("/player/assets/violin-master-real-alpha.png") left center / auto 118% no-repeat !important;
  filter: brightness(0.72) contrast(1.08) saturate(0.58) !important;
  mix-blend-mode: soft-light;
  opacity: 0.34 !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
  inset: -6%;
  height: auto;
  background:
    linear-gradient(113deg, transparent 12%, rgba(240, 220, 168, 0) 25%, rgba(240, 220, 168, 0.27) 38%, rgba(255, 242, 203, 0.16) 44%, transparent 58%),
    linear-gradient(156deg, transparent 45%, rgba(176, 118, 48, 0.13) 60%, rgba(244, 202, 122, 0.26) 75%, transparent 89%),
    radial-gradient(ellipse at 82% 8%, rgba(240, 220, 168, 0.30), transparent 28%) !important;
  mix-blend-mode: screen;
  opacity: 0.62 !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
) {
  border: 1px solid var(--support-glass-line) !important;
  background: var(--support-major-glass) !important;
  color: var(--text-main) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(20px) saturate(124%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(124%) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
)::before {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 20%),
    linear-gradient(112deg, transparent 0%, rgba(205, 185, 138, 0.035) 44%, transparent 68%) !important;
  content: "";
  opacity: 0.52;
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-guess-block,
  .support-answer-content,
  .support-guess-list button,
  .support-upload-entry,
  .support-more-button
) {
  border: 1px solid var(--support-glass-line) !important;
  background: var(--support-card-glass) !important;
  color: var(--text-main) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 12px 30px rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card {
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::before {
  display: block;
  position: absolute;
  inset: 1px;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.082), transparent 22%),
    linear-gradient(108deg, transparent 0%, rgba(205, 185, 138, 0.030) 48%, transparent 73%) !important;
  content: "";
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  transform: none;
  animation: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::after {
  position: absolute;
  top: 0;
  right: 14%;
  left: 14%;
  width: auto;
  height: 1px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), rgba(205, 185, 138, 0.22), transparent) !important;
  content: "";
  opacity: 0.52;
  pointer-events: none;
  z-index: 1;
  transform: none;
  animation: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active {
  transform: translateY(-1px);
  border-color: rgba(244, 218, 154, 0.44) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.074), rgba(255, 255, 255, 0.024) 34%, rgba(0, 0, 0, 0.18)),
    rgba(12, 10, 7, 0.64) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 14px 34px rgba(0, 0, 0, 0.44),
    0 0 18px rgba(226, 200, 132, 0.10) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active::after {
  inset: -1px;
  width: auto;
  height: auto;
  border: 1px solid rgba(255, 232, 178, 0.50);
  border-radius: inherit;
  background: transparent !important;
  opacity: 0.55;
  transform: scale(1);
  transform-origin: center;
  will-change: opacity, transform;
  animation: supportActiveCardEdgeBreath 3.6s ease-in-out infinite;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-icon {
  border-color: rgba(226, 205, 160, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.024)),
    rgba(34, 28, 18, 0.58) !important;
  color: var(--gold-main) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 8px 22px rgba(0, 0, 0, 0.30) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-arrow {
  border-color: rgba(226, 205, 160, 0.22) !important;
  background: rgba(40, 33, 22, 0.36) !important;
  color: rgba(240, 220, 168, 0.78) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card:hover .support-card-arrow,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active .support-card-arrow {
  border-color: rgba(255, 232, 178, 0.46) !important;
  background: rgba(70, 54, 28, 0.50) !important;
  color: #F6E5B8 !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-board-card span,
  .support-card-copy em,
  .support-block-title span,
  .support-suggestion-label,
  .support-empty-tags span
) {
  border-color: rgba(255, 232, 178, 0.58) !important;
  background:
    linear-gradient(110deg, rgba(255, 239, 190, 0.18), rgba(156, 117, 54, 0.22) 45%, rgba(255, 247, 218, 0.20)),
    rgba(70, 54, 28, 0.56) !important;
  color: #F6E5B8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 0 18px rgba(240, 205, 132, 0.18) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .eyebrow,
  .support-board-card b,
  .support-human-dialog > span
) {
  color: var(--gold-dim) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-head h3,
  .support-board-card strong,
  .support-block-title strong,
  .support-human-copy strong,
  .support-answer-content strong
) {
  color: var(--text-main) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-head p:not(.eyebrow),
  .support-board-card small,
  .support-guess-list span,
  .support-answer-content p,
  .support-human-copy p,
  .support-wait-copy
) {
  color: var(--text-secondary) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-block,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-fallback {
  border-color: var(--support-glass-line) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.018) 30%, rgba(0, 0, 0, 0.24)),
    rgba(5, 5, 4, 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 12px 30px rgba(0, 0, 0, 0.38) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-focus {
  border-color: rgba(255, 232, 178, 0.18) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(240, 220, 168, 0.12), transparent 46%),
    rgba(0, 0, 0, 0.30) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-orb {
  border-color: rgba(255, 232, 178, 0.24) !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.12), transparent 32%),
    radial-gradient(circle, rgba(240, 220, 168, 0.14), rgba(240, 220, 168, 0.030) 58%, transparent 70%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 20px rgba(240, 205, 132, 0.06) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-mark {
  border-color: rgba(255, 232, 178, 0.34) !important;
  color: var(--gold-main) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-line {
  background: linear-gradient(90deg, transparent, rgba(240, 220, 168, 0.46), transparent) !important;
  opacity: 0.60 !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-more-button,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry {
  cursor: pointer;
  border-color: rgba(255, 255, 255, 0.095) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.012)),
    rgba(5, 5, 4, 0.56) !important;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-list button.is-active,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry:focus-within,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-more-button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 232, 178, 0.44) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.018)),
    rgba(14, 12, 9, 0.64) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 14px 34px rgba(0, 0, 0, 0.44),
    0 0 18px rgba(226, 200, 132, 0.10) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry span {
  color: var(--gold-main) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-entry small {
  color: var(--text-muted) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog-compact textarea {
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.010)),
    rgba(0, 0, 0, 0.46) !important;
  color: var(--text-main) !important;
  caret-color: var(--gold-main) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38),
    0 10px 24px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(12px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(112%) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea:focus {
  border-color: rgba(226, 205, 160, 0.38) !important;
  outline: 2px solid rgba(226, 205, 160, 0.22) !important;
  outline-offset: 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.016)),
    rgba(4, 4, 3, 0.58) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255, 238, 194, 0.78) !important;
  border-radius: 12px !important;
  background: var(--champagne-metal) !important;
  color: #fff6df !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 18px 46px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 232, 178, 0.13),
    0 0 42px rgba(240, 205, 132, 0.24) !important;
  font-weight: 850;
  letter-spacing: 0;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .primary-action:not(.is-loading)::before {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--primary-action-sheen) !important;
  content: "";
  opacity: 0.40;
  pointer-events: none;
  transform: scaleX(1);
  transition: opacity 150ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .primary-action:not(.is-loading)::after {
  display: block;
  position: absolute;
  inset: 1px;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 42%) !important;
  content: "";
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
):hover {
  transform: translateY(-1px);
  border-color: rgba(255, 246, 218, 0.90) !important;
  background: var(--champagne-metal-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 20px 52px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 232, 178, 0.18),
    0 0 52px rgba(240, 205, 132, 0.34) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .primary-action:hover::before {
  opacity: 0.90;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(.primary-action, .support-secondary-action):active {
  transform: translateY(0);
  box-shadow:
    inset 0 0.18rem 0.68rem rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 10px 26px rgba(0, 0, 0, 0.36) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-fallback:not(:has(.support-human-dialog textarea:not(:placeholder-shown))) .primary-action:not(.is-loading)::before {
  animation: none;
  opacity: 0.40;
  transform: scaleX(1);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-fallback:has(.support-human-dialog textarea:not(:placeholder-shown)) .primary-action:not(.is-loading)::before {
  will-change: opacity, transform;
  animation: supportSubmitSheenBreath 3.6s ease-in-out infinite;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(button, textarea):focus-visible {
  outline: 2px solid rgba(226, 205, 160, 0.28) !important;
  outline-offset: 2px;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(button:disabled, .support-secondary-action.is-loading) {
  border-color: rgba(255, 255, 255, 0.080) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.040), rgba(255, 255, 255, 0.010)),
    rgba(18, 17, 15, 0.56) !important;
  color: rgba(189, 182, 170, 0.56) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.080) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-secondary-action.is-loading::before {
  border-color: rgba(255, 255, 255, 0.16) !important;
  border-top-color: var(--gold-main) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-status {
  border-color: rgba(226, 205, 160, 0.28) !important;
  background: rgba(54, 43, 26, 0.36) !important;
  color: var(--gold-main) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-status.is-error {
  border-color: rgba(139, 65, 71, 0.48) !important;
  background: var(--wine-soft) !important;
  color: var(--text-main) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-status.is-loading {
  border-color: rgba(226, 205, 160, 0.22) !important;
  background: rgba(24, 21, 16, 0.46) !important;
  color: var(--text-secondary) !important;
}

@keyframes supportActiveCardEdgeBreath {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }

  50% {
    opacity: 0.90;
    transform: scale(1.006);
  }

  100% {
    opacity: 0.55;
    transform: scale(1);
  }
}

@keyframes supportSubmitSheenBreath {
  0% {
    opacity: 0.42;
    transform: scaleX(1);
  }

  50% {
    opacity: 0.82;
    transform: scaleX(1.008);
  }

  100% {
    opacity: 0.42;
    transform: scaleX(1);
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
    .support-entry-panel,
    .support-service-panel,
    .support-human-fallback
  ) {
    backdrop-filter: blur(14px) saturate(116%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(116%) !important;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin {
    opacity: 0.22 !important;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
    opacity: 0.66 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active::after,
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-fallback:has(.support-human-dialog textarea:not(:placeholder-shown)) .primary-action:not(.is-loading)::before {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* Customer support afternoon v33 rollback.
   One step before v34: keep the champagne metal/glow pass, restore the under-glass background breathing. */
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::before {
  opacity: 0.56 !important;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform, opacity !important;
  animation: supportBlackGoldAmbient 24s ease-in-out infinite !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
  opacity: 0.78 !important;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform, opacity !important;
  animation: supportGoldHaloBreathStrong 15s ease-in-out infinite !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin {
  transform-origin: left center;
  will-change: transform, opacity !important;
  animation: supportBlackGoldViolinBreath 28s ease-in-out infinite !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
  will-change: transform, opacity !important;
  animation: supportBlackGoldFlowBreath 26s ease-in-out infinite !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active::after {
  top: 0;
  right: 14%;
  bottom: auto;
  left: 14%;
  width: auto;
  height: 1px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), rgba(205, 185, 138, 0.22), transparent) !important;
  opacity: 0.52;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-fallback .primary-action:not(.is-loading)::before {
  opacity: 0.74;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
    opacity: 0.66 !important;
    animation-duration: 18s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::before,
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after,
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin,
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* Customer support afternoon v32 rollback.
   One more step back: brighter champagne-gold glow, before the stronger v33 champagne-metal CTA. */
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] {
  --gold-main: #E2C884;
  --gold-soft: #C5A25E;
  --gold-dim: rgba(226, 200, 132, 0.82);
  --gold-border: rgba(244, 218, 154, 0.46);
  --gold-glow: rgba(226, 200, 132, 0.18);
  --support-glass-warm: rgba(244, 218, 154, 0.38);
  --primary-action-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.076) 42%, rgba(0, 0, 0, 0.14) 100%),
    linear-gradient(106deg, rgba(226, 200, 132, 0.46), rgba(98, 74, 34, 0.32) 58%, rgba(22, 18, 12, 0.28)),
    rgba(34, 27, 17, 0.92);
  --primary-action-bg-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.090) 42%, rgba(0, 0, 0, 0.10) 100%),
    linear-gradient(106deg, rgba(236, 210, 142, 0.54), rgba(114, 84, 36, 0.36) 58%, rgba(28, 21, 12, 0.30)),
    rgba(42, 32, 18, 0.95);
  --primary-action-sheen: linear-gradient(102deg, transparent 0%, rgba(255, 248, 224, 0.16) 40%, rgba(255, 228, 160, 0.34) 52%, transparent 72%);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
  inset: -12%;
  background:
    radial-gradient(ellipse at 24% 30%, rgba(255, 222, 150, 0.18), rgba(255, 222, 150, 0.052) 18%, transparent 36%),
    radial-gradient(ellipse at 29% 72%, rgba(226, 174, 88, 0.16), rgba(226, 174, 88, 0.045) 20%, transparent 40%),
    radial-gradient(ellipse at 79% 21%, rgba(255, 232, 178, 0.18), rgba(255, 232, 178, 0.050) 17%, transparent 35%),
    radial-gradient(ellipse at 78% 78%, rgba(226, 200, 132, 0.12), rgba(226, 200, 132, 0.034) 19%, transparent 38%) !important;
  mix-blend-mode: screen;
  opacity: 0.58 !important;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform, opacity !important;
  animation: supportGoldHaloBreath 18s ease-in-out infinite !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
  background:
    linear-gradient(114deg, transparent 14%, rgba(226, 200, 132, 0) 27%, rgba(226, 200, 132, 0.19) 38%, rgba(255, 238, 188, 0.10) 43%, transparent 56%),
    linear-gradient(156deg, transparent 47%, rgba(176, 118, 48, 0.095) 62%, rgba(244, 202, 122, 0.18) 75%, transparent 88%),
    radial-gradient(ellipse at 82% 8%, rgba(226, 200, 132, 0.20), transparent 26%) !important;
  opacity: 0.46 !important;
  will-change: transform, opacity !important;
  animation: supportBlackGoldFlowBreath 26s ease-in-out infinite !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-board-card span,
  .support-card-copy em,
  .support-block-title span,
  .support-suggestion-label,
  .support-empty-tags span
) {
  border-color: rgba(244, 218, 154, 0.44) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.018)),
    rgba(40, 33, 22, 0.46) !important;
  color: var(--gold-main) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 0 14px rgba(226, 200, 132, 0.08) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-board-card:hover,
  .support-board-card.is-active,
  .support-guess-list button:hover,
  .support-guess-list button.is-active,
  .support-upload-entry:hover,
  .support-upload-entry:focus-within
) {
  border-color: rgba(244, 218, 154, 0.44) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 14px 34px rgba(0, 0, 0, 0.44),
    0 0 18px rgba(226, 200, 132, 0.10) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
) {
  border-color: rgba(250, 226, 166, 0.68) !important;
  background: var(--primary-action-bg) !important;
  color: var(--text-main) !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 18px 46px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(226, 200, 132, 0.085),
    0 0 30px rgba(226, 200, 132, 0.16) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
):hover {
  border-color: rgba(255, 236, 190, 0.80) !important;
  background: var(--primary-action-bg-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.27),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 20px 52px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(226, 200, 132, 0.11),
    0 0 36px rgba(226, 200, 132, 0.22) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-fallback .primary-action:not(.is-loading)::before {
  background: var(--primary-action-sheen) !important;
  opacity: 0.74;
}

@keyframes supportGoldHaloBreath {
  0% {
    opacity: 0.42;
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    opacity: 0.70;
    transform: translate3d(2px, -2px, 0) scale(1.012);
  }

  100% {
    opacity: 0.42;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
    opacity: 0.48 !important;
    animation-duration: 22s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* Customer support v29 rollback.
   Restores the earlier restrained black-gold glass look: darker background, fewer visible gold effects,
   compact cards, and a quieter FAQ panel. CSS-only; no routing or business logic changes. */
html[data-active-module="support"] body {
  background:
    radial-gradient(ellipse at 15% 84%, rgba(118, 86, 42, 0.040), transparent 42%),
    radial-gradient(ellipse at 72% 16%, rgba(255, 238, 196, 0.020), transparent 36%),
    linear-gradient(180deg, #030303 0%, #010101 100%) !important;
}

html[data-active-module="support"] .app-shell::before,
html[data-active-module="support"] .app-shell::after {
  background: none !important;
  opacity: 0 !important;
  animation: none !important;
}

html[data-active-module="support"] .topbar {
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.94), rgba(5, 5, 4, 0.72), transparent) !important;
}

html[data-active-module="support"] .top-nav .nav-item {
  border-color: rgba(255, 255, 255, 0.075) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.014)),
    rgba(14, 14, 13, 0.78) !important;
  color: rgba(244, 239, 230, 0.86) !important;
}

html[data-active-module="support"] .top-nav .nav-item.is-active {
  border-color: rgba(205, 185, 138, 0.38) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
    rgba(18, 16, 12, 0.84) !important;
  color: #F4EFE6 !important;
}

html[data-active-module="support"] .top-nav .nav-icon,
html[data-active-module="support"] .brand-mark {
  color: #CDB98A !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] {
  --support-bg: #030303;
  --support-bg-deep: #010101;
  --support-surface: rgba(8, 8, 7, 0.48);
  --support-surface-strong: rgba(12, 12, 10, 0.58);
  --support-glass-line: rgba(255, 255, 255, 0.105);
  --text-main: #F4EFE6;
  --text-card-title: #F4EFE6;
  --text-secondary: #BDB6AA;
  --text-description: #ABA398;
  --text-muted: #837C72;
  --gold-main: #CDB98A;
  --gold-soft: #A89162;
  --gold-dim: rgba(205, 185, 138, 0.72);
  --gold-border: rgba(226, 205, 160, 0.34);
  --gold-glow: rgba(205, 185, 138, 0.11);
  --wine-main: #8B4147;
  --wine-soft: rgba(139, 65, 71, 0.18);
  --support-major-glass:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058) 0%, rgba(255, 255, 255, 0.016) 28%, rgba(0, 0, 0, 0.34) 100%),
    rgba(6, 6, 5, 0.78);
  --support-card-glass:
    linear-gradient(180deg, rgba(255, 255, 255, 0.034) 0%, rgba(255, 255, 255, 0.006) 22%, rgba(0, 0, 0, 0.34) 100%),
    rgba(3, 3, 3, 0.82);
  --support-control-glass:
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.006)),
    rgba(5, 5, 4, 0.62);
  --primary-action-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.060) 42%, rgba(0, 0, 0, 0.16) 100%),
    linear-gradient(106deg, rgba(205, 185, 138, 0.34), rgba(76, 58, 30, 0.26) 58%, rgba(18, 16, 13, 0.30)),
    rgba(30, 25, 18, 0.90);
  --primary-action-bg-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.072) 42%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(106deg, rgba(205, 185, 138, 0.40), rgba(88, 66, 32, 0.30) 58%, rgba(22, 18, 13, 0.34)),
    rgba(36, 30, 21, 0.94);
  --primary-action-sheen: linear-gradient(102deg, transparent 0%, rgba(255, 244, 215, 0.10) 42%, rgba(255, 235, 184, 0.22) 52%, transparent 70%);
  min-height: 100vh;
  padding: clamp(0.8rem, 1.1vw, 1.1rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  background:
    radial-gradient(ellipse at 14% 82%, rgba(160, 116, 54, 0.050), transparent 42%),
    radial-gradient(ellipse at 76% 14%, rgba(255, 238, 196, 0.024), transparent 32%),
    linear-gradient(180deg, var(--support-bg) 0%, var(--support-bg-deep) 100%) !important;
  color: var(--text-main) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.052),
    0 22px 56px rgba(0, 0, 0, 0.42) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 76%, rgba(154, 110, 52, 0.056), transparent 42%),
    radial-gradient(ellipse at 72% 15%, rgba(255, 235, 188, 0.026), transparent 34%),
    linear-gradient(180deg, #050505 0%, #020202 100%) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::before,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
  position: absolute;
  inset: -8%;
  content: "";
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::before {
  background:
    radial-gradient(ellipse at 17% 78%, rgba(205, 185, 138, 0.070), transparent 42%),
    radial-gradient(ellipse at 78% 12%, rgba(255, 242, 214, 0.032), transparent 34%) !important;
  opacity: 0.42 !important;
  mix-blend-mode: screen;
  animation: supportBlackGoldAmbient 24s ease-in-out infinite !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg::after {
  background-image:
    radial-gradient(circle at 28% 34%, rgba(255, 255, 255, 0.030) 0 1px, transparent 1px),
    radial-gradient(circle at 68% 72%, rgba(205, 185, 138, 0.026) 0 1px, transparent 1px) !important;
  background-size: 4px 4px, 7px 7px;
  mix-blend-mode: overlay;
  opacity: 0.12 !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-violin {
  inset: -3% -2% -8% -8%;
  width: auto;
  height: auto;
  background:
    linear-gradient(90deg, rgba(2, 2, 2, 0.04) 0%, rgba(2, 2, 2, 0.26) 34%, rgba(2, 2, 2, 0.78) 72%, rgba(2, 2, 2, 0.95) 100%),
    radial-gradient(ellipse at 10% 60%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 56%, rgba(0, 0, 0, 0.72) 84%),
    url("/player/assets/violin-master-real-alpha.png") left center / auto 118% no-repeat !important;
  filter: brightness(0.58) contrast(1.08) saturate(0.50) !important;
  mix-blend-mode: soft-light;
  opacity: 0.20 !important;
  transform-origin: left center;
  will-change: transform, opacity !important;
  animation: supportBlackGoldViolinBreath 28s ease-in-out infinite !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-bg-flow {
  inset: -6%;
  height: auto;
  background:
    linear-gradient(114deg, transparent 16%, rgba(205, 185, 138, 0) 28%, rgba(205, 185, 138, 0.095) 38%, rgba(255, 237, 190, 0.044) 42%, transparent 54%),
    linear-gradient(156deg, transparent 48%, rgba(151, 100, 45, 0.050) 62%, rgba(222, 184, 112, 0.090) 74%, transparent 88%),
    radial-gradient(ellipse at 82% 8%, rgba(205, 185, 138, 0.090), transparent 24%) !important;
  mix-blend-mode: screen;
  opacity: 0.24 !important;
  will-change: transform, opacity !important;
  animation: supportBlackGoldFlowBreath 26s ease-in-out infinite !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 6.2fr) minmax(22rem, 3.8fr);
  gap: clamp(1rem, 1.35vw, 1.35rem);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
) {
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: var(--support-major-glass) !important;
  color: var(--text-main) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.56),
    0 26px 68px rgba(0, 0, 0, 0.56) !important;
  backdrop-filter: blur(22px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(120%) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-human-fallback
)::before {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 24%),
    linear-gradient(112deg, transparent 0%, rgba(205, 185, 138, 0.022) 44%, transparent 68%) !important;
  content: "";
  opacity: 0.38;
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-entry-panel {
  padding: clamp(1.25rem, 1.75vw, 1.65rem) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-entry-head {
  margin-bottom: clamp(1rem, 1.25vw, 1.25rem);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-entry-head .eyebrow {
  color: rgba(205, 185, 138, 0.72) !important;
  letter-spacing: 0.24em;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-entry-head h3 {
  color: var(--text-main) !important;
  font-size: clamp(2.25rem, 3.2vw, 3.55rem) !important;
  line-height: 0.98;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-entry-head p:not(.eyebrow) {
  color: var(--text-secondary) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.72rem, 0.95vw, 0.96rem) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center !important;
  min-height: clamp(5.1rem, 7vw, 6.3rem) !important;
  padding: clamp(0.95rem, 1.12vw, 1.15rem) clamp(1rem, 1.25vw, 1.25rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.088) !important;
  border-radius: 0.86rem !important;
  background: var(--support-card-glass) !important;
  color: var(--text-main) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.62),
    0 12px 28px rgba(0, 0, 0, 0.44) !important;
  backdrop-filter: blur(18px) saturate(116%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(116%) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card.is-active {
  border-color: rgba(226, 205, 160, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.044) 0%, rgba(255, 255, 255, 0.010) 22%, rgba(0, 0, 0, 0.28) 100%),
    rgba(5, 5, 4, 0.86) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.62),
    0 14px 32px rgba(0, 0, 0, 0.48) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.050), transparent 18%),
    linear-gradient(105deg, transparent 0%, rgba(205, 185, 138, 0.012) 54%, transparent 74%) !important;
  opacity: 0.34 !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card::after {
  top: 0;
  right: 16%;
  left: 16%;
  width: auto;
  height: 1px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), rgba(205, 185, 138, 0.13), transparent) !important;
  opacity: 0.34;
  transform: none !important;
  animation: none !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-icon,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-arrow,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card small,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card b {
  display: none !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-copy {
  display: grid !important;
  gap: 0.42rem !important;
  min-width: 0;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-card-copy em,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card > span:not(.support-card-icon):not(.support-card-arrow) {
  width: fit-content;
  max-width: 100%;
  padding: 0.23rem 0.56rem !important;
  border: 1px solid rgba(226, 205, 160, 0.30) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.018)),
    rgba(40, 33, 22, 0.46) !important;
  color: var(--gold-main) !important;
  font-size: 0.72rem !important;
  font-style: normal;
  font-weight: 780;
  line-height: 1.15;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-card strong {
  color: var(--text-card-title) !important;
  font-size: clamp(1.04rem, 1.24vw, 1.24rem) !important;
  line-height: 1.1;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-service-panel {
  display: grid;
  grid-template-rows: minmax(30rem, 1fr) auto;
  gap: clamp(0.9rem, 1.15vw, 1.1rem);
  padding: clamp(1rem, 1.45vw, 1.45rem) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-guess-block {
  min-height: clamp(30rem, 61vh, 38rem);
  border-color: rgba(255, 255, 255, 0.080) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.004) 22%, rgba(0, 0, 0, 0.30)),
    rgba(4, 4, 3, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.60),
    0 14px 34px rgba(0, 0, 0, 0.44) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-block-title strong,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-copy strong {
  color: var(--text-main) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-block-title span {
  border-color: rgba(226, 205, 160, 0.30) !important;
  background: rgba(40, 33, 22, 0.46) !important;
  color: var(--gold-main) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-faq-focus,
  .support-faq-copy,
  .support-guess-list,
  .support-more-button,
  .support-advice-stack
) {
  display: none !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-fallback {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(8.8rem, 9.8vw, 10.4rem);
  gap: 0.82rem !important;
  align-items: stretch;
  border-color: rgba(255, 255, 255, 0.10) !important;
  background: var(--support-major-glass) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-copy {
  grid-column: 1 / -1;
  margin-bottom: -0.1rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-copy p,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-wait-copy {
  color: var(--text-secondary) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog {
  grid-column: 1;
  display: block !important;
  min-width: 0;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog > span {
  display: none !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog-compact textarea {
  min-height: clamp(3.9rem, 4.9vw, 4.75rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.085) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.006)),
    rgba(3, 3, 3, 0.56) !important;
  color: var(--text-main) !important;
  caret-color: var(--gold-main) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38),
    0 10px 24px rgba(0, 0, 0, 0.26) !important;
  backdrop-filter: blur(14px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(112%) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-dialog textarea:focus {
  border-color: rgba(226, 205, 160, 0.34) !important;
  outline: 2px solid rgba(226, 205, 160, 0.22) !important;
  outline-offset: 2px;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-grid,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-upload-plus,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-wait-copy {
  display: none !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-status {
  grid-column: 1 / -1;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
) {
  grid-column: 2;
  grid-row: 2;
  min-height: clamp(3.9rem, 4.9vw, 4.75rem);
  border: 1px solid rgba(240, 220, 175, 0.58) !important;
  border-radius: 0.72rem !important;
  background: var(--primary-action-bg) !important;
  color: var(--text-main) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 18px 46px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(205, 185, 138, 0.055),
    0 0 24px rgba(205, 185, 138, 0.085) !important;
  backdrop-filter: blur(14px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(112%) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .primary-action,
  .support-secondary-action,
  button.support-secondary-action,
  .support-human-fallback button.support-secondary-action.primary-action
):hover {
  border-color: rgba(246, 228, 190, 0.72) !important;
  background: var(--primary-action-bg-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 20px 52px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(205, 185, 138, 0.070),
    0 0 28px rgba(205, 185, 138, 0.12) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .primary-action:not(.is-loading)::before {
  background: var(--primary-action-sheen) !important;
  opacity: 0.55 !important;
  transform: none !important;
  animation: none !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .primary-action:not(.is-loading)::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 36%),
    linear-gradient(90deg, transparent, rgba(235, 215, 170, 0.10) 52%, transparent) !important;
  opacity: 0.42 !important;
}

@media (max-width: 1180px) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-service-panel {
    grid-template-rows: auto auto;
  }
}

@media (max-width: 720px) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] {
    padding: 0.72rem !important;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-board-grid {
    grid-template-columns: 1fr !important;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-human-fallback {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
    .primary-action,
    .support-secondary-action,
    button.support-secondary-action,
    .support-human-fallback button.support-secondary-action.primary-action
  ) {
    grid-column: 1;
    grid-row: auto;
  }
}

/* AI teacher + support launch integration. Lightweight controls only; no debug metadata is rendered. */
.answer-feedback {
  display: grid;
  gap: 0.48rem;
  margin-top: 0.72rem;
}

.answer-feedback > span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.76rem;
  font-weight: 760;
}

.answer-feedback-buttons,
.answer-feedback-reasons,
.teacher-followup-quick,
.support-ask-actions,
.support-faq-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.answer-feedback button,
.teacher-followup-quick button,
.support-faq-buttons button {
  min-height: 2.1rem;
  padding: 0.44rem 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.84);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.answer-feedback button:hover,
.answer-feedback button.is-selected,
.teacher-followup-quick button:hover,
.support-faq-buttons button:hover {
  border-color: rgba(232, 205, 152, 0.45);
  background: rgba(232, 205, 152, 0.12);
  color: #fff4d9;
}

.teacher-followup-panel {
  display: grid;
  gap: 0.52rem;
  margin-top: 0.72rem;
  padding-top: 0.68rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.teacher-followup-panel strong {
  color: rgba(255, 245, 219, 0.96);
  font-size: 0.84rem;
}

.teacher-followup-panel small,
.teacher-boundary-note {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.76rem;
  line-height: 1.55;
}

.teacher-boundary-note {
  margin: 0;
  padding: 0;
}

.teacher-retry-button {
  width: calc(100% - 1.56rem);
  margin: 0.68rem 0.78rem 0;
  min-height: 2.2rem;
  border: 1px solid rgba(232, 205, 152, 0.35);
  border-radius: 0.72rem;
  background: rgba(232, 205, 152, 0.10);
  color: #fff4d9;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 780;
  cursor: pointer;
}

.content-grid[data-module="teacher"] .teacher-text-row {
  grid-template-columns: minmax(12rem, 1fr) 2.52rem !important;
  min-width: min(100%, 20rem);
}

.content-grid[data-module="teacher"] .teacher-text-input-wrap {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.content-grid[data-module="teacher"] .teacher-send-button {
  position: relative;
  z-index: 3;
}

.content-grid[data-module="teacher"] .teacher-plus-button {
  position: relative;
  z-index: 2;
  grid-column: 2;
}

@media (max-width: 1080px) {
  html[data-active-module="teacher"] .content-grid[data-module="teacher"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: start;
    overflow: visible;
  }

  html[data-active-module="teacher"] .content-grid[data-module="teacher"] > .panel.teacher-workbench-chat,
  html[data-active-module="teacher"] .content-grid[data-module="teacher"] > .panel.teacher-workbench-tools {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  html[data-active-module="teacher"] .content-grid[data-module="teacher"] .ai-teacher-chat-panel {
    width: 100%;
    min-width: 0;
  }

  html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-text-row {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .content-grid[data-module="teacher"] .teacher-text-row {
    grid-template-columns: minmax(8rem, 1fr) 2.52rem !important;
    overflow-x: auto;
  }
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] :is(
  .support-ask-box,
  .support-faq-category-panel
) {
  display: grid !important;
  gap: 0.82rem;
  border-color: rgba(255, 255, 255, 0.10) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0.006)),
    rgba(5, 5, 4, 0.74) !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-advice-stack {
  display: grid !important;
  gap: 0.72rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-advice-stack.support-advice-inline {
  display: grid !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-ask-box textarea {
  min-height: 5rem;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.72rem;
  padding: 0.8rem;
  background: rgba(0, 0, 0, 0.32);
  color: var(--text-main);
  font: inherit;
  line-height: 1.5;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-ask-box textarea:focus {
  border-color: rgba(226, 205, 160, 0.38);
  outline: 2px solid rgba(226, 205, 160, 0.18);
  outline-offset: 2px;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-category {
  display: grid;
  gap: 0.68rem;
  padding: 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.045);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-category strong {
  color: var(--text-main);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-category p,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-category small {
  margin: 0.25rem 0 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.45;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-answer-content.is-loading,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-answer-content.is-error {
  display: grid !important;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-answer-content.is-error {
  border-color: rgba(255, 154, 128, 0.34) !important;
}

.profile-settings-list button {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.78rem;
  padding: 0.72rem;
  background: rgba(255, 255, 255, 0.055);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.profile-settings-list button:hover {
  border-color: rgba(232, 205, 152, 0.42);
  background: rgba(232, 205, 152, 0.10);
}

@media (max-width: 900px) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="ebony"] .support-faq-category-grid {
    grid-template-columns: 1fr;
  }
}

/* Support center: warm music-gallery visual system. Scoped to the support module only. */
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] {
  --support-cream: #f3eee4;
  --support-silk: #fbf8f1;
  --support-mist: rgba(255, 252, 244, 0.74);
  --support-mist-strong: rgba(255, 253, 247, 0.9);
  --support-wood: #7c5831;
  --support-wood-deep: #493929;
  --support-gold: #b99155;
  --support-line: rgba(126, 91, 52, 0.13);
  --support-line-strong: rgba(126, 91, 52, 0.2);
  --support-text: #3f3a33;
  --support-muted: #81776a;
  --support-faint: #a19686;
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.8rem, 1.2vw, 1.2rem);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1rem, 1.45vw, 1.45rem);
  border: 0;
  border-radius: clamp(1.1rem, 1.6vw, 1.55rem);
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, 0.92), transparent 33%),
    radial-gradient(ellipse at 84% 14%, rgba(204, 169, 111, 0.18), transparent 30%),
    radial-gradient(ellipse at 60% 102%, rgba(124, 88, 49, 0.1), transparent 38%),
    linear-gradient(135deg, #eee7da 0%, #fbf8f1 48%, #e7ddcf 100%);
  color: var(--support-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 1.4rem 3.6rem rgba(86, 62, 34, 0.14);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-bg::before {
  position: absolute;
  inset: 8% 7% auto auto;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182, 143, 82, 0.16), transparent 67%);
  filter: blur(10px);
  content: "";
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-bg-violin {
  position: absolute;
  left: -5%;
  bottom: -18%;
  width: min(38rem, 44vw);
  height: 86%;
  background: url("/player/assets/violin-master-real-alpha.png") left bottom / contain no-repeat;
  opacity: 0.075;
  filter: sepia(0.18) saturate(0.8);
  transform: rotate(-5deg);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-bg-flow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 10%, rgba(255, 255, 255, 0.32) 32%, transparent 54%),
    linear-gradient(20deg, transparent 58%, rgba(176, 136, 77, 0.1) 72%, transparent 88%);
  opacity: 0.64;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-gallery-topbar {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.6rem;
  padding: 0 0.12rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-gallery-topbar h3 {
  margin: 0.08rem 0 0;
  color: var(--support-text);
  font-size: clamp(1.42rem, 1.9vw, 2.35rem);
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: 0;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .eyebrow {
  margin: 0;
  color: var(--support-gold);
  font-size: 0.66rem;
  font-weight: 780;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-gallery-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem;
  border: 1px solid rgba(126, 91, 52, 0.12);
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0.8rem 1.8rem rgba(91, 62, 28, 0.08);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-gallery-tabs button {
  min-height: 2.1rem;
  padding: 0.38rem 0.82rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--support-muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 720;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-gallery-tabs button:hover {
  background: rgba(255, 255, 255, 0.68);
  color: var(--support-wood-deep);
  transform: translateY(-1px);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-content {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(20rem, 0.86fr);
  gap: clamp(1rem, 1.7vw, 1.65rem);
  min-height: 0;
  height: 100%;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-guess-block,
  .support-ask-box,
  .support-faq-category-panel,
  .support-human-fallback,
  .support-answer-content
) {
  border: 1px solid var(--support-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 252, 244, 0.24)),
    var(--support-mist);
  color: var(--support-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 1.1rem 2.8rem rgba(83, 60, 31, 0.09);
  backdrop-filter: blur(24px) saturate(1.06);
  -webkit-backdrop-filter: blur(24px) saturate(1.06);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-entry-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(0.82rem, 1.2vw, 1.15rem);
  min-height: 0;
  overflow: hidden;
  padding: clamp(1.1rem, 1.7vw, 1.65rem);
  border-radius: clamp(1.2rem, 1.8vw, 1.7rem);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-service-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(0.82rem, 1.15vw, 1.05rem);
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-entry-head {
  display: grid;
  gap: 0.38rem;
  max-width: 44rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-entry-head h3 {
  margin: 0;
  color: var(--support-text);
  font-size: clamp(1.42rem, 2.3vw, 2.55rem);
  font-weight: 760;
  line-height: 1.12;
  letter-spacing: 0;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(.support-entry-head p:not(.eyebrow), .support-faq-copy, .support-human-copy p) {
  margin: 0;
  color: var(--support-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-board-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.52rem;
  align-content: start;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-board-card {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.48rem;
  min-height: 2.52rem;
  max-width: 15rem;
  padding: 0.42rem 0.72rem 0.42rem 0.46rem;
  border: 1px solid rgba(126, 91, 52, 0.11);
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.5);
  color: var(--support-text);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-board-card:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-board-card.is-active {
  transform: translateY(-1px);
  border-color: rgba(185, 145, 85, 0.32);
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 0.78rem 1.65rem rgba(126, 91, 52, 0.08);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-card-icon {
  display: grid;
  width: 1.68rem;
  height: 1.68rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(185, 145, 85, 0.12);
  color: var(--support-wood);
  font-size: 0.8rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-card-copy {
  display: block;
  min-width: 0;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-board-card :is(em, small, b, .support-card-arrow) {
  display: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-board-card strong {
  display: block;
  overflow: hidden;
  color: var(--support-text);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-dialogue-stage {
  min-height: 0;
  overflow-y: auto;
  padding: 0.1rem 0.22rem 0.1rem 0;
  overscroll-behavior: contain;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-answer-content {
  display: grid;
  align-content: start;
  gap: 0.56rem;
  max-width: 48rem;
  min-height: clamp(10rem, 23vh, 16rem);
  padding: clamp(1rem, 1.45vw, 1.35rem);
  border-radius: 1.18rem;
  overflow: visible;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-answer-content::before {
  display: block;
  width: 2.2rem;
  height: 0.18rem;
  border-radius: 999px;
  background: rgba(185, 145, 85, 0.36);
  content: "";
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-answer-content strong {
  color: var(--support-text);
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  font-weight: 780;
  line-height: 1.36;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-answer-content p {
  margin: 0;
  color: var(--support-muted);
  font-size: 0.92rem;
  line-height: 1.72;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-suggestion-label {
  justify-self: start;
  padding: 0.26rem 0.58rem;
  border-radius: 999px;
  background: rgba(185, 145, 85, 0.12);
  color: var(--support-wood);
  font-size: 0.72rem;
  font-weight: 760;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-empty-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-empty-tags span {
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  background: rgba(126, 91, 52, 0.08);
  color: var(--support-muted);
  font-size: 0.76rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-ask-box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: end;
  padding: 0.76rem;
  border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 252, 244, 0.48)),
    rgba(255, 252, 244, 0.76);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-ask-box .support-block-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-block-title strong,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-human-copy strong {
  color: var(--support-text);
  font-size: 0.98rem;
  font-weight: 780;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-block-title span {
  padding: 0.28rem 0.56rem;
  border-radius: 999px;
  background: rgba(126, 91, 52, 0.08);
  color: var(--support-faint);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-ask-box textarea {
  width: 100%;
  min-height: 3rem;
  max-height: 7rem;
  resize: none;
  padding: 0.86rem 1rem;
  border: 0;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.54);
  color: var(--support-text);
  outline: none;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  box-shadow: inset 0 0 0 1px rgba(126, 91, 52, 0.09);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(textarea, input)::placeholder {
  color: rgba(129, 119, 106, 0.66);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] textarea:focus {
  box-shadow:
    inset 0 0 0 1px rgba(185, 145, 85, 0.32),
    0 0 0 4px rgba(185, 145, 85, 0.11);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-ask-actions {
  display: flex;
  align-items: center;
  gap: 0.42rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .glass-button {
  min-height: 2.5rem;
  padding: 0.48rem 0.92rem;
  border: 1px solid rgba(126, 91, 52, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  color: var(--support-wood-deep);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 760;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 0.7rem 1.4rem rgba(91, 62, 28, 0.08);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .glass-button:hover {
  transform: translateY(-1px);
  border-color: rgba(185, 145, 85, 0.3);
  background: rgba(255, 255, 255, 0.72);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .glass-button.primary,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .primary-action {
  border-color: rgba(124, 88, 49, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent),
    rgba(124, 88, 49, 0.92);
  color: rgba(255, 252, 244, 0.98);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-guess-block,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-category-panel,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-human-fallback {
  display: grid;
  gap: 0.78rem;
  min-height: 0;
  padding: clamp(0.9rem, 1.2vw, 1.08rem);
  border-radius: 1.15rem;
  overflow: hidden;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-guess-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.44rem;
  min-height: 0;
  max-height: 12rem;
  overflow-y: auto;
  padding-right: 0.08rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-guess-list button,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-buttons button {
  display: grid;
  gap: 0.16rem;
  width: 100%;
  min-height: 2.42rem;
  padding: 0.54rem 0.68rem;
  border: 0;
  border-radius: 0.82rem;
  background: rgba(255, 255, 255, 0.42);
  color: var(--support-text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(126, 91, 52, 0.07);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-guess-list button:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-guess-list button.is-active,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-buttons button:hover {
  background: rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 0 0 1px rgba(185, 145, 85, 0.22),
    0 0.52rem 1.2rem rgba(126, 91, 52, 0.07);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-guess-list strong {
  color: var(--support-text);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.32;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-guess-list span {
  color: var(--support-muted);
  font-size: 0.72rem;
  line-height: 1.42;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-more-button {
  justify-self: start;
  min-height: 2rem;
  padding: 0.34rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: rgba(126, 91, 52, 0.08);
  color: var(--support-wood);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 760;
  cursor: pointer;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-category-panel {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-category-grid {
  display: grid;
  gap: 0.7rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-category {
  display: grid;
  gap: 0.5rem;
  padding: 0.15rem 0 0.72rem;
  border: 0;
  border-bottom: 1px solid rgba(126, 91, 52, 0.08);
  background: transparent;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-category:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-category strong {
  color: var(--support-text);
  font-size: 0.9rem;
  font-weight: 780;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-category p,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-category small {
  margin: 0.22rem 0 0;
  color: var(--support-muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-buttons button {
  width: auto;
  min-height: 2rem;
  padding: 0.38rem 0.62rem;
  border-radius: 999px;
  color: var(--support-muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-human-fallback {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-human-dialog {
  display: grid;
  gap: 0.3rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-human-dialog span {
  color: var(--support-faint);
  font-size: 0.74rem;
  font-weight: 760;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-human-dialog textarea {
  min-height: 3.65rem;
  resize: vertical;
  padding: 0.72rem 0.82rem;
  border: 0;
  border-radius: 0.88rem;
  background: rgba(255, 255, 255, 0.46);
  color: var(--support-text);
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.5;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(126, 91, 52, 0.08);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.44rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-upload-entry {
  display: grid;
  gap: 0.14rem;
  min-height: 3.1rem;
  padding: 0.58rem 0.64rem;
  border: 0;
  border-radius: 0.82rem;
  background: rgba(255, 255, 255, 0.42);
  color: var(--support-text);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(126, 91, 52, 0.08);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-upload-entry input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-upload-entry span {
  color: var(--support-text);
  font-size: 0.82rem;
  font-weight: 760;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-upload-entry small,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-wait-copy,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-human-status {
  margin: 0;
  color: var(--support-muted);
  font-size: 0.72rem;
  line-height: 1.42;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-upload-plus {
  display: none;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .answer-feedback {
  margin-top: 0.42rem;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .answer-feedback > span {
  color: var(--support-faint);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .answer-feedback button {
  border: 0;
  border-radius: 999px;
  background: rgba(126, 91, 52, 0.08);
  color: var(--support-muted);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .answer-feedback button:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .answer-feedback button.is-selected {
  background: rgba(185, 145, 85, 0.16);
  color: var(--support-wood-deep);
}

html[data-active-module="support"] body {
  background:
    radial-gradient(ellipse at 18% 10%, rgba(255, 252, 244, 0.7), transparent 35%),
    linear-gradient(135deg, #eee7da, #f8f3e9);
}

@media (max-width: 1180px) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-service-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr);
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-category-panel {
    grid-row: 1 / span 2;
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] {
    padding: 0.85rem;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-gallery-topbar {
    align-items: start;
    flex-direction: column;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-gallery-tabs {
    max-width: 100%;
    overflow-x: auto;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-service-panel {
    grid-template-columns: 1fr;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-category-panel {
    grid-column: auto;
    grid-row: auto;
  }

  .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-ask-box {
    grid-template-columns: 1fr;
  }
}

/* Support exhibition refinement: warm solid-color stage with soft museum shadows. */
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] {
  --support-cream: #d9c59d;
  --support-silk: #efe3c8;
  --support-mist: rgba(236, 222, 195, 0.82);
  --support-mist-strong: rgba(244, 233, 210, 0.94);
  --support-wood: #80603a;
  --support-wood-deep: #4b3928;
  --support-gold: #a9824d;
  --support-line: rgba(77, 57, 34, 0.12);
  --support-line-strong: rgba(77, 57, 34, 0.22);
  --support-text: #44392d;
  --support-muted: #746553;
  --support-faint: #94836b;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(250, 235, 193, 0.78) 0%, rgba(214, 190, 145, 0.68) 34%, rgba(151, 121, 82, 0.36) 70%, rgba(63, 48, 35, 0.38) 100%),
    linear-gradient(135deg, #b99d70 0%, #d9c491 42%, #9a7a52 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 221, 0.48),
    inset 0 -5.5rem 8rem rgba(59, 43, 30, 0.2),
    0 1.4rem 3.8rem rgba(76, 53, 29, 0.18);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-bg::before {
  inset: 7% 14% auto auto;
  width: 38rem;
  height: 30rem;
  background: radial-gradient(ellipse, rgba(255, 238, 190, 0.42), transparent 68%);
  filter: blur(22px);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-bg::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 52%, transparent 0%, transparent 56%, rgba(54, 39, 27, 0.25) 100%),
    linear-gradient(90deg, rgba(55, 40, 28, 0.18), transparent 18%, transparent 82%, rgba(55, 40, 28, 0.16));
  content: "";
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-bg-violin {
  opacity: 0.12;
  filter: sepia(0.34) saturate(0.72) contrast(0.92);
  mix-blend-mode: multiply;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-bg-flow {
  background:
    radial-gradient(ellipse at 55% 34%, rgba(255, 241, 207, 0.34), transparent 42%),
    linear-gradient(180deg, rgba(255, 245, 216, 0.18), transparent 26%, rgba(79, 58, 39, 0.1));
  opacity: 0.7;
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(
  .support-entry-panel,
  .support-guess-block,
  .support-ask-box,
  .support-faq-category-panel,
  .support-human-fallback,
  .support-answer-content
) {
  border-color: rgba(92, 68, 42, 0.1);
  background:
    linear-gradient(180deg, rgba(248, 236, 211, 0.9), rgba(226, 208, 174, 0.72)),
    #dfca9f;
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 231, 0.62),
    inset 0 -1px 0 rgba(104, 75, 42, 0.08),
    0 1.2rem 2.8rem rgba(72, 51, 31, 0.16),
    0 0.16rem 0.5rem rgba(72, 51, 31, 0.06);
  backdrop-filter: blur(16px) saturate(1.02);
  -webkit-backdrop-filter: blur(16px) saturate(1.02);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-entry-panel {
  background:
    linear-gradient(180deg, rgba(248, 236, 211, 0.84), rgba(222, 202, 166, 0.68)),
    rgba(222, 202, 166, 0.82);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-gallery-tabs,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-board-card,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-guess-list button,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-buttons button,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-upload-entry,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .glass-button {
  background:
    linear-gradient(180deg, rgba(251, 239, 214, 0.74), rgba(217, 195, 155, 0.5)),
    rgba(219, 198, 159, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 232, 0.6),
    0 0.56rem 1.18rem rgba(72, 51, 31, 0.1);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-board-card:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-board-card.is-active,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-guess-list button:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-guess-list button.is-active,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-buttons button:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-upload-entry:hover,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .glass-button:hover {
  background:
    linear-gradient(180deg, rgba(255, 245, 224, 0.88), rgba(229, 207, 167, 0.66)),
    rgba(230, 210, 172, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 239, 0.76),
    0 0.88rem 1.7rem rgba(72, 51, 31, 0.13);
}

.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-ask-box textarea,
.content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-human-dialog textarea {
  background: rgba(248, 237, 214, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 236, 0.42),
    inset 0 0 0 1px rgba(83, 61, 37, 0.09);
}

/* Global landscape shell lock: route roots never scroll; only scoped content panes may scroll. */
html,
body,
.app-shell,
.main-stage {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  overflow: visible !important;
  overscroll-behavior: none;
}

body {
  position: fixed !important;
  inset: 0 !important;
}

.app-shell {
  width: 100dvw !important;
  height: var(--app-height, 100dvh) !important;
}

.main-stage {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  padding-bottom: var(--page-pad-y) !important;
}

.content-grid {
  height: 100%;
  min-height: 0 !important;
  overflow: hidden !important;
}

.content-grid[data-module="home"],
.content-grid[data-module="featureIntro"],
.content-grid[data-module="pieces"],
.content-grid[data-module="teacher"],
.content-grid[data-module="reports"],
.content-grid[data-module="membership"],
.content-grid[data-module="support"],
.content-grid[data-module="scoreEditor"],
.content-grid[data-module="violinKnowledge"],
.content-grid[data-module="metronome"],
.content-grid[data-module="tuner"],
.content-grid[data-module="profile"] {
  height: 100%;
  min-height: 0 !important;
  overflow: hidden !important;
}

.content-grid[data-module="pieces"],
.content-grid[data-module="reports"],
.content-grid[data-module="scoreEditor"],
.content-grid[data-module="violinKnowledge"],
.content-grid[data-module="profile"] {
  overflow: hidden !important;
}

.content-grid[data-module="teacher"] > .teacher-workbench-chat,
.content-grid[data-module="teacher"] > .teacher-workbench-tools,
.content-grid[data-module="membership"] > .membership-one-screen,
.content-grid[data-module="support"] > .support-page {
  min-height: 0 !important;
  max-height: 100%;
  overflow: hidden !important;
}


.content-grid[data-module="teacher"] .teacher-chat-stream,
.content-grid[data-module="teacher"] .teacher-step-panel,
.content-grid[data-module="support"] .support-guess-list,
.content-grid[data-module="support"] .support-chat-thread,
.content-grid[data-module="support"] .support-faq-category-panel,
.content-grid[data-module="membership"] .membership-comparison-shell,
.content-grid[data-module="membership"] .membership-plan-grid,
.content-grid[data-module="profile"] .profile-dashboard,
.content-grid[data-module="profile"] .profile-service-card,
.content-grid[data-module="profile"] .profile-settings-list,
.content-grid[data-module="pieces"] > .panel,
.content-grid[data-module="pieces"] .piece-list,
.content-grid[data-module="pieces"] .piece-detail-card,
.content-grid[data-module="scoreEditor"] > .panel,
.content-grid[data-module="scoreEditor"] .score-sheet-panel,
.content-grid[data-module="violinKnowledge"] > .panel,
.content-grid[data-module="violinKnowledge"] .knowledge-category-panel,
.content-grid[data-module="violinKnowledge"] .knowledge-section-panel,
.content-grid[data-module="reports"] .report-history-list,
.content-grid[data-module="reports"] .stuck-pattern-grid,
.content-grid[data-module="reports"] .report-plan-list,
.content-grid[data-module="reports"] > .panel,
.message-center-list {
  min-height: 0;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html.is-portrait-orientation .mobile-bottom-nav {
  display: none !important;
}

/* Final route-level scroll guard: page roots stay fixed; only named panes scroll. */
html[data-active-module] .content-grid,
html[data-active-module="home"] .content-grid[data-module="home"],
html[data-active-module="featureIntro"] .content-grid[data-module="featureIntro"],
html[data-active-module="pieces"] .content-grid[data-module="pieces"],
html[data-active-module="teacher"] .content-grid[data-module="teacher"],
html[data-active-module="reports"] .content-grid[data-module="reports"],
html[data-active-module="membership"] .content-grid[data-module="membership"],
html[data-active-module="support"] .content-grid[data-module="support"],
html[data-active-module="scoreEditor"] .content-grid[data-module="scoreEditor"],
html[data-active-module="violinKnowledge"] .content-grid[data-module="violinKnowledge"],
html[data-active-module="metronome"] .content-grid[data-module="metronome"],
html[data-active-module="tuner"] .content-grid[data-module="tuner"],
html[data-active-module="profile"] .content-grid[data-module="profile"] {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html[data-active-module] .content-grid :is(
  .landscape-scroll-area,
  [data-landscape-scroll],
        .teacher-chat-stream,
  .teacher-step-panel,
  .support-guess-list,
  .support-chat-thread,
  .support-faq-category-panel,
  .support-ask-box,
  .support-human-fallback,
  .membership-comparison-shell,
  .membership-plan-grid,
  .profile-dashboard,
  .profile-service-card,
  .profile-settings-list,
  .piece-list,
  .piece-detail-card,
  .score-sheet-panel,
  .knowledge-category-panel,
  .knowledge-section-panel,
  .report-history-list,
  .stuck-pattern-grid,
  .report-plan-list,
  .record-dashboard-grid,
  .record-side-rail,
  .record-priority-zone,
  .message-center-list
) {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

/* Support exhibition final layout guard: keep the gallery topbar above the two-column body. */
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  justify-content: stretch !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-gallery-topbar,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-content {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.78fr) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-entry-panel,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-service-panel {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-entry-head,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-entry-head h3,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-entry-head p,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-answer-content,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-answer-content p {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* AI teacher chat text reset: keep replies readable after compact landscape layout passes. */
html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-chat-stream {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message {
  width: min(100%, 32rem) !important;
  min-width: min(100%, 15rem);
  max-width: 100% !important;
  grid-template-columns: 2.08rem minmax(0, 1fr) !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message.is-user {
  grid-template-columns: minmax(0, 1fr) 2.08rem !important;
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message.is-suggestion {
  width: min(100%, 22rem) !important;
  min-width: min(100%, 12rem);
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message > .teacher-chat-avatar {
  display: grid !important;
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message:not(.is-user) > .teacher-message-body {
  grid-column: 2;
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message.is-user > .teacher-message-body {
  grid-column: 1;
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message-body,
html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message-body > p,
html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message-body > ol,
html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message-body li,
html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message-card,
html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-followup-panel,
html[data-active-module="teacher"] .content-grid[data-module="teacher"] .answer-feedback {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message-body > span {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap;
}

/* AI teacher suggested questions: quiet prompts, not user-message blue bubbles. */
html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-suggested-questions {
  justify-items: stretch !important;
  gap: 0.42rem !important;
  margin: 0.12rem 0 0.34rem !important;
  padding: 0.58rem !important;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 0.78rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.014)),
    rgba(6, 9, 13, 0.42);
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-suggested-questions::before {
  content: none !important;
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-suggestion-label {
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  margin: 0;
  min-height: 1.28rem;
  padding: 0.06rem 0.12rem 0.3rem;
  border-radius: 0.44rem;
  background:
    linear-gradient(180deg, rgba(13, 16, 22, 0.98), rgba(13, 16, 22, 0.94));
  color: rgba(255, 242, 214, 0.72);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.2;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message.is-suggestion,
html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message.is-user.is-suggestion {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-self: stretch !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message.is-suggestion > .teacher-chat-avatar {
  display: none !important;
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message.is-user.is-suggestion > .teacher-message-body {
  grid-column: 1 !important;
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message.is-suggestion .teacher-message-body > p,
html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message.is-user.is-suggestion .teacher-message-body > p {
  min-height: 2rem !important;
  padding: 0.5rem 0.66rem !important;
  border-color: rgba(255, 255, 255, 0.105) !important;
  border-radius: 0.58rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.026)),
    rgba(255, 255, 255, 0.038) !important;
  color: rgba(236, 241, 245, 0.86) !important;
  font-size: 0.78rem !important;
  line-height: 1.34 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message.is-suggestion .teacher-message-body > p::before,
html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message.is-user.is-suggestion .teacher-message-body > p::before {
  display: none !important;
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message.is-suggestion:hover .teacher-message-body > p,
html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-message.is-suggestion.is-active .teacher-message-body > p {
  transform: none !important;
  border-color: rgba(232, 205, 152, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(232, 205, 152, 0.105), rgba(255, 255, 255, 0.026)),
    rgba(255, 255, 255, 0.045) !important;
  color: rgba(255, 246, 225, 0.94) !important;
}

html[data-active-module="teacher"] .content-grid[data-module="teacher"] .teacher-upload-menu .teacher-boundary-note {
  grid-column: 1 / -1;
  margin: 0.02rem 0 0;
  padding: 0.22rem 0.1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  color: rgba(218, 226, 232, 0.48);
  font-size: 0.64rem;
  line-height: 1.42;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Support center grayscale pass: quiet dark metal layer for the right-side service stack. */
html[data-active-module="support"] body {
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, 0.08), transparent 34%),
    radial-gradient(ellipse at 78% 88%, rgba(128, 139, 151, 0.12), transparent 42%),
    linear-gradient(135deg, #070809 0%, #161719 42%, #050506 100%) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] {
  --support-cream: #1b1c1e;
  --support-silk: #25272a;
  --support-mist: rgba(22, 24, 27, 0.78);
  --support-mist-strong: rgba(35, 37, 41, 0.92);
  --support-wood: #d6d9dc;
  --support-wood-deep: #f1f2f3;
  --support-gold: #b9bec4;
  --support-line: rgba(255, 255, 255, 0.115);
  --support-line-strong: rgba(255, 255, 255, 0.2);
  --support-text: rgba(244, 245, 246, 0.94);
  --support-muted: rgba(205, 208, 211, 0.72);
  --support-faint: rgba(168, 173, 178, 0.62);
  color: var(--support-text) !important;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(255, 255, 255, 0.105), transparent 34%),
    radial-gradient(ellipse at 70% 72%, rgba(118, 126, 136, 0.18), transparent 42%),
    linear-gradient(135deg, #202124 0%, #121315 46%, #050506 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -5.5rem 8rem rgba(0, 0, 0, 0.42),
    0 1.4rem 3.8rem rgba(0, 0, 0, 0.42) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-bg::before {
  background: radial-gradient(ellipse, rgba(218, 224, 230, 0.18), transparent 68%) !important;
  opacity: 0.78 !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-bg::after {
  background:
    radial-gradient(ellipse at 48% 45%, transparent 0%, transparent 52%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.3)) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-bg-violin {
  opacity: 0.085 !important;
  filter: grayscale(1) contrast(1.06) brightness(0.78) !important;
  mix-blend-mode: screen !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-bg-flow {
  background:
    linear-gradient(112deg, transparent 12%, rgba(255, 255, 255, 0.14) 36%, transparent 58%),
    radial-gradient(ellipse at 60% 32%, rgba(210, 218, 226, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 28%, rgba(0, 0, 0, 0.2)) !important;
  opacity: 0.72 !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-gallery-topbar h3,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-entry-head h3,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-block-title strong,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-human-copy strong,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-category strong,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-upload-entry span,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-board-card strong {
  color: rgba(246, 247, 248, 0.94) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .eyebrow {
  color: rgba(194, 200, 207, 0.68) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(.support-entry-head p:not(.eyebrow), .support-faq-copy, .support-human-copy p),
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-category p,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-category small,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-upload-entry small,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-wait-copy,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-guess-list span {
  color: rgba(206, 210, 214, 0.72) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(
  .support-entry-panel,
  .support-guess-block,
  .support-ask-box,
  .support-faq-category-panel,
  .support-human-fallback,
  .support-answer-content
) {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.102), rgba(255, 255, 255, 0.04) 42%, rgba(0, 0, 0, 0.22)),
    linear-gradient(135deg, rgba(44, 46, 50, 0.92), rgba(15, 16, 18, 0.88)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.56),
    0 1.1rem 2.7rem rgba(0, 0, 0, 0.34),
    0 0.08rem 0.24rem rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(18px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.02) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-entry-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.042) 42%, rgba(0, 0, 0, 0.24)),
    linear-gradient(135deg, rgba(48, 50, 54, 0.9), rgba(16, 17, 19, 0.88)) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-guess-block,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-category-panel,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-human-fallback {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.125), rgba(255, 255, 255, 0.045) 38%, rgba(0, 0, 0, 0.3)),
    linear-gradient(135deg, rgba(46, 48, 52, 0.95) 0%, rgba(21, 22, 24, 0.94) 56%, rgba(8, 9, 10, 0.96) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.62),
    0 1.2rem 2.8rem rgba(0, 0, 0, 0.38) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-gallery-tabs,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-board-card,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-guess-list button,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-buttons button,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-upload-entry,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .glass-button,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-block-title span,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-empty-tags span,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .answer-feedback button {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.048)),
    linear-gradient(135deg, rgba(55, 57, 61, 0.92), rgba(24, 25, 27, 0.9)) !important;
  color: rgba(226, 229, 232, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    0 0.56rem 1.18rem rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-gallery-tabs button {
  color: rgba(218, 222, 226, 0.78) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-gallery-tabs button:hover,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-board-card:hover,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-board-card.is-active,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-guess-list button:hover,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-guess-list button.is-active,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-buttons button:hover,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-upload-entry:hover,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .glass-button:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.064)),
    linear-gradient(135deg, rgba(75, 78, 84, 0.94), rgba(32, 34, 37, 0.94)) !important;
  color: rgba(255, 255, 255, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0.82rem 1.7rem rgba(0, 0, 0, 0.28) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-card-icon {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.054)),
    rgba(255, 255, 255, 0.052) !important;
  color: rgba(242, 244, 246, 0.9) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-answer-content::before {
  background: rgba(210, 216, 222, 0.35) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-ask-box textarea,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-human-dialog textarea {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.045)),
    rgba(10, 11, 12, 0.58) !important;
  color: rgba(242, 244, 246, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.105) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(textarea, input)::placeholder {
  color: rgba(196, 201, 206, 0.52) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] textarea:focus {
  box-shadow:
    inset 0 0 0 1px rgba(230, 235, 240, 0.32),
    0 0 0 4px rgba(255, 255, 255, 0.08) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .glass-button.primary,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .primary-action {
  border-color: rgba(255, 255, 255, 0.19) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07)),
    linear-gradient(135deg, #62666b 0%, #2b2d31 48%, #121315 100%) !important;
  color: rgba(255, 255, 255, 0.96) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-faq-category {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Home portal three-card composition: keep the left trio and let them fill the stage. */
html[data-active-module="home"] .content-grid[data-module="home"] {
  grid-template-rows: minmax(0, 1fr) !important;
  align-content: stretch !important;
  overflow: hidden !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-strip {
  display: grid !important;
  grid-template-columns: minmax(26rem, 1.18fr) minmax(0, 1fr) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  gap: clamp(0.82rem, 1.22vw, 1.25rem) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
  perspective: 1200px;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card {
  --portal-card-pad: clamp(1.15rem, 1.65vw, 1.7rem);
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: clamp(1.05rem, 1.35vw, 1.42rem) !important;
  scroll-snap-align: none !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 18%),
    radial-gradient(circle at 48% 18%, rgba(255, 255, 255, 0.07), transparent 25%),
    linear-gradient(180deg, transparent 0 28%, rgba(4, 6, 8, 0.72) 68%, rgba(3, 4, 5, 0.94) 100%) !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(1)::before {
  background:
    radial-gradient(circle at 72% 18%, rgba(140, 233, 242, 0.14), transparent 30%),
    linear-gradient(180deg, transparent 26%, rgba(5, 6, 8, 0.86)),
    url("/player/assets/violin-master-cropped.png") center / cover no-repeat !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(2)::before {
  background:
    radial-gradient(circle at 78% 12%, rgba(228, 199, 127, 0.16), transparent 28%),
    linear-gradient(125deg, rgba(228, 199, 127, 0.13), rgba(140, 233, 242, 0.07) 46%, rgba(5, 8, 12, 0.7)) !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(3)::before {
  background:
    radial-gradient(circle at 24% 20%, rgba(140, 233, 242, 0.15), transparent 30%),
    linear-gradient(135deg, rgba(140, 233, 242, 0.1), rgba(228, 199, 127, 0.06) 42%, rgba(5, 8, 12, 0.72)) !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(1) .portal-visual {
  top: clamp(1rem, 1.5vw, 1.45rem) !important;
  right: clamp(1rem, 1.6vw, 1.5rem) !important;
  left: clamp(1rem, 1.6vw, 1.5rem) !important;
  height: clamp(15rem, 44vh, 27rem) !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(2) .portal-visual,
html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(3) .portal-visual {
  top: clamp(0.9rem, 1.35vw, 1.25rem) !important;
  right: clamp(1rem, 1.55vw, 1.45rem) !important;
  left: auto !important;
  width: clamp(14rem, 31vw, 28rem) !important;
  height: calc(100% - clamp(1.8rem, 2.8vw, 2.6rem)) !important;
  opacity: 0.8 !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(2) .portal-visual {
  transform: rotate(-1.4deg);
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(3) .portal-visual {
  transform: rotate(1.2deg);
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card > div {
  right: auto !important;
  bottom: clamp(5.2rem, 8.5vh, 6.4rem) !important;
  left: clamp(1.15rem, 1.7vw, 1.7rem) !important;
  max-width: min(22rem, calc(100% - 2.4rem)) !important;
  grid-template-rows: auto auto !important;
  justify-items: start !important;
  text-align: left !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(1) > div {
  bottom: clamp(6rem, 11vh, 8.2rem) !important;
  max-width: min(28rem, calc(100% - 2.4rem)) !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card h3 {
  font-size: clamp(1.95rem, 3.2vw, 3.25rem) !important;
  line-height: 1.02 !important;
  text-align: left !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(1) h3 {
  font-size: clamp(2.35rem, 4.25vw, 4.4rem) !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card p {
  min-height: 0 !important;
  max-width: min(23rem, 100%) !important;
  margin: clamp(0.6rem, 0.85vw, 0.86rem) 0 0 !important;
  color: rgba(226, 233, 235, 0.74) !important;
  font-size: clamp(0.92rem, 1.12vw, 1.08rem) !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-action {
  bottom: clamp(1.35rem, 2.35vw, 2.15rem) !important;
  left: clamp(1.15rem, 1.7vw, 1.7rem) !important;
  min-height: clamp(2.35rem, 3.2vw, 3rem) !important;
  transform: none !important;
}

@media (max-width: 1080px) {
  html[data-active-module="home"] .content-grid[data-module="home"] .portal-strip {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, minmax(13rem, 1fr)) !important;
    overflow-y: auto !important;
  }

  html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(1),
  html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(2),
  html[data-active-module="home"] .content-grid[data-module="home"] .portal-card:nth-child(3) {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 13rem !important;
  }
}

/* Navigation IA final layer: keep the top bar to four groups plus fixed right actions. */
.top-nav {
  overflow: visible !important;
}

.top-nav .top-nav-group {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  min-width: clamp(5.8rem, 7.2vw, 8.2rem);
}

.top-nav .top-nav-trigger {
  width: 100%;
}

.nav-workbench {
  display: grid;
  grid-column: span 12;
  gap: var(--grid-gap);
  min-height: min(41rem, calc(100vh - 9rem));
  color: var(--text-main);
}

.nav-workbench-practice,
.nav-workbench-generate {
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.3fr);
}

.workbench-primary,
.workbench-aside,
.workbench-list-head,
.workbench-search-row,
.workbench-library-groups,
.workbench-track-list,
.tools-entry-section {
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
}

.workbench-primary {
  display: grid;
  align-content: end;
  gap: clamp(0.9rem, 1.25vw, 1.2rem);
  min-height: min(36rem, calc(100vh - 10rem));
  padding: clamp(1.25rem, 2vw, 2rem);
}

.workbench-kicker,
.workbench-section-label {
  color: var(--accent);
  font-size: clamp(0.72rem, 0.82vw, 0.82rem);
  font-weight: 760;
}

.workbench-primary h3,
.workbench-list-head h3 {
  margin: 0;
  color: var(--text-main);
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  font-weight: 780;
  line-height: 1;
}

.workbench-primary p,
.workbench-list-head p,
.workbench-empty p {
  max-width: 42rem;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.practice-focus-strip,
.generate-parameter-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.practice-focus-strip span,
.generate-parameter-strip span {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--card-radius) * 0.8);
  background: var(--panel-soft);
}

.practice-focus-strip small,
.generate-parameter-strip small {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.practice-focus-strip strong,
.generate-parameter-strip strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-main);
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-progress-line {
  height: 0.42rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.practice-progress-line span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.workbench-main-actions,
.track-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.workbench-aside {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: clamp(0.9rem, 1.25vw, 1.1rem);
}

.workbench-action-list {
  display: grid;
  gap: 0.55rem;
}

.workbench-action,
.tools-entry-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.24rem 0.65rem;
  min-width: 0;
  min-height: 4.8rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--card-radius) * 0.8);
  background: var(--panel-soft);
  color: var(--text-main);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.workbench-action.is-muted {
  cursor: default;
  opacity: 0.72;
}

.workbench-action > span,
.tools-entry-card > span {
  grid-row: 1 / span 2;
  color: var(--accent);
}

.workbench-action strong,
.tools-entry-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-action small,
.tools-entry-card small {
  color: var(--text-muted);
  line-height: 1.45;
}

.workbench-action:hover,
.workbench-action:focus-visible,
.tools-entry-card:hover,
.tools-entry-card:focus-visible,
.workbench-filter-row button:hover,
.workbench-filter-row button.is-active,
.workbench-library-groups button:hover,
.workbench-library-groups button.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: 0;
}

.workbench-list-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 1.5vw, 1.35rem);
}

.workbench-search-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem;
}

.workbench-search-row label {
  display: grid;
  flex: 1;
  gap: 0.32rem;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.workbench-search-row input {
  width: 100%;
  min-height: 2.5rem;
  padding: 0 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-main);
}

.workbench-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.workbench-filter-row button,
.workbench-library-groups button {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--text-main);
  cursor: pointer;
}

.workbench-filter-row button {
  min-height: 2.1rem;
  padding: 0 0.85rem;
}

.workbench-library-layout {
  display: grid;
  grid-template-columns: minmax(11rem, 0.22fr) minmax(0, 1fr);
  gap: var(--grid-gap);
  min-height: 0;
}

.workbench-library-groups {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 0.8rem;
}

.workbench-library-groups button {
  display: grid;
  gap: 0.16rem;
  min-height: 3.2rem;
  padding: 0.62rem 0.75rem;
  border-radius: calc(var(--card-radius) * 0.8);
  text-align: left;
}

.workbench-library-groups small {
  color: var(--text-muted);
}

.workbench-track-list {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: 0.8rem;
  overflow: auto;
}

.workbench-track-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(8rem, auto) auto;
  gap: 0.8rem;
  align-items: center;
  min-height: 4.6rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--card-radius) * 0.8);
  background: var(--panel-soft);
}

.track-row-index {
  color: var(--accent);
  font-weight: 760;
}

.workbench-track-row strong,
.workbench-track-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-track-row small {
  color: var(--text-muted);
}

.track-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.track-row-tags b {
  padding: 0.18rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.workbench-empty {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--panel-soft);
}

.generate-upload-zone {
  display: grid;
  gap: 0.35rem;
  min-height: clamp(10rem, 20vh, 14rem);
  place-items: center;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--card-radius);
  background: var(--panel-soft);
  color: var(--text-main);
  cursor: pointer;
  font: inherit;
}

.generate-upload-zone span {
  color: var(--text-muted);
}

.generate-upload-zone:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.tools-section-stack {
  display: grid;
  gap: var(--grid-gap);
}

.nav-workbench-tools {
  width: min(100%, 64rem);
  justify-self: start;
  min-height: auto;
  align-content: start;
  padding-top: clamp(0.15rem, 0.45vw, 0.45rem);
}

.tools-board-layout {
  width: 100%;
  gap: clamp(0.9rem, 1.15vw, 1.15rem);
}

.tools-entry-section {
  display: grid;
  gap: 0.8rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tools-board-title {
  color: var(--text-main);
  font-size: clamp(1.05rem, 1.25vw, 1.35rem);
  font-weight: 820;
  letter-spacing: 0;
}

.tools-entry-grid {
  display: grid;
  gap: clamp(0.68rem, 0.9vw, 0.85rem);
}

.tools-learning-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tools-practice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.78rem, 1vw, 0.95rem);
}

.tools-material-card,
.tools-practice-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: calc(var(--card-radius) * 1.05);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.28);
}

.tools-material-card::before,
.tools-practice-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 28%, rgba(215, 154, 98, 0.16), transparent 34%),
    radial-gradient(circle at 78% 82%, rgba(139, 179, 255, 0.08), transparent 36%);
  opacity: 0.85;
}

.tools-material-card {
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 0.45rem;
  min-height: clamp(12.5rem, 17vw, 14rem);
  padding: clamp(1rem, 1.55vw, 1.35rem);
  text-align: center;
}

.tools-material-card .tools-card-icon {
  display: grid;
  place-items: center;
  width: clamp(3.2rem, 5vw, 4.8rem);
  height: clamp(3.2rem, 5vw, 4.8rem);
  margin-bottom: 0.35rem;
  border-radius: 0.45rem;
  color: rgba(235, 196, 137, 0.96);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  text-shadow: 0 0 18px rgba(215, 154, 98, 0.34);
}

.tools-material-card strong {
  color: var(--text-main);
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  font-weight: 830;
}

.tools-material-card small {
  color: var(--text-muted);
  font-size: clamp(0.72rem, 0.78vw, 0.82rem);
  line-height: 1.45;
}

.tools-practice-card {
  grid-template-columns: auto minmax(0, 1fr) minmax(8rem, 0.42fr);
  align-items: center;
  min-height: clamp(7.2rem, 11vw, 9.6rem);
  padding: clamp(1rem, 1.5vw, 1.3rem);
  text-align: left;
}

.tools-practice-card .tools-card-icon {
  display: grid;
  place-items: center;
  width: clamp(3rem, 4vw, 4rem);
  height: clamp(3rem, 4vw, 4rem);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(244, 211, 160, 0.96);
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  text-shadow: 0 0 16px rgba(215, 154, 98, 0.26);
}

.tools-practice-copy {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.tools-practice-copy strong {
  color: var(--text-main);
  font-size: clamp(1.05rem, 1.25vw, 1.3rem);
  font-weight: 840;
}

.tools-practice-copy small {
  color: var(--text-muted);
  line-height: 1.45;
}

.tools-card-visual {
  position: relative;
  display: block;
  min-height: 5rem;
  opacity: 0.82;
}

.tools-practice-card.is-metronome .tools-card-visual::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.35rem;
  width: clamp(3.6rem, 6vw, 5.4rem);
  height: clamp(4.9rem, 8vw, 7rem);
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 86% 100%, 14% 100%);
  border: 1px solid rgba(232, 198, 139, 0.34);
  border-radius: 0.25rem;
  background:
    linear-gradient(90deg, transparent 48%, rgba(245, 220, 172, 0.72) 49%, rgba(245, 220, 172, 0.72) 51%, transparent 52%),
    linear-gradient(180deg, rgba(205, 142, 73, 0.52), rgba(70, 41, 22, 0.92));
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.32);
}

.tools-practice-card.is-metronome .tools-card-visual::after {
  content: "";
  position: absolute;
  left: 60%;
  top: 1.8rem;
  width: clamp(3.4rem, 5.6vw, 5rem);
  height: 0.18rem;
  transform: rotate(-42deg);
  transform-origin: left center;
  border-radius: 999px;
  background: rgba(232, 198, 139, 0.6);
  box-shadow: 0 0 14px rgba(232, 198, 139, 0.22);
}

.tools-practice-card.is-tuner .tools-card-visual::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 20%;
  height: 58%;
  border-top: 2px solid rgba(232, 198, 139, 0.38);
  border-radius: 50% 50% 0 0;
  transform: rotate(-2deg);
}

.tools-practice-card.is-tuner .tools-card-visual::after {
  content: "440Hz";
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  color: rgba(245, 232, 201, 0.74);
  font-size: clamp(0.72rem, 0.95vw, 0.95rem);
  font-weight: 760;
}

.tools-practice-card.is-tuner .tools-card-visual {
  background:
    linear-gradient(67deg, transparent 48%, rgba(232, 198, 139, 0.8) 49%, rgba(232, 198, 139, 0.8) 51%, transparent 52%) 50% 66% / 60% 55% no-repeat;
}

.support-pill {
  min-height: clamp(2.25rem, 2.75vw, 2.55rem);
  padding: 0 0.72rem;
  border: 1px solid rgba(132, 226, 235, 0.28);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 20%, rgba(132, 226, 235, 0.11), transparent 28%),
    rgba(255, 255, 255, 0.03);
  color: rgba(222, 242, 250, 0.92);
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .top-nav {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .top-nav .top-nav-group {
    flex: 0 0 auto;
  }

  .nav-workbench-practice,
  .nav-workbench-generate,
  .workbench-library-layout {
    grid-template-columns: 1fr;
  }

  .workbench-primary {
    min-height: 18rem;
  }

  .practice-focus-strip,
  .generate-parameter-strip,
  .tools-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workbench-track-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .track-row-tags,
  .track-row-actions {
    grid-column: 2;
  }
}

@media (max-width: 1680px) {
  .member-pill,
  .support-pill {
    display: inline-flex;
    align-items: center;
  }

  .user-profile span {
    display: inline;
  }
}

@media (max-width: 1280px) {
  body .topbar .user-area {
    display: flex;
  }
}

@media (max-width: 760px) {
  .practice-focus-strip,
  .generate-parameter-strip,
  .tools-entry-grid {
    grid-template-columns: 1fr;
  }

  .tools-practice-grid {
    grid-template-columns: 1fr;
  }

  .workbench-list-head,
  .workbench-search-row {
    align-items: stretch;
    flex-direction: column;
  }

  .workbench-track-row {
    grid-template-columns: 1fr;
  }

  .track-row-tags,
  .track-row-actions {
    grid-column: auto;
  }
}

/* Practice category board: large training-player preview plus four original entry cards. */
html[data-active-module="nav-practice"] .app-shell {
  place-items: center;
  padding: clamp(0.75rem, 1.35vw, 1.5rem);
}

html[data-active-module="nav-practice"] .main-stage {
  --practice-shell-margin: clamp(0.75rem, 1.35vw, 1.5rem);
  --practice-shell-w: calc(100dvw - (var(--practice-shell-margin) * 2));
  --practice-shell-h: calc(var(--app-height, 100dvh) - (var(--practice-shell-margin) * 2));
  align-self: center;
  justify-self: center;
  width: var(--practice-shell-w) !important;
  height: var(--practice-shell-h) !important;
  min-height: 0 !important;
  max-width: none;
  max-height: none;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(236, 243, 255, 0.13);
  border-radius: clamp(1rem, 1.55vw, 1.45rem);
  background:
    radial-gradient(circle at 18% 10%, rgba(226, 181, 105, 0.12), transparent 30%),
    radial-gradient(circle at 88% 2%, rgba(106, 169, 250, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.028)),
    rgba(3, 6, 10, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1.4rem 4rem rgba(0, 0, 0, 0.48),
    0 0 3rem rgba(106, 169, 250, 0.08);
}

html[data-active-module="nav-practice"] .topbar {
  min-height: auto;
  margin: 0 !important;
  padding: clamp(0.62rem, 1vw, 0.86rem) clamp(0.78rem, 1.35vw, 1.12rem);
  gap: clamp(0.45rem, 0.72vw, 0.72rem);
  border-bottom: 1px solid rgba(236, 243, 255, 0.09);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.018)),
    rgba(2, 5, 9, 0.36);
  box-shadow: none;
}

html[data-active-module="nav-practice"] .top-brand {
  max-width: clamp(7.7rem, 11vw, 9.6rem);
  min-height: clamp(2.2rem, 2.55vw, 2.45rem);
  padding: 0.14rem 0.38rem 0.14rem 0.16rem;
  gap: 0.42rem;
}

html[data-active-module="nav-practice"] .brand-mark {
  width: clamp(2rem, 2.45vw, 2.25rem);
  height: clamp(2rem, 2.45vw, 2.25rem);
}

html[data-active-module="nav-practice"] .top-brand strong {
  font-size: clamp(0.86rem, 0.9vw, 0.98rem);
}

html[data-active-module="nav-practice"] .top-brand em {
  display: none;
}

html[data-active-module="nav-practice"] .top-nav {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.16rem;
  gap: 0.16rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

html[data-active-module="nav-practice"] .top-nav .top-nav-group {
  flex: 1 1 0;
  min-width: 0;
}

html[data-active-module="nav-practice"] .top-nav .nav-item {
  min-width: 0;
  min-height: clamp(2.04rem, 2.45vw, 2.3rem);
  padding: 0.36rem 0.44rem;
  font-size: clamp(0.74rem, 0.8vw, 0.86rem);
}

html[data-active-module="nav-practice"] .top-nav .nav-icon {
  margin-right: 0.16rem;
  font-size: 0.92em;
}

html[data-active-module="nav-practice"] .user-area {
  display: flex !important;
  flex: 0 0 auto;
  gap: 0.34rem;
  margin-left: 0;
}

html[data-active-module="nav-practice"] .notification-button {
  width: clamp(2.2rem, 2.7vw, 2.42rem);
  height: clamp(2.2rem, 2.7vw, 2.42rem);
}

html[data-active-module="nav-practice"] .user-profile {
  min-height: clamp(2.2rem, 2.7vw, 2.42rem);
  gap: 0.28rem;
  padding: 0.12rem;
}

html[data-active-module="nav-practice"] .user-profile img {
  width: clamp(1.92rem, 2.28vw, 2.08rem);
  height: clamp(1.92rem, 2.28vw, 2.08rem);
}

html[data-active-module="nav-practice"] .user-profile span,
html[data-active-module="nav-practice"] .profile-settings-symbol {
  display: none;
}

html[data-active-module="nav-practice"] .content-grid[data-module="nav-practice"] {
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(1rem, 1.45vw, 1.55rem) clamp(1.15rem, 1.75vw, 2rem) clamp(1.15rem, 1.65vw, 1.7rem);
  overflow: hidden !important;
  align-content: stretch;
  gap: 0;
  grid-auto-rows: minmax(0, 1fr);
}

html[data-active-module="nav-practice"] .nav-workbench-practice {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2.45fr) minmax(16rem, 0.95fr);
  gap: clamp(0.85rem, 1.24vw, 1.25rem);
  width: 100%;
  height: 100%;
  min-height: 0;
  color: var(--text-main);
}

html[data-active-module="nav-practice"] .practice-player-board,
html[data-active-module="nav-practice"] .practice-route-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(236, 243, 255, 0.12);
  border-radius: clamp(0.64rem, 0.85vw, 0.82rem);
  background:
    radial-gradient(circle at 78% 7%, rgba(106, 169, 250, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.056), rgba(255, 255, 255, 0.019)),
    rgba(7, 12, 19, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 1.1rem 2.4rem rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
}

html[data-active-module="nav-practice"] .practice-player-board {
  display: grid;
  grid-template-rows: auto minmax(7rem, 0.8fr) minmax(10rem, 1.15fr) auto;
  min-height: 0;
  padding: clamp(1rem, 1.5vw, 1.35rem);
  isolation: isolate;
}

html[data-active-module="nav-practice"] .practice-player-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 52% 58%, rgba(226, 181, 105, 0.11), transparent 24%),
    radial-gradient(ellipse at 58% 62%, rgba(255, 239, 198, 0.12), transparent 9%),
    linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.32));
  pointer-events: none;
  z-index: -1;
}

html[data-active-module="nav-practice"] .practice-player-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  min-height: 0;
}

html[data-active-module="nav-practice"] .practice-player-copy {
  display: grid;
  gap: clamp(0.42rem, 0.7vw, 0.64rem);
  min-width: 0;
}

html[data-active-module="nav-practice"] .practice-player-copy h3 {
  margin: 0;
  color: rgba(252, 253, 255, 0.98);
  font-size: clamp(1.6rem, 2.45vw, 2.4rem);
  font-weight: 850;
  line-height: 1;
}

html[data-active-module="nav-practice"] .practice-player-copy p {
  margin: 0;
  color: rgba(222, 232, 238, 0.66);
  font-weight: 760;
}

html[data-active-module="nav-practice"] .practice-player-copy span {
  width: fit-content;
  min-height: 1.8rem;
  padding: 0.35rem 0.72rem;
  border: 1px solid rgba(226, 181, 105, 0.2);
  border-radius: 999px;
  color: rgba(255, 230, 181, 0.94);
  font-size: clamp(0.74rem, 0.82vw, 0.84rem);
  font-weight: 780;
}

html[data-active-module="nav-practice"] .practice-accuracy-card {
  display: grid;
  grid-template-columns: auto minmax(4.2rem, 6.3rem);
  align-items: center;
  gap: clamp(0.55rem, 0.9vw, 0.85rem);
  width: min(17rem, 31%);
  min-width: 9.2rem;
  min-height: clamp(4.2rem, 6.8vw, 5.8rem);
  padding: clamp(0.72rem, 1vw, 0.95rem);
  border: 1px solid rgba(236, 243, 255, 0.1);
  border-radius: 0.62rem;
  background:
    radial-gradient(circle at 75% 34%, rgba(82, 209, 127, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(14, 23, 35, 0.72);
}

html[data-active-module="nav-practice"] .practice-accuracy-card small {
  color: rgba(236, 242, 248, 0.76);
  font-size: clamp(0.8rem, 0.9vw, 0.94rem);
  font-weight: 800;
}

html[data-active-module="nav-practice"] .practice-accuracy-gauge {
  position: relative;
  display: grid;
  aspect-ratio: 1.72 / 1;
  place-items: end center;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  background:
    conic-gradient(from 236deg at 50% 100%, rgba(255, 204, 112, 0.95) 0 16%, rgba(93, 205, 116, 0.92) 16% 58%, rgba(236, 243, 255, 0.13) 58% 74%, transparent 74% 100%);
}

html[data-active-module="nav-practice"] .practice-accuracy-gauge::after {
  content: "";
  position: absolute;
  inset: 20% 16% 0;
  border-radius: inherit;
  background: rgba(14, 23, 35, 0.9);
}

html[data-active-module="nav-practice"] .practice-accuracy-gauge b {
  position: relative;
  z-index: 1;
  margin-bottom: 0.28rem;
  color: rgba(252, 253, 255, 0.98);
  font-size: clamp(1.12rem, 1.55vw, 1.6rem);
}

html[data-active-module="nav-practice"] .practice-score-preview {
  position: relative;
  align-self: center;
  height: clamp(7.4rem, 17vh, 10.4rem);
  margin: clamp(0.2rem, 0.6vw, 0.65rem) clamp(0.7rem, 1.3vw, 1.25rem) 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(50% - 2rem), rgba(236, 243, 255, 0.2) calc(50% - 2rem) calc(50% - 1.94rem), transparent calc(50% - 1.94rem) calc(50% - 1.2rem), rgba(236, 243, 255, 0.19) calc(50% - 1.2rem) calc(50% - 1.14rem), transparent calc(50% - 1.14rem) calc(50% - 0.4rem), rgba(236, 243, 255, 0.18) calc(50% - 0.4rem) calc(50% - 0.34rem), transparent calc(50% - 0.34rem) calc(50% + 0.4rem), rgba(236, 243, 255, 0.18) calc(50% + 0.4rem) calc(50% + 0.46rem), transparent calc(50% + 0.46rem) calc(50% + 1.2rem), rgba(236, 243, 255, 0.19) calc(50% + 1.2rem) calc(50% + 1.26rem), transparent calc(50% + 1.26rem) 100%);
}

html[data-active-module="nav-practice"] .practice-clef {
  position: absolute;
  left: 0.4rem;
  top: 45%;
  transform: translateY(-50%);
  color: rgba(236, 243, 255, 0.78);
  font-size: clamp(3rem, 5.2vw, 4.9rem);
  font-weight: 400;
}

html[data-active-module="nav-practice"] .practice-time-signature {
  position: absolute;
  left: clamp(4.2rem, 7vw, 6rem);
  top: 44%;
  color: rgba(236, 243, 255, 0.62);
  font-style: normal;
  font-size: clamp(1rem, 1.6vw, 1.45rem);
}

html[data-active-module="nav-practice"] .practice-score-playhead {
  position: absolute;
  left: 35.5%;
  top: 14%;
  width: 1px;
  height: 74%;
  background: rgba(226, 181, 105, 0.92);
  box-shadow: 0 0 1.1rem rgba(226, 181, 105, 0.62);
}

html[data-active-module="nav-practice"] .practice-note {
  position: absolute;
  left: var(--note-x);
  top: var(--note-y);
  width: clamp(0.42rem, 0.82vw, 0.72rem);
  height: clamp(0.3rem, 0.56vw, 0.48rem);
  border-radius: 50%;
  background: rgba(236, 243, 255, 0.82);
  box-shadow: 0 0 0.7rem rgba(236, 243, 255, 0.16);
  transform: rotate(-14deg);
}

html[data-active-module="nav-practice"] .practice-note::after {
  content: "";
  position: absolute;
  left: 83%;
  bottom: 38%;
  width: 1px;
  height: clamp(1.45rem, 2.6vw, 2.28rem);
  background: rgba(236, 243, 255, 0.48);
  transform: rotate(14deg);
  transform-origin: bottom;
}

html[data-active-module="nav-practice"] .practice-fingerboard-scene {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

html[data-active-module="nav-practice"] .practice-violin-body {
  position: absolute;
  left: 50%;
  bottom: -47%;
  width: min(92%, 48rem);
  max-height: none;
  opacity: 0.58;
  filter: saturate(1.08) contrast(1.08) brightness(0.72);
  transform: translateX(-50%) rotate(-90deg) scaleX(1.12);
  transform-origin: 50% 50%;
  pointer-events: none;
}

html[data-active-module="nav-practice"] .practice-fingerboard {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: min(47rem, 72%);
  height: min(16rem, 92%);
  transform: translateX(-50%);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(circle at 50% 65%, rgba(226, 181, 105, 0.18), transparent 12%),
    linear-gradient(90deg, transparent 0 23%, rgba(236, 243, 255, 0.2) 23.2% 23.45%, transparent 23.6% 39%, rgba(236, 243, 255, 0.18) 39.2% 39.45%, transparent 39.6% 55%, rgba(236, 243, 255, 0.16) 55.2% 55.45%, transparent 55.6% 72%, rgba(236, 243, 255, 0.15) 72.2% 72.45%, transparent 72.6% 100%),
    linear-gradient(180deg, rgba(29, 35, 43, 0.92), rgba(8, 11, 15, 0.88));
  box-shadow:
    inset 0 1.2rem 2.6rem rgba(255, 255, 255, 0.08),
    inset 0 -1.5rem 2rem rgba(0, 0, 0, 0.42);
}

html[data-active-module="nav-practice"] .practice-fingerboard > span {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(236, 243, 255, 0.34);
  box-shadow: 0 0 0.45rem rgba(236, 243, 255, 0.12);
}

html[data-active-module="nav-practice"] .practice-fingerboard > span:nth-child(1) { top: 18%; }
html[data-active-module="nav-practice"] .practice-fingerboard > span:nth-child(2) { top: 36%; }
html[data-active-module="nav-practice"] .practice-fingerboard > span:nth-child(3) { top: 56%; }
html[data-active-module="nav-practice"] .practice-fingerboard > span:nth-child(4) { top: 77%; }

html[data-active-module="nav-practice"] .practice-position-line {
  position: absolute;
  top: 8%;
  width: 2px;
  height: 94%;
  background: linear-gradient(180deg, transparent, rgba(236, 243, 255, 0.54), transparent);
}

html[data-active-module="nav-practice"] .practice-position-line.is-a { left: 26%; transform: rotate(16deg); }
html[data-active-module="nav-practice"] .practice-position-line.is-b { left: 50%; transform: rotate(0deg); }
html[data-active-module="nav-practice"] .practice-position-line.is-c { left: 74%; transform: rotate(-16deg); }

html[data-active-module="nav-practice"] .practice-finger-label {
  position: absolute;
  left: var(--label-x);
  top: 7%;
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(236, 243, 255, 0.12);
  color: rgba(236, 243, 255, 0.74);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 850;
}

html[data-active-module="nav-practice"] .practice-finger-dot {
  position: absolute;
  display: grid;
  width: clamp(1rem, 1.55vw, 1.45rem);
  height: clamp(1rem, 1.55vw, 1.45rem);
  place-items: center;
  border: 2px solid rgba(255, 232, 188, 0.62);
  border-radius: 999px;
  background: rgba(226, 181, 105, 0.42);
  box-shadow: 0 0 1rem rgba(226, 181, 105, 0.42);
}

html[data-active-module="nav-practice"] .practice-finger-dot::after {
  content: "";
  width: 0.34rem;
  height: 0.34rem;
  border-radius: inherit;
  background: rgba(255, 241, 214, 0.9);
}

html[data-active-module="nav-practice"] .practice-finger-dot.is-one { left: 22%; top: 31%; }
html[data-active-module="nav-practice"] .practice-finger-dot.is-two { left: 50%; top: 55%; }
html[data-active-module="nav-practice"] .practice-finger-dot.is-three { left: 39%; top: 76%; }

html[data-active-module="nav-practice"] .practice-player-controls {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(0.55rem, 0.9vw, 0.95rem);
  min-height: clamp(3.3rem, 5.4vw, 4.5rem);
}

html[data-active-module="nav-practice"] .practice-play-button {
  display: grid;
  width: clamp(3.05rem, 4.7vw, 4.2rem);
  height: clamp(3.05rem, 4.7vw, 4.2rem);
  place-items: center;
  border: 1px solid rgba(255, 232, 188, 0.42);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(228, 196, 139, 0.95), rgba(136, 97, 53, 0.9)),
    rgba(226, 181, 105, 0.88);
  color: rgba(255, 253, 247, 0.98);
  cursor: pointer;
  font: inherit;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 900;
  box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.38);
}

html[data-active-module="nav-practice"] .practice-score-button,
html[data-active-module="nav-practice"] .practice-pitch-button,
html[data-active-module="nav-practice"] .practice-progress-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: clamp(2.2rem, 3.2vw, 2.75rem);
  padding: 0 0.74rem;
  border: 1px solid rgba(236, 243, 255, 0.1);
  border-radius: 999px;
  background: rgba(2, 5, 9, 0.28);
  color: rgba(236, 242, 248, 0.72);
  cursor: pointer;
  font: inherit;
  font-weight: 780;
}

html[data-active-module="nav-practice"] .practice-score-button span {
  font-size: 0.78rem;
}

html[data-active-module="nav-practice"] .practice-timebar {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  color: rgba(222, 232, 238, 0.48);
  font-size: clamp(0.76rem, 0.88vw, 0.88rem);
  text-align: center;
}

html[data-active-module="nav-practice"] .practice-timebar i {
  display: block;
  height: 0.34rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(236, 243, 255, 0.16);
}

html[data-active-module="nav-practice"] .practice-timebar b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(226, 181, 105, 0.95);
  box-shadow: 0 0 1rem rgba(226, 181, 105, 0.32);
}

html[data-active-module="nav-practice"] .practice-pitch-button {
  color: rgba(222, 232, 238, 0.68);
}

html[data-active-module="nav-practice"] .practice-progress-badge {
  border-color: rgba(226, 181, 105, 0.24);
  color: rgba(255, 224, 169, 0.96);
  font-size: clamp(0.92rem, 1.1vw, 1.08rem);
}

html[data-active-module="nav-practice"] .practice-route-rail {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.2vw, 1.18rem);
  min-height: 0;
}

html[data-active-module="nav-practice"] .practice-route-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(6.4rem, 34%);
  align-items: center;
  gap: clamp(0.55rem, 0.85vw, 0.8rem);
  min-width: 0;
  min-height: 0;
  padding: clamp(0.9rem, 1.25vw, 1.2rem);
  color: var(--text-main);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

html[data-active-module="nav-practice"] .practice-route-card:hover,
html[data-active-module="nav-practice"] .practice-route-card:focus-visible {
  border-color: rgba(226, 181, 105, 0.36);
  background:
    radial-gradient(circle at 82% 24%, rgba(226, 181, 105, 0.16), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.074), rgba(255, 255, 255, 0.026)),
    rgba(9, 15, 24, 0.72);
  outline: 0;
}

html[data-active-module="nav-practice"] .practice-route-index {
  align-self: start;
  color: rgba(226, 181, 105, 0.94);
  font-size: clamp(0.9rem, 1.1vw, 1.1rem);
  font-weight: 820;
}

html[data-active-module="nav-practice"] .practice-route-copy {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
}

html[data-active-module="nav-practice"] .practice-route-copy strong {
  overflow: hidden;
  color: rgba(252, 253, 255, 0.96);
  font-size: clamp(1.12rem, 1.42vw, 1.48rem);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-active-module="nav-practice"] .practice-route-copy small {
  overflow: hidden;
  color: rgba(222, 232, 238, 0.56);
  font-size: clamp(0.78rem, 0.92vw, 0.92rem);
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-active-module="nav-practice"] .practice-route-visual {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 4rem;
  opacity: 0.82;
}

html[data-active-module="nav-practice"] .practice-route-card.is-fingering .practice-route-visual {
  background: url("/player/assets/hand-teacher/open-string-first-position-pose.transparent.png") 60% 58% / contain no-repeat;
  filter: brightness(0.78) saturate(0.94);
}

html[data-active-module="nav-practice"] .practice-route-card.is-bowing .practice-route-visual {
  background: url("/player/assets/practice/bowing-hand-real.png") 70% 48% / 135% auto no-repeat;
  filter: brightness(0.68) saturate(0.9);
}

html[data-active-module="nav-practice"] .practice-route-card.is-reports .practice-route-visual::before {
  content: "";
  position: absolute;
  inset: 18% 8% 14%;
  background:
    linear-gradient(180deg, transparent 58%, rgba(226, 181, 105, 0.58) 58%) 12% 100% / 16% 62% no-repeat,
    linear-gradient(180deg, transparent 36%, rgba(226, 181, 105, 0.7) 36%) 40% 100% / 16% 86% no-repeat,
    linear-gradient(180deg, transparent 50%, rgba(226, 181, 105, 0.5) 50%) 68% 100% / 16% 70% no-repeat;
  border-bottom: 1px solid rgba(226, 181, 105, 0.28);
  filter: drop-shadow(0 0 0.8rem rgba(226, 181, 105, 0.18));
}

html[data-active-module="nav-practice"] .practice-route-card.is-teacher .practice-route-visual {
  border: 1px solid rgba(78, 133, 233, 0.28);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(82, 142, 255, 0.16), transparent 66%),
    url("/platform/assets/ai-violin-teacher.png") center 36% / 74% auto no-repeat;
  box-shadow: inset 0 0 1.2rem rgba(78, 133, 233, 0.24);
}

html[data-active-module="nav-practice"] .practice-route-card.is-teacher .practice-route-visual::after {
  content: "";
  position: absolute;
  left: 32%;
  right: 32%;
  top: 28%;
  bottom: 28%;
  background:
    linear-gradient(90deg, rgba(82, 142, 255, 0.88), rgba(82, 142, 255, 0.22)) 0 50% / 100% 0.16rem no-repeat,
    linear-gradient(90deg, rgba(82, 142, 255, 0.22), rgba(82, 142, 255, 0.88)) 0 30% / 100% 0.16rem no-repeat,
    linear-gradient(90deg, rgba(82, 142, 255, 0.22), rgba(82, 142, 255, 0.88)) 0 70% / 100% 0.16rem no-repeat;
}

@media (max-width: 1080px) {
  html[data-active-module="nav-practice"] .main-stage {
    --practice-shell-margin: 0.75rem;
  }

  html[data-active-module="nav-practice"] .topbar {
    flex-wrap: wrap;
  }

  html[data-active-module="nav-practice"] .top-nav {
    order: 3;
    flex-basis: 100%;
  }

  html[data-active-module="nav-practice"] .nav-workbench-practice {
    grid-template-columns: minmax(0, 2.15fr) minmax(13rem, 0.85fr);
  }
}

@media (max-width: 760px) {
  html[data-active-module="nav-practice"] .app-shell {
    padding: 0.5rem;
  }

  html[data-active-module="nav-practice"] .main-stage {
    --practice-shell-margin: 0.5rem;
  }

  html[data-active-module="nav-practice"] .content-grid[data-module="nav-practice"] {
    overflow-y: auto !important;
  }

  html[data-active-module="nav-practice"] .nav-workbench-practice {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.55fr) minmax(0, 0.95fr);
  }

  html[data-active-module="nav-practice"] .practice-player-head,
  html[data-active-module="nav-practice"] .practice-player-controls {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  html[data-active-module="nav-practice"] .practice-accuracy-card {
    width: 100%;
  }

  html[data-active-module="nav-practice"] .practice-route-rail,
  html[data-active-module="nav-practice"] .practice-route-card {
    grid-template-columns: 1fr;
  }
}

/* Final visual pass: filtered reference images as real card image layers. */
html[data-active-module="nav-learningTools"] .tools-entry-card {
  background-image: none !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: brightness(1.08) saturate(1.05) contrast(1.02) !important;
  pointer-events: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card::after {
  background:
    linear-gradient(180deg, transparent 0%, transparent 47%, rgba(0, 0, 0, 0.58) 64%, rgba(0, 0, 0, 0.92) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.86) 40%, rgba(0, 0, 0, 0.28) 64%, transparent 86%),
    radial-gradient(ellipse at 28% 80%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.48) 36%, rgba(0, 0, 0, 0.14) 62%, transparent 84%) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.88) 31%, rgba(0, 0, 0, 0.22) 48%, transparent 68%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.04) 54%, rgba(0, 0, 0, 0.10) 100%) !important;
}

@media (min-width: 1620px) {
  html[data-active-module="nav-learningTools"] .nav-workbench-tools {
    width: 1578px !important;
    max-width: 1578px !important;
  }

  html[data-active-module="nav-learningTools"] .tools-learning-grid {
    grid-template-columns: repeat(5, 304px) !important;
    gap: 13px !important;
  }

  html[data-active-module="nav-learningTools"] .tools-practice-grid {
    grid-template-columns: repeat(2, 782px) !important;
    gap: 19px !important;
  }

  html[data-active-module="nav-learningTools"] .tools-material-card {
    width: 304px !important;
    height: 351px !important;
  }

html[data-active-module="nav-learningTools"] .tools-practice-card {
    width: 782px !important;
    height: 302px !important;
  }
}

/* Final card polish: keep target-image brightness, cover only the source text zones. */
html[data-active-module="nav-learningTools"] .tools-entry-card::before {
  filter: brightness(1.11) saturate(1.08) contrast(1.02) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card::after {
  background:
    linear-gradient(180deg, transparent 0%, transparent 64%, rgba(0, 0, 0, 0.10) 100%),
    radial-gradient(ellipse at 18% 86%, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.10) 36%, transparent 72%) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.04) 50%, transparent 72%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.04)) !important;
}

html[data-active-module="nav-learningTools"] .tools-card-copy,
html[data-active-module="nav-learningTools"] .tools-practice-copy {
  isolation: isolate !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card .tools-card-copy {
  transform: translateY(0.78rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-card-copy::before,
html[data-active-module="nav-learningTools"] .tools-practice-copy::before {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

html[data-active-module="nav-learningTools"] .tools-card-copy::before {
  inset: -0.48rem -2.45rem -0.56rem -0.62rem !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-copy::before {
  inset: -0.65rem -2.85rem -0.72rem -0.78rem !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro::before {
  background-image: url("/platform/assets/learning-card-feature.png?v=learning-reference-crops-20260603-9") !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-basics::before {
  background-image: url("/platform/assets/learning-card-basic.png?v=learning-reference-crops-20260603-23") !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-posture::before {
  background-image: url("/platform/assets/learning-card-posture.png?v=learning-reference-crops-20260603-23") !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-notes::before {
  background-image: url("/platform/assets/learning-card-notes.png?v=learning-reference-crops-20260603-23") !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-theory::before {
  background-image: url("/platform/assets/learning-card-theory.png?v=learning-reference-crops-20260603-23") !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before {
  inset: calc(-100% * 32 / 302) 0 0 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png") top center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: brightness(1.08) saturate(1.05) contrast(1.02) !important;
  opacity: 1 !important;
  clip-path: inset(0 10.784314% 0 10.784314%) !important;
  pointer-events: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::before {
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/platform/assets/learning-tool-tuner-no-text.png?v=learning-reference-crops-20260603-24") center / cover no-repeat !important;
  box-shadow: none !important;
  filter: brightness(1.08) saturate(1.05) contrast(1.02) !important;
  opacity: 1 !important;
  clip-path: none !important;
  pointer-events: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-copy strong {
  font-size: clamp(1.72rem, 2.06vw, 2.18rem) !important;
  line-height: 1.04 !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-copy small {
  font-size: clamp(0.94rem, 1.08vw, 1.1rem) !important;
  line-height: 1.28 !important;
  color: rgba(245, 242, 234, 0.78) !important;
}

/* Metronome popout: one card-level image with a transparent top band. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible {
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  overflow: visible !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome > .tools-card-visual.card-visual-metronome {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Learning tools viewport fit: keep the practice cards clear of the bottom edge on short screens. */
@media (min-width: 1181px) and (max-height: 760px) {
  html[data-active-module="nav-learningTools"] .topbar {
    min-height: clamp(3.82rem, 4.7vw, 4.75rem) !important;
    padding-top: clamp(0.56rem, 0.74vw, 0.72rem) !important;
    padding-bottom: clamp(0.56rem, 0.74vw, 0.72rem) !important;
  }

  html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
    height: calc(var(--app-height, 100dvh) - clamp(3.82rem, 4.7vw, 4.75rem)) !important;
    padding-top: clamp(0.82rem, 1.08vw, 1.1rem) !important;
    padding-bottom: clamp(1.55rem, 2.2vw, 2rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-board-layout {
    gap: clamp(0.92rem, 1.32vw, 1.28rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-entry-section {
    gap: clamp(0.62rem, 0.84vw, 0.88rem) !important;
  }
}

/* Shared premium top navigation: keep the Learning Tools glass nav across main platform pages. */
html[data-active-module="home"] .topbar,
html[data-active-module="nav-practice"] .topbar,
html[data-active-module="practice"] .topbar,
html[data-active-module="reports"] .topbar,
html[data-active-module="teacher"] .topbar,
html[data-active-module="nav-library"] .topbar,
html[data-active-module="nav-generate"] .topbar,
html[data-active-module="pieces"] .topbar,
html[data-active-module="scoreEditor"] .topbar,
html[data-active-module="nav-learningTools"] .topbar,
html[data-active-module="featureIntro"] .topbar,
html[data-active-module="violinKnowledge"] .topbar,
html[data-active-module="metronome"] .topbar,
html[data-active-module="tuner"] .topbar,
html[data-active-module="tools"] .topbar {
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.62rem, 1vw, 1.1rem) !important;
  min-height: clamp(4.2rem, 5.2vw, 5.35rem) !important;
  margin-bottom: clamp(1rem, 1.55vw, 1.5rem) !important;
  padding: clamp(0.72rem, 0.96vw, 0.95rem) clamp(1.25rem, 1.85vw, 1.9rem) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(5, 7, 10, 0.62) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html[data-active-module="home"] .top-brand,
html[data-active-module="nav-practice"] .top-brand,
html[data-active-module="practice"] .top-brand,
html[data-active-module="reports"] .top-brand,
html[data-active-module="teacher"] .top-brand,
html[data-active-module="nav-library"] .top-brand,
html[data-active-module="nav-generate"] .top-brand,
html[data-active-module="pieces"] .top-brand,
html[data-active-module="scoreEditor"] .top-brand,
html[data-active-module="nav-learningTools"] .top-brand,
html[data-active-module="featureIntro"] .top-brand,
html[data-active-module="violinKnowledge"] .top-brand,
html[data-active-module="metronome"] .top-brand,
html[data-active-module="tuner"] .top-brand,
html[data-active-module="tools"] .top-brand {
  flex: 0 0 auto !important;
  min-width: clamp(8.6rem, 12.2vw, 11rem) !important;
  max-width: clamp(8.6rem, 12.2vw, 11rem) !important;
  min-height: clamp(2.55rem, 3vw, 2.95rem) !important;
  padding: 0.16rem 0.52rem 0.16rem 0.14rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="home"] .brand-mark,
html[data-active-module="nav-practice"] .brand-mark,
html[data-active-module="practice"] .brand-mark,
html[data-active-module="reports"] .brand-mark,
html[data-active-module="teacher"] .brand-mark,
html[data-active-module="nav-library"] .brand-mark,
html[data-active-module="nav-generate"] .brand-mark,
html[data-active-module="pieces"] .brand-mark,
html[data-active-module="scoreEditor"] .brand-mark,
html[data-active-module="nav-learningTools"] .brand-mark,
html[data-active-module="featureIntro"] .brand-mark,
html[data-active-module="violinKnowledge"] .brand-mark,
html[data-active-module="metronome"] .brand-mark,
html[data-active-module="tuner"] .brand-mark,
html[data-active-module="tools"] .brand-mark {
  width: clamp(2.35rem, 2.75vw, 2.65rem) !important;
  height: clamp(2.35rem, 2.75vw, 2.65rem) !important;
  border: 1px solid rgba(217, 139, 70, 0.38) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 40% 30%, rgba(242, 186, 107, 0.22), transparent 48%),
    rgba(255, 255, 255, 0.045) !important;
  color: #f1bb72 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 22px rgba(181, 97, 46, 0.16) !important;
}

html[data-active-module="home"] .top-brand strong,
html[data-active-module="nav-practice"] .top-brand strong,
html[data-active-module="practice"] .top-brand strong,
html[data-active-module="reports"] .top-brand strong,
html[data-active-module="teacher"] .top-brand strong,
html[data-active-module="nav-library"] .top-brand strong,
html[data-active-module="nav-generate"] .top-brand strong,
html[data-active-module="pieces"] .top-brand strong,
html[data-active-module="scoreEditor"] .top-brand strong,
html[data-active-module="nav-learningTools"] .top-brand strong,
html[data-active-module="featureIntro"] .top-brand strong,
html[data-active-module="violinKnowledge"] .top-brand strong,
html[data-active-module="metronome"] .top-brand strong,
html[data-active-module="tuner"] .top-brand strong,
html[data-active-module="tools"] .top-brand strong {
  color: #f5f2ea !important;
  font-size: clamp(0.86rem, 0.95vw, 1.02rem) !important;
  font-weight: 790 !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="home"] .top-brand em,
html[data-active-module="nav-practice"] .top-brand em,
html[data-active-module="practice"] .top-brand em,
html[data-active-module="reports"] .top-brand em,
html[data-active-module="teacher"] .top-brand em,
html[data-active-module="nav-library"] .top-brand em,
html[data-active-module="nav-generate"] .top-brand em,
html[data-active-module="pieces"] .top-brand em,
html[data-active-module="scoreEditor"] .top-brand em,
html[data-active-module="nav-learningTools"] .top-brand em,
html[data-active-module="featureIntro"] .top-brand em,
html[data-active-module="violinKnowledge"] .top-brand em,
html[data-active-module="metronome"] .top-brand em,
html[data-active-module="tuner"] .top-brand em,
html[data-active-module="tools"] .top-brand em {
  color: rgba(218, 229, 238, 0.62) !important;
  font-size: clamp(0.58rem, 0.66vw, 0.68rem) !important;
  letter-spacing: 0 !important;
}

html[data-active-module="home"] .top-brand em::before,
html[data-active-module="nav-practice"] .top-brand em::before,
html[data-active-module="practice"] .top-brand em::before,
html[data-active-module="reports"] .top-brand em::before,
html[data-active-module="teacher"] .top-brand em::before,
html[data-active-module="nav-library"] .top-brand em::before,
html[data-active-module="nav-generate"] .top-brand em::before,
html[data-active-module="pieces"] .top-brand em::before,
html[data-active-module="scoreEditor"] .top-brand em::before,
html[data-active-module="nav-learningTools"] .top-brand em::before,
html[data-active-module="featureIntro"] .top-brand em::before,
html[data-active-module="violinKnowledge"] .top-brand em::before,
html[data-active-module="metronome"] .top-brand em::before,
html[data-active-module="tuner"] .top-brand em::before,
html[data-active-module="tools"] .top-brand em::before {
  content: "" !important;
  margin-right: 0 !important;
}

html[data-active-module="home"] .top-nav,
html[data-active-module="nav-practice"] .top-nav,
html[data-active-module="practice"] .top-nav,
html[data-active-module="reports"] .top-nav,
html[data-active-module="teacher"] .top-nav,
html[data-active-module="nav-library"] .top-nav,
html[data-active-module="nav-generate"] .top-nav,
html[data-active-module="pieces"] .top-nav,
html[data-active-module="scoreEditor"] .top-nav,
html[data-active-module="nav-learningTools"] .top-nav,
html[data-active-module="featureIntro"] .top-nav,
html[data-active-module="violinKnowledge"] .top-nav,
html[data-active-module="metronome"] .top-nav,
html[data-active-module="tuner"] .top-nav,
html[data-active-module="tools"] .top-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: clamp(2.72rem, 3.15vw, 3.08rem) !important;
  margin-inline: clamp(0.6rem, 1vw, 1.1rem) !important;
  padding: 0.13rem !important;
  gap: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(12, 14, 18, 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 14px 34px rgba(0, 0, 0, 0.26) !important;
  overflow: hidden !important;
  backdrop-filter: blur(18px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
}

html[data-active-module="home"] .top-nav .top-nav-group,
html[data-active-module="nav-practice"] .top-nav .top-nav-group,
html[data-active-module="practice"] .top-nav .top-nav-group,
html[data-active-module="reports"] .top-nav .top-nav-group,
html[data-active-module="teacher"] .top-nav .top-nav-group,
html[data-active-module="nav-library"] .top-nav .top-nav-group,
html[data-active-module="nav-generate"] .top-nav .top-nav-group,
html[data-active-module="pieces"] .top-nav .top-nav-group,
html[data-active-module="scoreEditor"] .top-nav .top-nav-group,
html[data-active-module="nav-learningTools"] .top-nav .top-nav-group,
html[data-active-module="featureIntro"] .top-nav .top-nav-group,
html[data-active-module="violinKnowledge"] .top-nav .top-nav-group,
html[data-active-module="metronome"] .top-nav .top-nav-group,
html[data-active-module="tuner"] .top-nav .top-nav-group,
html[data-active-module="tools"] .top-nav .top-nav-group {
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

html[data-active-module="home"] .top-nav .nav-item,
html[data-active-module="nav-practice"] .top-nav .nav-item,
html[data-active-module="practice"] .top-nav .nav-item,
html[data-active-module="reports"] .top-nav .nav-item,
html[data-active-module="teacher"] .top-nav .nav-item,
html[data-active-module="nav-library"] .top-nav .nav-item,
html[data-active-module="nav-generate"] .top-nav .nav-item,
html[data-active-module="pieces"] .top-nav .nav-item,
html[data-active-module="scoreEditor"] .top-nav .nav-item,
html[data-active-module="nav-learningTools"] .top-nav .nav-item,
html[data-active-module="featureIntro"] .top-nav .nav-item,
html[data-active-module="violinKnowledge"] .top-nav .nav-item,
html[data-active-module="metronome"] .top-nav .nav-item,
html[data-active-module="tuner"] .top-nav .nav-item,
html[data-active-module="tools"] .top-nav .nav-item {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  grid-template-columns: none !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(2.36rem, 2.76vw, 2.72rem) !important;
  padding: 0.28rem 0.5rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(245, 242, 234, 0.58) !important;
  box-shadow: none !important;
  font-size: clamp(0.74rem, 0.82vw, 0.9rem) !important;
  font-weight: 680 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html[data-active-module="home"] .top-nav .nav-item:hover,
html[data-active-module="nav-practice"] .top-nav .nav-item:hover,
html[data-active-module="practice"] .top-nav .nav-item:hover,
html[data-active-module="reports"] .top-nav .nav-item:hover,
html[data-active-module="teacher"] .top-nav .nav-item:hover,
html[data-active-module="nav-library"] .top-nav .nav-item:hover,
html[data-active-module="nav-generate"] .top-nav .nav-item:hover,
html[data-active-module="pieces"] .top-nav .nav-item:hover,
html[data-active-module="scoreEditor"] .top-nav .nav-item:hover,
html[data-active-module="nav-learningTools"] .top-nav .nav-item:hover,
html[data-active-module="featureIntro"] .top-nav .nav-item:hover,
html[data-active-module="violinKnowledge"] .top-nav .nav-item:hover,
html[data-active-module="metronome"] .top-nav .nav-item:hover,
html[data-active-module="tuner"] .top-nav .nav-item:hover,
html[data-active-module="tools"] .top-nav .nav-item:hover {
  color: rgba(245, 242, 234, 0.82) !important;
  background: rgba(255, 255, 255, 0.026) !important;
}

html[data-active-module="home"] .top-nav .nav-item.is-active,
html[data-active-module="nav-practice"] .top-nav .nav-item.is-active,
html[data-active-module="practice"] .top-nav .nav-item.is-active,
html[data-active-module="reports"] .top-nav .nav-item.is-active,
html[data-active-module="teacher"] .top-nav .nav-item.is-active,
html[data-active-module="nav-library"] .top-nav .nav-item.is-active,
html[data-active-module="nav-generate"] .top-nav .nav-item.is-active,
html[data-active-module="pieces"] .top-nav .nav-item.is-active,
html[data-active-module="scoreEditor"] .top-nav .nav-item.is-active,
html[data-active-module="nav-learningTools"] .top-nav .nav-item.is-active,
html[data-active-module="featureIntro"] .top-nav .nav-item.is-active,
html[data-active-module="violinKnowledge"] .top-nav .nav-item.is-active,
html[data-active-module="metronome"] .top-nav .nav-item.is-active,
html[data-active-module="tuner"] .top-nav .nav-item.is-active,
html[data-active-module="tools"] .top-nav .nav-item.is-active {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.024)),
    rgba(255, 255, 255, 0.025) !important;
  color: rgba(245, 242, 234, 0.93) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="home"] .top-nav .nav-icon,
html[data-active-module="nav-practice"] .top-nav .nav-icon,
html[data-active-module="practice"] .top-nav .nav-icon,
html[data-active-module="reports"] .top-nav .nav-icon,
html[data-active-module="teacher"] .top-nav .nav-icon,
html[data-active-module="nav-library"] .top-nav .nav-icon,
html[data-active-module="nav-generate"] .top-nav .nav-icon,
html[data-active-module="pieces"] .top-nav .nav-icon,
html[data-active-module="scoreEditor"] .top-nav .nav-icon,
html[data-active-module="nav-learningTools"] .top-nav .nav-icon,
html[data-active-module="featureIntro"] .top-nav .nav-icon,
html[data-active-module="violinKnowledge"] .top-nav .nav-icon,
html[data-active-module="metronome"] .top-nav .nav-icon,
html[data-active-module="tuner"] .top-nav .nav-icon,
html[data-active-module="tools"] .top-nav .nav-icon {
  flex: 0 0 auto !important;
  margin-right: 0.24rem !important;
  color: rgba(155, 196, 235, 0.9) !important;
  font-size: 0.9em !important;
  line-height: 1 !important;
}

html[data-active-module="home"] .user-area,
html[data-active-module="nav-practice"] .user-area,
html[data-active-module="practice"] .user-area,
html[data-active-module="reports"] .user-area,
html[data-active-module="teacher"] .user-area,
html[data-active-module="nav-library"] .user-area,
html[data-active-module="nav-generate"] .user-area,
html[data-active-module="pieces"] .user-area,
html[data-active-module="scoreEditor"] .user-area,
html[data-active-module="nav-learningTools"] .user-area,
html[data-active-module="featureIntro"] .user-area,
html[data-active-module="violinKnowledge"] .user-area,
html[data-active-module="metronome"] .user-area,
html[data-active-module="tuner"] .user-area,
html[data-active-module="tools"] .user-area {
  flex: 0 0 auto !important;
  gap: 0.5rem !important;
  margin-left: 0 !important;
}

html[data-active-module="home"] .notification-button,
html[data-active-module="home"] .user-profile,
html[data-active-module="nav-practice"] .notification-button,
html[data-active-module="nav-practice"] .user-profile,
html[data-active-module="practice"] .notification-button,
html[data-active-module="practice"] .user-profile,
html[data-active-module="reports"] .notification-button,
html[data-active-module="reports"] .user-profile,
html[data-active-module="teacher"] .notification-button,
html[data-active-module="teacher"] .user-profile,
html[data-active-module="nav-library"] .notification-button,
html[data-active-module="nav-library"] .user-profile,
html[data-active-module="nav-generate"] .notification-button,
html[data-active-module="nav-generate"] .user-profile,
html[data-active-module="pieces"] .notification-button,
html[data-active-module="pieces"] .user-profile,
html[data-active-module="scoreEditor"] .notification-button,
html[data-active-module="scoreEditor"] .user-profile,
html[data-active-module="nav-learningTools"] .notification-button,
html[data-active-module="nav-learningTools"] .user-profile,
html[data-active-module="featureIntro"] .notification-button,
html[data-active-module="featureIntro"] .user-profile,
html[data-active-module="violinKnowledge"] .notification-button,
html[data-active-module="violinKnowledge"] .user-profile,
html[data-active-module="metronome"] .notification-button,
html[data-active-module="metronome"] .user-profile,
html[data-active-module="tuner"] .notification-button,
html[data-active-module="tuner"] .user-profile,
html[data-active-module="tools"] .notification-button,
html[data-active-module="tools"] .user-profile {
  display: grid !important;
  width: clamp(2.45rem, 2.92vw, 2.8rem) !important;
  height: clamp(2.45rem, 2.92vw, 2.8rem) !important;
  min-width: clamp(2.45rem, 2.92vw, 2.8rem) !important;
  min-height: 0 !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(8, 10, 13, 0.54) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden !important;
}

html[data-active-module="home"] .user-profile img,
html[data-active-module="nav-practice"] .user-profile img,
html[data-active-module="practice"] .user-profile img,
html[data-active-module="reports"] .user-profile img,
html[data-active-module="teacher"] .user-profile img,
html[data-active-module="nav-library"] .user-profile img,
html[data-active-module="nav-generate"] .user-profile img,
html[data-active-module="pieces"] .user-profile img,
html[data-active-module="scoreEditor"] .user-profile img,
html[data-active-module="nav-learningTools"] .user-profile img,
html[data-active-module="featureIntro"] .user-profile img,
html[data-active-module="violinKnowledge"] .user-profile img,
html[data-active-module="metronome"] .user-profile img,
html[data-active-module="tuner"] .user-profile img,
html[data-active-module="tools"] .user-profile img {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  opacity: 0.55 !important;
  filter: saturate(0.75) brightness(0.62) contrast(1.1) !important;
}

html[data-active-module="home"] .user-profile > span,
html[data-active-module="home"] .profile-settings-symbol,
html[data-active-module="nav-practice"] .user-profile > span,
html[data-active-module="nav-practice"] .profile-settings-symbol,
html[data-active-module="practice"] .user-profile > span,
html[data-active-module="practice"] .profile-settings-symbol,
html[data-active-module="reports"] .user-profile > span,
html[data-active-module="reports"] .profile-settings-symbol,
html[data-active-module="teacher"] .user-profile > span,
html[data-active-module="teacher"] .profile-settings-symbol,
html[data-active-module="nav-library"] .user-profile > span,
html[data-active-module="nav-library"] .profile-settings-symbol,
html[data-active-module="nav-generate"] .user-profile > span,
html[data-active-module="nav-generate"] .profile-settings-symbol,
html[data-active-module="pieces"] .user-profile > span,
html[data-active-module="pieces"] .profile-settings-symbol,
html[data-active-module="scoreEditor"] .user-profile > span,
html[data-active-module="scoreEditor"] .profile-settings-symbol,
html[data-active-module="nav-learningTools"] .user-profile > span,
html[data-active-module="nav-learningTools"] .profile-settings-symbol,
html[data-active-module="featureIntro"] .user-profile > span,
html[data-active-module="featureIntro"] .profile-settings-symbol,
html[data-active-module="violinKnowledge"] .user-profile > span,
html[data-active-module="violinKnowledge"] .profile-settings-symbol,
html[data-active-module="metronome"] .user-profile > span,
html[data-active-module="metronome"] .profile-settings-symbol,
html[data-active-module="tuner"] .user-profile > span,
html[data-active-module="tuner"] .profile-settings-symbol,
html[data-active-module="tools"] .user-profile > span,
html[data-active-module="tools"] .profile-settings-symbol {
  display: none !important;
}

@media (max-width: 900px) {
  html:is([data-active-module="home"], [data-active-module="nav-practice"], [data-active-module="practice"], [data-active-module="reports"], [data-active-module="teacher"], [data-active-module="nav-library"], [data-active-module="nav-generate"], [data-active-module="pieces"], [data-active-module="scoreEditor"], [data-active-module="nav-learningTools"], [data-active-module="featureIntro"], [data-active-module="violinKnowledge"], [data-active-module="metronome"], [data-active-module="tuner"], [data-active-module="tools"]) .topbar {
    padding-inline: clamp(0.72rem, 3.5vw, 1.2rem) !important;
  }

  html:is([data-active-module="home"], [data-active-module="nav-practice"], [data-active-module="practice"], [data-active-module="reports"], [data-active-module="teacher"], [data-active-module="nav-library"], [data-active-module="nav-generate"], [data-active-module="pieces"], [data-active-module="scoreEditor"], [data-active-module="nav-learningTools"], [data-active-module="featureIntro"], [data-active-module="violinKnowledge"], [data-active-module="metronome"], [data-active-module="tuner"], [data-active-module="tools"]) .top-brand {
    min-width: clamp(2.7rem, 12vw, 3.1rem) !important;
    max-width: clamp(2.7rem, 12vw, 3.1rem) !important;
    padding-right: 0 !important;
  }

  html:is([data-active-module="home"], [data-active-module="nav-practice"], [data-active-module="practice"], [data-active-module="reports"], [data-active-module="teacher"], [data-active-module="nav-library"], [data-active-module="nav-generate"], [data-active-module="pieces"], [data-active-module="scoreEditor"], [data-active-module="nav-learningTools"], [data-active-module="featureIntro"], [data-active-module="violinKnowledge"], [data-active-module="metronome"], [data-active-module="tuner"], [data-active-module="tools"]) .brand-copy {
    display: none !important;
  }

  html:is([data-active-module="home"], [data-active-module="nav-practice"], [data-active-module="practice"], [data-active-module="reports"], [data-active-module="teacher"], [data-active-module="nav-library"], [data-active-module="nav-generate"], [data-active-module="pieces"], [data-active-module="scoreEditor"], [data-active-module="nav-learningTools"], [data-active-module="featureIntro"], [data-active-module="violinKnowledge"], [data-active-module="metronome"], [data-active-module="tuner"], [data-active-module="tools"]) .top-nav .nav-icon {
    display: none !important;
  }

  html:is([data-active-module="home"], [data-active-module="nav-practice"], [data-active-module="practice"], [data-active-module="reports"], [data-active-module="teacher"], [data-active-module="nav-library"], [data-active-module="nav-generate"], [data-active-module="pieces"], [data-active-module="scoreEditor"], [data-active-module="nav-learningTools"], [data-active-module="featureIntro"], [data-active-module="violinKnowledge"], [data-active-module="metronome"], [data-active-module="tuner"], [data-active-module="tools"]) .top-nav .nav-item {
    font-size: clamp(0.68rem, 2.6vw, 0.78rem) !important;
    padding-inline: 0.26rem !important;
  }
}

/* Smart generation reference-image pass: card-level crops, live HTML controls preserved. */
html[data-active-module="nav-generate"] body {
  background:
    radial-gradient(circle at 52% 11%, rgba(240, 180, 96, 0.12), transparent 19%),
    radial-gradient(circle at 20% 76%, rgba(93, 62, 41, 0.18), transparent 35%),
    linear-gradient(180deg, #08090b 0%, #030405 100%) !important;
}

html[data-active-module="nav-generate"] .app-shell {
  padding: 0 !important;
  background:
    url("/platform/assets/generate-ref-violin-bg-left.png?v=generate-reference-crops-20260604-1") left bottom / auto 92% no-repeat,
    radial-gradient(circle at 54% 11%, rgba(238, 176, 96, 0.14), transparent 18%),
    linear-gradient(180deg, #08090b 0%, #030405 100%) !important;
}

html[data-active-module="nav-generate"] .main-stage {
  --generate-shell-w: 100dvw !important;
  --generate-shell-h: var(--app-height, 100dvh) !important;
  width: 100dvw !important;
  height: var(--app-height, 100dvh) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 54% 10%, rgba(238, 178, 96, 0.11), transparent 18%),
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.045), transparent 18%),
    rgba(4, 5, 7, 0.58) !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .topbar {
  min-height: clamp(5.2rem, 6.2vw, 6.08rem) !important;
  padding: clamp(1.1rem, 1.55vw, 1.62rem) clamp(1.55rem, 2.05vw, 2.15rem) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(9, 10, 12, 0.76) !important;
}

html[data-active-module="nav-generate"] .top-brand {
  min-width: clamp(11rem, 13vw, 12.8rem) !important;
  max-width: clamp(11rem, 13vw, 12.8rem) !important;
}

html[data-active-module="nav-generate"] .top-brand em {
  display: none !important;
}

html[data-active-module="nav-generate"] .top-brand strong {
  font-size: clamp(1.08rem, 1.25vw, 1.28rem) !important;
}

html[data-active-module="nav-generate"] .top-nav {
  max-width: min(72vw, 78rem) !important;
  margin-inline: clamp(1.8rem, 3.1vw, 3.3rem) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module="nav-generate"] .top-nav .top-nav-group {
  position: relative;
}

html[data-active-module="nav-generate"] .top-nav .top-nav-group + .top-nav-group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 38%;
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-50%);
}

html[data-active-module="nav-generate"] .top-nav .nav-item {
  color: rgba(245, 242, 234, 0.62) !important;
  font-size: clamp(0.95rem, 1.05vw, 1.08rem) !important;
  background: transparent !important;
  border: 0 !important;
}

html[data-active-module="nav-generate"] .top-nav .nav-item.is-active {
  position: relative;
  color: rgba(255, 247, 229, 0.98) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .top-nav .nav-item.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.76rem;
  width: clamp(4rem, 6vw, 6.4rem);
  height: 0.14rem;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 197, 105, 0.96), transparent);
  box-shadow: 0 0 18px rgba(255, 183, 84, 0.68);
  transform: translateX(-50%);
}

html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
  height: calc(var(--app-height, 100dvh) - clamp(5.2rem, 6.2vw, 6.08rem)) !important;
  padding: clamp(2.15rem, 3.4vw, 4rem) clamp(2rem, 4.15vw, 6.8rem) clamp(1.8rem, 3vw, 3.2rem) clamp(5.2rem, 6.9vw, 7.25rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate {
  grid-template-columns: minmax(32rem, 0.95fr) minmax(35rem, 1.05fr) !important;
  gap: clamp(2rem, 3vw, 3.7rem) !important;
  align-items: stretch !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel {
  display: grid !important;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
  gap: clamp(1.05rem, 1.55vw, 1.42rem) !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel::before {
  content: "";
  position: absolute;
  left: max(-6.8rem, -8vw);
  bottom: -2.2rem;
  width: clamp(10rem, 16vw, 15rem);
  height: calc(100% + 5rem);
  background: url("/platform/assets/generate-ref-violin-left.png?v=generate-reference-crops-20260604-1") left bottom / auto 100% no-repeat;
  opacity: 0.88;
  pointer-events: none;
}

html[data-active-module="nav-generate"] .generate-aurora {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel .generate-title-block {
  max-width: 31rem !important;
  gap: clamp(0.7rem, 1vw, 0.9rem) !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel .generate-title-block h3 {
  color: #edd4b8 !important;
  font-size: clamp(2.68rem, 4.4vw, 4.2rem) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel .generate-title-block p {
  color: rgba(235, 237, 239, 0.72) !important;
  font-size: clamp(0.98rem, 1.18vw, 1.2rem) !important;
}

html[data-active-module="nav-generate"] .generate-upload-card,
html[data-active-module="nav-generate"] .generate-requirements-field,
html[data-active-module="nav-generate"] .generate-submit-button,
html[data-active-module="nav-generate"] .score-generate-status {
  width: min(100%, 40.9rem) !important;
}

html[data-active-module="nav-generate"] .generate-upload-card {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  gap: clamp(0.5rem, 0.9vw, 0.8rem) !important;
  min-height: clamp(13.6rem, 24.5vh, 17.5rem) !important;
  margin-top: clamp(0.25rem, 0.65vw, 0.6rem) !important;
  padding: clamp(1.4rem, 2vw, 2rem) !important;
  border: 0 !important;
  border-radius: clamp(1.1rem, 1.4vw, 1.45rem) !important;
  background:
    linear-gradient(180deg, rgba(5, 7, 9, 0.25), rgba(5, 7, 9, 0.08)),
    url("/platform/assets/generate-ref-upload-dropzone.png?v=generate-reference-crops-20260604-1") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-upload-card::after {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-upload-icon {
  grid-row: auto !important;
  width: clamp(3.6rem, 4.6vw, 4.35rem) !important;
  height: clamp(3.6rem, 4.6vw, 4.35rem) !important;
  margin-bottom: clamp(0.35rem, 0.65vw, 0.62rem) !important;
  border-color: rgba(239, 179, 87, 0.68) !important;
  border-radius: 0.62rem !important;
  background: rgba(10, 11, 12, 0.42) !important;
  color: rgba(255, 195, 99, 0.96) !important;
  font-size: clamp(1.8rem, 2.2vw, 2.2rem) !important;
}

html[data-active-module="nav-generate"] .generate-upload-card strong {
  font-size: clamp(0.98rem, 1.15vw, 1.18rem) !important;
  font-weight: 760 !important;
}

html[data-active-module="nav-generate"] .generate-upload-card small {
  max-width: 31rem !important;
  color: rgba(229, 231, 235, 0.44) !important;
  font-size: clamp(0.84rem, 0.95vw, 0.98rem) !important;
}

html[data-active-module="nav-generate"] .generate-requirements-field {
  gap: clamp(0.58rem, 0.78vw, 0.74rem) !important;
}

html[data-active-module="nav-generate"] .generate-requirements-field > span {
  color: rgba(248, 250, 252, 0.92) !important;
  font-size: clamp(1rem, 1.12vw, 1.18rem) !important;
}

html[data-active-module="nav-generate"] .generate-requirements-field textarea {
  min-height: clamp(6.2rem, 13vh, 7.8rem) !important;
  border: 0 !important;
  border-radius: 0.9rem !important;
  background:
    linear-gradient(180deg, rgba(4, 5, 7, 0.15), rgba(4, 5, 7, 0.04)),
    url("/platform/assets/generate-ref-requirements-box.png?v=generate-reference-crops-20260604-1") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: rgba(245, 247, 250, 0.9) !important;
}

html[data-active-module="nav-generate"] .generate-submit-button {
  min-height: clamp(3.45rem, 5.8vh, 4rem) !important;
  border: 0 !important;
  border-radius: 0.86rem !important;
  background:
    linear-gradient(180deg, rgba(255, 245, 220, 0.05), rgba(0, 0, 0, 0.02)),
    url("/platform/assets/generate-ref-submit-button.png?v=generate-reference-crops-20260604-1") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-button strong {
  font-size: clamp(1.08rem, 1.45vw, 1.42rem) !important;
}

html[data-active-module="nav-generate"] .generate-side-rail {
  --generate-record-height: clamp(14rem, 29vh, 17rem) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(17rem, 1fr) minmax(13rem, var(--generate-record-height)) !important;
  gap: clamp(1.65rem, 2.4vw, 2.9rem) !important;
}

html[data-active-module="nav-generate"] .creation-entry-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(1.05rem, 1.6vw, 1.5rem) !important;
  min-height: 0 !important;
}

html[data-active-module="nav-generate"] .creation-entry-card {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  min-height: clamp(17rem, 35vh, 25.8rem) !important;
  padding: clamp(1.7rem, 2.2vw, 2.05rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: clamp(1.1rem, 1.45vw, 1.42rem) !important;
  background:
    linear-gradient(90deg, rgba(5, 6, 7, 0.42), rgba(5, 6, 7, 0.04)),
    rgba(10, 11, 13, 0.74) !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .creation-entry-card::before,
html[data-active-module="nav-generate"] .creation-entry-card::after {
  display: block !important;
}

html[data-active-module="nav-generate"] .creation-entry-card::before {
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  opacity: 1 !important;
  transform: none !important;
  background: var(--generate-card-image) center / cover no-repeat !important;
}

html[data-active-module="nav-generate"] .creation-entry-card::after {
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: inherit !important;
  opacity: 1 !important;
  transform: none !important;
  background:
    linear-gradient(90deg, rgba(4, 5, 7, 0.76) 0%, rgba(4, 5, 7, 0.42) 38%, rgba(4, 5, 7, 0.08) 100%),
    linear-gradient(180deg, rgba(4, 5, 7, 0.08), rgba(4, 5, 7, 0.3)) !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor {
  --generate-card-image: url("/platform/assets/generate-ref-editor-visual.png?v=generate-reference-crops-20260604-1");
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  --generate-card-image: url("/platform/assets/generate-ref-inspiration-visual.png?v=generate-reference-crops-20260604-1");
}

html[data-active-module="nav-generate"] .creation-entry-icon {
  margin-bottom: clamp(1rem, 1.6vw, 1.55rem) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(255, 238, 214, 0.94) !important;
}

html[data-active-module="nav-generate"] .creation-entry-title {
  align-self: auto !important;
  margin-top: 0 !important;
  font-size: clamp(1.52rem, 2.05vw, 2rem) !important;
}

html[data-active-module="nav-generate"] .creation-entry-subtitle {
  max-width: 15rem !important;
  margin-top: clamp(0.78rem, 1vw, 0.95rem) !important;
  color: rgba(230, 232, 235, 0.7) !important;
  font-size: clamp(0.95rem, 1.08vw, 1.1rem) !important;
  line-height: 1.65 !important;
}

html[data-active-module="nav-generate"] .creation-entry-button {
  min-width: clamp(8.6rem, 10vw, 9.8rem) !important;
  min-height: clamp(2.86rem, 3.7vw, 3.3rem) !important;
  margin-top: auto !important;
  padding-inline: 1.1rem !important;
  border-color: rgba(239, 201, 154, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(100, 69, 43, 0.64), rgba(38, 29, 24, 0.62)) !important;
  color: rgba(255, 238, 214, 0.96) !important;
  font-size: clamp(0.98rem, 1.1vw, 1.1rem) !important;
}

html[data-active-module="nav-generate"] .generate-record-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-record-card header {
  margin: 0 0 clamp(1rem, 1.4vw, 1.35rem) !important;
  padding-inline: 0.1rem !important;
}

html[data-active-module="nav-generate"] .generate-record-card header strong {
  font-size: clamp(1.35rem, 1.65vw, 1.7rem) !important;
}

html[data-active-module="nav-generate"] .generate-record-card header small {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-record-card header > span {
  border: 0 !important;
  background: transparent !important;
  color: rgba(229, 231, 235, 0.52) !important;
  font-size: clamp(0.86rem, 1vw, 1rem) !important;
}

html[data-active-module="nav-generate"] .generate-record-card header > span::after {
  content: " 〉";
}

html[data-active-module="nav-generate"] .generate-record-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(1rem, 1.6vw, 1.5rem) !important;
  align-content: stretch !important;
}

html[data-active-module="nav-generate"] .generate-record-row {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  align-items: start !important;
  min-height: clamp(12rem, 22vh, 15.6rem) !important;
  padding: clamp(1.45rem, 1.9vw, 1.85rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: clamp(1rem, 1.35vw, 1.3rem) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(10, 11, 13, 0.72) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html[data-active-module="nav-generate"] .generate-record-row > span {
  display: grid !important;
  width: clamp(3.2rem, 4vw, 3.7rem) !important;
  height: clamp(3.2rem, 4vw, 3.7rem) !important;
  place-items: center !important;
  border: 0.22rem solid rgba(255, 187, 101, 0.95) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255, 187, 101, 0.96) !important;
  font-size: clamp(1.55rem, 2vw, 1.9rem) !important;
}

html[data-active-module="nav-generate"] .generate-record-row:nth-child(2) > span {
  border-color: rgba(180, 139, 222, 0.9) !important;
  color: rgba(195, 160, 235, 0.95) !important;
}

html[data-active-module="nav-generate"] .generate-record-row:nth-child(3) > span {
  border-color: rgba(127, 211, 118, 0.92) !important;
  color: rgba(127, 211, 118, 0.95) !important;
}

html[data-active-module="nav-generate"] .generate-record-row strong {
  color: rgba(255, 187, 101, 0.98) !important;
  font-size: clamp(1.18rem, 1.45vw, 1.42rem) !important;
}

html[data-active-module="nav-generate"] .generate-record-row:nth-child(2) strong {
  color: rgba(195, 160, 235, 0.96) !important;
}

html[data-active-module="nav-generate"] .generate-record-row:nth-child(3) strong {
  color: rgba(127, 211, 118, 0.96) !important;
}

html[data-active-module="nav-generate"] .generate-record-row small {
  margin-top: clamp(0.55rem, 0.75vw, 0.72rem) !important;
  color: rgba(229, 231, 235, 0.56) !important;
  font-size: clamp(0.9rem, 1.05vw, 1.05rem) !important;
  line-height: 1.55 !important;
  white-space: normal !important;
}

html[data-active-module="nav-generate"] .generate-record-row b,
html[data-active-module="nav-generate"] .generate-record-row a {
  align-self: end !important;
  justify-self: start !important;
  margin-top: clamp(1rem, 1.5vw, 1.35rem) !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(229, 231, 235, 0.5) !important;
  font-size: clamp(0.92rem, 1vw, 1.02rem) !important;
  text-decoration: none !important;
}

html[data-active-module="nav-generate"] .generate-record-row::after {
  content: "";
  align-self: end;
  width: 100%;
  height: 1px;
  margin-top: clamp(0.9rem, 1.2vw, 1.05rem);
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 1180px) {
  html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
    overflow-y: auto !important;
    padding-left: clamp(1.2rem, 4vw, 2rem) !important;
    padding-right: clamp(1.2rem, 4vw, 2rem) !important;
  }

  html[data-active-module="nav-generate"] .nav-workbench-generate {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }
}

/* Smart generation crop-image correction: remove duplicated text while keeping live click targets. */
html[data-active-module="nav-generate"] .generate-compose-panel::before {
  display: none !important;
  content: none !important;
}

html[data-active-module="nav-generate"] .generate-upload-card {
  background:
    url("/platform/assets/generate-ref-upload-dropzone.png?v=generate-reference-crops-20260604-3") center / 100% 100% no-repeat !important;
}

html[data-active-module="nav-generate"] .generate-upload-card .generate-upload-icon,
html[data-active-module="nav-generate"] .generate-upload-card > strong,
html[data-active-module="nav-generate"] .generate-upload-card > small {
  opacity: 0 !important;
}

html[data-active-module="nav-generate"] .generate-upload-card.has-file .generate-upload-icon,
html[data-active-module="nav-generate"] .generate-upload-card.has-file > strong,
html[data-active-module="nav-generate"] .generate-upload-card.has-file > small {
  opacity: 1 !important;
}

html[data-active-module="nav-generate"] .generate-requirements-field textarea::placeholder {
  color: transparent !important;
}

html[data-active-module="nav-generate"] .generate-submit-button > span,
html[data-active-module="nav-generate"] .generate-submit-button > strong {
  opacity: 0 !important;
}

html[data-active-module="nav-generate"] .generate-submit-button:not(.is-disabled) > span,
html[data-active-module="nav-generate"] .generate-submit-button:not(.is-disabled) > strong,
html[data-active-module="nav-generate"] .generate-submit-button.is-uploading > span,
html[data-active-module="nav-generate"] .generate-submit-button.is-uploading > strong {
  opacity: 1 !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor {
  --generate-card-image: url("/platform/assets/generate-ref-card-editor.png?v=generate-reference-crops-20260604-3") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  --generate-card-image: url("/platform/assets/generate-ref-card-inspiration.png?v=generate-reference-crops-20260604-3") !important;
}

html[data-active-module="nav-generate"] .creation-entry-icon,
html[data-active-module="nav-generate"] .creation-entry-title,
html[data-active-module="nav-generate"] .creation-entry-subtitle,
html[data-active-module="nav-generate"] .creation-entry-button {
  opacity: 0 !important;
}

html[data-active-module="nav-generate"] .creation-entry-card::after {
  background: transparent !important;
}

html[data-active-module="nav-generate"] .generate-record-card {
  background: url("/platform/assets/generate-ref-records-band.png?v=generate-reference-crops-20260604-3") center top / 100% auto no-repeat !important;
}

html[data-active-module="nav-generate"] .generate-record-card header,
html[data-active-module="nav-generate"] .generate-record-list {
  opacity: 0 !important;
}

/* Smart generation viewport fit: keep the cropped submit button visible on 16:9 desktop. */
html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
  padding-top: clamp(1.05rem, 1.8vw, 1.8rem) !important;
  padding-bottom: clamp(0.95rem, 1.5vw, 1.45rem) !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel {
  gap: clamp(0.72rem, 1.05vw, 1rem) !important;
}

html[data-active-module="nav-generate"] .generate-upload-card {
  min-height: clamp(11.9rem, 20vh, 14.25rem) !important;
}

html[data-active-module="nav-generate"] .generate-requirements-field {
  gap: clamp(0.4rem, 0.58vw, 0.55rem) !important;
}

html[data-active-module="nav-generate"] .generate-requirements-field textarea {
  min-height: clamp(5.6rem, 11vh, 6.9rem) !important;
}

html[data-active-module="nav-generate"] .generate-submit-button {
  min-height: clamp(3.1rem, 5.2vh, 3.62rem) !important;
}

html[data-active-module="nav-generate"] .generate-side-rail {
  gap: clamp(1.1rem, 1.65vw, 1.75rem) !important;
}

/* Main page topbar placement lock: match the Learning Tools top-attached navigation. */
html:is(
  [data-active-module="home"],
  [data-active-module="nav-practice"],
  [data-active-module="nav-library"],
  [data-active-module="nav-generate"],
  [data-active-module="membership"]
) .app-shell {
  padding: 0 !important;
  place-items: stretch !important;
}

html:is(
  [data-active-module="home"],
  [data-active-module="nav-practice"],
  [data-active-module="nav-library"],
  [data-active-module="nav-generate"],
  [data-active-module="membership"]
) .main-stage {
  width: 100dvw !important;
  height: var(--app-height, 100dvh) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

html:is(
  [data-active-module="home"],
  [data-active-module="nav-practice"],
  [data-active-module="nav-library"],
  [data-active-module="nav-generate"],
  [data-active-module="membership"]
) .topbar {
  margin-top: 0 !important;
  transform: none !important;
}

/* Smart Generate topbar lock: use the same glass navigation geometry as Learning Tools. */
html[data-active-module="nav-generate"] .topbar {
  gap: clamp(0.62rem, 1vw, 1.1rem) !important;
  min-height: clamp(4.2rem, 5.2vw, 5.35rem) !important;
  padding: clamp(0.72rem, 0.96vw, 0.95rem) clamp(1.25rem, 1.85vw, 1.9rem) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(5, 7, 10, 0.62) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html[data-active-module="nav-generate"] .top-brand {
  min-width: clamp(8.6rem, 12.2vw, 11rem) !important;
  max-width: clamp(8.6rem, 12.2vw, 11rem) !important;
  min-height: clamp(2.55rem, 3vw, 2.95rem) !important;
  padding: 0.16rem 0.52rem 0.16rem 0.14rem !important;
}

html[data-active-module="nav-generate"] .top-brand strong {
  font-size: clamp(0.86rem, 0.95vw, 1.02rem) !important;
  line-height: 0.95 !important;
}

html[data-active-module="nav-generate"] .top-nav {
  max-width: none !important;
  min-height: clamp(2.72rem, 3.15vw, 3.08rem) !important;
  margin-inline: clamp(0.6rem, 1vw, 1.1rem) !important;
  padding: 0.13rem !important;
  gap: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(12, 14, 18, 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 14px 34px rgba(0, 0, 0, 0.26) !important;
  overflow: hidden !important;
  backdrop-filter: blur(18px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
}

html[data-active-module="nav-generate"] .top-nav .top-nav-group + .top-nav-group::before,
html[data-active-module="nav-generate"] .top-nav .nav-item.is-active::after {
  display: none !important;
  content: none !important;
}

html[data-active-module="nav-generate"] .top-nav .nav-item {
  min-height: clamp(2.36rem, 2.76vw, 2.72rem) !important;
  padding: 0.28rem 0.5rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(245, 242, 234, 0.58) !important;
  box-shadow: none !important;
  font-size: clamp(0.74rem, 0.82vw, 0.9rem) !important;
}

html[data-active-module="nav-generate"] .top-nav .nav-item.is-active {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.024)),
    rgba(255, 255, 255, 0.025) !important;
  color: rgba(245, 242, 234, 0.93) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
  height: calc(var(--app-height, 100dvh) - clamp(4.2rem, 5.2vw, 5.35rem)) !important;
}

/* Learning Tools vertical fit: keep the two practice cards fully inside the viewport. */
html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding-top: clamp(0.72rem, 1vw, 1rem) !important;
  padding-bottom: clamp(0.78rem, 1.15vw, 1.1rem) !important;
}

html[data-active-module="nav-learningTools"] .nav-workbench-tools,
html[data-active-module="nav-learningTools"] .tools-board-layout {
  height: 100% !important;
  min-height: 0 !important;
}

html[data-active-module="nav-learningTools"] .tools-board-layout {
  grid-template-rows: minmax(0, 1fr) minmax(0, 0.92fr) !important;
  align-content: stretch !important;
  gap: clamp(0.7rem, 0.95vw, 1rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-section {
  min-height: 0 !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(0.48rem, 0.68vw, 0.72rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-learning-grid,
html[data-active-module="nav-learningTools"] .tools-practice-grid {
  min-height: 0 !important;
  align-items: stretch !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card,
html[data-active-module="nav-learningTools"] .tools-practice-card {
  height: 100% !important;
  min-height: 0 !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card {
  aspect-ratio: auto !important;
  padding: clamp(0.95rem, 1.18vw, 1.28rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card {
  aspect-ratio: auto !important;
  padding: clamp(1rem, 1.22vw, 1.38rem) !important;
}

@media (min-width: 1181px) and (max-height: 760px) {
  html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
    height: auto !important;
    padding-top: clamp(0.48rem, 0.7vw, 0.76rem) !important;
    padding-bottom: clamp(0.5rem, 0.82vw, 0.88rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-board-layout {
    gap: clamp(0.48rem, 0.75vw, 0.8rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-entry-section {
    gap: clamp(0.36rem, 0.55vw, 0.58rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-card-arrow {
    width: clamp(2.18rem, 2.55vw, 2.52rem) !important;
    height: clamp(2.18rem, 2.55vw, 2.52rem) !important;
    margin-top: clamp(0.62rem, 0.9vw, 0.9rem) !important;
  }
}

/* Learning Tools vertical fit balance: fill the remaining viewport without pressing the bottom cards. */
html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
  align-content: stretch !important;
  grid-template-rows: minmax(0, 1fr) !important;
  padding-top: clamp(0.68rem, 1vw, 1rem) !important;
  padding-bottom: clamp(1.35rem, 1.8vw, 1.7rem) !important;
}

html[data-active-module="nav-learningTools"] .nav-workbench-tools {
  align-self: stretch !important;
  height: 100% !important;
}

html[data-active-module="nav-learningTools"] .tools-board-layout {
  height: 100% !important;
  grid-template-rows: minmax(0, 0.94fr) minmax(0, 1fr) !important;
  gap: clamp(0.72rem, 1vw, 1.05rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-section {
  gap: clamp(0.48rem, 0.66vw, 0.72rem) !important;
  overflow: visible !important;
}

@media (min-width: 1181px) and (max-height: 760px) {
  html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
    padding-bottom: clamp(1.12rem, 1.55vw, 1.45rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-board-layout {
    grid-template-rows: minmax(0, 0.9fr) minmax(0, 1fr) !important;
    gap: clamp(0.58rem, 0.82vw, 0.9rem) !important;
  }
}

/* Learning Tools fill pass: use all available vertical room without clipping the bottom row. */
html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
  display: flex !important;
  flex-direction: column !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  gap: 0 !important;
}

html[data-active-module="nav-learningTools"] .nav-workbench-tools {
  flex: 1 1 auto !important;
  display: block !important;
  width: min(100%, 1578px) !important;
}

html[data-active-module="nav-learningTools"] .tools-board-layout {
  display: grid !important;
  height: 100% !important;
  grid-template-rows: minmax(0, 0.88fr) minmax(0, 1fr) !important;
  gap: clamp(0.86rem, 1.15vw, 1.18rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-learning-section,
html[data-active-module="nav-learningTools"] .tools-practice-section {
  min-height: 0 !important;
}

html[data-active-module="nav-learningTools"] .tools-learning-grid,
html[data-active-module="nav-learningTools"] .tools-practice-grid {
  height: 100% !important;
}

/* Learning Tools icon lift: brighten card artwork without changing the page background/layout. */
html[data-active-module="nav-learningTools"] .tools-entry-card::before {
  filter: brightness(1.2) saturate(1.16) contrast(1.05) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::before {
  filter: brightness(1.18) saturate(1.14) contrast(1.04) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card .tools-card-icon {
  color: rgba(255, 246, 219, 0.98) !important;
  background:
    linear-gradient(180deg, rgba(255, 220, 143, 0.18), rgba(255, 255, 255, 0.07)),
    rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 226, 164, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 232, 0.18),
    0 0 18px rgba(245, 190, 98, 0.18),
    0 10px 22px rgba(0, 0, 0, 0.22) !important;
  text-shadow: 0 0 14px rgba(255, 224, 154, 0.32) !important;
}

/* Membership nav placement: keep the membership entry inside the main top pill as the rightmost segment. */
html[data-active-module="membership"] .topbar {
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.62rem, 1vw, 1.1rem) !important;
  min-height: clamp(4.2rem, 5.2vw, 5.35rem) !important;
  margin: 0 !important;
  padding: clamp(0.72rem, 0.96vw, 0.95rem) clamp(1.25rem, 1.85vw, 1.9rem) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(5, 7, 10, 0.62) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  transform: none !important;
}

html[data-active-module="membership"] .top-brand {
  min-width: clamp(8.6rem, 12.2vw, 11rem) !important;
  max-width: clamp(8.6rem, 12.2vw, 11rem) !important;
  min-height: clamp(2.55rem, 3vw, 2.95rem) !important;
  padding: 0.16rem 0.52rem 0.16rem 0.14rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="membership"] .top-brand strong {
  color: #f5f2ea !important;
  font-size: clamp(0.86rem, 0.95vw, 1.02rem) !important;
  font-weight: 790 !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="membership"] .top-brand em {
  display: none !important;
}

html[data-active-module="membership"] .top-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: clamp(2.72rem, 3.15vw, 3.08rem) !important;
  margin-inline: clamp(0.6rem, 1vw, 1.1rem) !important;
  padding: 0.13rem !important;
  gap: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(12, 14, 18, 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 14px 34px rgba(0, 0, 0, 0.26) !important;
  overflow: hidden !important;
  backdrop-filter: blur(18px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
}

html[data-active-module="membership"] .top-nav .top-nav-group {
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .top-nav .top-nav-group + .top-nav-group::before,
html[data-active-module="membership"] .top-nav .nav-item.is-active::after {
  display: none !important;
  content: none !important;
}

html[data-active-module="membership"] .top-nav .nav-item {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(2.36rem, 2.76vw, 2.72rem) !important;
  padding: 0.28rem 0.5rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(245, 242, 234, 0.58) !important;
  box-shadow: none !important;
  font-size: clamp(0.74rem, 0.82vw, 0.9rem) !important;
  font-weight: 680 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .top-nav .nav-item:hover {
  color: rgba(245, 242, 234, 0.82) !important;
  background: rgba(255, 255, 255, 0.026) !important;
}

html[data-active-module="membership"] .top-nav .nav-item.is-active {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.024)),
    rgba(255, 255, 255, 0.025) !important;
  color: rgba(245, 242, 234, 0.93) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="membership"] .top-nav .nav-icon {
  flex: 0 0 auto !important;
  margin-right: 0.24rem !important;
  color: rgba(155, 196, 235, 0.9) !important;
  font-size: 0.9em !important;
  line-height: 1 !important;
}

html[data-active-module="membership"] .user-area {
  flex: 0 0 auto !important;
  gap: 0.5rem !important;
  margin-left: 0 !important;
}

html[data-active-module="membership"] .notification-button,
html[data-active-module="membership"] .user-profile {
  display: grid !important;
  width: clamp(2.45rem, 2.92vw, 2.8rem) !important;
  height: clamp(2.45rem, 2.92vw, 2.8rem) !important;
  min-width: clamp(2.45rem, 2.92vw, 2.8rem) !important;
  min-height: 0 !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(8, 10, 13, 0.54) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden !important;
}

html[data-active-module="membership"] .user-profile img {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  opacity: 0.55 !important;
  filter: saturate(0.75) brightness(0.62) contrast(1.1) !important;
}

html[data-active-module="membership"] .user-profile > span,
html[data-active-module="membership"] .profile-settings-symbol {
  display: none !important;
}

/* Membership spacing pass: match the reference page's generous outer breathing room. */
html[data-active-module="membership"] .content-grid[data-module="membership"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center !important;
  justify-items: center !important;
  height: calc(var(--app-height, 100dvh) - clamp(4.2rem, 5.2vw, 5.35rem)) !important;
  padding:
    clamp(1.45rem, 3.1vh, 2.6rem)
    clamp(5.25rem, 8.8vw, 10.25rem)
    clamp(1.25rem, 2.65vh, 2.2rem) !important;
  overflow: hidden !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-one-screen {
  grid-column: 1 !important;
  width: min(100%, 98rem) !important;
  max-width: 98rem !important;
  height: 100% !important;
  max-height: 100% !important;
  align-self: stretch !important;
  justify-self: center !important;
  padding: clamp(1rem, 1.35vw, 1.45rem) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="membership"] .content-grid[data-module="membership"] {
    padding:
      clamp(1rem, 2.2vh, 1.6rem)
      clamp(1.35rem, 3.6vw, 2.4rem)
      clamp(1rem, 2vh, 1.45rem) !important;
  }
}

/* Smart Generate spacing pass: use the same centered breathing room as the membership showcase. */
html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center !important;
  justify-items: center !important;
  height: calc(var(--app-height, 100dvh) - clamp(4.2rem, 5.2vw, 5.35rem)) !important;
  padding:
    clamp(1.45rem, 3.1vh, 2.6rem)
    clamp(5.25rem, 8.8vw, 10.25rem)
    clamp(1.25rem, 2.65vh, 2.2rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] > .nav-workbench-generate {
  grid-column: 1 !important;
  width: min(100%, 98rem) !important;
  max-width: 98rem !important;
  height: 100% !important;
  max-height: 100% !important;
  align-self: stretch !important;
  justify-self: center !important;
}

@media (max-width: 1180px) {
  html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
    padding:
      clamp(1rem, 2.2vh, 1.6rem)
      clamp(1.35rem, 3.6vw, 2.4rem)
      clamp(1rem, 2vh, 1.45rem) !important;
  }
}

/* Violin knowledge detail pass: keep learning material pages inside a contained board. */
html[data-active-module="violinKnowledge"] .content-grid[data-module="violinKnowledge"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center !important;
  justify-items: center !important;
  height: calc(var(--app-height, 100dvh) - clamp(4.2rem, 5.2vw, 5.35rem)) !important;
  padding:
    clamp(1.25rem, 2.7vh, 2.35rem)
    clamp(4.75rem, 8vw, 9.4rem)
    clamp(1.15rem, 2.45vh, 2.05rem) !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .knowledge-3d-lab {
  position: relative !important;
  grid-column: 1 !important;
  width: min(100%, 98rem) !important;
  max-width: 98rem !important;
  height: 100% !important;
  max-height: 100% !important;
  align-self: stretch !important;
  justify-self: center !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(0.82rem, 1.18vw, 1.18rem) !important;
  padding: clamp(0.72rem, 1.05vw, 1.12rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: clamp(0.92rem, 1.25vw, 1.18rem) !important;
  background:
    radial-gradient(circle at 15% 18%, rgba(228, 199, 127, 0.11), transparent 27%),
    radial-gradient(circle at 88% 78%, rgba(120, 162, 166, 0.1), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(5, 8, 11, 0.52) !important;
  box-shadow:
    0 28px 82px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  isolation: isolate !important;
  overflow: hidden !important;
  backdrop-filter: blur(18px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-3d-lab::before {
  position: absolute;
  inset: clamp(0.52rem, 0.75vw, 0.78rem);
  z-index: -1;
  content: "";
  border-radius: clamp(0.78rem, 1.05vw, 1rem);
  background:
    linear-gradient(90deg, rgba(228, 199, 127, 0.09), transparent 22%, transparent 78%, rgba(228, 199, 127, 0.055)),
    rgba(255, 255, 255, 0.012);
  pointer-events: none;
}

html[data-active-module="violinKnowledge"] .knowledge-3d-stage-shell,
html[data-active-module="violinKnowledge"] .knowledge-section-stage,
html[data-active-module="violinKnowledge"] .knowledge-3d-dock {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  border-radius: clamp(0.74rem, 0.98vw, 0.94rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-3d-dock {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-3d-dock {
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  padding: clamp(0.72rem, 0.95vw, 0.95rem) !important;
  gap: clamp(0.56rem, 0.78vw, 0.78rem) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(228, 199, 127, 0.12), transparent 34%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(7, 10, 13, 0.62) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-side-slot {
  min-height: 0 !important;
  padding: clamp(0.72rem, 0.92vw, 0.92rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-side-slot strong {
  font-size: clamp(0.98rem, 1.08vw, 1.14rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-side-slot p {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

@media (max-width: 1180px) {
  html[data-active-module="violinKnowledge"] .content-grid[data-module="violinKnowledge"] {
    padding:
      clamp(1rem, 2.2vh, 1.6rem)
      clamp(1.35rem, 3.6vw, 2.4rem)
      clamp(1rem, 2vh, 1.45rem) !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-3d-lab {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Membership image-reference replacement: three plan cards above a single comparison grid. */
html[data-active-module="membership"] .content-grid[data-module="membership"] {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center !important;
  justify-items: center !important;
  height: calc(var(--app-height, 100dvh) - clamp(4.2rem, 5.2vw, 5.35rem)) !important;
  padding: clamp(1.35rem, 3vh, 2.35rem) clamp(4.5rem, 8.4vw, 9.2rem) clamp(1.25rem, 2.7vh, 2rem) !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(6, 10, 16, 0.98), rgba(5, 13, 22, 0.96) 48%, rgba(7, 10, 17, 0.98)),
    #050911 !important;
  isolation: isolate !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"]::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 9px);
  background-size: 7.5rem 7.5rem, 7.5rem 7.5rem, 1rem 1rem;
  opacity: 0.24;
  pointer-events: none;
}

html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-showcase {
  position: relative !important;
  grid-column: 1 !important;
  display: grid !important;
  grid-template-rows: minmax(10rem, 0.31fr) minmax(0, 1fr) !important;
  gap: 1.1rem !important;
  width: min(100%, 92rem) !important;
  max-width: 92rem !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-showcase:is(.has-unlock-callout, .has-checkout-notice) {
  grid-template-rows: auto minmax(9.2rem, 0.28fr) minmax(0, 1fr) !important;
}

html[data-active-module="membership"] .membership-showcase-alerts {
  display: grid !important;
  gap: 0.65rem !important;
  min-height: 0 !important;
}

html[data-active-module="membership"] .membership-showcase .membership-unlock-callout,
html[data-active-module="membership"] .membership-showcase .membership-checkout-notice {
  min-height: 3.45rem !important;
  padding: 0.62rem 0.85rem !important;
  border-radius: 8px !important;
}

html[data-active-module="membership"] .membership-showcase-plan-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.1rem !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

html[data-active-module="membership"] .membership-showcase-card {
  --membership-accent: rgba(0, 122, 255, 0.96);
  --membership-accent-soft: rgba(0, 122, 255, 0.16);
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 0.74rem 1rem !important;
  min-height: 10rem !important;
  padding: 1.25rem 1.4rem 1.15rem !important;
  border: 1px solid rgba(195, 216, 235, 0.42) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, var(--membership-accent-soft), rgba(255, 255, 255, 0.018) 42%, rgba(255, 255, 255, 0.012)),
    rgba(5, 13, 23, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 44px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden !important;
}

html[data-active-module="membership"] .membership-showcase-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 45%);
  opacity: 0.7;
  pointer-events: none;
}

html[data-active-module="membership"] .membership-showcase-card.is-yearly {
  --membership-accent: rgba(255, 159, 10, 0.98);
  --membership-accent-soft: rgba(255, 159, 10, 0.2);
  border-color: rgba(255, 149, 0, 0.78) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-lifetime {
  --membership-accent: rgba(191, 90, 242, 0.98);
  --membership-accent-soft: rgba(191, 90, 242, 0.18);
  padding-right: min(19rem, 25%) !important;
  border-color: rgba(225, 210, 226, 0.62) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-lifetime::before {
  position: absolute;
  top: -1rem;
  right: -1.4rem;
  bottom: -1rem;
  z-index: 0;
  width: min(18rem, 36%);
  content: "";
  background:
    linear-gradient(90deg, rgba(5, 11, 18, 0.1), rgba(5, 11, 18, 0.08));
  filter: saturate(1.08) contrast(1.05);
  opacity: 0.52;
  pointer-events: none;
}

html[data-active-module="membership"] .membership-showcase-card > * {
  position: relative !important;
  z-index: 1 !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-head {
  grid-column: 1 / 2 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  align-content: start !important;
  gap: 0.58rem !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-meta {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 8.9rem !important;
  max-width: 100% !important;
  min-height: 2.18rem !important;
  padding: 0 0.88rem !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.96) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--membership-accent) 92%, white 8%), color-mix(in srgb, var(--membership-accent) 76%, black 24%)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 24px color-mix(in srgb, var(--membership-accent) 25%, transparent) !important;
  font-size: 0.82rem !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-note {
  color: rgba(255, 231, 188, 0.78) !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-showcase-card h4 {
  margin: 0 !important;
  color: rgba(248, 251, 253, 0.98) !important;
  font-size: 1.18rem !important;
  font-weight: 760 !important;
  line-height: 1.12 !important;
}

html[data-active-module="membership"] .membership-plan-description {
  display: -webkit-box !important;
  max-width: 28rem !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(226, 236, 243, 0.68) !important;
  font-size: 0.82rem !important;
  line-height: 1.42 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html[data-active-module="membership"] .membership-plan-highlights {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.36rem !important;
  max-width: 30rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html[data-active-module="membership"] .membership-plan-highlights li {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.45rem !important;
  max-width: 100% !important;
  padding: 0.18rem 0.52rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  color: rgba(236, 242, 247, 0.72) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  font-size: 0.72rem !important;
  font-weight: 540 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-price {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  justify-items: end !important;
  align-self: start !important;
  justify-self: end !important;
  gap: 0.2rem !important;
  min-width: 5.9rem !important;
  width: auto !important;
  margin: 0 !important;
  color: rgba(255, 230, 174, 0.96) !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-current-price {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 0.12rem !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-price small {
  color: rgba(255, 235, 188, 0.74) !important;
  font-size: 0.85rem !important;
  font-weight: 720 !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-price strong {
  color: rgba(255, 232, 182, 0.98) !important;
  font-size: 2.45rem !important;
  font-weight: 820 !important;
  line-height: 0.92 !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-price em {
  color: rgba(226, 236, 243, 0.58) !important;
  font-size: 0.78rem !important;
  font-style: normal !important;
  font-weight: 520 !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-original-price {
  color: rgba(226, 236, 243, 0.48) !important;
  font-size: 0.74rem !important;
  text-decoration: line-through !important;
}

html[data-active-module="membership"] .membership-showcase-card > button {
  grid-column: 1 !important;
  grid-row: 3 !important;
  align-self: end !important;
  justify-self: start !important;
  display: inline-flex !important;
  width: 9.4rem !important;
  max-width: 100% !important;
  min-height: 2.55rem !important;
  padding: 0 1.05rem !important;
  border: 1px solid color-mix(in srgb, var(--membership-accent) 72%, white 12%) !important;
  border-radius: 999px !important;
  color: rgba(248, 251, 253, 0.94) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  font-size: 0.88rem !important;
  font-weight: 720 !important;
}

html[data-active-module="membership"] .membership-showcase-card > button.primary,
html[data-active-module="membership"] .membership-showcase-card.is-recommended > button {
  color: rgba(6, 8, 12, 0.95) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--membership-accent) 72%, white 28%), color-mix(in srgb, var(--membership-accent) 88%, black 12%)) !important;
}

html[data-active-module="membership"] .membership-showcase-table-shell {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(192, 211, 229, 0.32) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(21, 35, 50, 0.82), rgba(9, 18, 30, 0.88)),
    rgba(6, 13, 22, 0.84) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 64px rgba(0, 0, 0, 0.25) !important;
}

html[data-active-module="membership"] .membership-showcase-table {
  display: grid !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row {
  display: grid !important;
  grid-template-columns: minmax(15.5rem, 1.34fr) repeat(3, minmax(0, 1fr)) !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row > * {
  display: grid !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 0.42rem 0.82rem !important;
  overflow: hidden !important;
  border-right: 1px solid rgba(205, 222, 238, 0.28) !important;
  border-bottom: 1px solid rgba(205, 222, 238, 0.28) !important;
  color: rgba(222, 233, 241, 0.7) !important;
  font-size: 0.82rem !important;
  line-height: 1.2 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row > *:last-child {
  border-right: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row:last-child > * {
  border-bottom: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row > *:not(:first-child) {
  justify-items: center !important;
  text-align: center !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row.is-head > * {
  color: rgba(248, 251, 253, 0.92) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)) !important;
  font-weight: 760 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row strong {
  overflow: hidden !important;
  color: rgba(248, 251, 253, 0.88) !important;
  font-size: 0.86rem !important;
  font-weight: 650 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label {
  display: grid !important;
  gap: 0.12rem !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label strong {
  color: rgba(255, 232, 182, 0.96) !important;
  font-size: 0.94rem !important;
  font-weight: 760 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label small {
  display: block !important;
  overflow: hidden !important;
  color: rgba(226, 236, 243, 0.5) !important;
  font-size: 0.68rem !important;
  font-weight: 520 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-check,
html[data-active-module="membership"] .membership-showcase-table .membership-cross,
html[data-active-module="membership"] .membership-showcase-table .membership-level {
  display: inline-grid !important;
  justify-self: center !important;
  place-items: center !important;
  width: fit-content !important;
  min-width: 1.5rem !important;
  min-height: 1.5rem !important;
  padding: 0.12rem 0.48rem !important;
  border-radius: 999px !important;
  font-size: 0.76rem !important;
  font-style: normal !important;
  font-weight: 760 !important;
  line-height: 1 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-check {
  border: 1px solid rgba(48, 209, 88, 0.42) !important;
  color: rgba(96, 255, 138, 0.95) !important;
  background: rgba(48, 209, 88, 0.08) !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-cross {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(226, 236, 243, 0.45) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-level {
  grid-template-columns: auto auto !important;
  gap: 0.18rem !important;
  border: 1px solid rgba(255, 232, 182, 0.18) !important;
  color: rgba(255, 232, 182, 0.9) !important;
  background: rgba(255, 232, 182, 0.055) !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-level-number,
html[data-active-module="membership"] .membership-showcase-table .membership-level-unit {
  line-height: 1 !important;
}

@media (max-width: 1180px) {
  html[data-active-module="membership"] .content-grid[data-module="membership"] {
    padding: 1rem 1.35rem !important;
  }

  html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-showcase {
    gap: 0.8rem !important;
  }

  html[data-active-module="membership"] .membership-showcase-plan-grid {
    gap: 0.78rem !important;
  }

  html[data-active-module="membership"] .membership-showcase-card {
    padding: 1rem !important;
  }

  html[data-active-module="membership"] .membership-showcase-card.is-lifetime {
    padding-right: 1rem !important;
  }

  html[data-active-module="membership"] .membership-showcase-card.is-lifetime::before {
    opacity: 0.22 !important;
  }

  html[data-active-module="membership"] .membership-plan-highlights li:nth-child(n + 4) {
    display: none !important;
  }
}

@media (max-width: 900px) {
  html[data-active-module="membership"] .content-grid[data-module="membership"] {
    align-content: start !important;
    height: auto !important;
    min-height: calc(var(--app-height, 100dvh) - 4.2rem) !important;
    overflow: auto !important;
  }

  html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-showcase,
  html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-showcase:is(.has-unlock-callout, .has-checkout-notice) {
    grid-template-rows: auto auto !important;
    height: auto !important;
  }

  html[data-active-module="membership"] .membership-showcase-plan-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-active-module="membership"] .membership-showcase-card {
    min-height: 11rem !important;
  }

  html[data-active-module="membership"] .membership-showcase-table-shell {
    min-height: 30rem !important;
    overflow: auto !important;
  }

  html[data-active-module="membership"] .membership-showcase-table {
    min-width: 48rem !important;
  }
}

/* Membership screenshot polish: keep the supplied membership composition below the nav. */
html[data-active-module="membership"] .main-stage {
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

html[data-active-module="membership"] .topbar {
  position: relative !important;
  z-index: 5 !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"] {
  z-index: 1 !important;
  align-content: start !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  padding: clamp(1.05rem, 2.35vh, 1.9rem) clamp(4.25rem, 8.2vw, 8.9rem) clamp(1rem, 2.15vh, 1.7rem) !important;
  overflow: auto !important;
  scrollbar-width: none !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"]::-webkit-scrollbar {
  display: none !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-showcase {
  grid-template-rows: clamp(10.15rem, 22vh, 11.25rem) minmax(0, 1fr) !important;
  gap: clamp(1rem, 2vh, 1.32rem) !important;
  width: min(100%, 90rem) !important;
  min-height: 0 !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-showcase:is(.has-unlock-callout, .has-checkout-notice) {
  grid-template-rows: auto clamp(9.65rem, 20vh, 10.75rem) minmax(0, 1fr) !important;
}

html[data-active-module="membership"] .membership-showcase-plan-grid {
  gap: clamp(0.92rem, 1.55vw, 1.2rem) !important;
}

html[data-active-module="membership"] .membership-showcase-card {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  padding: clamp(1.22rem, 1.75vw, 1.55rem) clamp(1.35rem, 1.9vw, 1.68rem) clamp(1.18rem, 1.62vw, 1.42rem) !important;
  background:
    linear-gradient(135deg, var(--membership-accent-soft), rgba(255, 255, 255, 0.014) 46%, rgba(0, 0, 0, 0.08)),
    rgba(5, 13, 23, 0.82) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-lifetime {
  padding-right: clamp(1.35rem, 1.9vw, 1.68rem) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-lifetime::before {
  right: -0.95rem !important;
  width: min(18rem, 48%) !important;
  background:
    linear-gradient(90deg, rgba(5, 11, 18, 0.84), rgba(5, 11, 18, 0.2) 58%, rgba(5, 11, 18, 0.04)) !important;
  opacity: 0.54 !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-head {
  grid-row: 1 / span 2 !important;
  gap: clamp(0.6rem, 0.86vw, 0.82rem) !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-meta {
  gap: 0.62rem !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-badge {
  width: auto !important;
  min-width: clamp(6.9rem, 7.8vw, 8.15rem) !important;
  min-height: clamp(1.82rem, 2.16vw, 2.08rem) !important;
  padding: 0 0.92rem !important;
  font-size: clamp(0.76rem, 0.82vw, 0.88rem) !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-note {
  color: rgba(246, 237, 224, 0.86) !important;
  font-size: clamp(0.72rem, 0.8vw, 0.86rem) !important;
  font-weight: 680 !important;
}

html[data-active-module="membership"] .membership-showcase-card h4 {
  font-size: clamp(1.35rem, 1.95vw, 1.72rem) !important;
  font-weight: 780 !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-price {
  grid-row: 1 / span 3 !important;
  align-self: center !important;
  min-width: clamp(6.6rem, 8.4vw, 8.25rem) !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-price small {
  font-size: clamp(0.95rem, 1.18vw, 1.15rem) !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-price strong {
  font-size: clamp(2.5rem, 3.86vw, 3.28rem) !important;
  letter-spacing: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-price em {
  color: rgba(246, 237, 224, 0.86) !important;
  font-size: clamp(0.86rem, 1vw, 1.02rem) !important;
  font-weight: 680 !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-original-price {
  color: rgba(246, 237, 224, 0.54) !important;
  font-size: clamp(0.8rem, 0.9vw, 0.94rem) !important;
}

html[data-active-module="membership"] .membership-showcase-card > button {
  width: clamp(7.35rem, 9vw, 9.55rem) !important;
  min-height: clamp(2.35rem, 2.72vw, 2.68rem) !important;
  color: rgba(248, 251, 253, 0.96) !important;
  background: rgba(3, 8, 15, 0.24) !important;
  font-size: clamp(0.9rem, 1vw, 1.06rem) !important;
}

html[data-active-module="membership"] .membership-showcase-card > button.primary,
html[data-active-module="membership"] .membership-showcase-card.is-recommended > button {
  color: rgba(248, 251, 253, 0.96) !important;
  background: rgba(3, 8, 15, 0.2) !important;
}

html[data-active-module="membership"] .membership-showcase-table-shell {
  min-height: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-table {
  grid-auto-rows: minmax(2.05rem, 1fr) !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row {
  grid-template-columns: minmax(17rem, 1.32fr) repeat(3, minmax(0, 1fr)) !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row > * {
  padding: 0.28rem clamp(0.78rem, 1.25vw, 1.15rem) !important;
  color: rgba(235, 242, 247, 0.78) !important;
  font-size: clamp(0.86rem, 0.92vw, 1rem) !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row strong {
  color: rgba(250, 252, 255, 0.94) !important;
  font-size: clamp(0.9rem, 1vw, 1.06rem) !important;
  font-weight: 710 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label {
  display: flex !important;
  align-items: baseline !important;
  gap: clamp(0.85rem, 1.45vw, 1.35rem) !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label strong {
  color: rgba(255, 215, 129, 0.98) !important;
  font-size: clamp(1.18rem, 1.72vw, 1.62rem) !important;
  font-weight: 790 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label small {
  color: rgba(235, 242, 247, 0.66) !important;
  font-size: clamp(0.8rem, 0.9vw, 0.96rem) !important;
  font-weight: 560 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-check,
html[data-active-module="membership"] .membership-showcase-table .membership-cross,
html[data-active-module="membership"] .membership-showcase-table .membership-level {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-style: normal !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-check {
  color: rgba(255, 215, 129, 0.98) !important;
  font-size: clamp(1.16rem, 1.55vw, 1.48rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-cross {
  color: rgba(235, 242, 247, 0.74) !important;
  font-size: clamp(1rem, 1.22vw, 1.16rem) !important;
  font-weight: 680 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-level {
  color: rgba(246, 237, 224, 0.94) !important;
  font-size: clamp(0.9rem, 1vw, 1.06rem) !important;
  font-weight: 650 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-level-number {
  color: rgba(255, 215, 129, 0.98) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="membership"] .content-grid[data-module="membership"] {
    padding: 1rem 1.3rem !important;
  }
}

/* Membership exact-reference reset: remove legacy artwork and keep a pure UI recreation. */
html[data-active-module="membership"] .content-grid[data-module="membership"] {
  background:
    linear-gradient(180deg, rgba(5, 12, 20, 0.99), rgba(7, 13, 20, 0.99)),
    #050b13 !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"]::before,
html[data-active-module="membership"] .membership-showcase-card::after,
html[data-active-module="membership"] .membership-showcase-card.is-lifetime::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

html[data-active-module="membership"] .membership-showcase-card {
  --membership-card-glow: rgba(45, 130, 255, 0.1);
  border-color: rgba(112, 134, 157, 0.72) !important;
  background:
    linear-gradient(112deg, var(--membership-card-glow), rgba(6, 16, 28, 0.66) 44%, rgba(3, 9, 16, 0.88) 100%),
    #06111e !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-monthly {
  --membership-card-glow: rgba(0, 122, 255, 0.16);
}

html[data-active-module="membership"] .membership-showcase-card.is-yearly {
  --membership-card-glow: rgba(255, 159, 10, 0.16);
  border-color: rgba(255, 149, 0, 0.86) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-lifetime {
  --membership-card-glow: rgba(191, 90, 242, 0.18);
  border-color: rgba(176, 154, 190, 0.72) !important;
  background:
    linear-gradient(112deg, rgba(191, 90, 242, 0.16), rgba(10, 18, 34, 0.74) 42%, rgba(6, 11, 20, 0.9) 100%),
    #08101c !important;
}

/* Membership framework recreation: real DOM version of the reference layout. */
html[data-active-module="membership"] .content-grid[data-module="membership"] {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center !important;
  justify-items: center !important;
  width: 100dvw !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  padding: clamp(1.55rem, 3.65vh, 2.9rem) clamp(4.4rem, 9.4vw, 9.8rem) clamp(1rem, 2.1vh, 1.45rem) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% -18%, rgba(33, 66, 95, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(3, 8, 14, 0.98), rgba(7, 15, 23, 0.98)),
    #050b13 !important;
  isolation: isolate !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"]::before {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  content: "" !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 8px) !important;
  background-size: 7.8rem 7.8rem, 7.8rem 7.8rem, 1rem 1rem !important;
  opacity: 0.28 !important;
  pointer-events: none !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-framework-shell {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-rows: clamp(9.6rem, 20.2vh, 10.8rem) minmax(0, 1fr) !important;
  gap: clamp(0.85rem, 1.6vh, 1.05rem) !important;
  align-self: stretch !important;
  justify-self: center !important;
  width: min(100%, 87.4rem) !important;
  height: 100% !important;
  max-width: 87.4rem !important;
  max-height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-framework-shell.has-unlock-callout,
html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-framework-shell.has-checkout-notice {
  grid-template-rows: auto clamp(9.8rem, 20vh, 11rem) minmax(0, 1fr) !important;
}

html[data-active-module="membership"] .membership-showcase-alerts {
  display: grid !important;
  gap: 0.7rem !important;
}

html[data-active-module="membership"] .membership-showcase-plan-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(1.05rem, 1.65vw, 1.35rem) !important;
  min-height: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-card {
  --membership-accent: rgba(26, 133, 255, 0.96);
  --membership-accent-soft: rgba(17, 94, 160, 0.18);
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto 1fr auto !important;
  column-gap: clamp(0.95rem, 1.35vw, 1.2rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(1.05rem, 1.55vw, 1.35rem) clamp(1.45rem, 2vw, 1.7rem) clamp(1.05rem, 1.58vw, 1.32rem) !important;
  overflow: hidden !important;
  border: 1px solid rgba(132, 154, 178, 0.66) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(112deg, var(--membership-accent-soft), rgba(5, 14, 25, 0.9) 46%, rgba(3, 8, 15, 0.95)),
    #06111e !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 54px rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="membership"] .membership-showcase-card::after {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  content: "" !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 28%),
    radial-gradient(circle at 22% 20%, color-mix(in srgb, var(--membership-accent) 17%, transparent), transparent 48%) !important;
  opacity: 0.74 !important;
  pointer-events: none !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-yearly {
  --membership-accent: rgba(255, 154, 10, 0.98);
  --membership-accent-soft: rgba(137, 85, 17, 0.32);
  border-color: rgba(226, 132, 12, 0.92) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-lifetime {
  --membership-accent: rgba(186, 77, 220, 0.98);
  --membership-accent-soft: rgba(101, 49, 126, 0.26);
  border-color: rgba(151, 131, 166, 0.78) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-lifetime::before {
  position: absolute !important;
  top: -14% !important;
  right: -3% !important;
  bottom: -12% !important;
  z-index: 0 !important;
  display: block !important;
  width: 38% !important;
  content: "" !important;
  background:
    linear-gradient(90deg, rgba(5, 12, 21, 0.86), rgba(5, 12, 21, 0.22) 42%, transparent 100%),
    radial-gradient(ellipse at 70% 34%, rgba(184, 98, 32, 0.34), transparent 34%),
    radial-gradient(ellipse at 94% 45%, rgba(231, 165, 79, 0.28), transparent 30%),
    linear-gradient(128deg, transparent 34%, rgba(205, 142, 72, 0.22) 35%, rgba(91, 54, 36, 0.16) 45%, transparent 46%) !important;
  opacity: 0.82 !important;
  filter: blur(0.2px) saturate(1.05) !important;
  pointer-events: none !important;
}

html[data-active-module="membership"] .membership-showcase-card > * {
  position: relative !important;
  z-index: 1 !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-head {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  align-content: start !important;
  gap: clamp(0.72rem, 1.05vw, 0.95rem) !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-meta {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: clamp(6.6rem, 7.45vw, 8.05rem) !important;
  min-height: clamp(1.78rem, 2.1vw, 2.04rem) !important;
  padding: 0 0.92rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.96) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--membership-accent) 92%, white 8%), color-mix(in srgb, var(--membership-accent) 76%, black 24%)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 26px color-mix(in srgb, var(--membership-accent) 24%, transparent) !important;
  font-size: clamp(0.76rem, 0.82vw, 0.88rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-note {
  color: rgba(246, 237, 224, 0.86) !important;
  font-size: clamp(0.72rem, 0.8vw, 0.86rem) !important;
  font-weight: 680 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-showcase-card h4 {
  margin: 0 !important;
  color: rgba(248, 251, 253, 0.98) !important;
  font-size: clamp(1.35rem, 1.95vw, 1.72rem) !important;
  font-weight: 780 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-price {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  display: grid !important;
  justify-items: end !important;
  align-self: center !important;
  justify-self: end !important;
  gap: 0.28rem !important;
  min-width: clamp(6.4rem, 8.4vw, 8.3rem) !important;
  margin: 0 !important;
  color: rgba(255, 230, 174, 0.96) !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-current-price {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 0.14rem !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-price small {
  color: rgba(255, 245, 226, 0.88) !important;
  font-size: clamp(0.95rem, 1.18vw, 1.15rem) !important;
  font-weight: 720 !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-price strong {
  color: rgba(255, 244, 222, 0.98) !important;
  font-size: clamp(2.5rem, 3.86vw, 3.28rem) !important;
  font-weight: 820 !important;
  line-height: 0.92 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-yearly .membership-price strong {
  color: rgba(255, 213, 126, 0.99) !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-price em {
  color: rgba(246, 237, 224, 0.88) !important;
  font-size: clamp(0.86rem, 1vw, 1.02rem) !important;
  font-style: normal !important;
  font-weight: 680 !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-original-price {
  color: rgba(246, 237, 224, 0.56) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.94rem) !important;
  text-decoration: line-through !important;
}

html[data-active-module="membership"] .membership-showcase-card > button {
  grid-column: 1 !important;
  grid-row: 3 !important;
  align-self: end !important;
  justify-self: start !important;
  display: inline-flex !important;
  width: clamp(7.35rem, 9vw, 9.55rem) !important;
  max-width: 100% !important;
  min-height: clamp(2.35rem, 2.72vw, 2.68rem) !important;
  padding: 0 1.08rem !important;
  border: 1px solid color-mix(in srgb, var(--membership-accent) 72%, white 12%) !important;
  border-radius: 999px !important;
  color: rgba(248, 251, 253, 0.96) !important;
  background: rgba(3, 8, 15, 0.25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  font-size: clamp(0.9rem, 1vw, 1.06rem) !important;
  font-weight: 720 !important;
}

html[data-active-module="membership"] .membership-showcase-table-shell {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(84, 105, 124, 0.68) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(20, 34, 49, 0.9), rgba(9, 18, 30, 0.9)),
    rgba(6, 13, 22, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 64px rgba(0, 0, 0, 0.25) !important;
}

html[data-active-module="membership"] .membership-showcase-table {
  display: grid !important;
  grid-auto-rows: minmax(2.05rem, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row {
  display: grid !important;
  grid-template-columns: minmax(17rem, 1.34fr) repeat(3, minmax(0, 1fr)) !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row > * {
  display: grid !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 0.28rem clamp(0.78rem, 1.25vw, 1.15rem) !important;
  overflow: hidden !important;
  border-right: 1px solid rgba(98, 119, 139, 0.48) !important;
  border-bottom: 1px solid rgba(98, 119, 139, 0.42) !important;
  color: rgba(235, 242, 247, 0.82) !important;
  font-size: clamp(0.86rem, 0.92vw, 1rem) !important;
  line-height: 1.2 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row > *:last-child {
  border-right: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row:last-child > * {
  border-bottom: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row > *:not(:first-child) {
  justify-items: center !important;
  text-align: center !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row.is-head > * {
  color: rgba(248, 251, 253, 0.94) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)) !important;
  font-weight: 760 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row strong {
  overflow: hidden !important;
  color: rgba(250, 252, 255, 0.94) !important;
  font-size: clamp(0.9rem, 1vw, 1.06rem) !important;
  font-weight: 710 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label {
  display: flex !important;
  align-items: baseline !important;
  gap: clamp(0.85rem, 1.45vw, 1.35rem) !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label strong {
  flex: 0 0 auto !important;
  color: rgba(255, 215, 129, 0.98) !important;
  font-size: clamp(1.18rem, 1.72vw, 1.62rem) !important;
  font-weight: 790 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(235, 242, 247, 0.66) !important;
  font-size: clamp(0.8rem, 0.9vw, 0.96rem) !important;
  font-weight: 560 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-check,
html[data-active-module="membership"] .membership-showcase-table .membership-cross,
html[data-active-module="membership"] .membership-showcase-table .membership-level {
  display: inline-grid !important;
  justify-self: center !important;
  place-items: center !important;
  width: fit-content !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-style: normal !important;
  line-height: 1 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-check {
  color: rgba(255, 215, 129, 0.98) !important;
  font-size: clamp(1.16rem, 1.55vw, 1.48rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-cross {
  color: rgba(235, 242, 247, 0.74) !important;
  font-size: clamp(1rem, 1.22vw, 1.16rem) !important;
  font-weight: 680 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-level {
  color: rgba(246, 237, 224, 0.94) !important;
  font-size: clamp(0.9rem, 1vw, 1.06rem) !important;
  font-weight: 650 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-level-number {
  color: rgba(255, 215, 129, 0.98) !important;
  font-weight: 820 !important;
}

@media (max-width: 900px) {
  html[data-active-module="membership"] .content-grid[data-module="membership"] {
    align-content: start !important;
    height: auto !important;
    min-height: calc(var(--app-height, 100dvh) - 4.2rem) !important;
    padding: 1rem !important;
    overflow: auto !important;
  }

  html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-framework-shell {
    grid-template-rows: auto auto !important;
    height: auto !important;
  }

  html[data-active-module="membership"] .membership-showcase-plan-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-active-module="membership"] .membership-showcase-card {
    min-height: 10rem !important;
  }

  html[data-active-module="membership"] .membership-showcase-table-shell {
    min-height: 31rem !important;
    overflow: auto !important;
  }

  html[data-active-module="membership"] .membership-showcase-table {
    min-width: 48rem !important;
  }
}

/* Score editor supplied-image replacement: full-window gray glass editor with semantic controls intact. */
html[data-active-module="scoreEditor"],
html[data-active-module="scoreEditor"] body {
  background: #151515 !important;
}

html[data-active-module="scoreEditor"] .app-shell {
  padding: 0 !important;
  background:
    radial-gradient(circle at 22% 4%, rgba(255, 255, 255, 0.07), transparent 30%),
    linear-gradient(180deg, #343434 0%, #202020 7.6rem, #111 100%) !important;
}

html[data-active-module="scoreEditor"] .main-stage {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  width: 100vw !important;
  max-width: none !important;
  height: var(--app-height, 100dvh) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 9rem),
    #151515 !important;
}

html[data-active-module="scoreEditor"] .topbar {
  display: none !important;
}

html[data-active-module="scoreEditor"] .content-grid[data-module="scoreEditor"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

html[data-active-module="scoreEditor"] .score-editor-page {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-rows: clamp(5.25rem, 5.5vw, 5.7rem) minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 5.7rem),
    #171717 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html[data-active-module="scoreEditor"] .score-editor-commandbar {
  position: relative !important;
  display: grid !important;
  grid-template-columns: clamp(9.5rem, 14vw, 16rem) minmax(16rem, 1fr) auto !important;
  align-items: center !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0.58rem 0.95rem !important;
  gap: clamp(0.75rem, 1.2vw, 1.2rem) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.12), transparent 24%),
    radial-gradient(circle at 74% 0%, rgba(255, 255, 255, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(64, 64, 64, 0.98), rgba(42, 42, 42, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(20px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.04) !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-return {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.62rem !important;
  width: clamp(7.8rem, 9vw, 9.3rem) !important;
  min-height: 3.7rem !important;
  padding: 0 1rem !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 5px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.035) !important;
  color: rgba(255, 255, 255, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.18) !important;
  font: inherit !important;
  font-weight: 650 !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-return span {
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 2rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-return strong {
  color: inherit !important;
  font-size: 1.06rem !important;
  font-weight: 620 !important;
  line-height: 1 !important;
}

html[data-active-module="scoreEditor"] .score-editor-title-block {
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 0.16rem !important;
  min-width: 0 !important;
  text-align: center !important;
}

html[data-active-module="scoreEditor"] .score-editor-title-block h2 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.42rem !important;
  max-width: min(36rem, 100%) !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: clamp(1.28rem, 1.7vw, 1.72rem) !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .score-editor-title-block h2 span {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 0.92em !important;
  font-weight: 520 !important;
}

html[data-active-module="scoreEditor"] .score-editor-title-block small {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.86rem !important;
  font-weight: 560 !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-actions {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  height: 100% !important;
  gap: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-button {
  display: grid !important;
  grid-template-rows: 1.75rem auto !important;
  place-items: center !important;
  align-content: center !important;
  gap: 0.22rem !important;
  min-width: clamp(5.2rem, 6.75vw, 7.1rem) !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0.38rem 0.7rem !important;
  border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: none !important;
  font: inherit !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-button span {
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 1.52rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-button small {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 0.82rem !important;
  font-weight: 610 !important;
  line-height: 1 !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-button.is-play {
  min-width: clamp(4.7rem, 5.9vw, 6.1rem) !important;
  margin-inline: 0.42rem !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 5px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.055) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 12px 24px rgba(0, 0, 0, 0.2) !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-button.is-play span {
  color: rgba(255, 255, 255, 0.98) !important;
  font-size: 1.72rem !important;
}

html[data-active-module="scoreEditor"] .score-editor-workspace {
  display: grid !important;
  grid-template-columns: clamp(30.5rem, 30.6vw, 32.25rem) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "sidebar canvas" !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 31rem),
    #161616 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html[data-active-module="scoreEditor"] .score-compose-panel {
  grid-area: sidebar !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.68rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0.88rem 0.9rem !important;
  overflow: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-left: 0 !important;
  border-radius: 0 5px 5px 0 !important;
  background:
    radial-gradient(circle at 20% 2%, rgba(255, 255, 255, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(67, 67, 67, 0.95), rgba(46, 46, 46, 0.96)),
    #343434 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.06) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important;
}

html[data-active-module="scoreEditor"] .score-compose-section {
  display: grid !important;
  gap: 0.56rem !important;
  min-width: 0 !important;
  padding: 0 0 0.64rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
}

html[data-active-module="scoreEditor"] .score-compose-section:last-child {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

html[data-active-module="scoreEditor"] .score-compose-section h3 {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 1.05rem !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

html[data-active-module="scoreEditor"] .score-input-card-grid,
html[data-active-module="scoreEditor"] .score-button-grid,
html[data-active-module="scoreEditor"] .score-segment-grid,
html[data-active-module="scoreEditor"] .score-settings-row {
  gap: 0.5rem !important;
}

html[data-active-module="scoreEditor"] .score-input-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html[data-active-module="scoreEditor"] .score-duration-grid,
html[data-active-module="scoreEditor"] .score-rest-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html[data-active-module="scoreEditor"] .score-accidental-grid,
html[data-active-module="scoreEditor"] .score-repeat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html[data-active-module="scoreEditor"] .score-bowing-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html[data-active-module="scoreEditor"] .score-segment-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

html[data-active-module="scoreEditor"] .score-input-card,
html[data-active-module="scoreEditor"] .score-palette-button,
html[data-active-module="scoreEditor"] .score-segment-button,
html[data-active-module="scoreEditor"] .score-fill-measure-button {
  min-width: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 5px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 26px rgba(0, 0, 0, 0.12) !important;
  font: inherit !important;
}

html[data-active-module="scoreEditor"] .score-input-card {
  display: grid !important;
  grid-template-rows: 2.45rem auto !important;
  place-items: center !important;
  gap: 0.24rem !important;
  min-height: 5.72rem !important;
  padding: 0.72rem 0.46rem !important;
}

html[data-active-module="scoreEditor"] .score-palette-button {
  display: grid !important;
  grid-template-rows: 2.12rem auto !important;
  place-items: center !important;
  gap: 0.2rem !important;
  min-height: 5.65rem !important;
  padding: 0.58rem 0.34rem !important;
}

html[data-active-module="scoreEditor"] .score-input-card span,
html[data-active-module="scoreEditor"] .score-palette-button span {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 2.05rem !important;
  font-weight: 460 !important;
  line-height: 1 !important;
}

html[data-active-module="scoreEditor"] .score-input-card small,
html[data-active-module="scoreEditor"] .score-palette-button small {
  color: rgba(255, 255, 255, 0.87) !important;
  font-size: 0.86rem !important;
  font-weight: 560 !important;
  line-height: 1.12 !important;
  text-align: center !important;
}

html[data-active-module="scoreEditor"] .score-input-card:hover,
html[data-active-module="scoreEditor"] .score-palette-button:hover,
html[data-active-module="scoreEditor"] .score-segment-button:hover,
html[data-active-module="scoreEditor"] .score-fill-measure-button:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.06) !important;
}

html[data-active-module="scoreEditor"] .score-input-card.is-active,
html[data-active-module="scoreEditor"] .score-palette-button.is-active,
html[data-active-module="scoreEditor"] .score-segment-button.is-active {
  border-color: rgba(255, 255, 255, 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.075) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.16) !important;
}

html[data-active-module="scoreEditor"] .score-input-card.is-active span,
html[data-active-module="scoreEditor"] .score-palette-button.is-active span,
html[data-active-module="scoreEditor"] .score-segment-button.is-active {
  color: rgba(255, 255, 255, 0.98) !important;
}

html[data-active-module="scoreEditor"] .score-segment-button {
  min-height: 2.9rem !important;
  padding: 0 0.38rem !important;
  font-size: 1rem !important;
  font-weight: 560 !important;
}

html[data-active-module="scoreEditor"] .score-compact-field {
  display: none !important;
}

html[data-active-module="scoreEditor"] .score-score-settings {
  display: none !important;
}

/* score-editor-stable-duration-icons-20260612-1: draw duration buttons instead of relying on missing music glyph fonts. */
html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button > .score-note-icon {
  position: relative !important;
  display: block !important;
  width: clamp(1.62rem, 2vw, 2.08rem) !important;
  height: clamp(1.62rem, 2vw, 2.08rem) !important;
  color: rgba(255, 246, 226, 0.98) !important;
  font-family: inherit !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
}

html[data-active-module="scoreEditor"] .score-note-icon::before,
html[data-active-module="scoreEditor"] .score-note-icon::after,
html[data-active-module="scoreEditor"] .score-note-icon i,
html[data-active-module="scoreEditor"] .score-note-icon i::before,
html[data-active-module="scoreEditor"] .score-note-icon i::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

html[data-active-module="scoreEditor"] .score-note-icon::before {
  left: 16% !important;
  bottom: 11% !important;
  width: 48% !important;
  height: 32% !important;
  border-radius: 999px !important;
  transform: rotate(-18deg) !important;
  background: currentColor !important;
}

html[data-active-module="scoreEditor"] .score-note-icon::after {
  left: 59% !important;
  top: 10% !important;
  width: 4px !important;
  height: 64% !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

html[data-active-module="scoreEditor"] .score-note-icon.is-whole::before {
  left: 14% !important;
  top: 32% !important;
  width: 72% !important;
  height: 36% !important;
  border: 2px solid currentColor !important;
  background: transparent !important;
}

html[data-active-module="scoreEditor"] .score-note-icon.is-whole::after,
html[data-active-module="scoreEditor"] .score-note-icon.is-whole i {
  display: none !important;
}

html[data-active-module="scoreEditor"] .score-note-icon.is-half::before {
  border: 2px solid currentColor !important;
  background: transparent !important;
}

html[data-active-module="scoreEditor"] .score-note-icon i {
  left: 61% !important;
  top: 14% !important;
  width: 36% !important;
  height: 44% !important;
}

html[data-active-module="scoreEditor"] .score-note-icon i::before,
html[data-active-module="scoreEditor"] .score-note-icon i::after {
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: rotate(28deg) !important;
  transform-origin: left center !important;
}

html[data-active-module="scoreEditor"] .score-note-icon i::before {
  top: 7% !important;
}

html[data-active-module="scoreEditor"] .score-note-icon i::after {
  top: 31% !important;
}

html[data-active-module="scoreEditor"] .score-note-icon.is-whole i,
html[data-active-module="scoreEditor"] .score-note-icon.is-half i,
html[data-active-module="scoreEditor"] .score-note-icon.is-quarter i,
html[data-active-module="scoreEditor"] .score-note-icon.is-eighth i::after {
  display: none !important;
}

html[data-active-module="scoreEditor"] .score-editor-canvas-wrap {
  grid-area: canvas !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 54% 10%, rgba(255, 255, 255, 0.06), transparent 28%),
    #151515 !important;
}

html[data-active-module="scoreEditor"] .score-paper-shell,
html[data-active-module="scoreEditor"] .score-paper-scroll {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

html[data-active-module="scoreEditor"] .score-paper-shell {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 8rem),
    #151515 !important;
}

html[data-active-module="scoreEditor"] .score-paper-scroll {
  display: grid !important;
  align-items: start !important;
  justify-items: center !important;
  padding: 0.72rem 1.35rem 0.72rem 0.62rem !important;
  overflow: auto !important;
}

html[data-active-module="scoreEditor"] .score-paper {
  width: min(100%, 71.25rem) !important;
  min-height: min(100%, 52.3rem) !important;
  padding: clamp(2.15rem, 3.1vw, 3rem) clamp(1.25rem, 2vw, 2rem) !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 9px !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.86), transparent 22%),
    radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.64), transparent 20%),
    linear-gradient(135deg, #fffdf7 0%, #fff7e8 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 24px 72px rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="scoreEditor"] .score-paper-head {
  display: grid !important;
  justify-content: center !important;
  padding: 0 0 clamp(2.4rem, 4vh, 3.1rem) !important;
  text-align: center !important;
}

html[data-active-module="scoreEditor"] .score-paper-head > div:first-child {
  width: 100% !important;
}

html[data-active-module="scoreEditor"] .score-paper-head h3 {
  margin: 0 !important;
  color: #111 !important;
  font-size: clamp(1.8rem, 2.35vw, 2.45rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.06 !important;
}

html[data-active-module="scoreEditor"] .score-paper-head p,
html[data-active-module="scoreEditor"] .score-paper-meta,
html[data-active-module="scoreEditor"] .score-engine-badge,
html[data-active-module="scoreEditor"] .score-paper-footer {
  display: none !important;
}

html[data-active-module="scoreEditor"] .score-engine-stage {
  display: block !important;
  min-height: clamp(36rem, 73vh, 43.5rem) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-host {
  min-width: 64rem !important;
  width: 100% !important;
  padding: 0 !important;
}

html[data-active-module="scoreEditor"] .score-osmd-paper {
  display: none !important;
}

@media (max-width: 1280px) {
  html[data-active-module="scoreEditor"] .score-editor-workspace {
    grid-template-columns: clamp(26rem, 34vw, 30rem) minmax(0, 1fr) !important;
  }

  html[data-active-module="scoreEditor"] .score-duration-grid,
  html[data-active-module="scoreEditor"] .score-rest-grid,
  html[data-active-module="scoreEditor"] .score-bowing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html[data-active-module="scoreEditor"] .score-commandbar-button {
    min-width: 4.75rem !important;
  }
}

@media (max-width: 900px) {
  html[data-active-module="scoreEditor"] .score-editor-page {
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: auto !important;
  }

  html[data-active-module="scoreEditor"] .score-editor-commandbar {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 0.65rem !important;
  }

  html[data-active-module="scoreEditor"] .score-commandbar-actions {
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }

  html[data-active-module="scoreEditor"] .score-editor-workspace {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "sidebar"
      "canvas" !important;
    height: auto !important;
  }

  html[data-active-module="scoreEditor"] .score-compose-panel {
    max-height: none !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }
}

/* Score editor nav retention: keep the platform navigation above the editor shell. */
html[data-active-module="scoreEditor"] .main-stage {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: 100vw !important;
  max-width: none !important;
  height: var(--app-height, 100dvh) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="scoreEditor"] .topbar {
  display: flex !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
}

html[data-active-module="scoreEditor"] .content-grid[data-module="scoreEditor"] {
  height: 100% !important;
  min-height: 0 !important;
}

html[data-active-module="scoreEditor"] .score-editor-page {
  height: 100% !important;
  min-height: 0 !important;
}

/* Score editor nav-color alignment: match the platform navigation palette and right-align command actions. */
html[data-active-module="scoreEditor"],
html[data-active-module="scoreEditor"] body,
html[data-active-module="scoreEditor"] .app-shell,
html[data-active-module="scoreEditor"] .main-stage {
  background:
    radial-gradient(circle at 11% 8%, rgba(217, 139, 70, 0.08), transparent 28%),
    radial-gradient(circle at 72% 0%, rgba(155, 196, 235, 0.08), transparent 26%),
    linear-gradient(180deg, #050608 0%, #07090d 48%, #050608 100%) !important;
}

html[data-active-module="scoreEditor"] .score-editor-page {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0) 5.5rem),
    #050608 !important;
}

html[data-active-module="scoreEditor"] .score-editor-commandbar {
  grid-template-columns: auto minmax(18rem, 1fr) max-content !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(5, 7, 10, 0.72) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="scoreEditor"] .score-editor-title-block {
  justify-self: center !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-actions {
  justify-self: end !important;
  justify-content: flex-end !important;
  width: auto !important;
  max-width: max-content !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.006)),
    rgba(12, 14, 18, 0.36) !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-return,
html[data-active-module="scoreEditor"] .score-commandbar-button,
html[data-active-module="scoreEditor"] .score-commandbar-button.is-play {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(12, 14, 18, 0.42) !important;
  color: rgba(245, 242, 234, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-button {
  border-left: 1px solid rgba(255, 255, 255, 0.075) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-button:hover,
html[data-active-module="scoreEditor"] .score-commandbar-return:hover {
  background: rgba(255, 255, 255, 0.045) !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-button.is-play {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.024)),
    rgba(255, 255, 255, 0.025) !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-button span,
html[data-active-module="scoreEditor"] .score-commandbar-button small,
html[data-active-module="scoreEditor"] .score-commandbar-return,
html[data-active-module="scoreEditor"] .score-editor-title-block h2,
html[data-active-module="scoreEditor"] .score-editor-title-block h2 span {
  color: rgba(245, 242, 234, 0.94) !important;
}

html[data-active-module="scoreEditor"] .score-editor-title-block small {
  color: rgba(218, 229, 238, 0.66) !important;
}

html[data-active-module="scoreEditor"] .score-editor-workspace,
html[data-active-module="scoreEditor"] .score-editor-canvas-wrap,
html[data-active-module="scoreEditor"] .score-paper-shell {
  background:
    radial-gradient(circle at 18% 6%, rgba(155, 196, 235, 0.055), transparent 26%),
    linear-gradient(180deg, #071019 0%, #050b12 100%) !important;
}

html[data-active-module="scoreEditor"] .score-compose-panel {
  border-color: rgba(255, 255, 255, 0.075) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(217, 139, 70, 0.075), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(5, 7, 10, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset -1px 0 0 rgba(255, 255, 255, 0.055) !important;
}

html[data-active-module="scoreEditor"] .score-compose-section {
  border-bottom-color: rgba(255, 255, 255, 0.075) !important;
}

html[data-active-module="scoreEditor"] .score-compose-section h3 {
  color: rgba(245, 242, 234, 0.9) !important;
}

html[data-active-module="scoreEditor"] .score-input-card,
html[data-active-module="scoreEditor"] .score-palette-button,
html[data-active-module="scoreEditor"] .score-segment-button,
html[data-active-module="scoreEditor"] .score-fill-measure-button {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(12, 14, 18, 0.46) !important;
  color: rgba(245, 242, 234, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 10px 24px rgba(0, 0, 0, 0.14) !important;
}

html[data-active-module="scoreEditor"] .score-input-card span,
html[data-active-module="scoreEditor"] .score-palette-button span,
html[data-active-module="scoreEditor"] .score-input-card small,
html[data-active-module="scoreEditor"] .score-palette-button small {
  color: rgba(245, 242, 234, 0.9) !important;
}

html[data-active-module="scoreEditor"] .score-input-card:hover,
html[data-active-module="scoreEditor"] .score-palette-button:hover,
html[data-active-module="scoreEditor"] .score-segment-button:hover,
html[data-active-module="scoreEditor"] .score-fill-measure-button:hover {
  border-color: rgba(155, 196, 235, 0.36) !important;
  background:
    linear-gradient(180deg, rgba(155, 196, 235, 0.09), rgba(255, 255, 255, 0.018)),
    rgba(12, 14, 18, 0.56) !important;
}

html[data-active-module="scoreEditor"] .score-input-card.is-active,
html[data-active-module="scoreEditor"] .score-palette-button.is-active,
html[data-active-module="scoreEditor"] .score-segment-button.is-active {
  border-color: rgba(155, 196, 235, 0.62) !important;
  background:
    linear-gradient(180deg, rgba(155, 196, 235, 0.14), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.035) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(155, 196, 235, 0.16),
    0 0 22px rgba(155, 196, 235, 0.08) !important;
}

html[data-active-module="scoreEditor"] .score-input-card.is-active span,
html[data-active-module="scoreEditor"] .score-palette-button.is-active span,
html[data-active-module="scoreEditor"] .score-segment-button.is-active {
  color: rgba(155, 196, 235, 0.98) !important;
}

/* Score editor command rail: move save/play/export actions beside the score. */
html[data-active-module="scoreEditor"] .score-editor-commandbar {
  grid-template-columns: auto minmax(0, 1fr) !important;
}

html[data-active-module="scoreEditor"] .score-editor-workspace {
  grid-template-columns:
    clamp(30.5rem, 30.6vw, 32.25rem)
    minmax(0, 1fr)
    clamp(5.75rem, 6.3vw, 6.75rem) !important;
  grid-template-areas: "sidebar canvas command" !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail {
  grid-area: command !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0.5rem 0.42rem !important;
  gap: 0.34rem !important;
  overflow: auto !important;
  border-left: 1px solid rgba(255, 255, 255, 0.075) !important;
  background:
    radial-gradient(circle at 70% 0%, rgba(155, 196, 235, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(5, 7, 10, 0.84) !important;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.045),
    -16px 0 34px rgba(0, 0, 0, 0.16) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.24) transparent !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button {
  grid-template-rows: 1.65rem auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 4.9rem !important;
  height: auto !important;
  padding: 0.62rem 0.28rem !important;
  border: 1px solid rgba(255, 255, 255, 0.085) !important;
  border-radius: 5px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)),
    rgba(12, 14, 18, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 9px 18px rgba(0, 0, 0, 0.16) !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button:hover {
  border-color: rgba(155, 196, 235, 0.35) !important;
  background:
    linear-gradient(180deg, rgba(155, 196, 235, 0.09), rgba(255, 255, 255, 0.018)),
    rgba(12, 14, 18, 0.56) !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button.is-play {
  min-width: 0 !important;
  margin: 0 !important;
  border-color: rgba(155, 196, 235, 0.56) !important;
  background:
    linear-gradient(180deg, rgba(155, 196, 235, 0.18), rgba(155, 196, 235, 0.045)),
    rgba(8, 19, 32, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 24px rgba(155, 196, 235, 0.11),
    0 12px 22px rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button span {
  font-size: 1.44rem !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button small {
  width: 100% !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.16 !important;
}

html[data-active-module="scoreEditor"] .score-paper-scroll {
  padding-right: 0.78rem !important;
}

@media (max-width: 1280px) {
  html[data-active-module="scoreEditor"] .score-editor-workspace {
    grid-template-columns:
      clamp(26rem, 34vw, 30rem)
      minmax(0, 1fr)
      clamp(5.45rem, 7.1vw, 6.1rem) !important;
    grid-template-areas: "sidebar canvas command" !important;
  }

  html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button {
    min-height: 4.55rem !important;
  }
}

@media (max-width: 900px) {
  html[data-active-module="scoreEditor"] .score-editor-workspace {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "sidebar"
      "command"
      "canvas" !important;
  }

  html[data-active-module="scoreEditor"] .score-editor-command-rail {
    flex-direction: row !important;
    width: 100% !important;
    height: auto !important;
    padding: 0.45rem 0.55rem !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.075) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button {
    flex: 0 0 5.2rem !important;
    min-height: 4.35rem !important;
  }
}

/* Score editor full-height tools: remove the extra editor header and stop sidebar paging. */
html[data-active-module="scoreEditor"] .score-editor-page {
  grid-template-rows: minmax(0, 1fr) !important;
}

html[data-active-module="scoreEditor"] .score-editor-commandbar {
  display: none !important;
}

html[data-active-module="scoreEditor"] .score-editor-workspace {
  height: 100% !important;
  min-height: 0 !important;
}

html[data-active-module="scoreEditor"] .score-compose-panel {
  display: grid !important;
  grid-template-rows:
    auto
    auto
    auto
    auto
    auto
    auto
    auto
    auto
    auto !important;
  align-content: start !important;
  gap: clamp(0.26rem, 0.55vh, 0.46rem) !important;
  padding: clamp(0.48rem, 0.75vh, 0.72rem) clamp(0.5rem, 0.72vw, 0.82rem) !important;
  overflow: hidden !important;
}

html[data-active-module="scoreEditor"] .score-compose-topline {
  display: grid !important;
  grid-template-columns: minmax(5.4rem, 0.72fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-height: 2.95rem !important;
}

html[data-active-module="scoreEditor"] .score-compose-title {
  display: grid !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
}

html[data-active-module="scoreEditor"] .score-compose-title strong {
  overflow: hidden !important;
  color: rgba(245, 242, 234, 0.94) !important;
  font-size: 0.95rem !important;
  font-weight: 720 !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .score-compose-title small {
  color: rgba(218, 229, 238, 0.62) !important;
  font-size: 0.72rem !important;
  font-weight: 560 !important;
  line-height: 1.05 !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-return {
  width: 100% !important;
  min-height: 2.9rem !important;
  padding: 0 0.62rem !important;
  gap: 0.38rem !important;
  border-radius: 5px !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-return span {
  font-size: 1.48rem !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-return strong {
  font-size: 0.86rem !important;
}

html[data-active-module="scoreEditor"] .score-compose-section {
  gap: clamp(0.22rem, 0.45vh, 0.38rem) !important;
  padding: 0 0 clamp(0.22rem, 0.45vh, 0.4rem) !important;
}

html[data-active-module="scoreEditor"] .score-compose-section h3 {
  font-size: clamp(0.78rem, 1.2vh, 0.92rem) !important;
  line-height: 1.05 !important;
}

html[data-active-module="scoreEditor"] .score-input-card-grid,
html[data-active-module="scoreEditor"] .score-button-grid,
html[data-active-module="scoreEditor"] .score-segment-grid {
  gap: clamp(0.28rem, 0.48vw, 0.44rem) !important;
}

html[data-active-module="scoreEditor"] .score-input-card,
html[data-active-module="scoreEditor"] .score-palette-button {
  grid-template-rows: clamp(1.42rem, 2.45vh, 1.9rem) auto !important;
  gap: 0.08rem !important;
  min-height: clamp(3.35rem, 6.5vh, 4.45rem) !important;
  padding: clamp(0.3rem, 0.75vh, 0.48rem) 0.28rem !important;
}

html[data-active-module="scoreEditor"] .score-input-card span,
html[data-active-module="scoreEditor"] .score-palette-button span {
  font-size: clamp(1.28rem, 2.7vh, 1.82rem) !important;
}

html[data-active-module="scoreEditor"] .score-input-card small,
html[data-active-module="scoreEditor"] .score-palette-button small {
  font-size: clamp(0.68rem, 1.28vh, 0.8rem) !important;
  line-height: 1.02 !important;
}

html[data-active-module="scoreEditor"] .score-segment-button {
  min-height: clamp(2.05rem, 4.3vh, 2.58rem) !important;
  padding: 0 0.22rem !important;
  font-size: clamp(0.78rem, 1.45vh, 0.95rem) !important;
}

html[data-active-module="scoreEditor"] .score-paper-scroll {
  padding-top: clamp(0.42rem, 0.72vh, 0.68rem) !important;
  padding-bottom: clamp(0.42rem, 0.72vh, 0.68rem) !important;
}

html[data-active-module="scoreEditor"] .score-paper {
  min-height: min(100%, 56.8rem) !important;
}

@media (max-height: 840px) and (min-width: 901px) {
  html[data-active-module="scoreEditor"] .score-compose-panel {
    gap: 0.24rem !important;
    padding-block: 0.42rem !important;
  }

  html[data-active-module="scoreEditor"] .score-compose-section {
    gap: 0.2rem !important;
    padding-bottom: 0.24rem !important;
  }

  html[data-active-module="scoreEditor"] .score-input-card,
  html[data-active-module="scoreEditor"] .score-palette-button {
    min-height: 3.18rem !important;
  }

  html[data-active-module="scoreEditor"] .score-commandbar-return {
    min-height: 2.6rem !important;
  }
}

/* Score editor dense fill: return sits above save; left symbol groups consume the full column. */
html[data-active-module="scoreEditor"] .score-compose-panel {
  grid-template-rows:
    minmax(0, 1.1fr)
    minmax(0, 1.25fr)
    minmax(0, 1.25fr)
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(0, 0.72fr)
    minmax(0, 1.08fr) !important;
  align-content: stretch !important;
  gap: clamp(0.3rem, 0.72vh, 0.56rem) !important;
  padding: clamp(0.42rem, 0.66vh, 0.66rem) clamp(0.48rem, 0.68vw, 0.78rem) !important;
}

html[data-active-module="scoreEditor"] .score-compose-topline,
html[data-active-module="scoreEditor"] .score-compose-title {
  display: none !important;
}

html[data-active-module="scoreEditor"] .score-compose-section {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  min-height: 0 !important;
  padding-bottom: clamp(0.18rem, 0.34vh, 0.3rem) !important;
}

html[data-active-module="scoreEditor"] .score-compose-section h3 {
  font-size: clamp(0.76rem, 1.08vh, 0.9rem) !important;
  line-height: 1 !important;
}

html[data-active-module="scoreEditor"] .score-input-card-grid,
html[data-active-module="scoreEditor"] .score-button-grid,
html[data-active-module="scoreEditor"] .score-segment-grid {
  height: 100% !important;
  min-height: 0 !important;
  align-items: stretch !important;
}

html[data-active-module="scoreEditor"] .score-input-card,
html[data-active-module="scoreEditor"] .score-palette-button,
html[data-active-module="scoreEditor"] .score-segment-button {
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

html[data-active-module="scoreEditor"] .score-input-card,
html[data-active-module="scoreEditor"] .score-palette-button {
  grid-template-rows: minmax(1.36rem, 52%) auto !important;
  padding: clamp(0.28rem, 0.62vh, 0.46rem) 0.24rem !important;
}

html[data-active-module="scoreEditor"] .score-segment-button {
  display: grid !important;
  place-items: center !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail {
  justify-content: stretch !important;
  overflow: hidden !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail .score-command-rail-return {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.016)),
    rgba(12, 14, 18, 0.52) !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail .score-command-rail-return span {
  font-size: 1.78rem !important;
  font-weight: 320 !important;
}

@media (max-height: 840px) and (min-width: 901px) {
  html[data-active-module="scoreEditor"] .score-compose-panel {
    gap: 0.22rem !important;
    padding-block: 0.34rem !important;
  }

  html[data-active-module="scoreEditor"] .score-compose-section {
    gap: 0.16rem !important;
    padding-bottom: 0.18rem !important;
  }

  html[data-active-module="scoreEditor"] .score-input-card,
  html[data-active-module="scoreEditor"] .score-palette-button {
    padding-block: 0.22rem !important;
  }
}

/* Score editor compact stack: arrange the left symbols as a full-width tool tower. */
html[data-active-module="scoreEditor"] .score-compose-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows:
    minmax(0, 1.02fr)
    minmax(0, 0.96fr)
    minmax(0, 0.96fr)
    minmax(0, 0.82fr)
    minmax(0, 0.82fr)
    minmax(0, 0.66fr)
    minmax(0, 0.9fr)
    minmax(0, 0.58fr) !important;
  align-content: stretch !important;
  gap: clamp(0.2rem, 0.46vh, 0.36rem) !important;
  padding: clamp(0.34rem, 0.58vh, 0.58rem) clamp(0.5rem, 0.7vw, 0.76rem) !important;
  overflow: hidden !important;
}

html[data-active-module="scoreEditor"] .score-compose-section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: clamp(0.72rem, 1.35vh, 0.98rem) minmax(0, 1fr) !important;
  align-content: stretch !important;
  gap: clamp(0.16rem, 0.34vh, 0.28rem) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065) !important;
}

html[data-active-module="scoreEditor"] .score-compose-section:last-child {
  border-bottom: 0 !important;
}

html[data-active-module="scoreEditor"] .score-compose-section h3 {
  min-height: 0 !important;
  margin: 0 !important;
  color: rgba(245, 242, 234, 0.82) !important;
  font-size: clamp(0.7rem, 1.05vh, 0.84rem) !important;
  font-weight: 620 !important;
  line-height: 1 !important;
}

html[data-active-module="scoreEditor"] .score-input-card-grid,
html[data-active-module="scoreEditor"] .score-button-grid,
html[data-active-module="scoreEditor"] .score-segment-grid,
html[data-active-module="scoreEditor"] .score-settings-row {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: clamp(0.22rem, 0.42vw, 0.38rem) !important;
  align-items: stretch !important;
}

html[data-active-module="scoreEditor"] .score-input-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html[data-active-module="scoreEditor"] .score-duration-grid,
html[data-active-module="scoreEditor"] .score-rest-grid,
html[data-active-module="scoreEditor"] .score-bowing-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html[data-active-module="scoreEditor"] .score-accidental-grid,
html[data-active-module="scoreEditor"] .score-repeat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html[data-active-module="scoreEditor"] .score-segment-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

html[data-active-module="scoreEditor"] .score-input-card,
html[data-active-module="scoreEditor"] .score-palette-button,
html[data-active-module="scoreEditor"] .score-segment-button,
html[data-active-module="scoreEditor"] .score-fill-measure-button {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

html[data-active-module="scoreEditor"] .score-input-card,
html[data-active-module="scoreEditor"] .score-palette-button {
  grid-template-rows: minmax(1.15rem, 54%) minmax(0.92rem, auto) !important;
  gap: clamp(0.04rem, 0.18vh, 0.12rem) !important;
  padding: clamp(0.2rem, 0.45vh, 0.36rem) 0.22rem !important;
}

html[data-active-module="scoreEditor"] .score-input-card span,
html[data-active-module="scoreEditor"] .score-palette-button span {
  font-size: clamp(1.14rem, 2.35vh, 1.72rem) !important;
}

html[data-active-module="scoreEditor"] .score-input-card small,
html[data-active-module="scoreEditor"] .score-palette-button small {
  font-size: clamp(0.62rem, 1.06vh, 0.76rem) !important;
  line-height: 1.02 !important;
  white-space: normal !important;
}

html[data-active-module="scoreEditor"] .score-segment-button {
  display: grid !important;
  place-items: center !important;
  padding: 0 0.16rem !important;
  font-size: clamp(0.68rem, 1.18vh, 0.86rem) !important;
}

html[data-active-module="scoreEditor"] .score-score-settings {
  grid-template-rows: clamp(0.72rem, 1.25vh, 0.92rem) minmax(0, 1fr) !important;
}

html[data-active-module="scoreEditor"] .score-score-settings .score-settings-row {
  display: none !important;
}

html[data-active-module="scoreEditor"] .score-fill-measure-button {
  display: grid !important;
  place-items: center !important;
  padding: 0 0.7rem !important;
  font-size: clamp(0.76rem, 1.2vh, 0.9rem) !important;
  font-weight: 650 !important;
}

@media (max-height: 840px) and (min-width: 901px) {
  html[data-active-module="scoreEditor"] .score-compose-panel {
    gap: 0.18rem !important;
    padding-block: 0.26rem !important;
  }

  html[data-active-module="scoreEditor"] .score-compose-section {
    grid-template-rows: 0.7rem minmax(0, 1fr) !important;
    gap: 0.12rem !important;
  }

  html[data-active-module="scoreEditor"] .score-input-card,
  html[data-active-module="scoreEditor"] .score-palette-button {
    padding-block: 0.16rem !important;
  }
}

/* Library background polish: Apple-style dark product ambience; all library blocks keep their own styles. */
html[data-active-module="nav-library"] .content-grid[data-module="nav-library"] {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% -14%, rgba(245, 248, 255, 0.16), transparent 34%),
    radial-gradient(ellipse at 83% 8%, rgba(100, 146, 201, 0.18), transparent 38%),
    radial-gradient(ellipse at 16% 72%, rgba(92, 102, 118, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(21, 23, 27, 0.98), rgba(8, 10, 14, 0.995) 42%, rgba(2, 3, 6, 0.995)) !important;
}

html[data-active-module="nav-library"] .content-grid[data-module="nav-library"]::before,
html[data-active-module="nav-library"] .content-grid[data-module="nav-library"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

html[data-active-module="nav-library"] .content-grid[data-module="nav-library"]::before {
  background:
    linear-gradient(105deg, transparent 10%, rgba(255, 255, 255, 0.08) 33%, rgba(190, 213, 240, 0.045) 46%, transparent 68%),
    radial-gradient(ellipse at 57% 18%, rgba(255, 255, 255, 0.11), transparent 28%),
    radial-gradient(ellipse at 72% 86%, rgba(83, 125, 178, 0.12), transparent 38%);
  opacity: 0.72;
  mix-blend-mode: screen;
}

html[data-active-module="nav-library"] .content-grid[data-module="nav-library"]::after {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 96px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 28%, rgba(0, 0, 0, 0.28));
  opacity: 0.48;
}

html[data-active-module="nav-library"] .content-grid[data-module="nav-library"] > * {
  position: relative;
  z-index: 1;
}

/* Library screenshot reference: replace the area below the top nav only. */
html[data-active-module="nav-library"] .content-grid[data-module="nav-library"] {
  --library-ref-gold: 232, 184, 111;
  --library-ref-gold-soft: 255, 220, 166;
  --library-ref-line: 255, 255, 255;
  --library-ref-panel: 12, 13, 15;
  padding: clamp(1.1rem, 1.65vw, 1.7rem) clamp(1.35rem, 2vw, 2.1rem) clamp(1rem, 1.45vw, 1.45rem) !important;
  background:
    radial-gradient(ellipse at 38% -10%, rgba(255, 222, 172, 0.11), transparent 35%),
    radial-gradient(ellipse at 79% 2%, rgba(68, 107, 137, 0.16), transparent 38%),
    radial-gradient(ellipse at 12% 14%, rgba(130, 91, 51, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(14, 15, 17, 0.98), rgba(6, 7, 9, 0.995) 42%, rgba(3, 4, 6, 0.995)) !important;
}

html[data-active-module="nav-library"] .content-grid[data-module="nav-library"]::before {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045) 50%, transparent),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 5px);
  opacity: 0.36;
  mix-blend-mode: screen;
}

html[data-active-module="nav-library"] .content-grid[data-module="nav-library"]::after {
  background:
    radial-gradient(ellipse at 52% 20%, rgba(255, 216, 156, 0.055), transparent 34%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28));
  opacity: 0.86;
}

html[data-active-module="nav-library"] .nav-workbench-library {
  grid-template-columns: minmax(14.4rem, 0.28fr) minmax(0, 1fr) !important;
  gap: clamp(1rem, 1.6vw, 1.8rem) !important;
}

html[data-active-module="nav-library"] .library-filter-rail,
html[data-active-module="nav-library"] .library-list-panel {
  border: 1px solid rgba(var(--library-ref-line), 0.105) !important;
  border-radius: clamp(1.05rem, 1.45vw, 1.5rem) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)),
    rgba(var(--library-ref-panel), 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 1.2rem 3.6rem rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(24px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.1) !important;
}

html[data-active-module="nav-library"] .library-filter-rail {
  grid-template-rows: minmax(0, 1.18fr) minmax(0, 0.88fr) minmax(0, 0.76fr) !important;
  padding: clamp(1.15rem, 1.45vw, 1.55rem) clamp(1.05rem, 1.25vw, 1.3rem) !important;
  gap: clamp(0.86rem, 1.2vw, 1.2rem) !important;
}

html[data-active-module="nav-library"] .library-filter-title {
  color: rgba(255, 230, 188, 0.98) !important;
  font-size: clamp(0.84rem, 0.94vw, 0.98rem) !important;
  font-weight: 850 !important;
}

html[data-active-module="nav-library"] .library-filter-grid button {
  min-height: clamp(2rem, 2.55vw, 2.45rem) !important;
  border-color: rgba(255, 255, 255, 0.075) !important;
  border-radius: 0.58rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(26, 27, 27, 0.76) !important;
  color: rgba(245, 245, 243, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button:hover,
html[data-active-module="nav-library"] .library-filter-grid button.is-active {
  border-color: rgba(var(--library-ref-gold-soft), 0.52) !important;
  background:
    linear-gradient(100deg, rgba(118, 79, 39, 0.86), rgba(230, 188, 126, 0.72) 48%, rgba(98, 68, 36, 0.82)),
    rgba(var(--library-ref-gold), 0.28) !important;
  color: rgba(255, 245, 225, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.28),
    0 0 1rem rgba(var(--library-ref-gold), 0.15) !important;
}

html[data-active-module="nav-library"] .library-list-panel {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  padding: clamp(1.15rem, 1.65vw, 1.7rem) clamp(1.45rem, 2vw, 2.1rem) !important;
  gap: clamp(0.8rem, 1.08vw, 1.05rem) !important;
}

html[data-active-module="nav-library"] .library-results-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: clamp(1rem, 1.4vw, 1.4rem) !important;
  min-height: clamp(2.8rem, 3.5vw, 3.4rem);
}

html[data-active-module="nav-library"] .library-search-shell {
  min-height: clamp(2.5rem, 3.25vw, 3rem) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 0 1px rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="nav-library"] .library-search-shell span,
html[data-active-module="nav-library"] .library-search-shell i {
  color: rgba(var(--library-ref-gold-soft), 0.9) !important;
}

html[data-active-module="nav-library"] .library-search-shell input {
  color: rgba(245, 245, 243, 0.92) !important;
}

html[data-active-module="nav-library"] .library-results-head > span {
  color: rgba(245, 245, 243, 0.82) !important;
  font-size: clamp(0.82rem, 0.92vw, 0.98rem) !important;
  font-weight: 800 !important;
}

html[data-active-module="nav-library"] .library-section-heading strong,
html[data-active-module="nav-library"] .library-table-head span:nth-child(2) {
  color: rgba(255, 232, 187, 0.98) !important;
  font-size: clamp(1rem, 1.12vw, 1.18rem) !important;
  font-weight: 900 !important;
}

html[data-active-module="nav-library"] .library-section-heading button {
  color: rgba(var(--library-ref-gold-soft), 0.88) !important;
}

html[data-active-module="nav-library"] .library-series-grid {
  gap: clamp(0.78rem, 1.05vw, 1.05rem) !important;
}

html[data-active-module="nav-library"] .library-series-card {
  position: relative;
  isolation: isolate;
  min-height: clamp(5.55rem, 6.95vw, 6.75rem) !important;
  padding: clamp(1.1rem, 1.38vw, 1.35rem) clamp(1.1rem, 1.45vw, 1.45rem) !important;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.72rem !important;
  background: rgba(0, 0, 0, 0.35) !important;
}

html[data-active-module="nav-library"] .library-series-card::before,
html[data-active-module="nav-library"] .library-series-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

html[data-active-module="nav-library"] .library-series-card::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.52) 50%, rgba(0, 0, 0, 0.24)),
    var(--series-image, radial-gradient(circle at 78% 48%, rgba(202, 142, 72, 0.36), transparent 30%));
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

html[data-active-module="nav-library"] .library-series-card::after {
  background:
    radial-gradient(ellipse at 82% 18%, rgba(255, 205, 141, 0.12), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(91, 55, 24, 0.22), rgba(0, 0, 0, 0.4)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.32));
}

html[data-active-module="nav-library"] .library-series-card:nth-child(1) {
  --series-image: url("/player/assets/violin-master-cropped.png");
}

html[data-active-module="nav-library"] .library-series-card:nth-child(2) {
  --series-image: url("/platform/assets/learning-score-paper.png");
}

html[data-active-module="nav-library"] .library-series-card:nth-child(3) {
  --series-image: url("/player/assets/violin-scroll-head-crop.png");
}

html[data-active-module="nav-library"] .library-series-card:nth-child(4) {
  --series-image: url("/platform/assets/learning-violin-body.jpg");
}

html[data-active-module="nav-library"] .library-series-card:nth-child(5) {
  --series-image: url("/player/assets/violin-master-user-atmosphere.png");
}

html[data-active-module="nav-library"] .library-series-card:nth-child(6) {
  --series-image:
    radial-gradient(circle at 80% 50%, rgba(239, 174, 91, 0.36), transparent 19%),
    linear-gradient(140deg, rgba(0, 0, 0, 0.72), rgba(95, 60, 28, 0.3));
}

html[data-active-module="nav-library"] .library-series-card strong {
  color: rgba(255, 255, 252, 0.96) !important;
  font-size: clamp(1rem, 1.2vw, 1.26rem) !important;
  text-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.52);
}

html[data-active-module="nav-library"] .library-series-card small {
  color: rgba(236, 232, 220, 0.72) !important;
  font-size: clamp(0.78rem, 0.86vw, 0.9rem) !important;
}

html[data-active-module="nav-library"] .library-series-card:hover,
html[data-active-module="nav-library"] .library-series-card.is-active {
  border-color: rgba(var(--library-ref-gold-soft), 0.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 1.25rem rgba(var(--library-ref-gold), 0.13) !important;
}

html[data-active-module="nav-library"] .library-table-head {
  grid-template-columns: clamp(3.7rem, 4.6vw, 4.3rem) minmax(0, 1fr) minmax(5rem, 0.26fr) minmax(4rem, 0.18fr) minmax(4rem, 0.18fr) minmax(9rem, 0.3fr) !important;
  min-height: clamp(3rem, 3.8vw, 3.65rem) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  color: rgba(230, 230, 226, 0.58) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  grid-template-columns: clamp(3.7rem, 4.6vw, 4.3rem) minmax(0, 1fr) minmax(5rem, 0.26fr) minmax(4rem, 0.18fr) minmax(4rem, 0.18fr) minmax(9rem, 0.3fr) !important;
  min-height: clamp(4.8rem, 6.3vw, 6rem) !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-active-module="nav-library"] .library-track-row img {
  width: clamp(3.3rem, 4.15vw, 3.9rem) !important;
  height: clamp(3.3rem, 4.15vw, 3.9rem) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  border-radius: 0.5rem !important;
}

html[data-active-module="nav-library"] .library-track-title strong {
  color: rgba(255, 255, 252, 0.94) !important;
  font-size: clamp(0.98rem, 1.14vw, 1.2rem) !important;
}

html[data-active-module="nav-library"] .library-track-title small {
  color: rgba(226, 226, 220, 0.68) !important;
}

html[data-active-module="nav-library"] .library-row-difficulty,
html[data-active-module="nav-library"] .library-row-free {
  min-height: clamp(2rem, 2.4vw, 2.2rem) !important;
  padding: 0.4rem 0.72rem !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

html[data-active-module="nav-library"] .library-row-free {
  border-color: rgba(var(--library-ref-gold), 0.18) !important;
  background: rgba(130, 82, 32, 0.2) !important;
  color: rgba(255, 218, 159, 0.96) !important;
}

html[data-active-module="nav-library"] .library-row-favorite {
  font-size: clamp(1.6rem, 1.95vw, 1.9rem) !important;
}

html[data-active-module="nav-library"] .library-row-play {
  gap: 0.7rem;
  min-width: clamp(8.6rem, 10.5vw, 10.5rem) !important;
  min-height: clamp(2.6rem, 3.25vw, 3rem) !important;
  border-color: rgba(var(--library-ref-gold), 0.64) !important;
  border-radius: 0.6rem !important;
  background: rgba(9, 10, 12, 0.54) !important;
  color: rgba(255, 225, 172, 0.98) !important;
  font-size: clamp(0.92rem, 1vw, 1.06rem) !important;
}

html[data-active-module="nav-library"] .library-row-play::after {
  content: "➜";
  display: grid;
  width: 1.42rem;
  height: 1.42rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(var(--library-ref-gold), 0.9);
  color: rgba(20, 13, 6, 0.92);
  font-size: 0.85rem;
}

html[data-active-module="nav-library"] .library-pagination button.is-active {
  background: linear-gradient(180deg, rgba(241, 197, 123, 0.98), rgba(185, 124, 50, 0.96)) !important;
  color: rgba(23, 14, 4, 0.96) !important;
}

/* Score editor no-scroll viewport: every editing column fits inside one screen. */
html[data-active-module="scoreEditor"],
html[data-active-module="scoreEditor"] body,
html[data-active-module="scoreEditor"] .app-shell,
html[data-active-module="scoreEditor"] .main-stage,
html[data-active-module="scoreEditor"] .content-grid[data-module="scoreEditor"],
html[data-active-module="scoreEditor"] .score-editor-page,
html[data-active-module="scoreEditor"] .score-editor-workspace,
html[data-active-module="scoreEditor"] .score-compose-panel,
html[data-active-module="scoreEditor"] .score-editor-canvas-wrap,
html[data-active-module="scoreEditor"] .score-paper-shell,
html[data-active-module="scoreEditor"] .score-paper-scroll,
html[data-active-module="scoreEditor"] .score-paper,
html[data-active-module="scoreEditor"] .score-engine-stage,
html[data-active-module="scoreEditor"] .score-vexflow-host,
html[data-active-module="scoreEditor"] .score-editor-command-rail {
  overflow: hidden !important;
  scrollbar-width: none !important;
}

html[data-active-module="scoreEditor"] .score-compose-panel::-webkit-scrollbar,
html[data-active-module="scoreEditor"] .score-paper-scroll::-webkit-scrollbar,
html[data-active-module="scoreEditor"] .score-engine-stage::-webkit-scrollbar,
html[data-active-module="scoreEditor"] .score-vexflow-host::-webkit-scrollbar,
html[data-active-module="scoreEditor"] .score-editor-command-rail::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

html[data-active-module="scoreEditor"] .score-paper-scroll {
  display: grid !important;
  align-items: stretch !important;
  justify-items: center !important;
  padding: clamp(0.34rem, 0.58vh, 0.55rem) clamp(0.46rem, 0.8vw, 0.72rem) !important;
}

html[data-active-module="scoreEditor"] .score-paper {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: min(100%, 71.25rem) !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  padding:
    clamp(1.18rem, 2.05vh, 1.82rem)
    clamp(1.1rem, 1.8vw, 1.75rem) !important;
}

html[data-active-module="scoreEditor"] .score-paper-head {
  padding-bottom: clamp(1rem, 2.4vh, 2rem) !important;
}

html[data-active-module="scoreEditor"] .score-engine-stage {
  display: grid !important;
  align-items: start !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-host {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-host svg {
  max-width: 100% !important;
  max-height: 100% !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail {
  gap: clamp(0.16rem, 0.34vh, 0.28rem) !important;
  padding-block: clamp(0.28rem, 0.5vh, 0.46rem) !important;
}

/* Score editor side-fill: let left and right controls consume the paper-side gutters. */
html[data-active-module="scoreEditor"] .score-editor-workspace {
  grid-template-columns:
    minmax(clamp(24rem, 29vw, 39rem), 1fr)
    minmax(0, min(71.25rem, 62vw))
    minmax(clamp(6.5rem, 7.6vw, 10rem), 0.38fr) !important;
  grid-template-areas: "sidebar canvas command" !important;
  gap: 0 !important;
}

html[data-active-module="scoreEditor"] .score-paper-scroll {
  justify-items: stretch !important;
  padding-inline: 0 !important;
}

html[data-active-module="scoreEditor"] .score-paper {
  width: 100% !important;
  max-width: none !important;
  border-radius: 7px !important;
}

html[data-active-module="scoreEditor"] .score-compose-panel {
  padding-inline: clamp(0.45rem, 0.72vw, 0.86rem) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.085) !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail {
  padding-inline: clamp(0.36rem, 0.58vw, 0.68rem) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.085) !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button {
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: clamp(0.24rem, 0.42vw, 0.52rem) !important;
}

@media (max-width: 1280px) {
  html[data-active-module="scoreEditor"] .score-editor-workspace {
    grid-template-columns:
      minmax(clamp(21.5rem, 30vw, 30rem), 1fr)
      minmax(0, min(66rem, 60vw))
      minmax(clamp(5.8rem, 7vw, 7.5rem), 0.34fr) !important;
  }
}

/* Score editor vertical group labels: keep tool names visible beside each button group. */
html[data-active-module="scoreEditor"] .score-compose-section {
  grid-template-columns: clamp(4.05rem, 4.45vw, 5.6rem) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  column-gap: clamp(0.36rem, 0.52vw, 0.64rem) !important;
  row-gap: 0 !important;
}

html[data-active-module="scoreEditor"] .score-compose-section h3 {
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
  display: grid !important;
  place-items: center !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0.32rem 0.16rem !important;
  border: 1px solid rgba(155, 196, 235, 0.42) !important;
  border-radius: 5px !important;
  background:
    linear-gradient(180deg, rgba(155, 196, 235, 0.13), rgba(255, 255, 255, 0.018)),
    rgba(13, 22, 31, 0.7) !important;
  color: rgba(248, 251, 255, 0.98) !important;
  font-size: clamp(0.98rem, 1.55vh, 1.28rem) !important;
  font-weight: 780 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .score-input-card-grid,
html[data-active-module="scoreEditor"] .score-button-grid,
html[data-active-module="scoreEditor"] .score-segment-grid,
html[data-active-module="scoreEditor"] .score-settings-row,
html[data-active-module="scoreEditor"] .score-fill-measure-button {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

html[data-active-module="scoreEditor"] .score-score-settings .score-fill-measure-button {
  min-height: 0 !important;
}

@media (max-height: 840px) and (min-width: 901px) {
  html[data-active-module="scoreEditor"] .score-compose-section {
    grid-template-columns: 3.6rem minmax(0, 1fr) !important;
    column-gap: 0.3rem !important;
  }

html[data-active-module="scoreEditor"] .score-compose-section h3 {
    font-size: 0.88rem !important;
    padding: 0.22rem 0.12rem !important;
  }
}

/* Score editor paged paper: 3 measures per row, 3 rows per page, with visible page controls. */
html[data-active-module="scoreEditor"] .score-paper {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

html[data-active-module="scoreEditor"] .score-engine-stage {
  min-height: 0 !important;
}

html[data-active-module="scoreEditor"] .score-paper-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.8rem !important;
  min-height: clamp(2.65rem, 4.3vh, 3.45rem) !important;
  padding-top: clamp(0.38rem, 0.72vh, 0.62rem) !important;
  border-top: 1px solid rgba(17, 17, 17, 0.12) !important;
  color: rgba(17, 17, 17, 0.72) !important;
}

html[data-active-module="scoreEditor"] .score-page-readout {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.62rem !important;
  min-width: 0 !important;
}

html[data-active-module="scoreEditor"] .score-page-readout strong {
  color: #111 !important;
  font-size: clamp(0.9rem, 1vw, 1.08rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
}

html[data-active-module="scoreEditor"] .score-page-readout span {
  color: rgba(17, 17, 17, 0.56) !important;
  font-size: clamp(0.72rem, 0.85vw, 0.88rem) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

html[data-active-module="scoreEditor"] .score-page-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.42rem !important;
}

html[data-active-module="scoreEditor"] .score-page-actions button {
  min-width: clamp(4.2rem, 4.8vw, 5.2rem) !important;
  min-height: clamp(2rem, 3.2vh, 2.42rem) !important;
  padding: 0 0.75rem !important;
  border: 1px solid rgba(17, 17, 17, 0.16) !important;
  border-radius: 5px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18)),
    rgba(17, 17, 17, 0.035) !important;
  color: rgba(17, 17, 17, 0.76) !important;
  font: inherit !important;
  font-size: clamp(0.76rem, 0.9vw, 0.9rem) !important;
  font-weight: 680 !important;
}

html[data-active-module="scoreEditor"] .score-page-actions button:not(:disabled):hover {
  border-color: rgba(17, 17, 17, 0.28) !important;
  background: rgba(255, 255, 255, 0.68) !important;
}

html[data-active-module="scoreEditor"] .score-page-actions button:disabled {
  opacity: 0.42 !important;
  cursor: default !important;
}

/* Score editor larger controls: make every tool symbol and button label easier to read. */
html[data-active-module="scoreEditor"] .score-input-card,
html[data-active-module="scoreEditor"] .score-palette-button {
  grid-template-rows: minmax(1.78rem, 58%) minmax(1.08rem, auto) !important;
  gap: clamp(0.08rem, 0.24vh, 0.18rem) !important;
}

html[data-active-module="scoreEditor"] .score-input-card span,
html[data-active-module="scoreEditor"] .score-palette-button span {
  font-size: clamp(1.72rem, 3.2vh, 2.36rem) !important;
  font-weight: 560 !important;
  line-height: 1 !important;
}

html[data-active-module="scoreEditor"] .score-input-card small,
html[data-active-module="scoreEditor"] .score-palette-button small {
  font-size: clamp(0.88rem, 1.42vh, 1.06rem) !important;
  font-weight: 720 !important;
  line-height: 1.08 !important;
}

html[data-active-module="scoreEditor"] .score-segment-button,
html[data-active-module="scoreEditor"] .score-fill-measure-button {
  font-size: clamp(0.95rem, 1.55vh, 1.14rem) !important;
  font-weight: 740 !important;
}

html[data-active-module="scoreEditor"] .score-compose-section h3 {
  font-size: clamp(1.08rem, 1.72vh, 1.42rem) !important;
  font-weight: 800 !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button span {
  font-size: clamp(1.68rem, 3vh, 2.18rem) !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button small {
  font-size: clamp(0.82rem, 1.24vh, 1rem) !important;
  font-weight: 720 !important;
}

html[data-active-module="scoreEditor"] .score-page-readout strong,
html[data-active-module="scoreEditor"] .score-page-actions button {
  font-size: clamp(0.92rem, 1.12vw, 1.14rem) !important;
}

/* Score editor no-detach larger controls: fill the freed bowing slot and make all controls more legible. */
html[data-active-module="scoreEditor"] .score-input-card,
html[data-active-module="scoreEditor"] .score-palette-button {
  grid-template-rows: minmax(2.05rem, 60%) minmax(1.2rem, auto) !important;
  gap: clamp(0.1rem, 0.3vh, 0.22rem) !important;
}

html[data-active-module="scoreEditor"] .score-input-card span,
html[data-active-module="scoreEditor"] .score-palette-button span {
  font-size: clamp(2rem, 3.75vh, 2.72rem) !important;
  font-weight: 580 !important;
  line-height: 1 !important;
}

html[data-active-module="scoreEditor"] .score-input-card small,
html[data-active-module="scoreEditor"] .score-palette-button small {
  font-size: clamp(1rem, 1.68vh, 1.22rem) !important;
  font-weight: 760 !important;
  line-height: 1.08 !important;
}

html[data-active-module="scoreEditor"] .score-segment-button,
html[data-active-module="scoreEditor"] .score-fill-measure-button {
  font-size: clamp(1.08rem, 1.8vh, 1.3rem) !important;
  font-weight: 780 !important;
}

html[data-active-module="scoreEditor"] .score-compose-section h3 {
  font-size: clamp(1.22rem, 1.95vh, 1.58rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="scoreEditor"] .score-bowing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button span {
  font-size: clamp(1.9rem, 3.4vh, 2.45rem) !important;
  font-weight: 580 !important;
}

html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button small {
  font-size: clamp(0.94rem, 1.48vh, 1.12rem) !important;
  font-weight: 760 !important;
}

html[data-active-module="scoreEditor"] .score-page-readout strong,
html[data-active-module="scoreEditor"] .score-page-actions button {
  font-size: clamp(1rem, 1.22vw, 1.25rem) !important;
}

/* Score editor score hotspots: make the VexFlow page directly editable instead of feeling like a static image. */
html[data-active-module="scoreEditor"] .score-vexflow-host {
  position: relative !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-host svg {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-hit-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-measure-hotspot,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot {
  position: absolute !important;
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-measure-hotspot {
  border-radius: 6px !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-measure-hotspot:hover {
  background: rgba(25, 133, 154, 0.055) !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot {
  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 10% !important;
  bottom: 10% !important;
  width: 2px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: rgba(12, 133, 154, 0) !important;
  transition: background 0.12s ease, box-shadow 0.12s ease !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot::after {
  content: "" !important;
  position: absolute !important;
  inset: 18% 14% !important;
  border: 2px solid rgba(12, 133, 154, 0) !important;
  border-radius: 999px !important;
  background: rgba(19, 125, 147, 0) !important;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot:hover::after,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-selected::after {
  border-color: rgba(11, 116, 137, 0.88) !important;
  background: rgba(19, 125, 147, 0.08) !important;
  box-shadow: 0 0 0 4px rgba(19, 125, 147, 0.1) !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-selected::before {
  background: rgba(11, 116, 137, 0.92) !important;
  box-shadow: 0 0 0 3px rgba(11, 116, 137, 0.13) !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-rest::after {
  border-radius: 7px !important;
}

/* Score editor clean drag-drop: keep the staff visually pure while accepting dragged notes. */
html[data-active-module="scoreEditor"] .score-input-card[draggable="true"],
html[data-active-module="scoreEditor"] .score-palette-button[draggable="true"] {
  cursor: grab !important;
  -webkit-user-drag: element !important;
}

html[data-active-module="scoreEditor"] .score-input-card[draggable="true"]:active,
html[data-active-module="scoreEditor"] .score-palette-button[draggable="true"]:active {
  cursor: grabbing !important;
}

html.is-score-editor-dragging[data-active-module="scoreEditor"] .score-vexflow-host {
  cursor: copy !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-measure-hotspot,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot,
html[data-active-module="scoreEditor"] .score-vexflow-measure-hotspot:hover,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot:hover,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-selected,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-rest {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot::before,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot::after,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot:hover::before,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot:hover::after,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-selected::before,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-selected::after,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-rest::before,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-rest::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-vexflow-measure-hotspot.is-selected::before,
html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-vexflow-measure-hotspot.is-playing::before {
  content: "" !important;
  position: absolute !important;
  inset: 0.28rem 0.36rem !important;
  display: block !important;
  border: 2px solid rgba(142, 96, 230, 0.52) !important;
  border-radius: 8px !important;
  background: rgba(142, 96, 230, 0.045) !important;
  pointer-events: none !important;
}

html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-vexflow-measure-hotspot.is-playing::before {
  border-color: rgba(116, 219, 230, 0.72) !important;
  background: rgba(116, 219, 230, 0.07) !important;
}

html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-vexflow-note-hotspot.is-playing::after,
html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-vexflow-note-hotspot.is-selected::after {
  content: "" !important;
  position: absolute !important;
  inset: 18% 12% !important;
  display: block !important;
  border: 2px solid rgba(142, 96, 230, 0.7) !important;
  border-radius: 999px !important;
  background: rgba(142, 96, 230, 0.075) !important;
  pointer-events: none !important;
}

html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-vexflow-note-hotspot.is-playing::after {
  border-color: rgba(116, 219, 230, 0.88) !important;
  background: rgba(116, 219, 230, 0.1) !important;
}

html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-vexflow-note-hotspot.is-playing::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 8% !important;
  bottom: 8% !important;
  width: 2px !important;
  display: block !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: rgba(116, 219, 230, 0.86) !important;
  pointer-events: none !important;
}

/* Score editor measure capacity hint: show the real per-measure limit without adding extra controls. */
html[data-active-module="scoreEditor"] .score-page-readout em {
  color: rgba(17, 17, 17, 0.66) !important;
  font-size: clamp(0.82rem, 0.95vw, 1rem) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .score-page-readout em.is-error {
  color: rgba(174, 54, 36, 0.92) !important;
}

/* Score editor pitch drag: hold an existing note and move vertically to change pitch. */
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot {
  cursor: ns-resize !important;
  touch-action: none !important;
  -webkit-user-drag: none !important;
}

html.is-score-editor-pitch-dragging[data-active-module="scoreEditor"],
html.is-score-editor-pitch-dragging[data-active-module="scoreEditor"] .score-vexflow-host,
html.is-score-editor-pitch-dragging[data-active-module="scoreEditor"] .score-vexflow-note-hotspot {
  cursor: ns-resize !important;
  user-select: none !important;
}

/* Score editor beam toggle: keep the rhythm-symbol row compact after adding 连尾. */
html[data-active-module="scoreEditor"] .score-repeat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Library workbench root sizing. */
html[data-active-module="nav-library"] .content-grid[data-module="nav-library"] {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  align-content: stretch !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: #030405 !important;
}

html[data-active-module="nav-library"] .content-grid[data-module="nav-library"]::before,
html[data-active-module="nav-library"] .content-grid[data-module="nav-library"]::after {
  content: none !important;
  display: none !important;
}

html[data-active-module="nav-library"] .nav-workbench-library {
  position: relative !important;
  display: block !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: #030405 !important;
  box-shadow: none !important;
  color: transparent !important;
}

/* Score editor drag preview: show the exact insertion point before dropping a note. */
html[data-active-module="scoreEditor"] .score-vexflow-drop-preview {
  position: absolute !important;
  z-index: 4 !important;
  width: clamp(3.6rem, 4.4vw, 5rem) !important;
  height: clamp(5.2rem, 8.2vh, 6.8rem) !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
  color: #07869c !important;
  opacity: 0.96 !important;
  transition: left 80ms linear, top 80ms linear, opacity 120ms ease !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-drop-preview span {
  position: absolute !important;
  left: 50% !important;
  top: 4% !important;
  bottom: 4% !important;
  width: 3px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: 0 0 0 4px rgba(7, 134, 156, 0.11), 0 0 1.1rem rgba(7, 134, 156, 0.32) !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-drop-preview b {
  position: relative !important;
  z-index: 1 !important;
  min-width: clamp(2rem, 2.8vw, 2.7rem) !important;
  min-height: clamp(2rem, 2.8vw, 2.7rem) !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid color-mix(in srgb, currentColor 78%, transparent) !important;
  border-radius: 999px !important;
  background: rgba(255, 252, 244, 0.82) !important;
  color: currentColor !important;
  font-family: Academico, Georgia, serif !important;
  font-size: clamp(1.55rem, 2.2vw, 2.15rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  box-shadow: 0 0.65rem 1.2rem rgba(0, 0, 0, 0.14) !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-drop-preview em {
  position: absolute !important;
  left: 50% !important;
  bottom: -0.55rem !important;
  transform: translateX(-50%) !important;
  min-width: max-content !important;
  padding: 0.16rem 0.42rem !important;
  border-radius: 999px !important;
  background: rgba(255, 252, 244, 0.9) !important;
  color: currentColor !important;
  font-size: clamp(0.66rem, 0.78vw, 0.82rem) !important;
  font-style: normal !important;
  font-weight: 780 !important;
  line-height: 1.1 !important;
  box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.12) !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-drop-preview.is-rest b {
  border-radius: 8px !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-drop-preview.is-invalid {
  color: #b83c2f !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-drop-preview.is-invalid span {
  box-shadow: 0 0 0 4px rgba(184, 60, 47, 0.11), 0 0 1.1rem rgba(184, 60, 47, 0.28) !important;
}

/* score-editor-edit-cues-20260611-1: clearer selected note, insert preview, and measure status. */
html[data-active-module="scoreEditor"] .score-paper-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "status actions"
    "page actions" !important;
  align-items: center !important;
  column-gap: clamp(0.72rem, 1vw, 1rem) !important;
  row-gap: clamp(0.22rem, 0.38vh, 0.36rem) !important;
}

html[data-active-module="scoreEditor"] .score-editor-footer-status {
  grid-area: status !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.38rem, 0.58vw, 0.62rem) !important;
  width: min(100%, 34rem) !important;
  min-width: 0 !important;
  min-height: clamp(1.72rem, 2.9vh, 2.18rem) !important;
  padding: 0 clamp(0.58rem, 0.82vw, 0.82rem) !important;
  overflow: hidden !important;
  border: 1px solid rgba(17, 17, 17, 0.13) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.28)),
    rgba(17, 17, 17, 0.035) !important;
  color: rgba(17, 17, 17, 0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56) !important;
}

html[data-active-module="scoreEditor"] .score-editor-footer-status strong,
html[data-active-module="scoreEditor"] .score-editor-footer-status span,
html[data-active-module="scoreEditor"] .score-editor-footer-status em {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .score-editor-footer-status strong {
  max-width: min(54%, 16rem) !important;
  overflow: hidden !important;
  color: rgba(7, 100, 122, 0.98) !important;
  font-size: clamp(0.82rem, 0.98vw, 1rem) !important;
  font-weight: 860 !important;
  text-overflow: ellipsis !important;
}

html[data-active-module="scoreEditor"] .score-editor-footer-status span {
  flex: 0 0 auto !important;
  color: rgba(17, 17, 17, 0.5) !important;
  font-size: clamp(0.72rem, 0.84vw, 0.88rem) !important;
  font-weight: 720 !important;
}

html[data-active-module="scoreEditor"] .score-editor-footer-status em {
  flex: 0 1 auto !important;
  overflow: hidden !important;
  color: rgba(17, 17, 17, 0.58) !important;
  font-size: clamp(0.72rem, 0.86vw, 0.9rem) !important;
  font-style: normal !important;
  font-weight: 760 !important;
  text-overflow: ellipsis !important;
}

html[data-active-module="scoreEditor"] .score-editor-footer-status.is-complete {
  border-color: rgba(7, 100, 122, 0.2) !important;
  background:
    linear-gradient(180deg, rgba(230, 249, 252, 0.78), rgba(255, 255, 255, 0.34)),
    rgba(7, 100, 122, 0.06) !important;
}

html[data-active-module="scoreEditor"] .score-editor-footer-status.is-error {
  border-color: rgba(174, 54, 36, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 238, 232, 0.8), rgba(255, 255, 255, 0.34)),
    rgba(174, 54, 36, 0.06) !important;
}

html[data-active-module="scoreEditor"] .score-editor-footer-status.is-error strong,
html[data-active-module="scoreEditor"] .score-editor-footer-status.is-error em {
  color: rgba(174, 54, 36, 0.94) !important;
}

html[data-active-module="scoreEditor"] .score-page-readout {
  grid-area: page !important;
}

html[data-active-module="scoreEditor"] .score-page-actions {
  grid-area: actions !important;
  justify-self: end !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-selected::before,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-selected::after,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot:focus-visible::after {
  content: "" !important;
  display: block !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-selected::before {
  position: absolute !important;
  left: 50% !important;
  top: 9% !important;
  bottom: 9% !important;
  width: 2px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: rgba(7, 116, 139, 0.78) !important;
  box-shadow: 0 0 0 3px rgba(7, 116, 139, 0.1) !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-selected::after,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot:focus-visible::after {
  position: absolute !important;
  inset: 20% 16% !important;
  border: 2px solid rgba(7, 116, 139, 0.92) !important;
  border-radius: 999px !important;
  background: rgba(7, 116, 139, 0.075) !important;
  box-shadow: 0 0 0 4px rgba(7, 116, 139, 0.1), 0 0 1rem rgba(7, 116, 139, 0.16) !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-rest.is-selected::after {
  border-radius: 7px !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-note .score-vexflow-measure-hotspot,
html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-note .score-vexflow-note-hotspot,
html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-rest .score-vexflow-measure-hotspot,
html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-rest .score-vexflow-note-hotspot {
  cursor: copy !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-measure-hotspot::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 22% !important;
  bottom: 22% !important;
  width: 3px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: rgba(7, 134, 156, 0) !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-note .score-vexflow-measure-hotspot:hover::after,
html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-note .score-vexflow-measure-hotspot:focus-visible::after,
html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-note .score-vexflow-note-hotspot:hover::before,
html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-note .score-vexflow-note-hotspot:focus-visible::before {
  content: "" !important;
  display: block !important;
  background: rgba(7, 134, 156, 0.9) !important;
  box-shadow: 0 0 0 4px rgba(7, 134, 156, 0.11), 0 0 1rem rgba(7, 134, 156, 0.24) !important;
  opacity: 1 !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-rest .score-vexflow-measure-hotspot:hover::after,
html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-rest .score-vexflow-measure-hotspot:focus-visible::after,
html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-rest .score-vexflow-note-hotspot:hover::before,
html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-rest .score-vexflow-note-hotspot:focus-visible::before {
  content: "" !important;
  display: block !important;
  background: rgba(177, 111, 28, 0.92) !important;
  box-shadow: 0 0 0 4px rgba(177, 111, 28, 0.11), 0 0 1rem rgba(177, 111, 28, 0.24) !important;
  opacity: 1 !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-note .score-vexflow-note-hotspot:hover::before,
html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-note .score-vexflow-note-hotspot:focus-visible::before,
html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-rest .score-vexflow-note-hotspot:hover::before,
html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-rest .score-vexflow-note-hotspot:focus-visible::before {
  position: absolute !important;
  left: 50% !important;
  top: 8% !important;
  bottom: 8% !important;
  width: 3px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
}

@media (max-width: 920px) {
  html[data-active-module="scoreEditor"] .score-paper-footer {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "status"
      "page"
      "actions" !important;
  }

  html[data-active-module="scoreEditor"] .score-page-actions {
    justify-self: start !important;
  }

  html[data-active-module="scoreEditor"] .score-editor-footer-status {
    width: 100% !important;
  }
}


/* Library final spacing fix: separate filter groups. */
html[data-active-module="nav-library"] .library-filter-rail {
  display: flex !important;
  flex-direction: column !important;
  align-content: initial !important;
  justify-content: flex-start !important;
  gap: clamp(0.92rem, 1.35vw, 1.35rem) !important;
  padding: clamp(0.86rem, 1.18vw, 1.18rem) clamp(0.82rem, 1.1vw, 1.06rem) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

html[data-active-module="nav-library"] .library-filter-rail::-webkit-scrollbar {
  display: none !important;
}

html[data-active-module="nav-library"] .library-filter-section {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: clamp(0.42rem, 0.6vw, 0.6rem) !important;
  min-height: auto !important;
}

html[data-active-module="nav-library"] .library-filter-title {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.18 !important;
}

html[data-active-module="nav-library"] .library-filter-grid {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: clamp(0.36rem, 0.5vw, 0.5rem) !important;
  min-height: auto !important;
}

html[data-active-module="nav-library"] .library-filter-grid button {
  flex: 0 0 auto !important;
  height: clamp(1.82rem, 2.1vw, 2.18rem) !important;
  min-height: clamp(1.82rem, 2.1vw, 2.18rem) !important;
  max-height: none !important;
  padding: 0 clamp(0.72rem, 0.95vw, 0.96rem) !important;
  line-height: 1.1 !important;
}

@media (max-height: 760px) and (min-width: 901px) {
  html[data-active-module="nav-library"] .library-filter-rail {
    gap: 0.76rem !important;
    padding-block: 0.72rem !important;
  }

  html[data-active-module="nav-library"] .library-filter-section {
    gap: 0.34rem !important;
  }

  html[data-active-module="nav-library"] .library-filter-grid {
    gap: 0.28rem !important;
  }

  html[data-active-module="nav-library"] .library-filter-grid button {
    height: 1.64rem !important;
    min-height: 1.64rem !important;
    font-size: 0.78rem !important;
  }
}


/* Score editor library-matched button colors */
html[data-active-module="scoreEditor"] {
  --score-editor-gold: 232, 184, 111;
  --score-editor-gold-soft: 255, 220, 166;
  --score-editor-panel-black: 12, 13, 15;
  --score-editor-button-black: 26, 27, 27;
  --score-editor-line-soft: 255, 255, 255;
}

html[data-active-module="scoreEditor"] .score-compose-panel,
html[data-active-module="scoreEditor"] .score-editor-command-rail {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(var(--score-editor-gold-soft), 0.075), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(var(--score-editor-panel-black), 0.76) !important;
  border-color: rgba(var(--score-editor-line-soft), 0.105) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.052),
    0 1.1rem 3rem rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="scoreEditor"] .score-compose-section h3 {
  border-color: rgba(var(--score-editor-gold-soft), 0.26) !important;
  background:
    linear-gradient(180deg, rgba(var(--score-editor-gold), 0.13), rgba(255, 255, 255, 0.018)),
    rgba(var(--score-editor-panel-black), 0.78) !important;
  color: rgba(255, 232, 187, 0.98) !important;
}

html[data-active-module="scoreEditor"] .score-input-card,
html[data-active-module="scoreEditor"] .score-palette-button,
html[data-active-module="scoreEditor"] .score-segment-button,
html[data-active-module="scoreEditor"] .score-fill-measure-button,
html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button {
  border-color: rgba(var(--score-editor-line-soft), 0.09) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.018)),
    rgba(var(--score-editor-button-black), 0.78) !important;
  color: rgba(245, 245, 243, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0.55rem 1.35rem rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="scoreEditor"] .score-input-card span,
html[data-active-module="scoreEditor"] .score-palette-button span,
html[data-active-module="scoreEditor"] .score-segment-button,
html[data-active-module="scoreEditor"] .score-fill-measure-button,
html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button span {
  color: rgba(255, 244, 222, 0.94) !important;
}

html[data-active-module="scoreEditor"] .score-input-card small,
html[data-active-module="scoreEditor"] .score-palette-button small,
html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button small {
  color: rgba(245, 245, 243, 0.86) !important;
}

html[data-active-module="scoreEditor"] .score-input-card:hover,
html[data-active-module="scoreEditor"] .score-palette-button:hover,
html[data-active-module="scoreEditor"] .score-segment-button:hover,
html[data-active-module="scoreEditor"] .score-fill-measure-button:hover,
html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button:hover {
  border-color: rgba(var(--score-editor-gold-soft), 0.38) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.092), rgba(255, 255, 255, 0.026)),
    rgba(34, 32, 28, 0.84) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.13),
    0 0 1rem rgba(var(--score-editor-gold), 0.105) !important;
}

html[data-active-module="scoreEditor"] .score-input-card.is-active,
html[data-active-module="scoreEditor"] .score-palette-button.is-active,
html[data-active-module="scoreEditor"] .score-segment-button.is-active,
html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button.is-play {
  border-color: rgba(var(--score-editor-gold-soft), 0.56) !important;
  background:
    linear-gradient(100deg, rgba(118, 79, 39, 0.88), rgba(var(--score-editor-gold), 0.78) 48%, rgba(98, 68, 36, 0.84)),
    rgba(var(--score-editor-gold), 0.26) !important;
  color: rgba(255, 245, 225, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.3),
    0 0 1.1rem rgba(var(--score-editor-gold), 0.17) !important;
}

html[data-active-module="scoreEditor"] .score-input-card.is-active span,
html[data-active-module="scoreEditor"] .score-palette-button.is-active span,
html[data-active-module="scoreEditor"] .score-segment-button.is-active,
html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button.is-play span,
html[data-active-module="scoreEditor"] .score-editor-command-rail .score-commandbar-button.is-play small {
  color: rgba(255, 249, 236, 0.99) !important;
}

html[data-active-module="scoreEditor"] .score-command-rail-return {
  border-color: rgba(var(--score-editor-gold-soft), 0.28) !important;
  background:
    linear-gradient(180deg, rgba(var(--score-editor-gold), 0.13), rgba(255, 255, 255, 0.018)),
    rgba(var(--score-editor-button-black), 0.76) !important;
}


/* Library ultimate guard: keep the rebuilt frame two-column and non-overlapping. */
html[data-active-module="nav-library"] .content-grid[data-module="nav-library"] {
  padding: clamp(0.9rem, 1.62vw, 1.68rem) clamp(1.06rem, 1.75vw, 1.9rem) clamp(0.85rem, 1.45vw, 1.45rem) !important;
  align-content: stretch !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(12.6rem, 16.35%) minmax(0, 1fr) !important;
  grid-auto-flow: column !important;
  gap: clamp(1rem, 1.56vw, 1.75rem) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  color: rgba(248, 248, 244, 0.94) !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library::before {
  content: none !important;
  display: none !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > * {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: clamp(0.92rem, 1.35vw, 1.35rem) !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: clamp(0.86rem, 1.18vw, 1.18rem) clamp(0.82rem, 1.1vw, 1.06rem) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-rows: minmax(15rem, 0.485fr) minmax(0, 0.515fr) !important;
  gap: clamp(0.78rem, 1.35vw, 1.42rem) !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-filter-section {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: clamp(0.42rem, 0.6vw, 0.6rem) !important;
  min-height: auto !important;
}

html[data-active-module="nav-library"] .library-filter-grid {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: clamp(0.36rem, 0.5vw, 0.5rem) !important;
  min-height: auto !important;
}

html[data-active-module="nav-library"] .library-filter-grid button {
  flex: 0 0 auto !important;
  height: clamp(1.82rem, 2.1vw, 2.18rem) !important;
  min-height: clamp(1.82rem, 2.1vw, 2.18rem) !important;
  line-height: 1.1 !important;
}


/* Score editor full drag-drop surface */
html.is-score-editor-dragging[data-active-module="scoreEditor"] .score-vexflow-hit-layer {
  pointer-events: auto !important;
}

html.is-score-editor-dragging[data-active-module="scoreEditor"] .score-vexflow-measure-hotspot {
  pointer-events: auto !important;
  cursor: copy !important;
}


/* Score editor inline paper title editing */
html[data-active-module="scoreEditor"] .score-paper-title-input {
  appearance: none !important;
  display: block !important;
  width: min(100%, 42rem) !important;
  margin: 0 auto !important;
  padding: 0.08rem 0.45rem 0.16rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.42rem !important;
  background: transparent !important;
  color: #111 !important;
  font: inherit !important;
  font-size: clamp(1.85rem, 2.85vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: text !important;
}

html[data-active-module="scoreEditor"] .score-paper-title-input:hover {
  border-color: rgba(146, 100, 45, 0.16) !important;
  background: rgba(255, 246, 224, 0.2) !important;
}

html[data-active-module="scoreEditor"] .score-paper-title-input:focus {
  border-color: rgba(188, 133, 66, 0.38) !important;
  background: rgba(255, 248, 230, 0.52) !important;
  box-shadow: 0 0 0 3px rgba(232, 184, 111, 0.16) !important;
}


/* Library vertical balance: give collection cards enough room after spacing fixes. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  grid-template-rows: auto minmax(13.1rem, 1fr) auto minmax(4.7rem, 0.26fr) auto !important;
  gap: clamp(0.5rem, 0.82vw, 0.82rem) !important;
}

html[data-active-module="nav-library"] .library-results-head {
  min-height: clamp(2.1rem, 2.55vw, 2.65rem) !important;
}

html[data-active-module="nav-library"] .library-series-grid {
  gap: clamp(0.52rem, 0.82vw, 0.82rem) !important;
}

html[data-active-module="nav-library"] .library-series-card {
  padding: clamp(0.68rem, 0.96vw, 1.02rem) clamp(0.82rem, 1.18vw, 1.24rem) !important;
}

html[data-active-module="nav-library"] .library-table-head {
  min-height: clamp(2rem, 2.45vw, 2.55rem) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  min-height: clamp(4.15rem, 5.55vw, 5.35rem) !important;
}

html[data-active-module="nav-library"] .library-pagination {
  min-height: clamp(1.8rem, 2.35vw, 2.35rem) !important;
}


/* Score editor paper BPM stepper */
html[data-active-module="scoreEditor"] .score-paper-bpm-stepper {
  display: inline-grid !important;
  grid-template-columns: 1.7rem auto 1.7rem !important;
  align-items: center !important;
  gap: 0.28rem !important;
  padding: 0.22rem 0.34rem !important;
  border-color: rgba(146, 100, 45, 0.2) !important;
  background: rgba(255, 246, 224, 0.34) !important;
}

html[data-active-module="scoreEditor"] .score-paper-bpm-stepper strong {
  min-width: 3.9rem !important;
  color: rgba(31, 26, 19, 0.86) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.94rem) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .score-paper-bpm-stepper button {
  appearance: none !important;
  width: 1.7rem !important;
  height: 1.7rem !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(146, 100, 45, 0.28) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(232, 184, 111, 0.2)),
    rgba(255, 246, 224, 0.62) !important;
  color: rgba(98, 68, 36, 0.95) !important;
  font: inherit !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

html[data-active-module="scoreEditor"] .score-paper-bpm-stepper button:hover {
  border-color: rgba(146, 100, 45, 0.46) !important;
  background:
    linear-gradient(100deg, rgba(118, 79, 39, 0.18), rgba(232, 184, 111, 0.42), rgba(98, 68, 36, 0.18)),
    rgba(255, 246, 224, 0.76) !important;
}


/* Membership desktop-cutout rebuild: coordinates traced from /Users/apple/Desktop/会员中心.png. */
html[data-active-module="membership"] .content-grid[data-module="membership"] {
  align-content: center !important;
  justify-items: center !important;
  padding: clamp(1.5rem, 3.55vh, 2.75rem) clamp(4.2rem, 9.1vw, 9.8rem) clamp(1rem, 2.2vh, 1.45rem) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(30, 58, 84, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(3, 8, 14, 0.99), rgba(7, 15, 23, 0.985)),
    #050b13 !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-framework-shell {
  position: relative !important;
  display: block !important;
  width: min(100%, 87.44rem) !important;
  height: min(100%, 40.6rem) !important;
  max-height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="membership"] .membership-showcase-plan-grid {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  height: 23.44% !important;
  display: grid !important;
  grid-template-columns: 435fr 446fr 477fr !important;
  gap: 1.43% !important;
  min-height: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-card {
  position: relative !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  column-gap: clamp(0.65rem, 1.08vw, 1.15rem) !important;
  padding: clamp(1.05rem, 1.55vw, 1.46rem) clamp(1.38rem, 1.85vw, 1.65rem) clamp(1rem, 1.45vw, 1.38rem) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(124, 149, 174, 0.7) !important;
  background:
    linear-gradient(112deg, var(--membership-accent-soft), rgba(5, 14, 25, 0.9) 47%, rgba(3, 8, 15, 0.96)),
    #06111e !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 54px rgba(0, 0, 0, 0.24) !important;
  overflow: hidden !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-yearly {
  border-color: rgba(228, 133, 10, 0.94) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-lifetime {
  border-color: rgba(148, 132, 166, 0.8) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-lifetime::before {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 43% !important;
  content: "" !important;
  background:
    linear-gradient(90deg, rgba(5, 12, 21, 0.92), rgba(5, 12, 21, 0.25) 42%, rgba(5, 12, 21, 0.02)),
    url('/platform/assets/membership-violin-cut.png?v=membership-clean-sampled-20260606-2') right center / cover no-repeat !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
}

html[data-active-module="membership"] .membership-showcase-card::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.046), transparent 28%),
    radial-gradient(circle at 22% 20%, color-mix(in srgb, var(--membership-accent) 17%, transparent), transparent 48%) !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-head {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  align-content: start !important;
  gap: clamp(0.72rem, 1.05vw, 0.92rem) !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-badge {
  min-width: clamp(6.35rem, 7vw, 7.85rem) !important;
  min-height: clamp(1.72rem, 2vw, 1.98rem) !important;
  padding: 0 0.86rem !important;
  font-size: clamp(0.72rem, 0.78vw, 0.84rem) !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-note {
  position: absolute !important;
  top: clamp(1.14rem, 1.55vw, 1.42rem) !important;
  left: clamp(7.05rem, 8.4vw, 8.9rem) !important;
  color: rgba(246, 237, 224, 0.82) !important;
  font-size: clamp(0.66rem, 0.72vw, 0.78rem) !important;
  font-weight: 560 !important;
}

html[data-active-module="membership"] .membership-showcase-card h4 {
  font-size: clamp(1.42rem, 2vw, 1.78rem) !important;
  line-height: 1.1 !important;
  margin-top: 0.12rem !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-price {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  align-self: center !important;
  justify-self: end !important;
  min-width: clamp(6.1rem, 8vw, 8.1rem) !important;
  margin-top: 0.2rem !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-price strong {
  font-size: clamp(2.65rem, 4.05vw, 3.42rem) !important;
}

html[data-active-module="membership"] .membership-showcase-card > button {
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: clamp(7rem, 8.8vw, 9.1rem) !important;
  min-height: clamp(2.18rem, 2.5vw, 2.52rem) !important;
  margin-top: 0.05rem !important;
}

html[data-active-module="membership"] .membership-showcase-table-shell {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 26.23% !important;
  bottom: 0 !important;
  min-height: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(84, 105, 124, 0.68) !important;
  background:
    linear-gradient(180deg, rgba(20, 34, 49, 0.9), rgba(9, 18, 30, 0.9)),
    rgba(6, 13, 22, 0.86) !important;
  overflow: hidden !important;
}

html[data-active-module="membership"] .membership-showcase-table {
  display: grid !important;
  grid-template-rows: 58fr repeat(11, 45fr) !important;
  height: 100% !important;
  min-height: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row {
  display: grid !important;
  grid-template-columns: 427fr 316fr 316fr 340fr !important;
  min-height: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row > * {
  min-height: 0 !important;
  padding: 0 clamp(0.8rem, 1.25vw, 1.15rem) !important;
  border-right: 1px solid rgba(98, 119, 139, 0.5) !important;
  border-bottom: 1px solid rgba(98, 119, 139, 0.42) !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row strong {
  font-size: clamp(0.88rem, 0.96vw, 1.02rem) !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label strong {
  font-size: clamp(1.26rem, 1.8vw, 1.7rem) !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label small {
  font-size: clamp(0.78rem, 0.86vw, 0.92rem) !important;
}

@media (max-width: 900px) {
  html[data-active-module="membership"] .content-grid[data-module="membership"] {
    align-content: start !important;
    padding: 1rem !important;
    overflow: auto !important;
  }

  html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-framework-shell {
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    gap: 1rem !important;
  }

  html[data-active-module="membership"] .membership-showcase-plan-grid,
  html[data-active-module="membership"] .membership-showcase-table-shell {
    position: relative !important;
    inset: auto !important;
  }

  html[data-active-module="membership"] .membership-showcase-plan-grid {
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-active-module="membership"] .membership-showcase-card {
    min-height: 10rem !important;
  }

  html[data-active-module="membership"] .membership-showcase-table-shell {
    min-height: 31rem !important;
    overflow: auto !important;
  }

  html[data-active-module="membership"] .membership-showcase-table {
    min-width: 48rem !important;
  }
}


/* Library inset search title: shorten search from the left and place 合集 / 系列 in that space. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library {
  display: grid !important;
  grid-template-columns: minmax(12.6rem, 16.35%) minmax(0, 1fr) !important;
  gap: clamp(1rem, 1.56vw, 1.75rem) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library::before {
  content: none !important;
  display: none !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(0.92rem, 1.35vw, 1.35rem) !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: clamp(5.6rem, 7.3vw, 7.2rem) minmax(0, 1fr) auto !important;
  grid-template-rows: auto minmax(14.8rem, 1fr) auto minmax(4.7rem, 0.26fr) auto !important;
  column-gap: clamp(0.82rem, 1.12vw, 1.15rem) !important;
  row-gap: clamp(0.5rem, 0.82vw, 0.82rem) !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(1.02rem, 1.52vw, 1.65rem) clamp(1.25rem, 1.92vw, 2rem) clamp(0.86rem, 1.22vw, 1.24rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-results-head,
html[data-active-module="nav-library"] .library-series-section {
  display: contents !important;
}

html[data-active-module="nav-library"] .library-section-heading {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  min-height: clamp(2.1rem, 2.55vw, 2.65rem) !important;
  margin: 0 !important;
  padding: 0 !important;
}

html[data-active-module="nav-library"] .library-section-heading strong {
  overflow: visible !important;
  color: rgba(255, 250, 240, 0.98) !important;
  font-size: clamp(0.98rem, 1.18vw, 1.24rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-section-heading button {
  margin-left: 0.7rem !important;
}

html[data-active-module="nav-library"] .library-search-shell {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  width: 100% !important;
  min-width: 0 !important;
}

html[data-active-module="nav-library"] .library-results-head > span {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-series-grid {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-height: 0 !important;
  height: 100% !important;
}

html[data-active-module="nav-library"] .library-table-head {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

html[data-active-module="nav-library"] .library-track-table {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
}

html[data-active-module="nav-library"] .library-pagination {
  grid-column: 1 / -1 !important;
  grid-row: 5 !important;
}


/* Score editor pitch/status visibility: expose pitch editing and action feedback in the one-screen editor. */
html[data-active-module="scoreEditor"] .score-compose-note-input {
  grid-template-rows: minmax(0, 0.68fr) minmax(2.15rem, 0.32fr) !important;
  row-gap: clamp(0.18rem, 0.36vh, 0.3rem) !important;
}

html[data-active-module="scoreEditor"] .score-compose-note-input h3 {
  grid-row: 1 / -1 !important;
}

html[data-active-module="scoreEditor"] .score-compose-note-input .score-input-card-grid {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 0 !important;
}

html[data-active-module="scoreEditor"] .score-compose-note-input .score-pitch-field {
  display: grid !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(0.32rem, 0.5vw, 0.5rem) !important;
  min-width: 0 !important;
  min-height: 2.1rem !important;
  padding: 0.24rem 0.34rem !important;
  border: 1px solid rgba(var(--score-editor-gold-soft), 0.28) !important;
  border-radius: 5px !important;
  background:
    linear-gradient(180deg, rgba(var(--score-editor-gold), 0.095), rgba(255, 255, 255, 0.018)),
    rgba(var(--score-editor-button-black), 0.62) !important;
  overflow: hidden !important;
}

html[data-active-module="scoreEditor"] .score-compose-note-input .score-pitch-field span {
  color: rgba(var(--score-editor-cream), 0.66) !important;
  font-size: clamp(0.72rem, 1.18vh, 0.9rem) !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .score-compose-note-input .score-pitch-field select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 1.56rem !important;
  padding: 0 0.42rem !important;
  border: 1px solid rgba(255, 255, 255, 0.095) !important;
  border-radius: 4px !important;
  background: rgba(6, 8, 11, 0.55) !important;
  color: rgba(var(--score-editor-cream), 0.94) !important;
  font: inherit !important;
  font-size: clamp(0.76rem, 1.16vh, 0.94rem) !important;
  font-weight: 760 !important;
  outline: none !important;
}

html[data-active-module="scoreEditor"] .score-compose-note-input .score-pitch-field select:focus {
  border-color: rgba(var(--score-editor-gold), 0.52) !important;
  box-shadow: 0 0 0 2px rgba(var(--score-editor-gold), 0.14) !important;
}

html[data-active-module="scoreEditor"] .score-compose-note-input .score-pitch-field select:disabled {
  opacity: 0.48 !important;
}

html[data-active-module="scoreEditor"] .score-page-readout em {
  min-width: 0 !important;
  max-width: min(32rem, 44vw) !important;
  overflow: hidden !important;
  color: rgba(87, 65, 32, 0.72) !important;
  font-style: normal !important;
  font-weight: 760 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .score-page-readout em.is-error {
  color: rgba(156, 48, 36, 0.92) !important;
}


/* Membership clean sampled pass: no text-bearing image frames, colors/spacing traced from desktop reference. */
html[data-active-module="membership"] .membership-showcase-card {
  border: 1px solid rgba(92, 111, 130, 0.88) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background-image: none !important;
  background:
    linear-gradient(112deg, rgba(10, 36, 58, 0.92) 0%, rgba(4, 14, 25, 0.94) 45%, rgba(3, 8, 15, 0.98) 100%) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-monthly {
  background:
    linear-gradient(112deg, rgba(12, 41, 66, 0.96) 0%, rgba(5, 17, 30, 0.95) 47%, rgba(3, 8, 15, 0.98) 100%) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-yearly {
  border-color: rgba(189, 107, 7, 0.98) !important;
  background:
    linear-gradient(112deg, rgba(68, 42, 14, 0.95) 0%, rgba(20, 17, 14, 0.96) 44%, rgba(3, 8, 15, 0.98) 100%) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-lifetime {
  border-color: rgba(95, 82, 110, 0.95) !important;
  background:
    linear-gradient(112deg, rgba(45, 22, 66, 0.96) 0%, rgba(6, 16, 27, 0.96) 42%, rgba(3, 8, 15, 0.98) 100%) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-lifetime::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  width: 40% !important;
  background:
    linear-gradient(90deg, rgba(3, 8, 15, 0.98), rgba(3, 8, 15, 0.28) 38%, rgba(3, 8, 15, 0.08)),
    url('/platform/assets/membership-violin-cut.png?v=membership-clean-sampled-20260606-2') right 18% / 80% auto no-repeat !important;
  opacity: 0.55 !important;
}

html[data-active-module="membership"] .membership-showcase-card::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 38%),
    linear-gradient(90deg, rgba(255,255,255,0.035), transparent 28%) !important;
  pointer-events: none !important;
}

html[data-active-module="membership"] .membership-showcase-table-shell {
  border: 1px solid rgba(62, 78, 94, 0.94) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background:
    linear-gradient(180deg, rgba(19, 32, 46, 0.92), rgba(8, 17, 28, 0.94)) !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row > * {
  border-right: 1px solid rgba(70, 89, 108, 0.46) !important;
  border-bottom: 1px solid rgba(70, 89, 108, 0.42) !important;
  background: transparent !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row > *:last-child {
  border-right: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row:last-child > * {
  border-bottom: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row.is-head > * {
  background: rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row:nth-child(even) > * {
  background: rgba(255, 255, 255, 0.012) !important;
}


/* Library compact collection rail: move series upward and give the track list more room. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  grid-template-rows: auto clamp(7.7rem, 15.2vh, 9.15rem) auto minmax(9.6rem, 1fr) auto !important;
  row-gap: clamp(0.34rem, 0.58vw, 0.62rem) !important;
  padding-top: clamp(0.72rem, 1.08vw, 1.1rem) !important;
  padding-bottom: clamp(0.68rem, 0.96vw, 1rem) !important;
}

html[data-active-module="nav-library"] .library-series-grid {
  align-content: start !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: clamp(0.42rem, 0.66vw, 0.68rem) !important;
}

html[data-active-module="nav-library"] .library-series-card {
  align-content: start !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: clamp(0.62rem, 0.88vw, 0.86rem) clamp(0.82rem, 1.06vw, 1.06rem) !important;
  gap: clamp(0.22rem, 0.32vw, 0.34rem) !important;
}

html[data-active-module="nav-library"] .library-series-card strong {
  font-size: clamp(0.9rem, 1.02vw, 1.08rem) !important;
  line-height: 1.1 !important;
}

html[data-active-module="nav-library"] .library-series-card small {
  font-size: clamp(0.68rem, 0.76vw, 0.82rem) !important;
  line-height: 1.28 !important;
  white-space: normal !important;
}

html[data-active-module="nav-library"] .library-table-head {
  min-height: clamp(2rem, 2.42vw, 2.42rem) !important;
}

html[data-active-module="nav-library"] .library-track-table {
  align-content: stretch !important;
}

html[data-active-module="nav-library"] .library-track-row {
  min-height: clamp(4.15rem, 5.2vw, 5.05rem) !important;
}

html[data-active-module="nav-library"] .library-track-row.is-example {
  border-color: rgba(255, 214, 151, 0.13) !important;
  background:
    linear-gradient(90deg, rgba(189, 134, 67, 0.08), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.018) !important;
}

html[data-active-module="nav-library"] .library-track-row.is-example .library-track-title strong::before {
  content: "示例";
  display: inline-grid;
  place-items: center;
  margin-right: 0.46rem;
  padding: 0.12rem 0.36rem;
  border: 1px solid rgba(255, 218, 159, 0.28);
  border-radius: 999px;
  background: rgba(130, 82, 32, 0.26);
  color: rgba(255, 225, 172, 0.96);
  font-size: 0.62em;
  font-weight: 860;
  vertical-align: 0.08em;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples {
  min-height: clamp(2.8rem, 3.2vw, 3.35rem) !important;
  align-content: center !important;
  padding: 0.52rem 0.72rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples strong,
html[data-active-module="nav-library"] .library-empty-row.is-with-examples p {
  margin: 0 !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples p {
  font-size: clamp(0.72rem, 0.82vw, 0.86rem) !important;
}

/* Membership content pass: turn the reference recreation into a usable member center. */
html[data-active-module="membership"] .content-grid[data-module="membership"] {
  align-content: start !important;
  justify-items: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: clamp(0.9rem, 1.8vh, 1.45rem) clamp(1rem, 3.4vw, 3.8rem) clamp(1.2rem, 2.4vh, 2rem) !important;
  overflow: auto !important;
  scrollbar-width: none !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"]::-webkit-scrollbar {
  display: none !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-framework-shell,
html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-framework-shell.has-unlock-callout,
html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-framework-shell.has-checkout-notice {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  gap: clamp(0.82rem, 1.55vh, 1.18rem) !important;
  align-self: start !important;
  width: min(100%, 92rem) !important;
  max-width: 92rem !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html[data-active-module="membership"] .membership-showcase-alerts,
html[data-active-module="membership"] .membership-overview-panel,
html[data-active-module="membership"] .membership-showcase-plan-grid,
html[data-active-module="membership"] .membership-showcase-detail-grid,
html[data-active-module="membership"] .membership-showcase-table-shell {
  position: relative !important;
  inset: auto !important;
}

html[data-active-module="membership"] .membership-overview-panel {
  display: grid !important;
  grid-template-columns: minmax(24rem, 1.05fr) minmax(28rem, 1.25fr) !important;
  gap: clamp(0.8rem, 1.25vw, 1.15rem) !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-current-status-card,
html[data-active-module="membership"] .membership-benefit-rail article,
html[data-active-module="membership"] .membership-usage-summary,
html[data-active-module="membership"] .membership-side-stack .membership-order-status {
  border: 1px solid rgba(95, 120, 145, 0.62) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(17, 43, 70, 0.82), rgba(6, 14, 24, 0.92) 56%, rgba(4, 9, 16, 0.96)),
    rgba(5, 12, 21, 0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 48px rgba(0, 0, 0, 0.2) !important;
}

html[data-active-module="membership"] .membership-current-status-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.8fr) !important;
  gap: clamp(0.8rem, 1.2vw, 1rem) !important;
  align-items: stretch !important;
  min-height: clamp(7.2rem, 12vh, 8.6rem) !important;
  padding: clamp(0.92rem, 1.35vw, 1.22rem) !important;
}

html[data-active-module="membership"] .membership-current-copy {
  display: grid !important;
  align-content: center !important;
  gap: 0.35rem !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-current-copy span,
html[data-active-module="membership"] .membership-side-head span,
html[data-active-module="membership"] .membership-benefit-rail article > span {
  color: rgba(255, 215, 129, 0.92) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.88rem) !important;
  font-weight: 790 !important;
  line-height: 1 !important;
}

html[data-active-module="membership"] .membership-current-copy strong {
  color: rgba(250, 252, 255, 0.98) !important;
  font-size: clamp(1.45rem, 2.2vw, 2.15rem) !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
}

html[data-active-module="membership"] .membership-current-copy p,
html[data-active-module="membership"] .membership-benefit-rail article p,
html[data-active-module="membership"] .membership-usage-grid article span,
html[data-active-module="membership"] .membership-side-stack .membership-order-head p {
  margin: 0 !important;
  overflow-wrap: anywhere !important;
  color: rgba(226, 236, 243, 0.68) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.95rem) !important;
  line-height: 1.45 !important;
}

html[data-active-module="membership"] .membership-current-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.48rem !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-current-metrics > span,
html[data-active-module="membership"] .membership-usage-grid article {
  display: grid !important;
  align-content: center !important;
  gap: 0.18rem !important;
  min-width: 0 !important;
  padding: 0.58rem 0.62rem !important;
  border: 1px solid rgba(255, 255, 255, 0.085) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.032) !important;
}

html[data-active-module="membership"] .membership-current-metrics small,
html[data-active-module="membership"] .membership-usage-grid small {
  overflow: hidden !important;
  color: rgba(226, 236, 243, 0.55) !important;
  font-size: clamp(0.66rem, 0.74vw, 0.8rem) !important;
  font-weight: 680 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-current-metrics strong,
html[data-active-module="membership"] .membership-usage-grid strong {
  overflow: hidden !important;
  color: rgba(255, 232, 182, 0.98) !important;
  font-size: clamp(0.84rem, 0.98vw, 1.08rem) !important;
  font-weight: 820 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-benefit-rail {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.58rem, 0.9vw, 0.8rem) !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-benefit-rail article {
  display: grid !important;
  gap: 0.28rem !important;
  min-height: clamp(3.3rem, 5.8vh, 4rem) !important;
  min-width: 0 !important;
  padding: clamp(0.66rem, 0.95vw, 0.9rem) !important;
}

html[data-active-module="membership"] .membership-benefit-rail article strong,
html[data-active-module="membership"] .membership-side-head strong {
  overflow: hidden !important;
  color: rgba(250, 252, 255, 0.94) !important;
  font-size: clamp(0.9rem, 1.05vw, 1.08rem) !important;
  font-weight: 790 !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-showcase-plan-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(0.82rem, 1.32vw, 1.12rem) !important;
  height: auto !important;
  min-height: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-card {
  min-height: clamp(11.2rem, 18vh, 13.8rem) !important;
  padding: clamp(0.9rem, 1.35vw, 1.2rem) clamp(1rem, 1.55vw, 1.35rem) !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-head {
  gap: clamp(0.36rem, 0.65vw, 0.58rem) !important;
}

html[data-active-module="membership"] .membership-showcase-card .membership-plan-note {
  position: static !important;
  top: auto !important;
  left: auto !important;
  align-self: center !important;
}

html[data-active-module="membership"] .membership-plan-description {
  display: -webkit-box !important;
  max-width: min(24rem, 100%) !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(226, 236, 243, 0.68) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.9rem) !important;
  line-height: 1.38 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html[data-active-module="membership"] .membership-plan-highlights {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.32rem !important;
  max-width: min(26rem, 100%) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html[data-active-module="membership"] .membership-plan-highlights li {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  min-height: 1.35rem !important;
  padding: 0.16rem 0.46rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  color: rgba(236, 242, 247, 0.72) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  font-size: clamp(0.62rem, 0.72vw, 0.78rem) !important;
  font-weight: 620 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-showcase-detail-grid {
  display: grid !important;
  grid-template-columns: minmax(40rem, 1.45fr) minmax(18.5rem, 0.55fr) !important;
  gap: clamp(0.82rem, 1.35vw, 1.15rem) !important;
  align-items: stretch !important;
  min-height: clamp(24rem, 46vh, 34rem) !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-showcase-table-shell {
  display: grid !important;
  min-height: clamp(24rem, 46vh, 34rem) !important;
  overflow: hidden !important;
}

html[data-active-module="membership"] .membership-showcase-table {
  grid-auto-rows: minmax(2rem, 1fr) !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row {
  grid-template-columns: minmax(14.5rem, 1.18fr) repeat(3, minmax(5.2rem, 1fr)) !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label {
  display: grid !important;
  align-content: center !important;
  gap: 0.18rem !important;
}

html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label small {
  max-width: 100% !important;
}

html[data-active-module="membership"] .membership-side-stack {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(0.66rem, 1vw, 0.9rem) !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-usage-summary {
  display: grid !important;
  gap: 0.68rem !important;
  min-width: 0 !important;
  padding: clamp(0.78rem, 1.05vw, 1rem) !important;
}

html[data-active-module="membership"] .membership-side-head {
  display: grid !important;
  gap: 0.24rem !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-usage-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
}

html[data-active-module="membership"] .membership-side-stack .membership-order-status {
  min-height: 0 !important;
  padding: clamp(0.78rem, 1.05vw, 1rem) !important;
  overflow: hidden !important;
}

html[data-active-module="membership"] .membership-side-stack .membership-order-head {
  display: grid !important;
  gap: 0.65rem !important;
}

html[data-active-module="membership"] .membership-side-stack .membership-order-actions {
  justify-content: start !important;
}

html[data-active-module="membership"] .membership-side-stack .membership-order-flow,
html[data-active-module="membership"] .membership-side-stack .membership-order-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html[data-active-module="membership"] .membership-side-stack .membership-order-flow article,
html[data-active-module="membership"] .membership-side-stack .membership-order-meta span {
  border-radius: 8px !important;
}

@media (max-width: 1180px) {
  html[data-active-module="membership"] .membership-overview-panel,
  html[data-active-module="membership"] .membership-showcase-detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-active-module="membership"] .membership-side-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
  }

  html[data-active-module="membership"] .membership-showcase-table-shell {
    min-height: 28rem !important;
  }
}

@media (max-width: 900px) {
  html[data-active-module="membership"] .content-grid[data-module="membership"] {
    padding: 0.9rem !important;
  }

  html[data-active-module="membership"] .membership-current-status-card,
  html[data-active-module="membership"] .membership-side-stack {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-active-module="membership"] .membership-current-metrics,
  html[data-active-module="membership"] .membership-benefit-rail,
  html[data-active-module="membership"] .membership-usage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-active-module="membership"] .membership-showcase-plan-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-active-module="membership"] .membership-showcase-card {
    min-height: 12rem !important;
  }

  html[data-active-module="membership"] .membership-showcase-table-shell {
    min-height: 30rem !important;
    overflow: auto !important;
  }

  html[data-active-module="membership"] .membership-showcase-table {
    min-width: 48rem !important;
  }
}

@media (max-width: 620px) {
  html[data-active-module="membership"] .membership-current-metrics,
  html[data-active-module="membership"] .membership-benefit-rail,
  html[data-active-module="membership"] .membership-usage-grid,
  html[data-active-module="membership"] .membership-side-stack .membership-order-flow,
  html[data-active-module="membership"] .membership-side-stack .membership-order-meta {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Membership scroll handoff: keep long member-center content reachable on shorter screens. */
html[data-active-module="membership"] .main-stage {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"] {
  height: auto !important;
  min-height: calc(var(--app-height, 100dvh) - clamp(4.2rem, 5.2vw, 5.35rem)) !important;
  overflow: visible !important;
}

@media (min-width: 1181px) {
  html[data-active-module="membership"] .main-stage {
    overflow: hidden !important;
  }

  html[data-active-module="membership"] .content-grid[data-module="membership"] {
    height: calc(var(--app-height, 100dvh) - clamp(4.2rem, 5.2vw, 5.35rem)) !important;
    min-height: 0 !important;
    padding: clamp(0.58rem, 1.1vh, 0.88rem) clamp(1.6rem, 3.2vw, 3rem) clamp(0.7rem, 1.25vh, 0.98rem) !important;
    overflow: hidden !important;
  }

  html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-framework-shell,
  html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-framework-shell.has-unlock-callout,
  html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-framework-shell.has-checkout-notice {
    grid-template-rows: clamp(5.85rem, 13.2vh, 7.05rem) clamp(8.4rem, 19.6vh, 9.65rem) minmax(0, 1fr) !important;
    gap: clamp(0.52rem, 1.02vh, 0.72rem) !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  html[data-active-module="membership"] .membership-overview-panel {
    grid-template-columns: minmax(22rem, 0.96fr) minmax(28rem, 1.24fr) !important;
    gap: clamp(0.56rem, 0.9vw, 0.82rem) !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  html[data-active-module="membership"] .membership-current-status-card {
    grid-template-columns: minmax(0, 1fr) minmax(12.8rem, 0.58fr) !important;
    gap: 0.56rem !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: clamp(0.62rem, 0.92vw, 0.82rem) !important;
  }

  html[data-active-module="membership"] .membership-current-copy {
    gap: 0.24rem !important;
  }

  html[data-active-module="membership"] .membership-current-copy strong {
    font-size: clamp(1.22rem, 1.7vw, 1.7rem) !important;
  }

  html[data-active-module="membership"] .membership-current-copy p,
  html[data-active-module="membership"] .membership-benefit-rail article p {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: clamp(0.7rem, 0.78vw, 0.84rem) !important;
    line-height: 1.32 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html[data-active-module="membership"] .membership-benefit-rail article p {
    -webkit-line-clamp: 1 !important;
  }

  html[data-active-module="membership"] .membership-current-metrics {
    gap: 0.32rem !important;
  }

  html[data-active-module="membership"] .membership-current-metrics > span,
  html[data-active-module="membership"] .membership-usage-grid article {
    padding: 0.38rem 0.42rem !important;
  }

  html[data-active-module="membership"] .membership-benefit-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    height: 100% !important;
  }

  html[data-active-module="membership"] .membership-benefit-rail article {
    align-content: center !important;
    min-height: 0 !important;
    padding: 0.46rem 0.58rem !important;
    gap: 0.16rem !important;
  }

  html[data-active-module="membership"] .membership-benefit-rail article p {
    display: none !important;
  }

  html[data-active-module="membership"] .membership-benefit-rail article strong,
  html[data-active-module="membership"] .membership-side-head strong {
    font-size: clamp(0.78rem, 0.9vw, 0.98rem) !important;
  }

  html[data-active-module="membership"] .membership-showcase-card {
    min-height: 0 !important;
    height: 100% !important;
    padding: clamp(0.66rem, 0.95vw, 0.88rem) clamp(0.8rem, 1.22vw, 1.08rem) !important;
  }

  html[data-active-module="membership"] .membership-showcase-card .membership-plan-head {
    gap: 0.28rem !important;
  }

  html[data-active-module="membership"] .membership-showcase-card h4 {
    font-size: clamp(1.05rem, 1.5vw, 1.38rem) !important;
  }

  html[data-active-module="membership"] .membership-showcase-card .membership-plan-badge {
    min-height: clamp(1.45rem, 1.75vw, 1.72rem) !important;
    min-width: clamp(5.8rem, 6.7vw, 7.1rem) !important;
    font-size: clamp(0.66rem, 0.74vw, 0.8rem) !important;
  }

  html[data-active-module="membership"] .membership-showcase-card .membership-plan-note {
    font-size: clamp(0.62rem, 0.7vw, 0.78rem) !important;
  }

  html[data-active-module="membership"] .membership-plan-description {
    font-size: clamp(0.66rem, 0.76vw, 0.84rem) !important;
    line-height: 1.28 !important;
    -webkit-line-clamp: 2 !important;
  }

  html[data-active-module="membership"] .membership-plan-highlights {
    gap: 0.22rem !important;
  }

  html[data-active-module="membership"] .membership-plan-highlights li {
    min-height: 1.12rem !important;
    padding: 0.12rem 0.36rem !important;
    font-size: clamp(0.56rem, 0.66vw, 0.7rem) !important;
  }

  html[data-active-module="membership"] .membership-plan-highlights li:nth-child(n + 3) {
    display: none !important;
  }

  html[data-active-module="membership"] .membership-showcase-card .membership-price {
    min-width: clamp(5rem, 7vw, 7rem) !important;
  }

  html[data-active-module="membership"] .membership-showcase-card .membership-price strong {
    font-size: clamp(2.05rem, 3.1vw, 2.85rem) !important;
  }

  html[data-active-module="membership"] .membership-showcase-card > button {
    min-height: clamp(2rem, 2.28vw, 2.35rem) !important;
    width: clamp(6.6rem, 7.8vw, 8.2rem) !important;
  }

  html[data-active-module="membership"] .membership-showcase-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(16.5rem, 0.42fr) !important;
    gap: clamp(0.58rem, 0.95vw, 0.82rem) !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  html[data-active-module="membership"] .membership-showcase-table-shell {
    min-height: 0 !important;
    height: 100% !important;
  }

  html[data-active-module="membership"] .membership-showcase-table {
    grid-auto-rows: minmax(0, 1fr) !important;
  }

  html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row {
    grid-template-columns: minmax(13.2rem, 1.08fr) repeat(3, minmax(4.6rem, 1fr)) !important;
  }

  html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row > * {
    padding: 0.16rem clamp(0.48rem, 0.76vw, 0.72rem) !important;
    font-size: clamp(0.68rem, 0.78vw, 0.86rem) !important;
  }

  html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row strong {
    font-size: clamp(0.7rem, 0.82vw, 0.9rem) !important;
  }

  html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label {
    gap: 0.08rem !important;
  }

  html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label strong {
    font-size: clamp(0.95rem, 1.25vw, 1.25rem) !important;
  }

  html[data-active-module="membership"] .membership-showcase-table .membership-comparison-head-label small {
    font-size: clamp(0.58rem, 0.7vw, 0.76rem) !important;
  }

  html[data-active-module="membership"] .membership-showcase-table .membership-check {
    font-size: clamp(0.95rem, 1.15vw, 1.16rem) !important;
  }

  html[data-active-module="membership"] .membership-showcase-table .membership-cross,
  html[data-active-module="membership"] .membership-showcase-table .membership-level {
    font-size: clamp(0.7rem, 0.82vw, 0.9rem) !important;
  }

  html[data-active-module="membership"] .membership-side-stack {
    height: 100% !important;
    overflow: hidden !important;
  }

  html[data-active-module="membership"] .membership-usage-summary,
  html[data-active-module="membership"] .membership-side-stack .membership-order-status {
    padding: 0.52rem !important;
    gap: 0.42rem !important;
  }

  html[data-active-module="membership"] .membership-side-head {
    gap: 0.12rem !important;
  }

  html[data-active-module="membership"] .membership-usage-grid {
    gap: 0.34rem !important;
  }

  html[data-active-module="membership"] .membership-side-stack .membership-order-head {
    gap: 0.42rem !important;
  }

  html[data-active-module="membership"] .membership-side-stack .membership-order-head h3 {
    font-size: clamp(0.86rem, 1vw, 1rem) !important;
  }

  html[data-active-module="membership"] .membership-side-stack .membership-order-head p,
  html[data-active-module="membership"] .membership-side-stack .membership-order-flow small {
    display: none !important;
  }

  html[data-active-module="membership"] .membership-side-stack .membership-order-actions {
    gap: 0.34rem !important;
  }

  html[data-active-module="membership"] .membership-side-stack .membership-order-actions .glass-button {
    min-height: 1.85rem !important;
    padding-inline: 0.58rem !important;
    font-size: 0.7rem !important;
  }

  html[data-active-module="membership"] .membership-side-stack .membership-order-flow {
    gap: 0.34rem !important;
  }

  html[data-active-module="membership"] .membership-side-stack .membership-order-flow article {
    padding: 0.38rem !important;
    gap: 0.32rem !important;
  }

  html[data-active-module="membership"] .membership-side-stack .membership-order-flow article > span {
    width: 1.35rem !important;
    height: 1.35rem !important;
    font-size: 0.56rem !important;
  }

  html[data-active-module="membership"] .membership-side-stack .membership-order-flow strong {
    font-size: 0.68rem !important;
  }

  html[data-active-module="membership"] .membership-side-stack .membership-order-meta {
    display: none !important;
  }
}


/* Library permission column alignment: center table headings and their cells. */
html[data-active-module="nav-library"] .library-table-head span:nth-child(n + 3) {
  justify-self: center !important;
  text-align: center !important;
}

html[data-active-module="nav-library"] .library-row-difficulty,
html[data-active-module="nav-library"] .library-row-free,
html[data-active-module="nav-library"] .library-row-favorite,
html[data-active-module="nav-library"] .library-row-play {
  justify-self: center !important;
}

html[data-active-module="nav-library"] .library-row-difficulty,
html[data-active-module="nav-library"] .library-row-free {
  min-width: clamp(3.9rem, 4.55vw, 4.7rem) !important;
  display: inline-grid !important;
  place-items: center !important;
  text-align: center !important;
}

html[data-active-module="nav-library"] .library-row-free {
  letter-spacing: 0 !important;
}

html[data-active-module="nav-library"] .library-row-play {
  width: min(100%, clamp(8.6rem, 10.5vw, 10.5rem)) !important;
}


/* Library no-crop list guard: keep every page's final song fully above pagination. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  grid-template-rows: auto clamp(7.4rem, 14.4vh, 8.8rem) auto minmax(0, 1fr) clamp(2.25rem, 3.2vw, 2.8rem) !important;
  row-gap: clamp(0.48rem, 0.78vw, 0.82rem) !important;
}

html[data-active-module="nav-library"] .library-track-table {
  align-content: start !important;
  overflow: hidden !important;
  padding-bottom: clamp(0.3rem, 0.62vw, 0.58rem) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  min-height: clamp(4.05rem, 5.05vw, 4.82rem) !important;
}

html[data-active-module="nav-library"] .library-pagination {
  align-self: end !important;
  padding-top: clamp(0.2rem, 0.42vw, 0.42rem) !important;
}


/* Library no-crop guard v2: reserve enough real height for five full rows. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  grid-template-rows: auto clamp(5.45rem, 10.8vh, 6.6rem) auto minmax(17.9rem, 1fr) clamp(2.25rem, 3.05vw, 2.7rem) !important;
  row-gap: clamp(0.42rem, 0.62vw, 0.68rem) !important;
}

html[data-active-module="nav-library"] .library-series-card {
  padding: clamp(0.46rem, 0.68vw, 0.66rem) clamp(0.78rem, 1vw, 1rem) !important;
}

html[data-active-module="nav-library"] .library-series-card strong {
  font-size: clamp(0.82rem, 0.95vw, 1rem) !important;
}

html[data-active-module="nav-library"] .library-series-card small {
  font-size: clamp(0.64rem, 0.72vw, 0.78rem) !important;
  line-height: 1.18 !important;
}

html[data-active-module="nav-library"] .library-track-table {
  min-height: 0 !important;
  height: 100% !important;
  padding-bottom: clamp(0.42rem, 0.68vw, 0.72rem) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  min-height: clamp(3.55rem, 4.45vw, 3.95rem) !important;
}

html[data-active-module="nav-library"] .library-track-row img {
  width: clamp(2.85rem, 3.5vw, 3.25rem) !important;
  height: clamp(2.85rem, 3.5vw, 3.25rem) !important;
}

html[data-active-module="nav-library"] .library-row-play {
  min-height: clamp(2.18rem, 2.7vw, 2.5rem) !important;
}


html[data-active-module="nav-library"] .library-series-card {
  width: var(--library-series-card-width) !important;
  min-width: 0 !important;
  height: var(--library-series-card-height) !important;
  min-height: 0 !important;
}

@media (max-width: 980px) {
  html[data-active-module="nav-library"] .library-series-grid {
    --library-series-card-width: calc((100% - var(--library-series-gap)) / 2);
  }
}

@media (max-width: 640px) {
  html[data-active-module="nav-library"] .library-series-grid {
    --library-series-card-width: 100%;
  }
}

/* Membership exact crop rebuild: four cropped assets from /Users/apple/Desktop/会员中心.png. */
html[data-active-module="membership"],
html[data-active-module="membership"] body {
  background: #040a10 !important;
}

html[data-active-module="membership"] .app-shell {
  padding: 0 !important;
  background:
    radial-gradient(circle at 50% 100%, rgba(35, 50, 66, 0.2), transparent 50%),
    radial-gradient(circle at 50% -10%, rgba(20, 54, 80, 0.12), transparent 36%),
    #040a10 !important;
}

html[data-active-module="membership"] .main-stage {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: 100dvw !important;
  max-width: none !important;
  height: var(--app-height, 100dvh) !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(2, 6, 11, 0.98), rgba(7, 14, 22, 0.98)),
    #040a10 !important;
  box-shadow: none !important;
}

html[data-active-module="membership"] .topbar {
  display: flex !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"] {
  display: grid !important;
  align-items: start !important;
  justify-items: center !important;
  width: 100dvw !important;
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(0.12rem, 0.8vh, 0.45rem) 0 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 100%, rgba(27, 43, 58, 0.24), transparent 48%),
    radial-gradient(circle at 52% -16%, rgba(24, 64, 94, 0.12), transparent 36%),
    linear-gradient(180deg, #03080d 0%, #07111c 100%) !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-reference-page {
  position: relative !important;
  display: grid !important;
  align-items: start !important;
  justify-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="membership"] .membership-reference-canvas {
  position: relative !important;
  --membership-visible-stage-height: calc(var(--app-height, 100dvh) - clamp(4.2rem, 5.2vw, 5.35rem) + clamp(3rem, 7.2vh, 5.8rem));
  width: min(100dvw, calc(var(--membership-visible-stage-height) * 1672 / 941)) !important;
  height: min(var(--membership-visible-stage-height), calc(100dvw * 941 / 1672)) !important;
  aspect-ratio: 1672 / 941 !important;
  transform: translateY(clamp(-3.2rem, -4.8vh, -1.7rem)) !important;
  overflow: hidden !important;
  background: transparent !important;
}

html[data-active-module="membership"] .membership-reference-piece {
  position: absolute !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
}

html[data-active-module="membership"] .membership-reference-card {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}

html[data-active-module="membership"] .membership-reference-card:focus-visible {
  outline: 2px solid rgba(255, 224, 156, 0.72) !important;
  outline-offset: 3px !important;
}

html[data-active-module="membership"] .membership-reference-card.is-monthly {
  left: 9.33% !important;
  top: 11.58% !important;
  width: 26.2% !important;
  height: 18.92% !important;
  background-image: url("/platform/assets/membership-target-monthly.png?v=membership-reference-crops-1") !important;
}

html[data-active-module="membership"] .membership-reference-card.is-yearly {
  left: 36.66% !important;
  top: 11.58% !important;
  width: 26.79% !important;
  height: 18.92% !important;
  background-image: url("/platform/assets/membership-target-yearly.png?v=membership-target-yearly-priority-1") !important;
}

html[data-active-module="membership"] .membership-reference-card.is-lifetime {
  left: 64.41% !important;
  top: 11.58% !important;
  width: 28.71% !important;
  height: 18.92% !important;
  background-image: url("/platform/assets/membership-target-lifetime.png?v=membership-reference-crops-1") !important;
}

html[data-active-module="membership"] .membership-reference-table {
  left: 9.33% !important;
  top: 32.52% !important;
  width: 83.79% !important;
  height: 59.09% !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  border: 1px solid rgba(80, 104, 124, 0.62) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(18, 33, 48, 0.94), rgba(8, 18, 31, 0.96)),
    rgba(6, 14, 24, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 48px rgba(0, 0, 0, 0.18) !important;
  pointer-events: none !important;
}

html[data-active-module="membership"] .membership-reference-grid {
  display: grid !important;
  grid-template-rows: 1.18fr repeat(11, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  color: rgba(239, 244, 248, 0.92) !important;
  font-family: var(--zh-sans-font) !important;
}

html[data-active-module="membership"] .membership-reference-row {
  display: grid !important;
  grid-template-columns: 31.1% 23.7% 23.7% 21.5% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html[data-active-module="membership"] .membership-reference-row > * {
  display: grid !important;
  align-items: center !important;
  justify-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 clamp(0.68rem, 1.38vw, 1.15rem) !important;
  overflow: hidden !important;
  border-right: 1px solid rgba(88, 112, 132, 0.44) !important;
  border-bottom: 1px solid rgba(88, 112, 132, 0.33) !important;
  box-sizing: border-box !important;
  font-size: clamp(0.78rem, 1.12vw, 1.14rem) !important;
  font-weight: 760 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-shadow: 0 1px 7px rgba(0, 0, 0, 0.42) !important;
}

html[data-active-module="membership"] .membership-reference-row > *:first-child {
  justify-items: start !important;
  text-align: left !important;
}

html[data-active-module="membership"] .membership-reference-row > *:last-child {
  border-right: 0 !important;
}

html[data-active-module="membership"] .membership-reference-row:last-child > * {
  border-bottom: 0 !important;
}

html[data-active-module="membership"] .membership-reference-row.is-head > * {
  color: rgba(255, 216, 127, 0.98) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0)) !important;
  font-size: clamp(0.88rem, 1.26vw, 1.32rem) !important;
  font-weight: 850 !important;
}

html[data-active-module="membership"] .membership-reference-title {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: clamp(0.72rem, 1.35vw, 1.35rem) !important;
  height: 100% !important;
}

html[data-active-module="membership"] .membership-reference-title strong {
  flex: 0 0 auto !important;
  color: rgba(255, 216, 127, 0.99) !important;
  font-size: clamp(1rem, 1.66vw, 1.65rem) !important;
  font-weight: 880 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-title small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(218, 226, 232, 0.74) !important;
  font-size: clamp(0.66rem, 0.95vw, 0.98rem) !important;
  font-weight: 640 !important;
  line-height: 1.08 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-feature {
  color: rgba(245, 248, 251, 0.94) !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-row > div > span {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-reference-table .membership-check,
html[data-active-module="membership"] .membership-reference-table .membership-cross,
html[data-active-module="membership"] .membership-reference-table .membership-level {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  gap: 0.14em !important;
  font-style: normal !important;
  line-height: 1 !important;
}

html[data-active-module="membership"] .membership-reference-table .membership-check {
  color: rgba(255, 216, 127, 0.95) !important;
  width: clamp(0.42rem, 0.62vw, 0.64rem) !important;
  height: clamp(0.72rem, 0.98vw, 0.96rem) !important;
  border-right: clamp(1.6px, 0.14vw, 2.2px) solid rgba(255, 216, 127, 0.96) !important;
  border-bottom: clamp(1.6px, 0.14vw, 2.2px) solid rgba(255, 216, 127, 0.96) !important;
  color: transparent !important;
  font-size: 0 !important;
  transform: translateY(-0.06rem) rotate(40deg) !important;
  transform-origin: center !important;
}

html[data-active-module="membership"] .membership-reference-table .membership-cross {
  color: rgba(215, 224, 230, 0.62) !important;
  font-size: clamp(0.82rem, 1.06vw, 1.12rem) !important;
  font-weight: 420 !important;
}

html[data-active-module="membership"] .membership-reference-table .membership-level {
  color: rgba(226, 232, 237, 0.9) !important;
  font-size: clamp(0.78rem, 1.08vw, 1.12rem) !important;
  font-weight: 780 !important;
}

html[data-active-module="membership"] .membership-reference-table .membership-level-number {
  color: rgba(255, 216, 127, 0.99) !important;
  font-size: 1.08em !important;
  font-weight: 900 !important;
}

html[data-active-module="membership"] .membership-reference-table .membership-level-unit {
  color: rgba(228, 235, 240, 0.86) !important;
  font-size: 0.94em !important;
  font-weight: 760 !important;
}
/* Library series fixed sizing: card dimensions stay consistent no matter how many collections are visible. */
html[data-active-module="nav-library"] .library-series-grid {
  --library-series-gap: clamp(0.42rem, 0.66vw, 0.68rem);
  --library-series-card-width: calc((100% - var(--library-series-gap) - var(--library-series-gap)) / 3);
  --library-series-card-height: clamp(2.72rem, 5.05vh, 3.12rem);
  display: grid !important;
  grid-template-columns: repeat(auto-fill, var(--library-series-card-width)) !important;
  grid-auto-rows: var(--library-series-card-height) !important;
  align-content: start !important;
  justify-content: start !important;
  gap: var(--library-series-gap) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-series-card {
  width: 100% !important;
  min-width: 0 !important;
  height: var(--library-series-card-height) !important;
  min-height: 0 !important;
}

@media (max-width: 980px) {
  html[data-active-module="nav-library"] .library-series-grid {
    --library-series-card-width: calc((100% - var(--library-series-gap)) / 2);
  }
}

@media (max-width: 640px) {
  html[data-active-module="nav-library"] .library-series-grid {
    --library-series-card-width: 100%;
  }
}

/* Library series square row: keep collection images as one 90px square row. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  grid-template-rows: auto 5.625rem auto minmax(17.9rem, 1fr) clamp(2.25rem, 3.05vw, 2.7rem) !important;
}

html[data-active-module="nav-library"] .library-series-grid {
  --library-series-size: 5.625rem;
  --library-series-gap: clamp(0.42rem, 0.66vw, 0.68rem);
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--library-series-size) !important;
  grid-template-columns: none !important;
  grid-template-rows: var(--library-series-size) !important;
  grid-auto-rows: var(--library-series-size) !important;
  align-content: start !important;
  justify-content: start !important;
  gap: var(--library-series-gap) !important;
  height: var(--library-series-size) !important;
  min-height: var(--library-series-size) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-series-card {
  width: var(--library-series-size) !important;
  height: var(--library-series-size) !important;
  min-width: var(--library-series-size) !important;
  min-height: var(--library-series-size) !important;
  aspect-ratio: 1 / 1 !important;
  align-content: end !important;
  padding: 0.42rem !important;
  border-radius: 0.48rem !important;
  gap: 0 !important;
}

html[data-active-module="nav-library"] .library-series-card strong {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  font-size: 0.68rem !important;
  line-height: 1.08 !important;
  text-shadow: 0 0.32rem 0.72rem rgba(0, 0, 0, 0.72) !important;
}

html[data-active-module="nav-library"] .library-series-card small {
  display: none !important;
}

/* Library workflow polish: more collections, clearer active state, denser list metadata, and stronger examples. */
html[data-active-module="nav-library"] .library-results-head {
  grid-template-rows: auto auto !important;
  row-gap: 0.28rem !important;
}

html[data-active-module="nav-library"] .library-current-context {
  grid-column: 2 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.34rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-current-context b,
html[data-active-module="nav-library"] .library-current-context strong {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.18rem !important;
  max-width: 9.5rem !important;
  padding: 0.08rem 0.42rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(224, 226, 222, 0.72) !important;
  font-size: 0.62rem !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-current-context strong {
  max-width: 13rem !important;
  border-color: rgba(var(--library-ref-gold-soft), 0.28) !important;
  color: rgba(255, 225, 165, 0.9) !important;
}

html[data-active-module="nav-library"] .library-section-heading {
  grid-template-columns: auto 1fr auto auto !important;
  column-gap: 0.44rem !important;
}

html[data-active-module="nav-library"] .library-section-heading button {
  min-height: 1.35rem !important;
  padding: 0 0.5rem !important;
  border: 1px solid rgba(var(--library-ref-gold-soft), 0.26) !important;
  border-radius: 999px !important;
  background: rgba(var(--library-ref-gold), 0.08) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
}

html[data-active-module="nav-library"] .library-series-grid.is-expanded {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  padding-bottom: 0.18rem !important;
}

html[data-active-module="nav-library"] .library-series-grid.is-expanded::-webkit-scrollbar {
  height: 0.32rem !important;
}

html[data-active-module="nav-library"] .library-series-grid.is-expanded::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(var(--library-ref-gold-soft), 0.34) !important;
}

html[data-active-module="nav-library"] .library-series-card {
  position: relative !important;
}

html[data-active-module="nav-library"] .library-series-card strong {
  max-width: 100% !important;
  text-align: left !important;
}

html[data-active-module="nav-library"] .library-series-card.is-active {
  border-color: rgba(var(--library-ref-gold-soft), 0.88) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--library-ref-gold-soft), 0.36),
    0 0 0.9rem rgba(var(--library-ref-gold), 0.22) !important;
}

html[data-active-module="nav-library"] .library-series-card.is-active::after {
  content: "";
  position: absolute !important;
  right: 0.38rem !important;
  top: 0.38rem !important;
  width: 0.46rem !important;
  height: 0.46rem !important;
  border-radius: 999px !important;
  background: rgb(var(--library-ref-gold-soft)) !important;
  box-shadow: 0 0 0.55rem rgba(var(--library-ref-gold), 0.58) !important;
}

html[data-active-module="nav-library"] .library-series-more-card {
  border-style: dashed !important;
  border-color: rgba(var(--library-ref-gold-soft), 0.42) !important;
  background:
    linear-gradient(180deg, rgba(var(--library-ref-gold), 0.16), rgba(0, 0, 0, 0.32)),
    rgba(255, 255, 255, 0.025) !important;
}

html[data-active-module="nav-library"] .library-series-more-card small {
  display: inline-flex !important;
  margin-top: 0.18rem !important;
  color: rgba(255, 225, 165, 0.78) !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
}

html[data-active-module="nav-library"] .library-row-difficulty,
html[data-active-module="nav-library"] .library-row-free {
  min-width: clamp(3.35rem, 3.9vw, 4.1rem) !important;
  min-height: 1.35rem !important;
  font-size: clamp(0.62rem, 0.72vw, 0.78rem) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples {
  min-height: clamp(3.15rem, 3.9vw, 3.55rem) !important;
  padding: 0.5rem 0.72rem !important;
  border: 1px dashed rgba(var(--library-ref-gold-soft), 0.22) !important;
  border-radius: 0.5rem !important;
  background: rgba(var(--library-ref-gold), 0.045) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples strong {
  color: rgba(255, 229, 178, 0.95) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples p {
  margin: 0.14rem 0 0 !important;
  color: rgba(231, 231, 226, 0.62) !important;
  font-size: 0.68rem !important;
  line-height: 1.28 !important;
}

/* Library series header buttons: keep the more/collapse action horizontal and compact. */
html[data-active-module="nav-library"] .library-section-heading {
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  align-items: center !important;
}

html[data-active-module="nav-library"] .library-section-heading [data-library-series-more],
html[data-active-module="nav-library"] .library-section-heading [data-library-series] {
  justify-self: end !important;
  width: 2.75rem !important;
  min-width: 2.75rem !important;
  max-width: 2.75rem !important;
  min-height: 1.45rem !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  writing-mode: horizontal-tb !important;
  line-height: 1 !important;
}

/* Library expanded collections: after clicking more, wrap cards downward instead of horizontal scrolling. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel:has(.library-series-grid.is-expanded) {
  grid-template-rows: auto minmax(12.2rem, auto) auto minmax(11.6rem, 1fr) clamp(2.25rem, 3.05vw, 2.7rem) !important;
}

html[data-active-module="nav-library"] .library-series-grid.is-expanded {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-columns: repeat(auto-fill, var(--library-series-size)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: var(--library-series-size) !important;
  align-content: start !important;
  justify-content: start !important;
  height: auto !important;
  min-height: var(--library-series-size) !important;
  max-height: calc(var(--library-series-size) * 2 + var(--library-series-gap)) !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  padding-bottom: 0 !important;
  scrollbar-width: none !important;
}

html[data-active-module="nav-library"] .library-series-grid.is-expanded::-webkit-scrollbar {
  display: none !important;
}

/* Library series toggle card: keep more/collapse as the final square card, not a header pill. */
html[data-active-module="nav-library"] .library-section-heading {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

html[data-active-module="nav-library"] .library-section-heading [data-library-series-more] {
  display: none !important;
}

html[data-active-module="nav-library"] .library-series-grid.is-expanded {
  max-height: calc(var(--library-series-size) * 3 + var(--library-series-gap) * 2) !important;
}

html[data-active-module="nav-library"] .library-series-more-card.is-collapse {
  border-style: solid !important;
  background:
    linear-gradient(180deg, rgba(var(--library-ref-gold), 0.2), rgba(0, 0, 0, 0.38)),
    rgba(255, 255, 255, 0.03) !important;
}

/* Membership library-black trial: reversible color-only pass. */
html[data-active-module="membership"],
html[data-active-module="membership"] body {
  background: #030405 !important;
}

html[data-active-module="membership"] .app-shell,
html[data-active-module="membership"] .main-stage,
html[data-active-module="membership"] .content-grid[data-module="membership"] {
  background:
    radial-gradient(circle at 52% -10%, rgba(233, 183, 96, 0.055), transparent 31%),
    linear-gradient(180deg, #030405 0%, #050505 54%, #030405 100%) !important;
}

html[data-active-module="membership"] .membership-reference-card {
  filter: saturate(0.86) brightness(1.06) contrast(1.04) !important;
}

html[data-active-module="membership"] .membership-reference-card.is-yearly,
html[data-active-module="membership"] .membership-reference-card.is-lifetime {
  filter: saturate(0.98) brightness(1.22) contrast(1.05) !important;
}

html[data-active-module="membership"] .membership-reference-table {
  border-color: rgba(233, 183, 96, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(0, 0, 0, 0.24)),
    #050505 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 1.25rem 3rem rgba(0, 0, 0, 0.46),
    0 0 1.15rem rgba(233, 183, 96, 0.055) !important;
}

html[data-active-module="membership"] .membership-reference-row > * {
  border-right-color: rgba(245, 242, 234, 0.095) !important;
  border-bottom-color: rgba(245, 242, 234, 0.072) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}

html[data-active-module="membership"] .membership-reference-row.is-head > * {
  background:
    linear-gradient(180deg, rgba(233, 183, 96, 0.055), rgba(0, 0, 0, 0.1)) !important;
}

html[data-active-module="membership"] .membership-reference-title strong,
html[data-active-module="membership"] .membership-reference-row.is-head > * {
  color: rgba(235, 203, 147, 0.96) !important;
}

html[data-active-module="membership"] .membership-reference-title small,
html[data-active-module="membership"] .membership-reference-row > * {
  color: rgba(245, 242, 234, 0.72) !important;
}

html[data-active-module="membership"] .membership-reference-feature {
  color: rgba(245, 242, 234, 0.92) !important;
}

html[data-active-module="membership"] .membership-reference-table .membership-level {
  padding: 0.12rem 0.42rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  color: rgba(245, 242, 234, 0.84) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.22)),
    rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="membership"] .membership-reference-table .membership-level-number {
  color: rgba(233, 183, 96, 0.98) !important;
}

html[data-active-module="membership"] .membership-reference-table .membership-check {
  border-right-color: rgba(233, 183, 96, 0.96) !important;
  border-bottom-color: rgba(233, 183, 96, 0.96) !important;
}


html[data-active-module="violinKnowledge"],
html[data-active-module="violinKnowledge"] body {
  background: #030303 !important;
}

html[data-active-module="violinKnowledge"] .content-grid[data-module="violinKnowledge"] {
  background:
    radial-gradient(circle at 52% -18%, rgba(233, 183, 96, 0.08), transparent 32%),
    linear-gradient(180deg, #030303 0%, #060505 54%, #030303 100%) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-3d-lab {
  border-color: rgba(233, 183, 96, 0.22) !important;
  background:
    radial-gradient(circle at 14% 18%, rgba(233, 183, 96, 0.12), transparent 28%),
    radial-gradient(circle at 88% 76%, rgba(255, 255, 255, 0.035), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
    rgba(4, 4, 4, 0.74) !important;
  box-shadow:
    0 1.8rem 5rem rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 1.6rem rgba(233, 183, 96, 0.07) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-3d-lab::before {
  background:
    linear-gradient(90deg, rgba(233, 183, 96, 0.09), transparent 24%, transparent 76%, rgba(233, 183, 96, 0.055)),
    rgba(255, 255, 255, 0.01) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-section-stage,
html[data-active-module="violinKnowledge"] .knowledge-3d-stage-shell {
  border-color: rgba(233, 183, 96, 0.24) !important;
  background:
    radial-gradient(circle at 62% 34%, rgba(233, 183, 96, 0.11), transparent 32%),
    radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.035), transparent 30%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.016)),
    rgba(5, 4, 4, 0.78) !important;
  box-shadow:
    0 1.35rem 4rem rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-section-stage::before {
  background:
    linear-gradient(90deg, rgba(233, 183, 96, 0.048) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
  opacity: 0.5 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-theory-stage .knowledge-3d-title .eyebrow,
html[data-active-module="violinKnowledge"] .knowledge-3d-title .eyebrow {
  color: rgba(233, 183, 96, 0.86) !important;
  letter-spacing: 0.08em !important;
}

html[data-active-module="violinKnowledge"] .knowledge-theory-stage .knowledge-3d-title h3,
html[data-active-module="violinKnowledge"] .knowledge-3d-title h3 {
  color: rgba(255, 238, 205, 0.98) !important;
  text-shadow: 0 0.7rem 1.4rem rgba(0, 0, 0, 0.42) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-theory-stage .knowledge-3d-title p:not(.eyebrow),
html[data-active-module="violinKnowledge"] .knowledge-3d-title p:not(.eyebrow),
html[data-active-module="violinKnowledge"] .knowledge-stage-caption {
  color: rgba(235, 232, 222, 0.68) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-theory-stage .knowledge-staff-preview {
  border-color: rgba(233, 183, 96, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    radial-gradient(circle at 72% 24%, rgba(233, 183, 96, 0.11), transparent 30%),
    rgba(5, 4, 4, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1.2rem 3rem rgba(0, 0, 0, 0.32) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-theory-stage .knowledge-staff-preview i {
  background: rgba(255, 236, 198, 0.32) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-theory-stage .knowledge-clef,
html[data-active-module="violinKnowledge"] .knowledge-theory-stage .knowledge-staff-preview b {
  color: rgba(255, 225, 165, 0.96) !important;
  text-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.42) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-theory-stage .knowledge-staff-preview em {
  background: linear-gradient(90deg, rgba(233, 183, 96, 0.16), rgba(233, 183, 96, 0.72), rgba(233, 183, 96, 0.12)) !important;
}

/* Practice library palette trial: reversible color-only pass matching the music library. */
html[data-active-module="nav-practice"],
html[data-active-module="nav-practice"] body {
  background: #030303 !important;
}

html[data-active-module="nav-practice"] .app-shell,
html[data-active-module="nav-practice"] .main-stage {
  border-color: rgba(233, 183, 96, 0.18) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(233, 183, 96, 0.11), transparent 30%),
    radial-gradient(circle at 88% 2%, rgba(255, 255, 255, 0.035), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.014)),
    rgba(4, 4, 4, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1.4rem 4rem rgba(0, 0, 0, 0.52),
    0 0 2rem rgba(233, 183, 96, 0.07) !important;
}

html[data-active-module="nav-practice"] .topbar {
  border-bottom-color: rgba(233, 183, 96, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.01)),
    rgba(4, 4, 4, 0.42) !important;
}

html[data-active-module="nav-practice"] .top-nav {
  border: 1px solid rgba(233, 183, 96, 0.12) !important;
  background: rgba(0, 0, 0, 0.28) !important;
}

html[data-active-module="nav-practice"] .top-nav .nav-item.is-active {
  border-color: rgba(233, 183, 96, 0.34) !important;
  background: rgba(233, 183, 96, 0.12) !important;
  color: rgba(255, 232, 187, 0.96) !important;
}

html[data-active-module="nav-practice"] .practice-player-board,
html[data-active-module="nav-practice"] .practice-route-card {
  border-color: rgba(233, 183, 96, 0.22) !important;
  background:
    radial-gradient(circle at 80% 8%, rgba(233, 183, 96, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
    rgba(5, 4, 4, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 1.1rem 2.6rem rgba(0, 0, 0, 0.34),
    0 0 1.2rem rgba(233, 183, 96, 0.06) !important;
}

html[data-active-module="nav-practice"] .practice-player-glow {
  background:
    radial-gradient(ellipse at 52% 58%, rgba(233, 183, 96, 0.13), transparent 24%),
    radial-gradient(ellipse at 58% 62%, rgba(255, 232, 187, 0.1), transparent 9%),
    linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.4)) !important;
}

html[data-active-module="nav-practice"] .practice-player-copy h3,
html[data-active-module="nav-practice"] .practice-route-copy strong,
html[data-active-module="nav-practice"] .practice-accuracy-gauge b {
  color: rgba(255, 238, 205, 0.98) !important;
}

html[data-active-module="nav-practice"] .practice-player-copy p,
html[data-active-module="nav-practice"] .practice-route-copy small,
html[data-active-module="nav-practice"] .practice-timebar {
  color: rgba(235, 232, 222, 0.64) !important;
}

html[data-active-module="nav-practice"] .practice-player-copy span,
html[data-active-module="nav-practice"] .practice-progress-badge,
html[data-active-module="nav-practice"] .practice-route-index {
  border-color: rgba(233, 183, 96, 0.28) !important;
  color: rgba(255, 225, 165, 0.96) !important;
}

html[data-active-module="nav-practice"] .practice-accuracy-card {
  border-color: rgba(233, 183, 96, 0.18) !important;
  background:
    radial-gradient(circle at 75% 34%, rgba(233, 183, 96, 0.15), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
    rgba(8, 7, 6, 0.72) !important;
}

html[data-active-module="nav-practice"] .practice-accuracy-card small {
  color: rgba(235, 232, 222, 0.78) !important;
}

html[data-active-module="nav-practice"] .practice-accuracy-gauge {
  background:
    conic-gradient(from 236deg at 50% 100%, rgba(233, 183, 96, 0.98) 0 24%, rgba(255, 225, 165, 0.9) 24% 58%, rgba(255, 255, 255, 0.14) 58% 74%, transparent 74% 100%) !important;
}

html[data-active-module="nav-practice"] .practice-accuracy-gauge::after {
  background: rgba(8, 7, 6, 0.92) !important;
}

html[data-active-module="nav-practice"] .practice-score-preview {
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(50% - 2rem), rgba(255, 236, 198, 0.24) calc(50% - 2rem) calc(50% - 1.94rem), transparent calc(50% - 1.94rem) calc(50% - 1.2rem), rgba(255, 236, 198, 0.22) calc(50% - 1.2rem) calc(50% - 1.14rem), transparent calc(50% - 1.14rem) calc(50% - 0.4rem), rgba(255, 236, 198, 0.2) calc(50% - 0.4rem) calc(50% - 0.34rem), transparent calc(50% - 0.34rem) calc(50% + 0.4rem), rgba(255, 236, 198, 0.2) calc(50% + 0.4rem) calc(50% + 0.46rem), transparent calc(50% + 0.46rem) calc(50% + 1.2rem), rgba(255, 236, 198, 0.22) calc(50% + 1.2rem) calc(50% + 1.26rem), transparent calc(50% + 1.26rem) 100%) !important;
}

html[data-active-module="nav-practice"] .practice-clef,
html[data-active-module="nav-practice"] .practice-time-signature,
html[data-active-module="nav-practice"] .practice-note,
html[data-active-module="nav-practice"] .practice-note::after {
  color: rgba(255, 236, 198, 0.82) !important;
  background-color: rgba(255, 236, 198, 0.82) !important;
}

html[data-active-module="nav-practice"] .practice-score-playhead,
html[data-active-module="nav-practice"] .practice-timebar b {
  background: rgba(233, 183, 96, 0.94) !important;
  box-shadow: 0 0 1rem rgba(233, 183, 96, 0.36) !important;
}

html[data-active-module="nav-practice"] .practice-fingerboard {
  background:
    radial-gradient(circle at 50% 65%, rgba(233, 183, 96, 0.18), transparent 12%),
    linear-gradient(90deg, transparent 0 23%, rgba(255, 236, 198, 0.18) 23.2% 23.45%, transparent 23.6% 39%, rgba(255, 236, 198, 0.16) 39.2% 39.45%, transparent 39.6% 55%, rgba(255, 236, 198, 0.14) 55.2% 55.45%, transparent 55.6% 72%, rgba(255, 236, 198, 0.13) 72.2% 72.45%, transparent 72.6% 100%),
    linear-gradient(180deg, rgba(24, 20, 15, 0.94), rgba(7, 6, 5, 0.9)) !important;
}

html[data-active-module="nav-practice"] .practice-fingerboard > span,
html[data-active-module="nav-practice"] .practice-position-line {
  background: rgba(255, 236, 198, 0.3) !important;
}

html[data-active-module="nav-practice"] .practice-finger-label {
  background: rgba(233, 183, 96, 0.11) !important;
  color: rgba(255, 236, 198, 0.76) !important;
}

html[data-active-module="nav-practice"] .practice-finger-dot {
  border-color: rgba(255, 232, 188, 0.68) !important;
  background: rgba(233, 183, 96, 0.42) !important;
  box-shadow: 0 0 1rem rgba(233, 183, 96, 0.4) !important;
}

html[data-active-module="nav-practice"] .practice-play-button {
  border-color: rgba(255, 232, 188, 0.48) !important;
  background:
    linear-gradient(180deg, rgba(245, 207, 139, 0.96), rgba(145, 100, 49, 0.92)),
    rgba(233, 183, 96, 0.9) !important;
  color: rgba(24, 17, 8, 0.96) !important;
  box-shadow:
    0 0.85rem 1.9rem rgba(0, 0, 0, 0.42),
    0 0 1.2rem rgba(233, 183, 96, 0.22) !important;
}

html[data-active-module="nav-practice"] .practice-score-button,
html[data-active-module="nav-practice"] .practice-pitch-button,
html[data-active-module="nav-practice"] .practice-progress-badge {
  border-color: rgba(233, 183, 96, 0.2) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  color: rgba(235, 232, 222, 0.76) !important;
}

html[data-active-module="nav-practice"] .practice-route-card:hover,
html[data-active-module="nav-practice"] .practice-route-card:focus-visible {
  border-color: rgba(233, 183, 96, 0.42) !important;
  background:
    radial-gradient(circle at 82% 24%, rgba(233, 183, 96, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.018)),
    rgba(7, 6, 5, 0.78) !important;
}

html[data-active-module="nav-practice"] .practice-route-card.is-teacher .practice-route-visual {
  border-color: rgba(233, 183, 96, 0.3) !important;
  background:
    radial-gradient(circle, rgba(233, 183, 96, 0.16), transparent 66%),
    url("/platform/assets/ai-violin-teacher.png") center 36% / 74% auto no-repeat !important;
  box-shadow: inset 0 0 1.2rem rgba(233, 183, 96, 0.18) !important;
}


html[data-active-module="nav-library"] .content-grid[data-module="nav-library"] {
  padding-top: 0 !important;
}

/* Platform global navigation: use the music-library black/gold topbar on every module. */
html[data-active-module] .topbar {
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.45rem, 0.72vw, 0.72rem) !important;
  min-height: auto !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: clamp(0.62rem, 1vw, 0.86rem) clamp(0.78rem, 1.35vw, 1.12rem) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(233, 183, 96, 0.12) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 9% 0%, rgba(233, 183, 96, 0.055), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.006)),
    rgba(3, 3, 3, 0.72) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module] .top-brand {
  flex: 0 0 auto !important;
  min-width: clamp(7.7rem, 11vw, 9.6rem) !important;
  max-width: clamp(7.7rem, 11vw, 9.6rem) !important;
  min-height: clamp(2.2rem, 2.55vw, 2.45rem) !important;
  padding: 0.14rem 0.38rem 0.14rem 0.16rem !important;
  gap: 0.42rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module] .brand-mark {
  width: clamp(2rem, 2.45vw, 2.25rem) !important;
  height: clamp(2rem, 2.45vw, 2.25rem) !important;
  border: 1px solid rgba(233, 183, 96, 0.36) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 40% 30%, rgba(255, 226, 165, 0.18), transparent 48%),
    rgba(233, 183, 96, 0.075) !important;
  color: rgba(255, 232, 187, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 1rem rgba(233, 183, 96, 0.1) !important;
}

html[data-active-module] .top-brand strong {
  color: rgba(245, 242, 234, 0.96) !important;
  font-size: clamp(0.86rem, 0.9vw, 0.98rem) !important;
  font-weight: 820 !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
}

html[data-active-module] .top-brand em {
  display: none !important;
}

html[data-active-module] .top-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: clamp(2.28rem, 2.7vw, 2.62rem) !important;
  margin-inline: clamp(0.4rem, 0.8vw, 0.85rem) !important;
  padding: 0.14rem !important;
  gap: 0.14rem !important;
  border: 1px solid rgba(233, 183, 96, 0.13) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(0, 0, 0, 0.22)),
    rgba(0, 0, 0, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.046),
    0 0.75rem 1.8rem rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module] .top-nav .top-nav-group {
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

html[data-active-module] .top-nav .top-nav-group + .top-nav-group::before,
html[data-active-module] .top-nav .nav-item.is-active::after {
  display: none !important;
}

html[data-active-module] .top-nav .nav-item {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  grid-template-columns: none !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(2rem, 2.35vw, 2.28rem) !important;
  padding: 0.32rem 0.44rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(235, 232, 222, 0.62) !important;
  box-shadow: none !important;
  font-size: clamp(0.72rem, 0.8vw, 0.86rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html[data-active-module] .top-nav .nav-item:hover {
  border-color: rgba(233, 183, 96, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(233, 183, 96, 0.07), rgba(0, 0, 0, 0.2)),
    rgba(255, 255, 255, 0.018) !important;
  color: rgba(255, 232, 187, 0.9) !important;
}

html[data-active-module] .top-nav .nav-item.is-active {
  border-color: rgba(233, 183, 96, 0.4) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(233, 183, 96, 0.16), transparent 56%),
    linear-gradient(180deg, rgba(233, 183, 96, 0.13), rgba(0, 0, 0, 0.26)),
    rgba(8, 6, 4, 0.78) !important;
  color: rgba(255, 236, 198, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 196, 0.11),
    0 0 1rem rgba(233, 183, 96, 0.1) !important;
}

html[data-active-module] .top-nav .nav-icon {
  flex: 0 0 auto !important;
  margin-right: 0.16rem !important;
  color: rgba(233, 183, 96, 0.86) !important;
  font-size: 0.92em !important;
  line-height: 1 !important;
}

html[data-active-module] .top-nav .nav-item.is-active .nav-icon {
  color: rgba(255, 224, 156, 0.98) !important;
}

html[data-active-module] .user-area {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 0.34rem !important;
  margin-left: 0 !important;
}

html[data-active-module] .notification-button,
html[data-active-module] .user-profile {
  display: grid !important;
  width: clamp(2.2rem, 2.7vw, 2.42rem) !important;
  height: clamp(2.2rem, 2.7vw, 2.42rem) !important;
  min-width: clamp(2.2rem, 2.7vw, 2.42rem) !important;
  min-height: 0 !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(233, 183, 96, 0.16) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.22)),
    rgba(0, 0, 0, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.052),
    0 0.65rem 1.35rem rgba(0, 0, 0, 0.24) !important;
  overflow: hidden !important;
}

html[data-active-module] .notification-button:hover,
html[data-active-module] .user-profile:hover,
html[data-active-module] .user-profile[aria-expanded="true"] {
  border-color: rgba(233, 183, 96, 0.36) !important;
  background:
    linear-gradient(180deg, rgba(233, 183, 96, 0.09), rgba(0, 0, 0, 0.24)),
    rgba(6, 5, 4, 0.82) !important;
}

html[data-active-module] .user-profile img {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  opacity: 0.58 !important;
  filter: saturate(0.78) brightness(0.62) contrast(1.08) !important;
}

html[data-active-module] .user-profile > span,
html[data-active-module] .profile-settings-symbol {
  display: none !important;
}

/* Nav library bigger topbar test: scale only the music library navigation first. */
html[data-active-module="nav-library"] .topbar {
  gap: clamp(0.58rem, 0.9vw, 0.92rem) !important;
  padding: clamp(0.78rem, 1.2vw, 1.05rem) clamp(0.98rem, 1.6vw, 1.34rem) !important;
}

html[data-active-module="nav-library"] .top-brand {
  min-width: clamp(8.8rem, 12.8vw, 11rem) !important;
  max-width: clamp(8.8rem, 12.8vw, 11rem) !important;
  min-height: clamp(2.6rem, 3.1vw, 2.95rem) !important;
  gap: 0.52rem !important;
}

html[data-active-module="nav-library"] .brand-mark {
  width: clamp(2.38rem, 2.85vw, 2.68rem) !important;
  height: clamp(2.38rem, 2.85vw, 2.68rem) !important;
  font-size: clamp(1.02rem, 1.22vw, 1.16rem) !important;
}

html[data-active-module="nav-library"] .top-brand strong {
  font-size: clamp(1rem, 1.08vw, 1.16rem) !important;
}

html[data-active-module="nav-library"] .top-nav {
  min-height: clamp(2.9rem, 3.35vw, 3.22rem) !important;
  margin-inline: clamp(0.56rem, 0.95vw, 1rem) !important;
  padding: 0.17rem !important;
  gap: 0.17rem !important;
}

html[data-active-module="nav-library"] .top-nav .nav-item {
  min-height: clamp(2.52rem, 2.92vw, 2.82rem) !important;
  padding: 0.4rem 0.58rem !important;
  font-size: clamp(0.84rem, 0.94vw, 1rem) !important;
  font-weight: 800 !important;
}

html[data-active-module="nav-library"] .top-nav .nav-icon {
  margin-right: 0.22rem !important;
  font-size: 1em !important;
}

html[data-active-module="nav-library"] .notification-button,
html[data-active-module="nav-library"] .user-profile {
  width: clamp(2.56rem, 3vw, 2.86rem) !important;
  height: clamp(2.56rem, 3vw, 2.86rem) !important;
  min-width: clamp(2.56rem, 3vw, 2.86rem) !important;
}

/* Profile, support and account menu strict library-black pass. */
html[data-active-module="profile"],
html[data-active-module="profile"] body,
html[data-active-module="support"],
html[data-active-module="support"] body {
  background: #030303 !important;
}

html[data-active-module="profile"] .app-shell,
html[data-active-module="profile"] .main-stage,
html[data-active-module="support"] .app-shell,
html[data-active-module="support"] .main-stage {
  border-color: rgba(233, 183, 96, 0.16) !important;
  background:
    radial-gradient(circle at 16% 4%, rgba(233, 183, 96, 0.08), transparent 28%),
    radial-gradient(circle at 86% 0%, rgba(255, 255, 255, 0.025), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.006)),
    #030303 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 1.4rem 4rem rgba(0, 0, 0, 0.54) !important;
}

html[data-active-module="profile"] .topbar,
html[data-active-module="support"] .topbar {
  border-bottom-color: rgba(233, 183, 96, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008)),
    rgba(4, 4, 4, 0.58) !important;
}

html[data-active-module="profile"] .top-nav,
html[data-active-module="support"] .top-nav,
html[data-active-module="profile"] .user-profile,
html[data-active-module="support"] .user-profile,
html[data-active-module="profile"] .notification-button,
html[data-active-module="support"] .notification-button {
  border-color: rgba(233, 183, 96, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.24)),
    rgba(0, 0, 0, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 0.75rem 1.8rem rgba(0, 0, 0, 0.3) !important;
}

html[data-active-module="profile"] .top-nav .nav-item.is-active,
html[data-active-module="support"] .top-nav .nav-item.is-active {
  border-color: rgba(233, 183, 96, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(233, 183, 96, 0.16), rgba(0, 0, 0, 0.22)),
    rgba(0, 0, 0, 0.32) !important;
  color: rgba(255, 232, 187, 0.96) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"],
html[data-active-module="support"] .content-grid[data-module="support"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(233, 183, 96, 0.07), transparent 28%),
    linear-gradient(180deg, #030303 0%, #050505 52%, #030303 100%) !important;
}

html[data-active-module="profile"] .profile-dashboard,
html[data-active-module="support"] .support-page[data-customer-service-theme="exhibition"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(233, 183, 96, 0.07), transparent 30%),
    linear-gradient(180deg, #030303 0%, #050505 54%, #030303 100%) !important;
  color: rgba(245, 242, 234, 0.94) !important;
}

html[data-active-module="profile"] :is(
  .profile-glass-card,
  .profile-practice-current,
  .profile-member-metrics span,
  .profile-benefit-grid span,
  .profile-piece-list span,
  .profile-settings-list span,
  .profile-settings-list button,
  .profile-collab-grid button
),
html[data-active-module="support"] .support-page[data-customer-service-theme="exhibition"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-guess-block,
  .support-ask-box,
  .support-faq-category-panel,
  .support-human-fallback,
  .support-answer-content,
  .support-gallery-tabs,
  .support-board-card,
  .support-guess-list button,
  .support-faq-buttons button,
  .support-upload-entry,
  .support-block-title span,
  .support-empty-tags span,
  .answer-feedback button
) {
  border-color: rgba(233, 183, 96, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(0, 0, 0, 0.26)),
    rgba(5, 5, 5, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.052),
    0 1rem 2.5rem rgba(0, 0, 0, 0.4),
    0 0 1rem rgba(233, 183, 96, 0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module="profile"] .profile-hero-card,
html[data-active-module="support"] .support-page[data-customer-service-theme="exhibition"] .support-entry-panel {
  background:
    radial-gradient(circle at 9% 18%, rgba(233, 183, 96, 0.09), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(0, 0, 0, 0.32)),
    rgba(4, 4, 4, 0.9) !important;
}

html[data-active-module="profile"] .profile-recent-card .profile-practice-current,
html[data-active-module="support"] .support-page[data-customer-service-theme="exhibition"] .support-board-card:hover,
html[data-active-module="support"] .support-page[data-customer-service-theme="exhibition"] .support-board-card.is-active {
  border-color: rgba(233, 183, 96, 0.32) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(233, 183, 96, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(0, 0, 0, 0.24)),
    rgba(7, 6, 5, 0.9) !important;
}

html[data-active-module="profile"] :is(.eyebrow, .profile-list-label, .profile-benefit-grid b, .profile-piece-list b),
html[data-active-module="support"] .support-page[data-customer-service-theme="exhibition"] :is(.eyebrow, .support-block-title span, .support-card-icon) {
  color: rgba(233, 183, 96, 0.88) !important;
}

html[data-active-module="profile"] :is(h3, strong, b),
html[data-active-module="support"] .support-page[data-customer-service-theme="exhibition"] :is(h3, strong, b, .support-gallery-topbar h3, .support-entry-head h3) {
  color: rgba(245, 242, 234, 0.96) !important;
}

html[data-active-module="profile"] :is(p, small),
html[data-active-module="support"] .support-page[data-customer-service-theme="exhibition"] :is(p, small, .support-wait-copy, .support-guess-list span) {
  color: rgba(235, 232, 222, 0.64) !important;
}

html[data-active-module="profile"] :is(.glass-button, .profile-collab-grid button, .profile-settings-list button),
html[data-active-module="support"] .support-page[data-customer-service-theme="exhibition"] :is(.glass-button, .primary-action) {
  border-color: rgba(233, 183, 96, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(233, 183, 96, 0.09), rgba(0, 0, 0, 0.24)),
    rgba(3, 3, 3, 0.72) !important;
  color: rgba(255, 232, 187, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 0.55rem 1.2rem rgba(0, 0, 0, 0.28) !important;
}

html[data-active-module="profile"] :is(.glass-button.primary, .profile-action-row .glass-button:first-child),
html[data-active-module="support"] .support-page[data-customer-service-theme="exhibition"] .glass-button.primary {
  border-color: rgba(233, 183, 96, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(233, 183, 96, 0.2), rgba(78, 49, 12, 0.3)),
    rgba(5, 5, 5, 0.86) !important;
  color: rgba(255, 236, 198, 0.98) !important;
}

html[data-active-module="profile"] .profile-avatar-mark,
html[data-active-module="support"] .support-page[data-customer-service-theme="exhibition"] .support-card-icon {
  border-color: rgba(233, 183, 96, 0.34) !important;
  background:
    radial-gradient(circle at 36% 22%, rgba(255, 226, 165, 0.18), transparent 42%),
    rgba(233, 183, 96, 0.085) !important;
  color: rgba(255, 232, 187, 0.98) !important;
  box-shadow: 0 0 1.15rem rgba(233, 183, 96, 0.12) !important;
}

html[data-active-module="support"] .support-page[data-customer-service-theme="exhibition"] :is(.support-ask-box textarea, .support-human-dialog textarea) {
  border-color: rgba(233, 183, 96, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(0, 0, 0, 0.2)),
    rgba(3, 3, 3, 0.78) !important;
  color: rgba(245, 242, 234, 0.9) !important;
  box-shadow: inset 0 0 0 1px rgba(233, 183, 96, 0.09) !important;
}

html[data-active-module="support"] .support-page[data-customer-service-theme="exhibition"] .support-bg-flow {
  background:
    radial-gradient(ellipse at 58% 30%, rgba(233, 183, 96, 0.075), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), transparent 30%, rgba(0, 0, 0, 0.3)) !important;
  opacity: 0.42 !important;
}

html[data-active-module="support"] .support-page[data-customer-service-theme="exhibition"] .support-bg-violin {
  filter: saturate(0.55) contrast(1.04) brightness(0.56) !important;
  opacity: 0.08 !important;
}

.account-menu-popover {
  border-color: rgba(233, 183, 96, 0.22) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(233, 183, 96, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(0, 0, 0, 0.28)),
    rgba(4, 4, 4, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1.25rem 3rem rgba(0, 0, 0, 0.54),
    0 0 1.1rem rgba(233, 183, 96, 0.055) !important;
}

.account-menu-popover button {
  border-color: rgba(245, 242, 234, 0.09) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.2)),
    rgba(5, 5, 5, 0.78) !important;
}

.account-menu-popover button:hover,
.account-menu-popover button:focus-visible {
  border-color: rgba(233, 183, 96, 0.36) !important;
  background:
    linear-gradient(180deg, rgba(233, 183, 96, 0.095), rgba(0, 0, 0, 0.22)),
    rgba(5, 5, 5, 0.84) !important;
}

.account-menu-popover strong {
  color: rgba(255, 232, 187, 0.98) !important;
}

.account-menu-popover span {
  color: rgba(235, 232, 222, 0.62) !important;
}

/* Library top gap trim: remove the stray horizontal blank strip under the library topbar. */
html[data-active-module="nav-library"] .topbar {
  margin-bottom: 0 !important;
}

html[data-active-module="nav-library"] .content-grid[data-module="nav-library"] {
  padding-top: 0 !important;
}

/* Platform top navigation size lock: every module with a topbar uses the music-library dimensions. */
html[data-active-module] .topbar {
  gap: clamp(0.58rem, 0.9vw, 0.92rem) !important;
  padding: clamp(0.78rem, 1.2vw, 1.05rem) clamp(0.98rem, 1.6vw, 1.34rem) !important;
}

html[data-active-module] .top-brand {
  min-width: clamp(8.8rem, 12.8vw, 11rem) !important;
  max-width: clamp(8.8rem, 12.8vw, 11rem) !important;
  min-height: clamp(2.6rem, 3.1vw, 2.95rem) !important;
  gap: 0.52rem !important;
}

html[data-active-module] .brand-mark {
  width: clamp(2.38rem, 2.85vw, 2.68rem) !important;
  height: clamp(2.38rem, 2.85vw, 2.68rem) !important;
  font-size: clamp(1.02rem, 1.22vw, 1.16rem) !important;
}

html[data-active-module] .top-brand strong {
  font-size: clamp(1rem, 1.08vw, 1.16rem) !important;
}

html[data-active-module] .top-nav {
  min-height: clamp(2.9rem, 3.35vw, 3.22rem) !important;
  margin-inline: clamp(0.56rem, 0.95vw, 1rem) !important;
  padding: 0.17rem !important;
  gap: 0.17rem !important;
}

html[data-active-module] .top-nav .nav-item {
  min-height: clamp(2.52rem, 2.92vw, 2.82rem) !important;
  padding: 0.4rem 0.58rem !important;
  font-size: clamp(0.84rem, 0.94vw, 1rem) !important;
  font-weight: 800 !important;
}

html[data-active-module] .top-nav .nav-icon {
  margin-right: 0.22rem !important;
  font-size: 1em !important;
}

html[data-active-module] .notification-button,
html[data-active-module] .user-profile {
  width: clamp(2.56rem, 3vw, 2.86rem) !important;
  height: clamp(2.56rem, 3vw, 2.86rem) !important;
  min-width: clamp(2.56rem, 3vw, 2.86rem) !important;
}

/* Smart generation screenshot restoration: use the desktop crop as the body, keep the system nav. */
html[data-active-module="nav-generate"] body,
html[data-active-module="nav-generate"] .app-shell,
html[data-active-module="nav-generate"] .main-stage {
  background: #000 !important;
}

html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
  --ai-generate-nav-h: clamp(4.2rem, 5.2vw, 5.35rem);
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100% !important;
  height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h)) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: min(100%, calc((var(--app-height, 100dvh) - var(--ai-generate-nav-h)) * 1672 / 820)) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1672 / 820 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: url("/platform/assets/ai-generate-body-crop.png?v=ai-generate-body-crop-15") center top / 100% 100% no-repeat !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel,
html[data-active-module="nav-generate"] .generate-side-rail,
html[data-active-module="nav-generate"] .creation-entry-grid {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-aurora,
html[data-active-module="nav-generate"] .generate-title-block,
html[data-active-module="nav-generate"] .generate-upload-icon,
html[data-active-module="nav-generate"] .generate-upload-card > strong,
html[data-active-module="nav-generate"] .generate-upload-card > small,
html[data-active-module="nav-generate"] .generate-upload-card > em,
html[data-active-module="nav-generate"] .generate-requirements-field,
html[data-active-module="nav-generate"] .score-generate-status,
html[data-active-module="nav-generate"] .creation-entry-icon,
html[data-active-module="nav-generate"] .creation-entry-title,
html[data-active-module="nav-generate"] .creation-entry-subtitle,
html[data-active-module="nav-generate"] .generate-record-card {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-upload-card,
html[data-active-module="nav-generate"] .generate-submit-button,
html[data-active-module="nav-generate"] .creation-entry-card,
html[data-active-module="nav-generate"] .creation-entry-button {
  position: absolute !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-upload-card {
  left: 3.8% !important;
  top: 24.1% !important;
  width: 29.7% !important;
  height: 46.4% !important;
}

html[data-active-module="nav-generate"] .generate-submit-button {
  left: 5.1% !important;
  top: 79.3% !important;
  width: 23.3% !important;
  height: 7.9% !important;
}

html[data-active-module="nav-generate"] .creation-entry-card {
  top: 1.8% !important;
  width: 30.5% !important;
  height: 92.2% !important;
  transform: none !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor {
  left: 34.7% !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  left: 67.5% !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .creation-entry-card::before,
html[data-active-module="nav-generate"] .creation-entry-card::after {
  display: none !important;
  content: none !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration .creation-entry-button {
  left: 10.5% !important;
  right: 10.5% !important;
  bottom: 8.2% !important;
  width: auto !important;
  height: 7.8% !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .score-generate-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

/* Smart generation transparent hit targets: remove legacy glass blur over the crop. */
html[data-active-module="nav-generate"] .generate-upload-card,
html[data-active-module="nav-generate"] .generate-submit-button,
html[data-active-module="nav-generate"] .creation-entry-card,
html[data-active-module="nav-generate"] .creation-entry-button {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  outline: 0 !important;
}

html[data-active-module="nav-generate"] .generate-upload-card::before,
html[data-active-module="nav-generate"] .generate-upload-card::after,
html[data-active-module="nav-generate"] .generate-submit-button::before,
html[data-active-module="nav-generate"] .generate-submit-button::after,
html[data-active-module="nav-generate"] .creation-entry-card::before,
html[data-active-module="nav-generate"] .creation-entry-card::after,
html[data-active-module="nav-generate"] .creation-entry-button::before,
html[data-active-module="nav-generate"] .creation-entry-button::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-button > span,
html[data-active-module="nav-generate"] .generate-submit-button > strong,
html[data-active-module="nav-generate"] .creation-entry-button > *,
html[data-active-module="nav-generate"] .creation-entry-card > * {
  opacity: 0 !important;
  visibility: visible !important;
}

/* Smart generation crop ratio lock: never stretch the desktop reference image. */
html[data-active-module="nav-generate"] .nav-workbench-generate {
  width: min(100vw, calc((var(--app-height, 100dvh) - var(--ai-generate-nav-h)) * 1672 / 820)) !important;
  height: auto !important;
  aspect-ratio: 1672 / 820 !important;
  background-size: contain !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

/* Smart generation background: match the Learning Tools page backdrop. */
html[data-active-module="nav-generate"],
html[data-active-module="nav-generate"] body,
html[data-active-module="nav-generate"] .app-shell,
html[data-active-module="nav-generate"] .main-stage,
html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
  background:
    radial-gradient(circle at 12% 12%, rgba(190, 125, 54, 0.11), transparent 26%),
    radial-gradient(circle at 52% 42%, rgba(118, 80, 42, 0.055), transparent 30%),
    radial-gradient(circle at 84% 20%, rgba(100, 42, 110, 0.10), transparent 28%),
    linear-gradient(180deg, #050608 0%, #080b10 50%, #050608 100%) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate {
  background-color: transparent !important;
}

/* Smart generation vertical placement: lower the three restored cards by 105px. */
html[data-active-module="nav-generate"] .nav-workbench-generate {
  transform: translateY(105px) !important;
  filter: brightness(1.02) saturate(1.02) contrast(1.01) !important;
}

/* Smart generation real button framework: rebuild the three modules as live cards. */
html[data-active-module="nav-generate"] .nav-workbench-generate {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(1.8rem, 2.25vw, 2.7rem) !important;
  width: min(94vw, 1570px) !important;
  height: min(calc((94vw - clamp(3.6rem, 4.5vw, 5.4rem)) / 3 * 1.48), calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h) - 6rem)) !important;
  max-height: 760px !important;
  aspect-ratio: auto !important;
  background: transparent !important;
  pointer-events: auto !important;
  filter: brightness(1.02) saturate(1.02) contrast(1.01) !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel,
html[data-active-module="nav-generate"] .generate-side-rail,
html[data-active-module="nav-generate"] .creation-entry-grid {
  position: static !important;
  display: contents !important;
  width: auto !important;
  height: auto !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel,
html[data-active-module="nav-generate"] .creation-entry-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  padding: clamp(2.1rem, 3vw, 3.15rem) clamp(1.9rem, 2.45vw, 2.6rem) !important;
  border: 1px solid rgba(223, 146, 45, 0.42) !important;
  border-radius: clamp(0.9rem, 1.1vw, 1.18rem) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 142, 65, 0.11), transparent 44%),
    linear-gradient(180deg, rgba(35, 25, 13, 0.78), rgba(13, 10, 7, 0.86)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 180, 0.08),
    0 1.1rem 2.8rem rgba(0, 0, 0, 0.36) !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel::before,
html[data-active-module="nav-generate"] .generate-compose-panel::after,
html[data-active-module="nav-generate"] .creation-entry-card::before,
html[data-active-module="nav-generate"] .creation-entry-card::after {
  display: block !important;
  content: "" !important;
}

html[data-active-module="nav-generate"] .generate-title-block,
html[data-active-module="nav-generate"] .creation-entry-title,
html[data-active-module="nav-generate"] .creation-entry-subtitle,
html[data-active-module="nav-generate"] .creation-entry-button,
html[data-active-module="nav-generate"] .generate-upload-card,
html[data-active-module="nav-generate"] .generate-submit-button {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-indent: 0 !important;
  color: inherit !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-title-block {
  justify-items: center !important;
  gap: 0.75rem !important;
  margin: 0 0 clamp(1.4rem, 2.2vw, 2.2rem) !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-title-block h3,
html[data-active-module="nav-generate"] .creation-entry-title {
  color: rgba(246, 244, 239, 0.96) !important;
  font-size: clamp(1.85rem, 2.2vw, 2.45rem) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
}

html[data-active-module="nav-generate"] .generate-title-block p,
html[data-active-module="nav-generate"] .creation-entry-subtitle {
  color: rgba(235, 231, 222, 0.74) !important;
  font-size: clamp(0.9rem, 1.08vw, 1.12rem) !important;
  line-height: 1.55 !important;
}

html[data-active-module="nav-generate"] .generate-upload-card {
  position: static !important;
  place-items: center !important;
  align-self: stretch !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(1.3rem, 2vw, 2.1rem) !important;
  border: 1px dashed rgba(198, 129, 38, 0.58) !important;
  border-radius: 0.66rem !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(207, 145, 55, 0.12), transparent 38%),
    rgba(16, 10, 4, 0.42) !important;
  box-shadow: none !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-upload-card::before {
  display: block !important;
  content: "☁" !important;
  margin-bottom: clamp(0.85rem, 1.25vw, 1.18rem) !important;
  color: rgba(222, 158, 73, 0.92) !important;
  font-size: clamp(4.8rem, 6.1vw, 6.5rem) !important;
  line-height: 0.82 !important;
}

html[data-active-module="nav-generate"] .generate-upload-icon {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-upload-card > strong,
html[data-active-module="nav-generate"] .generate-upload-card > small,
html[data-active-module="nav-generate"] .generate-upload-card > em {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-indent: 0 !important;
}

html[data-active-module="nav-generate"] .generate-upload-card > strong {
  color: rgba(232, 168, 76, 0.98) !important;
  font-size: clamp(1.02rem, 1.2vw, 1.22rem) !important;
  font-weight: 800 !important;
}

html[data-active-module="nav-generate"] .generate-upload-card > small,
html[data-active-module="nav-generate"] .generate-upload-card > em {
  max-width: 22rem !important;
  margin-top: 0.82rem !important;
  color: rgba(226, 216, 195, 0.58) !important;
  font-size: clamp(0.82rem, 0.96vw, 0.98rem) !important;
}

html[data-active-module="nav-generate"] .generate-submit-button,
html[data-active-module="nav-generate"] .creation-entry-button {
  position: static !important;
  place-items: center !important;
  width: 100% !important;
  height: clamp(3.05rem, 4.1vw, 3.95rem) !important;
  min-height: 0 !important;
  margin-top: clamp(1.35rem, 2.2vw, 2.2rem) !important;
  border: 1px solid rgba(234, 170, 83, 0.42) !important;
  border-radius: 0.58rem !important;
  background:
    linear-gradient(180deg, rgba(168, 113, 45, 0.82), rgba(105, 64, 24, 0.82)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 187, 0.14),
    0 0.85rem 1.9rem rgba(0, 0, 0, 0.22) !important;
  color: rgba(255, 244, 225, 0.96) !important;
  font-size: clamp(1rem, 1.18vw, 1.2rem) !important;
  font-weight: 650 !important;
}

html[data-active-module="nav-generate"] .generate-submit-button > span,
html[data-active-module="nav-generate"] .generate-submit-button > strong,
html[data-active-module="nav-generate"] .creation-entry-button > * {
  opacity: 1 !important;
  visibility: visible !important;
  text-indent: 0 !important;
}

html[data-active-module="nav-generate"] .generate-submit-button > span {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-button > strong {
  font-size: inherit !important;
  font-weight: inherit !important;
}

html[data-active-module="nav-generate"] .creation-entry-card {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  justify-items: center !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor {
  border-color: rgba(91, 145, 181, 0.54) !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(37, 103, 126, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(8, 27, 35, 0.88), rgba(5, 15, 21, 0.9)) !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  border-color: rgba(166, 95, 185, 0.54) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(121, 57, 142, 0.19), transparent 46%),
    linear-gradient(180deg, rgba(26, 13, 31, 0.9), rgba(13, 8, 17, 0.92)) !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .creation-entry-card::before {
  position: static !important;
  width: min(100%, 27.4rem) !important;
  height: min(44vh, 23rem) !important;
  min-height: 15rem !important;
  margin: clamp(1.8rem, 2.8vw, 3rem) auto auto !important;
  border: 0 !important;
  border-radius: 0.75rem !important;
  opacity: 1 !important;
  transform: none !important;
  background: var(--generate-card-image) center / contain no-repeat !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .creation-entry-card::after {
  display: none !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor {
  --generate-card-image: url("/platform/assets/generate-ref-card-editor.png?v=generate-reference-crops-20260604-3") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  --generate-card-image: url("/platform/assets/generate-ref-card-inspiration.png?v=generate-reference-crops-20260604-3") !important;
}

html[data-active-module="nav-generate"] .creation-entry-icon {
  display: none !important;
}

html[data-active-module="nav-generate"] .creation-entry-title {
  margin: 0 !important;
}

html[data-active-module="nav-generate"] .creation-entry-subtitle {
  max-width: none !important;
  margin: 0.76rem 0 0 !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor .creation-entry-button {
  border-color: rgba(123, 169, 211, 0.38) !important;
  background:
    linear-gradient(180deg, rgba(65, 92, 124, 0.82), rgba(36, 58, 83, 0.82)) !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration .creation-entry-button {
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  border-color: rgba(188, 113, 203, 0.36) !important;
  background:
    linear-gradient(180deg, rgba(93, 48, 105, 0.86), rgba(56, 31, 67, 0.88)) !important;
}

html[data-active-module="nav-generate"] .generate-requirements-field,
html[data-active-module="nav-generate"] .score-generate-status,
html[data-active-module="nav-generate"] .generate-record-card {
  display: none !important;
}

@media (max-width: 900px) {
  html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }

  html[data-active-module="nav-generate"] .nav-workbench-generate {
    width: max(62rem, 100%) !important;
  }
}

/* Library filter fill: let the left filter buttons fill the available rail height. */
@media (min-width: 901px) {
  html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
    display: grid !important;
    grid-template-rows: minmax(0, 8fr) minmax(0, 5fr) !important;
    gap: clamp(0.82rem, 1.05vw, 1.12rem) !important;
    overflow: hidden !important;
  }

  html[data-active-module="nav-library"] .library-filter-section {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(0.42rem, 0.56vw, 0.56rem) !important;
    min-height: 0 !important;
  }

  html[data-active-module="nav-library"] .library-filter-grid {
    display: grid !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    gap: clamp(0.34rem, 0.48vw, 0.48rem) !important;
    min-height: 0 !important;
  }

  html[data-active-module="nav-library"] .library-filter-grid button {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: center !important;
  }
}

/* Library series 120 cards: enlarge collection squares from 90px to 120px. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  grid-template-rows: auto 7.5rem auto minmax(15.9rem, 1fr) clamp(2.25rem, 3.05vw, 2.7rem) !important;
}

html[data-active-module="nav-library"] .library-series-grid {
  --library-series-size: 7.5rem;
}

html[data-active-module="nav-library"] .library-series-card strong {
  font-size: 0.76rem !important;
  line-height: 1.1 !important;
}

html[data-active-module="nav-library"] .library-series-more-card small {
  font-size: 0.64rem !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel:has(.library-series-grid.is-expanded) {
  grid-template-rows: auto minmax(15.4rem, auto) auto minmax(9.6rem, 1fr) clamp(2.25rem, 3.05vw, 2.7rem) !important;
}

/* Library filter width fill: stretch left filter buttons to the right edge of the rail. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

html[data-active-module="nav-library"] .library-filter-section,
html[data-active-module="nav-library"] .library-filter-grid {
  width: 100% !important;
  inline-size: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-self: stretch !important;
}

html[data-active-module="nav-library"] .library-filter-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

html[data-active-module="nav-library"] .library-filter-grid button {
  display: flex !important;
  width: 100% !important;
  inline-size: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  justify-content: flex-start !important;
}

/* Library filter rail compact: avoid a wide empty strip to the right of the filter buttons. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library {
  grid-template-columns: minmax(11.25rem, 13.2rem) minmax(0, 1fr) !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  width: 100% !important;
  max-width: 13.2rem !important;
  justify-self: stretch !important;
}


/* Note atlas category-window flow */
.knowledge-notes-stage .knowledge-note-atlas {
  grid-template-columns: minmax(22rem, 1.08fr) minmax(18rem, 0.92fr);
  min-height: 0;
  overflow: hidden;
}

.knowledge-note-category-grid,
.knowledge-note-category-panel {
  min-height: 0;
  height: 100%;
}

.knowledge-note-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: clamp(0.46rem, 0.72vw, 0.68rem);
  overflow: auto;
  padding: 0 0.28rem 0.2rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(228, 199, 127, 0.42) rgba(255, 255, 255, 0.045);
}

.knowledge-note-category-grid::-webkit-scrollbar,
.knowledge-note-grid.is-category-detail::-webkit-scrollbar {
  width: 0.42rem;
}

.knowledge-note-category-grid::-webkit-scrollbar-thumb,
.knowledge-note-grid.is-category-detail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.42);
}

.knowledge-note-category-card {
  display: grid;
  grid-template-rows: auto auto auto minmax(2.15rem, auto);
  gap: 0.28rem;
  min-height: 7.1rem;
  padding: clamp(0.72rem, 0.9vw, 0.9rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.58rem;
  background:
    radial-gradient(circle at 82% 12%, rgba(228, 199, 127, 0.12), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.026)),
    rgba(6, 7, 9, 0.54);
  color: rgba(247, 249, 247, 0.94);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.knowledge-note-category-card:hover {
  border-color: rgba(228, 199, 127, 0.42);
  background:
    radial-gradient(circle at 82% 12%, rgba(228, 199, 127, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.088), rgba(255, 255, 255, 0.03)),
    rgba(8, 8, 10, 0.66);
  transform: translateY(-1px);
}

.knowledge-note-category-card span {
  color: rgba(228, 199, 127, 0.76);
  font-size: 0.62rem;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.knowledge-note-category-card strong {
  color: rgba(255, 238, 205, 0.98);
  font-size: clamp(0.9rem, 1vw, 1.02rem);
  line-height: 1.08;
}

.knowledge-note-category-card small {
  color: rgba(224, 229, 226, 0.62);
  font-size: 0.68rem;
}

.knowledge-note-category-card em {
  display: block;
  overflow: hidden;
  color: rgba(238, 232, 214, 0.58);
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.35;
}

.knowledge-note-category-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.58rem;
  overflow: hidden;
}

.knowledge-note-category-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.58rem 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 0.58rem;
  background: rgba(255, 255, 255, 0.045);
}

.knowledge-note-category-toolbar div {
  display: grid;
  gap: 0.1rem;
  text-align: right;
}

.knowledge-note-category-toolbar strong {
  color: rgba(255, 238, 205, 0.98);
  font-size: 0.9rem;
}

.knowledge-note-category-toolbar span {
  color: rgba(224, 229, 226, 0.58);
  font-size: 0.68rem;
}

.knowledge-note-back {
  min-height: 2rem;
  padding: 0 0.76rem;
  border: 1px solid rgba(228, 199, 127, 0.32);
  border-radius: 0.46rem;
  background: rgba(228, 199, 127, 0.1);
  color: rgba(255, 238, 205, 0.96);
  font-size: 0.72rem;
  font-weight: 820;
  cursor: pointer;
}

.knowledge-note-grid.is-category-detail {
  max-height: none;
  overflow: auto;
  padding-right: 0.28rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(228, 199, 127, 0.42) rgba(255, 255, 255, 0.045);
}

.knowledge-note-grid.is-category-detail .knowledge-note-group > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.34rem;
}

.knowledge-note-grid.is-category-detail button {
  min-height: 2.18rem;
  padding-inline: 0.28rem;
}

.knowledge-note-overview {
  align-content: center;
}

@media (max-width: 980px) {
  .knowledge-note-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knowledge-note-grid.is-category-detail .knowledge-note-group > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .knowledge-note-category-grid {
    grid-template-columns: 1fr;
  }
}


/* Note atlas wide category index */
.knowledge-notes-stage .knowledge-note-atlas {
  left: clamp(1rem, 1.8vw, 1.75rem);
  right: clamp(1rem, 1.8vw, 1.75rem);
}

.knowledge-notes-stage.is-category-index .knowledge-note-atlas {
  grid-template-columns: 1fr;
  gap: 0;
}

.knowledge-notes-stage.is-category-index .knowledge-note-category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.78vw, 0.72rem);
  padding: 0 0.12rem 0.18rem;
}

.knowledge-notes-stage.is-category-index .knowledge-note-category-card {
  min-height: clamp(5.9rem, 11vh, 7rem);
  padding: clamp(0.62rem, 0.78vw, 0.78rem);
}

.knowledge-notes-stage.is-category-index .knowledge-note-category-card strong {
  font-size: clamp(0.86rem, 0.92vw, 0.98rem);
}

.knowledge-notes-stage.is-category-index .knowledge-note-category-card em {
  max-height: 2.55rem;
}

@media (max-width: 1180px) {
  .knowledge-notes-stage.is-category-index .knowledge-note-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .knowledge-notes-stage.is-category-index .knowledge-note-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Note atlas wider board and category introductions */
html[data-active-module="violinKnowledge"] .content-grid[data-module="violinKnowledge"] {
  padding:
    clamp(1rem, 2.35vh, 2rem)
    clamp(0.75rem, 1.65vw, 2.25rem)
    clamp(1rem, 2.1vh, 1.8rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-3d-lab {
  width: min(100%, 118rem) !important;
  max-width: 118rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-3d-lab::before {
  inset: clamp(0.4rem, 0.58vw, 0.66rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-section-stage,
html[data-active-module="violinKnowledge"] .knowledge-3d-stage-shell {
  border-radius: clamp(0.68rem, 0.86vw, 0.88rem) !important;
}

.knowledge-notes-stage .knowledge-note-atlas {
  left: clamp(0.72rem, 1.15vw, 1.2rem);
  right: clamp(0.72rem, 1.15vw, 1.2rem);
}

.knowledge-notes-stage.is-category-index .knowledge-note-category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.48rem, 0.66vw, 0.66rem);
}

.knowledge-notes-stage.is-category-index .knowledge-note-category-card {
  grid-template-rows: auto auto auto minmax(2.15rem, auto) minmax(1.4rem, auto);
  min-height: clamp(7.15rem, 13.3vh, 8.65rem);
}

.knowledge-note-category-card p {
  margin: 0;
  color: rgba(235, 232, 222, 0.72);
  font-size: clamp(0.68rem, 0.7vw, 0.74rem);
  line-height: 1.35;
}

.knowledge-note-category-card em {
  color: rgba(238, 232, 214, 0.48);
}

@media (min-width: 1780px) {
  html[data-active-module="violinKnowledge"] .knowledge-3d-lab {
    width: min(100%, 126rem) !important;
    max-width: 126rem !important;
  }
}


/* Note atlas two-pane entry: left changes between level 1 and level 2, right stays compact. */
.knowledge-notes-stage .knowledge-note-atlas {
  grid-template-columns: minmax(36rem, 1.42fr) minmax(18rem, 0.58fr);
  gap: clamp(0.58rem, 0.85vw, 0.9rem);
}

.knowledge-notes-stage.is-category-index .knowledge-note-atlas {
  grid-template-columns: minmax(36rem, 1.42fr) minmax(18rem, 0.58fr);
  gap: clamp(0.58rem, 0.85vw, 0.9rem);
}

.knowledge-notes-stage.is-category-index .knowledge-note-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.knowledge-notes-stage .knowledge-note-demo {
  padding: clamp(0.82rem, 1.15vw, 1.1rem);
}

.knowledge-notes-stage .knowledge-note-symbol-hero,
.knowledge-notes-stage .knowledge-note-duration-hero,
.knowledge-notes-stage .knowledge-note-rest-hero,
.knowledge-notes-stage .knowledge-note-key-hero,
.knowledge-notes-stage .knowledge-note-interval-hero {
  min-height: clamp(4.4rem, 9vh, 5.6rem);
}

.knowledge-notes-stage .knowledge-note-staff-demo {
  min-height: clamp(4.8rem, 10vh, 5.9rem);
}

.knowledge-note-overview .knowledge-note-symbol-hero {
  min-height: clamp(5.4rem, 12vh, 7rem);
}

@media (max-width: 1180px) {
  .knowledge-notes-stage .knowledge-note-atlas,
  .knowledge-notes-stage.is-category-index .knowledge-note-atlas {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Note atlas category index: no scroll, fit all first-level entries in one screen. */
.knowledge-notes-stage.is-category-index .knowledge-note-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(7, minmax(0, 1fr)) !important;
  align-content: stretch !important;
  gap: clamp(0.3rem, 0.48vw, 0.48rem) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.knowledge-notes-stage.is-category-index .knowledge-note-category-card {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: clamp(0.42rem, 0.58vw, 0.58rem) clamp(0.52rem, 0.7vw, 0.68rem) !important;
  gap: 0.12rem !important;
}

.knowledge-notes-stage.is-category-index .knowledge-note-category-card span {
  font-size: clamp(0.52rem, 0.56vw, 0.6rem) !important;
}

.knowledge-notes-stage.is-category-index .knowledge-note-category-card strong {
  font-size: clamp(0.72rem, 0.78vw, 0.86rem) !important;
  line-height: 1.05 !important;
}

.knowledge-notes-stage.is-category-index .knowledge-note-category-card small {
  font-size: clamp(0.56rem, 0.6vw, 0.64rem) !important;
  line-height: 1.1 !important;
}

.knowledge-notes-stage.is-category-index .knowledge-note-category-card p {
  display: -webkit-box;
  margin-top: 0.06rem !important;
  overflow: hidden;
  color: rgba(235, 232, 222, 0.7);
  font-size: clamp(0.58rem, 0.61vw, 0.66rem) !important;
  line-height: 1.22 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.knowledge-notes-stage.is-category-index .knowledge-note-category-card em {
  display: block !important;
  max-height: 1.25rem !important;
  overflow: hidden !important;
  font-size: clamp(0.56rem, 0.6vw, 0.64rem) !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 1180px) {
  .knowledge-notes-stage.is-category-index .knowledge-note-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Theory lab prototype: one-page beginner music theory lab. */
html[data-active-module="violinKnowledge"] .theory-lab-stage {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(0.9rem, 1.25vw, 1.3rem) !important;
  padding: clamp(1.1rem, 1.55vw, 1.6rem) !important;
}

html[data-active-module="violinKnowledge"] .theory-lab-stage::before { opacity: 0.28 !important; }

html[data-active-module="violinKnowledge"] .theory-lab-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

html[data-active-module="violinKnowledge"] .theory-lab-header .knowledge-3d-title {
  position: static !important;
  inset: auto !important;
  max-width: min(42rem, 72%) !important;
}

html[data-active-module="violinKnowledge"] .theory-lab-progress {
  display: grid;
  justify-items: end;
  gap: 0.2rem;
  min-width: 8.8rem;
  color: rgba(235, 232, 222, 0.62);
  font-size: clamp(0.68rem, 0.76vw, 0.82rem);
}

html[data-active-module="violinKnowledge"] .theory-lab-progress strong {
  color: rgba(255, 232, 187, 0.96);
  font-size: clamp(0.82rem, 0.92vw, 1rem);
}

html[data-active-module="violinKnowledge"] .theory-lab-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(13.5rem, 0.9fr) minmax(24rem, 1.78fr) minmax(14rem, 0.96fr);
  gap: clamp(0.72rem, 1vw, 1rem);
  min-height: 0;
}

html[data-active-module="violinKnowledge"] .theory-step-rail,
html[data-active-module="violinKnowledge"] .theory-practice-card,
html[data-active-module="violinKnowledge"] .theory-score-board {
  border: 1px solid rgba(233, 183, 96, 0.18);
  border-radius: 0.72rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)), rgba(4,4,4,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

html[data-active-module="violinKnowledge"] .theory-step-rail {
  display: grid;
  gap: 0.42rem;
  min-height: 0;
  overflow: auto;
  padding: 0.58rem;
}

html[data-active-module="violinKnowledge"] .theory-step-rail button {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.54rem;
  min-height: 0;
  padding: 0.5rem 0.56rem;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 0.52rem;
  background: rgba(255,255,255,0.025);
  color: rgba(235,232,222,0.7);
  text-align: left;
}

html[data-active-module="violinKnowledge"] .theory-step-rail button.is-active {
  border-color: rgba(255, 232, 187, 0.45);
  background: linear-gradient(90deg, rgba(233,183,96,0.28), rgba(233,183,96,0.08)), rgba(255,255,255,0.035);
  color: rgba(255, 238, 205, 0.98);
}

html[data-active-module="violinKnowledge"] .theory-step-rail b {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(233,183,96,0.1);
  color: rgba(255,225,165,0.9);
  font-size: 0.72rem;
}

html[data-active-module="violinKnowledge"] .theory-step-rail strong,
html[data-active-module="violinKnowledge"] .theory-step-rail small { display: block; }

html[data-active-module="violinKnowledge"] .theory-step-rail strong {
  margin-bottom: 0.14rem;
  color: inherit;
  font-size: clamp(0.74rem, 0.82vw, 0.9rem);
}

html[data-active-module="violinKnowledge"] .theory-step-rail small {
  color: rgba(235,232,222,0.58);
  font-size: clamp(0.58rem, 0.64vw, 0.7rem);
  line-height: 1.28;
}

html[data-active-module="violinKnowledge"] .theory-score-board {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: clamp(0.52rem, 0.78vw, 0.82rem);
  min-width: 0;
  min-height: 0;
  padding: clamp(0.78rem, 1vw, 1rem);
}

html[data-active-module="violinKnowledge"] .theory-score-caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
}

html[data-active-module="violinKnowledge"] .theory-score-caption span,
html[data-active-module="violinKnowledge"] .theory-score-caption em {
  color: rgba(235,232,222,0.54);
  font-size: clamp(0.64rem, 0.72vw, 0.78rem);
  font-style: normal;
}

html[data-active-module="violinKnowledge"] .theory-score-caption strong {
  overflow: hidden;
  color: rgba(255,238,205,0.96);
  font-size: clamp(0.9rem, 1.04vw, 1.15rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-active-module="violinKnowledge"] .theory-staff-live {
  position: relative;
  min-height: 14rem;
  overflow: hidden;
  border: 1px solid rgba(233,183,96,0.2);
  border-radius: 0.62rem;
  background: radial-gradient(circle at 50% 42%, rgba(233,183,96,0.13), transparent 30%), rgba(0,0,0,0.24);
}

html[data-active-module="violinKnowledge"] .theory-staff-live i {
  position: absolute;
  left: 7%;
  right: 7%;
  height: 1px;
  background: rgba(255,236,198,0.3);
}

html[data-active-module="violinKnowledge"] .theory-staff-live i:nth-child(1) { top: 30%; }
html[data-active-module="violinKnowledge"] .theory-staff-live i:nth-child(2) { top: 40%; }
html[data-active-module="violinKnowledge"] .theory-staff-live i:nth-child(3) { top: 50%; }
html[data-active-module="violinKnowledge"] .theory-staff-live i:nth-child(4) { top: 60%; }
html[data-active-module="violinKnowledge"] .theory-staff-live i:nth-child(5) { top: 70%; }

html[data-active-module="violinKnowledge"] .theory-clef {
  position: absolute;
  left: 9%;
  top: 33%;
  color: rgba(255,225,165,0.96);
  font-size: clamp(2.6rem, 4.2vw, 4.6rem);
  line-height: 1;
}

html[data-active-module="violinKnowledge"] .theory-staff-guide {
  position: absolute;
  right: 7.2%;
  display: grid;
  min-width: 1.75rem;
  height: 1.4rem;
  place-items: center;
  border: 1px solid rgba(255, 232, 187, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 232, 187, 0.78);
  font-size: 0.66rem;
  font-weight: 900;
}

html[data-active-module="violinKnowledge"] .theory-staff-guide.is-high { top: 18%; }
html[data-active-module="violinKnowledge"] .theory-staff-guide.is-low { bottom: 13%; }

html[data-active-module="violinKnowledge"] .theory-note {
  position: absolute;
  display: grid;
  width: clamp(2.35rem, 3.1vw, 3.35rem);
  height: clamp(2.35rem, 3.1vw, 3.35rem);
  place-items: center;
  border: 1px solid rgba(255,232,187,0.3);
  border-radius: 999px;
  background: rgba(233,183,96,0.14);
  color: rgba(255,232,187,0.98);
  font-weight: 900;
  letter-spacing: 0;
  transform: translate(-50%, -50%);
}

html[data-active-module="violinKnowledge"] .theory-note.is-d { left: 27%; top: 58%; }
html[data-active-module="violinKnowledge"] .theory-note.is-a { left: 43%; top: 38%; }
html[data-active-module="violinKnowledge"] .theory-note.is-beat { left: 61%; top: 48%; }
html[data-active-module="violinKnowledge"] .theory-note.is-pair { left: 76%; top: 38%; }

html[data-active-module="violinKnowledge"] .theory-playhead {
  position: absolute;
  left: 7%;
  top: 24%;
  bottom: 20%;
  width: 2px;
  background: rgba(233,183,96,0.92);
  box-shadow: 0 0 1rem rgba(233,183,96,0.42);
  animation: theoryPlayheadSweep 4.8s ease-in-out infinite;
}

@keyframes theoryPlayheadSweep {
  0%, 14% { transform: translateX(0); opacity: 0.45; }
  56% { opacity: 1; }
  86%, 100% { transform: translateX(48vw); opacity: 0.45; }
}

html[data-active-module="violinKnowledge"] .theory-score-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

html[data-active-module="violinKnowledge"] .theory-score-actions button {
  min-height: 2.3rem;
  border: 1px solid rgba(233,183,96,0.18);
  border-radius: 0.5rem;
  background: rgba(0,0,0,0.25);
  color: rgba(235,232,222,0.76);
  font-weight: 800;
}

html[data-active-module="violinKnowledge"] .theory-score-actions button.is-primary {
  border-color: rgba(255,232,187,0.45);
  background: linear-gradient(180deg, rgba(245,207,139,0.92), rgba(145,100,49,0.88));
  color: rgba(24,17,8,0.96);
}

html[data-active-module="violinKnowledge"] .theory-practice-card {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 0;
  padding: clamp(0.82rem, 1.12vw, 1.12rem);
}

html[data-active-module="violinKnowledge"] .theory-practice-card span {
  color: rgba(233,183,96,0.86);
  font-size: 0.72rem;
  font-weight: 900;
}

html[data-active-module="violinKnowledge"] .theory-practice-card strong {
  color: rgba(255,238,205,0.98);
  font-size: clamp(1.05rem, 1.35vw, 1.45rem);
  line-height: 1.12;
}

html[data-active-module="violinKnowledge"] .theory-practice-card p,
html[data-active-module="violinKnowledge"] .theory-practice-card dd {
  margin: 0;
  color: rgba(235,232,222,0.62);
  font-size: clamp(0.68rem, 0.75vw, 0.82rem);
  line-height: 1.45;
}

html[data-active-module="violinKnowledge"] .theory-mini-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.34rem;
}

html[data-active-module="violinKnowledge"] .theory-mini-meter b {
  display: grid;
  min-height: 2.1rem;
  place-items: center;
  border-radius: 0.42rem;
  background: rgba(233,183,96,0.12);
  color: rgba(255,225,165,0.92);
}

html[data-active-module="violinKnowledge"] .theory-practice-card dl {
  display: grid;
  gap: 0.44rem;
  margin: 0;
}

html[data-active-module="violinKnowledge"] .theory-practice-card dl > div {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
}

html[data-active-module="violinKnowledge"] .theory-practice-card dt {
  display: grid;
  height: 2rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,232,187,0.9);
  font-weight: 900;
}

@media (max-width: 1180px) {
  html[data-active-module="violinKnowledge"] .theory-lab-grid {
    grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 1.6fr);
  }

  html[data-active-module="violinKnowledge"] .theory-practice-card { display: none; }
}


/* Note atlas detail: keep the right display as large as the entry overview panel. */
.knowledge-notes-stage.is-category-open .knowledge-note-demo {
  height: 100% !important;
  min-height: 0 !important;
  align-content: center !important;
  gap: clamp(0.78rem, 1.05vw, 1rem) !important;
  padding: clamp(1rem, 1.55vw, 1.42rem) !important;
}

.knowledge-notes-stage.is-category-open .knowledge-note-symbol-hero,
.knowledge-notes-stage.is-category-open .knowledge-note-duration-hero,
.knowledge-notes-stage.is-category-open .knowledge-note-rest-hero,
.knowledge-notes-stage.is-category-open .knowledge-note-key-hero,
.knowledge-notes-stage.is-category-open .knowledge-note-interval-hero {
  min-height: clamp(5.4rem, 12vh, 7rem) !important;
}

.knowledge-notes-stage.is-category-open .knowledge-note-staff-demo {
  min-height: clamp(6.5rem, 14vh, 8.2rem) !important;
}

.knowledge-notes-stage.is-category-open .knowledge-note-symbol-hero span {
  font-size: clamp(2.8rem, 5vw, 4.6rem) !important;
}

.knowledge-notes-stage.is-category-open .knowledge-note-demo h3 {
  font-size: clamp(1.15rem, 1.65vw, 1.55rem) !important;
}

.knowledge-notes-stage.is-category-open .knowledge-note-demo > p:not(.eyebrow),
.knowledge-notes-stage.is-category-open .knowledge-note-demo-caption {
  font-size: clamp(0.82rem, 0.92vw, 0.98rem) !important;
  line-height: 1.55 !important;
}


/* Note atlas detail buttons: equal-size symbols filling the whole left panel. */
.knowledge-notes-stage.is-category-open .knowledge-note-category-panel {
  min-height: 0 !important;
  height: 100% !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.knowledge-notes-stage.is-category-open .knowledge-note-grid.is-category-detail {
  display: grid !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding-right: 0 !important;
}

.knowledge-notes-stage.is-category-open .knowledge-note-grid.is-category-detail .knowledge-note-group {
  min-height: 0 !important;
  height: 100% !important;
}

.knowledge-notes-stage.is-category-open .knowledge-note-grid.is-category-detail .knowledge-note-group > div {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  align-content: stretch !important;
  min-height: 0 !important;
  height: 100% !important;
  gap: clamp(0.28rem, 0.45vw, 0.5rem) !important;
}

.knowledge-notes-stage.is-category-open .knowledge-note-grid.is-category-detail button {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  place-items: center !important;
  padding: 0.12rem 0.28rem !important;
  font-size: clamp(0.58rem, 0.74vw, 0.86rem) !important;
  line-height: 1.08 !important;
  white-space: normal !important;
  text-align: center !important;
}

.knowledge-notes-stage.is-category-open .knowledge-note-grid.is-category-detail button.is-symbol {
  font-size: clamp(0.9rem, 1.18vw, 1.42rem) !important;
}

/* Theory lab interactions: make the music theory lab respond to lesson and transport state. */
html[data-active-module="violinKnowledge"] .theory-step-rail button {
  cursor: pointer;
}

html[data-active-module="violinKnowledge"] .theory-note {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

html[data-active-module="violinKnowledge"] .theory-note.is-active {
  border-color: rgba(255, 232, 187, 0.72);
  background: rgba(233, 183, 96, 0.34);
  box-shadow: 0 0 1.15rem rgba(233, 183, 96, 0.34);
  transform: translateY(-0.16rem) scale(1.08);
}

html[data-active-module="violinKnowledge"] .theory-playhead {
  animation: none !important;
  opacity: 0.36;
}

html[data-active-module="violinKnowledge"] .theory-lab-stage.is-playing .theory-playhead {
  animation: theoryPlayheadSweep 3.6s ease-in-out infinite !important;
  opacity: 1;
}

html[data-active-module="violinKnowledge"] .theory-current-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.55rem;
  color: rgba(235, 232, 222, 0.62);
  font-size: clamp(0.68rem, 0.76vw, 0.82rem);
}

html[data-active-module="violinKnowledge"] .theory-current-hint strong {
  display: inline-grid;
  min-width: 2.2rem;
  min-height: 1.55rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(233, 183, 96, 0.14);
  color: rgba(255, 232, 187, 0.96);
}

html[data-active-module="violinKnowledge"] .theory-note-bridge {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.44rem;
}

html[data-active-module="violinKnowledge"] .theory-note-bridge span {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
  padding: 0.48rem 0.56rem;
  border: 1px solid rgba(233, 183, 96, 0.15);
  border-radius: 0.48rem;
  background: rgba(255, 255, 255, 0.035);
}

html[data-active-module="violinKnowledge"] .theory-note-bridge b {
  color: rgba(233, 183, 96, 0.86);
  font-size: clamp(0.58rem, 0.64vw, 0.7rem);
}

html[data-active-module="violinKnowledge"] .theory-note-bridge strong {
  overflow: hidden;
  color: rgba(255, 238, 205, 0.96);
  font-size: clamp(0.68rem, 0.78vw, 0.86rem);
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-active-module="violinKnowledge"] .theory-rule-line {
  display: grid;
  gap: 0.22rem;
  padding: 0.58rem 0.64rem;
  border-left: 2px solid rgba(233, 183, 96, 0.62);
  border-radius: 0.38rem;
  background: rgba(233, 183, 96, 0.08);
}

html[data-active-module="violinKnowledge"] .theory-rule-line b {
  color: rgba(233, 183, 96, 0.92);
  font-size: 0.66rem;
}


/* Final top navigation size lock: keep profile, membership and every platform page on the music-library topbar dimensions. */
html[data-active-module] .topbar {
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.58rem, 0.9vw, 0.92rem) !important;
  min-height: auto !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: clamp(0.78rem, 1.2vw, 1.05rem) clamp(0.98rem, 1.6vw, 1.34rem) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(233, 183, 96, 0.12) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 9% 0%, rgba(233, 183, 96, 0.055), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.006)),
    rgba(3, 3, 3, 0.72) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module] .top-brand {
  flex: 0 0 auto !important;
  min-width: clamp(8.8rem, 12.8vw, 11rem) !important;
  max-width: clamp(8.8rem, 12.8vw, 11rem) !important;
  min-height: clamp(2.6rem, 3.1vw, 2.95rem) !important;
  padding: 0.14rem 0.38rem 0.14rem 0.16rem !important;
  gap: 0.52rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module] .brand-mark {
  width: clamp(2.38rem, 2.85vw, 2.68rem) !important;
  height: clamp(2.38rem, 2.85vw, 2.68rem) !important;
  border: 1px solid rgba(233, 183, 96, 0.36) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 40% 30%, rgba(255, 226, 165, 0.18), transparent 48%),
    rgba(233, 183, 96, 0.075) !important;
  color: rgba(255, 232, 187, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 1rem rgba(233, 183, 96, 0.1) !important;
  font-size: clamp(1.02rem, 1.22vw, 1.16rem) !important;
}

html[data-active-module] .top-brand strong {
  color: rgba(245, 242, 234, 0.96) !important;
  font-size: clamp(1rem, 1.08vw, 1.16rem) !important;
  font-weight: 820 !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
}

html[data-active-module] .top-brand em {
  display: none !important;
}

html[data-active-module] .top-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: clamp(2.9rem, 3.35vw, 3.22rem) !important;
  margin-inline: clamp(0.56rem, 0.95vw, 1rem) !important;
  padding: 0.17rem !important;
  gap: 0.17rem !important;
  border: 1px solid rgba(233, 183, 96, 0.13) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(0, 0, 0, 0.22)),
    rgba(0, 0, 0, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.046),
    0 0.75rem 1.8rem rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module] .top-nav .top-nav-group {
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

html[data-active-module] .top-nav .top-nav-group + .top-nav-group::before,
html[data-active-module] .top-nav .nav-item.is-active::after {
  display: none !important;
  content: none !important;
}

html[data-active-module] .top-nav .nav-item {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  grid-template-columns: none !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(2.52rem, 2.92vw, 2.82rem) !important;
  padding: 0.4rem 0.58rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(235, 232, 222, 0.62) !important;
  box-shadow: none !important;
  font-size: clamp(0.84rem, 0.94vw, 1rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html[data-active-module] .top-nav .nav-item:hover {
  border-color: rgba(233, 183, 96, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(233, 183, 96, 0.07), rgba(0, 0, 0, 0.2)),
    rgba(255, 255, 255, 0.018) !important;
  color: rgba(255, 232, 187, 0.9) !important;
}

html[data-active-module] .top-nav .nav-item.is-active {
  border-color: rgba(233, 183, 96, 0.4) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(233, 183, 96, 0.16), transparent 56%),
    linear-gradient(180deg, rgba(233, 183, 96, 0.13), rgba(0, 0, 0, 0.26)),
    rgba(8, 6, 4, 0.78) !important;
  color: rgba(255, 236, 198, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 196, 0.11),
    0 0 1rem rgba(233, 183, 96, 0.1) !important;
}

html[data-active-module] .top-nav .nav-icon {
  flex: 0 0 auto !important;
  margin-right: 0.22rem !important;
  color: rgba(233, 183, 96, 0.86) !important;
  font-size: 1em !important;
  line-height: 1 !important;
}

html[data-active-module] .top-nav .nav-item.is-active .nav-icon {
  color: rgba(255, 224, 156, 0.98) !important;
}

html[data-active-module] .user-area {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 0.34rem !important;
  margin-left: 0 !important;
}

html[data-active-module] .notification-button,
html[data-active-module] .user-profile {
  display: grid !important;
  width: clamp(2.56rem, 3vw, 2.86rem) !important;
  height: clamp(2.56rem, 3vw, 2.86rem) !important;
  min-width: clamp(2.56rem, 3vw, 2.86rem) !important;
  min-height: 0 !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(233, 183, 96, 0.16) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.22)),
    rgba(0, 0, 0, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.052),
    0 0.65rem 1.35rem rgba(0, 0, 0, 0.24) !important;
  overflow: hidden !important;
}

html[data-active-module] .notification-button:hover,
html[data-active-module] .user-profile:hover,
html[data-active-module] .user-profile[aria-expanded="true"] {
  border-color: rgba(233, 183, 96, 0.36) !important;
  background:
    linear-gradient(180deg, rgba(233, 183, 96, 0.09), rgba(0, 0, 0, 0.24)),
    rgba(6, 5, 4, 0.82) !important;
}

html[data-active-module] .user-profile img {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  opacity: 0.58 !important;
  filter: saturate(0.78) brightness(0.62) contrast(1.08) !important;
}

html[data-active-module] .user-profile > span,
html[data-active-module] .profile-settings-symbol {
  display: none !important;
}


/* Account menu navigation size lock: dropdown entries follow the music-library nav dimensions. */
.account-menu-popover {
  width: min(13.6rem, calc(100vw - 2rem)) !important;
  gap: 0.17rem !important;
  padding: 0.17rem !important;
  border-radius: 0.8rem !important;
}

.account-menu-popover button {
  display: grid !important;
  align-content: center !important;
  gap: 0.08rem !important;
  min-height: clamp(2.52rem, 2.92vw, 2.82rem) !important;
  padding: 0.4rem 0.58rem !important;
  border-radius: 0.64rem !important;
}

.account-menu-popover strong {
  font-size: clamp(0.84rem, 0.94vw, 1rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
}

.account-menu-popover span {
  font-size: clamp(0.68rem, 0.76vw, 0.78rem) !important;
  line-height: 1.08 !important;
}

/* Smart generation final live-card lock: no screenshot layer, fixed three-card proportions. */
html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
  --ai-generate-nav-h: clamp(4.2rem, 5.2vw, 5.35rem);
  display: grid !important;
  place-items: start center !important;
  width: 100% !important;
  height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h)) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(1.6rem, 2.45vw, 2.65rem) !important;
  width: min(92vw, 1548px) !important;
  height: min(41.8vw, 700px) !important;
  min-height: 560px !important;
  max-height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h) - 2rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  transform: translateY(105px) !important;
  filter: brightness(1.02) saturate(1.02) contrast(1.01) !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel,
html[data-active-module="nav-generate"] .generate-side-rail,
html[data-active-module="nav-generate"] .creation-entry-grid {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-side-rail,
html[data-active-module="nav-generate"] .creation-entry-grid {
  display: contents !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel,
html[data-active-module="nav-generate"] .creation-entry-card {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  justify-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(2rem, 2.6vw, 2.85rem) clamp(1.75rem, 2.2vw, 2.35rem) !important;
  border-radius: clamp(0.9rem, 1vw, 1.08rem) !important;
  text-align: center !important;
  transform: none !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel {
  border: 1px solid rgba(223, 146, 45, 0.48) !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(185, 117, 41, 0.13), transparent 45%),
    linear-gradient(180deg, rgba(34, 24, 13, 0.86), rgba(12, 9, 6, 0.92)) !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor {
  border: 1px solid rgba(94, 145, 180, 0.58) !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(35, 103, 126, 0.16), transparent 43%),
    linear-gradient(180deg, rgba(8, 29, 38, 0.9), rgba(5, 16, 22, 0.94)) !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  border: 1px solid rgba(164, 91, 185, 0.58) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(121, 57, 142, 0.2), transparent 45%),
    linear-gradient(180deg, rgba(28, 14, 34, 0.92), rgba(13, 8, 17, 0.94)) !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel::before,
html[data-active-module="nav-generate"] .generate-compose-panel::after,
html[data-active-module="nav-generate"] .creation-entry-card::after {
  display: none !important;
  content: none !important;
}

html[data-active-module="nav-generate"] .generate-title-block,
html[data-active-module="nav-generate"] .generate-title-block h3,
html[data-active-module="nav-generate"] .generate-title-block p,
html[data-active-module="nav-generate"] .generate-upload-card,
html[data-active-module="nav-generate"] .generate-upload-card > strong,
html[data-active-module="nav-generate"] .generate-upload-card > small,
html[data-active-module="nav-generate"] .generate-upload-card > em,
html[data-active-module="nav-generate"] .generate-submit-button,
html[data-active-module="nav-generate"] .generate-submit-button > strong,
html[data-active-module="nav-generate"] .creation-entry-title,
html[data-active-module="nav-generate"] .creation-entry-subtitle,
html[data-active-module="nav-generate"] .creation-entry-button,
html[data-active-module="nav-generate"] .creation-entry-button > * {
  opacity: 1 !important;
  visibility: visible !important;
  text-indent: 0 !important;
  color: inherit !important;
}

html[data-active-module="nav-generate"] .generate-title-block {
  display: grid !important;
  justify-items: center !important;
  gap: 0.72rem !important;
  margin: 0 0 clamp(1.4rem, 2.1vw, 2rem) !important;
}

html[data-active-module="nav-generate"] .generate-title-block h3,
html[data-active-module="nav-generate"] .creation-entry-title {
  margin: 0 !important;
  color: rgba(246, 244, 239, 0.96) !important;
  font-size: clamp(1.9rem, 2.15vw, 2.35rem) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
}

html[data-active-module="nav-generate"] .generate-title-block p,
html[data-active-module="nav-generate"] .creation-entry-subtitle {
  max-width: none !important;
  margin: 0 !important;
  color: rgba(235, 231, 222, 0.74) !important;
  font-size: clamp(0.9rem, 1.02vw, 1.08rem) !important;
  line-height: 1.52 !important;
}

html[data-active-module="nav-generate"] .generate-upload-card {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  align-self: stretch !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(1.2rem, 1.8vw, 1.9rem) !important;
  border: 1px dashed rgba(198, 129, 38, 0.62) !important;
  border-radius: 0.66rem !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(207, 145, 55, 0.12), transparent 38%),
    rgba(16, 10, 4, 0.44) !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-upload-card::before {
  display: block !important;
  content: "☁" !important;
  margin-bottom: clamp(0.75rem, 1.1vw, 1.02rem) !important;
  color: rgba(222, 158, 73, 0.92) !important;
  font-size: clamp(4.2rem, 5.6vw, 5.9rem) !important;
  line-height: 0.82 !important;
}

html[data-active-module="nav-generate"] .generate-upload-icon,
html[data-active-module="nav-generate"] .generate-submit-button > span,
html[data-active-module="nav-generate"] .creation-entry-icon,
html[data-active-module="nav-generate"] .generate-requirements-field,
html[data-active-module="nav-generate"] .score-generate-status,
html[data-active-module="nav-generate"] .generate-record-card {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-upload-card > strong {
  display: block !important;
  color: rgba(232, 168, 76, 0.98) !important;
  font-size: clamp(1rem, 1.12vw, 1.18rem) !important;
  font-weight: 800 !important;
}

html[data-active-module="nav-generate"] .generate-upload-card > small,
html[data-active-module="nav-generate"] .generate-upload-card > em {
  display: block !important;
  max-width: 22rem !important;
  margin-top: 0.76rem !important;
  color: rgba(226, 216, 195, 0.58) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.94rem) !important;
}

html[data-active-module="nav-generate"] .generate-submit-button,
html[data-active-module="nav-generate"] .creation-entry-button {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  align-self: end !important;
  width: 100% !important;
  height: clamp(3rem, 3.8vw, 3.55rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: clamp(1.25rem, 1.9vw, 1.8rem) 0 0 !important;
  border-radius: 0.58rem !important;
  color: rgba(255, 244, 225, 0.96) !important;
  font-size: clamp(1rem, 1.12vw, 1.16rem) !important;
  font-weight: 650 !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-submit-button {
  border: 1px solid rgba(234, 170, 83, 0.42) !important;
  background: linear-gradient(180deg, rgba(168, 113, 45, 0.82), rgba(105, 64, 24, 0.82)) !important;
}

html[data-active-module="nav-generate"] .creation-entry-card::before {
  position: static !important;
  display: block !important;
  content: "" !important;
  width: min(100%, 24.6rem) !important;
  height: min(32vh, 18.5rem) !important;
  min-height: 13rem !important;
  margin: clamp(1.8rem, 2.5vw, 2.7rem) auto auto !important;
  border: 0 !important;
  border-radius: 0.75rem !important;
  background: var(--generate-card-image) center / contain no-repeat !important;
  opacity: 1 !important;
  transform: none !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor {
  --generate-card-image: url("/platform/assets/generate-ref-card-editor.png?v=generate-reference-crops-20260604-3") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  --generate-card-image: url("/platform/assets/generate-ref-card-inspiration.png?v=generate-reference-crops-20260604-3") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor .creation-entry-button {
  border: 1px solid rgba(123, 169, 211, 0.38) !important;
  background: linear-gradient(180deg, rgba(65, 92, 124, 0.82), rgba(36, 58, 83, 0.82)) !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration .creation-entry-button {
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  border: 1px solid rgba(188, 113, 203, 0.36) !important;
  background: linear-gradient(180deg, rgba(93, 48, 105, 0.86), rgba(56, 31, 67, 0.88)) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
    overflow-x: auto !important;
    place-items: start !important;
  }

  html[data-active-module="nav-generate"] .nav-workbench-generate {
    width: 72rem !important;
    min-width: 72rem !important;
  }
}

/* Smart generation reference-ratio card image lock. */
html[data-active-module="nav-generate"] .nav-workbench-generate {
  display: grid !important;
  grid-template-columns: 514fr 510fr 514fr !important;
  gap: min(2.45vw, 41px) !important;
  width: min(86.4vw, 1620px, calc((var(--app-height, 100dvh) - var(--ai-generate-nav-h) - 105px - 1.2rem) * 1620 / 758)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1620 / 758 !important;
  transform: translateY(105px) !important;
  background: none !important;
  background-image: none !important;
  overflow: visible !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel,
html[data-active-module="nav-generate"] .creation-entry-card {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel {
  background-image: url("/platform/assets/ai-generate-card-upload-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor {
  background-image: url("/platform/assets/ai-generate-card-editor-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  background-image: url("/platform/assets/ai-generate-card-inspiration-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .generate-title-block,
html[data-active-module="nav-generate"] .generate-upload-card > *,
html[data-active-module="nav-generate"] .generate-upload-card::before,
html[data-active-module="nav-generate"] .generate-submit-button > *,
html[data-active-module="nav-generate"] .creation-entry-card > *,
html[data-active-module="nav-generate"] .creation-entry-card::before,
html[data-active-module="nav-generate"] .creation-entry-card::after {
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-active-module="nav-generate"] .generate-upload-card,
html[data-active-module="nav-generate"] .generate-submit-button,
html[data-active-module="nav-generate"] .creation-entry-card,
html[data-active-module="nav-generate"] .creation-entry-button {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  text-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-upload-card {
  position: absolute !important;
  left: 7.7% !important;
  top: 23.8% !important;
  width: 84% !important;
  height: 46.4% !important;
  display: block !important;
}

html[data-active-module="nav-generate"] .generate-submit-button {
  position: absolute !important;
  left: 12.1% !important;
  bottom: 7.6% !important;
  width: 76% !important;
  height: 8.6% !important;
  display: block !important;
  margin: 0 !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor,
html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor .creation-entry-button {
  position: absolute !important;
  left: 10.8% !important;
  bottom: 7.6% !important;
  width: 78.3% !important;
  height: 8.6% !important;
  display: block !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration .creation-entry-button {
  position: absolute !important;
  left: 10.8% !important;
  bottom: 7.6% !important;
  width: 78.3% !important;
  height: 8.6% !important;
  display: block !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .creation-entry-button {
  opacity: 1 !important;
  visibility: visible !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

@media (max-width: 1180px) {
  html[data-active-module="nav-generate"] .nav-workbench-generate {
    width: max(72rem, 86.4vw) !important;
    min-width: max(72rem, 86.4vw) !important;
  }
}

/* Smart generation final stage fit: preserve full reference proportions in the viewport. */
html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
  display: grid !important;
  place-items: start center !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate {
  grid-template-columns: 514fr 510fr 514fr !important;
  gap: clamp(1rem, 2vw, 41px) !important;
  width: min(78vw, calc((var(--app-height, 100dvh) - var(--ai-generate-nav-h) - 8.2rem) * 1620 / 758)) !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 1620 / 758 !important;
  max-height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h) - 8.2rem) !important;
  transform: translateY(72px) !important;
  margin: 0 auto !important;
  background: none !important;
  background-image: none !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel,
html[data-active-module="nav-generate"] .creation-entry-card {
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel {
  background-image: url("/platform/assets/ai-generate-card-upload-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor {
  background-image: url("/platform/assets/ai-generate-card-editor-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  background-image: url("/platform/assets/ai-generate-card-inspiration-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .generate-title-block,
html[data-active-module="nav-generate"] .generate-upload-icon,
html[data-active-module="nav-generate"] .generate-upload-card > strong,
html[data-active-module="nav-generate"] .generate-upload-card > small,
html[data-active-module="nav-generate"] .generate-upload-card > em,
html[data-active-module="nav-generate"] .generate-submit-button > span,
html[data-active-module="nav-generate"] .generate-submit-button > strong,
html[data-active-module="nav-generate"] .creation-entry-icon,
html[data-active-module="nav-generate"] .creation-entry-title,
html[data-active-module="nav-generate"] .creation-entry-subtitle,
html[data-active-module="nav-generate"] .creation-entry-card::before,
html[data-active-module="nav-generate"] .creation-entry-card::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-active-module="nav-generate"] .generate-upload-card,
html[data-active-module="nav-generate"] .generate-submit-button,
html[data-active-module="nav-generate"] .creation-entry-button {
  position: absolute !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-upload-card {
  left: 7.7% !important;
  top: 24% !important;
  width: 84% !important;
  height: 46% !important;
}

html[data-active-module="nav-generate"] .generate-submit-button {
  left: 12% !important;
  bottom: 7.4% !important;
  width: 76% !important;
  height: 8.7% !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor .creation-entry-button,
html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration .creation-entry-button {
  left: 10.8% !important;
  bottom: 7.4% !important;
  width: 78.3% !important;
  height: 8.7% !important;
}

/* Smart generation EOF lock: this must be the last nav-generate sizing rule. */
html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
  --ai-generate-nav-h: clamp(4.2rem, 5.2vw, 5.35rem);
  display: grid !important;
  place-items: start center !important;
  width: 100% !important;
  height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h)) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate {
  position: relative !important;
  display: block !important;
  width: min(96vw, 1672px) !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 1672 / 846 !important;
  max-height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-side-rail,
html[data-active-module="nav-generate"] .creation-entry-grid {
  position: static !important;
  display: contents !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel,
html[data-active-module="nav-generate"] .creation-entry-card {
  position: absolute !important;
  top: calc(27 / 846 * 100%) !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel {
  left: calc(25 / 1672 * 100%) !important;
  width: calc(514 / 1672 * 100%) !important;
  height: calc(758 / 846 * 100%) !important;
  background-image: url("/platform/assets/ai-generate-card-upload-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor {
  left: calc(580 / 1672 * 100%) !important;
  width: calc(510 / 1672 * 100%) !important;
  height: calc(758 / 846 * 100%) !important;
  background-image: url("/platform/assets/ai-generate-card-editor-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  left: calc(1130 / 1672 * 100%) !important;
  width: calc(514 / 1672 * 100%) !important;
  height: calc(758 / 846 * 100%) !important;
  background-image: url("/platform/assets/ai-generate-card-inspiration-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .generate-title-block,
html[data-active-module="nav-generate"] .generate-upload-icon,
html[data-active-module="nav-generate"] .generate-upload-card > *,
html[data-active-module="nav-generate"] .generate-upload-card::before,
html[data-active-module="nav-generate"] .generate-upload-card::after,
html[data-active-module="nav-generate"] .generate-submit-button > *,
html[data-active-module="nav-generate"] .generate-submit-button::before,
html[data-active-module="nav-generate"] .generate-submit-button::after,
html[data-active-module="nav-generate"] .creation-entry-card > *:not(.creation-entry-button),
html[data-active-module="nav-generate"] .creation-entry-card::before,
html[data-active-module="nav-generate"] .creation-entry-card::after,
html[data-active-module="nav-generate"] .generate-requirements-field,
html[data-active-module="nav-generate"] .score-generate-status,
html[data-active-module="nav-generate"] .generate-record-card {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-active-module="nav-generate"] .generate-upload-card,
html[data-active-module="nav-generate"] .generate-submit-button,
html[data-active-module="nav-generate"] .creation-entry-button {
  position: absolute !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-upload-card {
  left: 7.7% !important;
  top: 24% !important;
  width: 84% !important;
  height: 46.4% !important;
}

html[data-active-module="nav-generate"] .generate-submit-button {
  left: 12% !important;
  bottom: 7.4% !important;
  width: 76% !important;
  height: 8.7% !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor .creation-entry-button,
html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration .creation-entry-button {
  left: 10.8% !important;
  bottom: 7.4% !important;
  width: 78.3% !important;
  height: 8.7% !important;
}

/* Smart generation native reference width: match the desktop mockup scale and body coordinates. */
html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
  --ai-generate-nav-h: clamp(4.2rem, 5.2vw, 5.35rem);
  display: grid !important;
  place-items: start center !important;
  width: 100% !important;
  height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h)) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate {
  position: relative !important;
  display: block !important;
  width: min(96vw, 1672px) !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 1672 / 846 !important;
  max-height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel,
html[data-active-module="nav-generate"] .creation-entry-card {
  top: calc(27 / 846 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel {
  left: calc(25 / 1672 * 100%) !important;
  width: calc(514 / 1672 * 100%) !important;
  height: calc(758 / 846 * 100%) !important;
  background-image: url("/platform/assets/ai-generate-card-upload-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor {
  left: calc(580 / 1672 * 100%) !important;
  width: calc(510 / 1672 * 100%) !important;
  height: calc(758 / 846 * 100%) !important;
  background-image: url("/platform/assets/ai-generate-card-editor-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  left: calc(1130 / 1672 * 100%) !important;
  width: calc(514 / 1672 * 100%) !important;
  height: calc(758 / 846 * 100%) !important;
  background-image: url("/platform/assets/ai-generate-card-inspiration-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

@media (max-width: 1180px) {
  html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
    overflow-x: auto !important;
    place-items: start !important;
  }

  html[data-active-module="nav-generate"] .nav-workbench-generate {
    width: 72rem !important;
    min-width: 72rem !important;
  }
}


/* Account surfaces library palette lock: profile, support, preferences and account menu match the music library. */
.account-menu-popover {
  border-color: rgba(233, 183, 96, 0.26) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(233, 183, 96, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(0, 0, 0, 0.32)),
    rgba(3, 3, 3, 0.97) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 1.25rem 3rem rgba(0, 0, 0, 0.58),
    0 0 1.15rem rgba(233, 183, 96, 0.07) !important;
}

.account-menu-popover::before {
  border-top-color: rgba(233, 183, 96, 0.24) !important;
  border-left-color: rgba(233, 183, 96, 0.24) !important;
  background: rgba(3, 3, 3, 0.98) !important;
}

.account-menu-popover button {
  border-color: rgba(233, 183, 96, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(0, 0, 0, 0.24)),
    rgba(4, 4, 4, 0.88) !important;
  color: rgba(245, 242, 234, 0.94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.account-menu-popover button:hover,
.account-menu-popover button:focus-visible {
  border-color: rgba(233, 183, 96, 0.42) !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(233, 183, 96, 0.15), transparent 48%),
    linear-gradient(180deg, rgba(233, 183, 96, 0.11), rgba(0, 0, 0, 0.26)),
    rgba(7, 6, 4, 0.92) !important;
  color: rgba(255, 236, 198, 0.98) !important;
}

.account-menu-popover strong {
  color: rgba(255, 232, 187, 0.98) !important;
}

.account-menu-popover span {
  color: rgba(235, 232, 222, 0.64) !important;
}

html[data-active-module="profile"],
html[data-active-module="profile"] body,
html[data-active-module="support"],
html[data-active-module="support"] body {
  background: #000 !important;
}

html[data-active-module="profile"] .app-shell,
html[data-active-module="profile"] .main-stage,
html[data-active-module="support"] .app-shell,
html[data-active-module="support"] .main-stage {
  background:
    radial-gradient(circle at 16% 0%, rgba(233, 183, 96, 0.055), transparent 28%),
    linear-gradient(180deg, #030303 0%, #050505 54%, #020202 100%) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"],
html[data-active-module="support"] .content-grid[data-module="support"],
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"],
html[data-active-module="profile"] .profile-dashboard {
  background:
    radial-gradient(circle at 18% 0%, rgba(233, 183, 96, 0.075), transparent 32%),
    linear-gradient(180deg, #030303 0%, #050505 54%, #030303 100%) !important;
  color: rgba(245, 242, 234, 0.94) !important;
}

html[data-active-module="profile"] :is(
  .profile-glass-card,
  .profile-practice-current,
  .profile-member-metrics span,
  .profile-benefit-grid span,
  .profile-piece-list span,
  .profile-settings-list span,
  .profile-settings-list button,
  .profile-collab-grid button
),
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(
  .support-entry-panel,
  .support-service-panel,
  .support-guess-block,
  .support-ask-box,
  .support-faq-category-panel,
  .support-human-fallback,
  .support-answer-content,
  .support-gallery-tabs,
  .support-board-card,
  .support-guess-list button,
  .support-faq-buttons button,
  .support-upload-entry,
  .support-block-title span,
  .support-empty-tags span,
  .answer-feedback button
) {
  border-color: rgba(233, 183, 96, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.023), rgba(0, 0, 0, 0.28)),
    rgba(5, 5, 5, 0.88) !important;
  color: rgba(245, 242, 234, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.052),
    0 1rem 2.5rem rgba(0, 0, 0, 0.42),
    0 0 1rem rgba(233, 183, 96, 0.045) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module="profile"] .profile-hero-card,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-entry-panel {
  border-color: rgba(233, 183, 96, 0.24) !important;
  background:
    radial-gradient(circle at 10% 18%, rgba(233, 183, 96, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(0, 0, 0, 0.34)),
    rgba(4, 4, 4, 0.92) !important;
}

html[data-active-module="profile"] :is(.profile-settings-list span, .profile-settings-list button),
html[data-active-module="profile"] .profile-service-card,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(.support-guess-block, .support-faq-category-panel, .support-human-fallback) {
  border-color: rgba(233, 183, 96, 0.22) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(233, 183, 96, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(0, 0, 0, 0.3)),
    rgba(4, 4, 4, 0.91) !important;
}

html[data-active-module="profile"] :is(.profile-recent-card .profile-practice-current, .profile-collab-grid button:hover, .profile-settings-list button:hover),
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(
  .support-gallery-tabs button:hover,
  .support-board-card:hover,
  .support-board-card.is-active,
  .support-guess-list button:hover,
  .support-guess-list button.is-active,
  .support-faq-buttons button:hover,
  .support-upload-entry:hover,
  .glass-button:hover
) {
  border-color: rgba(233, 183, 96, 0.38) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(233, 183, 96, 0.15), transparent 36%),
    linear-gradient(180deg, rgba(233, 183, 96, 0.1), rgba(0, 0, 0, 0.26)),
    rgba(7, 6, 5, 0.92) !important;
  color: rgba(255, 236, 198, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 196, 0.08),
    0 0.82rem 1.7rem rgba(0, 0, 0, 0.3),
    0 0 1.1rem rgba(233, 183, 96, 0.08) !important;
}

html[data-active-module="profile"] :is(.eyebrow, .profile-list-label, .profile-benefit-grid b, .profile-piece-list b, .profile-collab-grid button span),
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(.eyebrow, .support-block-title span, .support-card-icon) {
  color: rgba(233, 183, 96, 0.9) !important;
}

html[data-active-module="profile"] :is(h3, strong, b),
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(h3, strong, b, .support-gallery-topbar h3, .support-entry-head h3, .support-block-title strong, .support-human-copy strong, .support-faq-category strong, .support-upload-entry span, .support-board-card strong) {
  color: rgba(245, 242, 234, 0.97) !important;
}

html[data-active-module="profile"] :is(p, small),
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(p, small, .support-entry-head p:not(.eyebrow), .support-faq-copy, .support-human-copy p, .support-wait-copy, .support-guess-list span) {
  color: rgba(235, 232, 222, 0.66) !important;
}

html[data-active-module="profile"] :is(.glass-button, .profile-collab-grid button, .profile-settings-list button),
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(.glass-button, .primary-action) {
  border-color: rgba(233, 183, 96, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(233, 183, 96, 0.09), rgba(0, 0, 0, 0.26)),
    rgba(3, 3, 3, 0.76) !important;
  color: rgba(255, 232, 187, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 0.55rem 1.2rem rgba(0, 0, 0, 0.28) !important;
}

html[data-active-module="profile"] :is(.glass-button.primary, .profile-action-row .glass-button:first-child),
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(.glass-button.primary, .primary-action) {
  border-color: rgba(233, 183, 96, 0.48) !important;
  background:
    linear-gradient(180deg, rgba(233, 183, 96, 0.24), rgba(78, 49, 12, 0.34)),
    rgba(5, 5, 5, 0.88) !important;
  color: rgba(255, 236, 198, 0.99) !important;
}

html[data-active-module="profile"] .profile-avatar-mark,
html[data-active-module="profile"] .profile-benefit-grid b,
html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-card-icon {
  border-color: rgba(233, 183, 96, 0.36) !important;
  background:
    radial-gradient(circle at 36% 22%, rgba(255, 226, 165, 0.2), transparent 42%),
    rgba(233, 183, 96, 0.09) !important;
  color: rgba(255, 232, 187, 0.98) !important;
  box-shadow: 0 0 1.15rem rgba(233, 183, 96, 0.13) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(.support-ask-box textarea, .support-human-dialog textarea) {
  border-color: rgba(233, 183, 96, 0.2) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(0, 0, 0, 0.24)),
    rgba(3, 3, 3, 0.82) !important;
  color: rgba(245, 242, 234, 0.92) !important;
  box-shadow: inset 0 0 0 1px rgba(233, 183, 96, 0.1) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] :is(textarea, input)::placeholder {
  color: rgba(235, 232, 222, 0.48) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] textarea:focus {
  border-color: rgba(233, 183, 96, 0.44) !important;
  box-shadow:
    inset 0 0 0 1px rgba(233, 183, 96, 0.28),
    0 0 0 4px rgba(233, 183, 96, 0.08) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-answer-content::before {
  background: rgba(233, 183, 96, 0.34) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-bg-flow {
  background:
    radial-gradient(ellipse at 58% 30%, rgba(233, 183, 96, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 30%, rgba(0, 0, 0, 0.32)) !important;
  opacity: 0.42 !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > .support-page[data-customer-service-theme="exhibition"] .support-bg-violin {
  filter: saturate(0.58) contrast(1.04) brightness(0.55) !important;
  opacity: 0.08 !important;
}

/* Single-note reader framework: one staff note, immediate pitch/string/finger answer. */
html[data-active-module="violinKnowledge"] .theory-note-reader-stage {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-header .knowledge-3d-title {
  max-width: min(48rem, 74%) !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(30rem, 1.42fr) minmax(16rem, 0.58fr);
  gap: clamp(0.72rem, 1vw, 1rem);
  min-height: 0;
}

html[data-active-module="violinKnowledge"] .theory-reader-board {
  display: grid;
  grid-template-rows: auto minmax(16rem, 1fr) auto auto auto;
  gap: clamp(0.58rem, 0.82vw, 0.9rem);
  min-height: 0;
}

html[data-active-module="violinKnowledge"] .theory-single-staff {
  min-height: clamp(19.5rem, 45vh, 27rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, rgba(233, 183, 96, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    rgba(0, 0, 0, 0.26);
}

html[data-active-module="violinKnowledge"] .theory-single-staff .theory-clef {
  left: 12%;
  top: 38%;
}

html[data-active-module="violinKnowledge"] .theory-reader-note {
  position: absolute;
  left: 52%;
  top: clamp(2.15rem, var(--note-y, 55%), calc(100% - 2.15rem));
  z-index: 2;
  display: grid;
  min-width: clamp(4.1rem, 5.4vw, 5.7rem);
  height: clamp(3.1rem, 4vw, 4.25rem);
  place-items: center;
  border: 1px solid rgba(255, 232, 187, 0.5);
  border-radius: 999px;
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 244, 211, 0.45), transparent 34%),
    linear-gradient(180deg, rgba(233, 183, 96, 0.42), rgba(98, 66, 29, 0.58));
  box-shadow:
    0 0.8rem 2.2rem rgba(0, 0, 0, 0.34),
    0 0 1.35rem rgba(233, 183, 96, 0.28);
  color: rgba(255, 241, 211, 0.98);
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 940;
  letter-spacing: 0;
  transform: translate(-50%, -50%);
  transition: top 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

html[data-active-module="violinKnowledge"] .theory-reader-note::after {
  content: "";
  position: absolute;
  right: -0.85rem;
  top: -1.75rem;
  width: 2px;
  height: 2.5rem;
  border-radius: 999px;
  background: rgba(255, 232, 187, 0.62);
}

html[data-active-module="violinKnowledge"] .theory-reader-ledger {
  position: absolute;
  left: calc(52% - 3.2rem);
  top: var(--ledger-y, 75%);
  width: 6.4rem;
  height: 1px;
  background: rgba(255, 236, 198, 0.45);
}

html[data-active-module="violinKnowledge"] .theory-reader-axis {
  position: absolute;
  left: 52%;
  top: 26%;
  bottom: 16%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(233, 183, 96, 0.42), transparent);
}

html[data-active-module="violinKnowledge"] .theory-reader-control-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

html[data-active-module="violinKnowledge"] .theory-reader-control-row button,
html[data-active-module="violinKnowledge"] .theory-note-index-strip button {
  min-height: 2.35rem;
  border: 1px solid rgba(233, 183, 96, 0.2);
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(235, 232, 222, 0.78);
  font-weight: 850;
  cursor: pointer;
}

html[data-active-module="violinKnowledge"] .theory-reader-control-row button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

html[data-active-module="violinKnowledge"] .theory-reader-control-row button.is-primary {
  border-color: rgba(255, 232, 187, 0.48);
  background: linear-gradient(180deg, rgba(245, 207, 139, 0.94), rgba(145, 100, 49, 0.9));
  color: rgba(24, 17, 8, 0.96);
}

html[data-active-module="violinKnowledge"] .theory-reader-neighbors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  color: rgba(235, 232, 222, 0.58);
  font-size: clamp(0.68rem, 0.78vw, 0.86rem);
}

html[data-active-module="violinKnowledge"] .theory-reader-neighbors b {
  display: grid;
  min-height: 1.75rem;
  place-items: center;
  padding: 0 0.72rem;
  border-radius: 999px;
  background: rgba(233, 183, 96, 0.14);
  color: rgba(255, 232, 187, 0.96);
}

html[data-active-module="violinKnowledge"] .theory-reader-neighbors span:last-child {
  text-align: right;
}

html[data-active-module="violinKnowledge"] .theory-note-index-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2.75rem, 1fr));
  gap: 0.32rem;
}

html[data-active-module="violinKnowledge"] .theory-note-index-strip button {
  min-height: 2rem;
  padding: 0 0.2rem;
  font-size: clamp(0.66rem, 0.76vw, 0.86rem);
}

html[data-active-module="violinKnowledge"] .theory-note-index-strip button.is-active {
  border-color: rgba(255, 232, 187, 0.56);
  background: rgba(233, 183, 96, 0.22);
  color: rgba(255, 238, 205, 0.98);
}

html[data-active-module="violinKnowledge"] .theory-reader-answer {
  align-content: start;
  grid-template-rows: auto auto auto auto auto;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}

html[data-active-module="violinKnowledge"] .theory-reader-answer > strong {
  font-size: clamp(2.4rem, 4.2vw, 4.8rem);
  line-height: 0.94;
}

html[data-active-module="violinKnowledge"] .theory-answer-stack {
  display: grid;
  gap: 0.42rem;
}

html[data-active-module="violinKnowledge"] .theory-answer-stack div {
  display: grid;
  gap: 0.12rem;
  padding: 0.55rem 0.62rem;
  border: 1px solid rgba(233, 183, 96, 0.16);
  border-radius: 0.52rem;
  background: rgba(255, 255, 255, 0.04);
}

html[data-active-module="violinKnowledge"] .theory-answer-stack small {
  color: rgba(233, 183, 96, 0.82);
  font-size: 0.66rem;
  font-weight: 900;
}

html[data-active-module="violinKnowledge"] .theory-answer-stack b {
  color: rgba(255, 238, 205, 0.98);
  font-size: clamp(1rem, 1.28vw, 1.38rem);
  line-height: 1.12;
}

html[data-active-module="violinKnowledge"] .theory-answer-stack em {
  color: rgba(235, 232, 222, 0.56);
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.3;
}

html[data-active-module="violinKnowledge"] .theory-reader-formula {
  display: grid;
  min-height: 2.5rem;
  place-items: center;
  border-radius: 0.5rem;
  background: rgba(233, 183, 96, 0.12);
  color: rgba(255, 232, 187, 0.92);
  font-size: clamp(0.76rem, 0.9vw, 1rem);
  font-weight: 900;
}

@media (max-width: 1180px) {
  html[data-active-module="violinKnowledge"] .theory-reader-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-active-module="violinKnowledge"] .theory-reader-answer {
    display: none;
  }
}

/* Smart generation coordinate lock: preserve the 1672x820 reference stage exactly. */
html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
  --ai-generate-nav-h: clamp(4.2rem, 5.2vw, 5.35rem);
  display: grid !important;
  place-items: start center !important;
  width: 100% !important;
  height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h)) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate {
  position: relative !important;
  display: block !important;
  width: min(92vw, calc((var(--app-height, 100dvh) - var(--ai-generate-nav-h) - 2.2rem) * 1672 / 820)) !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 1672 / 820 !important;
  max-height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h) - 2.2rem) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: translateY(24px) !important;
  filter: brightness(1.02) saturate(1.02) contrast(1.01) !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-side-rail,
html[data-active-module="nav-generate"] .creation-entry-grid {
  position: static !important;
  display: contents !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel,
html[data-active-module="nav-generate"] .creation-entry-card {
  position: absolute !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel {
  left: 1.435% !important;
  top: 1.951% !important;
  width: 30.742% !important;
  height: 92.439% !important;
  background-image: url("/platform/assets/ai-generate-card-upload-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor {
  left: 34.629% !important;
  top: 1.951% !important;
  width: 30.502% !important;
  height: 92.439% !important;
  background-image: url("/platform/assets/ai-generate-card-editor-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  left: 67.584% !important;
  top: 1.951% !important;
  width: 30.742% !important;
  height: 92.439% !important;
  background-image: url("/platform/assets/ai-generate-card-inspiration-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .generate-title-block,
html[data-active-module="nav-generate"] .generate-upload-icon,
html[data-active-module="nav-generate"] .generate-upload-card > *,
html[data-active-module="nav-generate"] .generate-upload-card::before,
html[data-active-module="nav-generate"] .generate-upload-card::after,
html[data-active-module="nav-generate"] .generate-submit-button > *,
html[data-active-module="nav-generate"] .generate-submit-button::before,
html[data-active-module="nav-generate"] .generate-submit-button::after,
html[data-active-module="nav-generate"] .creation-entry-card > *:not(.creation-entry-button),
html[data-active-module="nav-generate"] .creation-entry-card::before,
html[data-active-module="nav-generate"] .creation-entry-card::after,
html[data-active-module="nav-generate"] .generate-requirements-field,
html[data-active-module="nav-generate"] .score-generate-status,
html[data-active-module="nav-generate"] .generate-record-card {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-active-module="nav-generate"] .generate-upload-card,
html[data-active-module="nav-generate"] .generate-submit-button,
html[data-active-module="nav-generate"] .creation-entry-button {
  position: absolute !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-upload-card {
  left: 7.7% !important;
  top: 24% !important;
  width: 84% !important;
  height: 46.4% !important;
}

html[data-active-module="nav-generate"] .generate-submit-button {
  left: 12% !important;
  bottom: 7.4% !important;
  width: 76% !important;
  height: 8.7% !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor .creation-entry-button,
html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration .creation-entry-button {
  left: 10.8% !important;
  bottom: 7.4% !important;
  width: 78.3% !important;
  height: 8.7% !important;
}

@media (max-width: 1180px) {
  html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
    overflow-x: auto !important;
    place-items: start !important;
  }

  html[data-active-module="nav-generate"] .nav-workbench-generate {
    width: 96rem !important;
    min-width: 96rem !important;
  }
}

/* Smart generation hit-area-only buttons: the card images already contain the visible buttons. */
html[data-active-module="nav-generate"] .generate-submit-button,
html[data-active-module="nav-generate"] .creation-entry-card.is-editor .creation-entry-button,
html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration .creation-entry-button {
  opacity: 0 !important;
  visibility: visible !important;
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: auto !important;
}

/* Smart generation final reference fit: use the desktop artwork body ratio, without the captured nav. */
html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
  --ai-generate-nav-h: clamp(4.2rem, 5.2vw, 5.35rem);
  --ai-generate-stage-w: min(92vw, calc((var(--app-height, 100dvh) - var(--ai-generate-nav-h) - 1.3rem) * 1672 / 846));
  display: grid !important;
  place-items: start center !important;
  width: 100% !important;
  height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h)) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate {
  position: relative !important;
  display: block !important;
  width: var(--ai-generate-stage-w) !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 1672 / 846 !important;
  max-height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h) - 1.3rem) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: translateY(27px) !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-side-rail,
html[data-active-module="nav-generate"] .creation-entry-grid {
  position: static !important;
  display: contents !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel,
html[data-active-module="nav-generate"] .creation-entry-card {
  position: absolute !important;
  top: 0 !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel {
  left: calc(25 / 1672 * 100%) !important;
  width: calc(514 / 1672 * 100%) !important;
  height: calc(758 / 846 * 100%) !important;
  background-image: url("/platform/assets/ai-generate-card-upload-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor {
  left: calc(580 / 1672 * 100%) !important;
  width: calc(510 / 1672 * 100%) !important;
  height: calc(758 / 846 * 100%) !important;
  background-image: url("/platform/assets/ai-generate-card-editor-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  left: calc(1130 / 1672 * 100%) !important;
  width: calc(514 / 1672 * 100%) !important;
  height: calc(758 / 846 * 100%) !important;
  background-image: url("/platform/assets/ai-generate-card-inspiration-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .generate-title-block,
html[data-active-module="nav-generate"] .generate-upload-icon,
html[data-active-module="nav-generate"] .generate-upload-card > *,
html[data-active-module="nav-generate"] .generate-upload-card::before,
html[data-active-module="nav-generate"] .generate-upload-card::after,
html[data-active-module="nav-generate"] .generate-submit-button > *,
html[data-active-module="nav-generate"] .generate-submit-button::before,
html[data-active-module="nav-generate"] .generate-submit-button::after,
html[data-active-module="nav-generate"] .creation-entry-card > *:not(.creation-entry-button),
html[data-active-module="nav-generate"] .creation-entry-card::before,
html[data-active-module="nav-generate"] .creation-entry-card::after,
html[data-active-module="nav-generate"] .generate-requirements-field,
html[data-active-module="nav-generate"] .score-generate-status,
html[data-active-module="nav-generate"] .generate-record-card {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-active-module="nav-generate"] .generate-upload-card,
html[data-active-module="nav-generate"] .generate-submit-button,
html[data-active-module="nav-generate"] .creation-entry-button {
  position: absolute !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-upload-card {
  left: 7.7% !important;
  top: 24% !important;
  width: 84% !important;
  height: 46.4% !important;
}

html[data-active-module="nav-generate"] .generate-submit-button {
  left: 12% !important;
  bottom: 7.4% !important;
  width: 76% !important;
  height: 8.7% !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor .creation-entry-button,
html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration .creation-entry-button {
  left: 10.8% !important;
  bottom: 7.4% !important;
  width: 78.3% !important;
  height: 8.7% !important;
}


/* Boxed reader text: keep high-position notes visually clear. */
html[data-active-module="violinKnowledge"] .theory-note-reader-stage {
  gap: clamp(0.62rem, 0.95vw, 1rem) !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-header {
  align-items: center !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-header .knowledge-3d-title {
  display: grid !important;
  grid-template-columns: auto minmax(17rem, 1fr) !important;
  grid-template-areas:
    "eyebrow summary"
    "title summary" !important;
  align-items: center !important;
  column-gap: clamp(0.72rem, 1vw, 1rem) !important;
  row-gap: 0.14rem !important;
  max-width: min(58rem, 82%) !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-header .knowledge-3d-title .eyebrow {
  grid-area: eyebrow !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-header .knowledge-3d-title h3 {
  grid-area: title !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-summary-box {
  grid-area: summary !important;
  margin: 0 !important;
  max-width: 36rem !important;
  padding: 0.48rem 0.68rem !important;
  border: 1px solid rgba(233, 183, 96, 0.2) !important;
  border-radius: 0.58rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.26) !important;
  color: rgba(235, 232, 222, 0.68) !important;
  font-size: clamp(0.7rem, 0.78vw, 0.84rem) !important;
  line-height: 1.42 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-board {
  grid-template-rows: auto minmax(17.5rem, 1fr) auto auto auto !important;
  gap: clamp(0.45rem, 0.7vw, 0.7rem) !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-board .theory-score-caption {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.34rem !important;
  padding: 0.34rem !important;
  border: 1px solid rgba(233, 183, 96, 0.16) !important;
  border-radius: 0.58rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-board .theory-score-caption :is(span, strong, em) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 1.55rem !important;
  padding: 0 0.56rem !important;
  border: 1px solid rgba(233, 183, 96, 0.13) !important;
  border-radius: 0.42rem !important;
  background: rgba(255, 255, 255, 0.035) !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-board .theory-score-caption strong {
  flex: 1 1 10rem !important;
  min-width: 10rem !important;
  font-size: clamp(0.78rem, 0.88vw, 0.98rem) !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-board .theory-score-caption em {
  max-width: 16rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-active-module="violinKnowledge"] .theory-single-staff {
  min-height: clamp(20.5rem, 46vh, 28rem) !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-note.is-stem-down::after {
  right: auto !important;
  left: -0.85rem !important;
  top: auto !important;
  bottom: -1.75rem !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-answer {
  align-content: start !important;
  gap: 0.48rem !important;
  grid-template-rows: auto auto auto auto auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  scrollbar-gutter: stable !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-answer > strong {
  font-size: clamp(2.15rem, 3.55vw, 4.15rem) !important;
  line-height: 0.9 !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-answer > p {
  margin: 0 !important;
  font-size: clamp(0.68rem, 0.82vw, 0.82rem) !important;
  line-height: 1.32 !important;
}

html[data-active-module="violinKnowledge"] .theory-answer-stack {
  gap: 0.34rem !important;
}

html[data-active-module="violinKnowledge"] .theory-answer-stack div {
  gap: 0.08rem !important;
  padding: 0.42rem 0.56rem !important;
}

html[data-active-module="violinKnowledge"] .theory-answer-stack b {
  font-size: clamp(0.92rem, 1.08vw, 1.16rem) !important;
  line-height: 1.06 !important;
}

html[data-active-module="violinKnowledge"] .theory-answer-stack em {
  font-size: 0.65rem !important;
  line-height: 1.2 !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-formula {
  min-height: 2.1rem !important;
}

@media (max-width: 980px) {
  html[data-active-module="violinKnowledge"] .theory-reader-header .knowledge-3d-title {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "eyebrow"
      "title"
      "summary" !important;
    max-width: 100% !important;
  }
}

/* Smart generation EOF lock: this must be the last nav-generate sizing rule. */
html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
  --ai-generate-nav-h: clamp(4.2rem, 5.2vw, 5.35rem);
  display: grid !important;
  place-items: start center !important;
  width: 100% !important;
  height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h)) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate {
  position: relative !important;
  display: block !important;
  width: min(96vw, 1672px) !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 1672 / 846 !important;
  max-height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-side-rail,
html[data-active-module="nav-generate"] .creation-entry-grid {
  position: static !important;
  display: contents !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel,
html[data-active-module="nav-generate"] .creation-entry-card {
  position: absolute !important;
  top: calc(27 / 846 * 100%) !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel {
  left: calc(25 / 1672 * 100%) !important;
  width: calc(514 / 1672 * 100%) !important;
  height: calc(758 / 846 * 100%) !important;
  background-image: url("/platform/assets/ai-generate-card-upload-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor {
  left: calc(580 / 1672 * 100%) !important;
  width: calc(510 / 1672 * 100%) !important;
  height: calc(758 / 846 * 100%) !important;
  background-image: url("/platform/assets/ai-generate-card-editor-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  left: calc(1130 / 1672 * 100%) !important;
  width: calc(514 / 1672 * 100%) !important;
  height: calc(758 / 846 * 100%) !important;
  background-image: url("/platform/assets/ai-generate-card-inspiration-clean.png?v=ai-generate-clean-card-assets-20260608-1") !important;
}

html[data-active-module="nav-generate"] .generate-title-block,
html[data-active-module="nav-generate"] .generate-upload-icon,
html[data-active-module="nav-generate"] .generate-upload-card > *,
html[data-active-module="nav-generate"] .generate-upload-card::before,
html[data-active-module="nav-generate"] .generate-upload-card::after,
html[data-active-module="nav-generate"] .generate-submit-button > *,
html[data-active-module="nav-generate"] .generate-submit-button::before,
html[data-active-module="nav-generate"] .generate-submit-button::after,
html[data-active-module="nav-generate"] .creation-entry-card > *:not(.creation-entry-button),
html[data-active-module="nav-generate"] .creation-entry-card::before,
html[data-active-module="nav-generate"] .creation-entry-card::after,
html[data-active-module="nav-generate"] .generate-requirements-field,
html[data-active-module="nav-generate"] .score-generate-status,
html[data-active-module="nav-generate"] .generate-record-card {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-active-module="nav-generate"] .generate-upload-card,
html[data-active-module="nav-generate"] .generate-submit-button,
html[data-active-module="nav-generate"] .creation-entry-button {
  position: absolute !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-upload-card {
  left: 7.7% !important;
  top: 24% !important;
  width: 84% !important;
  height: 46.4% !important;
}

html[data-active-module="nav-generate"] .generate-submit-button {
  left: 12% !important;
  bottom: 7.4% !important;
  width: 76% !important;
  height: 8.7% !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor .creation-entry-button,
html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration .creation-entry-button {
  left: 10.8% !important;
  bottom: 7.4% !important;
  width: 78.3% !important;
  height: 8.7% !important;
}


/* Note atlas large symbol cards: fill the category page instead of tiny buttons. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-atlas {
  grid-template-columns: minmax(34rem, 1.5fr) minmax(18rem, 0.72fr) !important;
  gap: clamp(0.72rem, 1.05vw, 1.05rem) !important;
  align-items: stretch !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-category-panel.is-card-browser {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: clamp(0.56rem, 0.78vw, 0.82rem) !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-category-brief {
  display: grid;
  gap: 0.16rem;
  min-height: clamp(3.2rem, 5vh, 4.2rem);
  padding: clamp(0.58rem, 0.84vw, 0.78rem) clamp(0.68rem, 0.96vw, 0.9rem);
  border: 1px solid rgba(228, 199, 127, 0.18);
  border-radius: 0.58rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014)),
    rgba(0, 0, 0, 0.22);
}

html[data-active-module="violinKnowledge"] .knowledge-note-category-brief strong {
  color: rgba(255, 238, 205, 0.96);
  font-size: clamp(0.78rem, 0.9vw, 1rem);
  line-height: 1.16;
}

html[data-active-module="violinKnowledge"] .knowledge-note-category-brief span {
  color: rgba(224, 229, 226, 0.62);
  font-size: clamp(0.68rem, 0.78vw, 0.86rem);
  line-height: 1.38;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(8.4rem, 1fr)) !important;
  grid-auto-rows: minmax(clamp(6.9rem, 12vh, 9.2rem), auto) !important;
  align-content: start !important;
  gap: clamp(0.48rem, 0.72vw, 0.72rem) !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: auto !important;
  padding: 0 0.28rem 0.2rem 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(228, 199, 127, 0.42) rgba(255, 255, 255, 0.045) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card {
  position: relative;
  display: grid !important;
  grid-template-rows: minmax(2.1rem, auto) auto minmax(2.1rem, 1fr) auto !important;
  align-items: start !important;
  justify-items: start !important;
  gap: 0.28rem !important;
  width: 100% !important;
  height: 100% !important;
  min-height: clamp(6.9rem, 12vh, 9.2rem) !important;
  padding: clamp(0.72rem, 0.92vw, 0.95rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.7rem !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(228, 199, 127, 0.12), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.02)),
    rgba(6, 7, 9, 0.58) !important;
  color: rgba(247, 249, 247, 0.94) !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: hidden !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card:hover {
  border-color: rgba(228, 199, 127, 0.42) !important;
  transform: translateY(-1px);
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.is-selected {
  border-color: rgba(255, 232, 187, 0.52) !important;
  background:
    radial-gradient(circle at 78% 10%, rgba(228, 199, 127, 0.22), transparent 40%),
    linear-gradient(145deg, rgba(228, 199, 127, 0.16), rgba(255, 255, 255, 0.026)),
    rgba(10, 8, 5, 0.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 1.6rem rgba(228, 199, 127, 0.13) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card-glyph {
  display: block;
  max-width: 100%;
  color: rgba(255, 238, 205, 0.98);
  font-size: clamp(1.52rem, 2.15vw, 2.45rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card.is-symbol .knowledge-note-symbol-card-glyph {
  font-size: clamp(2rem, 3.2vw, 3.4rem);
}

html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card strong {
  color: rgba(255, 238, 205, 0.96) !important;
  font-size: clamp(0.8rem, 0.94vw, 1.02rem) !important;
  line-height: 1.12 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card small {
  display: -webkit-box;
  color: rgba(224, 229, 226, 0.62) !important;
  font-size: clamp(0.62rem, 0.74vw, 0.82rem) !important;
  line-height: 1.28 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card em {
  align-self: end;
  display: inline-grid;
  max-width: 100%;
  min-height: 1.36rem;
  place-items: center;
  padding: 0 0.48rem;
  border-radius: 999px;
  background: rgba(228, 199, 127, 0.12);
  color: rgba(255, 232, 187, 0.82) !important;
  font-size: clamp(0.56rem, 0.66vw, 0.72rem) !important;
  font-style: normal;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-atlas {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
    display: none !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail {
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* AI generate final crop lock: remove the leftover bottom panel from editor/inspiration cards. */
html[data-active-module="nav-generate"] .nav-workbench-generate {
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor,
html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  height: calc(724 / 846 * 100%) !important;
  background-size: 100% auto !important;
  background-position: top center !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor .creation-entry-button,
html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration .creation-entry-button {
  bottom: calc(46 / 724 * 100%) !important;
}

/* AI generate real image cards: prevent legacy CSS backgrounds/pseudo elements from leaking through. */
html[data-active-module="nav-generate"] .generate-compose-panel,
html[data-active-module="nav-generate"] .creation-entry-card {
  height: calc(758 / 846 * 100%) !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .generate-compose-panel::before,
html[data-active-module="nav-generate"] .generate-compose-panel::after,
html[data-active-module="nav-generate"] .creation-entry-card::before,
html[data-active-module="nav-generate"] .creation-entry-card::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-active-module="nav-generate"] .ai-generate-card-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-upload-card,
html[data-active-module="nav-generate"] .generate-submit-button,
html[data-active-module="nav-generate"] .creation-entry-button {
  z-index: 2 !important;
  opacity: 0 !important;
  visibility: visible !important;
}

html[data-active-module="nav-generate"] .creation-entry-card.is-editor .creation-entry-button,
html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration .creation-entry-button {
  bottom: 7.4% !important;
}

/* AI generate image-card priority fix: previous child-hiding rules must not hide the art. */
html[data-active-module="nav-generate"] .generate-compose-panel > .ai-generate-card-art,
html[data-active-module="nav-generate"] .creation-entry-card > .ai-generate-card-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .creation-entry-card > *:not(.ai-generate-card-art):not(.creation-entry-button),
html[data-active-module="nav-generate"] .generate-compose-panel > *:not(.ai-generate-card-art):not(.score-generate-file-input):not(.generate-upload-card):not(.generate-submit-button) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* AI generate final visual crop: remove the last visible sliver from duplicated legacy art. */
html[data-active-module="nav-generate"] .creation-entry-card.is-editor,
html[data-active-module="nav-generate"] .creation-entry-card.is-inspiration {
  clip-path: inset(0 0 3.2% 0 round 0.85rem) !important;
}

/* AI generate rebuilt from the desktop reference image. */
html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
  --ai-generate-nav-h: clamp(4.2rem, 5.2vw, 5.35rem);
  display: grid !important;
  place-items: start center !important;
  width: 100% !important;
  height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h)) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference {
  position: relative !important;
  display: block !important;
  width: min(96vw, calc((var(--app-height, 100dvh) - var(--ai-generate-nav-h) - 0.55rem) * 1672 / 846), 1672px) !important;
  height: auto !important;
  aspect-ratio: 1672 / 846 !important;
  min-width: 0 !important;
  max-height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h) - 0.55rem) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: translateY(80px) !important;
}

html[data-active-module="nav-generate"] .generate-reference-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

/* AI generate three independent cards: keep each source image's native ratio. */
html[data-active-module="nav-generate"] .generate-reference-art {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card {
  position: absolute !important;
  z-index: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0.85rem !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  cursor: default !important;
}

html[data-active-module="nav-generate"] .generate-reference-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload {
  left: calc(25 / 1672 * 100%) !important;
  top: calc(27 / 846 * 100%) !important;
  width: calc(514 / 1672 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-editor {
  left: calc(580 / 1672 * 100%) !important;
  top: calc(27 / 846 * 100%) !important;
  width: calc(510 / 1672 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-inspiration {
  left: calc(1130 / 1672 * 100%) !important;
  top: calc(27 / 846 * 100%) !important;
  width: calc(514 / 1672 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-hotspot {
  position: absolute !important;
  z-index: 2 !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0.85rem !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload {
  left: calc(64 / 1672 * 100%) !important;
  top: calc(210 / 846 * 100%) !important;
  width: calc(433 / 1672 * 100%) !important;
  height: calc(379 / 846 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-submit {
  left: calc(87 / 1672 * 100%) !important;
  top: calc(664 / 846 * 100%) !important;
  width: calc(388 / 1672 * 100%) !important;
  height: calc(64 / 846 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-editor {
  left: calc(634 / 1672 * 100%) !important;
  top: calc(664 / 846 * 100%) !important;
  width: calc(400 / 1672 * 100%) !important;
  height: calc(64 / 846 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-inspiration {
  left: calc(1183 / 1672 * 100%) !important;
  top: calc(664 / 846 * 100%) !important;
  width: calc(400 / 1672 * 100%) !important;
  height: calc(64 / 846 * 100%) !important;
}

/* AI generate transparent hit areas: keep clicks, never draw over the reference image. */
html[data-active-module="nav-generate"] .generate-reference-hotspot,
html[data-active-module="nav-generate"] .generate-reference-hotspot.is-disabled,
html[data-active-module="nav-generate"] .generate-reference-hotspot.has-file {
  opacity: 0 !important;
  visibility: visible !important;
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* AI generate page background: match the learning tools backdrop. */
html[data-active-module="nav-generate"],
html[data-active-module="nav-generate"] body,
html[data-active-module="nav-generate"] .app-shell,
html[data-active-module="nav-generate"] .main-stage,
html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
  background:
    radial-gradient(circle at 12% 12%, rgba(190, 125, 54, 0.11), transparent 26%),
    radial-gradient(circle at 52% 42%, rgba(28, 112, 104, 0.10), transparent 30%),
    radial-gradient(circle at 84% 20%, rgba(100, 42, 110, 0.10), transparent 28%),
    linear-gradient(180deg, #050608 0%, #080b10 50%, #050608 100%) !important;
}

/* AI generate image-backed buttons: use the existing card artwork as the button surface. */
html[data-active-module="nav-generate"] button.generate-reference-card {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] button.generate-reference-card:focus-visible,
html[data-active-module="nav-generate"] .generate-reference-hotspot:focus-visible {
  outline: 2px solid rgba(255, 230, 178, 0.78) !important;
  outline-offset: 3px !important;
}

html[data-active-module="nav-generate"] .generate-reference-hotspot,
html[data-active-module="nav-generate"] .generate-reference-hotspot.is-disabled,
html[data-active-module="nav-generate"] .generate-reference-hotspot.has-file {
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-hotspot > img {
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  height: auto !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  user-select: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload > img {
  width: calc(514 / 433 * 100%) !important;
  left: calc(-39 / 433 * 100%) !important;
  top: calc(-183 / 379 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-submit > img {
  width: calc(514 / 388 * 100%) !important;
  left: calc(-62 / 388 * 100%) !important;
  top: calc(-637 / 64 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-editor > img {
  width: calc(510 / 400 * 100%) !important;
  left: calc(-54 / 400 * 100%) !important;
  top: calc(-637 / 64 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-inspiration > img {
  width: calc(514 / 400 * 100%) !important;
  left: calc(-53 / 400 * 100%) !important;
  top: calc(-637 / 64 * 100%) !important;
}

/* Library dedupe/version visibility: surface course quality and version history. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library {
  position: relative !important;
  overflow: visible !important;
}

html[data-active-module="nav-library"] .library-table-head,
html[data-active-module="nav-library"] .library-track-row {
  grid-template-columns: clamp(2.85rem, 3.5vw, 3.25rem) minmax(0, 1fr) minmax(4.25rem, 0.2fr) minmax(3.65rem, 0.16fr) minmax(3rem, 0.13fr) minmax(11.5rem, 0.36fr) !important;
}

html[data-active-module="nav-library"] .library-track-title {
  display: grid !important;
  gap: 0.16rem !important;
  min-width: 0 !important;
}

.library-quality-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
}

.library-quality-pills.is-compact {
  margin-top: 0.16rem;
}

.library-quality-pills span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 1.16rem;
  padding: 0.14rem 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(235, 235, 229, 0.72);
  font-size: 0.64rem;
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.library-quality-pills span.is-good,
.score-library-quality-panel.is-good {
  border-color: rgba(82, 211, 142, 0.34);
  background: rgba(34, 139, 88, 0.16);
  color: rgba(184, 252, 214, 0.94);
}

.library-quality-pills span.is-warning,
.score-library-quality-panel.is-warning {
  border-color: rgba(239, 184, 86, 0.36);
  background: rgba(151, 96, 24, 0.2);
  color: rgba(255, 224, 171, 0.96);
}

.library-quality-pills span.is-muted,
.score-library-quality-panel.is-muted {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(225, 225, 218, 0.64);
}

.library-quality-pills span.is-version {
  border-color: rgba(var(--library-ref-gold), 0.28);
  background: rgba(var(--library-ref-gold), 0.11);
  color: rgba(255, 226, 176, 0.92);
}

html[data-active-module="nav-library"] .library-row-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.38rem !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

html[data-active-module="nav-library"] .library-row-play {
  min-height: clamp(2.08rem, 2.52vw, 2.42rem) !important;
  border-radius: 0.58rem !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-row-actions .library-row-play {
  width: auto !important;
  min-width: clamp(6.7rem, 7.6vw, 8.2rem) !important;
  padding-inline: 0.72rem !important;
}

@media (max-width: 980px) {
  html[data-active-module="nav-library"] .library-table-head,
  html[data-active-module="nav-library"] .library-track-row {
    grid-template-columns: clamp(2.8rem, 10vw, 3.2rem) minmax(0, 1fr) auto !important;
  }

  html[data-active-module="nav-library"] .library-table-head span:nth-child(3),
  html[data-active-module="nav-library"] .library-table-head span:nth-child(4),
  html[data-active-module="nav-library"] .library-table-head span:nth-child(5),
  html[data-active-module="nav-library"] .library-row-difficulty,
  html[data-active-module="nav-library"] .library-row-free,
  html[data-active-module="nav-library"] .library-row-favorite {
    display: none !important;
  }

  html[data-active-module="nav-library"] .library-row-actions {
    justify-content: flex-end !important;
  }
}


/* Library operations final layer: five visible rows, stronger thumbnails, publish guard and version controls. */
html[data-active-module="nav-library"] .library-track-table {
  grid-template-rows: repeat(5, minmax(clamp(4.55rem, 8.6vh, 5.65rem), 1fr)) !important;
  min-height: clamp(24rem, 47vh, 31rem) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  min-height: clamp(4.55rem, 8.6vh, 5.65rem) !important;
}

html[data-active-module="nav-library"] .library-track-row img {
  width: clamp(3.65rem, 4.8vw, 4.7rem) !important;
  height: clamp(3.65rem, 4.8vw, 4.7rem) !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 0.66rem !important;
}

/* Library filter spacing: keep section titles from touching the panel edge. */
html[data-active-module="nav-library"] .library-filter-section {
  padding: clamp(0.86rem, 1.05vw, 1rem) clamp(0.78rem, 0.95vw, 0.92rem) clamp(0.78rem, 0.95vw, 0.92rem) !important;
  border-radius: 0.86rem !important;
  box-sizing: border-box !important;
}

html[data-active-module="nav-library"] .library-filter-title {
  display: block !important;
  padding: 0 0.08rem !important;
  margin: 0 0 clamp(0.52rem, 0.7vw, 0.68rem) !important;
  line-height: 1.2 !important;
}

html[data-active-module="nav-library"] .library-filter-grid {
  gap: clamp(0.42rem, 0.58vw, 0.6rem) !important;
}

/* Library drawer rollback: restore the previous detail affordance without exposing backend metadata. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library {
  position: relative !important;
  overflow: visible !important;
}

html[data-active-module="nav-library"] .library-table-head,
html[data-active-module="nav-library"] .library-track-row {
  grid-template-columns: clamp(2.85rem, 3.5vw, 3.25rem) minmax(0, 1fr) minmax(4.25rem, 0.2fr) minmax(3.65rem, 0.16fr) minmax(3rem, 0.13fr) minmax(11.5rem, 0.36fr) !important;
}

html[data-active-module="nav-library"] .library-row-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.38rem !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

html[data-active-module="nav-library"] .library-row-detail,
html[data-active-module="nav-library"] .library-row-play {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: clamp(2.08rem, 2.52vw, 2.42rem) !important;
  border-radius: 0.58rem !important;
  white-space: nowrap !important;
  font-size: clamp(0.76rem, 0.84vw, 0.88rem) !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

html[data-active-module="nav-library"] .library-row-detail {
  min-width: clamp(3.1rem, 3.8vw, 3.75rem) !important;
  padding: 0 0.6rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(238, 235, 226, 0.82) !important;
}

html[data-active-module="nav-library"] .library-row-actions .library-row-play {
  width: auto !important;
  min-width: clamp(6.7rem, 7.6vw, 8.2rem) !important;
  padding-inline: 0.72rem !important;
}

html[data-active-module="nav-library"] .library-detail-drawer {
  position: absolute !important;
  z-index: 24 !important;
  top: clamp(0.75rem, 1.1vw, 1rem) !important;
  right: clamp(0.75rem, 1.1vw, 1rem) !important;
  width: min(30.5rem, calc(100% - 1.5rem)) !important;
  max-height: calc(100% - 1.5rem) !important;
  padding: 0 !important;
  overflow: hidden auto !important;
  border: 1px solid rgba(232, 197, 126, 0.28) !important;
  border-radius: 1.05rem !important;
  background: radial-gradient(circle at 18% -8%, rgba(232, 197, 126, 0.18), transparent 38%), radial-gradient(circle at 92% 18%, rgba(140, 233, 242, 0.08), transparent 32%), linear-gradient(180deg, rgba(19, 17, 13, 0.98), rgba(5, 6, 8, 0.98)) !important;
  box-shadow: 0 1.8rem 4.2rem rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.045) inset, 0 0.55rem 2rem rgba(232, 197, 126, 0.08) inset !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html[data-active-module="nav-library"] .library-detail-close {
  position: sticky !important;
  top: 0.75rem !important;
  left: calc(100% - 2.55rem) !important;
  z-index: 2 !important;
  display: grid !important;
  width: 2.15rem !important;
  height: 2.15rem !important;
  margin: 0.72rem 0.72rem -2.68rem auto !important;
  place-items: center !important;
  border: 1px solid rgba(255, 239, 209, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(10, 9, 7, 0.72) !important;
  color: rgba(255, 240, 212, 0.95) !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="nav-library"] .library-detail-drawer .score-library-detail-panel {
  display: grid !important;
  gap: clamp(0.82rem, 1vw, 1rem) !important;
  margin: 0 !important;
  padding: clamp(1.05rem, 1.45vw, 1.35rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .score-library-detail-intro {
  display: grid !important;
  gap: 0.58rem !important;
  padding: 0.25rem 2.65rem 0.2rem 0 !important;
}

html[data-active-module="nav-library"] .score-library-detail-intro .eyebrow {
  color: rgba(232, 197, 126, 0.88) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
}

html[data-active-module="nav-library"] .score-library-detail-intro h3 {
  color: rgba(255, 251, 242, 0.98) !important;
  font-size: clamp(1.26rem, 1.75vw, 1.55rem) !important;
  line-height: 1.12 !important;
}

html[data-active-module="nav-library"] .score-library-detail-intro p {
  padding: 0.86rem 0.92rem !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 0.82rem !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(232, 237, 241, 0.78) !important;
  font-size: 0.86rem !important;
  line-height: 1.68 !important;
}

html[data-active-module="nav-library"] .score-library-detail-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.62rem !important;
}

html[data-active-module="nav-library"] .score-library-detail-stats > div {
  min-height: 4.25rem !important;
  padding: 0.72rem 0.76rem !important;
  border: 1px solid rgba(255, 255, 255, 0.085) !important;
  border-radius: 0.78rem !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)), rgba(255, 255, 255, 0.018) !important;
}

html[data-active-module="nav-library"] .score-library-detail-stats dt {
  color: rgba(232, 197, 126, 0.78) !important;
  font-size: 0.68rem !important;
}

html[data-active-module="nav-library"] .score-library-detail-stats dd {
  margin: 0.22rem 0 0 !important;
  color: rgba(250, 247, 237, 0.94) !important;
  font-size: 0.88rem !important;
  font-weight: 840 !important;
  line-height: 1.35 !important;
}

html[data-active-module="nav-library"] .score-library-route {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.48rem !important;
  padding: 0.76rem !important;
  border: 1px solid rgba(232, 197, 126, 0.13) !important;
  border-radius: 0.86rem !important;
  background: rgba(232, 197, 126, 0.055) !important;
}

html[data-active-module="nav-library"] .score-library-route span {
  display: flex !important;
  align-items: center !important;
  gap: 0.52rem !important;
  padding: 0.62rem 0.68rem !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 0.7rem !important;
  background: rgba(7, 8, 9, 0.28) !important;
  color: rgba(235, 236, 230, 0.82) !important;
  font-size: 0.78rem !important;
}

html[data-active-module="nav-library"] .score-library-route b {
  display: grid !important;
  width: 1.52rem !important;
  height: 1.52rem !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(232, 197, 126, 0.12) !important;
}

html[data-active-module="nav-library"] .score-library-detail-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.58rem !important;
  padding-top: 0.12rem !important;
}

html[data-active-module="nav-library"] .score-library-detail-actions :is(a, button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.55rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.72rem !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 239, 211, 0.9) !important;
  font-size: 0.82rem !important;
  font-weight: 860 !important;
  text-align: center !important;
  text-decoration: none !important;
}

html[data-active-module="nav-library"] .score-library-detail-actions .primary {
  background: linear-gradient(180deg, rgba(232, 197, 126, 0.96), rgba(174, 128, 53, 0.95)) !important;
  color: rgba(20, 14, 6, 0.96) !important;
  box-shadow: 0 0.75rem 1.5rem rgba(174, 128, 53, 0.18) !important;
}

@media (max-width: 980px) {
  html[data-active-module="nav-library"] .library-table-head,
  html[data-active-module="nav-library"] .library-track-row {
    grid-template-columns: clamp(2.8rem, 10vw, 3.2rem) minmax(0, 1fr) auto !important;
  }

  html[data-active-module="nav-library"] .library-table-head span:nth-child(3),
  html[data-active-module="nav-library"] .library-table-head span:nth-child(4),
  html[data-active-module="nav-library"] .library-table-head span:nth-child(5),
  html[data-active-module="nav-library"] .library-row-difficulty,
  html[data-active-module="nav-library"] .library-row-free,
  html[data-active-module="nav-library"] .library-row-favorite {
    display: none !important;
  }

  html[data-active-module="nav-library"] .library-row-detail {
    display: none !important;
  }

  html[data-active-module="nav-library"] .library-detail-drawer {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-height: 72dvh !important;
    border-radius: 0.8rem 0.8rem 0 0 !important;
  }
}

/* Library compact row lock: later rollback styles reintroduced a block/grid mix that stretched rows. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  grid-template-rows: auto auto auto min-content auto !important;
  align-content: start !important;
  overflow: visible !important;
}

html[data-active-module="nav-library"] .library-track-table {
  display: grid !important;
  grid-template-rows: repeat(5, clamp(4.6rem, 8.2vh, 5.35rem)) !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html[data-active-module="nav-library"] .library-track-row {
  display: grid !important;
  grid-template-columns: clamp(3.45rem, 4.4vw, 4.65rem) minmax(18rem, 1fr) minmax(4.25rem, 0.2fr) minmax(3.65rem, 0.16fr) minmax(3rem, 0.13fr) minmax(11.5rem, 0.36fr) !important;
  align-items: center !important;
  column-gap: clamp(0.78rem, 1.05vw, 1.15rem) !important;
  height: clamp(4.6rem, 8.2vh, 5.35rem) !important;
  min-height: clamp(4.6rem, 8.2vh, 5.35rem) !important;
  max-height: clamp(4.6rem, 8.2vh, 5.35rem) !important;
  padding-block: 0.3rem !important;
  box-sizing: border-box !important;
}

html[data-active-module="nav-library"] .library-track-row img {
  width: clamp(3.25rem, 4.25vw, 4.25rem) !important;
  height: clamp(3.25rem, 4.25vw, 4.25rem) !important;
  align-self: center !important;
  justify-self: start !important;
}

html[data-active-module="nav-library"] .library-track-title,
html[data-active-module="nav-library"] .library-row-difficulty,
html[data-active-module="nav-library"] .library-row-free,
html[data-active-module="nav-library"] .library-row-favorite,
html[data-active-module="nav-library"] .library-row-actions {
  min-width: 0 !important;
  align-self: center !important;
}

html[data-active-module="nav-library"] .library-track-title {
  display: grid !important;
  gap: 0.18rem !important;
}

html[data-active-module="nav-library"] .library-track-title strong,
html[data-active-module="nav-library"] .library-track-title span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-pagination {
  margin-top: clamp(0.62rem, 0.82vw, 0.9rem) !important;
}

/* Library pagination polish: compact segmented control instead of raw square buttons. */
html[data-active-module="nav-library"] .library-pagination {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.22rem !important;
  width: max-content !important;
  min-height: 0 !important;
  padding: 0.22rem !important;
  border: 1px solid rgba(255, 238, 204, 0.08) !important;
  border-radius: 0.72rem !important;
  background: rgba(8, 9, 10, 0.58) !important;
  box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.025) inset !important;
}

html[data-active-module="nav-library"] .library-pagination button {
  display: inline-grid !important;
  width: 1.72rem !important;
  height: 1.72rem !important;
  min-width: 1.72rem !important;
  min-height: 1.72rem !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 0.46rem !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(235, 229, 216, 0.78) !important;
  font-size: 0.78rem !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-pagination button:not(:disabled):hover {
  border-color: rgba(232, 197, 126, 0.36) !important;
  background: rgba(232, 197, 126, 0.12) !important;
  color: rgba(255, 239, 207, 0.96) !important;
}

html[data-active-module="nav-library"] .library-pagination button.is-active {
  border-color: rgba(246, 210, 142, 0.48) !important;
  background: linear-gradient(180deg, rgba(232, 197, 126, 0.96), rgba(176, 126, 48, 0.94)) !important;
  color: rgba(20, 13, 6, 0.98) !important;
  box-shadow: 0 0.4rem 0.9rem rgba(176, 126, 48, 0.22) !important;
}

html[data-active-module="nav-library"] .library-pagination button:disabled {
  opacity: 0.36 !important;
  cursor: default !important;
}

html[data-active-module="nav-library"] .library-pagination span {
  display: inline-grid !important;
  min-width: 1.1rem !important;
  height: 1.72rem !important;
  place-items: center !important;
  color: rgba(236, 229, 213, 0.56) !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
}

/* Library filter edge fill: make the left rail controls use the full rail width. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  padding-inline: clamp(0.38rem, 0.52vw, 0.58rem) !important;
  justify-items: stretch !important;
}

html[data-active-module="nav-library"] .library-filter-section {
  width: 100% !important;
  padding-inline: clamp(0.24rem, 0.34vw, 0.38rem) !important;
  justify-self: stretch !important;
}

html[data-active-module="nav-library"] .library-filter-grid {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
}

html[data-active-module="nav-library"] .library-filter-grid button {
  width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
}

/* Library top breathing room: keep the filter rail from touching the global nav. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library {
  margin-top: clamp(0.56rem, 0.78vw, 0.86rem) !important;
  height: calc(100% - clamp(0.56rem, 0.78vw, 0.86rem)) !important;
}

/* Library filter tighter edge fill. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  padding-inline: clamp(0.24rem, 0.34vw, 0.38rem) !important;
}

html[data-active-module="nav-library"] .library-filter-section {
  padding-inline: clamp(0.12rem, 0.2vw, 0.22rem) !important;
}

/* Library reference layout lock: restore the table-like composition from the approved screenshot. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library {
  margin-top: clamp(0.22rem, 0.34vw, 0.36rem) !important;
  height: calc(100% - clamp(0.22rem, 0.34vw, 0.36rem)) !important;
  grid-template-columns: clamp(13rem, 16.5vw, 13.8rem) minmax(0, 1fr) !important;
  column-gap: clamp(2.65rem, 3.5vw, 3.1rem) !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  padding: clamp(1rem, 1.3vw, 1.18rem) clamp(1rem, 1.25vw, 1.18rem) !important;
  justify-items: stretch !important;
}

html[data-active-module="nav-library"] .library-filter-section {
  width: 100% !important;
  padding: 0 !important;
}

html[data-active-module="nav-library"] .library-filter-title {
  margin-bottom: clamp(0.72rem, 0.85vw, 0.86rem) !important;
}

html[data-active-module="nav-library"] .library-filter-grid {
  width: 100% !important;
  gap: clamp(0.42rem, 0.55vw, 0.52rem) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button {
  width: 100% !important;
  min-height: clamp(1.42rem, 2vw, 1.72rem) !important;
  padding-inline: clamp(0.8rem, 1vw, 0.98rem) !important;
  border-radius: 0.46rem !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  grid-template-rows: auto auto clamp(1.9rem, 2.35vw, 2.2rem) min-content auto !important;
  align-content: start !important;
  overflow: visible !important;
}

html[data-active-module="nav-library"] .library-results-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(0.8rem, 1vw, 1rem) !important;
  min-height: clamp(2.32rem, 2.8vw, 2.62rem) !important;
}

html[data-active-module="nav-library"] .library-search-shell {
  width: min(38rem, 100%) !important;
}

html[data-active-module="nav-library"] .library-current-context {
  display: none !important;
}

html[data-active-module="nav-library"] .library-series-section {
  margin-top: clamp(0.5rem, 0.62vw, 0.68rem) !important;
}

html[data-active-module="nav-library"] .library-section-heading {
  margin-bottom: clamp(0.58rem, 0.72vw, 0.78rem) !important;
}

html[data-active-module="nav-library"] .library-series-grid {
  grid-template-columns: repeat(5, clamp(7.3rem, 9.35vw, 7.75rem)) clamp(7.3rem, 9.35vw, 7.75rem) !important;
  gap: clamp(0.62rem, 0.82vw, 0.78rem) !important;
}

html[data-active-module="nav-library"] .library-series-card {
  min-height: clamp(7.15rem, 9.15vw, 7.75rem) !important;
  border-radius: 0.48rem !important;
}

html[data-active-module="nav-library"] .library-table-head,
html[data-active-module="nav-library"] .library-track-row {
  grid-template-columns: clamp(3.45rem, 4.35vw, 3.9rem) minmax(24rem, 1fr) clamp(4.8rem, 6.1vw, 5.6rem) clamp(4.4rem, 5.5vw, 5rem) clamp(3.8rem, 4.8vw, 4.4rem) clamp(8rem, 10vw, 8.8rem) !important;
  column-gap: clamp(0.78rem, 1vw, 0.96rem) !important;
}

html[data-active-module="nav-library"] .library-table-head {
  display: grid !important;
  align-items: end !important;
  min-height: clamp(2rem, 2.4vw, 2.25rem) !important;
}

html[data-active-module="nav-library"] .library-table-head span {
  align-self: center !important;
}

html[data-active-module="nav-library"] .library-track-table {
  display: grid !important;
  grid-template-rows: repeat(5, clamp(4.2rem, 5.55vw, 4.75rem)) !important;
  min-height: 0 !important;
  height: auto !important;
}

html[data-active-module="nav-library"] .library-track-row {
  display: grid !important;
  height: clamp(4.2rem, 5.55vw, 4.75rem) !important;
  min-height: clamp(4.2rem, 5.55vw, 4.75rem) !important;
  max-height: clamp(4.2rem, 5.55vw, 4.75rem) !important;
  align-items: center !important;
  padding-block: 0.34rem !important;
}

html[data-active-module="nav-library"] .library-track-row img {
  width: clamp(3.28rem, 4.2vw, 3.72rem) !important;
  height: clamp(3.28rem, 4.2vw, 3.72rem) !important;
  border-radius: 0.54rem !important;
}

html[data-active-module="nav-library"] .library-track-title {
  display: grid !important;
  gap: 0.12rem !important;
}

html[data-active-module="nav-library"] .library-row-detail {
  display: none !important;
}

html[data-active-module="nav-library"] .library-row-actions {
  justify-content: flex-end !important;
}

html[data-active-module="nav-library"] .library-row-actions .library-row-play {
  min-width: clamp(7.2rem, 8.6vw, 8.15rem) !important;
}

html[data-active-module="nav-library"] .library-pagination {
  justify-self: center !important;
  margin-top: clamp(0.78rem, 1vw, 1rem) !important;
}

/* Library old screenshot restore: final pass for the approved table rhythm. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library {
  margin-top: clamp(0.22rem, 0.34vw, 0.36rem) !important;
  height: calc(100% - clamp(0.22rem, 0.34vw, 0.36rem)) !important;
  grid-template-columns: clamp(13rem, 16.45vw, 13.8rem) minmax(0, 1fr) !important;
  column-gap: clamp(2.65rem, 3.55vw, 3.15rem) !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  padding: clamp(0.96rem, 1.22vw, 1.14rem) clamp(1rem, 1.28vw, 1.2rem) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button {
  min-height: clamp(1.42rem, 1.92vw, 1.62rem) !important;
  padding-inline: clamp(0.78rem, 0.98vw, 0.96rem) !important;
}

html[data-active-module="nav-library"] .library-table-head,
html[data-active-module="nav-library"] .library-track-row {
  grid-template-columns: clamp(3.35rem, 4.2vw, 3.75rem) minmax(25.5rem, 1fr) clamp(4.55rem, 5.7vw, 5.15rem) clamp(4.22rem, 5.25vw, 4.78rem) clamp(3.65rem, 4.55vw, 4.2rem) clamp(8rem, 9.9vw, 8.7rem) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  height: clamp(4.26rem, 5.72vw, 4.82rem) !important;
  min-height: clamp(4.26rem, 5.72vw, 4.82rem) !important;
  max-height: clamp(4.26rem, 5.72vw, 4.82rem) !important;
}

html[data-active-module="nav-library"] .library-track-title {
  align-self: center !important;
  gap: 0.1rem !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-track-title strong,
html[data-active-module="nav-library"] .library-track-title small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

html[data-active-module="nav-library"] .library-track-title strong {
  line-height: 1.08 !important;
}

html[data-active-module="nav-library"] .library-track-title small {
  line-height: 1.12 !important;
}

html[data-active-module="nav-library"] .library-quality-pills.is-compact {
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  max-width: 100% !important;
  margin-top: 0.06rem !important;
}

html[data-active-module="nav-library"] .library-quality-pills.is-compact span {
  flex: 0 0 auto !important;
}

html[data-active-module="nav-library"] .library-row-favorite {
  justify-self: center !important;
}

html[data-active-module="nav-library"] .library-pagination {
  justify-self: center !important;
}

/* Library polished composition: integrated title, search and count toolbar. */
html[data-active-module="nav-library"] .library-results-head {
  display: grid !important;
  grid-template-columns: max-content minmax(22rem, 1fr) max-content !important;
  align-items: center !important;
  gap: clamp(0.78rem, 1.08vw, 1.05rem) !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  grid-column: 1 / -1 !important;
  min-height: clamp(2.65rem, 3.15vw, 2.95rem) !important;
}

html[data-active-module="nav-library"] .library-top-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.66rem !important;
  min-width: clamp(7rem, 9vw, 8rem) !important;
}

html[data-active-module="nav-library"] .library-top-title strong {
  color: rgba(255, 232, 178, 0.98) !important;
  font-size: clamp(1.02rem, 1.25vw, 1.16rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-top-title button {
  min-height: 1.75rem !important;
  padding: 0 0.62rem !important;
  border: 1px solid rgba(232, 197, 126, 0.24) !important;
  border-radius: 999px !important;
  background: rgba(232, 197, 126, 0.08) !important;
  color: rgba(255, 232, 186, 0.86) !important;
  font-size: 0.72rem !important;
  font-weight: 820 !important;
}

html[data-active-module="nav-library"] .library-search-shell {
  width: 100% !important;
  min-width: 0 !important;
  height: clamp(2.18rem, 2.7vw, 2.48rem) !important;
  padding-inline: clamp(0.82rem, 1.05vw, 1rem) !important;
  border-radius: 0.78rem !important;
  border: 1px solid rgba(232, 197, 126, 0.18) !important;
  background: linear-gradient(180deg, rgba(12, 13, 14, 0.9), rgba(5, 6, 7, 0.78)) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.025) inset, 0 0.7rem 1.8rem rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="nav-library"] .library-search-shell input {
  min-width: 0 !important;
  color: rgba(244, 239, 225, 0.94) !important;
  font-size: clamp(0.88rem, 1.02vw, 0.96rem) !important;
}

html[data-active-module="nav-library"] .library-search-shell input::placeholder {
  color: rgba(199, 204, 207, 0.5) !important;
}

/* Library search hit area: the full outer search bar is the input, not a tiny native field. */
html[data-active-module="nav-library"] .library-search-shell {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.5rem !important;
  cursor: text !important;
}

html[data-active-module="nav-library"] .library-search-shell input {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: text !important;
}

html[data-active-module="nav-library"] .library-search-shell input:focus {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-search-shell:focus-within {
  border-color: rgba(244, 212, 151, 0.42) !important;
  box-shadow: 0 0 0 1px rgba(244, 212, 151, 0.16) inset, 0 0.7rem 1.8rem rgba(0, 0, 0, 0.18) !important;
}

/* Library six-row page: show one extra track without crowding the controls. */
html[data-active-module="nav-library"] .library-track-table {
  grid-template-rows: repeat(6, clamp(3.62rem, 4.72vw, 4.08rem)) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  height: clamp(3.62rem, 4.72vw, 4.08rem) !important;
  min-height: clamp(3.62rem, 4.72vw, 4.08rem) !important;
  max-height: clamp(3.62rem, 4.72vw, 4.08rem) !important;
  padding-block: 0.26rem !important;
}

html[data-active-module="nav-library"] .library-track-row img {
  width: clamp(2.9rem, 3.72vw, 3.28rem) !important;
  height: clamp(2.9rem, 3.72vw, 3.28rem) !important;
}

html[data-active-module="nav-library"] .library-track-title {
  gap: 0.06rem !important;
}

html[data-active-module="nav-library"] .library-quality-pills.is-compact {
  transform: scale(0.94) !important;
  transform-origin: left center !important;
}

html[data-active-module="nav-library"] .library-pagination {
  margin-top: clamp(0.54rem, 0.72vw, 0.72rem) !important;
}

/* Library six-row density tune: slightly tighter rows after adding the extra track. */
html[data-active-module="nav-library"] .library-track-table {
  grid-template-rows: repeat(6, clamp(3.35rem, 4.38vw, 3.78rem)) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  height: clamp(3.35rem, 4.38vw, 3.78rem) !important;
  min-height: clamp(3.35rem, 4.38vw, 3.78rem) !important;
  max-height: clamp(3.35rem, 4.38vw, 3.78rem) !important;
  padding-block: 0.2rem !important;
}

html[data-active-module="nav-library"] .library-track-row img {
  width: clamp(2.68rem, 3.42vw, 3.05rem) !important;
  height: clamp(2.68rem, 3.42vw, 3.05rem) !important;
}

html[data-active-module="nav-library"] .library-track-title strong {
  font-size: clamp(0.86rem, 1.02vw, 0.98rem) !important;
}

html[data-active-module="nav-library"] .library-track-title small {
  font-size: clamp(0.7rem, 0.82vw, 0.78rem) !important;
}

/* Library row comfort tune: use the spare vertical room and simplify favorite control. */
html[data-active-module="nav-library"] .library-track-table {
  grid-template-rows: repeat(6, clamp(3.82rem, 4.95vw, 4.24rem)) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  height: clamp(3.82rem, 4.95vw, 4.24rem) !important;
  min-height: clamp(3.82rem, 4.95vw, 4.24rem) !important;
  max-height: clamp(3.82rem, 4.95vw, 4.24rem) !important;
  padding-block: 0.28rem !important;
}

html[data-active-module="nav-library"] .library-track-row img {
  width: clamp(3rem, 3.82vw, 3.36rem) !important;
  height: clamp(3rem, 3.82vw, 3.36rem) !important;
}

html[data-active-module="nav-library"] .library-row-favorite {
  width: 2.05rem !important;
  height: 2.05rem !important;
  min-width: 2.05rem !important;
  min-height: 2.05rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(238, 235, 226, 0.86) !important;
  font-size: 1.68rem !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-row-favorite:hover,
html[data-active-module="nav-library"] .library-row-favorite.is-favorite {
  background: rgba(232, 197, 126, 0.08) !important;
  color: rgba(244, 212, 151, 0.96) !important;
}

html[data-active-module="nav-library"] .library-pagination {
  margin-top: clamp(0.2rem, 0.32vw, 0.34rem) !important;
  transform: translateY(-0.5rem) !important;
}

/* Library row final comfort: slightly larger rows and framed primary practice action. */
html[data-active-module="nav-library"] .library-track-table {
  grid-template-rows: repeat(6, clamp(4rem, 5.18vw, 4.45rem)) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  height: clamp(4rem, 5.18vw, 4.45rem) !important;
  min-height: clamp(4rem, 5.18vw, 4.45rem) !important;
  max-height: clamp(4rem, 5.18vw, 4.45rem) !important;
  padding-block: 0.32rem !important;
}

html[data-active-module="nav-library"] .library-track-row img {
  width: clamp(3.12rem, 3.98vw, 3.48rem) !important;
  height: clamp(3.12rem, 3.98vw, 3.48rem) !important;
}

html[data-active-module="nav-library"] .library-row-actions .library-row-play {
  min-height: clamp(2.2rem, 2.55vw, 2.42rem) !important;
  border: 1px solid rgba(232, 197, 126, 0.5) !important;
  border-radius: 0.62rem !important;
  background: rgba(232, 197, 126, 0.055) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.025) inset !important;
}

html[data-active-module="nav-library"] .library-row-actions .library-row-play:not([disabled]):hover {
  border-color: rgba(244, 212, 151, 0.72) !important;
  background: rgba(232, 197, 126, 0.1) !important;
}

html[data-active-module="nav-library"] .library-pagination {
  transform: translateY(-1.38rem) !important;
}

html[data-active-module="nav-library"] .library-result-count,
html[data-active-module="nav-library"] .library-results-head > span {
  justify-self: end !important;
  max-width: clamp(10rem, 16vw, 13.5rem) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(238, 234, 222, 0.82) !important;
  font-size: clamp(0.78rem, 0.94vw, 0.88rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="nav-library"] .library-series-section {
  margin-top: clamp(0.42rem, 0.58vw, 0.58rem) !important;
}

html[data-active-module="nav-library"] .library-series-grid {
  align-items: stretch !important;
}

html[data-active-module="nav-library"] .library-table-head {
  margin-top: clamp(0.34rem, 0.48vw, 0.5rem) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
}

html[data-active-module="nav-library"] .library-table-head span:first-child {
  display: block !important;
  visibility: hidden !important;
}

html[data-active-module="nav-library"] .library-table-head span:nth-child(2) {
  white-space: nowrap !important;
}

/* Library row final plus: use a little more vertical room while keeping six rows. */
html[data-active-module="nav-library"] .library-track-table {
  grid-template-rows: repeat(6, clamp(4.12rem, 5.32vw, 4.6rem)) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  height: clamp(4.12rem, 5.32vw, 4.6rem) !important;
  min-height: clamp(4.12rem, 5.32vw, 4.6rem) !important;
  max-height: clamp(4.12rem, 5.32vw, 4.6rem) !important;
  padding-block: 0.34rem !important;
}

html[data-active-module="nav-library"] .library-track-row img {
  width: clamp(3.2rem, 4.08vw, 3.58rem) !important;
  height: clamp(3.2rem, 4.08vw, 3.58rem) !important;
}

html[data-active-module="nav-library"] .library-pagination {
  transform: translateY(-2.2rem) !important;
}

/* Library six-row balance: larger rows, compact series band, and non-overlapping pager. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  grid-template-rows: clamp(2.35rem, 2.8vw, 2.62rem) clamp(5.45rem, 7vw, 5.8rem) clamp(1.45rem, 1.9vw, 1.72rem) min-content auto !important;
  row-gap: clamp(0.42rem, 0.56vw, 0.58rem) !important;
}

html[data-active-module="nav-library"] .library-series-section {
  margin-top: 0 !important;
}

html[data-active-module="nav-library"] .library-series-grid {
  height: clamp(5.45rem, 7vw, 5.8rem) !important;
  align-items: stretch !important;
}

html[data-active-module="nav-library"] .library-series-card {
  min-height: 0 !important;
  height: 100% !important;
}

html[data-active-module="nav-library"] .library-table-head {
  min-height: clamp(1.45rem, 1.9vw, 1.72rem) !important;
  height: clamp(1.45rem, 1.9vw, 1.72rem) !important;
  margin-top: 0 !important;
}

html[data-active-module="nav-library"] .library-track-table {
  grid-template-rows: repeat(6, clamp(4.22rem, 5.48vw, 4.72rem)) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  height: clamp(4.22rem, 5.48vw, 4.72rem) !important;
  min-height: clamp(4.22rem, 5.48vw, 4.72rem) !important;
  max-height: clamp(4.22rem, 5.48vw, 4.72rem) !important;
  padding-block: 0.36rem !important;
}

html[data-active-module="nav-library"] .library-track-row img {
  width: clamp(3.28rem, 4.18vw, 3.68rem) !important;
  height: clamp(3.28rem, 4.18vw, 3.68rem) !important;
}

html[data-active-module="nav-library"] .library-pagination {
  margin-top: clamp(0.44rem, 0.62vw, 0.66rem) !important;
  transform: translateY(0) !important;
}

/* Library six-row balance fix: prevent the compact series band and pager from overflowing their tracks. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library {
  height: calc(100% - clamp(0.22rem, 0.34vw, 0.36rem) + 1rem) !important;
}

html[data-active-module="nav-library"] .library-series-grid {
  min-height: 0 !important;
  max-height: clamp(5.45rem, 7vw, 5.8rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-series-card {
  max-height: 100% !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-pagination {
  align-self: start !important;
  margin-top: clamp(0.52rem, 0.72vw, 0.76rem) !important;
}

/* Library six-row final balance: larger rows with a slim pager that stays clear. */
html[data-active-module="nav-library"] .library-track-table {
  grid-template-rows: repeat(6, clamp(4.08rem, 5.36vw, 4.58rem)) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  height: clamp(4.08rem, 5.36vw, 4.58rem) !important;
  min-height: clamp(4.08rem, 5.36vw, 4.58rem) !important;
  max-height: clamp(4.08rem, 5.36vw, 4.58rem) !important;
  padding-block: 0.34rem !important;
}

html[data-active-module="nav-library"] .library-track-row img {
  width: clamp(3.22rem, 4.08vw, 3.56rem) !important;
  height: clamp(3.22rem, 4.08vw, 3.56rem) !important;
}

html[data-active-module="nav-library"] .library-pagination {
  min-height: 0 !important;
  margin-top: clamp(0.46rem, 0.62vw, 0.66rem) !important;
  padding: 0.16rem !important;
  transform: translateY(-1.25rem) !important;
}

html[data-active-module="nav-library"] .library-pagination button,
html[data-active-module="nav-library"] .library-pagination span {
  height: 1.5rem !important;
  min-height: 1.5rem !important;
}

html[data-active-module="nav-library"] .library-pagination button {
  width: 1.5rem !important;
  min-width: 1.5rem !important;
}

html[data-active-module="nav-library"] .library-pagination span {
  min-width: 1rem !important;
}

/* Library row pills: replace the gray subtitle line with compact colored metadata tags. */
html[data-active-module="nav-library"] .library-track-title small {
  display: none !important;
}

html[data-active-module="nav-library"] .library-row-pills {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  margin-top: 0.18rem !important;
}

html[data-active-module="nav-library"] .library-row-pills span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  min-height: 1.12rem !important;
  max-width: 9.5rem !important;
  padding: 0.13rem 0.42rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(225, 225, 218, 0.68) !important;
  font-size: 0.62rem !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-active-module="nav-library"] .library-row-pills span.is-good {
  border-color: rgba(82, 211, 142, 0.34) !important;
  background: rgba(34, 139, 88, 0.16) !important;
  color: rgba(184, 252, 214, 0.94) !important;
}

html[data-active-module="nav-library"] .library-row-pills span.is-version,
html[data-active-module="nav-library"] .library-row-pills span.is-difficulty {
  border-color: rgba(var(--library-ref-gold), 0.28) !important;
  background: rgba(var(--library-ref-gold), 0.11) !important;
  color: rgba(255, 226, 176, 0.92) !important;
}

html[data-active-module="nav-library"] .library-row-pills span.is-composer {
  border-color: rgba(150, 176, 196, 0.2) !important;
  background: rgba(82, 105, 124, 0.12) !important;
  color: rgba(210, 224, 234, 0.8) !important;
}

html[data-active-module="nav-library"] .library-row-pills span.is-example {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(235, 235, 229, 0.72) !important;
}

/* Library left rail alignment: match the filter card top to the search bar top. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  margin-top: clamp(0.78rem, 1.08vw, 0.92rem) !important;
  max-height: calc(100% - clamp(0.78rem, 1.08vw, 0.92rem)) !important;
}

/* Library larger six-row rhythm: let each song use the remaining vertical room. */
html[data-active-module="nav-library"] .library-track-table {
  grid-template-rows: repeat(6, clamp(4.32rem, calc((100dvh - 19rem) / 6), 5.15rem)) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  height: clamp(4.32rem, calc((100dvh - 19rem) / 6), 5.15rem) !important;
  min-height: clamp(4.32rem, calc((100dvh - 19rem) / 6), 5.15rem) !important;
  max-height: clamp(4.32rem, calc((100dvh - 19rem) / 6), 5.15rem) !important;
  padding-block: clamp(0.34rem, 0.58vw, 0.46rem) !important;
}

html[data-active-module="nav-library"] .library-track-row img {
  width: clamp(3.36rem, 4.35vw, 4.05rem) !important;
  height: clamp(3.36rem, 4.35vw, 4.05rem) !important;
}

html[data-active-module="nav-library"] .library-pagination {
  margin-top: clamp(0.54rem, 0.72vw, 0.84rem) !important;
  transform: translateY(clamp(-1.45rem, calc((100dvh - 45rem) * 0.08 - 1.45rem), -0.35rem)) !important;
}

/* Library larger row contents: make each track read as a stronger list item. */
html[data-active-module="nav-library"] .library-track-title {
  gap: 0.12rem !important;
}

html[data-active-module="nav-library"] .library-track-title strong {
  font-size: clamp(0.98rem, 1.18vw, 1.12rem) !important;
  line-height: 1.08 !important;
}

html[data-active-module="nav-library"] .library-row-pills {
  gap: 0.34rem !important;
  margin-top: 0.2rem !important;
}

html[data-active-module="nav-library"] .library-row-pills span {
  min-height: 1.18rem !important;
  padding: 0.16rem 0.48rem !important;
  font-size: 0.66rem !important;
}

html[data-active-module="nav-library"] .library-row-actions .library-row-play {
  min-height: clamp(2.28rem, 2.68vw, 2.52rem) !important;
}

/* Library song list breathing: move the six tracks below the header without crowding the top band. */
html[data-active-module="nav-library"] .library-track-table {
  margin-top: clamp(0.42rem, 0.72vw, 0.78rem) !important;
}

html[data-active-module="nav-library"] .library-pagination {
  padding: 0.1rem !important;
  margin-top: clamp(0.18rem, 0.34vw, 0.42rem) !important;
  transform: translateY(clamp(-1.7rem, calc((100dvh - 45rem) * 0.08 - 1.7rem), -0.55rem)) !important;
}

html[data-active-module="nav-library"] .library-pagination button,
html[data-active-module="nav-library"] .library-pagination span {
  height: 1.36rem !important;
  min-height: 1.36rem !important;
}

html[data-active-module="nav-library"] .library-pagination button {
  width: 1.36rem !important;
  min-width: 1.36rem !important;
}


/* Profile learning console final layout: 2026-06-07 */
html[data-active-module="profile"] .content-grid[data-module="profile"] {
  align-content: start !important;
  overflow: auto !important;
  padding-bottom: clamp(1rem, 2vw, 2rem) !important;
}

html[data-active-module="profile"] .profile-dashboard {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: clamp(0.78rem, 1vw, 1rem) !important;
  min-height: 0 !important;
}

html[data-active-module="profile"] .profile-glass-card {
  border-radius: 0.5rem !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(233, 183, 96, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(0, 0, 0, 0.32)),
    rgba(4, 4, 4, 0.92) !important;
}

html[data-active-module="profile"] .profile-hero-card {
  grid-column: span 12 !important;
  display: grid !important;
  grid-template-columns: minmax(22rem, 0.95fr) minmax(24rem, 1.25fr) minmax(18rem, 0.8fr) !important;
  align-items: stretch !important;
  gap: clamp(0.9rem, 1.4vw, 1.45rem) !important;
  min-height: clamp(16rem, 28vh, 20rem) !important;
  padding: clamp(1.25rem, 2vw, 2rem) !important;
}

html[data-active-module="profile"] .profile-hero-identity {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(0.9rem, 1.3vw, 1.25rem) !important;
  min-width: 0 !important;
}

html[data-active-module="profile"] .profile-hero-identity h3 {
  margin: 0 !important;
  font-size: clamp(2rem, 4.1vw, 4.35rem) !important;
  line-height: 0.98 !important;
}

html[data-active-module="profile"] .profile-hero-identity p:not(.eyebrow),
html[data-active-module="profile"] .profile-next-step p,
html[data-active-module="profile"] .profile-hero-note {
  margin: 0 !important;
  color: rgba(235, 232, 222, 0.66) !important;
  line-height: 1.55 !important;
}

html[data-active-module="profile"] .profile-avatar-mark {
  width: clamp(4.5rem, 6.6vw, 6.6rem) !important;
  border-radius: 50% !important;
  font-size: clamp(1.8rem, 2.7vw, 2.6rem) !important;
}

html[data-active-module="profile"] .profile-next-step {
  display: grid !important;
  align-content: center !important;
  gap: clamp(0.5rem, 0.75vw, 0.72rem) !important;
  min-width: 0 !important;
  padding: clamp(1rem, 1.5vw, 1.4rem) !important;
  border: 1px solid rgba(233, 183, 96, 0.24) !important;
  border-radius: 0.5rem !important;
  background:
    linear-gradient(135deg, rgba(233, 183, 96, 0.12), rgba(0, 0, 0, 0.18)),
    rgba(255, 255, 255, 0.02) !important;
}

html[data-active-module="profile"] .profile-next-step span {
  color: rgba(233, 183, 96, 0.92) !important;
  font-size: 0.72rem !important;
  font-weight: 860 !important;
  letter-spacing: 0.08em !important;
}

html[data-active-module="profile"] .profile-next-step strong {
  font-size: clamp(1.35rem, 2vw, 2.2rem) !important;
  line-height: 1.1 !important;
}

html[data-active-module="profile"] .profile-member-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-self: stretch !important;
}

html[data-active-module="profile"] .profile-member-metrics span {
  min-height: 0 !important;
  align-content: center !important;
  border-radius: 0.5rem !important;
}

html[data-active-module="profile"] .profile-today-card,
html[data-active-module="profile"] .profile-benefits-card {
  grid-column: span 4 !important;
  min-height: clamp(20rem, 39vh, 27rem) !important;
}

html[data-active-module="profile"] .profile-recent-card {
  grid-column: span 8 !important;
  min-height: clamp(20rem, 39vh, 27rem) !important;
}

html[data-active-module="profile"] .profile-today-plan {
  display: grid !important;
  gap: 0.62rem !important;
}

html[data-active-module="profile"] .profile-today-plan span {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 0.16rem 0.68rem !important;
  align-items: center !important;
  min-height: clamp(4.5rem, 7vh, 5.75rem) !important;
  padding: 0.78rem !important;
  border: 1px solid rgba(233, 183, 96, 0.18) !important;
  border-radius: 0.5rem !important;
  background: rgba(255, 255, 255, 0.026) !important;
}

html[data-active-module="profile"] .profile-today-plan b {
  display: grid !important;
  width: 2rem !important;
  height: 2rem !important;
  grid-row: span 2 !important;
  place-items: center !important;
  border: 1px solid rgba(233, 183, 96, 0.28) !important;
  border-radius: 50% !important;
  color: rgba(255, 232, 187, 0.96) !important;
}

html[data-active-module="profile"] .profile-today-plan small {
  grid-column: 2 !important;
}

html[data-active-module="profile"] .profile-practice-layout {
  grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.2fr) !important;
  height: 100% !important;
}

html[data-active-module="profile"] .profile-practice-current,
html[data-active-module="profile"] .profile-piece-list span,
html[data-active-module="profile"] .profile-benefit-grid span,
html[data-active-module="profile"] .profile-today-plan span {
  border-radius: 0.5rem !important;
}

html[data-active-module="profile"] .profile-benefit-grid {
  grid-template-columns: 1fr !important;
}

html[data-active-module="profile"] .profile-service-card {
  grid-column: span 12 !important;
  min-height: clamp(13rem, 22vh, 18rem) !important;
}

html[data-active-module="profile"] .profile-service-grid {
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.72fr) !important;
}

html[data-active-module="profile"] .profile-service-card .profile-collab-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="profile"] .profile-hero-card,
  html[data-active-module="profile"] .profile-practice-layout,
  html[data-active-module="profile"] .profile-service-grid {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="profile"] .profile-today-card,
  html[data-active-module="profile"] .profile-benefits-card,
  html[data-active-module="profile"] .profile-recent-card {
    grid-column: span 12 !important;
  }

  html[data-active-module="profile"] .profile-service-card .profile-collab-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  html[data-active-module="profile"] .profile-hero-identity,
  html[data-active-module="profile"] .profile-member-metrics {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="profile"] .profile-hero-identity h3 {
    font-size: clamp(2rem, 13vw, 3.35rem) !important;
  }

  html[data-active-module="profile"] .profile-action-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}


/* Profile one-page fullscreen fill: 2026-06-07 */
html[data-active-module="profile"] .main-stage {
  min-height: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-content: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

html[data-active-module="profile"] .profile-dashboard.profile-account-page {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.36fr) !important;
  grid-template-rows: minmax(10rem, 0.32fr) minmax(0, 1fr) !important;
  gap: clamp(0.78rem, 1vw, 1rem) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="profile"] .profile-account-page .profile-glass-card {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  border-radius: 0.5rem !important;
}

html[data-active-module="profile"] .profile-account-summary {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(19rem, 0.58fr) !important;
  align-items: center !important;
  gap: clamp(1rem, 1.6vw, 1.5rem) !important;
  padding: clamp(1.2rem, 2vw, 2rem) !important;
}

html[data-active-module="profile"] .profile-streak-card {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  align-content: center !important;
  padding: clamp(1.1rem, 1.6vw, 1.5rem) !important;
}

html[data-active-module="profile"] .profile-benefits-card {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(0.78rem, 1vw, 1rem) !important;
  min-height: 0 !important;
  padding: clamp(1.05rem, 1.45vw, 1.35rem) !important;
}

html[data-active-module="profile"] .profile-benefit-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.62rem, 0.9vw, 0.86rem) !important;
  height: 100% !important;
  min-height: 0 !important;
}

html[data-active-module="profile"] .profile-benefit-grid span {
  min-height: 0 !important;
  height: 100% !important;
  align-content: center !important;
  border-radius: 0.5rem !important;
  padding: clamp(1rem, 1.45vw, 1.35rem) !important;
}

html[data-active-module="profile"] .profile-contact-card {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: grid !important;
  align-content: center !important;
  gap: clamp(0.62rem, 0.85vw, 0.82rem) !important;
  padding: clamp(1.1rem, 1.6vw, 1.5rem) !important;
}

html[data-active-module="profile"] .profile-account-copy h3 {
  margin: 0 !important;
  font-size: clamp(2.3rem, 4.8vw, 5rem) !important;
  line-height: 0.96 !important;
}

html[data-active-module="profile"] .profile-streak-card strong {
  font-size: clamp(2.4rem, 4.2vw, 4.2rem) !important;
  line-height: 1 !important;
}

html[data-active-module="profile"] .profile-contact-card .glass-button {
  width: 100% !important;
  min-height: clamp(2.7rem, 3.8vw, 3.4rem) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="profile"] .content-grid[data-module="profile"] {
    overflow: auto !important;
  }

  html[data-active-module="profile"] .profile-dashboard.profile-account-page {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(11rem, auto) minmax(8rem, auto) minmax(24rem, 1fr) minmax(12rem, auto) !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

  html[data-active-module="profile"] .profile-account-summary,
  html[data-active-module="profile"] .profile-streak-card,
  html[data-active-module="profile"] .profile-benefits-card,
  html[data-active-module="profile"] .profile-contact-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* Library final vertical lock: lower the song rows without letting the pager overlap. */
html[data-active-module="nav-library"] .library-track-table {
  margin-top: clamp(0.22rem, 0.36vw, 0.42rem) !important;
}

html[data-active-module="nav-library"] .library-pagination {
  padding: 0.1rem !important;
  margin-top: clamp(0.18rem, 0.34vw, 0.42rem) !important;
  transform: translateY(clamp(-1.25rem, calc((100dvh - 45rem) * 0.08 - 1.25rem), -0.45rem)) !important;
}

html[data-active-module="nav-library"] .library-pagination button,
html[data-active-module="nav-library"] .library-pagination span {
  height: 1.36rem !important;
  min-height: 1.36rem !important;
}

html[data-active-module="nav-library"] .library-pagination button {
  width: 1.36rem !important;
  min-width: 1.36rem !important;
}


/* Support minimal page final layout: 2026-06-07 */
html[data-active-module="support"] .content-grid[data-module="support"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-content: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-page.support-minimal-page {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: rgba(245, 242, 234, 0.94) !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-minimal-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.34fr) !important;
  gap: clamp(0.78rem, 1vw, 1rem) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

html[data-active-module="support"] .support-minimal-card {
  border: 1px solid rgba(233, 183, 96, 0.18) !important;
  border-radius: 0.5rem !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(233, 183, 96, 0.07), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(0, 0, 0, 0.3)),
    rgba(4, 4, 4, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.052),
    0 1rem 2.5rem rgba(0, 0, 0, 0.36) !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html[data-active-module="support"] .support-minimal-main {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: clamp(0.9rem, 1.15vw, 1.15rem) !important;
  padding: clamp(1.2rem, 2vw, 2rem) !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-minimal-head {
  display: grid !important;
  gap: 0.34rem !important;
}

html[data-active-module="support"] .support-minimal-head h3 {
  margin: 0 !important;
  font-size: clamp(2.6rem, 5.2vw, 5.5rem) !important;
  line-height: 0.95 !important;
}

html[data-active-module="support"] .support-minimal-head p:not(.eyebrow),
html[data-active-module="support"] .support-minimal-human p {
  margin: 0 !important;
  color: rgba(235, 232, 222, 0.66) !important;
  line-height: 1.55 !important;
}

html[data-active-module="support"] .support-minimal-input {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.72rem !important;
  align-items: stretch !important;
}

html[data-active-module="support"] .support-minimal-input textarea,
html[data-active-module="support"] .support-minimal-human textarea {
  width: 100% !important;
  resize: none !important;
  border: 1px solid rgba(233, 183, 96, 0.2) !important;
  border-radius: 0.5rem !important;
  background: rgba(0, 0, 0, 0.32) !important;
  color: rgba(245, 242, 234, 0.94) !important;
  outline: none !important;
  line-height: 1.45 !important;
}

html[data-active-module="support"] .support-minimal-input textarea {
  min-height: clamp(5rem, 12vh, 7rem) !important;
  padding: 1rem !important;
}

html[data-active-module="support"] .support-minimal-human textarea {
  min-height: 7rem !important;
  padding: 0.85rem !important;
}

html[data-active-module="support"] .support-minimal-actions {
  display: grid !important;
  gap: 0.5rem !important;
  align-content: stretch !important;
  min-width: clamp(6rem, 8vw, 8rem) !important;
}

html[data-active-module="support"] .support-minimal-actions .glass-button,
html[data-active-module="support"] .support-minimal-human .glass-button {
  border-radius: 0.5rem !important;
}

html[data-active-module="support"] .support-minimal-answer {
  min-height: 0 !important;
  overflow: auto !important;
}

html[data-active-module="support"] .support-minimal-answer .support-answer-content {
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 0.5rem !important;
}

html[data-active-module="support"] .support-minimal-side {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: clamp(0.78rem, 1vw, 1rem) !important;
  min-height: 0 !important;
}

html[data-active-module="support"] .support-minimal-side .support-minimal-card {
  display: grid !important;
  gap: 0.72rem !important;
  padding: clamp(1rem, 1.35vw, 1.25rem) !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-minimal-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.8rem !important;
}

html[data-active-module="support"] .support-minimal-section-head strong,
html[data-active-module="support"] .support-minimal-human strong {
  color: rgba(245, 242, 234, 0.97) !important;
  font-size: clamp(1.05rem, 1.25vw, 1.22rem) !important;
}

html[data-active-module="support"] .support-text-button {
  border: 0 !important;
  background: transparent !important;
  color: rgba(233, 183, 96, 0.92) !important;
  cursor: pointer !important;
}

html[data-active-module="support"] .support-minimal-faqs {
  display: grid !important;
  align-content: start !important;
  gap: 0.52rem !important;
  overflow: auto !important;
  min-height: 0 !important;
}

html[data-active-module="support"] .support-minimal-faqs button {
  min-height: 2.65rem !important;
  padding: 0.68rem 0.78rem !important;
  border: 1px solid rgba(233, 183, 96, 0.16) !important;
  border-radius: 0.5rem !important;
  background: rgba(255, 255, 255, 0.024) !important;
  color: rgba(245, 242, 234, 0.9) !important;
  text-align: left !important;
  cursor: pointer !important;
}

html[data-active-module="support"] .support-minimal-faqs button:hover,
html[data-active-module="support"] .support-minimal-faqs button.is-active {
  border-color: rgba(233, 183, 96, 0.38) !important;
  background: rgba(233, 183, 96, 0.09) !important;
}

html[data-active-module="support"] .support-minimal-page :is(.support-bg, .support-gallery-topbar, .support-content, .support-board-grid, .support-service-panel, .support-guess-block, .support-faq-category-panel, .support-upload-grid, .support-upload-plus, .support-wait-copy, .support-empty-tags) {
  display: none !important;
}

@media (max-width: 1180px) {
  html[data-active-module="support"] .content-grid[data-module="support"] {
    overflow: auto !important;
  }

  html[data-active-module="support"] .support-minimal-shell {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100% !important;
  }

  html[data-active-module="support"] .support-minimal-side {
    grid-template-rows: auto auto !important;
  }
}

@media (max-width: 720px) {
  html[data-active-module="support"] .support-minimal-input {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-minimal-head h3 {
    font-size: clamp(2rem, 13vw, 3.35rem) !important;
  }
}

/* Library filter rail final reset: equal button geometry and cleaner section rhythm. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  gap: clamp(1.28rem, 1.72vw, 1.55rem) !important;
  padding: clamp(1.02rem, 1.3vw, 1.2rem) clamp(1.05rem, 1.35vw, 1.22rem) !important;
}

html[data-active-module="nav-library"] .library-filter-section {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: clamp(0.62rem, 0.82vw, 0.76rem) !important;
  width: 100% !important;
  margin: 0 !important;
}

html[data-active-module="nav-library"] .library-filter-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(0.92rem, 1.08vw, 1rem) !important;
  line-height: 1.1 !important;
}

html[data-active-module="nav-library"] .library-filter-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(0.48rem, 0.62vw, 0.56rem) !important;
  width: 100% !important;
}

html[data-active-module="nav-library"] .library-filter-grid button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: clamp(1.92rem, 2.38vw, 2.08rem) !important;
  min-height: clamp(1.92rem, 2.38vw, 2.08rem) !important;
  max-height: clamp(1.92rem, 2.38vw, 2.08rem) !important;
  padding: 0 clamp(0.9rem, 1.12vw, 1.05rem) !important;
  border-radius: 0.5rem !important;
  line-height: 1 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

/* Library left rail bottom balance: match the outer bottom gap to the top gap. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  align-self: start !important;
  height: calc(100% - (clamp(0.86rem, 1.08vw, 0.98rem) * 2)) !important;
  max-height: calc(100% - (clamp(0.86rem, 1.08vw, 0.98rem) * 2)) !important;
  gap: clamp(0.72rem, 0.95vw, 0.9rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-filter-section {
  gap: clamp(0.5rem, 0.66vw, 0.62rem) !important;
}

html[data-active-module="nav-library"] .library-filter-grid {
  gap: clamp(0.36rem, 0.46vw, 0.44rem) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button {
  height: clamp(1.84rem, 2.26vw, 1.98rem) !important;
  min-height: clamp(1.84rem, 2.26vw, 1.98rem) !important;
  max-height: clamp(1.84rem, 2.26vw, 1.98rem) !important;
}

/* Library six-track scale up: stronger rows with truly square covers. */
html[data-active-module="nav-library"] .library-table-head,
html[data-active-module="nav-library"] .library-track-row {
  grid-template-columns: clamp(4.2rem, 5.15vw, 4.65rem) minmax(23.5rem, 1fr) clamp(4.55rem, 5.7vw, 5.15rem) clamp(4.22rem, 5.25vw, 4.78rem) clamp(3.65rem, 4.55vw, 4.2rem) clamp(8rem, 9.9vw, 8.7rem) !important;
}

html[data-active-module="nav-library"] .library-track-table {
  grid-template-rows: repeat(6, clamp(4.65rem, calc((100dvh - 17.35rem) / 6), 5.28rem)) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  height: clamp(4.65rem, calc((100dvh - 17.35rem) / 6), 5.28rem) !important;
  min-height: clamp(4.65rem, calc((100dvh - 17.35rem) / 6), 5.28rem) !important;
  max-height: clamp(4.65rem, calc((100dvh - 17.35rem) / 6), 5.28rem) !important;
  padding-block: clamp(0.38rem, 0.58vw, 0.5rem) !important;
}

html[data-active-module="nav-library"] .library-track-row img {
  width: clamp(4rem, 4.95vw, 4.42rem) !important;
  height: clamp(4rem, 4.95vw, 4.42rem) !important;
  min-width: clamp(4rem, 4.95vw, 4.42rem) !important;
  min-height: clamp(4rem, 4.95vw, 4.42rem) !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

html[data-active-module="nav-library"] .library-track-title strong {
  font-size: clamp(1.04rem, 1.28vw, 1.18rem) !important;
}

html[data-active-module="nav-library"] .library-row-pills span {
  min-height: 1.22rem !important;
  font-size: 0.68rem !important;
}

html[data-active-module="nav-library"] .library-row-actions .library-row-play {
  min-height: clamp(2.38rem, 2.86vw, 2.68rem) !important;
}

html[data-active-module="nav-library"] .library-pagination {
  transform: translateY(clamp(-0.92rem, calc((100dvh - 45rem) * 0.05 - 0.92rem), -0.3rem)) !important;
}

@media (max-height: 740px) {
  html[data-active-module="nav-library"] .library-track-table {
    grid-template-rows: repeat(6, clamp(4.36rem, 9.78dvh, 4.48rem)) !important;
  }

  html[data-active-module="nav-library"] .library-track-row {
    height: clamp(4.36rem, 9.78dvh, 4.48rem) !important;
    min-height: clamp(4.36rem, 9.78dvh, 4.48rem) !important;
    max-height: clamp(4.36rem, 9.78dvh, 4.48rem) !important;
  }

  html[data-active-module="nav-library"] .library-track-row img {
    width: clamp(3.72rem, 8.35dvh, 3.86rem) !important;
    height: clamp(3.72rem, 8.35dvh, 3.86rem) !important;
    min-width: clamp(3.72rem, 8.35dvh, 3.86rem) !important;
    min-height: clamp(3.72rem, 8.35dvh, 3.86rem) !important;
    aspect-ratio: 1 / 1 !important;
  }

  html[data-active-module="nav-library"] .library-pagination {
    padding: 0.06rem !important;
    transform: translateY(-1.18rem) !important;
  }

  html[data-active-module="nav-library"] .library-pagination button,
  html[data-active-module="nav-library"] .library-pagination span {
    height: 1.24rem !important;
    min-height: 1.24rem !important;
  }

  html[data-active-module="nav-library"] .library-pagination button {
    width: 1.24rem !important;
    min-width: 1.24rem !important;
  }
}


/* Support Apple-style layout: 2026-06-07 */
html[data-active-module="support"] .content-grid[data-module="support"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-page.support-apple-page {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-apple-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(23rem, 0.72fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: clamp(0.78rem, 1vw, 1rem) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

html[data-active-module="support"] .support-apple-primary,
html[data-active-module="support"] .support-apple-list,
html[data-active-module="support"] .support-apple-human,
html[data-active-module="support"] .support-apple-search {
  border: 1px solid rgba(233, 183, 96, 0.16) !important;
  border-radius: 0.5rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(0, 0, 0, 0.28)),
    rgba(4, 4, 4, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1rem 2.5rem rgba(0, 0, 0, 0.32) !important;
}

html[data-active-module="support"] .support-apple-primary {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  gap: clamp(0.86rem, 1.2vw, 1.15rem) !important;
  min-height: 0 !important;
  padding: clamp(1.2rem, 2vw, 2rem) !important;
}

html[data-active-module="support"] .support-apple-title {
  display: grid !important;
  gap: 0.34rem !important;
}

html[data-active-module="support"] .support-apple-title h3 {
  margin: 0 !important;
  font-size: clamp(2.4rem, 5vw, 5.2rem) !important;
  line-height: 0.96 !important;
}

html[data-active-module="support"] .support-apple-title p:not(.eyebrow),
html[data-active-module="support"] .support-apple-human p {
  margin: 0 !important;
  color: rgba(235, 232, 222, 0.66) !important;
  line-height: 1.5 !important;
}

html[data-active-module="support"] .support-apple-search {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.68rem !important;
  padding: 0.62rem !important;
}

html[data-active-module="support"] .support-apple-search textarea,
html[data-active-module="support"] .support-apple-human textarea {
  width: 100% !important;
  resize: none !important;
  border: 0 !important;
  border-radius: 0.42rem !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(245, 242, 234, 0.94) !important;
  outline: none !important;
  line-height: 1.45 !important;
}

html[data-active-module="support"] .support-apple-search textarea {
  min-height: clamp(4.25rem, 9vh, 5.6rem) !important;
  padding: 0.9rem !important;
}

html[data-active-module="support"] .support-apple-search .glass-button {
  min-width: 6rem !important;
  border-radius: 0.42rem !important;
}

html[data-active-module="support"] .support-apple-categories {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.58rem !important;
}

html[data-active-module="support"] .support-apple-categories button,
html[data-active-module="support"] .support-apple-group button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.72rem !important;
  width: 100% !important;
  border: 1px solid rgba(233, 183, 96, 0.14) !important;
  border-radius: 0.5rem !important;
  background: rgba(255, 255, 255, 0.026) !important;
  color: rgba(245, 242, 234, 0.92) !important;
  cursor: pointer !important;
  text-align: left !important;
}

html[data-active-module="support"] .support-apple-categories button {
  min-height: 3.6rem !important;
  padding: 0.86rem 0.95rem !important;
  font-weight: 820 !important;
}

html[data-active-module="support"] .support-apple-categories b,
html[data-active-module="support"] .support-apple-group b {
  color: rgba(233, 183, 96, 0.92) !important;
  font-size: 1.2rem !important;
}

html[data-active-module="support"] .support-apple-answer {
  min-height: 0 !important;
  overflow: auto !important;
}

html[data-active-module="support"] .support-apple-answer .support-answer-content {
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 0.5rem !important;
}

html[data-active-module="support"] .support-apple-list {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  padding: clamp(1rem, 1.35vw, 1.25rem) !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-apple-list-head {
  padding-bottom: 0.7rem !important;
}

html[data-active-module="support"] .support-apple-list-head strong {
  font-size: clamp(1.15rem, 1.4vw, 1.35rem) !important;
}

html[data-active-module="support"] .support-apple-groups {
  display: grid !important;
  align-content: start !important;
  gap: 0.82rem !important;
  overflow: auto !important;
  min-height: 0 !important;
  padding-right: 0.08rem !important;
}

html[data-active-module="support"] .support-apple-group {
  display: grid !important;
  gap: 0.42rem !important;
}

html[data-active-module="support"] .support-apple-group h4 {
  margin: 0 !important;
  color: rgba(233, 183, 96, 0.9) !important;
  font-size: 0.78rem !important;
  font-weight: 860 !important;
}

html[data-active-module="support"] .support-apple-group > div {
  display: grid !important;
  gap: 1px !important;
  overflow: hidden !important;
  border: 1px solid rgba(233, 183, 96, 0.13) !important;
  border-radius: 0.5rem !important;
}

html[data-active-module="support"] .support-apple-group button {
  min-height: 2.8rem !important;
  padding: 0.68rem 0.82rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.024) !important;
  font-size: 0.86rem !important;
}

html[data-active-module="support"] .support-apple-group button:hover,
html[data-active-module="support"] .support-apple-categories button:hover {
  background: rgba(233, 183, 96, 0.09) !important;
}

html[data-active-module="support"] .support-apple-human {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.5fr) auto !important;
  align-items: center !important;
  gap: 0.72rem !important;
  padding: clamp(0.85rem, 1.1vw, 1.05rem) !important;
}

html[data-active-module="support"] .support-apple-human textarea {
  min-height: 3.3rem !important;
  max-height: 4.2rem !important;
  padding: 0.72rem !important;
}

html[data-active-module="support"] .support-apple-human .glass-button {
  min-height: 3.3rem !important;
  border-radius: 0.42rem !important;
  white-space: nowrap !important;
}

html[data-active-module="support"] .support-apple-page :is(.support-bg, .support-gallery-topbar, .support-content, .support-board-grid, .support-service-panel, .support-guess-block, .support-faq-category-panel, .support-upload-grid, .support-upload-plus, .support-wait-copy, .support-empty-tags) {
  display: none !important;
}

@media (max-width: 1180px) {
  html[data-active-module="support"] .content-grid[data-module="support"] {
    overflow: auto !important;
  }

  html[data-active-module="support"] .support-apple-shell {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    height: auto !important;
    min-height: 100% !important;
  }

  html[data-active-module="support"] .support-apple-human {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  html[data-active-module="support"] .support-apple-search,
  html[data-active-module="support"] .support-apple-categories {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-apple-title h3 {
    font-size: clamp(2rem, 13vw, 3.35rem) !important;
  }
}

/* Support WeCom handoff layout: 2026-06-07 */
html[data-active-module="support"] .content-grid[data-module="support"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-page.support-wecom-page {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-wecom-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(23rem, 0.62fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "hero hero"
    "categories faq"
    "answer dock" !important;
  gap: clamp(0.72rem, 0.95vw, 0.92rem) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

html[data-active-module="support"] .support-wecom-hero {
  grid-area: hero !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.44fr) !important;
  align-items: stretch !important;
  gap: clamp(0.8rem, 1vw, 1rem) !important;
  min-height: 0 !important;
}

html[data-active-module="support"] .support-wecom-hero > div:first-child {
  display: grid !important;
  align-content: center !important;
  gap: 0.42rem !important;
  min-height: clamp(6.8rem, 12vh, 8.4rem) !important;
  padding: clamp(1rem, 1.45vw, 1.45rem) !important;
  border: 1px solid rgba(233, 183, 96, 0.16) !important;
  border-radius: 0.5rem !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(233, 183, 96, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(0, 0, 0, 0.28)),
    rgba(4, 4, 4, 0.92) !important;
}

html[data-active-module="support"] .support-wecom-hero h3 {
  margin: 0 !important;
  max-width: 13em !important;
  font-size: clamp(2rem, 3.7vw, 3.7rem) !important;
  line-height: 0.98 !important;
}

html[data-active-module="support"] .support-wecom-hero p,
html[data-active-module="support"] .support-wecom-category p,
html[data-active-module="support"] .support-wecom-dock p,
html[data-active-module="support"] .support-wecom-answer-card p,
html[data-active-module="support"] .support-wecom-hero-card p {
  margin: 0 !important;
  color: rgba(235, 232, 222, 0.66) !important;
  line-height: 1.5 !important;
}

html[data-active-module="support"] .support-wecom-hero-card,
html[data-active-module="support"] .support-wecom-category,
html[data-active-module="support"] .support-wecom-faq,
html[data-active-module="support"] .support-wecom-answer-card,
html[data-active-module="support"] .support-wecom-dock {
  border: 1px solid rgba(233, 183, 96, 0.16) !important;
  border-radius: 0.5rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(0, 0, 0, 0.24)),
    rgba(4, 4, 4, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0.9rem 2.2rem rgba(0, 0, 0, 0.25) !important;
}

html[data-active-module="support"] .support-wecom-hero-card {
  display: grid !important;
  align-content: center !important;
  gap: 0.55rem !important;
  padding: clamp(0.86rem, 1.15vw, 1.08rem) !important;
}

html[data-active-module="support"] .support-wecom-hero-card span,
html[data-active-module="support"] .support-wecom-answer-card span,
html[data-active-module="support"] .support-wecom-category span {
  color: rgba(233, 183, 96, 0.94) !important;
  font-weight: 860 !important;
}

html[data-active-module="support"] .support-wecom-hero-card strong {
  font-size: clamp(1.15rem, 1.45vw, 1.4rem) !important;
}

html[data-active-module="support"] .support-wecom-categories {
  grid-area: categories !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(0.64rem, 0.82vw, 0.8rem) !important;
  min-height: 0 !important;
}

html[data-active-module="support"] .support-wecom-category {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 0.72rem !important;
  min-height: 0 !important;
  padding: clamp(0.86rem, 1.15vw, 1.08rem) !important;
}

html[data-active-module="support"] .support-wecom-category p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 0.8rem !important;
}

html[data-active-module="support"] .support-wecom-question-pills {
  display: grid !important;
  align-content: start !important;
  gap: 0.42rem !important;
  min-height: 0 !important;
}

html[data-active-module="support"] .support-wecom-question-pills button,
html[data-active-module="support"] .support-wecom-category-open,
html[data-active-module="support"] .support-wecom-faq-group button {
  width: 100% !important;
  border: 1px solid rgba(233, 183, 96, 0.12) !important;
  border-radius: 0.42rem !important;
  background: rgba(255, 255, 255, 0.026) !important;
  color: rgba(245, 242, 234, 0.92) !important;
  cursor: pointer !important;
}

html[data-active-module="support"] .support-wecom-question-pills button {
  min-height: 2rem !important;
  padding: 0.48rem 0.58rem !important;
  text-align: left !important;
  font-size: 0.78rem !important;
}

html[data-active-module="support"] .support-wecom-category-open {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 2.35rem !important;
  padding: 0.55rem 0.68rem !important;
  font-weight: 840 !important;
}

html[data-active-module="support"] .support-wecom-question-pills button:hover,
html[data-active-module="support"] .support-wecom-category-open:hover,
html[data-active-module="support"] .support-wecom-faq-group button:hover {
  background: rgba(233, 183, 96, 0.09) !important;
}

html[data-active-module="support"] .support-wecom-faq {
  grid-area: faq !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: clamp(0.9rem, 1.15vw, 1.08rem) !important;
}

html[data-active-module="support"] .support-wecom-faq-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.8rem !important;
  padding-bottom: 0.7rem !important;
}

html[data-active-module="support"] .support-wecom-faq-head strong {
  font-size: 1.25rem !important;
}

html[data-active-module="support"] .support-wecom-faq-list {
  display: grid !important;
  align-content: start !important;
  gap: 0.72rem !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding-right: 0.08rem !important;
}

html[data-active-module="support"] .support-wecom-faq-group {
  display: grid !important;
  gap: 1px !important;
}

html[data-active-module="support"] .support-wecom-faq-group h4 {
  margin: 0 0 0.32rem !important;
  color: rgba(233, 183, 96, 0.9) !important;
  font-size: 0.78rem !important;
}

html[data-active-module="support"] .support-wecom-faq-group button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.62rem !important;
  min-height: 2.48rem !important;
  padding: 0.56rem 0.68rem !important;
  border-radius: 0 !important;
  font-size: 0.82rem !important;
  text-align: left !important;
}

html[data-active-module="support"] .support-wecom-faq-group button:first-of-type {
  border-top-left-radius: 0.42rem !important;
  border-top-right-radius: 0.42rem !important;
}

html[data-active-module="support"] .support-wecom-faq-group button:last-of-type {
  border-bottom-left-radius: 0.42rem !important;
  border-bottom-right-radius: 0.42rem !important;
}

html[data-active-module="support"] .support-wecom-answer {
  grid-area: answer !important;
  min-height: 0 !important;
}

html[data-active-module="support"] .support-wecom-answer-card {
  display: grid !important;
  align-content: center !important;
  gap: 0.42rem !important;
  height: 100% !important;
  min-height: 5.7rem !important;
  padding: clamp(0.85rem, 1.05vw, 1rem) !important;
  overflow: auto !important;
}

html[data-active-module="support"] .support-wecom-answer-card strong {
  font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
}

html[data-active-module="support"] .support-wecom-dock {
  grid-area: dock !important;
  display: grid !important;
  grid-template-columns: minmax(10rem, 0.58fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.72rem !important;
  min-height: 5.7rem !important;
  padding: clamp(0.85rem, 1.05vw, 1rem) !important;
}

html[data-active-module="support"] .support-wecom-dock-input {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.58rem !important;
  align-items: stretch !important;
}

html[data-active-module="support"] .support-wecom-dock textarea {
  width: 100% !important;
  min-height: 3.2rem !important;
  max-height: 3.2rem !important;
  resize: none !important;
  border: 1px solid rgba(233, 183, 96, 0.12) !important;
  border-radius: 0.42rem !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(245, 242, 234, 0.94) !important;
  outline: none !important;
  padding: 0.68rem !important;
  line-height: 1.35 !important;
}

html[data-active-module="support"] .support-wecom-dock .glass-button {
  min-height: 3.2rem !important;
  border-radius: 0.42rem !important;
  white-space: nowrap !important;
}

html[data-active-module="support"] .support-wecom-status {
  grid-column: 1 / -1 !important;
  color: rgba(233, 183, 96, 0.88) !important;
  font-size: 0.78rem !important;
}

html[data-active-module="support"] .support-wecom-page :is(.support-bg, .support-gallery-topbar, .support-content, .support-board-grid, .support-service-panel, .support-guess-block, .support-faq-category-panel, .support-upload-grid, .support-upload-plus, .support-wait-copy, .support-empty-tags) {
  display: none !important;
}

@media (max-width: 1180px) {
  html[data-active-module="support"] .content-grid[data-module="support"] {
    overflow: auto !important;
  }

  html[data-active-module="support"] .support-wecom-page {
    overflow: visible !important;
  }

  html[data-active-module="support"] .support-wecom-shell {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "hero"
      "categories"
      "faq"
      "answer"
      "dock" !important;
    height: auto !important;
    min-height: 100% !important;
  }

  html[data-active-module="support"] .support-wecom-hero,
  html[data-active-module="support"] .support-wecom-dock {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="support"] .support-wecom-categories {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-wecom-dock-input {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-wecom-hero h3 {
    font-size: clamp(2rem, 12vw, 3.35rem) !important;
  }
}

/* Support ultra-minimal WeCom handoff: 2026-06-07 */
html[data-active-module="support"] .content-grid[data-module="support"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  place-items: center !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-page.support-wecom-minimal-page {
  grid-column: 1 / -1 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(1rem, 2vw, 2rem) !important;
  background: transparent !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-wecom-minimal-shell {
  display: grid !important;
  place-items: center !important;
  width: min(100%, 46rem) !important;
  min-height: 0 !important;
}

html[data-active-module="support"] .support-wecom-minimal-card {
  display: grid !important;
  gap: clamp(1rem, 1.45vw, 1.35rem) !important;
  width: 100% !important;
  border: 1px solid rgba(233, 183, 96, 0.16) !important;
  border-radius: 0.5rem !important;
  padding: clamp(1.35rem, 2.4vw, 2.2rem) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(233, 183, 96, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(0, 0, 0, 0.28)),
    rgba(4, 4, 4, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1.2rem 3rem rgba(0, 0, 0, 0.32) !important;
}

html[data-active-module="support"] .support-wecom-minimal-head {
  display: grid !important;
  gap: 0.48rem !important;
}

html[data-active-module="support"] .support-wecom-minimal-head h3 {
  margin: 0 !important;
  font-size: clamp(2.05rem, 4.2vw, 4rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="support"] .support-wecom-minimal-head p:not(.eyebrow),
html[data-active-module="support"] .support-wecom-status {
  margin: 0 !important;
  color: rgba(235, 232, 222, 0.66) !important;
  line-height: 1.55 !important;
}

html[data-active-module="support"] .support-wecom-minimal-input {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.66rem !important;
  align-items: stretch !important;
}

html[data-active-module="support"] .support-wecom-minimal-input textarea {
  width: 100% !important;
  min-height: clamp(5.2rem, 10vh, 6.4rem) !important;
  max-height: clamp(5.2rem, 10vh, 6.4rem) !important;
  resize: none !important;
  border: 1px solid rgba(233, 183, 96, 0.16) !important;
  border-radius: 0.5rem !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(245, 242, 234, 0.94) !important;
  outline: none !important;
  padding: 0.9rem 1rem !important;
  line-height: 1.45 !important;
}

html[data-active-module="support"] .support-wecom-minimal-input .glass-button {
  min-width: 9.2rem !important;
  min-height: clamp(5.2rem, 10vh, 6.4rem) !important;
  border-radius: 0.5rem !important;
  white-space: normal !important;
}

html[data-active-module="support"] .support-wecom-minimal-notes {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.48rem !important;
}

html[data-active-module="support"] .support-wecom-minimal-notes-label {
  color: rgba(235, 232, 222, 0.72) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin-right: 0.1rem !important;
  white-space: nowrap !important;
}

html[data-active-module="support"] .support-wecom-minimal-notes :is(span, button) {
  border: 1px solid rgba(233, 183, 96, 0.14) !important;
  border-radius: 999px !important;
  padding: 0.42rem 0.72rem !important;
  color: rgba(235, 232, 222, 0.7) !important;
  background: rgba(255, 255, 255, 0.026) !important;
  font-size: 0.78rem !important;
  cursor: pointer !important;
}

html[data-active-module="support"] .support-wecom-minimal-page :is(.support-wecom-hero, .support-wecom-categories, .support-wecom-faq, .support-wecom-answer, .support-wecom-dock, .support-apple-primary, .support-apple-list, .support-apple-human, .support-bg, .support-gallery-topbar, .support-content, .support-board-grid, .support-service-panel, .support-guess-block, .support-faq-category-panel, .support-upload-grid, .support-upload-plus, .support-wait-copy, .support-empty-tags) {
  display: none !important;
}

@media (max-width: 720px) {
  html[data-active-module="support"] .content-grid[data-module="support"] {
    overflow: auto !important;
    place-items: start stretch !important;
  }

  html[data-active-module="support"] .support-page.support-wecom-minimal-page {
    overflow: visible !important;
    place-items: start stretch !important;
  }

  html[data-active-module="support"] .support-wecom-minimal-input {
    grid-template-columns: 1fr !important;
  }

html[data-active-module="support"] .support-wecom-minimal-input .glass-button {
    min-height: 3.2rem !important;
  }
}

/* Support split layout: contact on the left, self-help on the right. */
html[data-active-module="support"] .support-wecom-minimal-shell {
  grid-template-columns: minmax(22rem, 0.9fr) minmax(26rem, 1.1fr) !important;
  align-items: stretch !important;
  gap: clamp(0.9rem, 1.25vw, 1.2rem) !important;
  width: min(100%, 74rem) !important;
  max-height: 100% !important;
}

html[data-active-module="support"] .support-wecom-self-help {
  display: grid !important;
  gap: 0 !important;
  width: 100% !important;
  border: 1px solid rgba(233, 183, 96, 0.16) !important;
  border-radius: 0.5rem !important;
  padding: clamp(1rem, 1.35vw, 1.18rem) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(0, 0, 0, 0.28)),
    rgba(4, 4, 4, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1.2rem 3rem rgba(0, 0, 0, 0.28) !important;
}

html[data-active-module="support"] .support-wecom-minimal-card,
html[data-active-module="support"] .support-wecom-self-help {
  min-height: min(100%, 31rem) !important;
}

html[data-active-module="support"] .support-wecom-minimal-card {
  align-content: center !important;
}

html[data-active-module="support"] .support-wecom-self-help {
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: start !important;
  max-height: min(100%, 31rem) !important;
  overflow: auto !important;
}

html[data-active-module="support"] .support-wecom-self-help-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding-bottom: 0.58rem !important;
}

html[data-active-module="support"] .support-wecom-self-help-head strong {
  font-size: 1.08rem !important;
}

html[data-active-module="support"] .support-wecom-self-help details {
  border-top: 1px solid rgba(233, 183, 96, 0.12) !important;
  padding: 0.64rem 0 !important;
}

html[data-active-module="support"] .support-wecom-self-help summary {
  cursor: pointer !important;
  color: rgba(245, 242, 234, 0.94) !important;
  font-weight: 780 !important;
}

html[data-active-module="support"] .support-wecom-self-help details ul {
  display: grid !important;
  gap: 0.34rem !important;
  margin: 0.52rem 0 0 !important;
  padding-left: 1.05rem !important;
  color: rgba(235, 232, 222, 0.66) !important;
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
}

html[data-active-module="support"] .support-wecom-self-help details li {
  padding-left: 0.1rem !important;
}

@media (max-width: 980px) {
  html[data-active-module="support"] .content-grid[data-module="support"] {
    overflow: auto !important;
    place-items: start stretch !important;
  }

  html[data-active-module="support"] .support-page.support-wecom-minimal-page {
    overflow: visible !important;
    place-items: start stretch !important;
  }

  html[data-active-module="support"] .support-wecom-minimal-shell {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-height: none !important;
  }

  html[data-active-module="support"] .support-wecom-minimal-card,
  html[data-active-module="support"] .support-wecom-self-help {
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* Support split layout enlargement: make the two modules dominate the viewport. */
html[data-active-module="support"] .support-page.support-wecom-minimal-page {
  padding: clamp(0.35rem, 0.62vw, 0.62rem) !important;
}

html[data-active-module="support"] .support-wecom-minimal-shell {
  grid-template-columns: minmax(31rem, 0.92fr) minmax(38rem, 1.08fr) !important;
  gap: clamp(1.1rem, 1.65vw, 1.55rem) !important;
  width: min(100%, 106rem) !important;
  max-height: 100% !important;
}

html[data-active-module="support"] .support-wecom-minimal-card,
html[data-active-module="support"] .support-wecom-self-help {
  min-height: min(100%, 42.5rem) !important;
}

html[data-active-module="support"] .support-wecom-minimal-card {
  gap: clamp(1.25rem, 1.85vw, 1.85rem) !important;
  padding: clamp(1.9rem, 3.25vw, 3rem) !important;
}

html[data-active-module="support"] .support-wecom-minimal-head {
  gap: 0.62rem !important;
}

html[data-active-module="support"] .support-wecom-minimal-head h3 {
  font-size: clamp(2.75rem, 4.55vw, 4.55rem) !important;
}

html[data-active-module="support"] .support-wecom-minimal-input {
  gap: 0.82rem !important;
}

html[data-active-module="support"] .support-wecom-minimal-input textarea {
  min-height: clamp(5.7rem, 10.6vh, 6.8rem) !important;
  max-height: clamp(5.7rem, 10.6vh, 6.8rem) !important;
  padding: 0.9rem 1rem !important;
  font-size: 1rem !important;
}

html[data-active-module="support"] .support-wecom-minimal-input .glass-button {
  min-width: 12.8rem !important;
  min-height: clamp(5.7rem, 10.6vh, 6.8rem) !important;
}

html[data-active-module="support"] .support-wecom-minimal-notes :is(span, button) {
  padding: 0.52rem 0.84rem !important;
  font-size: 0.86rem !important;
}

html[data-active-module="support"] .support-wecom-self-help {
  max-height: min(100%, 42.5rem) !important;
  padding: clamp(1.45rem, 2.05vw, 1.9rem) !important;
}

html[data-active-module="support"] .support-wecom-self-help-head {
  padding-bottom: 0.8rem !important;
}

html[data-active-module="support"] .support-wecom-self-help-head strong {
  font-size: 1.48rem !important;
}

html[data-active-module="support"] .support-wecom-self-help details {
  padding: 0.98rem 0 !important;
}

html[data-active-module="support"] .support-wecom-self-help summary {
  font-size: 1.08rem !important;
}

html[data-active-module="support"] .support-wecom-self-help details ul {
  gap: 0.48rem !important;
  margin-top: 0.62rem !important;
  padding-left: 1.18rem !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

/* Support recent prompts + library palette sync. */
html[data-active-module="support"] .content-grid[data-module="support"] {
  --library-ref-gold: 232, 184, 111;
  --library-ref-gold-soft: 255, 220, 166;
  --library-ref-line: 255, 255, 255;
  --library-ref-panel: 12, 13, 15;
  position: relative !important;
  isolation: isolate !important;
  background:
    radial-gradient(ellipse at 38% -10%, rgba(255, 222, 172, 0.11), transparent 35%),
    radial-gradient(ellipse at 79% 2%, rgba(68, 107, 137, 0.16), transparent 38%),
    radial-gradient(ellipse at 12% 14%, rgba(130, 91, 51, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(14, 15, 17, 0.98), rgba(6, 7, 9, 0.995) 42%, rgba(3, 4, 6, 0.995)) !important;
}

html[data-active-module="support"] .content-grid[data-module="support"]::before,
html[data-active-module="support"] .content-grid[data-module="support"]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

html[data-active-module="support"] .content-grid[data-module="support"]::before {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045) 50%, transparent),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 5px) !important;
  opacity: 0.36 !important;
  mix-blend-mode: screen !important;
}

html[data-active-module="support"] .content-grid[data-module="support"]::after {
  background:
    radial-gradient(ellipse at 52% 20%, rgba(255, 216, 156, 0.055), transparent 34%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28)) !important;
  opacity: 0.86 !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] > * {
  position: relative !important;
  z-index: 1 !important;
}

html[data-active-module="support"] .support-wecom-minimal-card,
html[data-active-module="support"] .support-wecom-self-help {
  border-color: rgba(var(--library-ref-line), 0.105) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)),
    rgba(var(--library-ref-panel), 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 1.2rem 3.6rem rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(24px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.1) !important;
}

html[data-active-module="support"] .support-wecom-minimal-head .eyebrow,
html[data-active-module="support"] .support-wecom-self-help-head .eyebrow,
html[data-active-module="support"] .support-wecom-self-help-head strong {
  color: rgba(var(--library-ref-gold-soft), 0.94) !important;
}

html[data-active-module="support"] .support-wecom-minimal-head h3 {
  color: rgba(255, 255, 252, 0.96) !important;
  text-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.52) !important;
}

html[data-active-module="support"] .support-wecom-minimal-head p:not(.eyebrow),
html[data-active-module="support"] .support-wecom-status,
html[data-active-module="support"] .support-wecom-self-help details ul {
  color: rgba(236, 232, 220, 0.72) !important;
}

html[data-active-module="support"] .support-wecom-minimal-input textarea {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 0 1px rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="support"] .support-wecom-minimal-input textarea::placeholder {
  color: rgba(236, 232, 220, 0.46) !important;
}

html[data-active-module="support"] .support-wecom-minimal-input .glass-button {
  border-color: rgba(var(--library-ref-gold), 0.64) !important;
  background:
    linear-gradient(100deg, rgba(118, 79, 39, 0.86), rgba(230, 188, 126, 0.72) 48%, rgba(98, 68, 36, 0.82)),
    rgba(var(--library-ref-gold), 0.28) !important;
  color: rgba(255, 245, 225, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.28),
    0 0 1rem rgba(var(--library-ref-gold), 0.15) !important;
}

html[data-active-module="support"] .support-wecom-minimal-notes :is(span, button) {
  border-color: rgba(var(--library-ref-gold), 0.18) !important;
  background: rgba(130, 82, 32, 0.2) !important;
  color: rgba(255, 218, 159, 0.96) !important;
}

html[data-active-module="support"] .support-wecom-minimal-notes-label {
  color: rgba(226, 176, 91, 0.82) !important;
}

html[data-active-module="support"] .support-wecom-minimal-notes button:hover {
  border-color: rgba(var(--library-ref-gold-soft), 0.52) !important;
  background:
    linear-gradient(100deg, rgba(118, 79, 39, 0.86), rgba(230, 188, 126, 0.72) 48%, rgba(98, 68, 36, 0.82)),
    rgba(var(--library-ref-gold), 0.28) !important;
  color: rgba(255, 245, 225, 0.98) !important;
}

html[data-active-module="support"] .support-wecom-self-help details {
  border-top-color: rgba(255, 255, 255, 0.075) !important;
}

html[data-active-module="support"] .support-wecom-self-help summary {
  color: rgba(255, 255, 252, 0.94) !important;
}

/* Support handoff workflow: self-help, ticket status, and material upload. */
html[data-active-module="support"] .support-wecom-minimal-shell {
  grid-template-columns: minmax(26rem, 0.95fr) minmax(24rem, 0.95fr) minmax(28rem, 1.05fr) !important;
  align-items: stretch !important;
  width: min(100%, 112rem) !important;
}

html[data-active-module="support"] .support-wecom-status-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(0.78rem, 1.05vw, 1rem) !important;
  min-height: min(100%, 42.5rem) !important;
  max-height: min(100%, 42.5rem) !important;
  min-width: 0 !important;
}

html[data-active-module="support"] .support-wecom-status-panel > .support-answer-content,
html[data-active-module="support"] .support-wecom-status-panel > .support-wecom-answer-card {
  min-height: 0 !important;
  overflow: auto !important;
}

html[data-active-module="support"] .support-wecom-action-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.54rem !important;
  min-width: clamp(11.6rem, 13.8vw, 13.2rem) !important;
}

html[data-active-module="support"] .support-wecom-action-stack .glass-button {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 3.25rem !important;
  height: auto !important;
  padding: 0.72rem 0.82rem !important;
  border-radius: 0.5rem !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
}

html[data-active-module="support"] .support-wecom-action-stack .glass-button[disabled] {
  cursor: default !important;
  opacity: 0.52 !important;
}

html[data-active-module="support"] .support-wecom-direct-link {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(236, 232, 220, 0.82) !important;
}

html[data-active-module="support"] .support-wecom-upload-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.58rem !important;
}

html[data-active-module="support"] .support-wecom-upload-grid .support-upload-entry {
  position: relative !important;
  display: grid !important;
  gap: 0.2rem !important;
  min-width: 0 !important;
  min-height: 4.9rem !important;
  padding: 0.72rem !important;
  border: 1px solid rgba(var(--library-ref-gold), 0.16) !important;
  border-radius: 0.5rem !important;
  background: rgba(0, 0, 0, 0.18) !important;
  cursor: pointer !important;
}

html[data-active-module="support"] .support-wecom-upload-grid .support-upload-entry input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html[data-active-module="support"] .support-wecom-upload-grid .support-upload-entry span {
  color: rgba(var(--library-ref-gold-soft), 0.92) !important;
  font-size: 0.78rem !important;
  font-weight: 820 !important;
}

html[data-active-module="support"] .support-wecom-upload-grid .support-upload-entry strong,
html[data-active-module="support"] .support-wecom-upload-grid .support-upload-entry small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="support"] .support-wecom-upload-grid .support-upload-entry strong {
  color: rgba(255, 255, 252, 0.92) !important;
  font-size: 0.9rem !important;
}

html[data-active-module="support"] .support-wecom-upload-grid .support-upload-entry small {
  color: rgba(236, 232, 220, 0.56) !important;
  font-size: 0.76rem !important;
}

html[data-active-module="support"] .support-wecom-privacy-note {
  margin: 0 !important;
  color: rgba(236, 232, 220, 0.48) !important;
  font-size: 0.78rem !important;
  line-height: 1.45 !important;
}

html[data-active-module="support"] .support-wecom-status-panel .support-answer-content,
html[data-active-module="support"] .support-wecom-status-panel .support-wecom-answer-card {
  margin: 0 !important;
  border: 1px solid rgba(var(--library-ref-line), 0.105) !important;
  border-radius: 0.5rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)),
    rgba(var(--library-ref-panel), 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 1.2rem 3.2rem rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(24px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.1) !important;
}

html[data-active-module="support"] .support-wecom-status-panel .support-human-dialog {
  display: grid !important;
  gap: 0.48rem !important;
}

html[data-active-module="support"] .support-wecom-status-panel .support-human-dialog textarea {
  min-height: 4.6rem !important;
  max-height: 7.8rem !important;
  resize: vertical !important;
}

html[data-active-module="support"] .support-chat-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 0.78rem !important;
}

html[data-active-module="support"] .support-chat-thread {
  max-height: none !important;
  overflow: auto !important;
}

@media (max-width: 1280px) {
  html[data-active-module="support"] .support-wecom-minimal-shell {
    grid-template-columns: minmax(24rem, 1fr) minmax(24rem, 1fr) !important;
  }

  html[data-active-module="support"] .support-wecom-self-help {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 980px) {
  html[data-active-module="support"] .support-wecom-minimal-shell {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-wecom-status-panel,
  html[data-active-module="support"] .support-wecom-self-help {
    min-height: 0 !important;
    max-height: none !important;
  }
}

@media (max-width: 720px) {
  html[data-active-module="support"] .support-wecom-minimal-input {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-wecom-action-stack {
    min-width: 0 !important;
  }

  html[data-active-module="support"] .support-wecom-upload-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Library mobile-friendly pager: arrows plus tappable page dots, no numeric strip. */
html[data-active-module="nav-library"] .library-pagination {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.34rem, 0.52vw, 0.48rem) !important;
  width: max-content !important;
  padding: clamp(0.16rem, 0.26vw, 0.22rem) clamp(0.22rem, 0.36vw, 0.32rem) !important;
  border-radius: 999px !important;
}

html[data-active-module="nav-library"] .library-pagination-dots {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.18rem, 0.34vw, 0.3rem) !important;
}

html[data-active-module="nav-library"] .library-pagination button.library-pagination-arrow {
  width: clamp(1.78rem, 2.35vw, 2.1rem) !important;
  height: clamp(1.78rem, 2.35vw, 2.1rem) !important;
  min-width: clamp(1.78rem, 2.35vw, 2.1rem) !important;
  min-height: clamp(1.78rem, 2.35vw, 2.1rem) !important;
  border-radius: 999px !important;
  font-size: clamp(1.05rem, 1.35vw, 1.22rem) !important;
  font-weight: 860 !important;
}

html[data-active-module="nav-library"] .library-pagination button.library-pagination-dot {
  display: inline-grid !important;
  place-items: center !important;
  width: clamp(1.28rem, 1.72vw, 1.48rem) !important;
  height: clamp(1.28rem, 1.72vw, 1.48rem) !important;
  min-width: clamp(1.28rem, 1.72vw, 1.48rem) !important;
  min-height: clamp(1.28rem, 1.72vw, 1.48rem) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-pagination button.library-pagination-dot span {
  display: block !important;
  width: clamp(0.42rem, 0.62vw, 0.54rem) !important;
  height: clamp(0.42rem, 0.62vw, 0.54rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 999px !important;
  background: rgba(237, 230, 216, 0.36) !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-pagination button.library-pagination-dot.is-active span {
  width: clamp(1rem, 1.34vw, 1.16rem) !important;
  background: linear-gradient(180deg, rgba(247, 211, 143, 0.98), rgba(184, 130, 51, 0.96)) !important;
  box-shadow: 0 0.26rem 0.72rem rgba(184, 130, 51, 0.26) !important;
}

@media (max-height: 740px) {
  html[data-active-module="nav-library"] .library-pagination {
    padding: 0.04rem 0.16rem !important;
    transform: translateY(-1.24rem) !important;
  }

  html[data-active-module="nav-library"] .library-pagination button.library-pagination-arrow {
    width: 1.16rem !important;
    height: 1.16rem !important;
    min-width: 1.16rem !important;
    min-height: 1.16rem !important;
    font-size: 0.9rem !important;
  }

  html[data-active-module="nav-library"] .library-pagination button.library-pagination-dot {
    width: 0.96rem !important;
    height: 0.96rem !important;
    min-width: 0.96rem !important;
    min-height: 0.96rem !important;
  }

  html[data-active-module="nav-library"] .library-pagination button.library-pagination-dot span {
    width: 0.34rem !important;
    height: 0.34rem !important;
  }

  html[data-active-module="nav-library"] .library-pagination button.library-pagination-dot.is-active span {
    width: 0.78rem !important;
  }
}

/* Customer support single-card restore: keep the previous gold submit button. */
html[data-active-module="support"] .support-page.support-single-page {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 100% !important;
  padding: clamp(1.2rem, 2.4vw, 2rem) !important;
  background:
    radial-gradient(ellipse at 48% 0%, rgba(255, 221, 158, 0.08), transparent 34%),
    radial-gradient(ellipse at 72% 6%, rgba(70, 112, 145, 0.13), transparent 40%),
    linear-gradient(180deg, rgba(17, 17, 18, 0.98), rgba(5, 6, 8, 1)) !important;
}

html[data-active-module="support"] .support-single-shell {
  width: min(100%, 44rem) !important;
  margin: 0 auto !important;
}

html[data-active-module="support"] .support-single-card {
  display: grid !important;
  gap: clamp(0.78rem, 1.1vw, 1rem) !important;
  padding: clamp(0.4rem, 0.8vw, 0.72rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module="support"] .support-single-head {
  display: grid !important;
  gap: 0.7rem !important;
}

html[data-active-module="support"] .support-single-head .eyebrow {
  margin: 0 !important;
  color: rgba(255, 205, 117, 0.88) !important;
  font-size: 0.74rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.04em !important;
}

html[data-active-module="support"] .support-single-head h3 {
  margin: 0 !important;
  color: rgba(255, 255, 252, 0.96) !important;
  font-size: clamp(1.42rem, 2.1vw, 1.78rem) !important;
  line-height: 1.12 !important;
}

html[data-active-module="support"] .support-single-head p {
  margin: 0 !important;
  color: rgba(229, 234, 239, 0.76) !important;
  font-size: clamp(0.9rem, 1.06vw, 1rem) !important;
  font-weight: 650 !important;
  line-height: 1.55 !important;
}

html[data-active-module="support"] .support-single-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.62rem 0.7rem !important;
  align-items: center !important;
}

html[data-active-module="support"] .support-single-field {
  display: grid !important;
  grid-template-columns: auto minmax(12rem, 20rem) !important;
  gap: 0.5rem !important;
  align-items: center !important;
  min-width: 0 !important;
}

html[data-active-module="support"] .support-single-field span,
html[data-active-module="support"] .support-single-prompts strong,
html[data-active-module="support"] .support-human-dialog > span {
  color: rgba(255, 255, 252, 0.92) !important;
  font-size: clamp(0.92rem, 1.02vw, 1rem) !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

html[data-active-module="support"] .support-single-field textarea,
html[data-active-module="support"] .support-human-dialog textarea {
  width: 100% !important;
  min-height: 2.1rem !important;
  max-height: 4.8rem !important;
  padding: 0.32rem 0.48rem !important;
  border: 1px solid rgba(226, 232, 240, 0.18) !important;
  border-radius: 0 !important;
  background: rgba(9, 12, 16, 0.72) !important;
  color: rgba(245, 247, 250, 0.94) !important;
  font-size: 0.78rem !important;
  line-height: 1.32 !important;
  resize: vertical !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="support"] .support-single-field textarea::placeholder,
html[data-active-module="support"] .support-human-dialog textarea::placeholder {
  color: rgba(213, 220, 230, 0.45) !important;
}

html[data-active-module="support"] .support-single-primary.glass-button.primary {
  min-width: 5.5rem !important;
  min-height: 3.48rem !important;
  padding: 0.72rem 0.94rem !important;
  border: 1px solid rgba(255, 218, 159, 0.5) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(100deg, rgba(111, 75, 37, 0.92), rgba(225, 185, 119, 0.76) 48%, rgba(93, 65, 36, 0.9)),
    rgba(232, 184, 111, 0.26) !important;
  color: rgba(255, 246, 226, 0.98) !important;
  font-size: 0.92rem !important;
  font-weight: 860 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 226, 0.3),
    0 0.1rem 0.18rem rgba(255, 255, 255, 0.12),
    0 0 1rem rgba(232, 184, 111, 0.18) !important;
}

html[data-active-module="support"] .support-single-primary.glass-button.primary:hover {
  border-color: rgba(255, 226, 173, 0.68) !important;
  background:
    linear-gradient(100deg, rgba(126, 86, 42, 0.94), rgba(237, 198, 132, 0.82) 48%, rgba(105, 73, 39, 0.92)),
    rgba(232, 184, 111, 0.3) !important;
  transform: translateY(-1px) !important;
}

html[data-active-module="support"] .support-single-prompts {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.36rem !important;
}

html[data-active-module="support"] .support-single-prompts button {
  min-height: 2rem !important;
  padding: 0.28rem 0.5rem !important;
  border: 1px solid rgba(226, 232, 240, 0.34) !important;
  border-radius: 0.12rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(55, 63, 74, 0.58) !important;
  color: rgba(245, 247, 250, 0.92) !important;
  font-size: 0.92rem !important;
  font-weight: 820 !important;
  cursor: pointer !important;
}

html[data-active-module="support"] .support-single-prompts button:hover {
  border-color: rgba(255, 218, 159, 0.45) !important;
  color: rgba(255, 236, 203, 0.98) !important;
}

html[data-active-module="support"] .support-single-note,
html[data-active-module="support"] .support-single-status {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  color: rgba(214, 221, 230, 0.74) !important;
  font-size: 0.95rem !important;
  font-weight: 650 !important;
  line-height: 1.52 !important;
}

html[data-active-module="support"] .support-single-status {
  color: rgba(255, 218, 159, 0.86) !important;
}

html[data-active-module="support"] .support-single-result,
html[data-active-module="support"] .support-single-human {
  display: grid !important;
  gap: 0.72rem !important;
}

html[data-active-module="support"] .support-single-question,
html[data-active-module="support"] .support-single-answer-card,
html[data-active-module="support"] .support-single-human-box,
html[data-active-module="support"] .support-chat-card {
  display: grid !important;
  gap: 0.46rem !important;
  padding: 0.78rem 0.86rem !important;
  border: 1px solid rgba(226, 232, 240, 0.14) !important;
  border-radius: 0.24rem !important;
  background: rgba(9, 12, 16, 0.5) !important;
  color: rgba(238, 242, 247, 0.9) !important;
}

html[data-active-module="support"] .support-single-question span,
html[data-active-module="support"] .support-single-answer-card span,
html[data-active-module="support"] .support-single-human-box span {
  color: rgba(255, 205, 117, 0.82) !important;
  font-size: 0.78rem !important;
  font-weight: 780 !important;
}

html[data-active-module="support"] .support-single-question strong {
  overflow-wrap: anywhere !important;
}

html[data-active-module="support"] .support-single-human-box .support-upload-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.48rem !important;
}

html[data-active-module="support"] .support-single-human-box .support-upload-entry {
  min-height: 3.8rem !important;
  padding: 0.54rem !important;
  border: 1px solid rgba(226, 232, 240, 0.18) !important;
  border-radius: 0.22rem !important;
  background: rgba(55, 63, 74, 0.32) !important;
}

@media (max-width: 720px) {
  html[data-active-module="support"] .support-page.support-single-page {
    place-items: start stretch !important;
    padding: 1rem !important;
  }

  html[data-active-module="support"] .support-single-form,
  html[data-active-module="support"] .support-single-field {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-single-primary.glass-button.primary {
    width: 100% !important;
    min-height: 2.9rem !important;
  }

  html[data-active-module="support"] .support-single-human-box .support-upload-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Library series/list separation: keep the track table clear of the collection cards. */
html[data-active-module="nav-library"] .library-table-head {
  margin-top: clamp(0.5rem, 0.76vw, 0.72rem) !important;
}

@media (max-height: 740px) {
  html[data-active-module="nav-library"] .library-table-head {
    margin-top: 0.58rem !important;
  }

  html[data-active-module="nav-library"] .library-track-table {
    grid-template-rows: repeat(6, clamp(4.23rem, 9.42dvh, 4.34rem)) !important;
  }

  html[data-active-module="nav-library"] .library-track-row {
    height: clamp(4.23rem, 9.42dvh, 4.34rem) !important;
    min-height: clamp(4.23rem, 9.42dvh, 4.34rem) !important;
    max-height: clamp(4.23rem, 9.42dvh, 4.34rem) !important;
  }

  html[data-active-module="nav-library"] .library-track-row img {
    width: clamp(3.55rem, 8dvh, 3.74rem) !important;
    height: clamp(3.55rem, 8dvh, 3.74rem) !important;
    min-width: clamp(3.55rem, 8dvh, 3.74rem) !important;
    min-height: clamp(3.55rem, 8dvh, 3.74rem) !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Library complete series cards: prevent the collection cards from being clipped. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  grid-template-rows: clamp(2.35rem, 2.8vw, 2.62rem) clamp(6.75rem, 8.75vw, 7rem) clamp(1.45rem, 1.9vw, 1.72rem) min-content auto !important;
}

html[data-active-module="nav-library"] .library-series-grid {
  height: clamp(6.75rem, 8.75vw, 7rem) !important;
  min-height: clamp(6.75rem, 8.75vw, 7rem) !important;
  max-height: clamp(6.75rem, 8.75vw, 7rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-series-card {
  width: clamp(6.75rem, 8.75vw, 7rem) !important;
  height: clamp(6.75rem, 8.75vw, 7rem) !important;
  min-height: clamp(6.75rem, 8.75vw, 7rem) !important;
  max-height: clamp(6.75rem, 8.75vw, 7rem) !important;
}

@media (max-height: 740px) {
  html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
    grid-template-rows: clamp(2.22rem, 2.72vw, 2.5rem) 6.55rem clamp(1.38rem, 1.76vw, 1.58rem) min-content auto !important;
    row-gap: 0.36rem !important;
  }

  html[data-active-module="nav-library"] .library-series-grid {
    height: 6.55rem !important;
    min-height: 6.55rem !important;
    max-height: 6.55rem !important;
  }

  html[data-active-module="nav-library"] .library-series-card {
    width: 6.55rem !important;
    height: 6.55rem !important;
    min-height: 6.55rem !important;
    max-height: 6.55rem !important;
    padding: 0.4rem !important;
  }

  html[data-active-module="nav-library"] .library-table-head {
    margin-top: 0.46rem !important;
  }

  html[data-active-module="nav-library"] .library-track-table {
    margin-top: 0.18rem !important;
    grid-template-rows: repeat(6, clamp(3.92rem, 8.72dvh, 4.06rem)) !important;
  }

  html[data-active-module="nav-library"] .library-track-row {
    height: clamp(3.92rem, 8.72dvh, 4.06rem) !important;
    min-height: clamp(3.92rem, 8.72dvh, 4.06rem) !important;
    max-height: clamp(3.92rem, 8.72dvh, 4.06rem) !important;
    padding-block: 0.3rem !important;
  }

  html[data-active-module="nav-library"] .library-track-row img {
    width: clamp(3.35rem, 7.45dvh, 3.58rem) !important;
    height: clamp(3.35rem, 7.45dvh, 3.58rem) !important;
    min-width: clamp(3.35rem, 7.45dvh, 3.58rem) !important;
    min-height: clamp(3.35rem, 7.45dvh, 3.58rem) !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Learning tools top alignment: keep its navigation flush with the library shell. */
html[data-active-module="nav-learningTools"] .app-shell {
  padding: 0 !important;
  place-items: stretch !important;
}

html[data-active-module="nav-learningTools"] .main-stage {
  width: 100dvw !important;
  height: var(--app-height, 100dvh) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

html[data-active-module="nav-learningTools"] .topbar {
  margin-top: 0 !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
  padding: var(--page-pad-y) clamp(1.35rem, 2.1vw, 2rem) !important;
}

/* Support top navigation parity: keep customer service aligned with the rest of the platform. */
html[data-active-module="support"] .main-stage {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: min(100%, var(--stage-max-w)) !important;
  height: 100% !important;
  margin: 0 auto !important;
  padding: var(--page-pad-y) var(--page-pad-x) !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .topbar {
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.58rem, 0.9vw, 0.92rem) !important;
  min-height: auto !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: clamp(0.78rem, 1.2vw, 1.05rem) clamp(0.98rem, 1.6vw, 1.34rem) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(233, 183, 96, 0.12) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 9% 0%, rgba(233, 183, 96, 0.055), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.006)),
    rgba(3, 3, 3, 0.72) !important;
  box-shadow: none !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] {
  align-self: stretch !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html[data-active-module="support"] .top-brand {
  flex: 0 0 auto !important;
  min-width: clamp(8.8rem, 12.8vw, 11rem) !important;
  max-width: clamp(8.8rem, 12.8vw, 11rem) !important;
  min-height: clamp(2.6rem, 3.1vw, 2.95rem) !important;
  padding: 0.14rem 0.38rem 0.14rem 0.16rem !important;
  gap: 0.52rem !important;
}

html[data-active-module="support"] .brand-mark {
  width: clamp(2.38rem, 2.85vw, 2.68rem) !important;
  height: clamp(2.38rem, 2.85vw, 2.68rem) !important;
  font-size: clamp(1.02rem, 1.22vw, 1.16rem) !important;
}

html[data-active-module="support"] .top-brand strong {
  font-size: clamp(1rem, 1.08vw, 1.16rem) !important;
}

html[data-active-module="support"] .top-nav {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: clamp(2.9rem, 3.35vw, 3.22rem) !important;
  margin-inline: clamp(0.56rem, 0.95vw, 1rem) !important;
  padding: 0.17rem !important;
  gap: 0.17rem !important;
}

html[data-active-module="support"] .top-nav .nav-item {
  min-height: clamp(2.52rem, 2.92vw, 2.82rem) !important;
  padding: 0.4rem 0.58rem !important;
  font-size: clamp(0.84rem, 0.94vw, 1rem) !important;
  font-weight: 800 !important;
}

html[data-active-module="support"] .top-nav .nav-icon {
  margin-right: 0.22rem !important;
  font-size: 1em !important;
}

html[data-active-module="support"] .notification-button,
html[data-active-module="support"] .user-profile {
  width: clamp(2.56rem, 3vw, 2.86rem) !important;
  height: clamp(2.56rem, 3vw, 2.86rem) !important;
  min-width: clamp(2.56rem, 3vw, 2.86rem) !important;
}

/* Membership center reference restore: keep the original clean three-card + comparison table page. */
html[data-active-module="membership"] .content-grid[data-module="membership"] > .membership-reference-layout {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(1rem, 1.75vw, 1.55rem) !important;
  width: min(100%, 86rem) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: clamp(0.65rem, 1.08vw, 1rem) 0 !important;
  overflow: hidden !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-alerts,
html[data-active-module="membership"] .membership-reference-layout .membership-overview-panel,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-detail-grid,
html[data-active-module="membership"] .membership-reference-layout .membership-side-stack,
html[data-active-module="membership"] .membership-reference-layout .membership-plan-description,
html[data-active-module="membership"] .membership-reference-layout .membership-plan-highlights {
  display: none !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-plan-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(0.9rem, 1.5vw, 1.25rem) !important;
  min-height: clamp(8.2rem, 20vh, 10.5rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 1fr auto !important;
  align-items: center !important;
  min-height: clamp(8.2rem, 20vh, 10.5rem) !important;
  padding: clamp(1rem, 1.5vw, 1.35rem) clamp(1.08rem, 1.75vw, 1.5rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-head {
  align-self: center !important;
  gap: clamp(0.42rem, 0.72vw, 0.62rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-meta {
  display: flex !important;
  align-items: center !important;
  gap: 0.46rem !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card h4 {
  margin: 0 !important;
  font-size: clamp(1.36rem, 2vw, 1.85rem) !important;
  line-height: 1.05 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price {
  align-self: center !important;
  justify-self: end !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button {
  align-self: end !important;
  justify-self: start !important;
  min-width: clamp(7rem, 10vw, 9rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-table-shell {
  display: grid !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-reference-grid {
  height: 100% !important;
  min-height: 0 !important;
}

/* Membership background sync: match the final music-library canvas. */
html[data-active-module="membership"],
html[data-active-module="membership"] body {
  background: #030405 !important;
}

html[data-active-module="membership"] .app-shell,
html[data-active-module="membership"] .main-stage,
html[data-active-module="membership"] .content-grid[data-module="membership"] {
  background: #030405 !important;
}

html[data-active-module="membership"] .content-grid[data-module="membership"]::before,
html[data-active-module="membership"] .content-grid[data-module="membership"]::after {
  content: none !important;
  display: none !important;
}

/* Membership lifetime tone: muted mist-purple surface from the supplied reference. */
html[data-active-module="membership"] .membership-showcase-card.is-lifetime {
  --membership-accent: rgba(174, 88, 159, 0.92) !important;
  --membership-accent-soft: rgba(126, 54, 112, 0.2) !important;
  --membership-card-glow: rgba(142, 62, 128, 0.18) !important;
  border-color: rgba(117, 92, 122, 0.78) !important;
  background:
    radial-gradient(circle at 48% 42%, rgba(151, 54, 133, 0.38), transparent 28%),
    radial-gradient(circle at 58% 58%, rgba(83, 31, 82, 0.34), transparent 42%),
    linear-gradient(135deg, rgba(34, 19, 39, 0.98) 0%, rgba(25, 18, 31, 0.98) 44%, rgba(13, 13, 18, 0.99) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 255, 0.055),
    inset 0 0 2.8rem rgba(132, 55, 119, 0.14),
    0 1.2rem 2.8rem rgba(0, 0, 0, 0.46) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-lifetime::before {
  background:
    radial-gradient(circle at 48% 45%, rgba(163, 58, 145, 0.28), transparent 34%),
    linear-gradient(90deg, rgba(16, 13, 20, 0.68), rgba(38, 19, 46, 0.42) 46%, rgba(12, 12, 16, 0.12)) !important;
  opacity: 0.72 !important;
  filter: saturate(0.82) blur(0.2px) !important;
}

html[data-active-module="membership"] .membership-reference-card.is-lifetime {
  border-color: rgba(117, 92, 122, 0.78) !important;
  background:
    radial-gradient(circle at 48% 42%, rgba(151, 54, 133, 0.38), transparent 28%),
    radial-gradient(circle at 58% 58%, rgba(83, 31, 82, 0.34), transparent 42%),
    linear-gradient(135deg, rgba(34, 19, 39, 0.98) 0%, rgba(25, 18, 31, 0.98) 44%, rgba(13, 13, 18, 0.99) 100%) !important;
  background-image:
    radial-gradient(circle at 48% 42%, rgba(151, 54, 133, 0.38), transparent 28%),
    radial-gradient(circle at 58% 58%, rgba(83, 31, 82, 0.34), transparent 42%),
    linear-gradient(135deg, rgba(34, 19, 39, 0.98) 0%, rgba(25, 18, 31, 0.98) 44%, rgba(13, 13, 18, 0.99) 100%) !important;
  filter: saturate(0.86) brightness(1.02) contrast(1.04) !important;
}

/* Membership lifetime seam fix: remove the old right-side image mask edge. */
html[data-active-module="membership"] .membership-showcase-card.is-lifetime::before {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  background:
    radial-gradient(circle at 46% 42%, rgba(166, 58, 146, 0.22), transparent 30%),
    radial-gradient(circle at 74% 50%, rgba(71, 31, 79, 0.22), transparent 38%),
    linear-gradient(90deg, rgba(20, 14, 25, 0.18), rgba(39, 18, 46, 0.16) 48%, rgba(16, 13, 20, 0.1)) !important;
  opacity: 0.64 !important;
  mix-blend-mode: screen !important;
}

/* Membership yearly tone: soft amber-brown glow from the supplied reference. */
html[data-active-module="membership"] .membership-showcase-card.is-yearly {
  --membership-accent: rgba(255, 184, 92, 0.96) !important;
  --membership-accent-soft: rgba(228, 111, 35, 0.22) !important;
  --membership-card-glow: rgba(232, 116, 36, 0.2) !important;
  border-color: rgba(190, 116, 50, 0.78) !important;
  background:
    radial-gradient(ellipse at 28% 45%, rgba(255, 139, 62, 0.42) 0%, rgba(220, 98, 35, 0.22) 24%, rgba(118, 54, 22, 0.08) 48%, transparent 72%),
    radial-gradient(ellipse at 44% 30%, rgba(246, 151, 74, 0.2) 0%, rgba(134, 62, 23, 0.1) 42%, transparent 76%),
    radial-gradient(ellipse at 70% 48%, rgba(75, 38, 19, 0.2) 0%, transparent 68%),
    linear-gradient(135deg, rgba(69, 35, 14, 0.98) 0%, rgba(37, 21, 13, 0.98) 44%, rgba(14, 12, 11, 0.99) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 188, 0.07),
    inset 0 0 4.2rem rgba(218, 105, 36, 0.12),
    0 1.2rem 2.8rem rgba(0, 0, 0, 0.46) !important;
}

html[data-active-module="membership"] .membership-reference-card.is-yearly {
  border-color: rgba(190, 116, 50, 0.78) !important;
  background:
    radial-gradient(ellipse at 28% 45%, rgba(255, 139, 62, 0.42) 0%, rgba(220, 98, 35, 0.22) 24%, rgba(118, 54, 22, 0.08) 48%, transparent 72%),
    radial-gradient(ellipse at 44% 30%, rgba(246, 151, 74, 0.2) 0%, rgba(134, 62, 23, 0.1) 42%, transparent 76%),
    radial-gradient(ellipse at 70% 48%, rgba(75, 38, 19, 0.2) 0%, transparent 68%),
    linear-gradient(135deg, rgba(69, 35, 14, 0.98) 0%, rgba(37, 21, 13, 0.98) 44%, rgba(14, 12, 11, 0.99) 100%) !important;
  background-image:
    radial-gradient(ellipse at 28% 45%, rgba(255, 139, 62, 0.42) 0%, rgba(220, 98, 35, 0.22) 24%, rgba(118, 54, 22, 0.08) 48%, transparent 72%),
    radial-gradient(ellipse at 44% 30%, rgba(246, 151, 74, 0.2) 0%, rgba(134, 62, 23, 0.1) 42%, transparent 76%),
    radial-gradient(ellipse at 70% 48%, rgba(75, 38, 19, 0.2) 0%, transparent 68%),
    linear-gradient(135deg, rgba(69, 35, 14, 0.98) 0%, rgba(37, 21, 13, 0.98) 44%, rgba(14, 12, 11, 0.99) 100%) !important;
  filter: saturate(0.9) brightness(1.03) contrast(1.02) !important;
}

/* Membership plan glow de-ring: remove visible circular overlay edges. */
html[data-active-module="membership"] .membership-showcase-card.is-yearly {
  background:
    radial-gradient(ellipse 132% 118% at 26% 46%, rgba(255, 139, 62, 0.36) 0%, rgba(226, 102, 35, 0.2) 24%, rgba(126, 57, 22, 0.09) 52%, rgba(58, 31, 18, 0.035) 76%, rgba(18, 13, 11, 0) 100%),
    radial-gradient(ellipse 118% 96% at 46% 24%, rgba(247, 158, 83, 0.15) 0%, rgba(136, 62, 24, 0.075) 46%, rgba(25, 16, 12, 0) 100%),
    linear-gradient(135deg, rgba(69, 35, 14, 0.98) 0%, rgba(37, 21, 13, 0.98) 46%, rgba(14, 12, 11, 0.99) 100%) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-yearly::after,
html[data-active-module="membership"] .membership-showcase-card.is-lifetime::after {
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008) 34%, rgba(0, 0, 0, 0) 72%) !important;
  opacity: 0.32 !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-lifetime::before {
  background:
    radial-gradient(ellipse 128% 116% at 43% 42%, rgba(166, 58, 146, 0.18) 0%, rgba(98, 39, 94, 0.11) 42%, rgba(35, 19, 40, 0.035) 72%, rgba(13, 13, 18, 0) 100%),
    linear-gradient(100deg, rgba(31, 18, 36, 0.11), rgba(37, 18, 44, 0.07) 54%, rgba(13, 13, 18, 0)) !important;
  opacity: 0.52 !important;
}

html[data-active-module="membership"] .membership-reference-card.is-yearly {
  background:
    radial-gradient(ellipse 132% 118% at 26% 46%, rgba(255, 139, 62, 0.36) 0%, rgba(226, 102, 35, 0.2) 24%, rgba(126, 57, 22, 0.09) 52%, rgba(58, 31, 18, 0.035) 76%, rgba(18, 13, 11, 0) 100%),
    radial-gradient(ellipse 118% 96% at 46% 24%, rgba(247, 158, 83, 0.15) 0%, rgba(136, 62, 24, 0.075) 46%, rgba(25, 16, 12, 0) 100%),
    linear-gradient(135deg, rgba(69, 35, 14, 0.98) 0%, rgba(37, 21, 13, 0.98) 46%, rgba(14, 12, 11, 0.99) 100%) !important;
  background-image:
    radial-gradient(ellipse 132% 118% at 26% 46%, rgba(255, 139, 62, 0.36) 0%, rgba(226, 102, 35, 0.2) 24%, rgba(126, 57, 22, 0.09) 52%, rgba(58, 31, 18, 0.035) 76%, rgba(18, 13, 11, 0) 100%),
    radial-gradient(ellipse 118% 96% at 46% 24%, rgba(247, 158, 83, 0.15) 0%, rgba(136, 62, 24, 0.075) 46%, rgba(25, 16, 12, 0) 100%),
    linear-gradient(135deg, rgba(69, 35, 14, 0.98) 0%, rgba(37, 21, 13, 0.98) 46%, rgba(14, 12, 11, 0.99) 100%) !important;
}

/* Membership select buttons: glossy 3D capsule, inspired by the reference material. */
html[data-active-module="membership"] .membership-showcase-card > button {
  position: relative !important;
  isolation: isolate !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: clamp(2.42rem, 2.86vw, 2.78rem) !important;
  border-width: 1px !important;
  border-color: color-mix(in srgb, var(--membership-accent) 72%, white 18%) !important;
  color: rgba(255, 248, 235, 0.96) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.48) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--membership-accent) 72%, white 20%) 0%, color-mix(in srgb, var(--membership-accent) 64%, black 12%) 38%, color-mix(in srgb, var(--membership-accent) 54%, black 34%) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -0.52rem 1rem color-mix(in srgb, var(--membership-accent) 36%, black 42%),
    inset 0 0.42rem 0.9rem rgba(255, 255, 255, 0.12),
    0 0.18rem 0 color-mix(in srgb, var(--membership-accent) 48%, black 54%),
    0 0.85rem 1.65rem color-mix(in srgb, var(--membership-accent) 20%, transparent),
    0 1.1rem 2rem rgba(0, 0, 0, 0.42) !important;
  transform: translateY(0) !important;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
  overflow: hidden !important;
}

html[data-active-module="membership"] .membership-showcase-card > button::before,
html[data-active-module="membership"] .membership-showcase-card > button::after {
  position: absolute !important;
  content: "" !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

html[data-active-module="membership"] .membership-showcase-card > button::before {
  z-index: -1 !important;
  inset: 0.1rem 0.22rem auto !important;
  height: 44% !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18) 58%, transparent 100%) !important;
  opacity: 0.52 !important;
  filter: blur(0.02rem) !important;
}

html[data-active-module="membership"] .membership-showcase-card > button::after {
  z-index: -1 !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 68% 18%, rgba(255, 255, 255, 0.46), transparent 22%),
    linear-gradient(110deg, rgba(255, 255, 255, 0.22), transparent 28%, rgba(255, 255, 255, 0.14) 56%, transparent 72%) !important;
  opacity: 0.36 !important;
  mix-blend-mode: screen !important;
}

html[data-active-module="membership"] .membership-showcase-card > button:hover {
  filter: brightness(1.08) saturate(1.06) !important;
  transform: translateY(-1px) !important;
}

html[data-active-module="membership"] .membership-showcase-card > button:active {
  transform: translateY(2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -0.34rem 0.78rem color-mix(in srgb, var(--membership-accent) 30%, black 48%),
    0 0.04rem 0 color-mix(in srgb, var(--membership-accent) 32%, black 62%),
    0 0.35rem 0.9rem rgba(0, 0, 0, 0.45) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-lifetime > button {
  color: rgba(255, 244, 255, 0.97) !important;
}

/* Membership monthly card polish: softer corners and quieter outline. */
html[data-active-module="membership"] .membership-showcase-card.is-monthly {
  --membership-accent: rgba(68, 154, 255, 0.96) !important;
  --membership-accent-soft: rgba(43, 126, 210, 0.18) !important;
  border-color: rgba(91, 154, 210, 0.42) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(ellipse 112% 92% at 35% 36%, rgba(37, 105, 168, 0.22) 0%, rgba(18, 64, 113, 0.12) 46%, transparent 78%),
    linear-gradient(135deg, rgba(8, 29, 51, 0.98) 0%, rgba(5, 16, 29, 0.98) 48%, rgba(3, 8, 15, 0.99) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(205, 232, 255, 0.055),
    0 1.1rem 2.6rem rgba(0, 0, 0, 0.42) !important;
}

html[data-active-module="membership"] .membership-showcase-card.is-monthly::after {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.006) 36%, transparent 72%) !important;
  opacity: 0.26 !important;
}

html[data-active-module="membership"] .membership-reference-card.is-monthly {
  border-color: rgba(91, 154, 210, 0.42) !important;
  border-radius: 10px !important;
}

/* Membership benefits table: align table surfaces with the music-library canvas. */
html[data-active-module="membership"] .membership-showcase-table-shell,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-table-shell,
html[data-active-module="membership"] .membership-reference-table,
html[data-active-module="membership"] .membership-reference-grid {
  border-color: rgba(233, 183, 96, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(0, 0, 0, 0.12)),
    #030405 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 1.15rem 2.8rem rgba(0, 0, 0, 0.48) !important;
}

html[data-active-module="membership"] .membership-showcase-table,
html[data-active-module="membership"] .membership-reference-row,
html[data-active-module="membership"] .membership-comparison-row {
  background: transparent !important;
}

html[data-active-module="membership"] .membership-reference-row > *,
html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row > * {
  border-right-color: rgba(233, 183, 96, 0.105) !important;
  border-bottom-color: rgba(233, 183, 96, 0.085) !important;
  background: #030405 !important;
  color: rgba(245, 242, 234, 0.78) !important;
}

html[data-active-module="membership"] .membership-reference-row.is-head > *,
html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row.is-head > * {
  background:
    linear-gradient(180deg, rgba(233, 183, 96, 0.045), rgba(0, 0, 0, 0.08)),
    #030405 !important;
  color: rgba(235, 203, 147, 0.96) !important;
}

html[data-active-module="membership"] .membership-reference-row:nth-child(even) > *,
html[data-active-module="membership"] .membership-showcase-table .membership-comparison-row:nth-child(even) > * {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.008), rgba(0, 0, 0, 0.035)),
    #030405 !important;
}

/* Membership lifetime violin restore: bring back the full right-side violin card art. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime {
  padding-right: min(21rem, 28%) !important;
  border-color: rgba(117, 92, 122, 0.78) !important;
  background:
    radial-gradient(ellipse 78% 82% at 36% 43%, rgba(151, 54, 133, 0.32), transparent 42%),
    radial-gradient(ellipse 70% 68% at 74% 38%, rgba(20, 52, 73, 0.24), transparent 54%),
    linear-gradient(112deg, rgba(34, 19, 39, 0.98) 0%, rgba(12, 17, 26, 0.98) 48%, rgba(3, 8, 15, 0.99) 100%) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime::before {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  z-index: 0 !important;
  display: block !important;
  width: min(20rem, 44%) !important;
  content: "" !important;
  background:
    linear-gradient(90deg, rgba(10, 12, 18, 0), rgba(8, 12, 18, 0.2) 24%, rgba(5, 8, 13, 0.72) 100%),
    url("/platform/assets/membership-violin-cut.png?v=membership-clean-sampled-20260606-2") right center / cover no-repeat !important;
  opacity: 0.82 !important;
  filter: saturate(0.9) brightness(0.72) contrast(1.08) !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime::after {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01) 32%, transparent 72%),
    radial-gradient(ellipse 58% 74% at 76% 48%, rgba(98, 68, 118, 0.12), transparent 74%) !important;
  opacity: 0.42 !important;
}

/* Membership lifetime image off: remove the right-side violin art only. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime::before,
html[data-active-module="membership"] .membership-showcase-card.is-lifetime::before {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

/* Membership plan cards: brushed matte darkwood finish. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card {
  border-radius: 10px !important;
  border-color: color-mix(in srgb, var(--membership-accent) 34%, rgba(184, 139, 86, 0.34)) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, rgba(0, 0, 0, 0) 1px 9px),
    radial-gradient(ellipse 95% 85% at 78% 38%, color-mix(in srgb, var(--membership-accent) 18%, transparent), transparent 56%),
    radial-gradient(ellipse 105% 92% at 20% 78%, rgba(166, 89, 41, 0.13), transparent 62%),
    linear-gradient(112deg, rgba(35, 20, 13, 0.94) 0%, rgba(17, 14, 13, 0.98) 46%, rgba(5, 6, 7, 0.995) 100%) !important;
  background-blend-mode: soft-light, normal, screen, normal, normal !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 176, 0.055),
    inset 0 -1.15rem 2.2rem rgba(0, 0, 0, 0.28),
    0 1.1rem 2.5rem rgba(0, 0, 0, 0.48) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card::after {
  background:
    linear-gradient(100deg, rgba(255, 214, 156, 0.038), rgba(255, 255, 255, 0.006) 36%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 236, 196, 0.02) 0 1px, transparent 1px 8px) !important;
  opacity: 0.5 !important;
  mix-blend-mode: screen !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-monthly {
  --membership-accent: rgba(74, 142, 204, 0.78) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly {
  --membership-accent: rgba(221, 132, 54, 0.86) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime {
  --membership-accent: rgba(150, 83, 142, 0.82) !important;
  padding-right: clamp(1.08rem, 1.75vw, 1.5rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button {
  border-color: color-mix(in srgb, var(--membership-accent) 44%, rgba(229, 178, 116, 0.36)) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, color-mix(in srgb, var(--membership-accent) 38%, rgba(56, 38, 28, 0.9)) 0%, rgba(30, 21, 17, 0.96) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 229, 189, 0.18),
    inset 0 -0.45rem 0.9rem rgba(0, 0, 0, 0.36),
    0 0.1rem 0 color-mix(in srgb, var(--membership-accent) 34%, black 56%),
    0 0.65rem 1.25rem rgba(0, 0, 0, 0.36) !important;
  filter: saturate(0.92) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button::before,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button::after {
  opacity: 0.22 !important;
}

/* Membership brushed matte cleanup: no grid blocks, and monthly stays fully blue. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse 95% 85% at 76% 38%, color-mix(in srgb, var(--membership-accent) 18%, transparent), transparent 58%),
    linear-gradient(112deg, rgba(27, 19, 16, 0.94) 0%, rgba(15, 14, 13, 0.98) 48%, rgba(5, 6, 7, 0.995) 100%) !important;
  background-blend-mode: soft-light, screen, normal !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card::after {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.006) 34%, transparent 72%) !important;
  opacity: 0.38 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-monthly {
  --membership-accent: rgba(64, 145, 224, 0.86) !important;
  border-color: rgba(77, 145, 205, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(205, 232, 255, 0.016) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse 96% 82% at 72% 38%, rgba(51, 128, 202, 0.2), transparent 58%),
    radial-gradient(ellipse 108% 92% at 18% 74%, rgba(20, 72, 132, 0.16), transparent 64%),
    linear-gradient(112deg, rgba(5, 32, 58, 0.96) 0%, rgba(5, 19, 36, 0.98) 48%, rgba(3, 8, 15, 0.995) 100%) !important;
  background-blend-mode: soft-light, screen, normal, normal !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-monthly::after {
  background:
    linear-gradient(104deg, rgba(194, 228, 255, 0.03), rgba(255, 255, 255, 0.004) 38%, transparent 72%) !important;
  opacity: 0.36 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-monthly > button {
  border-color: rgba(91, 161, 226, 0.56) !important;
  background:
    linear-gradient(180deg, rgba(63, 140, 211, 0.76) 0%, rgba(29, 76, 125, 0.88) 48%, rgba(11, 32, 58, 0.96) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(211, 237, 255, 0.22),
    inset 0 -0.45rem 0.9rem rgba(0, 14, 34, 0.42),
    0 0.1rem 0 rgba(31, 82, 132, 0.68),
    0 0.65rem 1.25rem rgba(0, 0, 0, 0.36) !important;
}

/* Membership plan emphasis: soften monthly and make yearly the primary choice. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-monthly {
  --membership-accent: rgba(82, 137, 184, 0.66) !important;
  border-color: rgba(88, 137, 178, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(205, 232, 255, 0.01) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse 92% 78% at 74% 38%, rgba(50, 111, 166, 0.13), transparent 60%),
    radial-gradient(ellipse 108% 92% at 18% 74%, rgba(18, 56, 104, 0.1), transparent 66%),
    linear-gradient(112deg, rgba(5, 25, 45, 0.94) 0%, rgba(5, 16, 31, 0.98) 50%, rgba(3, 8, 15, 0.995) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(205, 232, 255, 0.035),
    0 0.9rem 2rem rgba(0, 0, 0, 0.38) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-monthly .membership-plan-badge {
  filter: saturate(0.76) brightness(0.92) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-monthly > button {
  border-color: rgba(82, 136, 184, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(42, 102, 158, 0.58) 0%, rgba(25, 65, 112, 0.72) 48%, rgba(10, 28, 52, 0.9) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(211, 237, 255, 0.12),
    inset 0 -0.38rem 0.78rem rgba(0, 14, 34, 0.34),
    0 0.08rem 0 rgba(24, 67, 112, 0.52),
    0 0.5rem 1rem rgba(0, 0, 0, 0.32) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly {
  --membership-accent: rgba(245, 151, 57, 0.98) !important;
  border-color: rgba(224, 129, 32, 0.88) !important;
  background:
    linear-gradient(180deg, rgba(255, 216, 154, 0.022) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse 96% 82% at 70% 42%, rgba(236, 132, 39, 0.3), transparent 56%),
    radial-gradient(ellipse 112% 92% at 17% 72%, rgba(138, 63, 18, 0.28), transparent 64%),
    linear-gradient(112deg, rgba(57, 28, 9, 0.98) 0%, rgba(31, 18, 10, 0.99) 48%, rgba(6, 7, 7, 0.995) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 176, 0.095),
    inset 0 -1.1rem 2.2rem rgba(0, 0, 0, 0.28),
    0 0 1.3rem rgba(231, 124, 31, 0.13),
    0 1.25rem 2.8rem rgba(0, 0, 0, 0.5) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly .membership-current-price strong,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly .membership-current-price small,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly .membership-current-price em {
  color: rgba(255, 210, 128, 0.99) !important;
  text-shadow: 0 0 1.1rem rgba(235, 137, 42, 0.2) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly > button {
  border-color: rgba(238, 145, 51, 0.78) !important;
  background:
    linear-gradient(180deg, rgba(196, 111, 34, 0.82) 0%, rgba(96, 50, 19, 0.92) 50%, rgba(36, 21, 12, 0.98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 180, 0.24),
    inset 0 -0.45rem 0.9rem rgba(20, 9, 2, 0.42),
    0 0.1rem 0 rgba(126, 65, 20, 0.72),
    0 0.75rem 1.4rem rgba(157, 74, 15, 0.18),
    0 0.65rem 1.25rem rgba(0, 0, 0, 0.36) !important;
}

/* Learning tools clean circle-arrow lock: one image layer, one text layer, round arrows. */
html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
  display: block !important;
  height: calc(var(--app-height, 100dvh) - clamp(4.2rem, 5.2vw, 5.35rem)) !important;
  padding: clamp(1.32rem, 1.85vw, 2rem) clamp(1.75rem, 2.7vw, 2.9rem) clamp(1.38rem, 2vw, 2.1rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-learningTools"] .nav-workbench.nav-workbench-tools {
  display: block !important;
  width: min(100%, 1578px) !important;
  max-width: 1578px !important;
  height: auto !important;
  margin: 0 auto !important;
}

html[data-active-module="nav-learningTools"] .tools-board-layout {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: clamp(1.45rem, 1.95vw, 2.05rem) !important;
  height: auto !important;
  align-content: start !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-section {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: clamp(0.88rem, 1.08vw, 1.12rem) !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html[data-active-module="nav-learningTools"] .tools-learning-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(0.74rem, 1vw, 0.95rem) !important;
  height: auto !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.9rem, 1.25vw, 1.18rem) !important;
  height: auto !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 24px !important;
  background-color: rgba(7, 8, 10, 0.94) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 48px rgba(0, 0, 0, 0.32) !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card::after,
html[data-active-module="nav-learningTools"] .tools-material-card::after,
html[data-active-module="nav-learningTools"] .tools-practice-card::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.52) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 42%, rgba(0, 0, 0, 0) 76%) !important;
  pointer-events: none !important;
}

html[data-active-module="nav-learningTools"] .tools-card-object,
html[data-active-module="nav-learningTools"] .tools-card-visual,
html[data-active-module="nav-learningTools"] .tools-card-object::before,
html[data-active-module="nav-learningTools"] .tools-card-object::after,
html[data-active-module="nav-learningTools"] .tools-card-visual::before,
html[data-active-module="nav-learningTools"] .tools-card-visual::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card > .tools-card-icon {
  position: absolute !important;
  inset: auto !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 1fr auto auto !important;
  align-content: stretch !important;
  justify-items: start !important;
  min-height: clamp(18.5rem, 22.1vw, 21.95rem) !important;
  padding: clamp(1.18rem, 1.5vw, 1.55rem) !important;
  text-align: left !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 1fr auto auto !important;
  align-content: stretch !important;
  align-items: stretch !important;
  min-height: clamp(16.75rem, 18.9vw, 19rem) !important;
  padding: clamp(1.35rem, 1.8vw, 1.88rem) !important;
  text-align: left !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro {
  background-image: url("/platform/assets/learning-card-feature.png?v=learning-tools-circle-clean-20260607-4") !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-basics {
  background-image: url("/platform/assets/learning-card-basic.png?v=learning-tools-circle-clean-20260607-4") !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-posture {
  background-image: url("/platform/assets/learning-card-posture.png?v=learning-tools-circle-clean-20260607-4") !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-notes {
  background-image: url("/platform/assets/learning-card-notes.png?v=learning-tools-circle-clean-20260607-4") !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-theory {
  background-image: url("/platform/assets/learning-card-theory.png?v=learning-tools-circle-clean-20260607-4") !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner {
  background-image: url("/platform/assets/learning-tool-tuner-no-text.png?v=learning-tools-circle-clean-20260607-4") !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
  background-image: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png") !important;
}

html[data-active-module="nav-learningTools"] .tools-card-copy,
html[data-active-module="nav-learningTools"] .tools-practice-copy,
html[data-active-module="nav-learningTools"] .tools-card-arrow {
  position: relative !important;
  z-index: 2 !important;
  grid-column: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module="nav-learningTools"] .tools-card-copy::before,
html[data-active-module="nav-learningTools"] .tools-card-copy::after,
html[data-active-module="nav-learningTools"] .tools-practice-copy::before,
html[data-active-module="nav-learningTools"] .tools-practice-copy::after {
  content: none !important;
  display: none !important;
}

html[data-active-module="nav-learningTools"] .tools-card-copy,
html[data-active-module="nav-learningTools"] .tools-practice-copy {
  grid-row: 2 !important;
  display: grid !important;
  gap: 0.38rem !important;
  align-self: end !important;
  justify-self: start !important;
  max-width: min(17rem, 72%) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-copy {
  max-width: min(18rem, 46%) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card strong,
html[data-active-module="nav-learningTools"] .tools-practice-copy strong {
  color: rgba(248, 249, 252, 0.98) !important;
  overflow: visible !important;
  font-size: clamp(1.08rem, 1.24vw, 1.3rem) !important;
  font-weight: 820 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.62) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-copy strong {
  font-size: clamp(1.32rem, 1.58vw, 1.64rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card small,
html[data-active-module="nav-learningTools"] .tools-practice-copy small {
  color: rgba(245, 242, 234, 0.72) !important;
  overflow: visible !important;
  font-size: clamp(0.74rem, 0.84vw, 0.86rem) !important;
  line-height: 1.34 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.58) !important;
}

html[data-active-module="nav-learningTools"] .tools-card-arrow {
  grid-row: 3 !important;
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  place-items: center !important;
  justify-self: start !important;
  align-self: start !important;
  margin-top: clamp(0.92rem, 1.14vw, 1.22rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  color: rgba(248, 244, 236, 0.95) !important;
  font-size: 1.24rem !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
    overflow-y: auto !important;
  }

  html[data-active-module="nav-learningTools"] .tools-learning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-practice-grid {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="nav-learningTools"] .tools-practice-copy {
    max-width: min(18rem, 62%) !important;
  }
}

@media (min-width: 1620px) and (max-height: 900px) {
  html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
    padding-top: clamp(1rem, 1.25vw, 1.3rem) !important;
    padding-bottom: clamp(0.85rem, 1vw, 1.05rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-board-layout {
    gap: clamp(1.05rem, 1.35vw, 1.42rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-entry-section {
    gap: clamp(0.62rem, 0.78vw, 0.82rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-material-card {
    height: 330px !important;
    min-height: 0 !important;
  }

  html[data-active-module="nav-learningTools"] .tools-practice-card {
    height: 268px !important;
    min-height: 0 !important;
  }

  html[data-active-module="nav-learningTools"] .tools-card-arrow {
    margin-top: 0.82rem !important;
  }
}

/* Learning tools metronome head restore: use the taller clean asset and pin it to the top. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
  background-image: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png") !important;
  background-position: center top !important;
  background-size: 100% auto !important;
}

/* Learning tools metronome popout: let the metronome head rise above the card frame. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
  overflow: visible !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before {
  content: "" !important;
  position: absolute !important;
  top: -40px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png") center top / 100% 100% no-repeat !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after {
  top: 0 !important;
  border-radius: 0 0 24px 24px !important;
}

/* Learning tools brightness pass: make all seven module cards read a bit lighter. */
html[data-active-module="nav-learningTools"] .tools-entry-card::after,
html[data-active-module="nav-learningTools"] .tools-material-card::after,
html[data-active-module="nav-learningTools"] .tools-practice-card::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.055) 45%, rgba(0, 0, 0, 0.36) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.1) 42%, rgba(0, 0, 0, 0) 76%) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    url("/platform/assets/learning-card-feature.png?v=learning-tools-brightness-20260607-1") !important;
  background-blend-mode: screen, normal !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-basics {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    url("/platform/assets/learning-card-basic.png?v=learning-tools-brightness-20260607-1") !important;
  background-blend-mode: screen, normal !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-posture {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    url("/platform/assets/learning-card-posture.png?v=learning-tools-brightness-20260607-1") !important;
  background-blend-mode: screen, normal !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-notes {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    url("/platform/assets/learning-card-notes.png?v=learning-tools-brightness-20260607-1") !important;
  background-blend-mode: screen, normal !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-theory {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    url("/platform/assets/learning-card-theory.png?v=learning-tools-brightness-20260607-1") !important;
  background-blend-mode: screen, normal !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    url("/platform/assets/learning-tool-tuner-no-text.png?v=learning-tools-brightness-20260607-1") !important;
  background-blend-mode: screen, normal !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before {
  filter: brightness(1.13) saturate(1.08) contrast(1.02) !important;
}

/* Library filter feedback: clearer result count, selected series and favorite states. */
html[data-active-module="nav-library"] .library-table-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: clamp(0.56rem, 0.72vw, 0.74rem) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-table-title em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.34rem !important;
  padding: 0.12rem 0.52rem !important;
  border: 1px solid rgba(var(--library-ref-gold-soft), 0.34) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(var(--library-ref-gold-soft), 0.2), rgba(var(--library-ref-gold), 0.1)),
    rgba(12, 10, 8, 0.72) !important;
  color: rgba(255, 229, 177, 0.98) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.76rem) !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="nav-library"] .library-table-title small {
  display: block !important;
  min-width: 0 !important;
  margin-left: 0.05rem !important;
  max-width: min(24rem, 42vw) !important;
  overflow: hidden !important;
  color: rgba(226, 220, 205, 0.58) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.76rem) !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-series-card {
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    transform 160ms ease !important;
}

html[data-active-module="nav-library"] .library-series-card:hover {
  transform: translateY(-1px) !important;
}

html[data-active-module="nav-library"] .library-series-card.is-active {
  border-color: rgba(255, 223, 165, 0.88) !important;
  filter: brightness(1.16) saturate(1.08) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 205, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(232, 184, 111, 0.16),
    0 0.9rem 2.1rem rgba(0, 0, 0, 0.34),
    0 0 1.35rem rgba(232, 184, 111, 0.28) !important;
}

html[data-active-module="nav-library"] .library-series-card.is-active::after {
  background:
    radial-gradient(ellipse at 72% 22%, rgba(255, 225, 168, 0.2), transparent 31%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(131, 82, 32, 0.32), rgba(0, 0, 0, 0.34)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.24)) !important;
}

html[data-active-module="nav-library"] .library-series-card.is-active strong {
  color: rgba(255, 241, 210, 0.99) !important;
}

html[data-active-module="nav-library"] .library-series-card.is-active small {
  color: rgba(255, 225, 177, 0.86) !important;
}

html[data-active-module="nav-library"] .library-series-selected {
  position: absolute !important;
  top: 0.42rem !important;
  left: 0.42rem !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.08rem !important;
  padding: 0.1rem 0.38rem !important;
  border: 1px solid rgba(255, 238, 205, 0.32) !important;
  border-radius: 999px !important;
  background: rgba(232, 184, 111, 0.24) !important;
  color: rgba(255, 237, 199, 0.96) !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  box-shadow: 0 0.32rem 0.8rem rgba(0, 0, 0, 0.28) !important;
}

html[data-active-module="nav-library"] .library-row-favorite {
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid transparent !important;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease !important;
}

html[data-active-module="nav-library"] .library-row-favorite span {
  display: block !important;
  transform: translateY(-0.02rem) !important;
  line-height: 1 !important;
}

html[data-active-module="nav-library"] .library-row-favorite:hover {
  transform: scale(1.04) !important;
}

html[data-active-module="nav-library"] .library-row-favorite.is-favorite {
  border-color: rgba(255, 220, 157, 0.34) !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 220, 157, 0.2), transparent 62%),
    rgba(232, 184, 111, 0.12) !important;
  color: rgba(255, 212, 120, 1) !important;
  text-shadow: 0 0 0.72rem rgba(232, 184, 111, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 220, 157, 0.08),
    0 0.5rem 1.1rem rgba(0, 0, 0, 0.26) !important;
}

/* Library default collection state: make "全部" explicit and keep the top status lean. */
html[data-active-module="nav-library"] .library-result-count.library-sync-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: clamp(2rem, 2.45vw, 2.22rem) !important;
  max-width: none !important;
  padding: 0.16rem 0.72rem !important;
  border: 1px solid rgba(var(--library-ref-gold-soft), 0.18) !important;
  border-radius: 999px !important;
  background: rgba(232, 184, 111, 0.07) !important;
  color: rgba(229, 218, 196, 0.72) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.8rem) !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="nav-library"] .library-series-card.is-all-series {
  --series-image:
    radial-gradient(circle at 70% 26%, rgba(255, 222, 162, 0.2), transparent 26%),
    radial-gradient(circle at 24% 78%, rgba(232, 184, 111, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(30, 24, 16, 0.86), rgba(5, 6, 7, 0.92)) !important;
  border-style: solid !important;
}

html[data-active-module="nav-library"] .library-series-card.is-all-series::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.42) 54%, rgba(0, 0, 0, 0.18)),
    var(--series-image) !important;
}

html[data-active-module="nav-library"] .library-series-card.is-all-series strong {
  color: rgba(255, 235, 194, 0.98) !important;
}

html[data-active-module="nav-library"] .library-series-card.is-all-series small {
  color: rgba(241, 226, 196, 0.78) !important;
}

html[data-active-module="nav-library"] .library-series-card:nth-child(2) {
  --series-image: url("/player/assets/violin-master-cropped.png") !important;
}

html[data-active-module="nav-library"] .library-series-card:nth-child(3) {
  --series-image: url("/platform/assets/learning-score-paper.png") !important;
}

html[data-active-module="nav-library"] .library-series-card:nth-child(4) {
  --series-image: url("/player/assets/violin-scroll-head-crop.png") !important;
}

html[data-active-module="nav-library"] .library-series-card:nth-child(5) {
  --series-image: url("/platform/assets/learning-violin-body.jpg") !important;
}

html[data-active-module="nav-library"] .library-series-card:nth-child(6) {
  --series-image:
    radial-gradient(circle at 80% 50%, rgba(239, 174, 91, 0.36), transparent 19%),
    linear-gradient(140deg, rgba(0, 0, 0, 0.72), rgba(95, 60, 28, 0.3)) !important;
}

/* Library collection thumbnails: visual-only 7px lower alignment. */
html[data-active-module="nav-library"] .library-series-grid {
  transform: translateY(7px) !important;
}

/* Library filter rail fill: distribute the filter buttons through the full left panel. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  display: grid !important;
  grid-template-rows: minmax(0, 9fr) minmax(0, 5fr) !important;
  align-content: stretch !important;
  gap: clamp(0.72rem, 0.92vw, 0.96rem) !important;
}

html[data-active-module="nav-library"] .library-filter-section {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
}

html[data-active-module="nav-library"] .library-filter-grid {
  display: grid !important;
  height: 100% !important;
  min-height: 0 !important;
  align-content: stretch !important;
  gap: clamp(0.18rem, 0.26vw, 0.28rem) !important;
}

html[data-active-module="nav-library"] .library-filter-section:nth-of-type(1) .library-filter-grid {
  grid-template-rows: repeat(9, minmax(clamp(2.18rem, 2.4vw, 2.36rem), 1fr)) !important;
}

html[data-active-module="nav-library"] .library-filter-section:nth-of-type(2) .library-filter-grid {
  grid-template-rows: repeat(5, minmax(clamp(2.18rem, 2.4vw, 2.36rem), 1fr)) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button {
  height: 100% !important;
  min-height: clamp(2.18rem, 2.4vw, 2.36rem) !important;
  padding-block: 0.28rem !important;
  font-size: clamp(0.9rem, 0.98vw, 0.98rem) !important;
  line-height: 1.08 !important;
}

/* Library filter rail balance: equal top/bottom breathing and no squeezed section title. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-content: initial !important;
  justify-content: center !important;
  gap: clamp(0.92rem, 1.45dvh, 1.18rem) !important;
  padding-block: clamp(1rem, 2.1dvh, 1.28rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-filter-section {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: clamp(0.42rem, 0.72dvh, 0.58rem) !important;
  min-height: 0 !important;
}

html[data-active-module="nav-library"] .library-filter-title {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.16 !important;
}

html[data-active-module="nav-library"] .library-filter-grid {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  gap: clamp(0.26rem, 0.58dvh, 0.38rem) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button {
  flex: 0 0 auto !important;
  height: clamp(2.08rem, 4.18dvh, 2.36rem) !important;
  min-height: clamp(2.08rem, 4.18dvh, 2.36rem) !important;
  max-height: clamp(2.08rem, 4.18dvh, 2.36rem) !important;
  padding-block: 0 !important;
}

@media (max-height: 820px) {
  html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
    gap: clamp(0.56rem, 0.9dvh, 0.74rem) !important;
    padding-block: clamp(0.76rem, 1.3dvh, 0.94rem) !important;
  }

  html[data-active-module="nav-library"] .library-filter-section {
    gap: clamp(0.28rem, 0.48dvh, 0.4rem) !important;
  }

  html[data-active-module="nav-library"] .library-filter-title {
    font-size: clamp(0.82rem, 1.42dvh, 0.92rem) !important;
  }

  html[data-active-module="nav-library"] .library-filter-grid {
    gap: clamp(0.18rem, 0.42dvh, 0.3rem) !important;
  }

  html[data-active-module="nav-library"] .library-filter-grid button {
    height: clamp(1.72rem, 3.55dvh, 2.05rem) !important;
    min-height: clamp(1.72rem, 3.55dvh, 2.05rem) !important;
    max-height: clamp(1.72rem, 3.55dvh, 2.05rem) !important;
  }
}

/* Library filter all buttons: make each group's total entry a little taller. */
html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"] {
  height: clamp(2.22rem, 4.55dvh, 2.56rem) !important;
  min-height: clamp(2.22rem, 4.55dvh, 2.56rem) !important;
  max-height: clamp(2.22rem, 4.55dvh, 2.56rem) !important;
}

@media (max-height: 820px) {
  html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
  html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"] {
    height: clamp(1.86rem, 3.86dvh, 2.2rem) !important;
    min-height: clamp(1.86rem, 3.86dvh, 2.2rem) !important;
    max-height: clamp(1.86rem, 3.86dvh, 2.2rem) !important;
  }
}

/* Learning tools 123 source assets: clear, saturated images without white glow overlays. */
html[data-active-module="nav-learningTools"] .tools-entry-card::after,
html[data-active-module="nav-learningTools"] .tools-material-card::after,
html[data-active-module="nav-learningTools"] .tools-practice-card::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 54%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.035) 38%, rgba(0, 0, 0, 0) 72%) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro {
  background-image: url("/platform/assets/learning-card-feature-123.png?v=learning-tools-123-source-20260607-3") !important;
  background-blend-mode: normal !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-basics {
  background-image: url("/platform/assets/learning-card-basic-123.png?v=learning-tools-123-source-20260607-3") !important;
  background-blend-mode: normal !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-posture {
  background-image: url("/platform/assets/learning-card-posture-123.png?v=learning-tools-123-source-20260607-3") !important;
  background-blend-mode: normal !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-notes {
  background-image: url("/platform/assets/learning-card-notes-123.png?v=learning-tools-123-source-20260607-3") !important;
  background-blend-mode: normal !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-theory {
  background-image: url("/platform/assets/learning-card-theory-123.png?v=learning-tools-123-source-20260607-3") !important;
  background-blend-mode: normal !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
  order: 1 !important;
  overflow: visible !important;
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-blend-mode: normal !important;
  box-shadow: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner {
  order: 2 !important;
  background-image: url("/platform/assets/learning-tool-tuner-123.png?v=learning-tools-123-source-20260607-3") !important;
  background-blend-mode: normal !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before {
  content: "" !important;
  position: absolute !important;
  top: -40px !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  height: 96px !important;
  z-index: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png") center top / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: saturate(1.04) contrast(1.02) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html[data-active-module="nav-learningTools"] .tools-card-arrow {
  opacity: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* membership-card-edge-soft-20260607-1: keep depth without a hard visible perimeter. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--membership-accent) 10%, rgba(255, 255, 255, 0.018)),
    inset 0 -1.05rem 2.05rem rgba(0, 0, 0, 0.2),
    0 1.05rem 2.35rem rgba(0, 0, 0, 0.36) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-monthly,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime {
  border-color: transparent !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card::after {
  inset: 1px !important;
  border-radius: calc(10px - 1px) !important;
  background:
    linear-gradient(106deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.004) 38%, transparent 74%) !important;
  opacity: 0.32 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button {
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--membership-accent) 18%, rgba(255, 255, 255, 0.08)),
    inset 0 -0.36rem 0.74rem rgba(0, 0, 0, 0.3),
    0 0.52rem 1.05rem rgba(0, 0, 0, 0.28) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-monthly > button,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly > button,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime > button {
  border-color: transparent !important;
}

/* membership-button-flat-20260607-1: remove glossy 3D capsule treatment. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button {
  border: 0 !important;
  color: rgba(255, 248, 238, 0.96) !important;
  text-shadow: none !important;
  background: color-mix(in srgb, var(--membership-accent) 18%, rgba(11, 12, 14, 0.78)) !important;
  box-shadow: 0 0.42rem 1rem rgba(0, 0, 0, 0.22) !important;
  filter: saturate(0.9) brightness(0.98) !important;
  transform: none !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button::before,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button.primary,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-recommended > button,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-unlock-target > button {
  color: rgba(255, 248, 238, 0.98) !important;
  background: color-mix(in srgb, var(--membership-accent) 22%, rgba(12, 12, 14, 0.76)) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button:hover {
  background: color-mix(in srgb, var(--membership-accent) 26%, rgba(16, 17, 19, 0.76)) !important;
  box-shadow: 0 0.5rem 1.15rem rgba(0, 0, 0, 0.24) !important;
  filter: saturate(0.96) brightness(1.03) !important;
  transform: none !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button:active {
  background: color-mix(in srgb, var(--membership-accent) 20%, rgba(8, 9, 11, 0.82)) !important;
  box-shadow: 0 0.28rem 0.78rem rgba(0, 0, 0, 0.2) !important;
  transform: none !important;
}

/* Library search icons: replace the tiny glyph with a larger drawn magnifier. */
html[data-active-module="nav-library"] .library-search-shell span,
html[data-active-module="nav-library"] .library-search-shell i {
  position: relative !important;
  display: inline-grid !important;
  width: 1.42rem !important;
  min-width: 1.42rem !important;
  height: 1.42rem !important;
  place-items: center !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

html[data-active-module="nav-library"] .library-search-shell span::before,
html[data-active-module="nav-library"] .library-search-shell i::before {
  content: "" !important;
  position: absolute !important;
  top: 0.22rem !important;
  left: 0.24rem !important;
  width: 0.66rem !important;
  height: 0.66rem !important;
  border: 0.12rem solid rgba(var(--library-ref-gold-soft), 0.94) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0.44rem rgba(var(--library-ref-gold), 0.18) !important;
}

html[data-active-module="nav-library"] .library-search-shell span::after,
html[data-active-module="nav-library"] .library-search-shell i::after {
  content: "" !important;
  position: absolute !important;
  top: 0.88rem !important;
  left: 0.9rem !important;
  width: 0.52rem !important;
  height: 0.12rem !important;
  border-radius: 999px !important;
  background: rgba(var(--library-ref-gold-soft), 0.94) !important;
  transform: rotate(45deg) !important;
  transform-origin: left center !important;
  box-shadow: 0 0 0.36rem rgba(var(--library-ref-gold), 0.16) !important;
}

/* Library search empty state: make no-result searches explicit and recoverable. */
html[data-active-module="nav-library"] .library-empty-row.is-search-empty {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(0.8rem, 1vw, 1rem) !important;
  min-height: clamp(4.6rem, 5.8vw, 5.25rem) !important;
  padding: clamp(0.82rem, 1vw, 1rem) clamp(0.9rem, 1.2vw, 1.15rem) !important;
  border: 1px dashed rgba(var(--library-ref-gold-soft), 0.24) !important;
  border-radius: 0.62rem !important;
  background:
    radial-gradient(circle at 8% 40%, rgba(var(--library-ref-gold), 0.1), transparent 34%),
    rgba(var(--library-ref-gold), 0.045) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty strong {
  display: block !important;
  margin: 0 !important;
  color: rgba(255, 231, 186, 0.96) !important;
  font-size: clamp(0.98rem, 1.1vw, 1.12rem) !important;
  font-weight: 900 !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty p {
  margin: 0.26rem 0 0 !important;
  color: rgba(226, 224, 216, 0.64) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.82rem) !important;
  font-weight: 720 !important;
  line-height: 1.35 !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty button {
  min-height: clamp(2.05rem, 2.35vw, 2.24rem) !important;
  padding: 0 0.78rem !important;
  border: 1px solid rgba(var(--library-ref-gold-soft), 0.42) !important;
  border-radius: 999px !important;
  background: rgba(var(--library-ref-gold), 0.12) !important;
  color: rgba(255, 231, 186, 0.96) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.8rem) !important;
  font-weight: 860 !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty button:hover {
  border-color: rgba(var(--library-ref-gold-soft), 0.64) !important;
  background: rgba(var(--library-ref-gold), 0.18) !important;
}

/* Learning tools hover/arrow correction: keep practice images clear and move the real arrow below copy. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  background-color: transparent !important;
  background-image: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-blend-mode: normal !important;
  filter: none !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible {
  background-color: transparent !important;
  background-image: url("/platform/assets/learning-tool-tuner-123-no-arrow.png?v=learning-tools-hover-arrow-20260608-2") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-blend-mode: normal !important;
  filter: none !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.025) 58%, rgba(0, 0, 0, 0.16) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.055) 34%, rgba(0, 0, 0, 0) 70%) !important;
  opacity: 1 !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 48px rgba(0, 0, 0, 0.32) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card > .tools-card-arrow {
  position: absolute !important;
  left: clamp(1.34rem, 1.75vw, 1.86rem) !important;
  bottom: clamp(1.22rem, 1.42vw, 1.55rem) !important;
  z-index: 3 !important;
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  place-items: center !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.085) !important;
  color: rgba(248, 244, 236, 0.95) !important;
  font-size: 1.24rem !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.3) !important;
  opacity: 1 !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card > .tools-practice-copy {
  transform: translateY(-2.5rem) !important;
}

/* membership-whole-card-click-20260608-1: whole membership plan cards are selectable, not just the button. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card[data-membership-card-checkout] {
  cursor: pointer !important;
  transition:
    filter 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    background 160ms ease !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card[data-membership-card-checkout]:hover,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card[data-membership-card-checkout]:focus-visible,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card[data-membership-card-checkout]:focus-within {
  filter: brightness(1.08) saturate(1.04) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--membership-accent) 16%, rgba(255, 255, 255, 0.035)),
    inset 0 -0.92rem 1.8rem rgba(0, 0, 0, 0.14),
    0 0 0 1px color-mix(in srgb, var(--membership-accent) 22%, transparent),
    0 0 1.05rem color-mix(in srgb, var(--membership-accent) 12%, transparent),
    0 1.05rem 2.35rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card[data-membership-card-checkout]:active,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-checkout-active {
  filter: brightness(1.12) saturate(1.06) !important;
  transform: none !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--membership-accent) 22%, rgba(255, 255, 255, 0.04)),
    inset 0 0 0 1px color-mix(in srgb, var(--membership-accent) 30%, transparent),
    inset 0 -0.78rem 1.5rem rgba(0, 0, 0, 0.12),
    0 0 1.35rem color-mix(in srgb, var(--membership-accent) 18%, transparent),
    0 1.05rem 2.35rem rgba(0, 0, 0, 0.32) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-checkout-active::after {
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--membership-accent) 16%, rgba(255, 255, 255, 0.032)), rgba(255, 255, 255, 0.008) 42%, transparent 76%) !important;
  opacity: 0.6 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button.primary,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-recommended > button,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-unlock-target > button,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-monthly > button,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly > button,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime > button {
  width: clamp(7.4rem, 9vw, 8.45rem) !important;
  min-width: 0 !important;
  height: 2.18rem !important;
  min-height: 2.18rem !important;
  padding: 0 1rem !important;
  border: 0 !important;
  border-radius: 0.72rem !important;
  outline: 0 !important;
  color: rgba(255, 250, 242, 0.94) !important;
  text-shadow: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-monthly > button {
  background: rgba(76, 149, 220, 0.22) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly > button {
  background: rgba(232, 139, 48, 0.24) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime > button {
  background: rgba(171, 96, 168, 0.24) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card[data-membership-card-checkout]:hover > button,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-checkout-active > button {
  background: color-mix(in srgb, var(--membership-accent) 24%, rgba(255, 255, 255, 0.09)) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button::before,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Learning tools metronome continuous popout: one image owns both the head and body. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  overflow: visible !important;
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before {
  content: "" !important;
  position: absolute !important;
  top: -13.25% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: 113.25% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png") center top / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}


/* membership-plan-copy-20260608-1: plan copy sits under larger, higher pricing in membership cards. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto 1fr auto !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price-block {
  align-self: start !important;
  justify-self: end !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.28rem !important;
  margin-top: clamp(-0.44rem, -0.45vw, -0.18rem) !important;
  max-width: min(13.6rem, 38vw) !important;
  text-align: right !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price {
  align-self: auto !important;
  justify-self: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price strong {
  font-size: clamp(2.45rem, 4.2vw, 3.25rem) !important;
  line-height: 0.9 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price small {
  font-size: clamp(0.9rem, 1.25vw, 1.08rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price em {
  font-size: clamp(0.86rem, 1.1vw, 1rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
  max-width: 12.6rem !important;
  margin: 0 !important;
  color: rgba(255, 247, 231, 0.72) !important;
  font-size: clamp(0.72rem, 0.78vw, 0.82rem) !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-monthly .membership-plan-copy {
  color: rgba(220, 236, 250, 0.62) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly .membership-plan-copy {
  color: rgba(255, 226, 166, 0.8) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-copy {
  color: rgba(246, 218, 251, 0.76) !important;
}

@media (max-width: 760px) {
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price-block {
    max-width: 10.8rem !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
    max-width: 10.2rem !important;
    font-size: 0.7rem !important;
  }
}


/* membership-plan-copy-no-size-change-20260608-1: keep membership card modules at their original size after adding plan copy. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-list {
  min-height: clamp(8.2rem, 20vh, 10.5rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card {
  height: clamp(8.2rem, 20vh, 10.5rem) !important;
  min-height: clamp(8.2rem, 20vh, 10.5rem) !important;
  max-height: clamp(8.2rem, 20vh, 10.5rem) !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: center !important;
  overflow: hidden !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price-block {
  align-self: start !important;
  justify-self: end !important;
  max-width: min(12.4rem, 34vw) !important;
  margin-top: clamp(-0.5rem, -0.5vw, -0.2rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
  max-width: 11.8rem !important;
  font-size: clamp(0.68rem, 0.72vw, 0.78rem) !important;
  line-height: 1.24 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price strong {
  font-size: clamp(2.35rem, 3.85vw, 3.05rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button {
  align-self: end !important;
}

@media (max-width: 760px) {
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card {
    height: clamp(8.2rem, 20vh, 10.5rem) !important;
    min-height: clamp(8.2rem, 20vh, 10.5rem) !important;
    max-height: clamp(8.2rem, 20vh, 10.5rem) !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price-block {
    max-width: 9.8rem !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
    max-width: 9.4rem !important;
    font-size: 0.66rem !important;
  }
}


/* membership-price-action-row-20260608-1: bigger pricing with plan copy aligned to the button row, without changing card size. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card {
  height: clamp(8.2rem, 20vh, 10.5rem) !important;
  min-height: clamp(8.2rem, 20vh, 10.5rem) !important;
  max-height: clamp(8.2rem, 20vh, 10.5rem) !important;
  grid-template-columns: minmax(10rem, 1fr) minmax(10rem, auto) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  column-gap: clamp(0.8rem, 1.3vw, 1.35rem) !important;
  row-gap: 0.28rem !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-head {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price-block {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: stretch !important;
  justify-self: end !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: start !important;
  justify-items: end !important;
  gap: 0.18rem !important;
  min-width: min(13.2rem, 34vw) !important;
  max-width: min(15rem, 36vw) !important;
  margin-top: 0 !important;
  text-align: right !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price {
  align-self: start !important;
  justify-self: end !important;
  margin: clamp(-0.34rem, -0.32vw, -0.12rem) 0 0 !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.12rem !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price strong {
  font-size: clamp(3.05rem, 5.2vw, 4.15rem) !important;
  line-height: 0.82 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price small {
  font-size: clamp(1rem, 1.35vw, 1.16rem) !important;
  line-height: 1 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price em {
  font-size: clamp(0.9rem, 1.15vw, 1.04rem) !important;
  line-height: 1 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-original-price {
  display: block !important;
  margin-top: 0.12rem !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
  align-self: end !important;
  justify-self: end !important;
  max-width: 13.9rem !important;
  margin: 0 0 0.06rem !important;
  font-size: clamp(0.68rem, 0.72vw, 0.76rem) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  text-wrap: nowrap !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: end !important;
  justify-self: start !important;
}

@media (max-width: 760px) {
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card {
    grid-template-columns: minmax(8.5rem, 1fr) minmax(8.8rem, auto) !important;
    column-gap: 0.58rem !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price-block {
    min-width: 8.8rem !important;
    max-width: 9.8rem !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price strong {
    font-size: clamp(2.55rem, 10vw, 3.18rem) !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
    max-width: 9.8rem !important;
    font-size: 0.62rem !important;
    transform: scale(0.96) !important;
    transform-origin: right center !important;
  }
}


/* membership-lifetime-copy-lines-20260608-1: lifetime quota and value copy are two clean lines beside the button. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card {
  height: clamp(8.2rem, 20vh, 10.5rem) !important;
  min-height: clamp(8.2rem, 20vh, 10.5rem) !important;
  max-height: clamp(8.2rem, 20vh, 10.5rem) !important;
  grid-template-columns: auto minmax(6.6rem, 1fr) auto !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  column-gap: clamp(0.62rem, 1vw, 0.95rem) !important;
  row-gap: 0.22rem !important;
  overflow: hidden !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-head {
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price-block {
  display: contents !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  margin: clamp(-0.44rem, -0.42vw, -0.16rem) 0 0 !important;
  white-space: nowrap !important;
  text-align: right !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price strong {
  font-size: clamp(3.22rem, 5.55vw, 4.42rem) !important;
  line-height: 0.8 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: end !important;
  justify-self: start !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: end !important;
  max-width: none !important;
  margin: 0 0 0.05rem !important;
  overflow: hidden !important;
  font-size: clamp(0.64rem, 0.66vw, 0.72rem) !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-align: right !important;
  text-wrap: nowrap !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.12rem !important;
  max-width: min(13.8rem, 32vw) !important;
  font-size: clamp(0.58rem, 0.6vw, 0.66rem) !important;
  line-height: 1.02 !important;
  white-space: normal !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-copy-line {
  display: block !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-copy-quota {
  color: rgba(255, 232, 255, 0.86) !important;
}

@media (max-width: 760px) {
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card {
    grid-template-columns: auto minmax(4.8rem, 1fr) auto !important;
    column-gap: 0.44rem !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price strong {
    font-size: clamp(2.72rem, 10.4vw, 3.3rem) !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
    font-size: 0.58rem !important;
    transform: none !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-copy {
    max-width: 9.4rem !important;
    font-size: 0.52rem !important;
  }
}


/* membership-copy-bigger-bottom-align-20260608-1: larger plan copy aligned with the select button bottom edge. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
  align-self: end !important;
  justify-self: end !important;
  margin: 0 0 0.02rem !important;
  padding-bottom: 0 !important;
  font-size: clamp(0.74rem, 0.78vw, 0.86rem) !important;
  line-height: 1 !important;
  font-weight: 850 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-copy {
  align-self: end !important;
  justify-self: end !important;
  gap: 0.16rem !important;
  margin-bottom: 0.01rem !important;
  font-size: clamp(0.66rem, 0.7vw, 0.78rem) !important;
  line-height: 1.02 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-copy-line {
  line-height: 1.02 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button {
  align-self: end !important;
  margin-bottom: 0 !important;
}

@media (max-width: 760px) {
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
    font-size: 0.66rem !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-copy {
    font-size: 0.58rem !important;
  }
}

/* Learning tools practice click feedback: keep the image clear while the card visibly presses down. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner {
  transform: translateY(0) scale(1) !important;
  transform-origin: center center !important;
  transition:
    transform 115ms ease,
    box-shadow 115ms ease,
    border-color 115ms ease,
    filter 115ms ease !important;
  will-change: transform !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:active {
  border-color: rgba(255, 222, 160, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0 0 1px rgba(255, 218, 150, 0.11),
    0 9px 24px rgba(0, 0, 0, 0.36) !important;
  filter: brightness(0.99) saturate(1.03) !important;
  transform: translateY(2px) scale(0.997) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active > .tools-card-arrow,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:active > .tools-card-arrow {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 14px rgba(0, 0, 0, 0.28) !important;
  transform: translateY(1px) scale(0.97) !important;
}


/* membership-quota-no-strike-20260608-1: only the original price is struck through; quota text stays clean. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-price {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  column-gap: 0.42rem !important;
  row-gap: 0.08rem !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-quota-note {
  display: inline-block !important;
  color: rgba(255, 238, 252, 0.76) !important;
  font-size: clamp(0.7rem, 0.76vw, 0.82rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: right !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-original-price {
  text-decoration: line-through !important;
}


/* membership-card-inner-balance-20260608-1: balance card interiors without changing module size or outer layout. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card {
  height: clamp(8.2rem, 20vh, 10.5rem) !important;
  min-height: clamp(8.2rem, 20vh, 10.5rem) !important;
  max-height: clamp(8.2rem, 20vh, 10.5rem) !important;
  grid-template-columns: minmax(7.6rem, auto) minmax(2.8rem, 1fr) minmax(9.8rem, auto) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  column-gap: clamp(0.7rem, 1vw, 1rem) !important;
  row-gap: 0.34rem !important;
  padding-top: clamp(1.04rem, 1.52vw, 1.36rem) !important;
  padding-bottom: clamp(1rem, 1.36vw, 1.2rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-head {
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: start !important;
  gap: clamp(0.34rem, 0.56vw, 0.48rem) !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-meta {
  margin-bottom: 0.02rem !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card h4 {
  font-size: clamp(1.58rem, 2.1vw, 2.02rem) !important;
  line-height: 0.98 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price-block {
  display: contents !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  display: block !important;
  margin: clamp(0.02rem, 0.18vw, 0.16rem) 0 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.12rem !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price strong {
  font-size: clamp(3.36rem, 5.7vw, 4.55rem) !important;
  line-height: 0.8 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price small {
  font-size: clamp(1.04rem, 1.42vw, 1.22rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price em {
  font-size: clamp(0.94rem, 1.18vw, 1.08rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: end !important;
  justify-self: start !important;
  margin: 0 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  align-self: end !important;
  justify-self: end !important;
  max-width: min(14rem, 34vw) !important;
  margin: 0 0 0.02rem !important;
  overflow: hidden !important;
  font-size: clamp(0.72rem, 0.76vw, 0.84rem) !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  text-align: right !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-monthly .membership-plan-copy {
  max-width: 12rem !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly .membership-plan-copy {
  max-width: 14.4rem !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-price {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  column-gap: 0.42rem !important;
  row-gap: 0.08rem !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-original-price,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-quota-note {
  font-size: clamp(0.66rem, 0.7vw, 0.78rem) !important;
  line-height: 1 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-copy {
  display: block !important;
  max-width: 14.2rem !important;
  font-size: clamp(0.66rem, 0.7vw, 0.78rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card {
    grid-template-columns: minmax(6.2rem, auto) minmax(1.8rem, 1fr) minmax(7.6rem, auto) !important;
    column-gap: 0.46rem !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card h4 {
    font-size: clamp(1.34rem, 5vw, 1.6rem) !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price strong {
    font-size: clamp(2.82rem, 10.6vw, 3.34rem) !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
    max-width: 9.2rem !important;
    font-size: 0.58rem !important;
  }
}


/* membership-price-lower-only-20260608-1: nudge membership prices lower without changing card size. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price {
  margin-top: clamp(0.34rem, 0.48vw, 0.52rem) !important;
}

@media (max-width: 760px) {
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price {
    margin-top: 0.28rem !important;
  }
}


/* membership-quota-under-badge-20260608-1: lifetime quota belongs under the activity badge, not in the price line. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-meta {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.18rem !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-quota-note {
  display: block !important;
  color: rgba(255, 238, 252, 0.76) !important;
  font-size: clamp(0.62rem, 0.68vw, 0.76rem) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-price {
  display: block !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-original-price {
  display: block !important;
  margin-top: 0.08rem !important;
  text-align: right !important;
  text-decoration: line-through !important;
  white-space: nowrap !important;
}


/* membership-lifetime-height-align-20260608-1: align lifetime card interior height with yearly and lift its activity notes. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime {
  height: clamp(8.2rem, 20vh, 10.5rem) !important;
  min-height: clamp(8.2rem, 20vh, 10.5rem) !important;
  max-height: clamp(8.2rem, 20vh, 10.5rem) !important;
  padding-top: clamp(1.04rem, 1.52vw, 1.36rem) !important;
  padding-bottom: clamp(1rem, 1.36vw, 1.2rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-head {
  align-self: start !important;
  margin-top: clamp(-0.2rem, -0.2vw, -0.08rem) !important;
  gap: clamp(0.24rem, 0.42vw, 0.36rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-meta {
  align-items: flex-start !important;
  gap: 0.08rem !important;
  margin-bottom: 0 !important;
  transform: translateY(clamp(-0.18rem, -0.18vw, -0.06rem)) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-badge {
  line-height: 1 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-quota-note {
  margin-top: 0 !important;
  font-size: clamp(0.58rem, 0.62vw, 0.7rem) !important;
  line-height: 1 !important;
  opacity: 0.9 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime h4 {
  margin-top: clamp(-0.04rem, -0.04vw, 0rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-price {
  margin-top: clamp(0.34rem, 0.48vw, 0.52rem) !important;
}

@media (max-width: 760px) {
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-head {
    margin-top: -0.08rem !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-quota-note {
    font-size: 0.54rem !important;
  }
}


/* membership-quota-align-badge-20260608-2: center lifetime quota text with the activity badge. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-meta {
  width: max-content !important;
  align-items: center !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-badge {
  min-width: 6.8rem !important;
  text-align: center !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-quota-note {
  width: 6.8rem !important;
  text-align: center !important;
  transform: none !important;
}


/* membership-plan-copy-right-size-20260608-1: make plan description text the right size and right-aligned. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  align-self: end !important;
  justify-self: end !important;
  width: max-content !important;
  max-width: min(15.2rem, 36vw) !important;
  margin: 0 0 0.02rem auto !important;
  color: rgba(255, 247, 231, 0.78) !important;
  font-size: clamp(0.76rem, 0.8vw, 0.88rem) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  text-wrap: nowrap !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-monthly .membership-plan-copy {
  color: rgba(220, 236, 250, 0.72) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly .membership-plan-copy {
  color: rgba(255, 226, 166, 0.84) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-copy {
  color: rgba(246, 218, 251, 0.8) !important;
  font-size: clamp(0.72rem, 0.76vw, 0.84rem) !important;
}

@media (max-width: 760px) {
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy,
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-copy {
    max-width: 9.6rem !important;
    font-size: 0.62rem !important;
  }
}


/* membership-flow-visual-link-20260608-1: membership card feedback, status-aware actions, checkout flow, and benefit column linking. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-alerts {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
  gap: clamp(0.75rem, 1vw, 1rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-checkout-notice,
html[data-active-module="membership"] .membership-reference-layout .membership-order-status {
  min-height: 0 !important;
  border-color: rgba(255, 214, 132, 0.16) !important;
  background: rgba(12, 10, 8, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 0.75rem 1.8rem rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-selectable-plan {
  cursor: pointer !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card[data-membership-card-checkout]:hover,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card[data-membership-card-checkout]:focus-visible,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-checkout-active {
  filter: brightness(1.1) saturate(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--membership-accent) 18%, rgba(255, 255, 255, 0.035)),
    inset 0 0 0 1px color-mix(in srgb, var(--membership-accent) 28%, transparent),
    0 0 1.4rem color-mix(in srgb, var(--membership-accent) 16%, transparent),
    0 1.1rem 2.4rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-current-plan {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px color-mix(in srgb, var(--membership-accent) 30%, transparent),
    0 0 1.15rem color-mix(in srgb, var(--membership-accent) 12%, transparent),
    0 1rem 2.2rem rgba(0, 0, 0, 0.32) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-covered-plan {
  filter: brightness(0.86) saturate(0.86) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-current-plan > button,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-covered-plan > button {
  opacity: 0.72 !important;
  cursor: default !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-meta {
  width: max-content !important;
  align-items: center !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-badge {
  min-width: 6.8rem !important;
  text-align: center !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-quota-note {
  width: 6.8rem !important;
  text-align: center !important;
}

html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-monthly:hover) [data-plan-column="monthly"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-monthly:focus-visible) [data-plan-column="monthly"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-monthly.is-checkout-active) [data-plan-column="monthly"],
html[data-active-module="membership"] .membership-reference-grid[data-current-plan="monthly"] [data-plan-column="monthly"] {
  background: rgba(80, 145, 205, 0.11) !important;
  color: rgba(226, 241, 255, 0.96) !important;
}

html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-yearly:hover) [data-plan-column="yearly"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-yearly:focus-visible) [data-plan-column="yearly"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-yearly.is-checkout-active) [data-plan-column="yearly"],
html[data-active-module="membership"] .membership-reference-grid[data-current-plan="yearly"] [data-plan-column="yearly"] {
  background: rgba(236, 153, 58, 0.13) !important;
  color: rgba(255, 235, 190, 0.98) !important;
}

html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-lifetime:hover) [data-plan-column="lifetime"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-lifetime:focus-visible) [data-plan-column="lifetime"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-lifetime.is-checkout-active) [data-plan-column="lifetime"],
html[data-active-module="membership"] .membership-reference-grid[data-current-plan="lifetime"] [data-plan-column="lifetime"] {
  background: rgba(183, 104, 190, 0.13) !important;
  color: rgba(255, 230, 255, 0.98) !important;
}

@media (max-width: 760px) {
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-alerts {
    grid-template-columns: 1fr !important;
  }
}


/* membership-user-ux-polish-20260608-1: clearer user actions, yearly emphasis, benefit linking, and compact payment feedback. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-alerts {
  grid-template-columns: minmax(18rem, 26rem) !important;
  justify-content: end !important;
  align-items: start !important;
  margin-bottom: -0.25rem !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-checkout-notice {
  min-height: 0 !important;
  padding: 0.72rem 0.9rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.85rem !important;
  border-radius: 0.65rem !important;
  border-color: rgba(255, 210, 128, 0.2) !important;
  background: linear-gradient(135deg, rgba(36, 28, 14, 0.88), rgba(10, 10, 9, 0.78)) !important;
  box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-checkout-notice div {
  display: grid !important;
  gap: 0.18rem !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-checkout-notice span {
  font-size: 0.7rem !important;
  color: rgba(255, 212, 145, 0.88) !important;
  letter-spacing: 0 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-checkout-notice strong {
  font-size: 0.88rem !important;
  line-height: 1.25 !important;
  color: rgba(255, 248, 230, 0.94) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-checkout-notice.is-error {
  border-color: rgba(255, 128, 128, 0.25) !important;
  background: linear-gradient(135deg, rgba(56, 22, 18, 0.88), rgba(10, 10, 9, 0.78)) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly {
  filter: brightness(1.13) saturate(1.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 170, 0.08),
    inset 0 0 0 1px rgba(255, 184, 82, 0.34),
    0 0 1.65rem rgba(255, 153, 45, 0.16),
    0 1.15rem 2.2rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly > button {
  color: rgba(255, 248, 230, 0.98) !important;
  background: linear-gradient(180deg, rgba(174, 93, 18, 0.94), rgba(126, 62, 9, 0.94)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 211, 126, 0.1), 0 0.55rem 1rem rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly[data-membership-card-checkout]:hover,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-yearly[data-membership-card-checkout]:focus-visible {
  filter: brightness(1.2) saturate(1.12) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button {
  transition: background 180ms ease, filter 180ms ease, opacity 180ms ease, box-shadow 180ms ease !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-current-plan > button,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-covered-plan > button {
  color: rgba(255, 248, 230, 0.74) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045) !important;
}

html[data-active-module="membership"] .membership-reference-grid [data-plan-column] {
  position: relative !important;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}

html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-monthly:hover) [data-plan-column="monthly"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-monthly:focus-visible) [data-plan-column="monthly"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-monthly.is-checkout-active) [data-plan-column="monthly"] {
  background: rgba(80, 145, 205, 0.18) !important;
  box-shadow: inset 2px 0 0 rgba(120, 194, 255, 0.42), inset -2px 0 0 rgba(120, 194, 255, 0.14) !important;
}

html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-yearly:hover) [data-plan-column="yearly"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-yearly:focus-visible) [data-plan-column="yearly"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-yearly.is-checkout-active) [data-plan-column="yearly"],
html[data-active-module="membership"] .membership-reference-grid[data-current-plan="yearly"] [data-plan-column="yearly"] {
  background: rgba(236, 153, 58, 0.2) !important;
  box-shadow: inset 2px 0 0 rgba(255, 196, 97, 0.5), inset -2px 0 0 rgba(255, 196, 97, 0.16) !important;
}

html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-lifetime:hover) [data-plan-column="lifetime"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-lifetime:focus-visible) [data-plan-column="lifetime"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-lifetime.is-checkout-active) [data-plan-column="lifetime"] {
  background: rgba(183, 104, 190, 0.18) !important;
  box-shadow: inset 2px 0 0 rgba(231, 150, 236, 0.42), inset -2px 0 0 rgba(231, 150, 236, 0.14) !important;
}


/* membership-final-polish-20260608-1: clearer current state, lifetime emphasis, key rights scan, and click feedback. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-current-plan {
  position: relative !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-current-plan::before {
  content: "当前使用中" !important;
  position: absolute !important;
  right: 1.25rem !important;
  top: 1rem !important;
  z-index: 3 !important;
  padding: 0.18rem 0.5rem !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: rgba(255, 232, 180, 0.92) !important;
  background: rgba(255, 191, 84, 0.1) !important;
  border: 1px solid rgba(255, 198, 104, 0.2) !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-current-plan > button,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-covered-plan > button {
  border-radius: 0.6rem !important;
  color: rgba(255, 244, 220, 0.62) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
  filter: none !important;
  opacity: 1 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-current-plan > button::after {
  content: "" !important;
  display: inline-block !important;
  width: 0.36rem !important;
  height: 0.36rem !important;
  margin-left: 0.42rem !important;
  border-radius: 50% !important;
  background: rgba(255, 208, 118, 0.75) !important;
  vertical-align: 0.05rem !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime {
  filter: brightness(1.08) saturate(1.22) !important;
  background:
    radial-gradient(circle at 15% 12%, rgba(230, 126, 232, 0.28), transparent 38%),
    linear-gradient(112deg, rgba(74, 25, 82, 0.95), rgba(28, 15, 42, 0.96) 48%, rgba(8, 11, 19, 0.98)) !important;
  border-color: rgba(212, 117, 222, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 213, 255, 0.08),
    inset 0 0 0 1px rgba(224, 125, 234, 0.18),
    0 0 1.45rem rgba(177, 82, 193, 0.18),
    0 1.1rem 2.2rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-badge {
  color: rgba(255, 238, 255, 0.96) !important;
  background: linear-gradient(180deg, rgba(176, 89, 178, 0.92), rgba(107, 48, 123, 0.94)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 232, 255, 0.18), 0 0.5rem 1rem rgba(145, 65, 159, 0.2) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-current-price strong {
  color: rgba(255, 248, 236, 0.98) !important;
  text-shadow: 0 0 1rem rgba(225, 142, 228, 0.25) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime > button:not(:disabled) {
  color: rgba(255, 244, 255, 0.98) !important;
  background: linear-gradient(180deg, rgba(105, 48, 120, 0.96), rgba(71, 32, 88, 0.98)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 218, 255, 0.1), 0 0.55rem 1rem rgba(0, 0, 0, 0.2) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime[data-membership-card-checkout]:hover {
  filter: brightness(1.14) saturate(1.28) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-checkout-active {
  isolation: isolate !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-checkout-active::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent) !important;
  transform: translateX(-120%) !important;
  animation: membershipCardPaySweep 1.15s ease-in-out infinite !important;
  pointer-events: none !important;
}

@keyframes membershipCardPaySweep {
  0% { transform: translateX(-120%); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

html[data-active-module="membership"] .membership-reference-row > *:first-child {
  font-weight: 650 !important;
  color: rgba(232, 232, 228, 0.86) !important;
}

html[data-active-module="membership"] .membership-reference-row.is-key-benefit > *:first-child {
  color: rgba(255, 230, 178, 0.96) !important;
}

html[data-active-module="membership"] .membership-reference-row.is-key-benefit > *:first-child::before {
  content: "" !important;
  display: inline-block !important;
  width: 0.38rem !important;
  height: 0.38rem !important;
  margin-right: 0.42rem !important;
  border-radius: 50% !important;
  background: rgba(255, 195, 96, 0.65) !important;
  box-shadow: 0 0 0.55rem rgba(255, 184, 82, 0.22) !important;
  vertical-align: 0.06rem !important;
}

html[data-active-module="membership"] .membership-reference-grid[data-current-plan="lifetime"] [data-plan-column="lifetime"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-lifetime:hover) [data-plan-column="lifetime"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-lifetime:focus-visible) [data-plan-column="lifetime"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-lifetime.is-checkout-active) [data-plan-column="lifetime"] {
  background: rgba(160, 70, 174, 0.22) !important;
  color: rgba(255, 236, 255, 0.98) !important;
  box-shadow: inset 2px 0 0 rgba(234, 154, 239, 0.52), inset -2px 0 0 rgba(234, 154, 239, 0.18) !important;
}

@media (max-width: 760px) {
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-current-plan::before {
    right: 0.9rem !important;
    top: 0.85rem !important;
  }
}


/* membership-key-benefit-marker-fix-20260608-1: keep highlighted benefit names on one clean line. */
html[data-active-module="membership"] .membership-reference-row.is-key-benefit > *:first-child {
  box-shadow: inset 0.18rem 0 0 rgba(255, 195, 96, 0.5) !important;
  padding-left: calc(var(--membership-table-cell-x, 1.2rem) + 0.15rem) !important;
}

html[data-active-module="membership"] .membership-reference-row.is-key-benefit > *:first-child::before {
  content: none !important;
  display: none !important;
}


/* membership-lifetime-purple-rollback-20260608-1: return lifetime card to the earlier restrained purple-black tone. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime {
  filter: brightness(1.02) saturate(1.02) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(126, 73, 132, 0.18), transparent 34%),
    linear-gradient(112deg, rgba(37, 24, 48, 0.96), rgba(18, 16, 31, 0.98) 52%, rgba(7, 11, 18, 0.99)) !important;
  border-color: rgba(156, 96, 168, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 0 0 1px rgba(186, 126, 196, 0.08),
    0 0 1rem rgba(117, 72, 132, 0.1),
    0 1.05rem 2.1rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-badge {
  color: rgba(255, 238, 252, 0.92) !important;
  background: linear-gradient(180deg, rgba(139, 77, 145, 0.76), rgba(84, 47, 98, 0.82)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 232, 255, 0.12), 0 0.42rem 0.85rem rgba(70, 38, 82, 0.14) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-current-price strong {
  color: rgba(255, 248, 236, 0.98) !important;
  text-shadow: 0 0 0.75rem rgba(160, 112, 172, 0.14) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime > button:not(:disabled) {
  color: rgba(255, 242, 255, 0.94) !important;
  background: linear-gradient(180deg, rgba(82, 43, 93, 0.9), rgba(57, 31, 70, 0.92)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 218, 255, 0.065), 0 0.48rem 0.9rem rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime[data-membership-card-checkout]:hover {
  filter: brightness(1.06) saturate(1.06) !important;
}


/* membership-lifetime-purple-same-tone-deeper-20260608-1: deepen the current purple without changing hue. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime {
  filter: brightness(1.035) saturate(1.08) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(126, 73, 132, 0.24), transparent 35%),
    linear-gradient(112deg, rgba(43, 26, 55, 0.97), rgba(21, 16, 34, 0.99) 52%, rgba(7, 11, 18, 0.99)) !important;
  border-color: rgba(156, 96, 168, 0.23) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(186, 126, 196, 0.11),
    0 0 1.12rem rgba(117, 72, 132, 0.13),
    0 1.05rem 2.1rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-badge {
  background: linear-gradient(180deg, rgba(139, 77, 145, 0.82), rgba(84, 47, 98, 0.88)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 232, 255, 0.13), 0 0.45rem 0.9rem rgba(70, 38, 82, 0.16) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime > button:not(:disabled) {
  background: linear-gradient(180deg, rgba(82, 43, 93, 0.94), rgba(57, 31, 70, 0.96)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 218, 255, 0.075), 0 0.5rem 0.92rem rgba(0, 0, 0, 0.19) !important;
}


/* membership-overlap-guards-20260608-1: remove floating current badge and constrain card text zones. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-current-plan::before {
  content: none !important;
  display: none !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card {
  overflow: hidden !important;
  container-type: inline-size !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-head {
  min-width: 0 !important;
  max-width: 46% !important;
  z-index: 2 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-meta,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-badge,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-quota-note,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card h4 {
  max-width: 100% !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-badge,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-quota-note,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card h4,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price-block {
  min-width: 0 !important;
  max-width: 52% !important;
  z-index: 2 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-original-price {
  max-width: 100% !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price strong {
  font-size: clamp(3.4rem, 5.1vw, 4.95rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
  max-width: min(13rem, 52%) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button {
  min-width: 0 !important;
  max-width: min(8.6rem, 36%) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-head {
  max-width: 48% !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-price-block {
  max-width: 50% !important;
}

@media (max-width: 760px) {
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-head,
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-head {
    max-width: 54% !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price-block,
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-price-block {
    max-width: 46% !important;
  }
}


/* membership-overlap-guard-correction-20260608-1: keep the overlap fix without clipping plan titles or buttons. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-current-plan::before {
  content: none !important;
  display: none !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-head,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-head {
  max-width: none !important;
  width: auto !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-badge,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-quota-note,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card h4 {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button {
  max-width: none !important;
  width: clamp(7.2rem, 9.4vw, 8.4rem) !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-price-block,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-price-block {
  max-width: none !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price strong {
  font-size: clamp(3.55rem, 5.35vw, 5.1rem) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
  max-width: min(13rem, 58%) !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@container (max-width: 360px) {
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button {
    width: clamp(6.2rem, 32cqw, 7.4rem) !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price strong {
    font-size: clamp(3rem, 14cqw, 4.15rem) !important;
  }
}


/* membership-compact-overlap-guards-20260608-1: prevent price and CTA collisions on narrow landscape screens. */
@media (max-width: 980px) and (orientation: landscape) {
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-plan-grid {
    gap: 0.55rem !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card {
    padding-inline: clamp(0.75rem, 1.4vw, 1rem) !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-badge {
    font-size: clamp(0.56rem, 1.25vw, 0.68rem) !important;
    max-width: 7rem !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card h4 {
    font-size: clamp(1.32rem, 3.1vw, 1.68rem) !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price strong {
    font-size: clamp(2.7rem, 6.8vw, 3.55rem) !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price small,
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-current-price em {
    font-size: clamp(0.78rem, 1.8vw, 0.98rem) !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-copy {
    max-width: 45% !important;
    font-size: clamp(0.58rem, 1.25vw, 0.68rem) !important;
    line-height: 1.18 !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card > button {
    width: clamp(5.6rem, 15vw, 7.2rem) !important;
    font-size: clamp(0.72rem, 1.6vw, 0.88rem) !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-quota-note {
    font-size: clamp(0.5rem, 1.15vw, 0.62rem) !important;
  }

  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-original-price {
    font-size: clamp(0.58rem, 1.2vw, 0.7rem) !important;
  }
}


/* membership-key-benefit-no-left-bars-20260608-1: remove unclear thick left markers from benefit rows. */
html[data-active-module="membership"] .membership-reference-row.is-key-benefit > *:first-child {
  box-shadow: none !important;
  padding-left: var(--membership-table-cell-x, 1.2rem) !important;
}

html[data-active-module="membership"] .membership-reference-row.is-key-benefit > *:first-child::before {
  content: none !important;
  display: none !important;
}


/* membership-status-payment-table-20260608-1: accurate trial state, cleaner payment fallback, and quieter common benefits. */
html[data-active-module="membership"] .membership-reference-row.is-common-benefit > * {
  color: rgba(220, 224, 224, 0.72) !important;
  background: rgba(255, 255, 255, 0.006) !important;
}

html[data-active-module="membership"] .membership-reference-row.is-common-benefit .membership-reference-feature {
  font-weight: 600 !important;
}

html[data-active-module="membership"] .membership-reference-row.is-key-benefit > * {
  background: rgba(255, 210, 120, 0.018) !important;
}

html[data-active-module="membership"] .membership-reference-row.is-key-benefit .membership-reference-feature {
  color: rgba(255, 232, 178, 0.94) !important;
  font-weight: 760 !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-checkout-notice.is-error {
  border-color: rgba(255, 190, 106, 0.2) !important;
  background: linear-gradient(135deg, rgba(40, 30, 18, 0.88), rgba(10, 10, 9, 0.78)) !important;
}

html[data-active-module="membership"] .membership-reference-grid[data-current-plan="free"] [data-plan-column] {
  box-shadow: none !important;
}

/* library-detail-tags-sort-20260608-1: detail drawer, canonical tags, progress-aware sorting controls. */
html[data-active-module="nav-library"] .library-results-head {
  grid-template-columns: max-content minmax(18rem, 1fr) max-content max-content !important;
}

html[data-active-module="nav-library"] .library-sort-tabs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
  min-height: 2.18rem !important;
  padding: 0.16rem !important;
  border: 1px solid rgba(232, 197, 126, 0.16) !important;
  border-radius: 0.7rem !important;
  background: rgba(8, 9, 10, 0.58) !important;
}

html[data-active-module="nav-library"] .library-sort-tabs button {
  min-height: 1.72rem !important;
  padding: 0 0.56rem !important;
  border: 0 !important;
  border-radius: 0.52rem !important;
  background: transparent !important;
  color: rgba(225, 226, 220, 0.7) !important;
  font-size: 0.72rem !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-sort-tabs button.is-active {
  background: rgba(232, 197, 126, 0.16) !important;
  color: rgba(255, 232, 178, 0.96) !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  overflow: hidden auto !important;
}

html[data-active-module="nav-library"] .library-table-head,
html[data-active-module="nav-library"] .library-track-row {
  grid-template-columns: clamp(3.35rem, 4.2vw, 3.75rem) minmax(22rem, 1fr) clamp(4.55rem, 5.7vw, 5.15rem) clamp(4.55rem, 5.7vw, 5.2rem) clamp(3.65rem, 4.55vw, 4.2rem) clamp(11.8rem, 14.2vw, 13.2rem) !important;
}

html[data-active-module="nav-library"] .library-row-title-button {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  text-align: left !important;
}

html[data-active-module="nav-library"] .library-row-title-button strong {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-row-actions {
  gap: 0.34rem !important;
}

html[data-active-module="nav-library"] .library-row-detail {
  display: inline-flex !important;
  min-width: clamp(3.2rem, 3.8vw, 3.7rem) !important;
  min-height: clamp(2.18rem, 2.55vw, 2.42rem) !important;
  padding: 0 0.56rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.62rem !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(235, 236, 230, 0.76) !important;
  font-size: 0.76rem !important;
  font-weight: 820 !important;
}

html[data-active-module="nav-library"] .library-track-row.is-detail-active {
  border-color: rgba(232, 197, 126, 0.34) !important;
  background: linear-gradient(90deg, rgba(232, 197, 126, 0.1), rgba(255, 255, 255, 0.03)) !important;
}

html[data-active-module="nav-library"] .library-row-detail[aria-pressed="true"] {
  border-color: rgba(232, 197, 126, 0.42) !important;
  background: rgba(232, 197, 126, 0.12) !important;
  color: rgba(255, 232, 178, 0.98) !important;
}

html[data-active-module="nav-library"] .library-row-pills span.is-practice {
  border-color: rgba(118, 210, 202, 0.28) !important;
  background: rgba(38, 132, 126, 0.16) !important;
  color: rgba(198, 246, 241, 0.92) !important;
}

html[data-active-module="nav-library"] .library-row-pills span.is-member {
  border-color: rgba(232, 197, 126, 0.34) !important;
  background: rgba(232, 197, 126, 0.16) !important;
  color: rgba(255, 230, 178, 0.96) !important;
}

html[data-active-module="nav-library"] .library-member-value {
  display: grid !important;
  gap: 0.28rem !important;
  padding: 0.78rem 0.84rem !important;
  border: 1px solid rgba(232, 197, 126, 0.18) !important;
  border-radius: 0.82rem !important;
  background: rgba(232, 197, 126, 0.075) !important;
}

html[data-active-module="nav-library"] .library-member-value strong {
  color: rgba(255, 232, 178, 0.98) !important;
  font-size: 0.82rem !important;
}

html[data-active-module="nav-library"] .library-member-value p {
  margin: 0 !important;
  color: rgba(232, 237, 241, 0.76) !important;
  font-size: 0.78rem !important;
  line-height: 1.55 !important;
}

html[data-active-module="nav-library"] .library-detail-tags {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.56rem !important;
}

html[data-active-module="nav-library"] .library-detail-tags div {
  display: grid !important;
  gap: 0.34rem !important;
  min-width: 0 !important;
  padding: 0.64rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.76rem !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="nav-library"] .library-detail-tags span {
  color: rgba(232, 197, 126, 0.78) !important;
  font-size: 0.66rem !important;
  font-weight: 820 !important;
}

html[data-active-module="nav-library"] .library-detail-tags p {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.28rem !important;
  margin: 0 !important;
}

html[data-active-module="nav-library"] .library-detail-tags b {
  display: inline-flex !important;
  max-width: 100% !important;
  padding: 0.16rem 0.42rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(238, 239, 232, 0.82) !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
}

html[data-active-module="nav-library"] .library-detail-quality {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.38rem !important;
}

html[data-active-module="nav-library"] .library-detail-quality span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.32rem !important;
  min-height: 1.52rem !important;
  padding: 0.2rem 0.5rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  color: rgba(232, 237, 241, 0.78) !important;
  font-size: 0.7rem !important;
  font-weight: 780 !important;
}

html[data-active-module="nav-library"] .library-detail-quality span.is-ok {
  border-color: rgba(82, 211, 142, 0.3) !important;
  background: rgba(34, 139, 88, 0.14) !important;
  color: rgba(196, 250, 220, 0.9) !important;
}

html[data-active-module="nav-library"] .library-detail-quality span.is-warn {
  border-color: rgba(232, 197, 126, 0.28) !important;
  background: rgba(232, 197, 126, 0.1) !important;
  color: rgba(255, 230, 178, 0.9) !important;
}

html[data-active-module="nav-library"] .library-detail-quality i {
  display: grid !important;
  width: 1rem !important;
  height: 1rem !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  font-size: 0.62rem !important;
  font-style: normal !important;
  line-height: 1 !important;
}

@media (max-width: 1180px) {
  html[data-active-module="nav-library"] .library-results-head {
    grid-template-columns: minmax(0, 1fr) max-content !important;
  }

  html[data-active-module="nav-library"] .library-search-shell,
  html[data-active-module="nav-library"] .library-sort-tabs {
    grid-column: 1 / -1 !important;
  }

  html[data-active-module="nav-library"] .library-sort-tabs {
    justify-self: start !important;
  }
}

@media (max-width: 980px) {
  html[data-active-module="nav-library"] .library-row-detail {
    display: none !important;
  }

  html[data-active-module="nav-library"] .library-detail-tags {
    grid-template-columns: 1fr !important;
  }
}


/* membership-records-polish-20260608-2: make purchase history compact and user-facing. */
html[data-active-module="membership"] .membership-purchase-records {
  display: grid !important;
  grid-template-columns: minmax(12rem, max-content) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(0.8rem, 1vw, 1.1rem) !important;
  width: min(100%, 89rem) !important;
  margin: clamp(1.05rem, 1.25vw, 1.35rem) auto 0 !important;
  padding: 0 !important;
}

html[data-active-module="membership"] .membership-purchase-records-head {
  display: grid !important;
  gap: 0.22rem !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-purchase-records-head strong {
  color: rgba(255, 232, 178, 0.96) !important;
  font-size: clamp(0.92rem, 1.02vw, 1.05rem) !important;
  font-weight: 860 !important;
  line-height: 1.12 !important;
}

html[data-active-module="membership"] .membership-purchase-records-head span {
  color: rgba(221, 226, 224, 0.62) !important;
  font-size: clamp(0.68rem, 0.76vw, 0.76rem) !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-purchase-records-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(0.52rem, 0.72vw, 0.72rem) !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-purchase-record {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 0.28rem 0.64rem !important;
  min-width: 0 !important;
  min-height: 3.35rem !important;
  padding: 0.62rem 0.78rem !important;
  border: 1px solid rgba(232, 197, 126, 0.13) !important;
  border-radius: 0.64rem !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.015)), rgba(8, 9, 10, 0.78) !important;
  box-shadow: none !important;
}

html[data-active-module="membership"] .membership-purchase-record div {
  display: grid !important;
  gap: 0.14rem !important;
  min-width: 0 !important;
}

html[data-active-module="membership"] .membership-purchase-record strong,
html[data-active-module="membership"] .membership-purchase-record small,
html[data-active-module="membership"] .membership-purchase-record b {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-purchase-record strong {
  color: rgba(246, 238, 218, 0.9) !important;
  font-size: 0.8rem !important;
  font-weight: 820 !important;
}

html[data-active-module="membership"] .membership-purchase-record small {
  color: rgba(218, 222, 219, 0.58) !important;
  font-size: 0.66rem !important;
  font-weight: 720 !important;
}

html[data-active-module="membership"] .membership-purchase-record span {
  justify-self: end !important;
  padding: 0.15rem 0.48rem !important;
  border-radius: 999px !important;
  background: rgba(232, 197, 126, 0.12) !important;
  color: rgba(255, 232, 178, 0.94) !important;
  font-size: 0.64rem !important;
  font-weight: 860 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

html[data-active-module="membership"] .membership-purchase-record span.is-paid {
  background: rgba(72, 189, 133, 0.13) !important;
  color: rgba(187, 248, 215, 0.92) !important;
}

html[data-active-module="membership"] .membership-purchase-record span.is-muted {
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(224, 224, 220, 0.66) !important;
}

html[data-active-module="membership"] .membership-purchase-record b {
  grid-column: 1 / -1 !important;
  color: rgba(232, 197, 126, 0.9) !important;
  font-size: 0.72rem !important;
  font-weight: 780 !important;
}

@media (max-width: 1180px) {
  html[data-active-module="membership"] .membership-purchase-records {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="membership"] .membership-purchase-records-list {
    grid-template-columns: 1fr !important;
  }
}


/* profile-purchase-records-home-20260608-1: purchase records belong in personal center. */
html[data-active-module="profile"] .profile-dashboard.profile-account-page {
  grid-template-rows: minmax(9.6rem, 0.29fr) minmax(0, 1fr) minmax(5.6rem, auto) !important;
}

html[data-active-module="profile"] .membership-purchase-records {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(12rem, max-content) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(0.82rem, 1vw, 1.1rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: clamp(0.82rem, 1.05vw, 1rem) clamp(1rem, 1.35vw, 1.35rem) !important;
  border: 1px solid rgba(232, 197, 126, 0.16) !important;
  border-radius: 0.5rem !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)), rgba(7, 8, 8, 0.82) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html[data-active-module="profile"] .membership-purchase-records-head {
  display: grid !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
}

html[data-active-module="profile"] .membership-purchase-records-head strong {
  color: rgba(255, 232, 178, 0.96) !important;
  font-size: clamp(1rem, 1.08vw, 1.16rem) !important;
  font-weight: 860 !important;
  line-height: 1.1 !important;
}

html[data-active-module="profile"] .membership-purchase-records-head span {
  color: rgba(221, 226, 224, 0.62) !important;
  font-size: clamp(0.68rem, 0.74vw, 0.76rem) !important;
  font-weight: 760 !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .membership-purchase-records-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(0.52rem, 0.72vw, 0.72rem) !important;
  min-width: 0 !important;
  height: 100% !important;
}

html[data-active-module="profile"] .membership-purchase-record {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  align-content: center !important;
  align-items: center !important;
  gap: 0.24rem 0.62rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0.56rem 0.72rem !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 0.5rem !important;
  background: rgba(255, 255, 255, 0.038) !important;
  box-shadow: none !important;
}

html[data-active-module="profile"] .membership-purchase-record div {
  display: grid !important;
  gap: 0.1rem !important;
  min-width: 0 !important;
}

html[data-active-module="profile"] .membership-purchase-record strong,
html[data-active-module="profile"] .membership-purchase-record small,
html[data-active-module="profile"] .membership-purchase-record b {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .membership-purchase-record strong {
  color: rgba(246, 238, 218, 0.92) !important;
  font-size: clamp(0.76rem, 0.82vw, 0.86rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="profile"] .membership-purchase-record small {
  color: rgba(218, 222, 219, 0.58) !important;
  font-size: clamp(0.62rem, 0.68vw, 0.7rem) !important;
  font-weight: 720 !important;
}

html[data-active-module="profile"] .membership-purchase-record span {
  justify-self: end !important;
  padding: 0.15rem 0.46rem !important;
  border-radius: 999px !important;
  background: rgba(232, 197, 126, 0.12) !important;
  color: rgba(255, 232, 178, 0.94) !important;
  font-size: clamp(0.58rem, 0.62vw, 0.64rem) !important;
  font-weight: 860 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .membership-purchase-record span.is-paid {
  background: rgba(72, 189, 133, 0.13) !important;
  color: rgba(187, 248, 215, 0.92) !important;
}

html[data-active-module="profile"] .membership-purchase-record span.is-muted {
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(224, 224, 220, 0.66) !important;
}

html[data-active-module="profile"] .membership-purchase-record b {
  grid-column: 1 / -1 !important;
  color: rgba(232, 197, 126, 0.88) !important;
  font-size: clamp(0.66rem, 0.72vw, 0.74rem) !important;
  font-weight: 780 !important;
}

html[data-active-module="membership"] .membership-purchase-records {
  display: none !important;
}

@media (max-width: 1180px) {
  html[data-active-module="profile"] .profile-dashboard.profile-account-page {
    grid-template-rows: minmax(11rem, auto) minmax(8rem, auto) minmax(24rem, 1fr) minmax(12rem, auto) minmax(10rem, auto) !important;
  }

  html[data-active-module="profile"] .membership-purchase-records {
    grid-column: 1 !important;
    grid-row: auto !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }

  html[data-active-module="profile"] .membership-purchase-records-list {
    grid-template-columns: 1fr !important;
  }
}


/* profile-purchase-records-balance-20260608-2: keep profile identity text from clipping after adding purchase records. */
html[data-active-module="profile"] .profile-dashboard.profile-account-page {
  grid-template-rows: minmax(10.9rem, 0.34fr) minmax(0, 1fr) minmax(5.4rem, auto) !important;
}

html[data-active-module="profile"] .profile-account-summary {
  padding-block: clamp(1.05rem, 1.55vw, 1.55rem) !important;
}

html[data-active-module="profile"] .profile-account-copy h3 {
  font-size: clamp(2.1rem, 4.4vw, 4.55rem) !important;
}

html[data-active-module="profile"] .membership-purchase-records {
  min-height: 5.2rem !important;
}

/* learning-tools-practice-copy-anchor-20260608-3: place the two large learning-tool labels in the visual-safe left band. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner {
  padding: 0 !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome > .tools-practice-copy,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner > .tools-practice-copy {
  position: absolute !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: clamp(1.8rem, 2.4vw, 2.55rem) !important;
  z-index: 4 !important;
  display: grid !important;
  gap: clamp(0.38rem, 0.52vw, 0.56rem) !important;
  width: min(23rem, 47%) !important;
  max-width: min(23rem, 47%) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome > .tools-practice-copy strong,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner > .tools-practice-copy strong {
  font-size: clamp(2.18rem, 2.85vw, 2.88rem) !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  color: rgba(252, 253, 255, 0.99) !important;
  letter-spacing: 0 !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.74), 0 0 24px rgba(255, 255, 255, 0.12) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome > .tools-practice-copy small,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner > .tools-practice-copy small {
  font-size: clamp(1.06rem, 1.22vw, 1.24rem) !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  color: rgba(246, 246, 240, 0.86) !important;
  letter-spacing: 0 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.68) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome > .tools-card-arrow,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner > .tools-card-arrow {
  position: absolute !important;
  top: calc(50% + clamp(3.18rem, 4.25vw, 4.08rem)) !important;
  right: auto !important;
  bottom: auto !important;
  left: clamp(1.8rem, 2.4vw, 2.55rem) !important;
  z-index: 4 !important;
  width: clamp(2.9rem, 3.2vw, 3.24rem) !important;
  height: clamp(2.9rem, 3.2vw, 3.24rem) !important;
  margin: 0 !important;
  transform: none !important;
  font-size: clamp(1.4rem, 1.58vw, 1.58rem) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome > .tools-practice-copy,
  html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner > .tools-practice-copy {
    left: clamp(1.28rem, 4vw, 1.85rem) !important;
    width: min(22rem, 64%) !important;
    max-width: min(22rem, 64%) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome > .tools-practice-copy strong,
  html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner > .tools-practice-copy strong {
    font-size: clamp(1.82rem, 5.2vw, 2.34rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome > .tools-practice-copy small,
  html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner > .tools-practice-copy small {
    font-size: clamp(0.96rem, 2.55vw, 1.1rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome > .tools-card-arrow,
  html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner > .tools-card-arrow {
    top: calc(50% + clamp(2.9rem, 7.6vw, 3.76rem)) !important;
    left: clamp(1.28rem, 4vw, 1.85rem) !important;
  }
}




/* membership-badge-breathing-20260608-2: normal badge with a subtle internal breathing shimmer. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-badge,
html[data-active-module="membership"] .membership-showcase-card .membership-plan-badge,
.content-grid[data-module="membership"] .membership-plan-card.is-recommended .membership-plan-badge,
.content-grid[data-module="membership"] .membership-plan-badge {
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 33%, transparent 58%),
    linear-gradient(180deg, rgba(255, 171, 69, 0.94), rgba(232, 112, 22, 0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -0.5rem 0.74rem rgba(145, 55, 0, 0.22),
    inset 0 0 0.48rem rgba(255, 221, 150, 0.14) !important;
  filter: none !important;
  text-shadow: 0 1px 0 rgba(109, 41, 0, 0.3) !important;
  animation: membershipBadgeInnerBreath 3.4s ease-in-out infinite !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-badge::before,
html[data-active-module="membership"] .membership-showcase-card .membership-plan-badge::before,
.content-grid[data-module="membership"] .membership-plan-card.is-recommended .membership-plan-badge::before,
.content-grid[data-module="membership"] .membership-plan-badge::before {
  inset: 0.08rem 0.2rem auto !important;
  z-index: -1 !important;
  height: 42% !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.035)) !important;
  opacity: 0.42 !important;
  animation: membershipBadgeInnerHighlight 3.4s ease-in-out infinite !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-badge::after,
html[data-active-module="membership"] .membership-showcase-card .membership-plan-badge::after,
.content-grid[data-module="membership"] .membership-plan-card.is-recommended .membership-plan-badge::after,
.content-grid[data-module="membership"] .membership-plan-badge::after {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  content: "" !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 238, 178, 0.36), transparent 54%),
    linear-gradient(90deg, transparent 8%, rgba(255, 255, 255, 0.16) 48%, transparent 72%) !important;
  opacity: 0 !important;
  transform: translateX(-18%) scaleX(0.82) !important;
  animation: membershipBadgeInnerPulse 3.4s ease-in-out infinite !important;
  pointer-events: none !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-monthly .membership-plan-badge,
html[data-active-module="membership"] .membership-showcase-card.is-monthly .membership-plan-badge {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 34%, transparent 58%),
    linear-gradient(180deg, rgba(89, 126, 155, 0.84), rgba(42, 74, 104, 0.9)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -0.46rem 0.68rem rgba(7, 32, 55, 0.24),
    inset 0 0 0.42rem rgba(169, 213, 242, 0.11) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-lifetime .membership-plan-badge,
html[data-active-module="membership"] .membership-showcase-card.is-lifetime .membership-plan-badge {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.05) 34%, transparent 58%),
    linear-gradient(180deg, rgba(142, 77, 139, 0.86), rgba(84, 38, 94, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -0.46rem 0.68rem rgba(45, 10, 52, 0.25),
    inset 0 0 0.42rem rgba(226, 169, 226, 0.1) !important;
}

@keyframes membershipBadgeInnerBreath {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      inset 0 -0.5rem 0.74rem rgba(145, 55, 0, 0.22),
      inset 0 0 0.42rem rgba(255, 221, 150, 0.12);
  }
  48%, 58% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.48),
      inset 0 -0.5rem 0.74rem rgba(145, 55, 0, 0.18),
      inset 0 0 0.9rem rgba(255, 232, 170, 0.34);
  }
}

@keyframes membershipBadgeInnerHighlight {
  0%, 100% { opacity: 0.34; }
  50% { opacity: 0.72; }
}

@keyframes membershipBadgeInnerPulse {
  0%, 28%, 100% {
    opacity: 0;
    transform: translateX(-18%) scaleX(0.82);
  }
  48% {
    opacity: 0.48;
    transform: translateX(0%) scaleX(1);
  }
  66% {
    opacity: 0.12;
    transform: translateX(16%) scaleX(0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-badge,
  html[data-active-module="membership"] .membership-showcase-card .membership-plan-badge,
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-badge::before,
  html[data-active-module="membership"] .membership-showcase-card .membership-plan-badge::before,
  html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card .membership-plan-badge::after,
  html[data-active-module="membership"] .membership-showcase-card .membership-plan-badge::after {
    animation: none !important;
  }
}


/* membership-final-12345-20260608-1: lighter focus column, clearer locks, and final membership surface overrides. */
html[data-active-module="membership"] .membership-reference-grid [data-plan-column] {
  transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease !important;
}

html[data-active-module="membership"] .membership-reference-grid[data-focused-plan="monthly"] [data-plan-column="monthly"],
html[data-active-module="membership"] .membership-reference-grid[data-focused-plan="yearly"] [data-plan-column="yearly"],
html[data-active-module="membership"] .membership-reference-grid[data-focused-plan="lifetime"] [data-plan-column="lifetime"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-monthly:hover) [data-plan-column="monthly"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-yearly:hover) [data-plan-column="yearly"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-lifetime:hover) [data-plan-column="lifetime"] {
  background: rgba(232, 197, 126, 0.035) !important;
  box-shadow:
    inset 1px 0 rgba(232, 197, 126, 0.22),
    inset -1px 0 rgba(232, 197, 126, 0.16) !important;
  color: rgba(255, 236, 190, 0.96) !important;
}

html[data-active-module="membership"] .membership-reference-grid[data-focused-plan="lifetime"] [data-plan-column="lifetime"],
html[data-active-module="membership"] .membership-reference-layout:has(#membership-plan-lifetime:hover) [data-plan-column="lifetime"] {
  background: rgba(150, 80, 154, 0.055) !important;
  box-shadow:
    inset 1px 0 rgba(197, 121, 202, 0.28),
    inset -1px 0 rgba(197, 121, 202, 0.18) !important;
}

html[data-active-module="membership"] .membership-reference-row.is-head [data-plan-column] {
  border-top-color: rgba(232, 197, 126, 0.12) !important;
}

html[data-active-module="membership"] .membership-reference-row.is-head [data-plan-column="lifetime"] {
  color: rgba(255, 232, 178, 0.96) !important;
}

html[data-active-module="membership"] .membership-reference-grid[data-current-plan="free"] [data-plan-column] {
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="membership"] .membership-reference-grid[data-current-plan="free"][data-focused-plan="monthly"] [data-plan-column="monthly"],
html[data-active-module="membership"] .membership-reference-grid[data-current-plan="free"][data-focused-plan="yearly"] [data-plan-column="yearly"],
html[data-active-module="membership"] .membership-reference-grid[data-current-plan="free"][data-focused-plan="lifetime"] [data-plan-column="lifetime"] {
  background: rgba(232, 197, 126, 0.028) !important;
  box-shadow: inset 1px 0 rgba(232, 197, 126, 0.16), inset -1px 0 rgba(232, 197, 126, 0.1) !important;
}

html[data-active-module="membership"] .membership-reference-grid[data-current-plan="free"][data-focused-plan="lifetime"] [data-plan-column="lifetime"] {
  background: rgba(150, 80, 154, 0.05) !important;
  box-shadow: inset 1px 0 rgba(197, 121, 202, 0.22), inset -1px 0 rgba(197, 121, 202, 0.14) !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-current-plan,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-covered-plan {
  cursor: default !important;
}

html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-current-plan > button,
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card.is-covered-plan > button {
  opacity: 0.74 !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(236, 232, 220, 0.72) !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-track-row.is-member-locked {
  background: linear-gradient(90deg, rgba(232, 197, 126, 0.055), rgba(255, 255, 255, 0.015)) !important;
}

html[data-active-module="nav-library"] .library-track-row.is-member-locked .library-row-title-button strong::after {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 0.42rem !important;
  padding: 0.12rem 0.38rem !important;
  border-radius: 999px !important;
  content: "会员" !important;
  background: rgba(232, 197, 126, 0.14) !important;
  color: rgba(255, 232, 178, 0.94) !important;
  font-size: 0.62rem !important;
  font-weight: 860 !important;
  vertical-align: middle !important;
}

html[data-active-module="nav-library"] .library-row-free.is-locked,
html[data-active-module="nav-library"] .library-row-free.is-member {
  border-color: rgba(232, 197, 126, 0.24) !important;
  background: rgba(232, 197, 126, 0.12) !important;
  color: rgba(255, 232, 178, 0.94) !important;
}

html[data-active-module="nav-library"] .library-track-row.is-member-locked .library-row-play {
  border-color: rgba(232, 197, 126, 0.28) !important;
  background: rgba(232, 197, 126, 0.13) !important;
  color: rgba(255, 232, 178, 0.96) !important;
  box-shadow: none !important;
}

html[data-active-module="profile"] .membership-purchase-record span.is-processing {
  background: rgba(140, 166, 190, 0.12) !important;
  color: rgba(218, 231, 240, 0.84) !important;
}

/* learning-tools-metronome-v21-unified-20260608-1: force every learning-tools metronome layer to use the requested v21 PNG. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  overflow: visible !important;
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before {
  content: "" !important;
  position: absolute !important;
  top: -13.25% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: 113.25% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png") center top / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  clip-path: none !important;
  pointer-events: none !important;
}

/* learning-tools-five-point-polish-20260608-1: stronger hierarchy, section separation, tool status chips, safer copy overlay, and short-screen fit. */
html[data-active-module="nav-learningTools"] .tools-board-layout {
  gap: clamp(1.62rem, 2.05vw, 2.2rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-board-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: clamp(0.5rem, 0.72vw, 0.72rem) !important;
  color: rgba(255, 241, 214, 0.94) !important;
  font-size: clamp(1rem, 1.08vw, 1.14rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 0.55rem 1.3rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="nav-learningTools"] .tools-board-title::before {
  display: block !important;
  width: clamp(0.48rem, 0.54vw, 0.58rem) !important;
  height: clamp(0.48rem, 0.54vw, 0.58rem) !important;
  border-radius: 999px !important;
  background: rgba(232, 197, 126, 0.9) !important;
  box-shadow: 0 0 1rem rgba(232, 197, 126, 0.32) !important;
  content: "" !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-section {
  position: relative !important;
  padding-top: clamp(0.32rem, 0.55vw, 0.55rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-section::before {
  position: absolute !important;
  top: clamp(-0.78rem, -0.72vw, -0.48rem) !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(232, 197, 126, 0.28) 12%, rgba(255, 255, 255, 0.1) 50%, transparent) !important;
  content: "" !important;
  pointer-events: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-section .tools-board-title {
  font-size: clamp(1.1rem, 1.22vw, 1.28rem) !important;
  color: rgba(255, 232, 178, 0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card {
  transition: transform 150ms ease, filter 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:not(.is-feature-intro) {
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro {
  border-color: rgba(255, 225, 166, 0.34) !important;
  filter: brightness(1.08) saturate(1.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(232, 197, 126, 0.08),
    0 1.1rem 2.7rem rgba(0, 0, 0, 0.38),
    0 0 1.15rem rgba(232, 197, 126, 0.18) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro .tools-card-copy strong {
  font-size: clamp(1.22rem, 1.38vw, 1.46rem) !important;
  color: rgba(255, 246, 226, 0.99) !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible {
  border-color: rgba(255, 226, 174, 0.32) !important;
  filter: brightness(1.08) saturate(1.04) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after {
  z-index: 1 !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0.16) 48%, transparent 76%),
    radial-gradient(ellipse at 16% 51%, rgba(0, 0, 0, 0.5), transparent 52%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.1)) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-copy {
  row-gap: clamp(0.32rem, 0.44vw, 0.5rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.36rem !important;
  margin-bottom: 0.08rem !important;
  color: rgba(255, 232, 178, 0.94) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.78rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.68) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-meta b {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.42rem !important;
  padding: 0.18rem 0.48rem !important;
  border: 1px solid rgba(255, 232, 178, 0.22) !important;
  border-radius: 999px !important;
  background: rgba(8, 8, 8, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0.45rem 1rem rgba(0, 0, 0, 0.22) !important;
  white-space: nowrap !important;
}

@media (min-width: 1181px) and (max-height: 780px) {
  html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
    height: calc(var(--app-height, 100dvh) - clamp(3.72rem, 4.35vw, 4.5rem)) !important;
    padding-top: clamp(0.58rem, 0.82vw, 0.82rem) !important;
    padding-bottom: clamp(0.72rem, 0.95vw, 0.95rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-board-layout {
    gap: clamp(0.82rem, 1.1vw, 1.05rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-entry-section {
    gap: clamp(0.48rem, 0.62vw, 0.66rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-material-card {
    height: clamp(13.6rem, 31vh, 15.2rem) !important;
    min-height: 0 !important;
    padding: clamp(0.92rem, 1.15vw, 1.15rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-practice-card {
    height: clamp(12.2rem, 29vh, 14.55rem) !important;
    min-height: 0 !important;
  }

  html[data-active-module="nav-learningTools"] .tools-card-arrow {
    width: 38px !important;
    height: 38px !important;
  }
}


/* library-pagination-empty-actions-20260608-1: compact page numbers and recoverable empty states. */
html[data-active-module="nav-library"] .library-pagination button.library-pagination-page {
  width: auto !important;
  min-width: clamp(1.62rem, 2vw, 1.86rem) !important;
  color: rgba(232, 237, 241, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="nav-library"] .library-pagination button.library-pagination-page span,
html[data-active-module="nav-library"] .library-pagination button.library-pagination-page.is-active span {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: clamp(0.68rem, 0.78vw, 0.76rem) !important;
  font-weight: 860 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-pagination button.library-pagination-page.is-active {
  border-color: rgba(var(--library-ref-gold-soft), 0.46) !important;
  background: rgba(var(--library-ref-gold), 0.18) !important;
  color: rgba(255, 231, 186, 0.98) !important;
}

html[data-active-module="nav-library"] .library-pagination-ellipsis {
  display: inline-grid !important;
  min-width: 1.18rem !important;
  place-items: center !important;
  color: rgba(226, 224, 216, 0.48) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.76rem) !important;
  font-weight: 860 !important;
}

html[data-active-module="nav-library"] .library-empty-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 0.42rem !important;
}

html[data-active-module="nav-library"] .library-empty-actions button[data-library-clear-filters] {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(236, 239, 232, 0.82) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-sync-error {
  border-color: rgba(242, 183, 96, 0.26) !important;
  background: rgba(242, 183, 96, 0.065) !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-library"] .library-empty-row.is-search-empty {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="nav-library"] .library-empty-actions {
    justify-content: flex-start !important;
  }
}

/* learning-tools-button-borderless-20260608-1: remove visible thin outlines from learning-tool buttons while keeping depth. */
html[data-active-module="nav-learningTools"] .tools-entry-card,
html[data-active-module="nav-learningTools"] .tools-material-card,
html[data-active-module="nav-learningTools"] .tools-practice-card,
html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:active {
  border: 0 !important;
  outline: 0 !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro {
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 1.1rem 2.7rem rgba(0, 0, 0, 0.38),
    0 0 1.15rem rgba(232, 197, 126, 0.16) !important;
}

html[data-active-module="nav-learningTools"] .tools-card-arrow,
html[data-active-module="nav-learningTools"] .tools-practice-card > .tools-card-arrow,
html[data-active-module="nav-learningTools"] .tools-practice-card:hover > .tools-card-arrow,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible > .tools-card-arrow,
html[data-active-module="nav-learningTools"] .tools-practice-card:active > .tools-card-arrow {
  border: 0 !important;
  outline: 0 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0.72rem 1.45rem rgba(0, 0, 0, 0.3) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-meta b {
  border: 0 !important;
  outline: 0 !important;
  background: rgba(255, 255, 255, 0.11) !important;
  box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 1.08rem 2.75rem rgba(0, 0, 0, 0.36),
    0 0 1.25rem rgba(232, 197, 126, 0.13) !important;
}

/* learning-tools-tuner-hover-bleed-guard-20260608-1: keep tuner/card hover paint from bleeding into the top-left navigation. */
html[data-active-module="nav-learningTools"] .main-stage {
  isolation: isolate !important;
  overflow: hidden !important;
}

html[data-active-module="nav-learningTools"] .topbar {
  position: relative !important;
  z-index: 120 !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 9% 0%, rgba(233, 183, 96, 0.055), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.008)),
    rgba(3, 3, 3, 0.92) !important;
}

html[data-active-module="nav-learningTools"] .topbar::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  background: rgba(3, 3, 3, 0.62) !important;
  pointer-events: none !important;
}

html[data-active-module="nav-learningTools"] .top-brand,
html[data-active-module="nav-learningTools"] .top-nav,
html[data-active-module="nav-learningTools"] .user-area {
  position: relative !important;
  z-index: 1 !important;
}

html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

html[data-active-module="nav-learningTools"] .nav-workbench-tools,
html[data-active-module="nav-learningTools"] .tools-board-layout,
html[data-active-module="nav-learningTools"] .tools-practice-section,
html[data-active-module="nav-learningTools"] .tools-practice-grid {
  position: relative !important;
  z-index: 0 !important;
  isolation: isolate !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:active {
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: 24px !important;
  background-clip: padding-box !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after {
  inset: 0 !important;
  border-radius: inherit !important;
  clip-path: inset(0 round 24px) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::after {
  transform: none !important;
}

/* learning-tools-entry-no-click-color-eof-20260611-2: final lock after all learning-tools overrides. */
html[data-active-module="nav-learningTools"] .tools-entry-card {
  -webkit-tap-highlight-color: transparent !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover,
html[data-active-module="nav-learningTools"] .tools-material-card:focus,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card:active {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.006)),
    rgba(4, 5, 6, 0.92) !important;
  color: inherit !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.026),
    0 0.38rem 0.95rem rgba(0, 0, 0, 0.28) !important;
  outline: 0 !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:not(.is-feature-intro):hover,
html[data-active-module="nav-learningTools"] .tools-material-card:not(.is-feature-intro):focus,
html[data-active-module="nav-learningTools"] .tools-material-card:not(.is-feature-intro):focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card:not(.is-feature-intro):active {
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:active {
  filter: brightness(1.08) saturate(1.05) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover::after,
html[data-active-module="nav-learningTools"] .tools-material-card:focus::after,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-material-card:active::after {
  background:
    radial-gradient(ellipse at 82% 18%, rgba(var(--library-study-gold), 0.12), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(91, 55, 24, 0.18), rgba(0, 0, 0, 0.32)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.28)) !important;
  opacity: 1 !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover strong,
html[data-active-module="nav-learningTools"] .tools-material-card:focus strong,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible strong,
html[data-active-module="nav-learningTools"] .tools-material-card:active strong {
  color: rgba(255, 251, 242, 0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover small,
html[data-active-module="nav-learningTools"] .tools-material-card:focus small,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible small,
html[data-active-module="nav-learningTools"] .tools-material-card:active small {
  color: rgba(236, 232, 220, 0.72) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card:active {
  outline: 0 !important;
  transform: none !important;
}

/* learning-tools-no-hover-filter-eof-20260611-5: cancel the generic hover brightness at absolute EOF. */
html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-entry-card:active {
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:not(.is-feature-intro):hover,
html[data-active-module="nav-learningTools"] .tools-material-card:not(.is-feature-intro):focus,
html[data-active-module="nav-learningTools"] .tools-material-card:not(.is-feature-intro):focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card:not(.is-feature-intro):active {
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:active {
  filter: brightness(1.08) saturate(1.05) !important;
}

html[data-active-module="nav-learningTools"] .tools-card-object,
html[data-active-module="nav-learningTools"] .tools-card-visual,
html[data-active-module="nav-learningTools"] .tools-card-arrow {
  transition: none !important;
}

/* learning-tools-no-hover-repaint-eof-20260611-8: true EOF lock for learning-tool entry cards. */
html[data-active-module="nav-learningTools"] .tools-entry-card,
html[data-active-module="nav-learningTools"] .tools-entry-card *,
html[data-active-module="nav-learningTools"] .tools-entry-card::before,
html[data-active-module="nav-learningTools"] .tools-entry-card::after {
  transition: none !important;
  animation: none !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-entry-card:active {
  outline: 0 !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover,
html[data-active-module="nav-learningTools"] .tools-material-card:focus,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card:active {
  background-color: transparent !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-blend-mode: normal !important;
  color: inherit !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:active {
  background-image: url("/platform/assets/learning-card-feature-123.png?v=learning-tools-123-source-20260607-3") !important;
  filter: brightness(1.08) saturate(1.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 1.1rem 2.7rem rgba(0, 0, 0, 0.38),
    0 0 1.15rem rgba(232, 197, 126, 0.16) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:active {
  background-image: url("/platform/assets/learning-card-basic-123.png?v=learning-tools-123-source-20260607-3") !important;
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:active {
  background-image: url("/platform/assets/learning-card-posture-123.png?v=learning-tools-123-source-20260607-3") !important;
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:active {
  background-image: url("/platform/assets/learning-card-notes-123.png?v=learning-tools-123-source-20260607-3") !important;
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:active {
  background-image: url("/platform/assets/learning-card-theory-123.png?v=learning-tools-123-source-20260607-3") !important;
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover::before,
html[data-active-module="nav-learningTools"] .tools-material-card:focus::before,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-material-card:active::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  transform: none !important;
}

/* learning-tools-practice-no-hover-repaint-eof-20260611-12: tuner/metronome hover only scales, never recolors. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner *,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome *,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after {
  transition: transform 110ms ease, box-shadow 110ms ease !important;
  animation: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  filter: none !important;
  transform: scale(1.006) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover {
  overflow: hidden !important;
  border-radius: 24px !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover {
  overflow: visible !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: url("/platform/assets/learning-tool-tuner-no-text.png?v=learning-reference-crops-20260603-24") center / cover no-repeat !important;
  box-shadow: none !important;
  filter: brightness(1.08) saturate(1.05) contrast(1.02) !important;
  opacity: 1 !important;
  clip-path: inset(0 round 24px) !important;
  pointer-events: none !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible::before {
  content: "" !important;
  position: absolute !important;
  top: -13.25% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: 113.25% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png") center top / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  clip-path: none !important;
  pointer-events: none !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  border-radius: inherit !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.04) 50%, transparent 72%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.04)) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::after {
  clip-path: inset(0 round 24px) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:active,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active {
  transform: translateY(1px) scale(0.995) !important;
}

/* note-atlas-detail-scroll-fix-eof-20260611-1: keep symbol detail cards readable instead of clipped. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-atlas {
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
  align-content: start !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  padding-bottom: clamp(1.2rem, 1.8vw, 1.75rem) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(var(--library-study-gold-soft), 0.42) rgba(255, 255, 255, 0.045) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo::-webkit-scrollbar {
  width: 0.42rem;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(var(--library-study-gold-soft), 0.36);
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-detail-list {
  padding-bottom: 0.2rem !important;
}

/* profile-home-preferences-20260611-1: home preference settings for appearance, content, language, and media. */
html[data-active-module="profile"] .content-grid[data-module="profile"] {
  overflow: auto !important;
}

html[data-active-module="profile"] .profile-dashboard.profile-account-page {
  grid-template-rows:
    minmax(9.8rem, auto)
    minmax(12.2rem, auto)
    minmax(13rem, auto)
    minmax(18rem, auto) !important;
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
}

html[data-active-module="profile"] .profile-preferences-card {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: clamp(0.76rem, 1vw, 1rem) !important;
  min-height: clamp(13rem, 24vh, 18rem) !important;
  padding: clamp(1rem, 1.32vw, 1.28rem) !important;
}

html[data-active-module="profile"] .profile-generated-card {
  grid-row: 4 !important;
}

html[data-active-module="profile"] .profile-orders-card {
  grid-row: 4 !important;
}

html[data-active-module="profile"] .profile-preferences-summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(0.5rem, 0.74vw, 0.74rem) !important;
}

html[data-active-module="profile"] .profile-preferences-summary span {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.18rem !important;
  padding: clamp(0.62rem, 0.82vw, 0.82rem) !important;
  border: 1px solid rgba(232, 197, 126, 0.14) !important;
  border-radius: 0.5rem !important;
  background: rgba(232, 197, 126, 0.055) !important;
}

html[data-active-module="profile"] .profile-preferences-summary small,
html[data-active-module="profile"] .profile-preference-group-head small {
  color: rgba(221, 226, 224, 0.62) !important;
  font-size: clamp(0.66rem, 0.72vw, 0.78rem) !important;
  font-weight: 720 !important;
  line-height: 1.32 !important;
}

html[data-active-module="profile"] .profile-preferences-summary strong {
  overflow: hidden !important;
  color: rgba(255, 250, 238, 0.94) !important;
  font-size: clamp(0.86rem, 0.95vw, 1rem) !important;
  font-weight: 880 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-preference-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(0.72rem, 0.95vw, 0.95rem) !important;
  min-height: 0 !important;
}

html[data-active-module="profile"] .profile-preference-group {
  display: grid !important;
  grid-template-rows: auto minmax(0, auto) !important;
  align-content: start !important;
  gap: clamp(0.6rem, 0.78vw, 0.78rem) !important;
  min-width: 0 !important;
  padding: clamp(0.76rem, 0.96vw, 1rem) !important;
  border-left: 1px solid rgba(232, 197, 126, 0.18) !important;
}

html[data-active-module="profile"] .profile-preference-group-head {
  display: grid !important;
  gap: 0.22rem !important;
  min-width: 0 !important;
}

html[data-active-module="profile"] .profile-preference-group h4 {
  margin: 0 !important;
  color: rgba(255, 250, 238, 0.96) !important;
  font-size: clamp(0.98rem, 1.08vw, 1.14rem) !important;
  font-weight: 920 !important;
  line-height: 1.16 !important;
}

html[data-active-module="profile"] .profile-preference-row {
  display: grid !important;
  gap: 0.42rem !important;
  min-width: 0 !important;
}

html[data-active-module="profile"] .profile-preference-row > strong {
  color: rgba(246, 238, 218, 0.86) !important;
  font-size: clamp(0.74rem, 0.82vw, 0.86rem) !important;
  font-weight: 820 !important;
  line-height: 1.16 !important;
}

html[data-active-module="profile"] .profile-preference-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.34rem !important;
  min-width: 0 !important;
}

html[data-active-module="profile"] .profile-preference-options button {
  min-height: 2rem !important;
  min-width: 0 !important;
  padding: 0 0.62rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(226, 230, 226, 0.72) !important;
  cursor: pointer !important;
  font: inherit !important;
  font-size: clamp(0.68rem, 0.74vw, 0.78rem) !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-preference-options button:is(:hover, :focus-visible),
html[data-active-module="profile"] .profile-preference-options button.is-active {
  border-color: rgba(232, 197, 126, 0.36) !important;
  background: rgba(232, 197, 126, 0.14) !important;
  color: rgba(255, 238, 200, 0.98) !important;
  outline: 0 !important;
}

html[data-platform-font-size="large"] body {
  font-size: 17px !important;
}

html[data-platform-motion="reduced"] *,
html[data-platform-motion="reduced"] *::before,
html[data-platform-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

html[data-platform-theme="light"] body {
  color-scheme: light !important;
}

html[data-platform-image-quality="dataSaver"] img {
  image-rendering: auto !important;
}

@media (max-width: 1280px) {
  html[data-active-module="profile"] .profile-preference-grid,
  html[data-active-module="profile"] .profile-preferences-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px) {
  html[data-active-module="profile"] .profile-dashboard.profile-account-page {
    grid-template-rows: none !important;
  }

  html[data-active-module="profile"] .profile-preferences-card,
  html[data-active-module="profile"] .profile-generated-card,
  html[data-active-module="profile"] .profile-orders-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="profile"] .profile-preference-grid,
  html[data-active-module="profile"] .profile-preferences-summary {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="profile"] .profile-preference-group {
    border-top: 1px solid rgba(232, 197, 126, 0.16) !important;
    border-left: 0 !important;
  }
}

/* learning-tools-practice-hover-shadow-lock-eof-20260611-13: avoid hover tint from inherited shadows/borders. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible {
  border-color: rgba(var(--library-ref-gold-soft), 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 224, 0.07),
    inset 0 0 2.2rem rgba(var(--library-ref-gold), 0.055),
    0 1.05rem 2.45rem rgba(0, 0, 0, 0.36) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* learning-tools-click-press-feedback-eof-20260611-10: hover stays still, active feels lightly pressed. */
html[data-active-module="nav-learningTools"] .tools-entry-card:active {
  transform: translateY(1px) scale(0.995) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:active,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:active,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:active,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:active,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:active,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0.35rem 1.1rem rgba(0, 0, 0, 0.2),
    0 0.78rem 1.9rem rgba(0, 0, 0, 0.32) !important;
}

/* learning-tools-no-hover-repaint-eof-20260611-7: keep learning-tool entry cards visually unchanged on hover/click. */
html[data-active-module="nav-learningTools"] .tools-entry-card,
html[data-active-module="nav-learningTools"] .tools-entry-card *,
html[data-active-module="nav-learningTools"] .tools-entry-card::before,
html[data-active-module="nav-learningTools"] .tools-entry-card::after {
  transition: none !important;
  animation: none !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-entry-card:active {
  outline: 0 !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover,
html[data-active-module="nav-learningTools"] .tools-material-card:focus,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card:active {
  background-color: transparent !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-blend-mode: normal !important;
  color: inherit !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:active {
  background-image: url("/platform/assets/learning-card-feature-123.png?v=learning-tools-123-source-20260607-3") !important;
  filter: brightness(1.08) saturate(1.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 1.1rem 2.7rem rgba(0, 0, 0, 0.38),
    0 0 1.15rem rgba(232, 197, 126, 0.16) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:active {
  background-image: url("/platform/assets/learning-card-basic-123.png?v=learning-tools-123-source-20260607-3") !important;
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:active {
  background-image: url("/platform/assets/learning-card-posture-123.png?v=learning-tools-123-source-20260607-3") !important;
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:active {
  background-image: url("/platform/assets/learning-card-notes-123.png?v=learning-tools-123-source-20260607-3") !important;
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:active {
  background-image: url("/platform/assets/learning-card-theory-123.png?v=learning-tools-123-source-20260607-3") !important;
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover::before,
html[data-active-module="nav-learningTools"] .tools-material-card:focus::before,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-material-card:active::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  transform: none !important;
}

/* learning-tools-entry-no-click-color-20260611-1: keep home entry cards visually stable when tapped/clicked. */
html[data-active-module="nav-learningTools"] .tools-entry-card {
  -webkit-tap-highlight-color: transparent !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:focus,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card:active {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.006)),
    rgba(4, 5, 6, 0.92) !important;
  color: inherit !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.026),
    0 0.38rem 0.95rem rgba(0, 0, 0, 0.28) !important;
  outline: 0 !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:focus::after,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-material-card:active::after {
  background:
    radial-gradient(ellipse at 82% 18%, rgba(var(--library-study-gold), 0.12), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(91, 55, 24, 0.18), rgba(0, 0, 0, 0.32)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.28)) !important;
  opacity: 1 !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card:active {
  outline: 0 !important;
  transform: none !important;
}

/* learning-tools-hover-no-yellow-20260611-1: hover should not repaint learning-tool buttons/cards yellow. */
html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] button:hover,
html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] button:focus-visible,
html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card:hover,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible {
  filter: none !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card:hover,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1.05rem 2.45rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover::after,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible::after {
  background:
    linear-gradient(180deg, transparent 0%, transparent 64%, rgba(0, 0, 0, 0.10) 100%),
    radial-gradient(ellipse at 18% 86%, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.10) 36%, transparent 72%) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.04) 50%, transparent 72%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.04)) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  box-shadow: none !important;
}

/* profile-compact-account-layout-20260611-1: account, membership, generated pieces, quota and orders only. */
html[data-active-module="profile"] .content-grid[data-module="profile"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: clamp(0.8rem, 1.12vw, 1.15rem) !important;
}

html[data-active-module="profile"] .profile-dashboard.profile-account-page {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr) !important;
  grid-template-rows: minmax(10.9rem, 0.32fr) minmax(12.2rem, 0.33fr) minmax(0, 1fr) !important;
  gap: clamp(0.78rem, 1vw, 1rem) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="profile"] .profile-account-page .profile-glass-card {
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid rgba(232, 197, 126, 0.18) !important;
  border-radius: 0.55rem !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.012)),
    rgba(7, 8, 8, 0.84) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 224, 0.055),
    0 1rem 2.4rem rgba(0, 0, 0, 0.34) !important;
  overflow: hidden !important;
}

html[data-active-module="profile"] .profile-account-summary {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(16rem, 0.42fr) !important;
  align-items: center !important;
  gap: clamp(1rem, 1.5vw, 1.45rem) !important;
  padding: clamp(0.95rem, 1.35vw, 1.35rem) !important;
}

html[data-active-module="profile"] .profile-days-card {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

html[data-active-module="profile"] .profile-quota-card {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

html[data-active-module="profile"] .profile-days-card,
html[data-active-module="profile"] .profile-quota-card {
  display: grid !important;
  align-content: center !important;
  gap: 0.42rem !important;
  padding: clamp(1.05rem, 1.5vw, 1.42rem) !important;
}

html[data-active-module="profile"] .profile-days-card span,
html[data-active-module="profile"] .profile-quota-card span {
  color: rgba(246, 238, 218, 0.9) !important;
  font-size: clamp(0.94rem, 1.04vw, 1.08rem) !important;
  font-weight: 860 !important;
}

html[data-active-module="profile"] .profile-days-card strong,
html[data-active-module="profile"] .profile-quota-card strong {
  color: rgba(255, 250, 236, 0.98) !important;
  font-size: clamp(2.2rem, 4.3vw, 4.3rem) !important;
  font-weight: 940 !important;
  line-height: 0.95 !important;
}

html[data-active-module="profile"] .profile-days-card small,
html[data-active-module="profile"] .profile-quota-card small {
  color: rgba(221, 226, 224, 0.62) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.84rem) !important;
  font-weight: 720 !important;
  line-height: 1.32 !important;
}

html[data-active-module="profile"] .profile-benefits-card {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(0.72rem, 0.95vw, 0.95rem) !important;
  padding: clamp(1rem, 1.32vw, 1.28rem) !important;
}

html[data-active-module="profile"] .profile-generated-card {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

html[data-active-module="profile"] .profile-orders-card {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

html[data-active-module="profile"] .profile-generated-card,
html[data-active-module="profile"] .profile-orders-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(0.7rem, 0.95vw, 0.95rem) !important;
  padding: clamp(1rem, 1.32vw, 1.28rem) !important;
}

html[data-active-module="profile"] .profile-avatar-mark {
  display: grid !important;
  width: clamp(4.45rem, 5.8vw, 5.85rem) !important;
  height: clamp(4.45rem, 5.8vw, 5.85rem) !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(232, 197, 126, 0.32) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 246, 224, 0.28), transparent 36%),
    rgba(232, 197, 126, 0.12) !important;
  color: rgba(255, 241, 214, 0.98) !important;
  font-size: clamp(1.9rem, 3vw, 2.8rem) !important;
  font-weight: 940 !important;
}

html[data-active-module="profile"] .profile-avatar-mark img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html[data-active-module="profile"] .profile-account-copy h3 {
  margin: 0 !important;
  color: rgba(255, 250, 238, 0.98) !important;
  font-size: clamp(2.05rem, 3.95vw, 4.25rem) !important;
  font-weight: 940 !important;
  line-height: 0.96 !important;
}

html[data-active-module="profile"] .profile-status-panel {
  display: grid !important;
  gap: 0.45rem !important;
  padding: clamp(0.78rem, 1vw, 1rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 0.5rem !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="profile"] .profile-status-panel span {
  color: rgba(232, 197, 126, 0.9) !important;
  font-size: clamp(0.66rem, 0.76vw, 0.78rem) !important;
  font-weight: 860 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .profile-status-panel strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 250, 238, 0.96) !important;
  font-size: clamp(0.96rem, 1.12vw, 1.16rem) !important;
  font-weight: 900 !important;
  line-height: 1.16 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-status-panel p {
  display: -webkit-box !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  color: rgba(221, 226, 224, 0.68) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.84rem) !important;
  font-weight: 720 !important;
  line-height: 1.32 !important;
}

html[data-active-module="profile"] .profile-card-head {
  display: flex !important;
  align-items: start !important;
  justify-content: space-between !important;
  gap: 0.8rem !important;
}

html[data-active-module="profile"] .profile-card-head h3 {
  margin: 0 !important;
  color: rgba(255, 250, 238, 0.96) !important;
  font-size: clamp(1.05rem, 1.22vw, 1.28rem) !important;
  font-weight: 920 !important;
}

html[data-active-module="profile"] .profile-benefit-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  gap: clamp(0.58rem, 0.78vw, 0.82rem) !important;
  height: auto !important;
  min-height: 0 !important;
}

html[data-active-module="profile"] .profile-benefit-grid.is-empty {
  grid-template-columns: 1fr !important;
}

html[data-active-module="profile"] .profile-benefit-grid span,
html[data-active-module="profile"] .profile-generated-item,
html[data-active-module="profile"] .profile-order-item,
html[data-active-module="profile"] .profile-order-empty,
html[data-active-module="profile"] .profile-empty-state {
  display: grid !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 0.28rem !important;
  padding: clamp(0.72rem, 0.92vw, 0.95rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 0.5rem !important;
  background: rgba(255, 255, 255, 0.038) !important;
  box-shadow: none !important;
}

html[data-active-module="profile"] .profile-generated-list,
html[data-active-module="profile"] .profile-order-list {
  display: grid !important;
  gap: clamp(0.54rem, 0.72vw, 0.72rem) !important;
  min-height: 0 !important;
  overflow: auto !important;
}

html[data-active-module="profile"] .profile-generated-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
}

html[data-active-module="profile"] .profile-generated-list.is-empty {
  grid-template-columns: 1fr !important;
}

html[data-active-module="profile"] .profile-generated-item {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

html[data-active-module="profile"] .profile-generated-item b,
html[data-active-module="profile"] .profile-order-item b {
  justify-self: start !important;
  padding: 0.14rem 0.42rem !important;
  border-radius: 999px !important;
  background: rgba(232, 197, 126, 0.11) !important;
  color: rgba(255, 232, 178, 0.94) !important;
  font-size: clamp(0.58rem, 0.68vw, 0.7rem) !important;
  font-weight: 860 !important;
  line-height: 1 !important;
}

html[data-active-module="profile"] .profile-generated-item strong,
html[data-active-module="profile"] .profile-order-item strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(246, 238, 218, 0.94) !important;
  font-size: clamp(0.88rem, 1vw, 1rem) !important;
  font-weight: 860 !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-generated-item small,
html[data-active-module="profile"] .profile-order-item small,
html[data-active-module="profile"] .profile-order-item em,
html[data-active-module="profile"] .profile-empty-state p,
html[data-active-module="profile"] .profile-order-empty p {
  margin: 0 !important;
  color: rgba(221, 226, 224, 0.62) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.8rem) !important;
  font-style: normal !important;
  font-weight: 720 !important;
  line-height: 1.3 !important;
}

html[data-active-module="profile"] .profile-generated-item a,
html[data-active-module="profile"] .profile-generated-item button {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  align-self: center !important;
  min-height: 2.18rem !important;
  padding: 0 0.72rem !important;
  border: 1px solid rgba(232, 197, 126, 0.22) !important;
  border-radius: 999px !important;
  background: rgba(232, 197, 126, 0.1) !important;
  color: rgba(255, 232, 178, 0.94) !important;
  font: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 860 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-order-item {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

html[data-active-module="profile"] .profile-order-item b {
  justify-self: end !important;
}

html[data-active-module="profile"] .profile-order-item b.is-paid {
  background: rgba(72, 189, 133, 0.13) !important;
  color: rgba(187, 248, 215, 0.92) !important;
}

html[data-active-module="profile"] .profile-order-item b.is-muted {
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(224, 224, 220, 0.66) !important;
}

html[data-active-module="profile"] .profile-order-empty,
html[data-active-module="profile"] .profile-empty-state {
  align-content: center !important;
  height: 100% !important;
}

html[data-active-module="profile"] .profile-order-empty strong,
html[data-active-module="profile"] .profile-empty-state strong {
  color: rgba(255, 250, 238, 0.92) !important;
  font-size: clamp(0.95rem, 1.05vw, 1.08rem) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="profile"] .content-grid[data-module="profile"] {
    overflow: auto !important;
  }

  html[data-active-module="profile"] .profile-dashboard.profile-account-page {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

  html[data-active-module="profile"] .profile-account-summary,
  html[data-active-module="profile"] .profile-days-card,
  html[data-active-module="profile"] .profile-quota-card,
  html[data-active-module="profile"] .profile-benefits-card,
  html[data-active-module="profile"] .profile-generated-card,
  html[data-active-module="profile"] .profile-orders-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  html[data-active-module="profile"] .profile-account-summary,
  html[data-active-module="profile"] .profile-benefit-grid,
  html[data-active-module="profile"] .profile-generated-list {
    grid-template-columns: 1fr !important;
  }
}


/* membership-guest-accessibility-css-consolidation-20260608-1: guest state, keyboard affordance, and consolidated low-risk profile empty styling. */
html[data-active-module="membership"] .membership-reference-layout .membership-showcase-card[data-membership-card-checkout]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--membership-accent) 58%, rgba(255, 255, 255, 0.72)) !important;
  outline-offset: 3px !important;
}

html[data-active-module="profile"] .profile-benefit-grid.is-empty {
  grid-template-columns: 1fr !important;
}

html[data-active-module="profile"] .profile-benefit-grid .profile-benefit-empty {
  min-height: clamp(7.8rem, 9vw, 9.2rem) !important;
  border-style: dashed !important;
  border-color: rgba(232, 197, 126, 0.22) !important;
  background: linear-gradient(135deg, rgba(232, 197, 126, 0.06), rgba(255, 255, 255, 0.018)), rgba(7, 8, 8, 0.68) !important;
}

html[data-active-module="profile"] .profile-benefit-grid .profile-benefit-empty b {
  color: rgba(255, 232, 178, 0.95) !important;
  background: rgba(232, 197, 126, 0.12) !important;
}

html[data-active-module="profile"] .profile-benefit-grid .profile-benefit-empty strong {
  color: rgba(255, 238, 205, 0.96) !important;
}

html[data-active-module="profile"] .profile-benefit-grid .profile-benefit-empty small {
  max-width: 34rem !important;
}

/* library-row-lines-soften-20260608-1: quiet the restored score-library list by removing stacked hairline dividers. */
html[data-active-module="nav-library"] .library-list-panel {
  --library-row-muted-fill: rgba(255, 255, 255, 0.012);
  --library-row-locked-fill: rgba(232, 197, 126, 0.045);
}

html[data-active-module="nav-library"] .library-table-head {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-track-table {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-track-row {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-track-row:nth-child(even) {
  background: var(--library-row-muted-fill) !important;
}

html[data-active-module="nav-library"] .library-track-row.is-detail-active {
  border: 0 !important;
  background: linear-gradient(90deg, rgba(232, 197, 126, 0.085), rgba(255, 255, 255, 0.018)) !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-track-row.is-member-locked {
  border: 0 !important;
  background: linear-gradient(90deg, var(--library-row-locked-fill), rgba(255, 255, 255, 0.012)) !important;
  box-shadow: none !important;
}

/* library-title-lines-clear-20260608-1: remove residual title-column hairlines from the score-library rows. */
html[data-active-module="nav-library"] .library-track-title,
html[data-active-module="nav-library"] .library-row-title-button,
html[data-active-module="nav-library"] .library-row-title-button strong,
html[data-active-module="nav-library"] .library-row-pills {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

html[data-active-module="nav-library"] .library-row-title-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}

html[data-active-module="nav-library"] .library-track-title::before,
html[data-active-module="nav-library"] .library-track-title::after,
html[data-active-module="nav-library"] .library-row-title-button::before,
html[data-active-module="nav-library"] .library-row-title-button::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* library-row-click-area-20260608-1: make the whole song row a comfortable detail click target. */
html[data-active-module="nav-library"] .library-track-row {
  cursor: pointer !important;
  transition: background 150ms ease, filter 150ms ease !important;
}

html[data-active-module="nav-library"] .library-track-row:not(.is-detail-active):hover {
  background: linear-gradient(90deg, rgba(232, 197, 126, 0.07), rgba(255, 255, 255, 0.018) 54%, transparent 100%) !important;
}

html[data-active-module="nav-library"] .library-track-row:nth-child(even):not(.is-detail-active):hover {
  background: linear-gradient(90deg, rgba(232, 197, 126, 0.075), rgba(255, 255, 255, 0.022) 54%, transparent 100%) !important;
}

html[data-active-module="nav-library"] .library-track-row.is-member-locked:not(.is-detail-active):hover {
  background: linear-gradient(90deg, rgba(232, 197, 126, 0.08), rgba(255, 255, 255, 0.018) 58%, transparent 100%) !important;
}

html[data-active-module="nav-library"] .library-row-title-button,
html[data-active-module="nav-library"] .library-row-favorite,
html[data-active-module="nav-library"] .library-row-detail,
html[data-active-module="nav-library"] .library-row-play {
  cursor: pointer !important;
}

html[data-active-module="nav-library"] .library-row-play[disabled] {
  cursor: default !important;
}

/* library-detail-one-screen-20260608-1: fit the score detail drawer into one visible screen and remove tag clutter. */
html[data-active-module="nav-library"] .library-detail-drawer {
  top: clamp(0.52rem, 0.74vw, 0.72rem) !important;
  right: clamp(0.52rem, 0.74vw, 0.72rem) !important;
  width: min(29.5rem, calc(100% - 1.04rem)) !important;
  height: calc(100% - clamp(1.04rem, 1.48vw, 1.44rem)) !important;
  max-height: none !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-detail-close {
  position: absolute !important;
  top: clamp(0.66rem, 0.82vw, 0.82rem) !important;
  right: clamp(0.66rem, 0.82vw, 0.82rem) !important;
  left: auto !important;
  width: 2rem !important;
  height: 2rem !important;
  margin: 0 !important;
}

html[data-active-module="nav-library"] .library-detail-drawer .score-library-detail-panel {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: clamp(0.58rem, 0.72vw, 0.74rem) !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(0.88rem, 1.08vw, 1.06rem) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html[data-active-module="nav-library"] .score-library-detail-intro {
  gap: clamp(0.36rem, 0.48vw, 0.5rem) !important;
  padding: 0.05rem 2.7rem 0 0 !important;
}

html[data-active-module="nav-library"] .score-library-detail-intro .eyebrow {
  font-size: 0.68rem !important;
  letter-spacing: 0 !important;
}

html[data-active-module="nav-library"] .score-library-detail-intro h3 {
  font-size: clamp(1.24rem, 1.55vw, 1.48rem) !important;
  line-height: 1.08 !important;
}

html[data-active-module="nav-library"] .score-library-detail-intro p {
  padding: clamp(0.56rem, 0.72vw, 0.7rem) clamp(0.66rem, 0.82vw, 0.82rem) !important;
  font-size: clamp(0.74rem, 0.82vw, 0.82rem) !important;
  line-height: 1.5 !important;
}

html[data-active-module="nav-library"] .score-library-detail-stats {
  gap: clamp(0.46rem, 0.56vw, 0.58rem) !important;
}

html[data-active-module="nav-library"] .score-library-detail-stats > div {
  min-height: clamp(3.34rem, 4vw, 3.82rem) !important;
  padding: clamp(0.5rem, 0.62vw, 0.62rem) !important;
}

html[data-active-module="nav-library"] .score-library-detail-stats dt {
  font-size: 0.64rem !important;
}

html[data-active-module="nav-library"] .score-library-detail-stats dd {
  margin-top: 0.16rem !important;
  font-size: clamp(0.78rem, 0.88vw, 0.88rem) !important;
  line-height: 1.22 !important;
}

html[data-active-module="nav-library"] .library-member-value,
html[data-active-module="nav-library"] .library-detail-tags,
html[data-active-module="nav-library"] .library-detail-quality {
  display: none !important;
}

html[data-active-module="nav-library"] .score-library-route {
  align-self: stretch !important;
  display: grid !important;
  align-content: start !important;
  gap: clamp(0.34rem, 0.44vw, 0.46rem) !important;
  min-height: 0 !important;
  padding: clamp(0.5rem, 0.62vw, 0.64rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .score-library-route span {
  min-height: clamp(2.42rem, 3vw, 2.86rem) !important;
  padding: 0.42rem 0.56rem !important;
  font-size: clamp(0.72rem, 0.8vw, 0.8rem) !important;
  line-height: 1.25 !important;
}

html[data-active-module="nav-library"] .score-library-route b {
  width: 1.38rem !important;
  height: 1.38rem !important;
  min-width: 1.38rem !important;
}

html[data-active-module="nav-library"] .score-library-detail-actions {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 0.78fr) minmax(0, 1fr) !important;
  gap: clamp(0.4rem, 0.5vw, 0.52rem) !important;
  padding-top: 0 !important;
}

html[data-active-module="nav-library"] .score-library-detail-actions :is(a, button) {
  min-height: clamp(2.16rem, 2.5vw, 2.38rem) !important;
  border-radius: 0.58rem !important;
  font-size: clamp(0.72rem, 0.78vw, 0.8rem) !important;
}

@media (max-height: 760px) and (min-width: 981px) {
  html[data-active-module="nav-library"] .score-library-detail-intro p {
    display: none !important;
  }

  html[data-active-module="nav-library"] .library-detail-drawer .score-library-detail-panel {
    gap: 0.5rem !important;
  }
}

/* library-row-title-inner-frame-clean-20260608-1: keep only the whole-row click highlight, never the inner title-button strip. */
html[data-active-module="nav-library"] .library-track-row .library-row-title-button,
html[data-active-module="nav-library"] .library-track-row .library-row-title-button:hover,
html[data-active-module="nav-library"] .library-track-row .library-row-title-button:focus,
html[data-active-module="nav-library"] .library-track-row .library-row-title-button:focus-visible,
html[data-active-module="nav-library"] .library-track-row .library-row-title-button:active {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

html[data-active-module="nav-library"] .library-track-row .library-row-title-button strong,
html[data-active-module="nav-library"] .library-track-row .library-row-title-button:hover strong,
html[data-active-module="nav-library"] .library-track-row .library-row-title-button:focus strong,
html[data-active-module="nav-library"] .library-track-row .library-row-title-button:focus-visible strong,
html[data-active-module="nav-library"] .library-track-row .library-row-title-button:active strong {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

/* membership-benefit-label-unified-20260608-1: every comparison benefit is important; keep labels one color. */
html[data-active-module="membership"] .membership-reference-row .membership-reference-feature,
html[data-active-module="membership"] .membership-reference-row.is-common-benefit .membership-reference-feature,
html[data-active-module="membership"] .membership-reference-row.is-key-benefit .membership-reference-feature {
  color: rgba(255, 232, 178, 0.94) !important;
  font-weight: 760 !important;
}

/* library-row-title-plain-20260608-1: title text is no longer an inner button; selected rows only use the whole-row surface. */
html[data-active-module="nav-library"] .library-track-row .library-track-title,
html[data-active-module="nav-library"] .library-track-row.is-detail-active .library-track-title,
html[data-active-module="nav-library"] .library-track-row:hover .library-track-title,
html[data-active-module="nav-library"] .library-track-row .library-track-title strong,
html[data-active-module="nav-library"] .library-track-row.is-detail-active .library-track-title strong,
html[data-active-module="nav-library"] .library-track-row:hover .library-track-title strong {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}


/* library-series-soft-active-20260608-1: selected collection cards use light and depth, not a drawn border. */
html[data-active-module="nav-library"] .library-series-card,
html[data-active-module="nav-library"] .library-series-card:hover,
html[data-active-module="nav-library"] .library-series-card:focus,
html[data-active-module="nav-library"] .library-series-card:focus-visible,
html[data-active-module="nav-library"] .library-series-card:active {
  outline: 0 !important;
}

html[data-active-module="nav-library"] .library-series-card.is-active,
html[data-active-module="nav-library"] .library-series-card.is-active:hover,
html[data-active-module="nav-library"] .library-series-card.is-active:focus,
html[data-active-module="nav-library"] .library-series-card.is-active:focus-visible,
html[data-active-module="nav-library"] .library-series-card.is-active:active {
  border-color: transparent !important;
  filter: brightness(1.14) saturate(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1.1rem 1.8rem rgba(255, 224, 170, 0.1),
    inset 0 -1.25rem 1.7rem rgba(184, 128, 55, 0.16),
    inset 0 0 2.2rem rgba(255, 216, 147, 0.09),
    0 0.92rem 2rem rgba(0, 0, 0, 0.34),
    0 0 1.35rem rgba(232, 184, 111, 0.18) !important;
}

html[data-active-module="nav-library"] .library-series-card.is-active::before {
  transform: scale(1.045) !important;
  filter: contrast(1.05) saturate(1.08) !important;
}

html[data-active-module="nav-library"] .library-series-card.is-active::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 0.58rem 0.42rem !important;
  z-index: 0 !important;
  width: auto !important;
  height: 0.2rem !important;
  border-radius: 999px !important;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 232, 181, 0.86), rgba(232, 184, 111, 0.42) 48%, transparent 76%) !important;
  box-shadow:
    0 -0.25rem 1rem rgba(232, 184, 111, 0.2),
    0 0.18rem 0.6rem rgba(0, 0, 0, 0.34) !important;
  pointer-events: none !important;
}

html[data-active-module="nav-library"] .library-series-card.is-active .library-series-selected {
  border-color: transparent !important;
  background:
    linear-gradient(180deg, rgba(255, 229, 177, 0.34), rgba(184, 128, 55, 0.18)),
    rgba(18, 14, 10, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0.42rem 0.88rem rgba(0, 0, 0, 0.28),
    0 0 0.72rem rgba(232, 184, 111, 0.18) !important;
}

/* ai-generate-card-lift-20260608-1: raise the three generate modules so the workbench does not sit too low. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference {
  transform: translateY(clamp(14px, 3.4vh, 36px)) !important;
}

@media (max-height: 760px) and (min-width: 760px) {
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference {
    transform: translateY(clamp(2px, 1.8vh, 16px)) !important;
  }
}

@media (max-height: 640px) and (min-width: 760px) {
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference {
    transform: translateY(0) !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference {
    transform: translateY(clamp(0px, 2.4vw, 12px)) !important;
  }
}


/* library-filter-chip-grid-20260608-1: keep all three filter groups visible with a compact chip grid. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: clamp(0.52rem, 0.72vw, 0.76rem) !important;
  padding: clamp(0.72rem, 0.92vw, 0.94rem) clamp(0.6rem, 0.78vw, 0.78rem) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail::-webkit-scrollbar {
  display: none !important;
}

html[data-active-module="nav-library"] .library-filter-section {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: clamp(0.28rem, 0.38vw, 0.4rem) !important;
}

html[data-active-module="nav-library"] .library-filter-title {
  margin: 0 !important;
  padding: 0 clamp(0.1rem, 0.2vw, 0.22rem) !important;
  color: rgba(255, 232, 187, 0.94) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.82rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
}

html[data-active-module="nav-library"] .library-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: clamp(0.26rem, 0.34vw, 0.36rem) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-training="all"] {
  grid-column: 1 / -1 !important;
}

html[data-active-module="nav-library"] .library-filter-grid button,
html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-training="all"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: clamp(1.56rem, 2vw, 1.78rem) !important;
  min-height: clamp(1.56rem, 2vw, 1.78rem) !important;
  max-height: clamp(1.56rem, 2vw, 1.78rem) !important;
  padding: 0 clamp(0.28rem, 0.42vw, 0.46rem) !important;
  border-radius: 0.42rem !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.018)),
    rgba(23, 24, 24, 0.74) !important;
  color: rgba(239, 237, 231, 0.86) !important;
  font-size: clamp(0.7rem, 0.78vw, 0.8rem) !important;
  font-weight: 790 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button:hover,
html[data-active-module="nav-library"] .library-filter-grid button.is-active {
  border-color: transparent !important;
  background:
    linear-gradient(100deg, rgba(106, 73, 38, 0.9), rgba(226, 184, 121, 0.78) 50%, rgba(95, 64, 34, 0.88)),
    rgba(var(--library-ref-gold), 0.22) !important;
  color: rgba(255, 246, 229, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 221, 0.25),
    0 0.34rem 0.88rem rgba(0, 0, 0, 0.18),
    0 0 0.8rem rgba(var(--library-ref-gold), 0.12) !important;
}

@media (max-height: 760px) and (min-width: 901px) {
  html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
    gap: clamp(0.34rem, 0.58dvh, 0.48rem) !important;
    padding-block: clamp(0.52rem, 0.86dvh, 0.68rem) !important;
  }

  html[data-active-module="nav-library"] .library-filter-section {
    gap: 0.24rem !important;
  }

  html[data-active-module="nav-library"] .library-filter-title {
    font-size: 0.68rem !important;
  }

  html[data-active-module="nav-library"] .library-filter-grid {
    gap: 0.2rem !important;
  }

  html[data-active-module="nav-library"] .library-filter-grid button,
  html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
  html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"],
  html[data-active-module="nav-library"] .library-filter-grid button[data-library-training="all"] {
    height: 1.36rem !important;
    min-height: 1.36rem !important;
    max-height: 1.36rem !important;
    font-size: 0.66rem !important;
  }
}


/* library-filter-chip-grid-20260608-2: clear old fixed row tracks so groups sit together naturally. */
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(1) .library-filter-grid,
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(2) .library-filter-grid,
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(3) .library-filter-grid,
html[data-active-module="nav-library"] .library-filter-grid {
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  justify-content: stretch !important;
}

html[data-active-module="nav-library"] .library-filter-section,
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(1),
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(2),
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(3) {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  align-content: start !important;
  justify-content: flex-start !important;
  row-gap: clamp(0.6rem, 0.82vw, 0.84rem) !important;
}

/* ai-generate-luxury-cards-20260608-1: remove crop seams and give all three generate modules a jewel-gold finish. */
html[data-active-module="nav-generate"] .generate-reference-hotspot,
html[data-active-module="nav-generate"] .generate-reference-hotspot.is-disabled,
html[data-active-module="nav-generate"] .generate-reference-hotspot.has-file {
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-hotspot > img {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-active-module="nav-generate"] .generate-reference-card {
  --generate-lux-accent: 255, 205, 112;
  --generate-lux-jewel: 220, 154, 68;
  isolation: isolate !important;
  border: 0 !important;
  border-radius: clamp(0.92rem, 1vw, 1.08rem) !important;
  background: #090705 !important;
  box-shadow:
    0 1.35rem 3.2rem rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 226, 172, 0.08),
    0 0 2.1rem rgba(var(--generate-lux-accent), 0.16),
    0 0.18rem 1.4rem rgba(var(--generate-lux-jewel), 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045) !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-editor {
  --generate-lux-accent: 166, 212, 255;
  --generate-lux-jewel: 74, 146, 210;
}

html[data-active-module="nav-generate"] .generate-reference-card-inspiration {
  --generate-lux-accent: 232, 176, 255;
  --generate-lux-jewel: 180, 95, 255;
}

html[data-active-module="nav-generate"] .generate-reference-card img {
  width: 100% !important;
  max-width: none !important;
  border-radius: inherit !important;
  clip-path: inset(1px 1.8px 1px 1.8px round clamp(0.88rem, 0.98vw, 1.04rem)) !important;
  filter: brightness(1.08) contrast(1.045) saturate(1.22) !important;
  transform: scale(1.007) !important;
  transform-origin: center !important;
}

html[data-active-module="nav-generate"] .generate-reference-card::before,
html[data-active-module="nav-generate"] .generate-reference-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card::before {
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.36) 0%, transparent 4.6%, transparent 95.4%, rgba(5, 5, 5, 0.36) 100%),
    linear-gradient(112deg, transparent 0%, transparent 34%, rgba(255, 251, 226, 0.24) 43%, rgba(var(--generate-lux-accent), 0.2) 48%, transparent 57%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 239, 196, 0.18), transparent 46%),
    radial-gradient(ellipse at 50% 100%, rgba(var(--generate-lux-jewel), 0.18), transparent 58%);
  mix-blend-mode: screen !important;
  opacity: 0.9 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card::after {
  inset: 1px !important;
  background:
    linear-gradient(135deg, rgba(255, 244, 210, 0.34), transparent 18%, transparent 78%, rgba(var(--generate-lux-accent), 0.24)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 16%, transparent 84%, rgba(255, 204, 112, 0.08));
  box-shadow:
    inset 0 0 1.1rem rgba(255, 240, 198, 0.075),
    inset 0 -1.25rem 2.6rem rgba(var(--generate-lux-jewel), 0.16) !important;
  opacity: 0.86 !important;
}

html[data-active-module="nav-generate"] button.generate-reference-card:hover {
  box-shadow:
    0 1.55rem 3.65rem rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 232, 184, 0.12),
    0 0 2.8rem rgba(var(--generate-lux-accent), 0.26),
    0 0.24rem 1.7rem rgba(var(--generate-lux-jewel), 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.065) !important;
}

html[data-active-module="nav-generate"] button.generate-reference-card:hover img {
  filter: brightness(1.12) contrast(1.06) saturate(1.28) !important;
}


/* library-polish-1345-20260608-1: lighter filters, refined table labels, quieter more card, compact pager. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  border-color: rgba(var(--library-ref-line), 0.07) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
    rgba(13, 14, 13, 0.54) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 1rem 2.6rem rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="nav-library"] .library-filter-title {
  color: rgba(255, 229, 185, 0.86) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.78rem) !important;
  font-weight: 880 !important;
}

html[data-active-module="nav-library"] .library-filter-grid button,
html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-training="all"] {
  border-color: rgba(255, 255, 255, 0.045) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
    rgba(18, 19, 19, 0.54) !important;
  color: rgba(232, 231, 224, 0.68) !important;
  font-weight: 760 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    filter 150ms ease !important;
}

html[data-active-module="nav-library"] .library-filter-grid button:not(.is-active):hover {
  border-color: rgba(var(--library-ref-gold-soft), 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 235, 190, 0.06), rgba(255, 255, 255, 0.014)),
    rgba(24, 24, 22, 0.68) !important;
  color: rgba(244, 239, 229, 0.86) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button.is-active {
  border-color: transparent !important;
  background:
    linear-gradient(100deg, rgba(112, 79, 43, 0.92), rgba(226, 185, 124, 0.76) 48%, rgba(93, 64, 35, 0.88)),
    rgba(var(--library-ref-gold), 0.2) !important;
  color: rgba(255, 247, 231, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 221, 0.22),
    0 0.32rem 0.78rem rgba(0, 0, 0, 0.16),
    0 0 0.7rem rgba(var(--library-ref-gold), 0.12) !important;
}

html[data-active-module="nav-library"] .library-table-head {
  min-height: clamp(1.34rem, 1.68vw, 1.58rem) !important;
  margin-top: clamp(0.46rem, 0.62vw, 0.6rem) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(223, 219, 207, 0.42) !important;
}

html[data-active-module="nav-library"] .library-table-head > span {
  display: inline-flex !important;
  align-items: center !important;
  color: rgba(223, 219, 207, 0.42) !important;
  font-size: clamp(0.62rem, 0.72vw, 0.7rem) !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

html[data-active-module="nav-library"] .library-table-head > span:nth-child(n + 3) {
  justify-content: center !important;
  min-height: 1.2rem !important;
  border-radius: 999px !important;
  color: rgba(224, 221, 211, 0.38) !important;
}

html[data-active-module="nav-library"] .library-table-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: clamp(0.42rem, 0.56vw, 0.56rem) !important;
  color: rgba(255, 233, 190, 0.96) !important;
  font-size: clamp(0.9rem, 1.02vw, 1rem) !important;
  font-weight: 900 !important;
}

html[data-active-module="nav-library"] .library-table-title::before {
  content: "" !important;
  display: inline-block !important;
  width: 0.22rem !important;
  height: 1.05rem !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255, 232, 181, 0.96), rgba(184, 130, 51, 0.78)) !important;
  box-shadow: 0 0 0.58rem rgba(232, 184, 111, 0.18) !important;
}

html[data-active-module="nav-library"] .library-table-title em {
  min-height: 1.08rem !important;
  padding: 0.08rem 0.42rem !important;
  border-color: transparent !important;
  background: rgba(232, 184, 111, 0.12) !important;
  color: rgba(255, 230, 182, 0.9) !important;
  font-size: clamp(0.58rem, 0.66vw, 0.64rem) !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-table-title small {
  color: rgba(223, 219, 207, 0.42) !important;
  font-size: clamp(0.58rem, 0.66vw, 0.64rem) !important;
  font-weight: 760 !important;
}

html[data-active-module="nav-library"] .library-series-more-card {
  border-style: solid !important;
  border-color: rgba(var(--library-ref-gold-soft), 0.18) !important;
  background:
    linear-gradient(135deg, rgba(255, 230, 181, 0.07), rgba(0, 0, 0, 0.12) 48%, rgba(255, 255, 255, 0.025)),
    rgba(13, 11, 8, 0.54) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0 1.4rem rgba(232, 184, 111, 0.07) !important;
}

html[data-active-module="nav-library"] .library-series-more-card:hover {
  border-color: rgba(var(--library-ref-gold-soft), 0.26) !important;
  filter: brightness(1.08) saturate(1.04) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 1.6rem rgba(232, 184, 111, 0.1),
    0 0.7rem 1.5rem rgba(0, 0, 0, 0.2) !important;
}

html[data-active-module="nav-library"] .library-series-more-card strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.24rem !important;
}

html[data-active-module="nav-library"] .library-series-more-card strong::after {
  content: "›" !important;
  display: inline-grid !important;
  width: 1.08rem !important;
  height: 1.08rem !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255, 232, 181, 0.12) !important;
  color: rgba(255, 232, 181, 0.84) !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;
}

html[data-active-module="nav-library"] .library-series-more-card small {
  color: rgba(255, 227, 178, 0.66) !important;
}

html[data-active-module="nav-library"] .library-pagination {
  justify-self: end !important;
  align-self: center !important;
  margin: clamp(0.18rem, 0.32vw, 0.34rem) clamp(0.34rem, 0.52vw, 0.56rem) 0 auto !important;
  padding: 0.1rem 0.18rem !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.018) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.028),
    0 0.45rem 1rem rgba(0, 0, 0, 0.16) !important;
  opacity: 0.76 !important;
  transform: none !important;
  transition: opacity 150ms ease, background 150ms ease !important;
}

html[data-active-module="nav-library"] .library-pagination:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.026) !important;
}

html[data-active-module="nav-library"] .library-pagination-dots {
  gap: 0.12rem !important;
}

html[data-active-module="nav-library"] .library-pagination button.library-pagination-arrow {
  width: 1.36rem !important;
  height: 1.36rem !important;
  min-width: 1.36rem !important;
  min-height: 1.36rem !important;
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(232, 225, 211, 0.58) !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-pagination button.library-pagination-page {
  width: 1rem !important;
  min-width: 1rem !important;
  height: 1rem !important;
  min-height: 1rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-pagination button.library-pagination-page span,
html[data-active-module="nav-library"] .library-pagination button.library-pagination-page.is-active span {
  display: block !important;
  width: 0.32rem !important;
  height: 0.32rem !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(236, 228, 211, 0.34) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-pagination button.library-pagination-page.is-active span {
  width: 0.92rem !important;
  height: 0.26rem !important;
  background: linear-gradient(90deg, rgba(255, 232, 181, 0.96), rgba(184, 130, 51, 0.9)) !important;
  box-shadow: 0 0 0.54rem rgba(232, 184, 111, 0.2) !important;
}

html[data-active-module="nav-library"] .library-pagination-ellipsis {
  min-width: 0.62rem !important;
  color: rgba(226, 224, 216, 0.3) !important;
  font-size: 0.62rem !important;
}

/* ai-generate-hover-cards-20260608-1: replace the previous luxury treatment with clean hover lift. */
html[data-active-module="nav-generate"] .generate-reference-hotspot,
html[data-active-module="nav-generate"] .generate-reference-hotspot.is-disabled,
html[data-active-module="nav-generate"] .generate-reference-hotspot.has-file {
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-hotspot > img {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-active-module="nav-generate"] .generate-reference-card {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow:
    0 0.92rem 2.2rem rgba(0, 0, 0, 0.28),
    0 0 1.15rem rgba(255, 214, 145, 0.07) !important;
  filter: none !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition:
    transform 220ms cubic-bezier(0.2, 0.72, 0.24, 1),
    box-shadow 220ms ease,
    filter 220ms ease !important;
  will-change: transform, box-shadow, filter !important;
}

html[data-active-module="nav-generate"] .generate-reference-card::before,
html[data-active-module="nav-generate"] .generate-reference-card::after {
  content: none !important;
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card img {
  clip-path: inset(2px 6px 2px 6px round clamp(0.86rem, 0.96vw, 1.02rem)) !important;
  filter: none !important;
  transform: scale(1.018) !important;
  transform-origin: center !important;
}

html[data-active-module="nav-generate"] button.generate-reference-card:hover,
html[data-active-module="nav-generate"] button.generate-reference-card:focus-visible {
  box-shadow:
    0 1.55rem 3.15rem rgba(0, 0, 0, 0.42),
    0 0.24rem 1.35rem rgba(232, 184, 111, 0.16),
    0 0 1.4rem rgba(255, 230, 176, 0.12) !important;
  filter: brightness(1.035) saturate(1.055) !important;
  transform: translate3d(0, -12px, 0) scale(1.018) !important;
}

html[data-active-module="nav-generate"] button.generate-reference-card:active {
  box-shadow:
    0 0.75rem 1.7rem rgba(0, 0, 0, 0.34),
    0 0 0.8rem rgba(255, 230, 176, 0.08) !important;
  transform: translate3d(0, -4px, 0) scale(1.008) !important;
  transition-duration: 120ms !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-active-module="nav-generate"] .generate-reference-card {
    transition: box-shadow 160ms ease, filter 160ms ease !important;
  }

  html[data-active-module="nav-generate"] button.generate-reference-card:hover,
  html[data-active-module="nav-generate"] button.generate-reference-card:focus-visible,
  html[data-active-module="nav-generate"] button.generate-reference-card:active {
    transform: none !important;
  }
}

/* ai-generate-hover-cards-20260608-2: make transparent action zones lift the matching visual card too. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-submit:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-editor:hover) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-inspiration:hover) .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:focus-visible) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-submit:focus-visible) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-editor:focus-visible) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-inspiration:focus-visible) .generate-reference-card-inspiration {
  box-shadow:
    0 1.55rem 3.15rem rgba(0, 0, 0, 0.42),
    0 0.24rem 1.35rem rgba(232, 184, 111, 0.16),
    0 0 1.4rem rgba(255, 230, 176, 0.12) !important;
  filter: brightness(1.035) saturate(1.055) !important;
  transform: translate3d(0, -12px, 0) scale(1.018) !important;
}


/* library-polish-1345-20260608-2: final tuck for the more/collapse card and right-side pager. */
html[data-active-module="nav-library"] .library-series-more-card,
html[data-active-module="nav-library"] .library-series-more-card.is-collapse {
  border-style: solid !important;
  border-color: rgba(var(--library-ref-gold-soft), 0.12) !important;
  background:
    linear-gradient(135deg, rgba(255, 230, 181, 0.055), rgba(0, 0, 0, 0.16) 52%, rgba(255, 255, 255, 0.018)),
    rgba(11, 10, 8, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 1.1rem rgba(232, 184, 111, 0.045) !important;
}

html[data-active-module="nav-library"] .library-series-more-card:hover,
html[data-active-module="nav-library"] .library-series-more-card.is-collapse:hover {
  border-color: rgba(var(--library-ref-gold-soft), 0.2) !important;
  background:
    linear-gradient(135deg, rgba(255, 230, 181, 0.08), rgba(0, 0, 0, 0.14) 52%, rgba(255, 255, 255, 0.024)),
    rgba(13, 11, 8, 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0 1.25rem rgba(232, 184, 111, 0.065),
    0 0.55rem 1.15rem rgba(0, 0, 0, 0.16) !important;
}

html[data-active-module="nav-library"] .library-series-more-card.is-collapse strong::after {
  content: "^" !important;
  font-size: 0.74rem !important;
}

html[data-active-module="nav-library"] .library-series-more-card.is-collapse small {
  opacity: 0.68 !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  justify-items: stretch !important;
}

html[data-active-module="nav-library"] .library-pagination {
  display: flex !important;
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  align-self: center !important;
  width: auto !important;
  max-width: none !important;
  margin: clamp(0.14rem, 0.24vw, 0.26rem) 0 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}

html[data-active-module="nav-library"] .library-pagination::before {
  content: "" !important;
  flex: 1 1 auto !important;
}

html[data-active-module="nav-library"] .library-pagination > .library-pagination-arrow:first-child,
html[data-active-module="nav-library"] .library-pagination > .library-pagination-dots,
html[data-active-module="nav-library"] .library-pagination > .library-pagination-arrow:last-child {
  pointer-events: auto !important;
}

html[data-active-module="nav-library"] .library-pagination > .library-pagination-dots {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.12rem !important;
  padding: 0.1rem 0.12rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.045) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045) !important;
  background: rgba(255, 255, 255, 0.016) !important;
}

html[data-active-module="nav-library"] .library-pagination > .library-pagination-arrow:first-child {
  border-radius: 999px 0 0 999px !important;
}

html[data-active-module="nav-library"] .library-pagination > .library-pagination-arrow:last-child {
  border-radius: 0 999px 999px 0 !important;
}

html[data-active-module="nav-library"] .library-pagination button.library-pagination-arrow {
  width: 1.34rem !important;
  height: 1.34rem !important;
  min-width: 1.34rem !important;
  min-height: 1.34rem !important;
  border: 1px solid rgba(255, 255, 255, 0.045) !important;
  background: rgba(255, 255, 255, 0.016) !important;
  color: rgba(232, 225, 211, 0.48) !important;
}

html[data-active-module="nav-library"] .library-pagination button.library-pagination-arrow:not(:disabled):hover {
  color: rgba(255, 232, 181, 0.88) !important;
  background: rgba(232, 184, 111, 0.08) !important;
}

/* ai-generate-hover-cards-20260608-4: keep lift motion, remove outward spreading halo. */
html[data-active-module="nav-generate"] .generate-reference-card {
  box-shadow:
    0 1.05rem 1.75rem rgba(0, 0, 0, 0.34),
    0 0.18rem 0.5rem rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="nav-generate"] button.generate-reference-card:hover,
html[data-active-module="nav-generate"] button.generate-reference-card:focus-visible,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-submit:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-editor:hover) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-inspiration:hover) .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:focus-visible) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-submit:focus-visible) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-editor:focus-visible) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-inspiration:focus-visible) .generate-reference-card-inspiration {
  box-shadow:
    0 1.35rem 2.05rem rgba(0, 0, 0, 0.44),
    0 0.34rem 0.78rem rgba(0, 0, 0, 0.24) !important;
  filter: brightness(1.018) saturate(1.025) !important;
}

html[data-active-module="nav-generate"] button.generate-reference-card:active {
  box-shadow:
    0 0.78rem 1.35rem rgba(0, 0, 0, 0.36),
    0 0.16rem 0.42rem rgba(0, 0, 0, 0.24) !important;
}

/* ai-generate-selected-file-badge-20260608-1: keep selected-file status on the upload card front. */
html[data-active-module="nav-generate"] .generate-upload-state-badge {
  position: absolute !important;
  z-index: 7 !important;
  left: calc(88 / 1672 * 100%) !important;
  top: calc(226 / 846 * 100%) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(0.28rem, 0.42vw, 0.5rem) !important;
  width: calc(384 / 1672 * 100%) !important;
  min-height: calc(42 / 846 * 100%) !important;
  padding: clamp(0.26rem, 0.42vw, 0.42rem) clamp(0.46rem, 0.62vw, 0.66rem) !important;
  border: 1px solid rgba(255, 214, 134, 0.2) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(30, 19, 8, 0.88), rgba(12, 9, 6, 0.84)),
    rgba(8, 8, 7, 0.84) !important;
  color: rgba(255, 236, 197, 0.92) !important;
  box-shadow:
    0 0.42rem 1rem rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  pointer-events: none !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
}

html[data-active-module="nav-generate"] .generate-upload-state-badge span,
html[data-active-module="nav-generate"] .generate-upload-state-badge strong,
html[data-active-module="nav-generate"] .generate-upload-state-badge small {
  min-width: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-upload-state-badge span {
  color: rgba(255, 225, 166, 0.98) !important;
  font-size: clamp(0.58rem, 0.68vw, 0.72rem) !important;
  font-weight: 880 !important;
}

html[data-active-module="nav-generate"] .generate-upload-state-badge strong {
  overflow: hidden !important;
  color: rgba(255, 255, 248, 0.94) !important;
  font-size: clamp(0.56rem, 0.68vw, 0.72rem) !important;
  font-weight: 760 !important;
  text-overflow: ellipsis !important;
}

html[data-active-module="nav-generate"] .generate-upload-state-badge small {
  color: rgba(232, 219, 195, 0.68) !important;
  font-size: clamp(0.48rem, 0.58vw, 0.62rem) !important;
  font-weight: 680 !important;
}

html[data-active-module="nav-generate"] .generate-upload-state-badge.is-file-selected {
  top: calc(230 / 846 * 100%) !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .generate-upload-state-badge,
  html[data-active-module="nav-generate"] .generate-upload-state-badge.is-file-selected {
    left: calc(92 / 1672 * 100%) !important;
    top: calc(224 / 846 * 100%) !important;
    width: calc(380 / 1672 * 100%) !important;
  }
}


/* library-filter-fill-height-20260608-1: distribute filter groups through the full left rail height. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  display: grid !important;
  grid-template-rows: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 4fr) !important;
  align-content: stretch !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  gap: clamp(0.68rem, 1.05dvh, 0.92rem) !important;
  padding: clamp(0.78rem, 1.08dvh, 0.98rem) clamp(0.62rem, 0.82vw, 0.82rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-filter-section,
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(1),
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(2),
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(3) {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  align-items: stretch !important;
  min-height: 0 !important;
  height: 100% !important;
  gap: clamp(0.34rem, 0.54dvh, 0.48rem) !important;
}

html[data-active-module="nav-library"] .library-filter-title {
  align-self: start !important;
  min-height: 0 !important;
  line-height: 1 !important;
}

html[data-active-module="nav-library"] .library-filter-grid,
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(1) .library-filter-grid,
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(2) .library-filter-grid,
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(3) .library-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: stretch !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: clamp(0.26rem, 0.48dvh, 0.38rem) clamp(0.26rem, 0.34vw, 0.36rem) !important;
}

html[data-active-module="nav-library"] .library-filter-section:nth-of-type(1) .library-filter-grid {
  grid-template-rows: minmax(0, 1.08fr) repeat(5, minmax(0, 1fr)) !important;
}

html[data-active-module="nav-library"] .library-filter-section:nth-of-type(2) .library-filter-grid {
  grid-template-rows: minmax(0, 1.08fr) repeat(2, minmax(0, 1fr)) !important;
}

html[data-active-module="nav-library"] .library-filter-section:nth-of-type(3) .library-filter-grid {
  grid-template-rows: minmax(0, 1.08fr) repeat(3, minmax(0, 1fr)) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button,
html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-training="all"] {
  align-self: stretch !important;
  justify-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-training="all"] {
  grid-column: 1 / -1 !important;
}

@media (max-height: 760px) and (min-width: 901px) {
  html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
    gap: clamp(0.48rem, 0.84dvh, 0.64rem) !important;
    padding-block: clamp(0.56rem, 0.9dvh, 0.72rem) !important;
  }

  html[data-active-module="nav-library"] .library-filter-section,
  html[data-active-module="nav-library"] .library-filter-section:nth-of-type(1),
  html[data-active-module="nav-library"] .library-filter-section:nth-of-type(2),
  html[data-active-module="nav-library"] .library-filter-section:nth-of-type(3) {
    gap: 0.24rem !important;
  }

  html[data-active-module="nav-library"] .library-filter-grid,
  html[data-active-module="nav-library"] .library-filter-section:nth-of-type(1) .library-filter-grid,
  html[data-active-module="nav-library"] .library-filter-section:nth-of-type(2) .library-filter-grid,
  html[data-active-module="nav-library"] .library-filter-section:nth-of-type(3) .library-filter-grid {
    gap: 0.18rem 0.24rem !important;
  }

  html[data-active-module="nav-library"] .library-filter-grid button,
  html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
  html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"],
  html[data-active-module="nav-library"] .library-filter-grid button[data-library-training="all"] {
    font-size: clamp(0.62rem, 1.18dvh, 0.7rem) !important;
  }
}

/* ai-generate-waiting-button-20260608-1: compact waiting-publish state inside the generate button. */
html[data-active-module="nav-generate"] .generate-connection-panel {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button {
  position: absolute !important;
  z-index: 9 !important;
  left: calc(87 / 1672 * 100%) !important;
  top: calc(664 / 846 * 100%) !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: clamp(0.08rem, 0.14vw, 0.14rem) !important;
  width: calc(388 / 1672 * 100%) !important;
  height: calc(64 / 846 * 100%) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(0.22rem, 0.34vw, 0.34rem) clamp(0.5rem, 0.68vw, 0.72rem) !important;
  border: 1px solid rgba(255, 219, 146, 0.24) !important;
  border-radius: clamp(0.46rem, 0.62vw, 0.66rem) !important;
  background:
    linear-gradient(180deg, rgba(199, 143, 54, 0.92), rgba(137, 88, 26, 0.94)),
    rgba(130, 85, 28, 0.94) !important;
  color: rgba(255, 248, 233, 0.98) !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0.58rem 1rem rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  border-color: rgba(145, 197, 255, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(65, 116, 162, 0.94), rgba(31, 67, 101, 0.94)),
    rgba(29, 62, 94, 0.94) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-ready {
  border-color: rgba(145, 229, 178, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(66, 150, 102, 0.94), rgba(33, 96, 63, 0.94)),
    rgba(32, 88, 58, 0.94) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-error {
  border-color: rgba(255, 152, 132, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(166, 69, 53, 0.94), rgba(101, 39, 34, 0.94)),
    rgba(98, 38, 34, 0.94) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button:disabled {
  cursor: wait !important;
  opacity: 0.82 !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button span,
html[data-active-module="nav-generate"] .generate-submit-status-button strong,
html[data-active-module="nav-generate"] .generate-submit-status-button small {
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button strong {
  color: rgba(255, 255, 250, 0.98) !important;
  font-size: clamp(0.76rem, 0.9vw, 0.94rem) !important;
  font-weight: 880 !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button small {
  color: rgba(255, 241, 211, 0.74) !important;
  font-size: clamp(0.54rem, 0.64vw, 0.68rem) !important;
  font-weight: 760 !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working small {
  color: rgba(226, 239, 255, 0.76) !important;
}

/* ai-generate-rebuilt-submit-20260608-1: carve out the PNG's baked submit button and replace it with the real button. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference::after {
  content: "" !important;
  position: absolute !important;
  z-index: 8 !important;
  left: calc(72 / 1672 * 100%) !important;
  top: calc(642 / 846 * 100%) !important;
  width: calc(430 / 1672 * 100%) !important;
  height: calc(96 / 846 * 100%) !important;
  border-radius: clamp(0.62rem, 0.82vw, 0.86rem) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(72, 40, 16, 0.46), transparent 58%),
    linear-gradient(180deg, rgba(35, 20, 8, 0.98), rgba(16, 10, 6, 0.99)) !important;
  box-shadow:
    inset 0 0.9rem 1.4rem rgba(0, 0, 0, 0.18),
    inset 0 -0.7rem 1.2rem rgba(98, 54, 18, 0.12) !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button {
  z-index: 10 !important;
  left: calc(87 / 1672 * 100%) !important;
  top: calc(664 / 846 * 100%) !important;
  width: calc(388 / 1672 * 100%) !important;
  height: calc(64 / 846 * 100%) !important;
  grid-template-rows: auto auto !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-empty,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-file-selected {
  background:
    linear-gradient(180deg, rgba(202, 145, 54, 0.96), rgba(139, 89, 27, 0.98)),
    rgba(130, 85, 28, 0.96) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-empty {
  grid-template-rows: auto !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-empty strong {
  font-size: clamp(0.86rem, 1vw, 1.04rem) !important;
}

/* ai-generate-rebuilt-submit-20260608-2: cut the baked submit area from the card itself and move the rebuilt button with the card. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference::after {
  content: none !important;
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload::after {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  left: calc(47 / 514 * 100%) !important;
  top: calc(615 / 758 * 100%) !important;
  width: calc(430 / 514 * 100%) !important;
  height: calc(96 / 758 * 100%) !important;
  display: block !important;
  border-radius: clamp(0.62rem, 0.82vw, 0.86rem) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(72, 40, 16, 0.42), transparent 58%),
    linear-gradient(180deg, rgba(35, 20, 8, 0.98), rgba(16, 10, 6, 0.99)) !important;
  box-shadow:
    inset 0 0.9rem 1.4rem rgba(0, 0, 0, 0.18),
    inset 0 -0.7rem 1.2rem rgba(98, 54, 18, 0.12) !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button {
  transition:
    transform 220ms cubic-bezier(0.2, 0.72, 0.24, 1),
    box-shadow 220ms ease,
    filter 220ms ease !important;
  will-change: transform, box-shadow, filter !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:focus-visible) .generate-reference-card-upload {
  box-shadow:
    0 1.35rem 2.05rem rgba(0, 0, 0, 0.44),
    0 0.34rem 0.78rem rgba(0, 0, 0, 0.24) !important;
  filter: brightness(1.018) saturate(1.025) !important;
  transform: translate3d(0, -12px, 0) scale(1.018) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:hover) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-submit:hover) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:hover) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:focus-visible) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-submit:focus-visible) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:focus-visible) .generate-submit-status-button {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1.35rem 2.05rem rgba(0, 0, 0, 0.4),
    0 0.34rem 0.78rem rgba(0, 0, 0, 0.22) !important;
  filter: brightness(1.018) saturate(1.025) !important;
  transform: translate3d(0, -12px, 0) scale(1.018) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:active) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:active) .generate-submit-status-button {
  transform: translate3d(0, -4px, 0) scale(1.008) !important;
  transition-duration: 120ms !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-active-module="nav-generate"] .generate-submit-status-button {
    transition: box-shadow 160ms ease, filter 160ms ease !important;
  }

  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:hover) .generate-submit-status-button,
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-submit:hover) .generate-submit-status-button,
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:hover) .generate-submit-status-button,
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:focus-visible) .generate-submit-status-button,
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-submit:focus-visible) .generate-submit-status-button,
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:focus-visible) .generate-submit-status-button,
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:active) .generate-reference-card-upload,
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:active) .generate-submit-status-button {
    transform: none !important;
  }
}

/* ai-generate-independent-buttons-20260608-1: remove baked button echoes and rebuild all three bottom actions as real buttons. */
html[data-active-module="nav-generate"] .generate-reference-card {
  pointer-events: auto !important;
  cursor: pointer !important;
  transition:
    box-shadow 220ms ease,
    filter 220ms ease !important;
  will-change: box-shadow, filter !important;
}

html[data-active-module="nav-generate"] .generate-reference-card:hover {
  filter: brightness(1.045) saturate(1.05) !important;
  box-shadow:
    0 1.35rem 2.05rem rgba(0, 0, 0, 0.42),
    0 0.28rem 0.62rem rgba(0, 0, 0, 0.22) !important;
  outline: 1px solid rgba(255, 232, 181, 0.45) !important;
  outline-offset: 1px !important;
}

html[data-active-module="nav-generate"] .generate-reference-hotspot > img {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-active-module="nav-generate"] .generate-reference-hotspot:hover,
html[data-active-module="nav-generate"] .generate-reference-hotspot:focus-visible {
  z-index: 12 !important;
  outline: 2px solid rgba(255, 232, 181, 0.68) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 1.4rem rgba(255, 232, 181, 0.16) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload::after,
html[data-active-module="nav-generate"] .generate-reference-card-editor::after,
html[data-active-module="nav-generate"] .generate-reference-card-inspiration::after {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  top: calc(628 / 758 * 100%) !important;
  display: block !important;
  height: calc(78 / 758 * 100%) !important;
  border-radius: clamp(0.5rem, 0.62vw, 0.66rem) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(70, 39, 17, 0.2), transparent 62%),
    linear-gradient(180deg, rgba(34, 19, 8, 0.98), rgba(15, 10, 6, 0.995)) !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload::after {
  left: calc(53 / 514 * 100%) !important;
  width: calc(408 / 514 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-editor::after {
  left: calc(45 / 510 * 100%) !important;
  width: calc(416 / 510 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-inspiration::after {
  left: calc(45 / 514 * 100%) !important;
  width: calc(416 / 514 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button,
html[data-active-module="nav-generate"] .generate-card-action-button {
  position: absolute !important;
  z-index: 11 !important;
  top: calc(664 / 846 * 100%) !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  width: calc(388 / 1672 * 100%) !important;
  height: calc(64 / 846 * 100%) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(0.18rem, 0.28vw, 0.3rem) clamp(0.5rem, 0.68vw, 0.72rem) !important;
  border: 1px solid rgba(255, 219, 146, 0.22) !important;
  border-radius: clamp(0.48rem, 0.6vw, 0.66rem) !important;
  background:
    linear-gradient(180deg, rgba(202, 145, 54, 0.96), rgba(137, 87, 25, 0.98)),
    rgba(130, 85, 28, 0.96) !important;
  color: rgba(255, 250, 238, 0.98) !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0.32rem 0.64rem rgba(0, 0, 0, 0.24) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition:
    transform 220ms cubic-bezier(0.2, 0.72, 0.24, 1),
    box-shadow 220ms ease,
    filter 220ms ease !important;
  will-change: transform, box-shadow, filter !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button {
  left: calc(87 / 1672 * 100%) !important;
  grid-template-rows: auto auto !important;
}

html[data-active-module="nav-generate"] .generate-editor-action-button {
  left: calc(634 / 1672 * 100%) !important;
  width: calc(400 / 1672 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-inspiration-action-button {
  left: calc(1183 / 1672 * 100%) !important;
  width: calc(400 / 1672 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-idle,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-empty,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-file-selected {
  border-color: rgba(255, 219, 146, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(202, 145, 54, 0.96), rgba(137, 87, 25, 0.98)),
    rgba(130, 85, 28, 0.96) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  border-color: rgba(154, 205, 255, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(62, 116, 165, 0.96), rgba(27, 65, 100, 0.98)),
    rgba(29, 62, 94, 0.96) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button strong,
html[data-active-module="nav-generate"] .generate-card-action-button strong {
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 255, 250, 0.98) !important;
  font-size: clamp(0.86rem, 0.98vw, 1.04rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button small {
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 241, 211, 0.82) !important;
  font-size: clamp(0.66rem, 0.78vw, 0.86rem) !important;
  font-weight: 820 !important;
  line-height: 1.04 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  gap: clamp(0.12rem, 0.18vw, 0.18rem) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working small {
  color: rgba(230, 241, 255, 0.9) !important;
  font-size: clamp(0.72rem, 0.86vw, 0.94rem) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button:disabled {
  opacity: 1 !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button:hover,
html[data-active-module="nav-generate"] .generate-submit-status-button:focus-visible,
html[data-active-module="nav-generate"] .generate-card-action-button:hover,
html[data-active-module="nav-generate"] .generate-card-action-button:focus-visible {
  outline: 2px solid rgba(255, 232, 181, 0.58) !important;
  outline-offset: 2px !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:focus-visible) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:hover) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:focus-visible) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:hover) .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:focus-visible) .generate-reference-card-inspiration {
  box-shadow:
    0 1.35rem 2.05rem rgba(0, 0, 0, 0.42),
    0 0.28rem 0.62rem rgba(0, 0, 0, 0.22) !important;
  filter: brightness(1.018) saturate(1.025) !important;
  transform: none !important;
  outline: 1px solid rgba(255, 232, 181, 0.45) !important;
  outline-offset: 1px !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:hover) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:hover) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:focus-visible) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:hover) .generate-editor-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:focus-visible) .generate-editor-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:hover) .generate-inspiration-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:focus-visible) .generate-inspiration-action-button {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0.7rem 1.15rem rgba(0, 0, 0, 0.32) !important;
  filter: brightness(1.018) saturate(1.025) !important;
  transform: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button:hover,
html[data-active-module="nav-generate"] .generate-card-action-button:hover,
html[data-active-module="nav-generate"] .generate-submit-status-button:focus-visible,
html[data-active-module="nav-generate"] .generate-card-action-button:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0.7rem 1.15rem rgba(0, 0, 0, 0.32) !important;
  filter: brightness(1.035) saturate(1.03) !important;
  transform: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button:active,
html[data-active-module="nav-generate"] .generate-card-action-button:active {
  transform: translate3d(0, -4px, 0) scale(1.008) !important;
  transition-duration: 120ms !important;
}

/* library-search-empty-premium-20260608-1 */
html[data-active-module="nav-library"] .library-empty-row.is-search-empty {
  position: relative !important;
  display: grid !important;
  grid-template-columns: clamp(3.55rem, 5.2vw, 4.7rem) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(0.9rem, 1.18vw, 1.28rem) !important;
  min-height: clamp(6.85rem, 8.4vw, 7.9rem) !important;
  padding: clamp(0.96rem, 1.25vw, 1.22rem) clamp(1.02rem, 1.46vw, 1.44rem) !important;
  overflow: hidden !important;
  border: 1px solid rgba(var(--library-ref-gold-soft), 0.2) !important;
  border-radius: 0.72rem !important;
  background:
    linear-gradient(135deg, rgba(255, 239, 205, 0.11), rgba(13, 10, 7, 0.72) 42%, rgba(64, 44, 21, 0.4)),
    radial-gradient(circle at 12% 24%, rgba(var(--library-ref-gold), 0.16), transparent 28%),
    rgba(13, 11, 8, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 221, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 0.58rem 1.28rem rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty::before {
  content: "" !important;
  position: absolute !important;
  inset: 0.82rem clamp(1rem, 1.6vw, 1.6rem) 0.82rem 42% !important;
  opacity: 0.36 !important;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 0.42rem,
      rgba(255, 226, 175, 0.16) 0.42rem,
      rgba(255, 226, 175, 0.16) calc(0.42rem + 1px)
    ) !important;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 68%, transparent) !important;
  pointer-events: none !important;
}

html[data-active-module="nav-library"] .library-empty-scoremark {
  position: relative !important;
  z-index: 1 !important;
  width: clamp(3.35rem, 5vw, 4.4rem) !important;
  height: clamp(3.35rem, 5vw, 4.4rem) !important;
  border: 1px solid rgba(var(--library-ref-gold-soft), 0.26) !important;
  border-radius: 0.58rem !important;
  background:
    linear-gradient(180deg, rgba(255, 234, 191, 0.12), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.035) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 226, 0.12),
    0 0.52rem 1rem rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="nav-library"] .library-empty-scoremark::before {
  content: "" !important;
  position: absolute !important;
  left: 0.62rem !important;
  right: 0.62rem !important;
  top: 1rem !important;
  height: 1.55rem !important;
  background: repeating-linear-gradient(to bottom, rgba(255, 229, 181, 0.34) 0 1px, transparent 1px 0.36rem) !important;
}

html[data-active-module="nav-library"] .library-empty-scoremark span,
html[data-active-module="nav-library"] .library-empty-scoremark i {
  position: absolute !important;
  display: block !important;
  border-radius: 999px !important;
  background: rgba(255, 229, 181, 0.9) !important;
  box-shadow: 0 0 0.5rem rgba(var(--library-ref-gold), 0.24) !important;
}

html[data-active-module="nav-library"] .library-empty-scoremark span {
  left: 1.05rem !important;
  top: 2.08rem !important;
  width: 0.62rem !important;
  height: 0.46rem !important;
  transform: rotate(-18deg) !important;
}

html[data-active-module="nav-library"] .library-empty-scoremark span::after,
html[data-active-module="nav-library"] .library-empty-scoremark i::after {
  content: "" !important;
  position: absolute !important;
  width: 1px !important;
  height: 1.45rem !important;
  right: 0.03rem !important;
  bottom: 0.2rem !important;
  border-radius: 999px !important;
  background: rgba(255, 229, 181, 0.82) !important;
}

html[data-active-module="nav-library"] .library-empty-scoremark i {
  right: 1.05rem !important;
  top: 1.5rem !important;
  width: 0.54rem !important;
  height: 0.4rem !important;
  transform: rotate(-18deg) !important;
}

html[data-active-module="nav-library"] .library-empty-scoremark b {
  position: absolute !important;
  right: 0.78rem !important;
  bottom: 0.68rem !important;
  width: 1.15rem !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 229, 181, 0.68)) !important;
}

html[data-active-module="nav-library"] .library-empty-copy {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
}

html[data-active-module="nav-library"] .library-empty-kicker {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.08rem !important;
  margin: 0 0 0.32rem !important;
  padding: 0 0.42rem !important;
  border: 1px solid rgba(var(--library-ref-gold-soft), 0.22) !important;
  border-radius: 999px !important;
  background: rgba(var(--library-ref-gold), 0.08) !important;
  color: rgba(255, 231, 186, 0.72) !important;
  font-size: clamp(0.58rem, 0.66vw, 0.64rem) !important;
  font-weight: 880 !important;
  line-height: 1 !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty strong {
  max-width: 100% !important;
  overflow: hidden !important;
  color: rgba(255, 239, 207, 0.98) !important;
  font-size: clamp(1.02rem, 1.18vw, 1.16rem) !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty p {
  max-width: 46rem !important;
  margin: 0.32rem 0 0 !important;
  color: rgba(230, 226, 216, 0.68) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.82rem) !important;
  font-weight: 720 !important;
  line-height: 1.45 !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty small {
  display: inline-flex !important;
  max-width: 100% !important;
  margin-top: 0.36rem !important;
  overflow: hidden !important;
  color: rgba(214, 207, 193, 0.48) !important;
  font-size: clamp(0.62rem, 0.72vw, 0.7rem) !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty .library-empty-actions {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 0.46rem !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty .library-empty-actions button {
  min-height: clamp(2rem, 2.32vw, 2.22rem) !important;
  padding: 0 clamp(0.72rem, 0.92vw, 0.9rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.052) !important;
  color: rgba(237, 235, 227, 0.82) !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty .library-empty-actions .library-empty-primary {
  border-color: rgba(var(--library-ref-gold-soft), 0.54) !important;
  background:
    linear-gradient(180deg, rgba(255, 236, 197, 0.18), rgba(var(--library-ref-gold), 0.12)),
    rgba(var(--library-ref-gold), 0.1) !important;
  color: rgba(255, 239, 207, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 226, 0.14),
    0 0.34rem 0.82rem rgba(0, 0, 0, 0.16) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty .library-empty-actions button:hover {
  border-color: rgba(var(--library-ref-gold-soft), 0.62) !important;
  background: rgba(var(--library-ref-gold), 0.14) !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-library"] .library-empty-row.is-search-empty {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  html[data-active-module="nav-library"] .library-empty-scoremark {
    display: none !important;
  }

  html[data-active-module="nav-library"] .library-empty-row.is-search-empty strong {
    white-space: normal !important;
  }

  html[data-active-module="nav-library"] .library-empty-row.is-search-empty .library-empty-actions {
    justify-content: flex-start !important;
  }
}

/* ai-generate-side-button-colors-20260608-1: restore rebuilt editor and inspiration buttons to their source-card colors. */
html[data-active-module="nav-generate"] .generate-editor-action-button {
  border-color: rgba(118, 148, 182, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(38, 57, 84, 0.98), rgba(24, 39, 61, 0.98)),
    rgba(26, 42, 66, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(179, 210, 242, 0.12),
    0 0.32rem 0.64rem rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="nav-generate"] .generate-inspiration-action-button {
  border-color: rgba(157, 103, 185, 0.36) !important;
  background:
    linear-gradient(180deg, rgba(80, 47, 96, 0.98), rgba(50, 30, 62, 0.98)),
    rgba(55, 33, 68, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(224, 179, 255, 0.13),
    0 0.32rem 0.64rem rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="nav-generate"] .generate-editor-action-button:hover,
html[data-active-module="nav-generate"] .generate-editor-action-button:focus-visible {
  outline-color: rgba(159, 194, 230, 0.56) !important;
}

html[data-active-module="nav-generate"] .generate-inspiration-action-button:hover,
html[data-active-module="nav-generate"] .generate-inspiration-action-button:focus-visible {
  outline-color: rgba(214, 154, 255, 0.54) !important;
}

/* ai-generate-yellow-submit-20260608-1: keep the generate button gold before and after submitting. */
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  border-color: rgba(255, 219, 146, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(202, 145, 54, 0.96), rgba(137, 87, 25, 0.98)),
    rgba(130, 85, 28, 0.96) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-file-selected {
  grid-template-rows: auto !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working small {
  color: rgba(255, 241, 211, 0.9) !important;
  font-size: clamp(0.72rem, 0.86vw, 0.94rem) !important;
}

/* library-filter-empty-premium-20260608-1 */
html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty {
  position: relative !important;
  display: grid !important;
  grid-template-columns: clamp(3.2rem, 4.6vw, 4.15rem) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(0.78rem, 1vw, 1.08rem) !important;
  min-height: clamp(5.7rem, 6.8vw, 6.55rem) !important;
  padding: clamp(0.82rem, 1.05vw, 1.02rem) clamp(0.94rem, 1.32vw, 1.28rem) !important;
  overflow: hidden !important;
  border: 1px solid rgba(var(--library-ref-gold-soft), 0.16) !important;
  border-radius: 0.7rem !important;
  background:
    linear-gradient(135deg, rgba(255, 239, 205, 0.085), rgba(15, 12, 9, 0.78) 44%, rgba(57, 39, 19, 0.32)),
    radial-gradient(circle at 12% 28%, rgba(var(--library-ref-gold), 0.1), transparent 30%),
    rgba(12, 10, 8, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 221, 0.065),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 0.48rem 1.08rem rgba(0, 0, 0, 0.14) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty::before {
  content: "" !important;
  position: absolute !important;
  inset: 0.72rem clamp(1rem, 1.4vw, 1.4rem) 0.72rem 38% !important;
  opacity: 0.28 !important;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 0.38rem,
      rgba(255, 226, 175, 0.13) 0.38rem,
      rgba(255, 226, 175, 0.13) calc(0.38rem + 1px)
    ) !important;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 66%, transparent) !important;
  pointer-events: none !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-scoremark {
  width: clamp(3rem, 4.3vw, 3.85rem) !important;
  height: clamp(3rem, 4.3vw, 3.85rem) !important;
  opacity: 0.86 !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-copy,
html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-actions {
  position: relative !important;
  z-index: 1 !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-kicker {
  margin-bottom: 0.26rem !important;
  border-color: rgba(var(--library-ref-gold-soft), 0.18) !important;
  background: rgba(var(--library-ref-gold), 0.065) !important;
  color: rgba(255, 231, 186, 0.66) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty strong {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 239, 207, 0.96) !important;
  font-size: clamp(0.98rem, 1.08vw, 1.1rem) !important;
  font-weight: 900 !important;
  line-height: 1.16 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty p {
  max-width: 46rem !important;
  margin: 0.26rem 0 0 !important;
  color: rgba(230, 226, 216, 0.64) !important;
  font-size: clamp(0.7rem, 0.8vw, 0.8rem) !important;
  font-weight: 720 !important;
  line-height: 1.42 !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty small {
  display: inline-flex !important;
  max-width: 100% !important;
  margin-top: 0.28rem !important;
  overflow: hidden !important;
  color: rgba(214, 207, 193, 0.46) !important;
  font-size: clamp(0.6rem, 0.7vw, 0.68rem) !important;
  font-weight: 760 !important;
  line-height: 1.24 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-actions {
  display: inline-flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-actions button {
  min-height: clamp(2rem, 2.28vw, 2.18rem) !important;
  padding: 0 clamp(0.74rem, 0.94vw, 0.92rem) !important;
  border: 1px solid rgba(var(--library-ref-gold-soft), 0.44) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 236, 197, 0.14), rgba(var(--library-ref-gold), 0.09)),
    rgba(var(--library-ref-gold), 0.08) !important;
  color: rgba(255, 239, 207, 0.94) !important;
  font-size: clamp(0.7rem, 0.78vw, 0.78rem) !important;
  font-weight: 860 !important;
  white-space: nowrap !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 226, 0.1),
    0 0.3rem 0.72rem rgba(0, 0, 0, 0.14) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-actions button:hover {
  border-color: rgba(var(--library-ref-gold-soft), 0.6) !important;
  background: rgba(var(--library-ref-gold), 0.13) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty.is-sync-error {
  border-color: rgba(242, 183, 96, 0.2) !important;
  background:
    linear-gradient(135deg, rgba(242, 183, 96, 0.105), rgba(15, 12, 9, 0.8) 44%, rgba(57, 39, 19, 0.32)),
    rgba(12, 10, 8, 0.92) !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-scoremark {
    display: none !important;
  }

  html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty strong {
    white-space: normal !important;
  }

  html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-actions {
    justify-content: flex-start !important;
  }
}

/* ai-generate-button-no-outline-20260608-1: keep selected generate action buttons free of focus rings. */
html[data-active-module="nav-generate"] .generate-submit-status-button,
html[data-active-module="nav-generate"] .generate-card-action-button,
html[data-active-module="nav-generate"] .generate-reference-hotspot {
  -webkit-tap-highlight-color: transparent !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button:focus,
html[data-active-module="nav-generate"] .generate-submit-status-button:focus-visible,
html[data-active-module="nav-generate"] .generate-submit-status-button:active,
html[data-active-module="nav-generate"] .generate-card-action-button:focus,
html[data-active-module="nav-generate"] .generate-card-action-button:focus-visible,
html[data-active-module="nav-generate"] .generate-card-action-button:active,
html[data-active-module="nav-generate"] .generate-reference-hotspot:focus,
html[data-active-module="nav-generate"] .generate-reference-hotspot:focus-visible,
html[data-active-module="nav-generate"] .generate-reference-hotspot:active {
  outline: 0 !important;
  outline-offset: 0 !important;
}

/* library-filter-empty-grid-20260608-1 */
html[data-active-module="nav-library"] .library-track-table:has(.library-empty-row.is-with-examples.is-filter-empty) {
  grid-template-rows: auto repeat(4, minmax(clamp(3.95rem, 4.92vw, 4.55rem), auto)) !important;
  grid-auto-rows: minmax(clamp(3.95rem, 4.92vw, 4.55rem), auto) !important;
  align-content: start !important;
  row-gap: clamp(0.2rem, 0.34vw, 0.34rem) !important;
}

/* ai-generate-button-borderless-20260608-1: remove the visible line border from the three rebuilt action buttons. */
html[data-active-module="nav-generate"] .generate-submit-status-button,
html[data-active-module="nav-generate"] .generate-card-action-button,
html[data-active-module="nav-generate"] .generate-submit-status-button:hover,
html[data-active-module="nav-generate"] .generate-submit-status-button:focus,
html[data-active-module="nav-generate"] .generate-submit-status-button:focus-visible,
html[data-active-module="nav-generate"] .generate-submit-status-button:active,
html[data-active-module="nav-generate"] .generate-card-action-button:hover,
html[data-active-module="nav-generate"] .generate-card-action-button:focus,
html[data-active-module="nav-generate"] .generate-card-action-button:focus-visible,
html[data-active-module="nav-generate"] .generate-card-action-button:active {
  border-color: transparent !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: 0 0.32rem 0.64rem rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:hover) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:hover) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:focus-visible) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:hover) .generate-editor-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:focus-visible) .generate-editor-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:hover) .generate-inspiration-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:focus-visible) .generate-inspiration-action-button {
  border-color: transparent !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: 0 0.7rem 1.15rem rgba(0, 0, 0, 0.32) !important;
}

/* library-filter-empty-big-text-20260608-1 */
html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty {
  grid-template-columns: clamp(3.5rem, 4.95vw, 4.35rem) minmax(0, 1fr) auto !important;
  gap: clamp(0.9rem, 1.18vw, 1.22rem) !important;
  min-height: clamp(5.3rem, 6.15vw, 6rem) !important;
  padding: clamp(0.84rem, 1.04vw, 1rem) clamp(1rem, 1.34vw, 1.32rem) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-scoremark {
  width: clamp(3.28rem, 4.7vw, 4.08rem) !important;
  height: clamp(3.28rem, 4.7vw, 4.08rem) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-copy {
  display: grid !important;
  gap: clamp(0.18rem, 0.24vw, 0.26rem) !important;
  align-content: center !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-kicker,
html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty small {
  display: none !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty strong {
  font-size: clamp(1.34rem, 1.6vw, 1.62rem) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty p {
  margin: 0 !important;
  color: rgba(230, 226, 216, 0.7) !important;
  font-size: clamp(0.88rem, 1vw, 1rem) !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-actions button {
  min-height: clamp(2.18rem, 2.56vw, 2.42rem) !important;
  padding: 0 clamp(0.86rem, 1.04vw, 1.06rem) !important;
  font-size: clamp(0.82rem, 0.92vw, 0.9rem) !important;
}

html[data-active-module="nav-library"] .library-track-table:has(.library-empty-row.is-with-examples.is-filter-empty) {
  grid-template-rows: auto repeat(4, minmax(clamp(3.95rem, 4.92vw, 4.55rem), auto)) !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty strong {
    white-space: normal !important;
  }
}

/* ai-generate-button-bottom-clean-20260608-1: remove the dark base plate behind rebuilt generate buttons. */
html[data-active-module="nav-generate"] .generate-reference-card-upload::after,
html[data-active-module="nav-generate"] .generate-reference-card-editor::after,
html[data-active-module="nav-generate"] .generate-reference-card-inspiration::after {
  top: calc(637 / 758 * 100%) !important;
  height: calc(64 / 758 * 100%) !important;
  border-radius: clamp(0.48rem, 0.6vw, 0.66rem) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload::after {
  left: calc(62 / 514 * 100%) !important;
  width: calc(388 / 514 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-editor::after {
  left: calc(54 / 510 * 100%) !important;
  width: calc(400 / 510 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-inspiration::after {
  left: calc(53 / 514 * 100%) !important;
  width: calc(400 / 514 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button,
html[data-active-module="nav-generate"] .generate-card-action-button,
html[data-active-module="nav-generate"] .generate-submit-status-button:hover,
html[data-active-module="nav-generate"] .generate-submit-status-button:focus,
html[data-active-module="nav-generate"] .generate-submit-status-button:focus-visible,
html[data-active-module="nav-generate"] .generate-submit-status-button:active,
html[data-active-module="nav-generate"] .generate-card-action-button:hover,
html[data-active-module="nav-generate"] .generate-card-action-button:focus,
html[data-active-module="nav-generate"] .generate-card-action-button:focus-visible,
html[data-active-module="nav-generate"] .generate-card-action-button:active,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:hover) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:hover) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:focus-visible) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:hover) .generate-editor-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:focus-visible) .generate-editor-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:hover) .generate-inspiration-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:focus-visible) .generate-inspiration-action-button {
  border-color: transparent !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* ai-generate-clean-card-assets-20260608-1: clean source images no longer need button-area masks. */
html[data-active-module="nav-generate"] .generate-reference-card-upload::after,
html[data-active-module="nav-generate"] .generate-reference-card-editor::after,
html[data-active-module="nav-generate"] .generate-reference-card-inspiration::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* library-semantic-filter-empty-polish-20260608-1 */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  grid-template-rows: clamp(2.35rem, 2.8vw, 2.62rem) auto clamp(6.75rem, 8.75vw, 7rem) clamp(1.45rem, 1.9vw, 1.72rem) minmax(0, auto) auto !important;
}

html[data-active-module="nav-library"] .library-active-filters {
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.46rem, 0.62vw, 0.66rem) !important;
  min-width: 0 !important;
  min-height: clamp(1.86rem, 2.28vw, 2.08rem) !important;
  margin-top: clamp(-0.12rem, -0.12vw, 0rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-active-filters > span {
  flex: 0 0 auto !important;
  color: rgba(226, 221, 211, 0.52) !important;
  font-size: clamp(0.66rem, 0.76vw, 0.74rem) !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-active-filter-list {
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.32rem, 0.44vw, 0.46rem) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-active-filter-list button,
html[data-active-module="nav-library"] .library-active-filter-list b,
html[data-active-module="nav-library"] .library-active-filter-clear-all {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: clamp(1.44rem, 1.75vw, 1.62rem) !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

html[data-active-module="nav-library"] .library-active-filter-list button {
  gap: 0.34rem !important;
  max-width: min(13rem, 28vw) !important;
  padding: 0 clamp(0.46rem, 0.62vw, 0.64rem) 0 clamp(0.58rem, 0.74vw, 0.76rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.105) !important;
  background: rgba(255, 255, 255, 0.052) !important;
  color: rgba(237, 234, 226, 0.8) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.76rem) !important;
  font-weight: 780 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-active-module="nav-library"] .library-active-filter-list button span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-active-module="nav-library"] .library-active-filter-list button i {
  display: grid !important;
  flex: 0 0 auto !important;
  width: 1rem !important;
  height: 1rem !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(237, 234, 226, 0.68) !important;
  font-style: normal !important;
  font-size: 0.72rem !important;
}

html[data-active-module="nav-library"] .library-active-filter-list button:hover {
  border-color: rgba(236, 226, 208, 0.2) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(247, 242, 231, 0.92) !important;
}

html[data-active-module="nav-library"] .library-active-filter-list b {
  padding: 0 clamp(0.58rem, 0.76vw, 0.78rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(224, 221, 213, 0.56) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.76rem) !important;
  font-weight: 760 !important;
}

html[data-active-module="nav-library"] .library-active-filter-clear-all {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  padding: 0 clamp(0.52rem, 0.68vw, 0.72rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(225, 221, 211, 0.58) !important;
  font-size: clamp(0.66rem, 0.76vw, 0.74rem) !important;
  font-weight: 780 !important;
}

html[data-active-module="nav-library"] .library-active-filter-clear-all:hover {
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(242, 237, 226, 0.78) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button:not(.is-active) {
  border-color: rgba(255, 255, 255, 0.055) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012)), rgba(16, 17, 17, 0.56) !important;
  color: rgba(232, 229, 221, 0.7) !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-row-favorite {
  color: rgba(229, 224, 214, 0.45) !important;
  transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease !important;
}

html[data-active-module="nav-library"] .library-row-favorite.is-favorite,
html[data-active-module="nav-library"] .score-library-favorite.is-favorite {
  border-color: rgba(244, 112, 111, 0.28) !important;
  background: rgba(174, 38, 43, 0.14) !important;
  color: rgba(255, 122, 124, 0.98) !important;
  box-shadow: 0 0.34rem 0.86rem rgba(93, 16, 23, 0.2), inset 0 1px 0 rgba(255, 214, 214, 0.08) !important;
}

html[data-active-module="nav-library"] .library-row-favorite.is-favorite:hover {
  color: rgba(255, 146, 147, 1) !important;
  background: rgba(194, 48, 54, 0.18) !important;
  transform: translateY(-1px) !important;
}

html[data-active-module="nav-library"] .library-row-pills span.is-member,
html[data-active-module="nav-library"] .library-row-free.is-member,
html[data-active-module="nav-library"] .library-row-free.is-locked {
  border-color: rgba(205, 201, 190, 0.16) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(226, 222, 211, 0.72) !important;
}

html[data-active-module="nav-library"] .library-row-detail {
  border-color: rgba(255, 255, 255, 0.075) !important;
  background: rgba(255, 255, 255, 0.024) !important;
  color: rgba(226, 222, 211, 0.52) !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-row-detail:hover,
html[data-active-module="nav-library"] .library-row-detail[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(241, 238, 228, 0.82) !important;
}

html[data-active-module="nav-library"] .library-track-row.is-example {
  opacity: 0.72 !important;
  filter: saturate(0.68) brightness(0.92) !important;
  background: rgba(255, 255, 255, 0.018) !important;
}

html[data-active-module="nav-library"] .library-track-row.is-example:hover {
  background: rgba(255, 255, 255, 0.035) !important;
  filter: saturate(0.72) brightness(0.96) !important;
}

html[data-active-module="nav-library"] .library-track-row.is-example .library-row-play,
html[data-active-module="nav-library"] .library-track-row.is-example .library-row-play[disabled] {
  border-color: rgba(255, 255, 255, 0.105) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(227, 223, 214, 0.58) !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-row-pills span.is-example {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(226, 222, 211, 0.56) !important;
}

html[data-active-module="nav-library"] .library-example-divider {
  display: flex !important;
  grid-column: 1 / -1 !important;
  align-items: center !important;
  gap: clamp(0.42rem, 0.58vw, 0.62rem) !important;
  min-height: clamp(1.5rem, 1.88vw, 1.72rem) !important;
  margin-top: clamp(0.1rem, 0.22vw, 0.24rem) !important;
  color: rgba(225, 221, 211, 0.46) !important;
}

html[data-active-module="nav-library"] .library-example-divider::before,
html[data-active-module="nav-library"] .library-example-divider::after {
  content: "" !important;
  height: 1px !important;
  min-width: 1.2rem !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.105), transparent) !important;
}

html[data-active-module="nav-library"] .library-example-divider::after {
  flex: 1 1 auto !important;
}

html[data-active-module="nav-library"] .library-example-divider span {
  color: rgba(228, 223, 213, 0.58) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.8rem) !important;
  font-weight: 860 !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-example-divider small {
  color: rgba(216, 211, 201, 0.4) !important;
  font-size: clamp(0.62rem, 0.72vw, 0.7rem) !important;
  font-weight: 720 !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-track-table:has(.library-example-divider) {
  grid-template-rows: auto auto repeat(4, minmax(clamp(3.9rem, 4.8vw, 4.42rem), auto)) !important;
  align-content: start !important;
  row-gap: clamp(0.22rem, 0.34vw, 0.36rem) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty,
html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty {
  border-color: rgba(255, 255, 255, 0.105) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.058), rgba(14, 15, 16, 0.82) 42%, rgba(255, 255, 255, 0.022)),
    rgba(8, 9, 10, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.052), 0 0.52rem 1.28rem rgba(0, 0, 0, 0.16) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty .library-empty-kicker,
html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-kicker {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.044) !important;
  color: rgba(226, 222, 211, 0.6) !important;
}

html[data-active-module="nav-library"] .library-empty-scoremark,
html[data-active-module="nav-library"] .library-empty-scoremark span,
html[data-active-module="nav-library"] .library-empty-scoremark i,
html[data-active-module="nav-library"] .library-empty-scoremark b {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background-color: rgba(230, 226, 215, 0.36) !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-library"] .content-grid[data-module="nav-library"] {
    overflow: auto !important;
    padding: clamp(0.76rem, 3.6vw, 1rem) !important;
  }

  html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(0.72rem, 3.2vw, 0.95rem) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

  html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: clamp(0.78rem, 3.8vw, 1rem) !important;
    gap: clamp(0.62rem, 2.8vw, 0.82rem) !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    overflow: visible !important;
  }

  html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    grid-template-rows: none !important;
    overflow: visible !important;
  }

  html[data-active-module="nav-library"] .library-results-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(0.5rem, 2.5vw, 0.68rem) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-active-module="nav-library"] .library-top-title,
  html[data-active-module="nav-library"] .library-search-shell,
  html[data-active-module="nav-library"] .library-sort-tabs,
  html[data-active-module="nav-library"] .library-result-count,
  html[data-active-module="nav-library"] .library-current-context {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
  }

  html[data-active-module="nav-library"] .library-search-shell {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    height: clamp(2.34rem, 11vw, 2.72rem) !important;
  }

  html[data-active-module="nav-library"] .library-search-shell input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: clamp(0.82rem, 3.9vw, 0.96rem) !important;
  }

  html[data-active-module="nav-library"] .library-active-filters {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    overflow: visible !important;
  }

  html[data-active-module="nav-library"] .library-active-filter-list {
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  html[data-active-module="nav-library"] .library-active-filter-list button {
    max-width: 100% !important;
  }

  html[data-active-module="nav-library"] .library-active-filter-clear-all {
    margin-left: 0 !important;
  }

  html[data-active-module="nav-library"] .library-series-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(6.2rem, 7rem) !important;
    grid-template-columns: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 6.2rem !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 0.18rem !important;
  }

  html[data-active-module="nav-library"] .library-series-card {
    width: auto !important;
    height: 6.2rem !important;
    min-height: 6.2rem !important;
    max-height: 6.2rem !important;
  }

  html[data-active-module="nav-library"] .library-table-head {
    display: none !important;
  }

  html[data-active-module="nav-library"] .library-track-table,
  html[data-active-module="nav-library"] .library-track-table:has(.library-example-divider) {
    display: grid !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    gap: clamp(0.46rem, 2.4vw, 0.62rem) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  html[data-active-module="nav-library"] .library-track-row,
  html[data-active-module="nav-library"] .library-table-head,
  html[data-active-module="nav-library"] .library-track-row.is-example {
    grid-template-columns: clamp(3rem, 15vw, 3.55rem) minmax(0, 1fr) auto !important;
    column-gap: clamp(0.52rem, 2.8vw, 0.7rem) !important;
    height: auto !important;
    min-height: clamp(4.4rem, 20vw, 5.1rem) !important;
    max-height: none !important;
    padding: clamp(0.5rem, 2.6vw, 0.66rem) !important;
    border-radius: 0.72rem !important;
    background: rgba(255, 255, 255, 0.025) !important;
  }

  html[data-active-module="nav-library"] .library-track-row img {
    width: clamp(3rem, 15vw, 3.55rem) !important;
    height: clamp(3rem, 15vw, 3.55rem) !important;
    min-width: clamp(3rem, 15vw, 3.55rem) !important;
    min-height: clamp(3rem, 15vw, 3.55rem) !important;
  }

  html[data-active-module="nav-library"] .library-row-actions {
    grid-column: 3 !important;
    justify-self: end !important;
  }

  html[data-active-module="nav-library"] .library-row-actions .library-row-play {
    min-width: 0 !important;
    max-width: clamp(4.9rem, 24vw, 6.4rem) !important;
    min-height: clamp(2rem, 9.5vw, 2.36rem) !important;
    padding-inline: clamp(0.46rem, 2vw, 0.66rem) !important;
    font-size: clamp(0.7rem, 3.2vw, 0.8rem) !important;
    white-space: normal !important;
  }

  html[data-active-module="nav-library"] .library-row-pills {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html[data-active-module="nav-library"] .library-empty-row.is-search-empty,
  html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty {
    grid-template-columns: 1fr !important;
    padding: clamp(0.86rem, 4vw, 1.05rem) !important;
  }

  html[data-active-module="nav-library"] .library-example-divider {
    margin-block: 0.18rem 0 !important;
  }
}

/* library-active-filter-grid-order-20260608-1: keep the new active-filter row above the series/table layers. */
html[data-active-module="nav-library"] .library-results-head {
  grid-row: 1 !important;
}

html[data-active-module="nav-library"] .library-active-filters {
  grid-row: 2 !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  justify-self: stretch !important;
  align-self: start !important;
  position: relative !important;
  z-index: 12 !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-library"] .library-series-section {
  grid-row: 3 !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  z-index: 1 !important;
}

html[data-active-module="nav-library"] .library-table-head {
  grid-row: 4 !important;
}

html[data-active-module="nav-library"] .library-track-table {
  grid-row: 5 !important;
}

html[data-active-module="nav-library"] .library-pagination {
  grid-row: 6 !important;
}

/* library-series-single-row-gap-collapse-20260608-1: keep one-row collection cards directly above the track list. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  grid-template-rows:
    clamp(2.35rem, 2.8vw, 2.62rem)
    auto
    clamp(6.55rem, 8.35vw, 6.95rem)
    clamp(1.32rem, 1.68vw, 1.54rem)
    minmax(0, auto)
    auto !important;
  row-gap: clamp(0.32rem, 0.46vw, 0.5rem) !important;
}

html[data-active-module="nav-library"] .library-series-section {
  display: block !important;
  grid-row: 3 !important;
  grid-column: 1 / -1 !important;
  align-self: stretch !important;
  width: 100% !important;
  height: clamp(6.55rem, 8.35vw, 6.95rem) !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-series-grid {
  grid-row: auto !important;
  grid-column: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

html[data-active-module="nav-library"] .library-table-head {
  margin-top: 0 !important;
}

@media (max-height: 740px) {
  html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
    grid-template-rows: clamp(2.22rem, 2.72vw, 2.5rem) auto 6.35rem clamp(1.22rem, 1.58vw, 1.42rem) minmax(0, auto) auto !important;
    row-gap: 0.3rem !important;
  }

  html[data-active-module="nav-library"] .library-series-section {
    height: 6.35rem !important;
  }
}

/* ai-generate-complete-flow-20260608-1: drag upload, terminal states, validation, mobile fit. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference {
  width: min(92vw, calc((var(--app-height, 100dvh) - var(--ai-generate-nav-h) - 1.5rem) * 1672 / 846), 1605px) !important;
  max-height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h) - 1.5rem) !important;
  transform: translateY(clamp(1.55rem, 3.6dvh, 1.9rem)) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload::after,
html[data-active-module="nav-generate"] .generate-reference-card-editor::after,
html[data-active-module="nav-generate"] .generate-reference-card-inspiration::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button,
html[data-active-module="nav-generate"] .generate-card-action-button {
  top: calc(664 / 846 * 100%) !important;
  width: calc(400 / 1672 * 100%) !important;
  height: calc(64 / 846 * 100%) !important;
  border-color: transparent !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button {
  left: calc(82 / 1672 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-editor-action-button {
  left: calc(635 / 1672 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-inspiration-action-button {
  left: calc(1187 / 1672 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state {
  position: absolute !important;
  z-index: 13 !important;
  left: calc(105 / 1672 * 100%) !important;
  top: calc(378 / 846 * 100%) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "kicker action"
    "name action"
    "meta action" !important;
  align-items: center !important;
  gap: clamp(0.12rem, 0.18vw, 0.18rem) clamp(0.48rem, 0.7vw, 0.7rem) !important;
  width: calc(350 / 1672 * 100%) !important;
  min-height: calc(98 / 846 * 100%) !important;
  margin: 0 !important;
  padding: clamp(0.62rem, 0.82vw, 0.78rem) clamp(0.72rem, 0.98vw, 0.98rem) !important;
  border: 1px solid rgba(255, 216, 144, 0.22) !important;
  border-radius: clamp(0.58rem, 0.72vw, 0.76rem) !important;
  background:
    linear-gradient(180deg, rgba(24, 16, 9, 0.82), rgba(11, 8, 6, 0.78)),
    rgba(12, 9, 6, 0.82) !important;
  color: rgba(255, 246, 226, 0.95) !important;
  text-align: left !important;
  text-indent: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  backdrop-filter: blur(8px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state span,
html[data-active-module="nav-generate"] .generate-upload-inline-state strong,
html[data-active-module="nav-generate"] .generate-upload-inline-state small,
html[data-active-module="nav-generate"] .generate-upload-inline-state em {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-style: normal !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state span {
  grid-area: kicker !important;
  color: rgba(255, 213, 140, 0.86) !important;
  font-size: clamp(0.6rem, 0.68vw, 0.72rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state strong {
  grid-area: name !important;
  color: rgba(255, 252, 242, 0.98) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.94rem) !important;
  font-weight: 900 !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state small {
  grid-area: meta !important;
  color: rgba(229, 217, 191, 0.7) !important;
  font-size: clamp(0.58rem, 0.68vw, 0.72rem) !important;
  font-weight: 720 !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state em {
  grid-area: action !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(0.22rem, 0.3vw, 0.32rem) !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state em > button,
html[data-active-module="nav-generate"] .generate-upload-inline-state em > span {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: clamp(1.48rem, 1.74vw, 1.68rem) !important;
  max-width: clamp(4.2rem, 5.6vw, 5.4rem) !important;
  padding: 0 clamp(0.46rem, 0.62vw, 0.62rem) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 211, 128, 0.12) !important;
  color: rgba(255, 225, 166, 0.94) !important;
  font: inherit !important;
  font-size: clamp(0.54rem, 0.62vw, 0.66rem) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state em > button:disabled,
html[data-active-module="nav-generate"] .generate-upload-inline-state em > span {
  cursor: default !important;
  opacity: 0.72 !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-submitted,
html[data-active-module="nav-generate"] .generate-upload-inline-state.is-review,
html[data-active-module="nav-generate"] .generate-upload-inline-state.is-working,
html[data-active-module="nav-generate"] .generate-upload-inline-state.is-ready {
  border-color: rgba(255, 211, 128, 0.13) !important;
  background:
    linear-gradient(180deg, rgba(12, 10, 8, 0.72), rgba(6, 6, 5, 0.78)),
    rgba(5, 5, 5, 0.78) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-ready {
  border-color: rgba(134, 230, 171, 0.22) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-ready span,
html[data-active-module="nav-generate"] .generate-upload-inline-state.is-ready small {
  color: rgba(187, 242, 205, 0.82) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-ready em > button {
  background: rgba(123, 230, 164, 0.14) !important;
  color: rgba(207, 255, 224, 0.94) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-error,
html[data-active-module="nav-generate"] .generate-upload-inline-state.is-invalid {
  border-color: rgba(255, 143, 113, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(36, 15, 12, 0.82), rgba(13, 8, 7, 0.82)),
    rgba(16, 8, 7, 0.82) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-error span,
html[data-active-module="nav-generate"] .generate-upload-inline-state.is-invalid span {
  color: rgba(255, 176, 146, 0.94) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-error small,
html[data-active-module="nav-generate"] .generate-upload-inline-state.is-invalid small {
  color: rgba(255, 211, 195, 0.72) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-error em > button,
html[data-active-module="nav-generate"] .generate-upload-inline-state.is-invalid em > button {
  background: rgba(255, 143, 113, 0.12) !important;
  color: rgba(255, 221, 208, 0.94) !important;
}

html[data-active-module="nav-generate"] .generate-drop-hint {
  position: absolute !important;
  z-index: 14 !important;
  left: calc(65 / 1672 * 100%) !important;
  top: calc(214 / 846 * 100%) !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: clamp(0.32rem, 0.5vw, 0.48rem) !important;
  width: calc(433 / 1672 * 100%) !important;
  height: calc(379 / 846 * 100%) !important;
  border: 1px dashed rgba(255, 216, 144, 0.54) !important;
  border-radius: clamp(0.78rem, 1vw, 1rem) !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 202, 107, 0.16), transparent 32%),
    rgba(15, 10, 6, 0.72) !important;
  color: rgba(255, 236, 196, 0.96) !important;
  opacity: 0 !important;
  transform: scale(0.985) !important;
  pointer-events: none !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
}

html[data-active-module="nav-generate"] .generate-drop-hint strong,
html[data-active-module="nav-generate"] .generate-drop-hint small {
  display: block !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-drop-hint strong {
  font-size: clamp(1rem, 1.2vw, 1.18rem) !important;
  font-weight: 920 !important;
}

html[data-active-module="nav-generate"] .generate-drop-hint small {
  color: rgba(232, 219, 194, 0.72) !important;
  font-size: clamp(0.68rem, 0.82vw, 0.82rem) !important;
  font-weight: 760 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-drag-over .generate-reference-card-upload img {
  filter: brightness(1.12) saturate(1.12) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-drag-over .generate-drop-hint {
  opacity: 1 !important;
  transform: scale(1) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working strong {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.26rem, 0.34vw, 0.36rem) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted strong::before,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review strong::before,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working strong::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: clamp(0.34rem, 0.42vw, 0.44rem) !important;
  height: clamp(0.34rem, 0.42vw, 0.44rem) !important;
  border-radius: 999px !important;
  background: rgba(255, 238, 187, 0.95) !important;
  box-shadow: 0 0 0.42rem rgba(255, 214, 132, 0.26) !important;
  animation: ai-generate-status-dot-20260608 1.55s ease-in-out infinite !important;
}

@keyframes ai-generate-status-dot-20260608 {
  0%, 100% {
    opacity: 0.44;
    transform: scale(0.82);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted strong::before,
  html[data-active-module="nav-generate"] .generate-submit-status-button.is-review strong::before,
  html[data-active-module="nav-generate"] .generate-submit-status-button.is-working strong::before {
    animation: none !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .content-grid[data-module="nav-generate"] {
    place-items: start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 clamp(0.72rem, 3.4vw, 0.96rem) !important;
    scroll-snap-type: x proximity !important;
  }

  html[data-active-module="nav-generate"] .nav-workbench-generate-reference {
    width: 70rem !important;
    min-width: 70rem !important;
    max-height: none !important;
    margin: 0 !important;
    transform: translateY(clamp(0.78rem, 3.4dvh, 1.15rem)) !important;
    scroll-snap-align: start !important;
  }

  html[data-active-module="nav-generate"] .generate-submit-status-button,
  html[data-active-module="nav-generate"] .generate-card-action-button {
    height: calc(68 / 846 * 100%) !important;
  }

  html[data-active-module="nav-generate"] .generate-upload-inline-state {
    width: calc(370 / 1672 * 100%) !important;
    min-height: calc(106 / 846 * 100%) !important;
  }
}

/* library-row-empty-polish-20260608-1: reduce row metadata, soften secondary actions, and unify empty copy. */
html[data-active-module="nav-library"] .library-row-pills {
  gap: clamp(0.24rem, 0.32vw, 0.34rem) !important;
  max-width: min(100%, 22rem) !important;
}

html[data-active-module="nav-library"] .library-row-pills span {
  min-height: clamp(1.14rem, 1.42vw, 1.3rem) !important;
  padding: 0 clamp(0.38rem, 0.5vw, 0.52rem) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(226, 222, 211, 0.58) !important;
  font-size: clamp(0.6rem, 0.68vw, 0.66rem) !important;
  font-weight: 760 !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-row-pills span.is-good {
  border-color: rgba(132, 208, 164, 0.16) !important;
  background: rgba(86, 172, 122, 0.07) !important;
  color: rgba(184, 229, 201, 0.74) !important;
}

html[data-active-module="nav-library"] .library-row-pills span.is-version,
html[data-active-module="nav-library"] .library-row-pills span.is-practice,
html[data-active-module="nav-library"] .library-row-pills span.is-composer {
  border-color: rgba(255, 255, 255, 0.085) !important;
  background: rgba(255, 255, 255, 0.034) !important;
  color: rgba(222, 218, 207, 0.58) !important;
}

html[data-active-module="nav-library"] .library-row-pills span.is-example {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.032) !important;
  color: rgba(220, 216, 206, 0.54) !important;
}

html[data-active-module="nav-library"] .library-row-detail {
  min-width: 0 !important;
  min-height: clamp(1.72rem, 2.04vw, 1.96rem) !important;
  padding: 0 clamp(0.26rem, 0.4vw, 0.42rem) !important;
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(226, 222, 211, 0.42) !important;
  font-size: clamp(0.68rem, 0.76vw, 0.74rem) !important;
  font-weight: 760 !important;
  box-shadow: none !important;
}

html[data-active-module="nav-library"] .library-row-detail:hover,
html[data-active-module="nav-library"] .library-row-detail[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(235, 231, 220, 0.74) !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty .library-empty-copy,
html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-copy {
  display: grid !important;
  gap: clamp(0.28rem, 0.38vw, 0.4rem) !important;
  align-content: center !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty .library-empty-kicker,
html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty .library-empty-kicker {
  width: max-content !important;
  max-width: 100% !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty strong,
html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty strong {
  color: rgba(246, 242, 231, 0.92) !important;
  font-size: clamp(0.92rem, 1.08vw, 1.02rem) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty p,
html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty p {
  max-width: 34rem !important;
  color: rgba(224, 220, 210, 0.66) !important;
  font-size: clamp(0.74rem, 0.86vw, 0.82rem) !important;
  line-height: 1.45 !important;
}

html[data-active-module="nav-library"] .library-empty-row.is-search-empty small,
html[data-active-module="nav-library"] .library-empty-row.is-with-examples.is-filter-empty small {
  color: rgba(210, 205, 194, 0.46) !important;
  font-size: clamp(0.66rem, 0.76vw, 0.72rem) !important;
  font-weight: 740 !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-library"] .library-row-detail {
    min-height: clamp(1.72rem, 8vw, 2rem) !important;
    padding-inline: clamp(0.22rem, 1.4vw, 0.36rem) !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference {
    width: min(92vw, calc((var(--app-height, 100dvh) - var(--ai-generate-nav-h) - 0.65rem) * 1672 / 846), 1605px) !important;
    max-height: calc(var(--app-height, 100dvh) - var(--ai-generate-nav-h) - 0.65rem) !important;
    transform: translateY(clamp(0.55rem, 1.9dvh, 0.82rem)) !important;
  }
}

/* ai-generate-upload-state-in-card-20260608-1: selected file replaces the upload card content instead of floating above it. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state {
  z-index: 12 !important;
  background: transparent !important;
  background-image: none !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state > img {
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state {
  position: absolute !important;
  z-index: 3 !important;
  left: calc(43 / 514 * 100%) !important;
  top: calc(270 / 758 * 100%) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "kicker action"
    "name action"
    "meta action" !important;
  align-items: center !important;
  gap: clamp(0.16rem, 0.24vw, 0.24rem) clamp(0.56rem, 0.8vw, 0.82rem) !important;
  width: calc(428 / 514 * 100%) !important;
  min-height: calc(112 / 758 * 100%) !important;
  margin: 0 !important;
  padding: clamp(0.68rem, 0.9vw, 0.86rem) clamp(0.78rem, 1.05vw, 1rem) !important;
  border: 1px solid rgba(255, 216, 144, 0.32) !important;
  border-radius: clamp(0.66rem, 0.82vw, 0.88rem) !important;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 214, 139, 0.1), transparent 54%),
    linear-gradient(180deg, rgba(25, 17, 10, 0.92), rgba(10, 8, 6, 0.92)),
    rgba(12, 9, 6, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 221, 0.08),
    0 0.55rem 1.3rem rgba(0, 0, 0, 0.24) !important;
  color: rgba(255, 246, 226, 0.96) !important;
  text-align: left !important;
  text-indent: 0 !important;
  pointer-events: auto !important;
  backdrop-filter: blur(8px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state span,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state strong,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state small,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state em {
  text-indent: 0 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state strong {
  font-size: clamp(0.88rem, 1.05vw, 1.08rem) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state small {
  font-size: clamp(0.62rem, 0.74vw, 0.78rem) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-card-upload.has-upload-state) .generate-reference-upload > img {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state {
    left: calc(38 / 514 * 100%) !important;
    top: calc(262 / 758 * 100%) !important;
    width: calc(438 / 514 * 100%) !important;
    min-height: calc(124 / 758 * 100%) !important;
  }
}

/* library-active-filters-inline-20260608-1 */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel {
  grid-template-rows:
    clamp(2.42rem, 2.9vw, 2.82rem)
    clamp(6.55rem, 8.35vw, 6.95rem)
    clamp(1.32rem, 1.68vw, 1.54rem)
    minmax(0, auto)
    auto !important;
  row-gap: clamp(0.32rem, 0.46vw, 0.5rem) !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel:has(.library-series-grid.is-expanded) {
  grid-template-rows:
    clamp(2.42rem, 2.9vw, 2.82rem)
    minmax(12.2rem, auto)
    clamp(1.32rem, 1.68vw, 1.54rem)
    minmax(0, auto)
    auto !important;
}

html[data-active-module="nav-library"] .library-results-head {
  grid-row: 1 !important;
  grid-template-columns: minmax(20rem, 1fr) minmax(13.5rem, 15.5rem) max-content !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(0.36rem, 0.58vw, 0.68rem) !important;
  min-height: clamp(2.42rem, 2.9vw, 2.82rem) !important;
  position: relative !important;
}

html[data-active-module="nav-library"] .library-top-title {
  display: flex !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-items: center !important;
  gap: clamp(0.5rem, 0.7vw, 0.72rem) !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-top-title > strong {
  flex: 0 0 auto !important;
  color: rgba(255, 232, 187, 0.98) !important;
  font-size: clamp(1rem, 1.12vw, 1.16rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-top-title > button {
  flex: 0 0 auto !important;
}

html[data-active-module="nav-library"] .library-top-title .library-active-filters {
  flex: 1 1 auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: center !important;
  justify-self: auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: clamp(2.02rem, 2.42vw, 2.28rem) !important;
  margin: 0 !important;
  gap: clamp(0.5rem, 0.7vw, 0.76rem) !important;
  overflow: hidden !important;
  z-index: auto !important;
}

html[data-active-module="nav-library"] .library-top-title .library-active-filters > span {
  color: rgba(236, 228, 212, 0.68) !important;
  font-size: clamp(0.74rem, 0.86vw, 0.84rem) !important;
  font-weight: 860 !important;
}

html[data-active-module="nav-library"] .library-top-title .library-active-filter-list {
  flex: 1 1 auto !important;
  gap: clamp(0.38rem, 0.52vw, 0.58rem) !important;
}

html[data-active-module="nav-library"] .library-top-title .library-active-filter-list button,
html[data-active-module="nav-library"] .library-top-title .library-active-filter-list b,
html[data-active-module="nav-library"] .library-top-title .library-active-filter-clear-all {
  min-height: clamp(1.7rem, 2.05vw, 1.92rem) !important;
  font-size: clamp(0.76rem, 0.88vw, 0.86rem) !important;
}

html[data-active-module="nav-library"] .library-top-title .library-active-filter-list button {
  max-width: min(12rem, 20vw) !important;
  padding-inline: clamp(0.72rem, 0.9vw, 0.96rem) clamp(0.48rem, 0.66vw, 0.72rem) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.065) !important;
  color: rgba(244, 240, 230, 0.9) !important;
}

html[data-active-module="nav-library"] .library-top-title .library-active-filter-list button i {
  width: 1.08rem !important;
  height: 1.08rem !important;
  font-size: 0.78rem !important;
}

html[data-active-module="nav-library"] .library-top-title .library-active-filter-clear-all {
  display: none !important;
}

html[data-active-module="nav-library"] .library-search-shell {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 15.5rem !important;
  min-height: clamp(2.12rem, 2.55vw, 2.42rem) !important;
}

html[data-active-module="nav-library"] .library-sort-tabs {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

html[data-active-module="nav-library"] .library-result-count.library-sync-status {
  position: absolute !important;
  top: clamp(-0.18rem, -0.18vw, -0.08rem) !important;
  right: clamp(-0.16rem, -0.14vw, -0.06rem) !important;
  z-index: 3 !important;
  display: grid !important;
  width: clamp(0.62rem, 0.74vw, 0.72rem) !important;
  height: clamp(0.62rem, 0.74vw, 0.72rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 232, 178, 0.38) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 45% 42%, rgba(255, 229, 176, 0.98), rgba(211, 151, 63, 0.9) 56%, rgba(98, 62, 23, 0.92)) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow:
    0 0 0 3px rgba(232, 184, 111, 0.08),
    0 0.26rem 0.72rem rgba(0, 0, 0, 0.28),
    0 0 0.8rem rgba(232, 184, 111, 0.22) !important;
}

html[data-active-module="nav-library"] .library-current-context {
  display: none !important;
}

html[data-active-module="nav-library"] .library-series-section {
  grid-row: 2 !important;
}

html[data-active-module="nav-library"] .library-table-head {
  grid-row: 3 !important;
}

html[data-active-module="nav-library"] .library-track-table {
  grid-row: 4 !important;
}

html[data-active-module="nav-library"] .library-pagination {
  grid-row: 5 !important;
}

@media (max-width: 1180px) {
  html[data-active-module="nav-library"] .library-results-head {
    grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 14.5rem) max-content !important;
  }

  html[data-active-module="nav-library"] .library-sort-tabs {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  html[data-active-module="nav-library"] .library-result-count.library-sync-status {
    display: grid !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel,
  html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel:has(.library-series-grid.is-expanded) {
    grid-template-rows: auto auto auto auto auto !important;
  }

  html[data-active-module="nav-library"] .library-results-head {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: stretch !important;
  }

  html[data-active-module="nav-library"] .library-top-title {
    grid-column: 1 / -1 !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: clamp(0.48rem, 2.4vw, 0.66rem) !important;
    overflow: visible !important;
  }

  html[data-active-module="nav-library"] .library-top-title .library-active-filters {
    flex: 1 1 100% !important;
    width: 100% !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
  }

  html[data-active-module="nav-library"] .library-top-title .library-active-filter-list {
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  html[data-active-module="nav-library"] .library-search-shell {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    max-width: none !important;
  }

  html[data-active-module="nav-library"] .library-sort-tabs {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    justify-self: start !important;
  }
}

/* library-search-status-row-emphasis-20260608-1 */
html[data-active-module="nav-library"] .library-search-shell input {
  font-size: clamp(0.86rem, 0.98vw, 0.96rem) !important;
}

html[data-active-module="nav-library"] .library-track-row {
  grid-template-columns:
    clamp(3.45rem, 4.28vw, 3.95rem)
    minmax(24rem, 1fr)
    clamp(4.35rem, 5.2vw, 4.85rem)
    clamp(4.15rem, 5vw, 4.7rem)
    clamp(3.25rem, 3.95vw, 3.75rem)
    clamp(10.6rem, 12.8vw, 11.85rem) !important;
  min-height: clamp(4.42rem, 5.65vw, 5.28rem) !important;
  column-gap: clamp(0.56rem, 0.82vw, 0.92rem) !important;
}

html[data-active-module="nav-library"] .library-table-head {
  grid-template-columns:
    clamp(3.45rem, 4.28vw, 3.95rem)
    minmax(24rem, 1fr)
    clamp(4.35rem, 5.2vw, 4.85rem)
    clamp(4.15rem, 5vw, 4.7rem)
    clamp(3.25rem, 3.95vw, 3.75rem)
    clamp(10.6rem, 12.8vw, 11.85rem) !important;
}

html[data-active-module="nav-library"] .library-track-title {
  gap: clamp(0.34rem, 0.48vw, 0.52rem) !important;
}

html[data-active-module="nav-library"] .library-track-title strong {
  color: rgba(255, 252, 242, 0.98) !important;
  font-size: clamp(1.08rem, 1.3vw, 1.34rem) !important;
  font-weight: 930 !important;
  line-height: 1.08 !important;
  text-shadow: 0 0.34rem 0.9rem rgba(0, 0, 0, 0.36) !important;
}

html[data-active-module="nav-library"] .library-row-pills {
  max-width: min(100%, 28rem) !important;
}

html[data-active-module="nav-library"] .library-row-actions {
  gap: clamp(0.18rem, 0.32vw, 0.34rem) !important;
}

html[data-active-module="nav-library"] .library-row-actions .library-row-play {
  min-width: clamp(7.1rem, 8.7vw, 8.4rem) !important;
  min-height: clamp(2.24rem, 2.7vw, 2.56rem) !important;
  border-color: rgba(255, 210, 132, 0.52) !important;
  background:
    linear-gradient(100deg, rgba(115, 75, 34, 0.88), rgba(218, 169, 92, 0.74) 54%, rgba(86, 57, 30, 0.9)),
    rgba(232, 184, 111, 0.18) !important;
  color: rgba(255, 247, 230, 0.98) !important;
  font-size: clamp(0.82rem, 0.92vw, 0.96rem) !important;
  font-weight: 900 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 221, 0.24),
    0 0.34rem 0.88rem rgba(0, 0, 0, 0.18),
    0 0 0.82rem rgba(232, 184, 111, 0.12) !important;
}

html[data-active-module="nav-library"] .library-row-actions .library-row-play:not([disabled]):hover {
  filter: brightness(1.08) saturate(1.05) !important;
  transform: translateY(-1px) !important;
}

html[data-active-module="nav-library"] .library-row-detail {
  opacity: 0.72 !important;
}

html[data-active-module="nav-library"] .library-row-favorite {
  color: rgba(229, 224, 214, 0.36) !important;
  font-size: clamp(1.32rem, 1.58vw, 1.58rem) !important;
}

html[data-active-module="nav-library"] .library-series-selected {
  min-height: clamp(1.32rem, 1.58vw, 1.48rem) !important;
  padding: 0.14rem clamp(0.44rem, 0.56vw, 0.58rem) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.8rem) !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-library"] .library-track-row,
  html[data-active-module="nav-library"] .library-track-row.is-example {
    grid-template-columns: clamp(3rem, 15vw, 3.55rem) minmax(0, 1fr) auto !important;
    column-gap: clamp(0.52rem, 2.8vw, 0.7rem) !important;
    min-height: clamp(4.4rem, 20vw, 5.1rem) !important;
  }

  html[data-active-module="nav-library"] .library-track-title strong {
    font-size: clamp(0.94rem, 4.2vw, 1.08rem) !important;
    line-height: 1.12 !important;
  }

  html[data-active-module="nav-library"] .library-row-actions .library-row-play {
    min-width: 0 !important;
    max-width: clamp(4.9rem, 24vw, 6.4rem) !important;
    min-height: clamp(2rem, 9.5vw, 2.36rem) !important;
    padding-inline: clamp(0.46rem, 2vw, 0.66rem) !important;
    font-size: clamp(0.7rem, 3.2vw, 0.8rem) !important;
  }

  html[data-active-module="nav-library"] .library-row-favorite {
    font-size: clamp(1.16rem, 5vw, 1.38rem) !important;
  }
}

/* ai-generate-flow-state-polish-20260608-1: one flow model, clear primary/secondary actions, safer mobile upload state. */
html[data-active-module="nav-generate"] .generate-upload-inline-state[data-flow-step]::before {
  content: attr(data-flow-step) !important;
  position: absolute !important;
  left: clamp(0.72rem, 0.96vw, 0.98rem) !important;
  top: clamp(-0.62rem, -0.58vw, -0.46rem) !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: clamp(1rem, 1.16vw, 1.16rem) !important;
  padding: 0 clamp(0.4rem, 0.52vw, 0.56rem) !important;
  border: 1px solid rgba(255, 216, 144, 0.2) !important;
  border-radius: 999px !important;
  background: rgba(16, 11, 7, 0.92) !important;
  color: rgba(255, 223, 166, 0.78) !important;
  font-size: clamp(0.54rem, 0.62vw, 0.66rem) !important;
  font-weight: 860 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state em > button.generate-inline-action.is-secondary {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(231, 224, 211, 0.78) !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state em > button.generate-inline-action.is-secondary:hover {
  border-color: rgba(255, 216, 144, 0.24) !important;
  background: rgba(255, 216, 144, 0.08) !important;
  color: rgba(255, 238, 204, 0.92) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-invalid,
html[data-active-module="nav-generate"] .generate-upload-inline-state.is-error {
  border-color: rgba(255, 143, 113, 0.36) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button span {
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 clamp(0.1rem, 0.14vw, 0.14rem) !important;
  overflow: hidden !important;
  color: rgba(255, 237, 201, 0.72) !important;
  font-size: clamp(0.56rem, 0.66vw, 0.72rem) !important;
  font-weight: 840 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-idle {
  opacity: 0.92 !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-file-selected {
  opacity: 1 !important;
  filter: saturate(1.06) brightness(1.02) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-invalid,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-error {
  background:
    linear-gradient(180deg, rgba(169, 74, 55, 0.96), rgba(100, 39, 34, 0.98)),
    rgba(98, 38, 34, 0.96) !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "kicker"
      "name"
      "meta"
      "action" !important;
    align-items: start !important;
    align-content: center !important;
    gap: clamp(0.2rem, 1vw, 0.32rem) !important;
    min-height: calc(158 / 758 * 100%) !important;
    padding: clamp(0.7rem, 2.9vw, 0.98rem) clamp(0.74rem, 3.1vw, 1rem) !important;
  }

  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state::before {
    position: static !important;
    grid-row: 1 !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-bottom: 0.06rem !important;
  }

  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state span {
    display: none !important;
  }

  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state strong,
  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state small {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state strong {
    max-height: 2.36em !important;
    line-height: 1.12 !important;
  }

  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state small {
    max-height: 2.7em !important;
    line-height: 1.28 !important;
  }

  html[data-active-module="nav-generate"] .generate-upload-inline-state em {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    white-space: normal !important;
  }

  html[data-active-module="nav-generate"] .generate-upload-inline-state em > button,
  html[data-active-module="nav-generate"] .generate-upload-inline-state em > span {
    max-width: 100% !important;
    min-height: clamp(1.45rem, 6.2vw, 1.8rem) !important;
    white-space: nowrap !important;
  }

  html[data-active-module="nav-generate"] .generate-submit-status-button,
  html[data-active-module="nav-generate"] .generate-card-action-button {
    padding-inline: clamp(0.42rem, 1.9vw, 0.64rem) !important;
  }

  html[data-active-module="nav-generate"] .generate-submit-status-button strong,
  html[data-active-module="nav-generate"] .generate-card-action-button strong,
  html[data-active-module="nav-generate"] .generate-submit-status-button small {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.05 !important;
  }
}

/* library-row-play-arrow-clean-final-20260608-1: final override for the library action icon. */
html[data-active-module="nav-library"] .library-row-actions .library-row-play {
  position: relative !important;
}

html[data-active-module="nav-library"] .library-row-actions .library-row-play::after {
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: clamp(1.26rem, 1.52vw, 1.46rem) !important;
  height: clamp(1.26rem, 1.52vw, 1.46rem) !important;
  margin-left: clamp(0.18rem, 0.28vw, 0.32rem) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(rgba(27, 18, 8, 0.92), rgba(27, 18, 8, 0.92)) 50% 50% / 0.5rem 0.16rem no-repeat,
    linear-gradient(45deg, transparent 43%, rgba(27, 18, 8, 0.92) 44% 58%, transparent 59%) calc(50% + 0.16rem) calc(50% - 0.12rem) / 0.42rem 0.42rem no-repeat,
    linear-gradient(-45deg, transparent 43%, rgba(27, 18, 8, 0.92) 44% 58%, transparent 59%) calc(50% + 0.16rem) calc(50% + 0.12rem) / 0.42rem 0.42rem no-repeat,
    linear-gradient(180deg, rgba(255, 223, 162, 0.96), rgba(203, 143, 61, 0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 218, 0.28),
    0 0.12rem 0.38rem rgba(0, 0, 0, 0.2) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

html[data-active-module="nav-library"] .library-track-row.is-example .library-row-play::after,
html[data-active-module="nav-library"] .library-track-row.is-example .library-row-play[disabled]::after,
html[data-active-module="nav-library"] .library-row-actions .library-row-play[disabled]::after {
  opacity: 0.72 !important;
  background:
    linear-gradient(rgba(15, 12, 8, 0.78), rgba(15, 12, 8, 0.78)) 50% 50% / 0.5rem 0.16rem no-repeat,
    linear-gradient(45deg, transparent 43%, rgba(15, 12, 8, 0.78) 44% 58%, transparent 59%) calc(50% + 0.16rem) calc(50% - 0.12rem) / 0.42rem 0.42rem no-repeat,
    linear-gradient(-45deg, transparent 43%, rgba(15, 12, 8, 0.78) 44% 58%, transparent 59%) calc(50% + 0.16rem) calc(50% + 0.12rem) / 0.42rem 0.42rem no-repeat,
    linear-gradient(180deg, rgba(196, 156, 91, 0.82), rgba(117, 82, 39, 0.72)) !important;
}

/* ai-generate-upload-state-scale-20260608-1: make the selected-score state read as a full card, not a small badge. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state {
  left: calc(26 / 514 * 100%) !important;
  top: calc(246 / 758 * 100%) !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  grid-template-areas:
    "kicker action"
    "name action"
    "meta action" !important;
  align-items: center !important;
  align-content: center !important;
  column-gap: clamp(0.9rem, 1.28vw, 1.36rem) !important;
  row-gap: clamp(0.28rem, 0.44vw, 0.48rem) !important;
  width: calc(462 / 514 * 100%) !important;
  min-height: calc(154 / 758 * 100%) !important;
  padding: clamp(0.9rem, 1.18vw, 1.12rem) clamp(1.05rem, 1.46vw, 1.4rem) !important;
  border-color: rgba(255, 205, 114, 0.46) !important;
  border-radius: clamp(0.82rem, 1vw, 1.04rem) !important;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 210, 126, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(38, 25, 11, 0.94), rgba(14, 10, 6, 0.94)),
    rgba(12, 9, 6, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 216, 0.1),
    0 0.72rem 1.7rem rgba(0, 0, 0, 0.3),
    0 0 1.2rem rgba(219, 154, 63, 0.1) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state[data-flow-step]::before {
  left: clamp(0.88rem, 1.12vw, 1.12rem) !important;
  top: clamp(-0.78rem, -0.72vw, -0.58rem) !important;
  min-height: clamp(1.25rem, 1.46vw, 1.42rem) !important;
  padding: 0 clamp(0.52rem, 0.72vw, 0.72rem) !important;
  border-color: rgba(255, 214, 140, 0.32) !important;
  color: rgba(255, 222, 161, 0.9) !important;
  font-size: clamp(0.74rem, 0.84vw, 0.86rem) !important;
  font-weight: 900 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state span,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state strong,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state small,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state em {
  line-height: 1.08 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state span {
  color: rgba(255, 221, 158, 0.9) !important;
  font-size: clamp(0.9rem, 1.02vw, 1.04rem) !important;
  font-weight: 890 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state strong {
  color: rgba(255, 250, 235, 0.99) !important;
  font-size: clamp(1.18rem, 1.46vw, 1.48rem) !important;
  font-weight: 940 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state small {
  color: rgba(235, 222, 193, 0.84) !important;
  font-size: clamp(0.84rem, 1vw, 1rem) !important;
  font-weight: 790 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state em {
  justify-content: flex-end !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state em > button,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state em > span {
  min-width: clamp(5.8rem, 7.2vw, 7.15rem) !important;
  max-width: clamp(5.8rem, 7.2vw, 7.15rem) !important;
  min-height: clamp(2.2rem, 2.62vw, 2.52rem) !important;
  padding: 0 clamp(0.72rem, 0.92vw, 0.96rem) !important;
  border: 1px solid rgba(255, 230, 181, 0.18) !important;
  background: rgba(255, 220, 160, 0.16) !important;
  color: rgba(255, 238, 204, 0.96) !important;
  font-size: clamp(0.84rem, 0.96vw, 0.96rem) !important;
  font-weight: 900 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state em > button:hover {
  border-color: rgba(255, 230, 181, 0.34) !important;
  background: rgba(255, 220, 160, 0.22) !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state {
    left: calc(34 / 514 * 100%) !important;
    top: calc(238 / 758 * 100%) !important;
    width: calc(446 / 514 * 100%) !important;
    min-height: calc(188 / 758 * 100%) !important;
    row-gap: clamp(0.28rem, 1.35vw, 0.44rem) !important;
    padding: clamp(0.9rem, 3.6vw, 1.18rem) clamp(0.9rem, 3.8vw, 1.22rem) !important;
  }

  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state span {
    display: block !important;
    font-size: clamp(0.86rem, 3.5vw, 1rem) !important;
  }

  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state strong {
    max-height: 2.42em !important;
    font-size: clamp(1.06rem, 4.7vw, 1.34rem) !important;
    line-height: 1.12 !important;
  }

  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state small {
    max-height: 3em !important;
    font-size: clamp(0.82rem, 3.5vw, 0.98rem) !important;
    line-height: 1.26 !important;
  }

  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state em > button,
  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state em > span {
    min-width: clamp(5.8rem, 30vw, 7rem) !important;
    max-width: 100% !important;
    min-height: clamp(2.05rem, 8.8vw, 2.4rem) !important;
    font-size: clamp(0.8rem, 3.3vw, 0.94rem) !important;
  }
}

/* library-row-play-arrow-plain-final-20260608-1: direct large arrow, no circular badge. */
html[data-active-module="nav-library"] .library-row-actions .library-row-play::after {
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: clamp(1.18rem, 1.46vw, 1.42rem) !important;
  height: clamp(1.18rem, 1.46vw, 1.42rem) !important;
  margin-left: clamp(0.06rem, 0.16vw, 0.18rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M4.8 11h11.4M12.3 6.5 16.8 11l-4.5 4.5' stroke='%23fff2d2' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.16rem 1.16rem no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
  opacity: 0.98 !important;
}

html[data-active-module="nav-library"] .library-track-row.is-example .library-row-play::after,
html[data-active-module="nav-library"] .library-track-row.is-example .library-row-play[disabled]::after,
html[data-active-module="nav-library"] .library-row-actions .library-row-play[disabled]::after {
  opacity: 0.38 !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M4.8 11h11.4M12.3 6.5 16.8 11l-4.5 4.5' stroke='%23e5c789' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.16rem 1.16rem no-repeat !important;
}

/* library-real-row-polish-20260608-1: real-only library rows, clearer details, cleaner collection labels. */
html[data-active-module="nav-library"] .library-results-head {
  grid-template-columns: minmax(16rem, 1fr) minmax(22rem, 30rem) max-content !important;
}

html[data-active-module="nav-library"] .library-search-shell {
  max-width: min(30rem, 100%) !important;
}

html[data-active-module="nav-library"] .library-series-card {
  display: grid !important;
  align-content: end !important;
  justify-items: start !important;
  padding: clamp(0.58rem, 0.76vw, 0.78rem) clamp(0.62rem, 0.82vw, 0.84rem) !important;
}

html[data-active-module="nav-library"] .library-series-card strong,
html[data-active-module="nav-library"] .library-series-card small {
  position: relative !important;
  z-index: 2 !important;
  max-width: min(100%, 7.4rem) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  text-shadow: 0 0.18rem 0.56rem rgba(0, 0, 0, 0.68) !important;
}

html[data-active-module="nav-library"] .library-series-card strong {
  color: rgba(255, 246, 224, 0.98) !important;
  font-size: clamp(0.86rem, 0.98vw, 1rem) !important;
  line-height: 1.05 !important;
}

html[data-active-module="nav-library"] .library-series-card small {
  display: none !important;
  margin-top: 0.16rem !important;
  color: rgba(237, 224, 196, 0.74) !important;
  font-size: clamp(0.62rem, 0.72vw, 0.7rem) !important;
  font-weight: 760 !important;
  line-height: 1.05 !important;
}

html[data-active-module="nav-library"] .library-series-card.is-all-series small,
html[data-active-module="nav-library"] .library-series-more-card small {
  display: block !important;
}

html[data-active-module="nav-library"] .library-series-card.is-active strong,
html[data-active-module="nav-library"] .library-series-card.is-active small {
  background: transparent !important;
}

html[data-active-module="nav-library"] .library-track-title {
  align-content: center !important;
  gap: clamp(0.16rem, 0.26vw, 0.28rem) !important;
}

html[data-active-module="nav-library"] .library-track-title strong {
  max-width: min(100%, 42rem) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-track-title-meta {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: clamp(0.22rem, 0.34vw, 0.36rem) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html[data-active-module="nav-library"] .library-track-title-meta span {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: min(11rem, 34%) !important;
  padding: 0.1rem clamp(0.34rem, 0.46vw, 0.48rem) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(226, 220, 207, 0.68) !important;
  font-size: clamp(0.62rem, 0.72vw, 0.7rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-row-detail {
  gap: 0.28rem !important;
  min-width: clamp(4.1rem, 4.8vw, 4.7rem) !important;
  opacity: 1 !important;
  border-color: rgba(255, 223, 166, 0.18) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(245, 238, 222, 0.88) !important;
  font-size: clamp(0.76rem, 0.86vw, 0.84rem) !important;
}

html[data-active-module="nav-library"] .library-row-detail::before {
  content: "" !important;
  width: 0.78rem !important;
  height: 0.78rem !important;
  flex: 0 0 auto !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='7' cy='7' r='5.1' stroke='%23f1dfb8' stroke-width='1.25'/%3E%3Cpath d='M7 6.4v3.2M7 4.4h.01' stroke='%23f1dfb8' stroke-width='1.35' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  opacity: 0.88 !important;
}

html[data-active-module="nav-library"] .library-row-detail:hover,
html[data-active-module="nav-library"] .library-row-detail[aria-pressed="true"] {
  border-color: rgba(255, 223, 166, 0.34) !important;
  background: rgba(232, 184, 111, 0.13) !important;
  color: rgba(255, 239, 205, 0.98) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="nav-library"] .library-results-head {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem) max-content !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="nav-library"] .library-track-title-meta span {
    max-width: min(9rem, 46%) !important;
  }
}

/* ai-generate-click-through-fix-20260608-1: selected-file art should not cover the real generate/resume action below it. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state {
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state * {
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button {
  z-index: 24 !important;
  pointer-events: auto !important;
}

/* library-real-counts-search-left-20260608-1: real counts, compact short-list state, and search expansion. */
html[data-active-module="nav-library"] .library-results-head {
  grid-template-columns: max-content minmax(26rem, 1fr) max-content !important;
  gap: clamp(0.62rem, 0.9vw, 0.92rem) !important;
}

html[data-active-module="nav-library"] .library-top-title {
  width: auto !important;
  min-width: 0 !important;
  max-width: min(42vw, 42rem) !important;
  flex: 0 1 auto !important;
}

html[data-active-module="nav-library"] .library-top-title .library-active-filters {
  flex: 0 1 auto !important;
  max-width: min(32vw, 30rem) !important;
}

html[data-active-module="nav-library"] .library-top-title .library-active-filter-list {
  flex: 0 1 auto !important;
}

html[data-active-module="nav-library"] .library-search-shell {
  max-width: none !important;
  justify-self: stretch !important;
}

html[data-active-module="nav-library"] .library-filter-grid button,
html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-training="all"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: clamp(0.34rem, 0.5vw, 0.5rem) !important;
  padding-inline: clamp(0.74rem, 0.98vw, 0.98rem) clamp(0.52rem, 0.74vw, 0.76rem) !important;
  text-align: left !important;
  font-size: clamp(0.9rem, 1.02vw, 1rem) !important;
  font-weight: 880 !important;
}

html[data-active-module="nav-library"] .library-filter-grid button span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-filter-grid button small {
  display: inline-grid !important;
  place-items: center !important;
  min-width: clamp(1.34rem, 1.54vw, 1.52rem) !important;
  height: clamp(1.18rem, 1.4vw, 1.34rem) !important;
  padding-inline: 0.28rem !important;
  border: 1px solid rgba(255, 236, 198, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 232, 180, 0.08) !important;
  color: rgba(242, 226, 196, 0.82) !important;
  font-size: clamp(0.64rem, 0.74vw, 0.72rem) !important;
  font-weight: 880 !important;
  line-height: 1 !important;
}

html[data-active-module="nav-library"] .library-filter-grid button.is-active small {
  border-color: rgba(255, 248, 224, 0.28) !important;
  background: rgba(255, 245, 216, 0.18) !important;
  color: rgba(255, 252, 238, 0.96) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button.is-empty:not(.is-active),
html[data-active-module="nav-library"] .library-filter-grid button.is-disabled:not(.is-active) {
  opacity: 0.44 !important;
  filter: saturate(0.72) !important;
  cursor: default !important;
}

html[data-active-module="nav-library"] .library-filter-grid button.is-empty:not(.is-active) small {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(220, 214, 200, 0.58) !important;
}

html[data-active-module="nav-library"] .library-series-card[title*="·"] {
  align-content: end !important;
}

html[data-active-module="nav-library"] .library-short-list-prompt {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(18rem, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(0.48rem, 0.7vw, 0.78rem) !important;
  min-height: clamp(3rem, 3.8vw, 3.42rem) !important;
  padding: clamp(0.58rem, 0.78vw, 0.78rem) clamp(0.8rem, 1.08vw, 1.08rem) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 224, 170, 0.12) !important;
  border-radius: 0.7rem !important;
  background:
    linear-gradient(90deg, rgba(28, 22, 14, 0.74), rgba(8, 9, 9, 0.42)),
    rgba(255, 255, 255, 0.024) !important;
  box-shadow: inset 0 1px 0 rgba(255, 245, 224, 0.04) !important;
}

html[data-active-module="nav-library"] .library-short-list-prompt span,
html[data-active-module="nav-library"] .library-short-list-prompt strong,
html[data-active-module="nav-library"] .library-short-list-prompt p {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

html[data-active-module="nav-library"] .library-short-list-prompt span {
  color: rgba(244, 211, 151, 0.82) !important;
  font-size: clamp(0.66rem, 0.78vw, 0.74rem) !important;
  font-weight: 860 !important;
}

html[data-active-module="nav-library"] .library-short-list-prompt strong {
  color: rgba(255, 248, 232, 0.96) !important;
  font-size: clamp(0.9rem, 1.02vw, 1rem) !important;
  font-weight: 900 !important;
}

html[data-active-module="nav-library"] .library-short-list-prompt p {
  color: rgba(224, 218, 204, 0.62) !important;
  font-size: clamp(0.72rem, 0.84vw, 0.82rem) !important;
  font-weight: 720 !important;
}

html[data-active-module="nav-library"] .library-short-list-prompt button {
  min-width: clamp(6rem, 7.3vw, 7rem) !important;
  min-height: clamp(2.24rem, 2.7vw, 2.56rem) !important;
  padding: 0 clamp(0.78rem, 1vw, 1rem) !important;
  border: 1px solid rgba(232, 184, 111, 0.28) !important;
  border-radius: 0.54rem !important;
  background: rgba(232, 184, 111, 0.12) !important;
  color: rgba(255, 232, 186, 0.9) !important;
  font-size: clamp(0.82rem, 0.92vw, 0.96rem) !important;
  font-weight: 900 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 221, 0.12),
    0 0.34rem 0.88rem rgba(0, 0, 0, 0.16) !important;
}

html[data-active-module="nav-library"] .library-short-list-prompt button:hover {
  filter: brightness(1.08) saturate(1.04) !important;
  transform: translateY(-1px) !important;
}

html[data-active-module="nav-library"] .library-row-free {
  min-width: clamp(4.5rem, 5.3vw, 5rem) !important;
}

html[data-active-module="nav-library"] .nav-workbench-library {
  grid-template-columns: minmax(16.3rem, 0.3fr) minmax(0, 1fr) !important;
}

/* library-filter-count-badge-fit-20260608-1: keep Chinese filter labels readable beside counts. */
html[data-active-module="nav-library"] .library-filter-grid button,
html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-training="all"] {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-inline: clamp(0.42rem, 0.58vw, 0.58rem) clamp(1.08rem, 1.34vw, 1.22rem) !important;
  gap: 0 !important;
  font-size: clamp(0.82rem, 0.94vw, 0.9rem) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button span {
  max-width: 100% !important;
  text-align: center !important;
}

html[data-active-module="nav-library"] .library-filter-grid button small {
  position: absolute !important;
  top: 50% !important;
  right: clamp(0.22rem, 0.32vw, 0.32rem) !important;
  min-width: clamp(0.86rem, 1.04vw, 1rem) !important;
  height: clamp(0.86rem, 1.04vw, 1rem) !important;
  padding-inline: 0.14rem !important;
  transform: translateY(-50%) !important;
  font-size: clamp(0.5rem, 0.58vw, 0.56rem) !important;
}

/* library-table-title-align-series-20260608-1: align the track-list heading with the series heading above it. */
html[data-active-module="nav-library"] .library-table-head > span:first-child {
  display: none !important;
}

html[data-active-module="nav-library"] .library-table-head .library-table-title {
  grid-column: 1 / 3 !important;
  justify-self: start !important;
  padding-left: 0 !important;
}

/* library-filter-rail-fill-gap-20260608-1: widen the filter rail into the unused black gap so labels stay readable with counts. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library,
html[data-active-module="nav-library"] .nav-workbench-library {
  grid-template-columns: minmax(19.4rem, 0.35fr) minmax(0, 1fr) !important;
  column-gap: clamp(0.62rem, 0.92vw, 1rem) !important;
}

html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail,
html[data-active-module="nav-library"] .library-filter-rail {
  width: 100% !important;
  max-width: none !important;
  padding-inline: clamp(1.05rem, 1.3vw, 1.34rem) !important;
}

html[data-active-module="nav-library"] .library-filter-grid,
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(1) .library-filter-grid,
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(2) .library-filter-grid,
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(3) .library-filter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.42rem, 0.58vw, 0.58rem) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button,
html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-training="all"] {
  padding-inline: clamp(0.62rem, 0.78vw, 0.82rem) clamp(1.12rem, 1.34vw, 1.26rem) !important;
  font-size: clamp(0.86rem, 0.98vw, 0.94rem) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="nav-library"] .nav-workbench-library {
    grid-template-columns: minmax(17.4rem, 0.34fr) minmax(0, 1fr) !important;
  }

  html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library {
    grid-template-columns: minmax(17.4rem, 0.34fr) minmax(0, 1fr) !important;
    column-gap: clamp(0.56rem, 0.82vw, 0.92rem) !important;
  }

  html[data-active-module="nav-library"] .library-results-head {
    grid-template-columns: minmax(0, 0.86fr) minmax(20rem, 1.14fr) max-content !important;
  }

  html[data-active-module="nav-library"] .library-top-title,
  html[data-active-module="nav-library"] .library-top-title .library-active-filters {
    max-width: none !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="nav-library"] .library-results-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-active-module="nav-library"] .library-short-list-prompt {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "label action"
      "title action"
      "copy copy" !important;
    align-items: center !important;
    min-height: auto !important;
  }

  html[data-active-module="nav-library"] .library-short-list-prompt span {
    grid-area: label !important;
  }

  html[data-active-module="nav-library"] .library-short-list-prompt strong {
    grid-area: title !important;
  }

  html[data-active-module="nav-library"] .library-short-list-prompt p {
    grid-area: copy !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }

  html[data-active-module="nav-library"] .library-short-list-prompt button {
    grid-area: action !important;
  }
}

/* ai-generate-complete-gold-final-20260608-1: completion keeps the strong gold brand tone, never green. */
html[data-active-module="nav-generate"] .generate-complete-toast {
  border-color: rgba(255, 214, 132, 0.52) !important;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 224, 153, 0.24), transparent 58%),
    linear-gradient(180deg, rgba(215, 151, 40, 0.98), rgba(154, 92, 18, 0.98)),
    rgba(187, 115, 24, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.24),
    0 0.7rem 1.45rem rgba(0, 0, 0, 0.3),
    0 0 1.35rem rgba(232, 168, 55, 0.34) !important;
  color: rgba(255, 250, 236, 0.99) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-ready {
  border-color: rgba(255, 214, 132, 0.5) !important;
  background:
    linear-gradient(180deg, rgba(219, 154, 43, 0.98), rgba(161, 95, 18, 0.98)),
    rgba(190, 116, 23, 0.98) !important;
  color: rgba(255, 250, 236, 0.99) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.24),
    0 0.56rem 1.18rem rgba(0, 0, 0, 0.24),
    0 0 1.2rem rgba(232, 168, 55, 0.28) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-ready span,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-ready strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-ready small {
  color: rgba(255, 250, 236, 0.99) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-ready {
  border-color: rgba(255, 214, 132, 0.42) !important;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 224, 153, 0.2), transparent 58%),
    linear-gradient(180deg, rgba(42, 27, 10, 0.95), rgba(16, 10, 5, 0.95)),
    rgba(16, 10, 5, 0.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.12),
    0 0.72rem 1.7rem rgba(0, 0, 0, 0.3),
    0 0 1.18rem rgba(232, 168, 55, 0.16) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-ready span,
html[data-active-module="nav-generate"] .generate-upload-inline-state.is-ready strong,
html[data-active-module="nav-generate"] .generate-upload-inline-state.is-ready small {
  color: rgba(255, 236, 190, 0.96) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-ready em > button {
  border-color: rgba(255, 230, 181, 0.22) !important;
  background: rgba(255, 220, 160, 0.18) !important;
  color: rgba(255, 242, 216, 0.98) !important;
}

/* ai-generate-library-preview-lock-20260608-1: generated markers, selected-score thumbnails, and clearer busy lock. */
html[data-active-module="nav-library"] .library-track-title-main {
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.42rem, 0.58vw, 0.64rem) !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-active-module="nav-library"] .library-track-title-main strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-library"] .library-new-generated-pill {
  flex: 0 0 auto !important;
  display: inline-grid !important;
  place-items: center !important;
  min-height: clamp(1.18rem, 1.42vw, 1.34rem) !important;
  padding: 0 clamp(0.42rem, 0.56vw, 0.62rem) !important;
  border: 1px solid rgba(255, 222, 152, 0.42) !important;
  border-radius: 0.42rem !important;
  background:
    linear-gradient(180deg, rgba(218, 153, 40, 0.96), rgba(145, 83, 16, 0.96)),
    rgba(190, 113, 22, 0.96) !important;
  color: rgba(255, 250, 235, 0.99) !important;
  font-size: clamp(0.64rem, 0.74vw, 0.72rem) !important;
  font-weight: 930 !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.22),
    0 0.24rem 0.68rem rgba(0, 0, 0, 0.2),
    0 0 0.72rem rgba(232, 168, 55, 0.18) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.has-preview {
  grid-template-columns: clamp(3.55rem, 4.7vw, 4.55rem) minmax(0, 1fr) max-content !important;
  grid-template-areas:
    "preview kicker action"
    "preview name action"
    "preview meta action" !important;
}

html[data-active-module="nav-generate"] .generate-score-preview {
  grid-area: preview !important;
  position: relative !important;
  width: clamp(3.55rem, 4.7vw, 4.55rem) !important;
  aspect-ratio: 0.74 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 229, 176, 0.24) !important;
  border-radius: 0.42rem !important;
  background: rgba(255, 247, 224, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.1),
    0 0.36rem 0.82rem rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="nav-generate"] .generate-score-preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: contrast(1.05) brightness(0.94) saturate(0.92) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-locked .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-locked .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-locked .generate-editor-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-locked .generate-inspiration-action-button {
  opacity: 0.42 !important;
  filter: grayscale(0.2) saturate(0.76) brightness(0.82) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-locked .generate-editor-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-locked .generate-inspiration-action-button {
  cursor: not-allowed !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .generate-upload-inline-state.has-preview {
    grid-template-columns: clamp(3.4rem, 15vw, 4.1rem) minmax(0, 1fr) !important;
    grid-template-areas:
      "preview kicker"
      "preview name"
      "preview meta"
      "action action" !important;
    column-gap: clamp(0.66rem, 2.8vw, 0.86rem) !important;
  }

  html[data-active-module="nav-generate"] .generate-score-preview {
    width: clamp(3.4rem, 15vw, 4.1rem) !important;
  }

  html[data-active-module="nav-library"] .library-track-title-main {
    gap: clamp(0.32rem, 1.4vw, 0.46rem) !important;
  }

  html[data-active-module="nav-library"] .library-new-generated-pill {
    min-height: clamp(1rem, 4.6vw, 1.18rem) !important;
    padding-inline: clamp(0.34rem, 1.4vw, 0.48rem) !important;
    font-size: clamp(0.56rem, 2.5vw, 0.66rem) !important;
  }
}

/* library-track-columns-compact-20260608-1: reduce wide-screen whitespace between track info and row actions. */
@media (min-width: 1180px) {
  html[data-active-module="nav-library"] .library-table-head,
  html[data-active-module="nav-library"] .library-track-row {
    grid-template-columns:
      clamp(3.4rem, 4.05vw, 3.82rem)
      minmax(18rem, min(35vw, 40rem))
      clamp(4.05rem, 4.75vw, 4.45rem)
      clamp(3.95rem, 4.55vw, 4.35rem)
      clamp(3.05rem, 3.55vw, 3.35rem)
      clamp(11.4rem, 12vw, 12.2rem) !important;
    column-gap: clamp(0.44rem, 0.62vw, 0.7rem) !important;
    justify-content: start !important;
  }

  html[data-active-module="nav-library"] .library-row-actions {
    justify-self: start !important;
  }

  html[data-active-module="nav-library"] .library-row-actions .library-row-play {
    min-width: clamp(7.55rem, 8.3vw, 8.05rem) !important;
  }

  html[data-active-module="nav-library"] .library-row-title-button strong,
  html[data-active-module="nav-library"] .library-track-title strong {
    max-width: min(100%, 37rem) !important;
  }
}

/* ai-generate-inline-busy-centered-20260608-1: busy card keeps only centered status and file name. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "kicker"
    "name" !important;
  justify-items: center !important;
  align-content: center !important;
  row-gap: clamp(0.36rem, 0.52vw, 0.56rem) !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered[data-flow-step]::before {
  content: none !important;
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  display: grid !important;
  z-index: 42 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > span,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > span,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > span {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered span,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered strong {
  width: min(100%, 22rem) !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered strong {
  font-size: clamp(1.22rem, 1.54vw, 1.56rem) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered small,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered em {
  display: none !important;
}

/* ai-generate-queue-card-borderless-final-20260608-1: final override, match the borderless editor/inspiration cards. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state:has(.generate-upload-inline-state.is-inline-centered),
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state::before,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state::after,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state:has(.generate-upload-inline-state.is-inline-centered)::before,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state:has(.generate-upload-inline-state.is-inline-centered)::after,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered::before,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ai-generate-state-polish-20260608-1: final placement for calmer busy/completion states. */
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  border: 0 !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 228, 160, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(206, 139, 28, 0.86), rgba(134, 78, 13, 0.88)),
    rgba(154, 91, 16, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.14),
    0 0.46rem 0.92rem rgba(0, 0, 0, 0.2),
    0 0 0.82rem rgba(232, 168, 55, 0.14) !important;
  cursor: default !important;
  filter: saturate(0.94) brightness(0.96) !important;
  animation: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working small {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working strong {
  font-size: clamp(1rem, 1.12vw, 1.12rem) !important;
  font-weight: 930 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(219, 148, 35, 0.24), transparent 34%),
    radial-gradient(ellipse at 50% 2%, rgba(84, 52, 20, 0.44), transparent 62%),
    linear-gradient(180deg, rgba(31, 22, 12, 0.92), rgba(8, 8, 7, 0.9)),
    rgba(10, 9, 7, 0.96) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered small {
  width: min(100%, 20rem) !important;
  color: rgba(255, 226, 164, 0.9) !important;
  font-size: clamp(0.9rem, 1.08vw, 1.08rem) !important;
  letter-spacing: 0 !important;
}

html[data-active-module="nav-generate"] .generate-complete-toast {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: clamp(0.12rem, 0.22vw, 0.22rem) !important;
  border: 0 !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 231, 170, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(211, 146, 35, 0.9), rgba(143, 84, 15, 0.92)),
    rgba(160, 96, 18, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.18),
    0 0.54rem 1.06rem rgba(0, 0, 0, 0.24),
    0 0 0.92rem rgba(232, 168, 55, 0.18) !important;
}

html[data-active-module="nav-generate"] .generate-complete-toast span {
  margin: 0 !important;
  color: rgba(255, 250, 236, 0.99) !important;
  font-size: clamp(1rem, 1.16vw, 1.16rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html[data-active-module="nav-generate"] .generate-complete-toast small {
  display: block !important;
  margin: 0 !important;
  color: rgba(255, 236, 190, 0.82) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.78rem) !important;
  font-weight: 820 !important;
  line-height: 1 !important;
}

/* ai-generate-flow-final-polish-20260608-1: clearer hierarchy, state-bar button, and stronger new-generated marker. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > strong {
  color: rgba(255, 248, 234, 0.84) !important;
  font-size: clamp(0.9rem, 1.12vw, 1.12rem) !important;
  font-weight: 820 !important;
  text-shadow: 0 0.16rem 0.46rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > span {
  color: rgba(255, 226, 158, 1) !important;
  font-size: clamp(1.48rem, 1.98vw, 1.98rem) !important;
  font-weight: 980 !important;
  text-shadow:
    0 0.2rem 0.62rem rgba(0, 0, 0, 0.42),
    0 0 0.82rem rgba(226, 158, 48, 0.14) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > small {
  display: inline-grid !important;
  place-items: center !important;
  justify-self: center !important;
  width: auto !important;
  max-width: min(100%, 21rem) !important;
  min-height: clamp(1.32rem, 1.56vw, 1.56rem) !important;
  padding: 0 clamp(0.58rem, 0.74vw, 0.74rem) !important;
  border: 1px solid rgba(255, 226, 164, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 218, 140, 0.08) !important;
  color: rgba(255, 226, 164, 0.92) !important;
  font-size: clamp(0.82rem, 0.96vw, 0.96rem) !important;
  font-weight: 850 !important;
  text-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  pointer-events: none !important;
  transform: none !important;
  opacity: 0.92 !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted:hover,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review:hover,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working:hover,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted:active,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review:active,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working:active {
  transform: none !important;
  filter: saturate(0.94) brightness(0.96) !important;
}

html[data-active-module="nav-library"] .library-track-row.is-recent-generated {
  background:
    linear-gradient(90deg, rgba(226, 159, 48, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.025) !important;
}

html[data-active-module="nav-library"] .library-new-generated-pill {
  border-color: rgba(255, 232, 176, 0.5) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 241, 196, 0.24), transparent 60%),
    linear-gradient(180deg, rgba(218, 153, 40, 0.98), rgba(139, 80, 14, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.24),
    0 0 0.82rem rgba(232, 168, 55, 0.26) !important;
}

/* ai-generate-hover-scale-eof-20260611-1: final visible hover feedback, no border line. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card,
.nav-workbench-generate-reference .generate-reference-card {
  transition:
    transform 180ms cubic-bezier(0.2, 0.72, 0.24, 1),
    filter 180ms ease,
    box-shadow 180ms ease !important;
  transform-origin: center center !important;
  will-change: transform, filter, box-shadow !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card.is-hovered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-hover-upload .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-hover-editor .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-hover-inspiration .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:hover) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:hover) .generate-reference-card-inspiration,
.nav-workbench-generate-reference .generate-reference-card:hover,
.nav-workbench-generate-reference .generate-reference-card.is-hovered {
  z-index: 6 !important;
  transform: scale(1.045) !important;
  filter: saturate(1.1) brightness(1.06) !important;
  box-shadow:
    0 1.42rem 2.35rem rgba(0, 0, 0, 0.42),
    0 0.35rem 1.25rem rgba(255, 232, 184, 0.12) !important;
  outline: 0 !important;
  border-color: transparent !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-hotspot:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-hotspot:focus-visible,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-submit-status-button:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-submit-status-button:focus-visible,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-card-action-button:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-card-action-button:focus-visible,
.nav-workbench-generate-reference .generate-reference-hotspot:hover,
.nav-workbench-generate-reference .generate-reference-hotspot:focus-visible,
.nav-workbench-generate-reference .generate-submit-status-button:hover,
.nav-workbench-generate-reference .generate-submit-status-button:focus-visible,
.nav-workbench-generate-reference .generate-card-action-button:hover,
.nav-workbench-generate-reference .generate-card-action-button:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
}

/* ai-generate-hover-scale-final-20260611-1: final visible hover feedback, no border line. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card,
.nav-workbench-generate-reference .generate-reference-card {
  transition:
    transform 180ms cubic-bezier(0.2, 0.72, 0.24, 1),
    filter 180ms ease,
    box-shadow 180ms ease !important;
  transform-origin: center center !important;
  will-change: transform, filter, box-shadow !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card.is-hovered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-hover-upload .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-hover-editor .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-hover-inspiration .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:hover) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:hover) .generate-reference-card-inspiration,
.nav-workbench-generate-reference .generate-reference-card:hover,
.nav-workbench-generate-reference .generate-reference-card.is-hovered {
  z-index: 6 !important;
  transform: scale(1.045) !important;
  filter: saturate(1.1) brightness(1.06) !important;
  box-shadow:
    0 1.42rem 2.35rem rgba(0, 0, 0, 0.42),
    0 0.35rem 1.25rem rgba(255, 232, 184, 0.12) !important;
  outline: 0 !important;
  border-color: transparent !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-hotspot:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-hotspot:focus-visible,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-submit-status-button:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-submit-status-button:focus-visible,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-card-action-button:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-card-action-button:focus-visible,
.nav-workbench-generate-reference .generate-reference-hotspot:hover,
.nav-workbench-generate-reference .generate-reference-hotspot:focus-visible,
.nav-workbench-generate-reference .generate-submit-status-button:hover,
.nav-workbench-generate-reference .generate-submit-status-button:focus-visible,
.nav-workbench-generate-reference .generate-card-action-button:hover,
.nav-workbench-generate-reference .generate-card-action-button:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
}

/* ai-generate-action-feedback-stable-20260610-1: prevent press/hover feedback from moving adjacent content in the three-module area. */
html[data-active-module="nav-generate"] .generate-submit-status-button:hover,
html[data-active-module="nav-generate"] .generate-submit-status-button:focus-visible,
html[data-active-module="nav-generate"] .generate-card-action-button:hover,
html[data-active-module="nav-generate"] .generate-card-action-button:focus-visible,
html[data-active-module="nav-generate"] .generate-editor-action-button:hover,
html[data-active-module="nav-generate"] .generate-editor-action-button:focus-visible,
html[data-active-module="nav-generate"] .generate-inspiration-action-button:hover,
html[data-active-module="nav-generate"] .generate-inspiration-action-button:focus-visible,
html[data-active-module="nav-generate"] .generate-reference-hotspot:hover,
html[data-active-module="nav-generate"] .generate-reference-hotspot:focus-visible,
html[data-active-module="nav-generate"] .generate-submit-status-button:focus,
html[data-active-module="nav-generate"] .generate-card-action-button:focus,
html[data-active-module="nav-generate"] .generate-reference-hotspot:focus {
  transform: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button,
html[data-active-module="nav-generate"] .generate-card-action-button,
html[data-active-module="nav-generate"] .generate-editor-action-button,
html[data-active-module="nav-generate"] .generate-inspiration-action-button,
html[data-active-module="nav-generate"] .generate-reference-hotspot {
  transition-property: box-shadow, filter, background-color, color, opacity, border-color !important;
  will-change: box-shadow, filter, background-color !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button:active,
html[data-active-module="nav-generate"] .generate-card-action-button:active,
html[data-active-module="nav-generate"] .generate-reference-hotspot:active,
html[data-active-module="nav-generate"] .generate-editor-action-button:active,
html[data-active-module="nav-generate"] .generate-inspiration-action-button:active {
  transform: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card {
  transition-property: box-shadow, filter, border-color, background-color !important;
  will-change: box-shadow, filter !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:focus-visible) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:focus-visible) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:hover) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:focus-visible) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:hover) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:focus-visible) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:hover) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-submit:hover) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:focus-visible) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-submit:focus-visible) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:hover) .generate-editor-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:focus-visible) .generate-editor-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:hover) .generate-inspiration-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:focus-visible) .generate-inspiration-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:active) .generate-editor-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:hover) .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:focus-visible) .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:active) .generate-inspiration-action-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:active) .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:active) .generate-reference-card-upload {
  transform: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button:active,
html[data-active-module="nav-generate"] .generate-card-action-button:active,
html[data-active-module="nav-generate"] .generate-editor-action-button:active,
html[data-active-module="nav-generate"] .generate-inspiration-action-button:active,
html[data-active-module="nav-generate"] .generate-reference-hotspot:active {
  transform: none !important;
}

/* ai-generate-module-hover-glow-20260610-2: clear non-moving hover feedback for module cards and actions. */
html[data-active-module="nav-generate"] .generate-reference-card {
  transition-property: box-shadow, filter, border-color, background-color !important;
  will-change: box-shadow, filter !important;
}

html[data-active-module="nav-generate"] .generate-reference-card:hover {
  filter: saturate(1.07) brightness(1.05) !important;
  box-shadow:
    0 1.2rem 2.05rem rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(255, 232, 184, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.065) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button:hover,
html[data-active-module="nav-generate"] .generate-submit-status-button:focus-visible,
html[data-active-module="nav-generate"] .generate-card-action-button:hover,
html[data-active-module="nav-generate"] .generate-card-action-button:focus-visible,
html[data-active-module="nav-generate"] .generate-editor-action-button:hover,
html[data-active-module="nav-generate"] .generate-editor-action-button:focus-visible,
html[data-active-module="nav-generate"] .generate-inspiration-action-button:hover,
html[data-active-module="nav-generate"] .generate-inspiration-action-button:focus-visible {
  filter: saturate(1.08) brightness(1.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0.6rem 1.2rem rgba(0, 0, 0, 0.22),
    0 0 0.9rem rgba(255, 232, 184, 0.28) !important;
}

html[data-active-module="nav-generate"] .generate-reference-hotspot:hover,
html[data-active-module="nav-generate"] .generate-reference-hotspot:focus-visible {
  filter: saturate(1.06) brightness(1.04) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:focus-visible) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-submit:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-submit:focus-visible) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:focus-visible) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:hover) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:focus-visible) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:hover) .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:focus-visible) .generate-reference-card-inspiration {
  box-shadow:
    0 1.2rem 2.05rem rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(255, 232, 184, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.065) !important;
  filter: brightness(1.06) saturate(1.08) !important;
}

/* ai-generate-hover-fallback-classes-20260611-1: make each module card feel selected even without :has support. */
.nav-workbench-generate-reference .generate-reference-card {
  transition-property: transform, box-shadow, filter, background-color !important;
  transition-duration: 180ms !important;
  transition-timing-function: cubic-bezier(0.2, 0.72, 0.24, 1) !important;
  transform-origin: center center !important;
  will-change: transform, box-shadow, filter !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transform: none !important;
}

.nav-workbench-generate-reference .generate-reference-card img {
  pointer-events: none !important;
}

.nav-workbench-generate-reference .generate-reference-card:hover,
.nav-workbench-generate-reference .generate-reference-card.is-hovered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card.is-hovered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-hover-upload .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-hover-editor .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-hover-inspiration .generate-reference-card-inspiration {
  filter: saturate(1.11) brightness(1.09) !important;
  box-shadow:
    0 1.32rem 2.18rem rgba(0, 0, 0, 0.46),
    0 0.24rem 1.2rem rgba(255, 232, 184, 0.16) !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  transform: scale(1.018) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-hover-upload .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-hover-editor .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-hover-inspiration .generate-reference-card-inspiration,
.nav-workbench-generate-reference .generate-reference-card.is-hovered {
  transform: scale(1.018) !important;
}

.nav-workbench-generate-reference .generate-reference-hotspot:hover,
.nav-workbench-generate-reference .generate-reference-hotspot:focus-visible,
.nav-workbench-generate-reference .generate-submit-status-button:hover,
.nav-workbench-generate-reference .generate-submit-status-button:focus-visible,
.nav-workbench-generate-reference .generate-card-action-button:hover,
.nav-workbench-generate-reference .generate-card-action-button:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
}

/* library-row-action-gap-20260610-2: increase detail and play button separation in library rows. */
html[data-active-module="nav-library"] .library-track-row .library-row-actions {
  gap: clamp(0.72rem, 0.94vw, 1rem) !important;
}

html[data-active-module="nav-library"] .library-track-row .library-row-actions .library-row-detail {
  padding-inline: clamp(0.52rem, 0.82vw, 0.88rem) !important;
}

html[data-active-module="nav-library"] .library-track-row .library-row-actions .library-row-play {
  padding-inline: clamp(0.72rem, 1.02vw, 1.1rem) !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-library"] .library-track-row .library-row-actions {
    gap: clamp(0.4rem, 0.72vw, 0.62rem) !important;
  }
}

/* library-track-title-offset-20260610-1: slightly separate avatar and title for better spacing. */
html[data-active-module="nav-library"] .library-track-row > .library-track-title {
  margin-left: clamp(0.52rem, 0.8vw, 0.82rem) !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-library"] .library-track-row > .library-track-title {
    margin-left: clamp(0.32rem, 0.56vw, 0.48rem) !important;
  }
}

/* homepage-dashboard-20260610-1: restore the real learning homepage instead of the feature intro route. */
html[data-active-module="home"],
html[data-active-module="home"] body {
  overflow: hidden !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] {
  align-content: stretch !important;
  overflow: hidden auto !important;
  padding-bottom: clamp(0.8rem, 1.2vw, 1.2rem) !important;
}

html[data-active-module="home"] .home-dashboard {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: var(--grid-gap) !important;
  min-width: 0 !important;
}

html[data-active-module="home"] .home-studio,
html[data-active-module="home"] .home-portal-strip,
html[data-active-module="home"] .quick-panel {
  grid-column: 1 / -1 !important;
}

html[data-active-module="home"] .home-studio {
  min-height: clamp(19rem, 30vw, 25rem) !important;
}

html[data-active-module="home"] .studio-dashboard {
  min-width: 0 !important;
}

html[data-active-module="home"] .studio-summary {
  grid-template-columns: minmax(15rem, 0.8fr) minmax(18rem, 1fr) minmax(13rem, 0.62fr) !important;
}

html[data-active-module="home"] .studio-ring {
  position: relative !important;
  display: grid !important;
  width: var(--ring-size) !important;
  aspect-ratio: 1 !important;
  place-items: center !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(8, 10, 12, 0.92) 0 56%, transparent 57%),
    conic-gradient(var(--gold) calc(var(--progress, 72) * 1%), rgba(255, 255, 255, 0.12) 0) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0.85rem 2rem rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="home"] .studio-ring::after {
  position: absolute !important;
  inset: 13% !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: inherit !important;
  content: "" !important;
}

html[data-active-module="home"] .studio-ring span {
  position: relative !important;
  z-index: 1 !important;
  color: rgba(255, 239, 202, 0.98) !important;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem) !important;
  font-weight: 860 !important;
}

html[data-active-module="home"] .home-task-row {
  width: 100% !important;
  color: inherit !important;
  cursor: pointer !important;
  text-align: left !important;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease !important;
}

html[data-active-module="home"] .home-task-row:hover {
  border-color: rgba(231, 202, 122, 0.32) !important;
  background: rgba(255, 255, 255, 0.064) !important;
  transform: translateY(-1px) !important;
}

html[data-active-module="home"] .home-portal-strip {
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(13rem, 1fr) !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  min-height: clamp(15rem, 22vw, 19rem) !important;
}

html[data-active-module="home"] .home-portal-strip .portal-card {
  min-height: clamp(15rem, 22vw, 19rem) !important;
}

html[data-active-module="home"] .home-portal-strip .portal-card > div {
  bottom: clamp(4.8rem, 6.8vw, 5.8rem) !important;
}

html[data-active-module="home"] .quick-panel {
  min-height: clamp(4.8rem, 6.2vw, 5.9rem) !important;
}

html[data-active-module="home"] .quick-actions button {
  min-width: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  html[data-active-module="home"] .studio-summary {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="home"] .home-portal-strip {
    grid-template-columns: none !important;
    grid-auto-columns: minmax(12.5rem, 34vw) !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="home"] .content-grid[data-module="home"] {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  html[data-active-module="home"] .home-studio {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="home"] .studio-dashboard {
    padding: clamp(1rem, 4vw, 1.35rem) !important;
  }

  html[data-active-module="home"] .studio-greeting {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="home"] .studio-level,
  html[data-active-module="home"] .studio-streak {
    justify-self: start !important;
  }

  html[data-active-module="home"] .progress-body {
    grid-template-columns: 1fr !important;
    justify-items: start !important;
  }

  html[data-active-module="home"] .home-task-row {
    grid-template-columns: clamp(2rem, 9vw, 2.35rem) minmax(0, 1fr) !important;
  }

  html[data-active-module="home"] .home-task-row small,
  html[data-active-module="home"] .home-task-row b {
    justify-self: start !important;
  }

html[data-active-module="home"] .home-portal-strip {
    grid-auto-columns: minmax(13.5rem, 76vw) !important;
  }

  html[data-active-module="home"] .quick-panel {
    align-items: stretch !important;
  }

  html[data-active-module="home"] .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ai-generate-sealed-20260608-1: recent generated shortcut and finalized smart-generation surface. */
html[data-active-module="nav-generate"] .generate-recent-library-entry {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute !important;
  z-index: 32 !important;
  left: calc(82 / 1672 * 100%) !important;
  top: calc(610 / 846 * 100%) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: clamp(0.42rem, 0.56vw, 0.56rem) !important;
  width: calc(400 / 1672 * 100%) !important;
  min-height: clamp(2rem, 2.5vw, 2.5rem) !important;
  padding: 0 clamp(0.66rem, 0.86vw, 0.86rem) !important;
  border: 1px solid rgba(255, 226, 164, 0.14) !important;
  border-radius: clamp(0.42rem, 0.56vw, 0.58rem) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 231, 170, 0.12), transparent 58%),
    rgba(52, 34, 14, 0.46) !important;
  color: rgba(255, 236, 190, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.08),
    0 0.42rem 0.9rem rgba(0, 0, 0, 0.18) !important;
  cursor: pointer !important;
}

html[data-active-module="nav-generate"] .generate-recent-library-entry span {
  color: rgba(255, 226, 164, 0.74) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.78rem) !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-recent-library-entry strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 250, 236, 0.92) !important;
  font-size: clamp(0.82rem, 0.96vw, 0.96rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-recent-library-entry:hover {
  border-color: rgba(255, 226, 164, 0.24) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 231, 170, 0.16), transparent 58%),
    rgba(70, 45, 16, 0.54) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > span:has(+ strong) {
  transition: color 180ms ease, text-shadow 180ms ease !important;
}

/* ai-generate-library-status-refine-20260608-1: 24h marker, locate notice, countdown glow, and clearer retries. */
@keyframes library-generated-notice-out-20260608 {
  0%,
  78% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-0.24rem);
  }
}

@keyframes ai-generate-countdown-dot-20260608 {
  0%,
  100% {
    opacity: 0.58;
    box-shadow: 0 0 0.38rem rgba(236, 174, 66, 0.24);
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 0.72rem rgba(247, 196, 92, 0.48);
  }
}

html[data-active-module="nav-library"] .library-generated-focus-notice {
  display: inline-grid !important;
  width: fit-content !important;
  margin: clamp(0.46rem, 0.64vw, 0.64rem) 0 clamp(0.2rem, 0.34vw, 0.34rem) !important;
  padding: clamp(0.42rem, 0.54vw, 0.54rem) clamp(0.72rem, 0.92vw, 0.92rem) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 241, 196, 0.2), transparent 62%),
    rgba(120, 75, 20, 0.38) !important;
  color: rgba(255, 231, 176, 0.94) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem) !important;
  font-weight: 860 !important;
  line-height: 1 !important;
  animation: library-generated-notice-out-20260608 2.55s ease both !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > small {
  grid-auto-flow: column !important;
  column-gap: clamp(0.28rem, 0.36vw, 0.36rem) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > small::before {
  content: "" !important;
  display: inline-block !important;
  width: clamp(0.36rem, 0.44vw, 0.44rem) !important;
  height: clamp(0.36rem, 0.44vw, 0.44rem) !important;
  border-radius: 999px !important;
  background: rgba(255, 213, 123, 0.92) !important;
  animation: ai-generate-countdown-dot-20260608 1.55s ease-in-out infinite !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-error,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-invalid {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 231, 170, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(204, 135, 28, 0.94), rgba(132, 76, 12, 0.95)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.16),
    0 0.5rem 1rem rgba(0, 0, 0, 0.24),
    0 0 0.8rem rgba(232, 168, 55, 0.16) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-error strong,
html[data-active-module="nav-generate"] .generate-upload-inline-state.is-invalid strong {
  max-width: min(100%, 24rem) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-active-module="nav-library"] .library-generated-focus-notice,
  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > small::before {
    animation: none !important;
  }
}

/* ai-generate-final-experience-refine-20260608-1: completion clarity, idle upload unity, inert busy bar, and smarter failure copy. */
html[data-active-module="nav-generate"] .generate-complete-toast {
  grid-template-rows: auto auto auto !important;
  row-gap: clamp(0.08rem, 0.16vw, 0.16rem) !important;
}

html[data-active-module="nav-generate"] .generate-complete-toast > strong {
  display: block !important;
  color: rgba(255, 250, 236, 0.99) !important;
  font-size: clamp(1.02rem, 1.22vw, 1.22rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html[data-active-module="nav-generate"] .generate-complete-toast > small {
  color: rgba(255, 231, 176, 0.8) !important;
  font-size: clamp(0.66rem, 0.78vw, 0.78rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted:hover,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review:hover,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working:hover,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted:active,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review:active,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working:active {
  transform: none !important;
  cursor: default !important;
  opacity: 0.86 !important;
  filter: saturate(0.88) brightness(0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.12),
    0 0.34rem 0.72rem rgba(0, 0, 0, 0.2) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-idle .generate-reference-hotspot.generate-reference-upload {
  border: 1px solid rgba(255, 223, 155, 0.12) !important;
  border-radius: clamp(0.78rem, 1vw, 1rem) !important;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(214, 144, 31, 0.16), transparent 58%),
    rgba(24, 16, 9, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 218, 0.08),
    0 0.8rem 1.8rem rgba(0, 0, 0, 0.2) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-idle .generate-submit-status-button.is-idle {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 231, 170, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(211, 146, 35, 0.94), rgba(143, 84, 15, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.2),
    0 0.66rem 1.24rem rgba(0, 0, 0, 0.26),
    0 0 1rem rgba(232, 168, 55, 0.18) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-error small,
html[data-active-module="nav-generate"] .generate-upload-inline-state.is-invalid small {
  max-width: min(100%, 26rem) !important;
  color: rgba(255, 226, 164, 0.86) !important;
  font-weight: 820 !important;
  white-space: normal !important;
  line-height: 1.28 !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-error span,
html[data-active-module="nav-generate"] .generate-upload-inline-state.is-invalid span {
  color: rgba(255, 226, 164, 0.96) !important;
}

/* ai-generate-focus-library-breathe-20260608-1: locate generated score and keep queue state alive. */
@keyframes ai-generate-queue-card-breathe-20260608 {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }

  50% {
    filter: brightness(1.035) saturate(1.045);
  }
}

@keyframes library-generated-focus-pulse-20260608 {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 230, 166, 0),
      0 0 0 rgba(232, 168, 55, 0);
  }

  38%,
  68% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 230, 166, 0.28),
      0 0 1.15rem rgba(232, 168, 55, 0.2);
  }
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
  animation: ai-generate-queue-card-breathe-20260608 4.8s ease-in-out infinite !important;
}

html[data-active-module="nav-library"] .library-track-row.is-focus-pulse {
  animation: library-generated-focus-pulse-20260608 1.8s ease-in-out 2 !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered,
  html[data-active-module="nav-library"] .library-track-row.is-focus-pulse {
    animation: none !important;
  }
}

/* ai-generate-status-copy-up-20260608-1: final placement, move the queued status copy upward by 15px. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > span,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > strong,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > small {
  transform: translateY(-15px) !important;
}

/* ai-generate-status-copy-up-20260608-1: final placement, move the queued status copy upward by 15px. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > span,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > strong,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > small {
  transform: translateY(-15px) !important;
}

/* ai-generate-status-copy-up-20260608-1: move the queued status copy upward by 15px. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > span,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > strong,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > small {
  transform: translateY(-15px) !important;
}

/* ai-generate-state-polish-20260608-1: calmer busy button, clearer countdown, and unified completion state. */
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  border: 0 !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 228, 160, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(206, 139, 28, 0.86), rgba(134, 78, 13, 0.88)),
    rgba(154, 91, 16, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.14),
    0 0.46rem 0.92rem rgba(0, 0, 0, 0.2),
    0 0 0.82rem rgba(232, 168, 55, 0.14) !important;
  cursor: default !important;
  filter: saturate(0.94) brightness(0.96) !important;
  animation: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working small {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working strong {
  font-size: clamp(1rem, 1.12vw, 1.12rem) !important;
  font-weight: 930 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(219, 148, 35, 0.24), transparent 34%),
    radial-gradient(ellipse at 50% 2%, rgba(84, 52, 20, 0.44), transparent 62%),
    linear-gradient(180deg, rgba(31, 22, 12, 0.92), rgba(8, 8, 7, 0.9)),
    rgba(10, 9, 7, 0.96) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered small {
  width: min(100%, 20rem) !important;
  color: rgba(255, 226, 164, 0.9) !important;
  font-size: clamp(0.9rem, 1.08vw, 1.08rem) !important;
  letter-spacing: 0 !important;
}

html[data-active-module="nav-generate"] .generate-complete-toast {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: clamp(0.12rem, 0.22vw, 0.22rem) !important;
  border: 0 !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 231, 170, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(211, 146, 35, 0.9), rgba(143, 84, 15, 0.92)),
    rgba(160, 96, 18, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.18),
    0 0.54rem 1.06rem rgba(0, 0, 0, 0.24),
    0 0 0.92rem rgba(232, 168, 55, 0.18) !important;
}

html[data-active-module="nav-generate"] .generate-complete-toast span {
  margin: 0 !important;
  color: rgba(255, 250, 236, 0.99) !important;
  font-size: clamp(1rem, 1.16vw, 1.16rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html[data-active-module="nav-generate"] .generate-complete-toast small {
  display: block !important;
  margin: 0 !important;
  color: rgba(255, 236, 190, 0.82) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.78rem) !important;
  font-weight: 820 !important;
  line-height: 1 !important;
}

/* ai-generate-queue-card-no-border-20260608-1: queued card keeps the dark gold surface without visible border lines. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
  border: 0 !important;
  outline: 0 !important;
  box-shadow:
    0 1rem 2rem rgba(0, 0, 0, 0.28),
    0 0 1.12rem rgba(222, 158, 58, 0.1) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered::before,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered span,
  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered strong {
    width: min(100%, 19rem) !important;
  }
}

/* library-track-columns-compact-20260608-2: final wide-screen table columns, kept after generated-state overrides. */
@media (min-width: 1180px) {
  html[data-active-module="nav-library"] .library-table-head,
  html[data-active-module="nav-library"] .library-track-row {
    grid-template-columns:
      clamp(3.4rem, 4.05vw, 3.82rem)
      minmax(16rem, clamp(21rem, 26vw, 30rem))
      clamp(4.05rem, 4.75vw, 4.45rem)
      clamp(3.95rem, 4.55vw, 4.35rem)
      clamp(3.05rem, 3.55vw, 3.35rem)
      clamp(11.4rem, 12vw, 12.2rem) !important;
    column-gap: clamp(0.44rem, 0.62vw, 0.7rem) !important;
    justify-content: start !important;
  }

  html[data-active-module="nav-library"] .library-row-actions {
    justify-self: start !important;
  }

  html[data-active-module="nav-library"] .library-row-actions .library-row-play {
    min-width: clamp(7.55rem, 8.3vw, 8.05rem) !important;
  }

  html[data-active-module="nav-library"] .library-row-title-button strong,
  html[data-active-module="nav-library"] .library-track-title strong {
    max-width: min(100%, 29.5rem) !important;
  }
}

/* ai-generate-complete-click-reset-20260608-1: completion stays until clicked, then reveals upload. */
html[data-active-module="nav-generate"] .generate-complete-toast {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute !important;
  z-index: 38 !important;
  left: calc(82 / 1672 * 100%) !important;
  top: calc(664 / 846 * 100%) !important;
  display: grid !important;
  place-items: center !important;
  width: calc(400 / 1672 * 100%) !important;
  height: calc(64 / 846 * 100%) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 clamp(0.72rem, 1vw, 1rem) !important;
  border-radius: clamp(0.46rem, 0.62vw, 0.66rem) !important;
  cursor: pointer !important;
}

html[data-active-module="nav-generate"] .generate-complete-toast span {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: rgba(255, 250, 236, 0.99) !important;
  font-size: clamp(1rem, 1.16vw, 1.18rem) !important;
  font-weight: 940 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-complete-toast:hover {
  filter: brightness(1.06) saturate(1.05) !important;
}

html[data-active-module="nav-generate"] .generate-upload-inline-state.is-error em > button,
html[data-active-module="nav-generate"] .generate-upload-inline-state.is-invalid em > button {
  min-width: clamp(5.8rem, 7vw, 6.9rem) !important;
}

html[data-active-module="nav-library"] .library-track-row.is-recent-generated {
  border-color: rgba(255, 217, 145, 0.24) !important;
  background:
    linear-gradient(90deg, rgba(70, 45, 15, 0.18), rgba(255, 216, 145, 0.045) 42%, rgba(255, 255, 255, 0.024)),
    rgba(255, 255, 255, 0.028) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 216, 0.08),
    0 0 1.1rem rgba(224, 158, 58, 0.08) !important;
}

html[data-active-module="nav-library"] .library-track-row.is-recent-generated:hover {
  border-color: rgba(255, 224, 163, 0.34) !important;
  background:
    linear-gradient(90deg, rgba(82, 52, 16, 0.24), rgba(255, 216, 145, 0.07) 42%, rgba(255, 255, 255, 0.032)),
    rgba(255, 255, 255, 0.034) !important;
}

/* library-filter-two-group-types-20260608-2: keep library filters to type/difficulty and enlarge their labels. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
  grid-template-rows: auto auto !important;
  align-content: start !important;
  align-items: start !important;
  row-gap: clamp(0.9rem, 1.28vw, 1.18rem) !important;
  overflow: hidden auto !important;
}

html[data-active-module="nav-library"] .library-filter-section,
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(1),
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(2) {
  grid-template-rows: auto auto !important;
  height: auto !important;
  min-height: 0 !important;
  align-content: start !important;
  gap: clamp(0.44rem, 0.62vw, 0.58rem) !important;
}

html[data-active-module="nav-library"] .library-filter-title {
  color: rgba(255, 232, 178, 0.98) !important;
  font-size: clamp(0.9rem, 1.02vw, 1.06rem) !important;
  font-weight: 940 !important;
  line-height: 1.08 !important;
}

html[data-active-module="nav-library"] .library-filter-grid,
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(1) .library-filter-grid,
html[data-active-module="nav-library"] .library-filter-section:nth-of-type(2) .library-filter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  align-content: start !important;
  align-items: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  gap: clamp(0.48rem, 0.66vw, 0.62rem) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button,
html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"] {
  min-height: clamp(2.62rem, 3.05vw, 3rem) !important;
  height: auto !important;
  padding-inline: clamp(0.72rem, 0.9vw, 0.92rem) clamp(1.18rem, 1.44vw, 1.34rem) !important;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem) !important;
  font-weight: 920 !important;
}

html[data-active-module="nav-library"] .library-filter-grid button span {
  line-height: 1.08 !important;
}

html[data-active-module="nav-library"] .library-filter-grid button small {
  right: clamp(0.24rem, 0.34vw, 0.34rem) !important;
  min-width: clamp(0.94rem, 1.1vw, 1.04rem) !important;
  height: clamp(0.94rem, 1.1vw, 1.04rem) !important;
  font-size: clamp(0.54rem, 0.62vw, 0.6rem) !important;
}

/* library-track-actions-right-20260608-1: keep difficulty fixed, spread status columns, and return actions to the far right. */
@media (min-width: 1180px) {
  html[data-active-module="nav-library"] .library-table-head,
  html[data-active-module="nav-library"] .library-track-row {
    grid-template-columns:
      clamp(3.4rem, 4.05vw, 3.82rem)
      minmax(16rem, clamp(21rem, 26vw, 30rem))
      clamp(4.05rem, 4.75vw, 4.45rem)
      minmax(clamp(3.95rem, 4.55vw, 4.35rem), 1fr)
      minmax(clamp(3.05rem, 3.55vw, 3.35rem), 1fr)
      clamp(11.4rem, 12vw, 12.2rem) !important;
    column-gap: clamp(0.44rem, 0.62vw, 0.7rem) !important;
    justify-content: stretch !important;
  }

  html[data-active-module="nav-library"] .library-row-difficulty,
  html[data-active-module="nav-library"] .library-row-free,
  html[data-active-module="nav-library"] .library-row-favorite,
  html[data-active-module="nav-library"] .library-table-head > span:nth-child(3),
  html[data-active-module="nav-library"] .library-table-head > span:nth-child(4),
  html[data-active-module="nav-library"] .library-table-head > span:nth-child(5) {
    justify-self: center !important;
  }

  html[data-active-module="nav-library"] .library-row-actions {
    justify-self: end !important;
  }

  html[data-active-module="nav-library"] .library-table-head > span:last-child {
    justify-self: end !important;
    padding-right: clamp(3.3rem, 3.9vw, 4rem) !important;
  }
}

@media (max-height: 760px) and (min-width: 901px) {
  html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-filter-rail {
    row-gap: clamp(0.62rem, 0.92dvh, 0.82rem) !important;
  }

  html[data-active-module="nav-library"] .library-filter-title {
    font-size: clamp(0.82rem, 1.44dvh, 0.94rem) !important;
  }

  html[data-active-module="nav-library"] .library-filter-grid button,
  html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
  html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"] {
    min-height: clamp(2.28rem, 4.6dvh, 2.68rem) !important;
    font-size: clamp(0.9rem, 1.64dvh, 1rem) !important;
  }
}

/* library-filter-badge-rect-20260608-1: larger rectangular count badges that match the filter button shape. */
html[data-active-module="nav-library"] .library-filter-grid button,
html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"] {
  border-radius: clamp(0.42rem, 0.56vw, 0.58rem) !important;
  padding-right: clamp(1.82rem, 2.1vw, 2.12rem) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button small {
  right: clamp(0.36rem, 0.48vw, 0.5rem) !important;
  min-width: clamp(1.32rem, 1.52vw, 1.5rem) !important;
  height: clamp(1.12rem, 1.3vw, 1.24rem) !important;
  padding-inline: clamp(0.26rem, 0.34vw, 0.36rem) !important;
  border-radius: clamp(0.42rem, 0.56vw, 0.58rem) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.76rem) !important;
  font-weight: 940 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="nav-library"] .library-filter-grid button.is-active small {
  border-color: rgba(255, 248, 224, 0.34) !important;
  background: rgba(255, 244, 214, 0.2) !important;
}

html[data-active-module="nav-library"] .library-filter-grid button.is-empty:not(.is-active) small {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

@media (max-height: 760px) and (min-width: 901px) {
  html[data-active-module="nav-library"] .library-filter-grid button,
  html[data-active-module="nav-library"] .library-filter-grid button[data-library-type="all"],
  html[data-active-module="nav-library"] .library-filter-grid button[data-library-difficulty="all"] {
    padding-right: clamp(1.62rem, 3.55dvh, 1.96rem) !important;
  }

  html[data-active-module="nav-library"] .library-filter-grid button small {
    min-width: clamp(1.16rem, 2.42dvh, 1.34rem) !important;
    height: clamp(1rem, 2.12dvh, 1.16rem) !important;
    font-size: clamp(0.62rem, 1.32dvh, 0.7rem) !important;
  }
}

/* library-series-bottom-safe-20260608-1: prevent one-row collection cards from being clipped at the bottom. */
html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel:not(:has(.library-series-grid.is-expanded)) {
  grid-template-rows:
    clamp(2.35rem, 2.8vw, 2.62rem)
    clamp(7.12rem, 8.65vw, 7.5rem)
    clamp(1.32rem, 1.68vw, 1.54rem)
    minmax(0, auto)
    auto !important;
  row-gap: clamp(0.28rem, 0.42vw, 0.46rem) !important;
}

html[data-active-module="nav-library"] .library-series-section:not(:has(.library-series-grid.is-expanded)) {
  grid-row: 2 !important;
  height: clamp(7.12rem, 8.65vw, 7.5rem) !important;
  min-height: clamp(7.12rem, 8.65vw, 7.5rem) !important;
  overflow: visible !important;
}

html[data-active-module="nav-library"] .library-series-section:not(:has(.library-series-grid.is-expanded)) .library-series-grid {
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  padding-bottom: clamp(0.26rem, 0.34vw, 0.34rem) !important;
  align-items: start !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

html[data-active-module="nav-library"] .library-series-section:not(:has(.library-series-grid.is-expanded)) .library-series-card {
  height: calc(100% - clamp(0.26rem, 0.34vw, 0.34rem)) !important;
  min-height: clamp(6.72rem, 8.04vw, 7.08rem) !important;
  max-height: none !important;
  margin-bottom: clamp(0.18rem, 0.26vw, 0.28rem) !important;
  box-sizing: border-box !important;
}

html[data-active-module="nav-library"] .library-table-head {
  grid-row: 3 !important;
}

html[data-active-module="nav-library"] .library-track-table {
  grid-row: 4 !important;
}

html[data-active-module="nav-library"] .library-pagination {
  grid-row: 5 !important;
}

@media (max-height: 740px) and (min-width: 761px) {
  html[data-active-module="nav-library"] .nav-workbench.nav-workbench-library > .library-list-panel:not(:has(.library-series-grid.is-expanded)) {
    grid-template-rows: clamp(2.22rem, 2.72vw, 2.5rem) 6.95rem clamp(1.22rem, 1.58vw, 1.42rem) minmax(0, auto) auto !important;
    row-gap: 0.28rem !important;
  }

  html[data-active-module="nav-library"] .library-series-section:not(:has(.library-series-grid.is-expanded)) {
    height: 6.95rem !important;
    min-height: 6.95rem !important;
  }

  html[data-active-module="nav-library"] .library-series-section:not(:has(.library-series-grid.is-expanded)) .library-series-card {
    min-height: 6.58rem !important;
  }
}

/* ai-generate-countdown-20260608-1: show countdown beside busy label and completion after publish. */
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-rows: auto !important;
  align-content: center !important;
  justify-content: center !important;
  justify-items: center !important;
  column-gap: clamp(0.42rem, 0.58vw, 0.62rem) !important;
  z-index: 42 !important;
  opacity: 1 !important;
  visibility: visible !important;
  border-color: rgba(255, 222, 156, 0.34) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 231, 170, 0.18), transparent 62%),
    linear-gradient(180deg, rgba(222, 156, 43, 0.98), rgba(153, 91, 17, 0.99)),
    rgba(185, 112, 22, 0.98) !important;
  color: rgba(255, 250, 236, 0.99) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, 0.22),
    0 0.46rem 1.05rem rgba(0, 0, 0, 0.26),
    0 0 1.1rem rgba(232, 168, 55, 0.22) !important;
  cursor: wait !important;
  animation: ai-generate-gold-breath-20260608 2.2s ease-in-out infinite !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > span,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > span,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > span {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working strong {
  display: block !important;
  margin: 0 !important;
  color: rgba(255, 250, 236, 0.99) !important;
  font-size: clamp(1rem, 1.18vw, 1.2rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 0.18rem 0.5rem rgba(70, 35, 4, 0.26) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working small {
  display: inline-grid !important;
  place-items: center !important;
  min-width: clamp(3.15rem, 3.78vw, 3.62rem) !important;
  min-height: clamp(1.4rem, 1.66vw, 1.58rem) !important;
  margin: 0 !important;
  padding: 0 clamp(0.34rem, 0.5vw, 0.5rem) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 244, 214, 0.22) !important;
  border-radius: clamp(0.32rem, 0.44vw, 0.44rem) !important;
  background: rgba(58, 32, 6, 0.22) !important;
  color: rgba(255, 244, 214, 0.95) !important;
  font-size: clamp(0.74rem, 0.86vw, 0.88rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  box-shadow: inset 0 1px 0 rgba(255, 247, 224, 0.12) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted strong::before,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review strong::before,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working strong::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

html[data-active-module="nav-generate"] .generate-complete-toast span {
  color: rgba(255, 250, 236, 0.99) !important;
  font-size: clamp(1.04rem, 1.22vw, 1.24rem) !important;
  font-weight: 960 !important;
}

@keyframes ai-generate-gold-breath-20260608 {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 248, 220, 0.18),
      0 0.44rem 0.98rem rgba(0, 0, 0, 0.24),
      0 0 0.72rem rgba(232, 168, 55, 0.16);
    filter: brightness(1) saturate(1);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 248, 220, 0.28),
      0 0.52rem 1.16rem rgba(0, 0, 0, 0.28),
      0 0 1.45rem rgba(232, 168, 55, 0.34);
    filter: brightness(1.045) saturate(1.04);
  }
}

/* ai-generate-upload-frame-queue-20260608-1: queue state uses the original upload area frame, not an inner card. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state:has(.generate-upload-inline-state.is-inline-centered) {
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state:has(.generate-upload-inline-state.is-inline-centered)::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  left: calc(39 / 514 * 100%) !important;
  top: calc(186 / 758 * 100%) !important;
  width: calc(433 / 514 * 100%) !important;
  height: calc(180 / 758 * 100%) !important;
  border: 1px solid rgba(222, 158, 58, 0.72) !important;
  border-radius: clamp(0.76rem, 1vw, 1rem) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(230, 167, 64, 0.24), transparent 66%),
    linear-gradient(180deg, rgba(51, 34, 14, 0.9), rgba(12, 9, 6, 0.86)),
    rgba(13, 10, 7, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 184, 0.12),
    0 0.72rem 1.55rem rgba(0, 0, 0, 0.28),
    0 0 1.1rem rgba(222, 158, 58, 0.12) !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
  left: calc(39 / 514 * 100%) !important;
  top: calc(186 / 758 * 100%) !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "kicker"
    "name" !important;
  align-content: center !important;
  justify-items: center !important;
  width: calc(433 / 514 * 100%) !important;
  height: calc(180 / 758 * 100%) !important;
  min-height: 0 !important;
  padding: clamp(0.92rem, 1.22vw, 1.15rem) clamp(1.1rem, 1.48vw, 1.4rem) !important;
  border: 0 !important;
  border-radius: clamp(0.76rem, 1vw, 1rem) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered span {
  display: block !important;
  width: min(100%, 21rem) !important;
  color: rgba(255, 225, 158, 0.96) !important;
  font-size: clamp(1rem, 1.22vw, 1.22rem) !important;
  font-weight: 930 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 0.22rem 0.62rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered strong {
  display: block !important;
  width: min(100%, 22rem) !important;
  color: rgba(255, 250, 238, 0.99) !important;
  font-size: clamp(1.34rem, 1.68vw, 1.68rem) !important;
  font-weight: 960 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 0.22rem 0.72rem rgba(0, 0, 0, 0.46) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered small,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered em {
  display: none !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state:has(.generate-upload-inline-state.is-inline-centered)::before,
  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
    left: calc(34 / 514 * 100%) !important;
    top: calc(190 / 758 * 100%) !important;
    width: calc(446 / 514 * 100%) !important;
    height: calc(188 / 758 * 100%) !important;
  }
}

/* ai-generate-upload-frame-queue-20260608-2: draw the upload frame on the queue status itself. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state:has(.generate-upload-inline-state.is-inline-centered)::before {
  content: none !important;
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
  position: absolute !important;
  left: calc(39 / 514 * 100%) !important;
  top: calc(186 / 758 * 100%) !important;
  z-index: 20 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "kicker"
    "name" !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: clamp(0.28rem, 0.42vw, 0.48rem) !important;
  width: calc(433 / 514 * 100%) !important;
  height: calc(180 / 758 * 100%) !important;
  min-height: 0 !important;
  padding: clamp(0.92rem, 1.22vw, 1.15rem) clamp(1.1rem, 1.48vw, 1.4rem) !important;
  overflow: hidden !important;
  border: 1px solid rgba(222, 158, 58, 0.78) !important;
  border-radius: clamp(0.76rem, 1vw, 1rem) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(230, 167, 64, 0.24), transparent 66%),
    linear-gradient(180deg, rgba(51, 34, 14, 0.9), rgba(12, 9, 6, 0.86)),
    rgba(13, 10, 7, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 184, 0.12),
    0 0.72rem 1.55rem rgba(0, 0, 0, 0.28),
    0 0 1.1rem rgba(222, 158, 58, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered[data-flow-step]::before {
  content: none !important;
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered span {
  grid-area: kicker !important;
  display: block !important;
  width: min(100%, 21rem) !important;
  margin: 0 !important;
  color: rgba(255, 225, 158, 0.98) !important;
  font-size: clamp(1.05rem, 1.34vw, 1.32rem) !important;
  font-weight: 950 !important;
  line-height: 1.02 !important;
  text-align: center !important;
  text-shadow: 0 0.22rem 0.62rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered strong {
  grid-area: name !important;
  display: block !important;
  width: min(100%, 22rem) !important;
  margin: 0 !important;
  color: rgba(255, 250, 238, 0.99) !important;
  font-size: clamp(1.24rem, 1.52vw, 1.52rem) !important;
  font-weight: 960 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 0.22rem 0.72rem rgba(0, 0, 0, 0.46) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered small,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered em {
  display: none !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
    left: calc(34 / 514 * 100%) !important;
    top: calc(190 / 758 * 100%) !important;
    width: calc(446 / 514 * 100%) !important;
    height: calc(188 / 758 * 100%) !important;
  }
}

/* ai-generate-upload-large-frame-20260608-1: queue state reuses the original large upload frame area. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
  left: calc(39 / 514 * 100%) !important;
  top: calc(183 / 758 * 100%) !important;
  width: calc(433 / 514 * 100%) !important;
  height: calc(379 / 758 * 100%) !important;
  row-gap: clamp(0.36rem, 0.56vw, 0.62rem) !important;
  border: 1px solid rgba(222, 158, 58, 0.8) !important;
  border-radius: clamp(0.78rem, 1.02vw, 1.02rem) !important;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(226, 159, 48, 0.22), transparent 45%),
    linear-gradient(180deg, rgba(52, 35, 14, 0.86), rgba(11, 8, 6, 0.82)),
    rgba(13, 10, 7, 0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 184, 0.13),
    0 0.92rem 1.9rem rgba(0, 0, 0, 0.3),
    0 0 1.22rem rgba(222, 158, 58, 0.14) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered span {
  font-size: clamp(1.08rem, 1.42vw, 1.42rem) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered strong {
  font-size: clamp(1.28rem, 1.6vw, 1.6rem) !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
    left: calc(39 / 514 * 100%) !important;
    top: calc(183 / 758 * 100%) !important;
    width: calc(433 / 514 * 100%) !important;
    height: calc(379 / 758 * 100%) !important;
  }
}

/* ai-generate-upload-full-card-state-20260608-1: queued generation replaces the whole upload module card. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state:has(.generate-upload-inline-state.is-inline-centered) {
  overflow: hidden !important;
  border-radius: 0.85rem !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state:has(.generate-upload-inline-state.is-inline-centered) > img {
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: clamp(1.4rem, 2vw, 2rem) clamp(1.3rem, 1.9vw, 1.9rem) !important;
  border: 1px solid rgba(222, 158, 58, 0.78) !important;
  border-radius: 0.85rem !important;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(219, 148, 35, 0.28), transparent 34%),
    radial-gradient(ellipse at 50% 0%, rgba(92, 57, 21, 0.5), transparent 62%),
    linear-gradient(180deg, rgba(33, 22, 11, 0.94), rgba(8, 8, 7, 0.9)),
    rgba(10, 9, 7, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 184, 0.12),
    inset 0 0 0 1px rgba(255, 218, 143, 0.05),
    0 1rem 2rem rgba(0, 0, 0, 0.28),
    0 0 1.28rem rgba(222, 158, 58, 0.12) !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered span {
  width: min(100%, 24rem) !important;
  font-size: clamp(1.08rem, 1.46vw, 1.46rem) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered strong {
  width: min(100%, 25rem) !important;
  font-size: clamp(1.34rem, 1.76vw, 1.76rem) !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* ai-generate-card-queue-countdown-20260608-1: filename first, larger queue label second, countdown below. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
  grid-template-areas:
    "name"
    "kicker"
    "meta" !important;
  align-content: center !important;
  row-gap: clamp(0.24rem, 0.38vw, 0.42rem) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered span {
  grid-area: kicker !important;
  width: min(100%, 25rem) !important;
  color: rgba(255, 225, 158, 0.99) !important;
  font-size: clamp(1.38rem, 1.86vw, 1.86rem) !important;
  font-weight: 970 !important;
  line-height: 1.04 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered strong {
  grid-area: name !important;
  width: min(100%, 24rem) !important;
  color: rgba(255, 250, 238, 0.96) !important;
  font-size: clamp(1rem, 1.28vw, 1.28rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered small {
  grid-area: meta !important;
  display: block !important;
  width: min(100%, 18rem) !important;
  margin-top: clamp(0.18rem, 0.32vw, 0.34rem) !important;
  color: rgba(255, 236, 190, 0.9) !important;
  font-size: clamp(0.82rem, 1.02vw, 1.02rem) !important;
  font-weight: 880 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 0.16rem 0.48rem rgba(0, 0, 0, 0.36) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered em {
  display: none !important;
}

/* ai-generate-queue-card-borderless-final-20260608-1: final override, match the borderless editor/inspiration cards. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state:has(.generate-upload-inline-state.is-inline-centered),
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state::before,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state::after,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state:has(.generate-upload-inline-state.is-inline-centered)::before,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state:has(.generate-upload-inline-state.is-inline-centered)::after,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered::before,
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ai-generate-state-polish-20260608-1: final placement for calmer busy/completion states. */
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  border: 0 !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 228, 160, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(206, 139, 28, 0.86), rgba(134, 78, 13, 0.88)),
    rgba(154, 91, 16, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.14),
    0 0.46rem 0.92rem rgba(0, 0, 0, 0.2),
    0 0 0.82rem rgba(232, 168, 55, 0.14) !important;
  cursor: default !important;
  filter: saturate(0.94) brightness(0.96) !important;
  animation: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working small {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working strong {
  font-size: clamp(1rem, 1.12vw, 1.12rem) !important;
  font-weight: 930 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(219, 148, 35, 0.24), transparent 34%),
    radial-gradient(ellipse at 50% 2%, rgba(84, 52, 20, 0.44), transparent 62%),
    linear-gradient(180deg, rgba(31, 22, 12, 0.92), rgba(8, 8, 7, 0.9)),
    rgba(10, 9, 7, 0.96) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered small {
  width: min(100%, 20rem) !important;
  color: rgba(255, 226, 164, 0.9) !important;
  font-size: clamp(0.9rem, 1.08vw, 1.08rem) !important;
  letter-spacing: 0 !important;
}

html[data-active-module="nav-generate"] .generate-complete-toast {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: clamp(0.12rem, 0.22vw, 0.22rem) !important;
  border: 0 !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 231, 170, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(211, 146, 35, 0.9), rgba(143, 84, 15, 0.92)),
    rgba(160, 96, 18, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.18),
    0 0.54rem 1.06rem rgba(0, 0, 0, 0.24),
    0 0 0.92rem rgba(232, 168, 55, 0.18) !important;
}

html[data-active-module="nav-generate"] .generate-complete-toast span {
  margin: 0 !important;
  color: rgba(255, 250, 236, 0.99) !important;
  font-size: clamp(1rem, 1.16vw, 1.16rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html[data-active-module="nav-generate"] .generate-complete-toast small {
  display: block !important;
  margin: 0 !important;
  color: rgba(255, 236, 190, 0.82) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.78rem) !important;
  font-weight: 820 !important;
  line-height: 1 !important;
}

/* ai-generate-flow-final-polish-20260608-1: EOF override for hierarchy, state-bar button, and new-generated marker. */
html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > strong {
  color: rgba(255, 248, 234, 0.84) !important;
  font-size: clamp(0.9rem, 1.12vw, 1.12rem) !important;
  font-weight: 820 !important;
  text-shadow: 0 0.16rem 0.46rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > span {
  color: rgba(255, 226, 158, 1) !important;
  font-size: clamp(1.48rem, 1.98vw, 1.98rem) !important;
  font-weight: 980 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > small {
  display: inline-grid !important;
  place-items: center !important;
  justify-self: center !important;
  width: auto !important;
  max-width: min(100%, 21rem) !important;
  min-height: clamp(1.32rem, 1.56vw, 1.56rem) !important;
  padding: 0 clamp(0.58rem, 0.74vw, 0.74rem) !important;
  border: 1px solid rgba(255, 226, 164, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 218, 140, 0.08) !important;
  color: rgba(255, 226, 164, 0.92) !important;
  font-size: clamp(0.82rem, 0.96vw, 0.96rem) !important;
  font-weight: 850 !important;
  text-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  pointer-events: none !important;
  transform: none !important;
  opacity: 0.92 !important;
}

html[data-active-module="nav-library"] .library-track-row.is-recent-generated {
  background:
    linear-gradient(90deg, rgba(226, 159, 48, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.025) !important;
}

html[data-active-module="nav-library"] .library-new-generated-pill {
  border-color: rgba(255, 232, 176, 0.5) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 241, 196, 0.24), transparent 60%),
    linear-gradient(180deg, rgba(218, 153, 40, 0.98), rgba(139, 80, 14, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.24),
    0 0 0.82rem rgba(232, 168, 55, 0.26) !important;
}

/* ai-generate-hover-scale-eof-20260611-2: final visible hover feedback, no border line. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card,
.nav-workbench-generate-reference .generate-reference-card {
  transition: transform 180ms cubic-bezier(0.2, 0.72, 0.24, 1) !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card.is-hovered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-hover-upload .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-hover-editor .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-hover-inspiration .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-editor-action-button:hover) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-inspiration-action-button:hover) .generate-reference-card-inspiration,
.nav-workbench-generate-reference .generate-reference-card:hover,
.nav-workbench-generate-reference .generate-reference-card.is-hovered {
  z-index: 6 !important;
  transform: scale(1.045) !important;
  filter: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  border-color: transparent !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-hotspot:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-hotspot:focus-visible,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-submit-status-button:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-submit-status-button:focus-visible,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-card-action-button:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-card-action-button:focus-visible,
.nav-workbench-generate-reference .generate-reference-hotspot:hover,
.nav-workbench-generate-reference .generate-reference-hotspot:focus-visible,
.nav-workbench-generate-reference .generate-submit-status-button:hover,
.nav-workbench-generate-reference .generate-submit-status-button:focus-visible,
.nav-workbench-generate-reference .generate-card-action-button:hover,
.nav-workbench-generate-reference .generate-card-action-button:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  filter: none !important;
  box-shadow: none !important;
}

/* learning-tools-library-theme-20260611-1: align metronome and tuner with the music-library color system. */
html[data-active-module="metronome"],
html[data-active-module="tuner"] {
  --library-tool-gold: 232, 184, 111;
  --library-tool-gold-soft: 255, 220, 166;
  --library-tool-panel: 12, 13, 15;
  --library-tool-line: 255, 255, 255;
  --library-tool-blue: 138, 185, 217;
  --library-tool-bg-a: #050607;
  --library-tool-bg-b: #0d1118;
  --library-tool-bg-c: #030405;
}

html[data-active-module="metronome"] body,
html[data-active-module="tuner"] body {
  background:
    radial-gradient(ellipse at 52% 14%, rgba(var(--library-tool-gold), 0.075), transparent 34%),
    radial-gradient(ellipse at 82% 18%, rgba(var(--library-tool-blue), 0.08), transparent 32%),
    linear-gradient(180deg, rgba(14, 15, 17, 0.98), rgba(6, 7, 9, 0.995) 42%, rgba(3, 4, 6, 0.995)) !important;
}

html[data-active-module="metronome"] .content-grid[data-module="metronome"],
html[data-active-module="tuner"] .content-grid[data-module="tuner"] {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.035) 50%, transparent),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.01) 0 1px, transparent 1px 5px) !important;
}

html[data-active-module="metronome"] .violin-metronome-page,
html[data-active-module="tuner"] .professional-tuner {
  border-color: rgba(var(--library-tool-line), 0.105) !important;
  border-radius: clamp(1.05rem, 1.45vw, 1.5rem) !important;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(var(--library-tool-gold), 0.08), transparent 38%),
    radial-gradient(ellipse at 88% 24%, rgba(var(--library-tool-blue), 0.065), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)),
    rgba(var(--library-tool-panel), 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 1.2rem 3.6rem rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(24px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.1) !important;
}

html[data-active-module="metronome"] .metronome-header,
html[data-active-module="tuner"] .tuner-header {
  border-color: rgba(var(--library-tool-line), 0.09) !important;
  background:
    linear-gradient(90deg, rgba(var(--library-tool-gold), 0.11), rgba(255, 255, 255, 0.035) 46%, rgba(var(--library-tool-blue), 0.035)),
    rgba(0, 0, 0, 0.2) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.075) !important;
}

html[data-active-module="metronome"] .metronome-command-copy .eyebrow,
html[data-active-module="tuner"] .tuner-header .eyebrow,
html[data-active-module="tuner"] .tuner-detect-head strong {
  color: rgba(var(--library-tool-gold-soft), 0.88) !important;
}

html[data-active-module="metronome"] .metronome-command-copy h3,
html[data-active-module="tuner"] .tuner-header h3 {
  color: rgba(255, 251, 242, 0.98) !important;
}

html[data-active-module="metronome"] .metronome-subtitle-line,
html[data-active-module="tuner"] .tuner-header p,
html[data-active-module="tuner"] .tuner-status-pill {
  color: rgba(236, 232, 220, 0.72) !important;
}

html[data-active-module="metronome"] .metronome-header-meta,
html[data-active-module="tuner"] .tuner-live-strip,
html[data-active-module="tuner"] .tuner-status-pill {
  border-color: rgba(var(--library-tool-line), 0.09) !important;
  background: rgba(0, 0, 0, 0.28) !important;
}

html[data-active-module="metronome"] .beat-performance-stage,
html[data-active-module="metronome"] .metronome-stage-controls,
html[data-active-module="metronome"] .metronome-control-bar .metronome-control-card,
html[data-active-module="tuner"] .tuner-pegbox-stage,
html[data-active-module="tuner"] .tuner-center-panel,
html[data-active-module="tuner"] .tuner-side-panel,
html[data-active-module="tuner"] .tuner-cent-display,
html[data-active-module="tuner"] .tuner-spec-card,
html[data-active-module="tuner"] .tuner-auto-listening-card,
html[data-active-module="tuner"] .tuner-control-group,
html[data-active-module="tuner"] .tuner-mic-card,
html[data-active-module="tuner"] .tuner-string-status-card {
  border-color: rgba(var(--library-tool-line), 0.105) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(var(--library-tool-panel), 0.56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 0.9rem 2.2rem rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="metronome"] .beat-performance-stage {
  background:
    radial-gradient(ellipse at 48% 54%, rgba(var(--library-tool-gold), 0.13), transparent 36%),
    radial-gradient(ellipse at 70% 58%, rgba(var(--library-tool-blue), 0.09), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)),
    rgba(var(--library-tool-panel), 0.58) !important;
}

html[data-active-module="metronome"] .metronome-stage-controls,
html[data-active-module="metronome"] .metronome-bpm-console,
html[data-active-module="tuner"] .tuner-note-readout,
html[data-active-module="tuner"] .tuner-meter-stat {
  border-color: rgba(var(--library-tool-gold-soft), 0.16) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--library-tool-gold), 0.12), transparent 62%),
    rgba(0, 0, 0, 0.3) !important;
}

html[data-active-module="metronome"] .metronome-bpm-console strong,
html[data-active-module="tuner"] .tuner-note-readout strong,
html[data-active-module="tuner"] .tuner-note-readout em {
  color: rgba(var(--library-tool-gold-soft), 0.98) !important;
  text-shadow: 0 0 1.2rem rgba(var(--library-tool-gold), 0.18) !important;
}

html[data-active-module="metronome"] .metronome-big-beat {
  border-color: rgba(var(--library-tool-line), 0.14) !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.14), transparent 33%),
    radial-gradient(circle, rgba(245, 245, 243, 0.11), rgba(var(--library-tool-blue), 0.07) 56%, rgba(0, 0, 0, 0.34)) !important;
}

html[data-active-module="metronome"] .metronome-big-beat.is-current {
  border-color: rgba(var(--library-tool-gold-soft), 0.62) !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.24), transparent 34%),
    radial-gradient(circle, rgba(var(--library-tool-gold), 0.42), rgba(var(--library-tool-blue), 0.08) 62%, rgba(0, 0, 0, 0.2)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 2.4rem rgba(var(--library-tool-gold), 0.34),
    0 1.2rem 2.8rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="metronome"] .metronome-start-action {
  border-color: rgba(var(--library-tool-gold-soft), 0.64) !important;
  background:
    linear-gradient(180deg, rgba(232, 197, 126, 0.96), rgba(174, 128, 53, 0.95)) !important;
  color: rgba(20, 14, 6, 0.96) !important;
  box-shadow: 0 0.75rem 1.5rem rgba(174, 128, 53, 0.18) !important;
}

html[data-active-module="metronome"] :is(.metronome-bpm-console button, .metronome-top-actions button, .metronome-control-card button, .metronome-tap-button),
html[data-active-module="tuner"] :is(.tuner-control-group button, .tuner-auto-listening-card button, .tuner-mic-card button) {
  border-color: rgba(var(--library-tool-line), 0.09) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(26, 27, 27, 0.76) !important;
  color: rgba(245, 245, 243, 0.9) !important;
}

html[data-active-module="metronome"] :is(.metronome-segment-grid button, .metronome-sound-mini-panel button, .metronome-practice-mini-panel button, .metronome-custom-accent-panel button).is-active,
html[data-active-module="tuner"] :is(.tuner-string-group button, .tuner-a4-group button, .tuner-control-group button).is-active {
  border-color: rgba(var(--library-tool-gold-soft), 0.52) !important;
  background:
    linear-gradient(100deg, rgba(118, 79, 39, 0.86), rgba(230, 188, 126, 0.72) 48%, rgba(98, 68, 36, 0.82)),
    rgba(var(--library-tool-gold), 0.28) !important;
  color: rgba(255, 245, 225, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.28),
    0 0 1rem rgba(var(--library-tool-gold), 0.15) !important;
}

html[data-active-module="metronome"] :is(.metronome-bpm-console button, .metronome-top-actions button, .metronome-control-card button, .metronome-tap-button):hover,
html[data-active-module="tuner"] :is(.tuner-control-group button, .tuner-auto-listening-card button, .tuner-mic-card button):hover {
  border-color: rgba(var(--library-tool-gold-soft), 0.46) !important;
  background:
    linear-gradient(180deg, rgba(var(--library-tool-gold), 0.16), rgba(0, 0, 0, 0.32)),
    rgba(var(--library-tool-gold), 0.08) !important;
}

html[data-active-module="tuner"] .tuner-cent-gauge {
  border-color: rgba(var(--library-tool-gold-soft), 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    radial-gradient(ellipse at 50% 120%, rgba(var(--library-tool-gold), 0.1), transparent 44%),
    rgba(3, 7, 10, 0.7) !important;
}

html[data-active-module="tuner"] .tuner-precision-dial::before {
  background:
    linear-gradient(90deg, rgba(var(--library-tool-blue), 0.5), rgba(232, 226, 205, 0.34) 47%, rgba(var(--library-tool-gold-soft), 0.9) 50%, rgba(232, 226, 205, 0.34) 53%, rgba(224, 156, 116, 0.52)) !important;
}

html[data-active-module="tuner"] .tuner-dial-zero,
html[data-active-module="tuner"] .tuner-precision-dial > i.is-center::before {
  background: rgba(var(--library-tool-gold-soft), 0.96) !important;
  box-shadow: 0 0 0.78rem rgba(var(--library-tool-gold), 0.28) !important;
}

html[data-active-module="metronome"] input[type="range"],
html[data-active-module="tuner"] input[type="range"] {
  accent-color: rgb(var(--library-tool-gold));
}

/* ai-generate-upload-options-20260611-1: BPM and note fields inside the upload card flow. */
html[data-active-module="nav-generate"] .generate-reference-options {
  position: absolute !important;
  z-index: 14 !important;
  left: calc(87 / 1672 * 100%) !important;
  top: calc(595 / 846 * 100%) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr) !important;
  gap: 0.5rem !important;
  width: calc(388 / 1672 * 100%) !important;
  height: calc(54 / 846 * 100%) !important;
  min-width: 0 !important;
  pointer-events: auto !important;
}

html[data-active-module="nav-generate"] .generate-reference-field {
  display: grid !important;
  grid-template-rows: 0.72rem minmax(0, 1fr) !important;
  align-content: center !important;
  gap: 0.18rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.42rem 0.6rem 0.44rem !important;
  border: 1px solid rgba(255, 219, 146, 0.18) !important;
  border-radius: 0.58rem !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(235, 177, 73, 0.12), transparent 66%),
    linear-gradient(180deg, rgba(22, 16, 10, 0.78), rgba(8, 8, 7, 0.84)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 219, 0.08),
    0 0.32rem 0.72rem rgba(0, 0, 0, 0.18) !important;
  color: rgba(255, 236, 197, 0.94) !important;
  box-sizing: border-box !important;
}

html[data-active-module="nav-generate"] .generate-reference-field span {
  display: block !important;
  min-width: 0 !important;
  color: rgba(224, 170, 74, 0.96) !important;
  font-size: 0.58rem !important;
  font-weight: 860 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-reference-field input {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: rgba(255, 251, 240, 0.98) !important;
  font: inherit !important;
  font-size: 0.84rem !important;
  font-weight: 860 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-field.is-bpm {
  justify-items: center !important;
  padding-inline: 0.46rem !important;
}

html[data-active-module="nav-generate"] .generate-reference-field.is-bpm span {
  width: 100% !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-reference-field.is-bpm input {
  font-size: 0.96rem !important;
  font-weight: 920 !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-reference-field.is-message input {
  transform: translateY(-0.02rem) !important;
}

html[data-active-module="nav-generate"] .generate-reference-field input::placeholder {
  color: rgba(230, 218, 196, 0.52) !important;
  opacity: 1 !important;
}

html[data-active-module="nav-generate"] .generate-reference-field input:disabled {
  opacity: 0.68 !important;
  cursor: wait !important;
}

html[data-active-module="nav-generate"] .generate-reference-field:focus-within {
  border-color: rgba(255, 221, 151, 0.42) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(235, 177, 73, 0.18), transparent 66%),
    linear-gradient(180deg, rgba(31, 22, 13, 0.84), rgba(10, 9, 7, 0.9)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 219, 0.1),
    0 0 0 1px rgba(255, 219, 146, 0.08),
    0 0.34rem 0.76rem rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="nav-generate"] .generate-reference-field input[type="number"] {
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

html[data-active-module="nav-generate"] .generate-reference-field input[type="number"]::-webkit-outer-spin-button,
html[data-active-module="nav-generate"] .generate-reference-field input[type="number"]::-webkit-inner-spin-button {
  margin: 0 !important;
  -webkit-appearance: none !important;
}

/* ai-generate-request-form-20260611-24: give the request card a calmer vertical rhythm. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference {
  --generate-card-left: calc(64 / 1672 * 100%);
  --generate-card-top: calc(40 / 846 * 100%);
  --generate-card-width: calc(444 / 1672 * 100%);
  --generate-card-height: calc(744 / 846 * 100%);
  --generate-request-left: calc(var(--generate-card-left) + (18 / 1672 * 100%));
  --generate-request-top: calc(var(--generate-card-top) + (104 / 846 * 100%));
  --generate-request-width: calc(var(--generate-card-width) - (36 / 1672 * 100%));
  --generate-request-height: calc(486 / 846 * 100%);
  --generate-submit-top: calc(var(--generate-card-top) + (648 / 846 * 100%));
  --generate-submit-height: calc(64 / 846 * 100%);
}

html[data-active-module="nav-generate"] .generate-reference-card-upload {
  left: var(--generate-card-left) !important;
  top: var(--generate-card-top) !important;
  z-index: 13 !important;
  display: block !important;
  width: var(--generate-card-width) !important;
  height: var(--generate-card-height) !important;
  border: 1px solid rgba(255, 211, 129, 0.24) !important;
  border-radius: clamp(0.92rem, 1.18vw, 1.24rem) !important;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(232, 166, 55, 0.12), transparent 42%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 197, 90, 0.065), transparent 50%),
    linear-gradient(180deg, rgba(22, 13, 6, 0.9), rgba(6, 6, 5, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 188, 0.08),
    inset 0 0 1.8rem rgba(238, 173, 68, 0.055),
    0 1.05rem 2.3rem rgba(0, 0, 0, 0.28) !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
  box-sizing: border-box !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload > img {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload::before,
html[data-active-module="nav-generate"] .generate-reference-card-upload::after {
  position: absolute !important;
  left: calc(18 / 436 * 100%) !important;
  right: calc(18 / 436 * 100%) !important;
  z-index: 1 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload::before {
  content: "AI 生成曲目" !important;
  top: clamp(1.72rem, 2.12vw, 2.08rem) !important;
  color: rgba(255, 250, 242, 0.95) !important;
  font-size: clamp(1.62rem, 2.18vw, 2.04rem) !important;
  font-weight: 860 !important;
  line-height: 1 !important;
  text-shadow:
    0 0.12rem 0.44rem rgba(0, 0, 0, 0.55),
    0 0 1.1rem rgba(255, 238, 202, 0.16) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload::after {
  content: none !important;
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-options {
  left: var(--generate-request-left) !important;
  top: var(--generate-request-top) !important;
  z-index: 16 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.24fr) minmax(0, 1.34fr) max-content !important;
  align-content: start !important;
  gap: clamp(0.4rem, 0.52vw, 0.56rem) !important;
  width: var(--generate-request-width) !important;
  height: var(--generate-request-height) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(0.62rem, 0.8vw, 0.84rem) !important;
  border: 0 !important;
  border-radius: clamp(0.76rem, 0.96vw, 0.98rem) !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate !important;
  overflow: visible !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-idle .generate-reference-hotspot.generate-reference-upload,
html[data-active-module="nav-generate"] .generate-reference-hotspot.generate-reference-upload,
html[data-active-module="nav-generate"] .generate-reference-hotspot.generate-reference-upload:hover,
html[data-active-module="nav-generate"] .generate-reference-hotspot.generate-reference-upload:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  filter: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-hotspot.generate-reference-upload::before,
html[data-active-module="nav-generate"] .generate-reference-hotspot.generate-reference-upload::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-options::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 0 clamp(-0.7rem, -0.74vw, -0.54rem) 0 !important;
  border: 1px dashed rgba(196, 133, 32, 0.5) !important;
  border-radius: clamp(1rem, 1.28vw, 1.34rem) !important;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(223, 159, 55, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(18, 12, 7, 0.9), rgba(6, 6, 5, 0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 175, 0.08),
    inset 0 0 1.4rem rgba(231, 167, 62, 0.05),
    0 0.88rem 1.65rem rgba(0, 0, 0, 0.2) !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-options::after {
  content: none !important;
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button {
  left: var(--generate-request-left) !important;
  top: var(--generate-submit-top) !important;
  width: var(--generate-request-width) !important;
  height: var(--generate-submit-height) !important;
}

/* ai-generate-final-visual-polish-20260612-1: final no-feature polish for card scale, color, and busy layout. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference {
  --generate-card-left: calc(25 / 1672 * 100%) !important;
  --generate-card-top: calc(27 / 846 * 100%) !important;
  --generate-card-width: calc(514 / 1672 * 100%) !important;
  --generate-card-height: calc(758 / 846 * 100%) !important;
  --generate-request-left: calc(var(--generate-card-left) + (18 / 1672 * 100%)) !important;
  --generate-request-top: calc(var(--generate-card-top) + (104 / 846 * 100%)) !important;
  --generate-request-width: calc(var(--generate-card-width) - (36 / 1672 * 100%)) !important;
  --generate-request-height: calc(486 / 846 * 100%) !important;
  --generate-submit-top: calc(var(--generate-card-top) + (648 / 846 * 100%)) !important;
  --generate-submit-height: calc(64 / 846 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card {
  transform-origin: center center !important;
  transition:
    transform 180ms cubic-bezier(0.2, 0.72, 0.24, 1),
    box-shadow 180ms ease,
    filter 180ms ease !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload {
  left: var(--generate-card-left) !important;
  top: var(--generate-card-top) !important;
  width: var(--generate-card-width) !important;
  height: var(--generate-card-height) !important;
  --generate-card-accent: 255, 205, 112;
  --generate-card-jewel: 220, 154, 68;
}

html[data-active-module="nav-generate"] .generate-reference-card-editor {
  --generate-card-accent: 166, 212, 255;
  --generate-card-jewel: 74, 146, 210;
}

html[data-active-module="nav-generate"] .generate-reference-card-inspiration {
  --generate-card-accent: 232, 176, 255;
  --generate-card-jewel: 180, 95, 255;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload,
html[data-active-module="nav-generate"] .generate-reference-card-editor,
html[data-active-module="nav-generate"] .generate-reference-card-inspiration {
  filter: none !important;
  box-shadow:
    0 1.35rem 3.15rem rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 226, 172, 0.08),
    0 0 2.1rem rgba(var(--generate-card-accent), 0.16),
    0 0.18rem 1.4rem rgba(var(--generate-card-jewel), 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045) !important;
}

html[data-active-module="nav-generate"] .generate-reference-main-title {
  left: var(--generate-card-left) !important;
  top: calc(var(--generate-card-top) + (30 / 846 * 100%)) !important;
  width: var(--generate-card-width) !important;
}

html[data-active-module="nav-generate"] .generate-reference-options {
  left: var(--generate-request-left) !important;
  top: var(--generate-request-top) !important;
  width: var(--generate-request-width) !important;
  height: var(--generate-request-height) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button {
  left: var(--generate-request-left) !important;
  top: var(--generate-submit-top) !important;
  width: var(--generate-request-width) !important;
  height: var(--generate-submit-height) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked):has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked):has(.generate-reference-options:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked):has(.generate-submit-status-button:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked):has(.generate-reference-upload:focus-visible) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked):has(.generate-submit-status-button:focus-visible) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-editor:hover) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-inspiration:hover) .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-editor:focus-visible) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-inspiration:focus-visible) .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .generate-reference-card.is-hovered {
  z-index: 14 !important;
  transform: scale(1.045) !important;
  filter: none !important;
  box-shadow:
    0 1.65rem 3.7rem rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(255, 231, 184, 0.14),
    0 0 2.65rem rgba(var(--generate-card-accent), 0.24),
    0 0.32rem 1.65rem rgba(var(--generate-card-jewel), 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked):has(.generate-submit-status-button:active) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked):has(.generate-reference-upload:active) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .generate-reference-card-editor:active,
html[data-active-module="nav-generate"] .generate-reference-card-inspiration:active {
  transform: scale(1.035) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload:active,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.is-hovered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked.is-hover-upload .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-submit-status-button:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-reference-upload:active) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-submit-status-button:active) .generate-reference-card-upload {
  z-index: 13 !important;
  transform: none !important;
  filter: none !important;
  box-shadow:
    0 1.35rem 3.15rem rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 226, 172, 0.08),
    0 0 2.1rem rgba(255, 205, 112, 0.16),
    0 0.18rem 1.4rem rgba(220, 154, 68, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.34rem, 0.52vw, 0.52rem) !important;
  width: min(100%, 17.7rem) !important;
  min-height: clamp(6.85rem, 9.25vw, 7.65rem) !important;
  padding: clamp(0.9rem, 1.12vw, 1.08rem) clamp(1rem, 1.26vw, 1.22rem) !important;
  overflow: hidden !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-stage,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-countdown,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-quota {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-stage {
  order: 1 !important;
  color: rgba(255, 238, 199, 0.98) !important;
  font-size: clamp(1.08rem, 1.38vw, 1.32rem) !important;
  font-weight: 930 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-countdown {
  order: 2 !important;
  color: rgba(255, 226, 174, 0.84) !important;
  font-size: clamp(0.76rem, 0.9vw, 0.92rem) !important;
  font-weight: 800 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-bar {
  position: static !important;
  order: 3 !important;
  display: block !important;
  width: min(100%, 12.55rem) !important;
  height: clamp(0.28rem, 0.38vw, 0.38rem) !important;
  margin: 0.02rem auto 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-quota {
  order: 4 !important;
  color: rgba(255, 226, 174, 0.58) !important;
  font-size: clamp(0.64rem, 0.76vw, 0.78rem) !important;
  font-weight: 720 !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  place-items: center !important;
  overflow: hidden !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > strong {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > .generate-submit-busy-meta,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > .generate-submit-busy-meta,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > .generate-submit-busy-meta,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > small {
  display: none !important;
}

/* profile-library-minimal-20260612-1: final compact profile skin matching the score library. */
html[data-active-module="profile"],
html[data-active-module="profile"] body,
html[data-active-module="profile"] .app-shell,
html[data-active-module="profile"] .main-stage,
html[data-active-module="profile"] .content-grid[data-module="profile"] {
  background: #030405 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] {
  --profile-ref-gold: 232, 184, 111;
  --profile-ref-gold-soft: 255, 220, 166;
  --profile-ref-line: 255, 255, 255;
  --profile-ref-panel: 12, 13, 15;
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(0.42rem, 0.7vw, 0.72rem) !important;
  align-content: start !important;
  gap: 0 !important;
  overflow: auto !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"]::before,
html[data-active-module="profile"] .content-grid[data-module="profile"]::after {
  content: none !important;
  display: none !important;
}

html[data-active-module="profile"] .profile-dashboard.profile-account-page {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(13.8rem, 0.25fr) !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  gap: clamp(0.38rem, 0.56vw, 0.56rem) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

html[data-active-module="profile"] .profile-glass-card {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(var(--profile-ref-line), 0.08) !important;
  border-radius: 0.52rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(var(--profile-ref-panel), 0.66) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0.65rem 1.7rem rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(16px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.06) !important;
}

html[data-active-module="profile"] .profile-account-summary {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(13rem, 0.28fr) !important;
  align-items: center !important;
  gap: clamp(0.62rem, 0.86vw, 0.86rem) !important;
  min-height: clamp(5.1rem, 7.6vh, 6.1rem) !important;
  padding: clamp(0.54rem, 0.78vw, 0.78rem) !important;
}

html[data-active-module="profile"] .profile-avatar-mark {
  width: clamp(2.9rem, 3.7vw, 3.45rem) !important;
  height: clamp(2.9rem, 3.7vw, 3.45rem) !important;
  border-color: rgba(var(--profile-ref-gold-soft), 0.24) !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 246, 224, 0.24), transparent 36%),
    rgba(var(--profile-ref-gold), 0.12) !important;
  color: rgba(255, 241, 214, 0.96) !important;
  font-size: clamp(1.32rem, 2vw, 1.72rem) !important;
  box-shadow: none !important;
}

html[data-active-module="profile"] .profile-account-copy {
  min-width: 0 !important;
}

html[data-active-module="profile"] .profile-account-copy h3 {
  max-width: 100% !important;
  overflow: hidden !important;
  color: rgba(255, 255, 252, 0.97) !important;
  font-size: clamp(1.42rem, 2.15vw, 2rem) !important;
  line-height: 0.98 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-account-copy > p:not(.eyebrow) {
  margin: 0.18rem 0 0 !important;
  overflow: hidden !important;
  color: rgba(226, 226, 220, 0.68) !important;
  font-size: clamp(0.72rem, 0.8vw, 0.82rem) !important;
  font-weight: 760 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-status-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.18rem 0.48rem !important;
  min-width: 0 !important;
  padding: clamp(0.46rem, 0.62vw, 0.62rem) !important;
  border-color: rgba(var(--profile-ref-line), 0.075) !important;
  border-radius: 0.44rem !important;
  background: rgba(255, 255, 255, 0.032) !important;
}

html[data-active-module="profile"] .profile-status-panel span {
  grid-column: 1 !important;
  color: rgba(var(--profile-ref-gold-soft), 0.86) !important;
  font-size: 0.62rem !important;
  line-height: 1 !important;
}

html[data-active-module="profile"] .profile-status-panel strong {
  grid-column: 1 !important;
  color: rgba(255, 255, 252, 0.95) !important;
  font-size: clamp(0.86rem, 0.98vw, 0.98rem) !important;
  line-height: 1.05 !important;
}

html[data-active-module="profile"] .profile-status-panel p {
  grid-column: 1 / -1 !important;
  display: -webkit-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
  color: rgba(226, 226, 220, 0.58) !important;
  font-size: clamp(0.64rem, 0.72vw, 0.74rem) !important;
  line-height: 1.22 !important;
}

html[data-active-module="profile"] .profile-status-actions {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  justify-self: end !important;
  flex-wrap: nowrap !important;
}

html[data-active-module="profile"] .profile-days-card {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

html[data-active-module="profile"] .profile-quota-card {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

html[data-active-module="profile"] .profile-days-card,
html[data-active-module="profile"] .profile-quota-card {
  display: grid !important;
  align-content: start !important;
  gap: 0.18rem !important;
  min-height: clamp(5.1rem, 7.6vh, 6.1rem) !important;
  padding: clamp(0.56rem, 0.78vw, 0.78rem) !important;
}

html[data-active-module="profile"] .profile-days-card span,
html[data-active-module="profile"] .profile-quota-card span {
  color: rgba(255, 255, 252, 0.88) !important;
  font-size: clamp(0.74rem, 0.82vw, 0.84rem) !important;
  font-weight: 860 !important;
  line-height: 1.05 !important;
}

html[data-active-module="profile"] .profile-days-card strong,
html[data-active-module="profile"] .profile-quota-card strong {
  color: rgba(255, 255, 252, 0.96) !important;
  font-size: clamp(1.52rem, 2.55vw, 2.32rem) !important;
  line-height: 0.9 !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-days-card small,
html[data-active-module="profile"] .profile-quota-card small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: rgba(226, 226, 220, 0.58) !important;
  font-size: clamp(0.62rem, 0.7vw, 0.72rem) !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-quota-rule {
  display: none !important;
}

html[data-active-module="profile"] .profile-benefits-card {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, auto) !important;
  gap: clamp(0.42rem, 0.58vw, 0.58rem) !important;
  min-height: clamp(6.6rem, 10vh, 8rem) !important;
  padding: clamp(0.56rem, 0.78vw, 0.78rem) !important;
}

html[data-active-module="profile"] .profile-generated-card {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

html[data-active-module="profile"] .profile-orders-card {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

html[data-active-module="profile"] .profile-generated-card,
html[data-active-module="profile"] .profile-orders-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, auto) !important;
  align-content: start !important;
  gap: clamp(0.42rem, 0.58vw, 0.58rem) !important;
  min-height: clamp(5.7rem, 9vh, 7rem) !important;
  padding: clamp(0.56rem, 0.78vw, 0.78rem) !important;
}

html[data-active-module="profile"] .profile-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  min-width: 0 !important;
}

html[data-active-module="profile"] .profile-card-head > div {
  min-width: 0 !important;
}

html[data-active-module="profile"] .profile-card-head h3 {
  overflow: hidden !important;
  color: rgba(255, 255, 252, 0.95) !important;
  font-size: clamp(0.86rem, 0.96vw, 1rem) !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .eyebrow {
  margin: 0 0 0.16rem !important;
  color: rgba(var(--profile-ref-gold-soft), 0.88) !important;
  font-size: 0.58rem !important;
  font-weight: 860 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .profile-benefit-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(0.34rem, 0.48vw, 0.48rem) !important;
}

html[data-active-module="profile"] .profile-benefit-grid span {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 0.12rem 0.4rem !important;
  min-height: clamp(3.35rem, 5.2vh, 4.05rem) !important;
  padding: clamp(0.42rem, 0.58vw, 0.58rem) !important;
  border: 1px solid rgba(var(--profile-ref-line), 0.07) !important;
  border-radius: 0.44rem !important;
  background: rgba(255, 255, 255, 0.028) !important;
}

html[data-active-module="profile"] .profile-benefit-grid span b {
  grid-row: 1 / span 2 !important;
  width: clamp(1.52rem, 1.85vw, 1.72rem) !important;
  height: clamp(1.52rem, 1.85vw, 1.72rem) !important;
  border-radius: 999px !important;
  background: rgba(var(--profile-ref-gold), 0.12) !important;
  color: rgba(var(--profile-ref-gold-soft), 0.9) !important;
  font-size: 0.56rem !important;
  line-height: 1 !important;
}

html[data-active-module="profile"] .profile-benefit-grid span strong {
  overflow: hidden !important;
  color: rgba(255, 255, 252, 0.92) !important;
  font-size: clamp(0.74rem, 0.84vw, 0.86rem) !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-benefit-grid span small {
  display: block !important;
  overflow: hidden !important;
  color: rgba(226, 226, 220, 0.56) !important;
  font-size: clamp(0.6rem, 0.68vw, 0.7rem) !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-generated-list,
html[data-active-module="profile"] .profile-order-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: clamp(0.32rem, 0.46vw, 0.46rem) !important;
  min-height: 0 !important;
  overflow: auto !important;
}

html[data-active-module="profile"] .profile-generated-item,
html[data-active-module="profile"] .profile-order-item,
html[data-active-module="profile"] .profile-empty-state,
html[data-active-module="profile"] .profile-order-empty {
  display: grid !important;
  min-width: 0 !important;
  min-height: clamp(2.85rem, 4.8vh, 3.55rem) !important;
  height: auto !important;
  padding: clamp(0.42rem, 0.58vw, 0.58rem) !important;
  gap: 0.12rem 0.48rem !important;
  border: 1px solid rgba(var(--profile-ref-line), 0.07) !important;
  border-radius: 0.44rem !important;
  background: rgba(255, 255, 255, 0.028) !important;
  box-shadow: none !important;
}

html[data-active-module="profile"] .profile-generated-item {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
}

html[data-active-module="profile"] .profile-generated-item b {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}

html[data-active-module="profile"] .profile-generated-item strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

html[data-active-module="profile"] .profile-generated-item small {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

html[data-active-module="profile"] .profile-generated-actions {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  justify-self: end !important;
  align-self: center !important;
  flex-wrap: nowrap !important;
}

html[data-active-module="profile"] .profile-order-item {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto auto !important;
  align-items: center !important;
}

html[data-active-module="profile"] .profile-order-item strong,
html[data-active-module="profile"] .profile-order-item small,
html[data-active-module="profile"] .profile-order-item em {
  grid-column: 1 !important;
}

html[data-active-module="profile"] .profile-order-item b {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  justify-self: end !important;
}

html[data-active-module="profile"] .profile-order-actions {
  grid-column: 1 / -1 !important;
  padding-top: 0.06rem !important;
}

html[data-active-module="profile"] .profile-generated-item b,
html[data-active-module="profile"] .profile-order-item b {
  padding: 0.12rem 0.36rem !important;
  border-radius: 999px !important;
  background: rgba(var(--profile-ref-gold), 0.12) !important;
  color: rgba(var(--profile-ref-gold-soft), 0.92) !important;
  font-size: 0.56rem !important;
  font-weight: 860 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-generated-item strong,
html[data-active-module="profile"] .profile-order-item strong,
html[data-active-module="profile"] .profile-empty-state strong,
html[data-active-module="profile"] .profile-order-empty strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 255, 252, 0.92) !important;
  font-size: clamp(0.74rem, 0.84vw, 0.86rem) !important;
  line-height: 1.08 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-generated-item small,
html[data-active-module="profile"] .profile-order-item small,
html[data-active-module="profile"] .profile-order-item em,
html[data-active-module="profile"] .profile-empty-state p,
html[data-active-module="profile"] .profile-order-empty p,
html[data-active-module="profile"] .profile-order-sync {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(226, 226, 220, 0.56) !important;
  font-size: clamp(0.6rem, 0.68vw, 0.7rem) !important;
  font-style: normal !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-empty-state,
html[data-active-module="profile"] .profile-order-empty {
  align-content: center !important;
  justify-content: stretch !important;
}

html[data-active-module="profile"] .profile-order-empty {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
}

html[data-active-module="profile"] .profile-order-empty strong,
html[data-active-module="profile"] .profile-order-empty p {
  grid-column: 1 !important;
}

html[data-active-module="profile"] .profile-order-empty-actions {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  justify-self: end !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}

html[data-active-module="profile"] .profile-card-actions,
html[data-active-module="profile"] .profile-status-actions,
html[data-active-module="profile"] .profile-card-head-actions,
html[data-active-module="profile"] .profile-generated-actions,
html[data-active-module="profile"] .profile-order-actions,
html[data-active-module="profile"] .profile-order-empty-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
}

html[data-active-module="profile"] .profile-card-actions {
  margin-top: 0.1rem !important;
}

html[data-active-module="profile"] .profile-card-primary,
html[data-active-module="profile"] .profile-card-secondary,
html[data-active-module="profile"] .profile-generated-actions :is(a, button),
html[data-active-module="profile"] .profile-order-actions :is(a, button),
html[data-active-module="profile"] .profile-order-empty-actions button,
html[data-active-module="profile"] .profile-card-head .glass-button,
html[data-active-module="profile"] .profile-card-head-actions .glass-button {
  min-height: clamp(1.48rem, 2.45vh, 1.72rem) !important;
  min-width: 0 !important;
  padding: 0 0.54rem !important;
  border: 1px solid rgba(var(--profile-ref-gold), 0.28) !important;
  border-radius: 999px !important;
  background: rgba(9, 10, 12, 0.54) !important;
  color: rgba(var(--profile-ref-gold-soft), 0.96) !important;
  box-shadow: inset 0 1px 0 rgba(255, 244, 218, 0.07) !important;
  font: inherit !important;
  font-size: clamp(0.58rem, 0.66vw, 0.68rem) !important;
  font-weight: 860 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-card-secondary,
html[data-active-module="profile"] .profile-order-empty-actions button:last-child,
html[data-active-module="profile"] .profile-card-head-actions .glass-button:first-child {
  border-color: rgba(var(--profile-ref-line), 0.09) !important;
  color: rgba(235, 230, 215, 0.76) !important;
}

html[data-active-module="profile"] .profile-card-primary:is(:hover, :focus-visible),
html[data-active-module="profile"] .profile-card-secondary:is(:hover, :focus-visible),
html[data-active-module="profile"] .profile-generated-actions :is(a, button):is(:hover, :focus-visible),
html[data-active-module="profile"] .profile-order-actions :is(a, button):is(:hover, :focus-visible),
html[data-active-module="profile"] .profile-order-empty-actions button:is(:hover, :focus-visible),
html[data-active-module="profile"] .profile-card-head .glass-button:is(:hover, :focus-visible),
html[data-active-module="profile"] .profile-card-head-actions .glass-button:is(:hover, :focus-visible) {
  border-color: rgba(var(--profile-ref-gold-soft), 0.46) !important;
  background: rgba(var(--profile-ref-gold), 0.14) !important;
  color: rgba(255, 244, 218, 0.98) !important;
  outline: 0 !important;
}

html[data-active-module="profile"] .profile-generated-item.is-busy,
html[data-active-module="profile"] .profile-generated-item:hover,
html[data-active-module="profile"] .profile-order-item:hover {
  border-color: rgba(var(--profile-ref-gold), 0.18) !important;
  background: rgba(var(--profile-ref-gold), 0.055) !important;
}

html[data-active-module="profile"] .profile-preferences-card {
  display: none !important;
}

@media (max-width: 1180px) {
  html[data-active-module="profile"] .profile-dashboard.profile-account-page {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="profile"] .profile-account-summary,
  html[data-active-module="profile"] .profile-days-card,
  html[data-active-module="profile"] .profile-quota-card,
  html[data-active-module="profile"] .profile-benefits-card,
  html[data-active-module="profile"] .profile-generated-card,
  html[data-active-module="profile"] .profile-orders-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 820px) {
  html[data-active-module="profile"] .profile-account-summary {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  html[data-active-module="profile"] .profile-status-panel {
    grid-column: 1 / -1 !important;
  }

  html[data-active-module="profile"] .profile-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-active-module="profile"] .profile-order-empty {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="profile"] .profile-order-empty-actions {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status {
    width: min(100%, 16.4rem) !important;
    min-height: 6.55rem !important;
  }

  html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-stage {
    font-size: clamp(1rem, 4.8vw, 1.22rem) !important;
  }
}

/* ai-generate-final-visual-polish-eof-20260612-1: true EOF guard for AI generate card sizing and busy-state layout. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference {
  --generate-card-left: calc(25 / 1672 * 100%) !important;
  --generate-card-top: calc(27 / 846 * 100%) !important;
  --generate-card-width: calc(514 / 1672 * 100%) !important;
  --generate-card-height: calc(758 / 846 * 100%) !important;
  --generate-request-left: calc(var(--generate-card-left) + (18 / 1672 * 100%)) !important;
  --generate-request-top: calc(var(--generate-card-top) + (104 / 846 * 100%)) !important;
  --generate-request-width: calc(var(--generate-card-width) - (36 / 1672 * 100%)) !important;
  --generate-request-height: calc(486 / 846 * 100%) !important;
  --generate-submit-top: calc(var(--generate-card-top) + (648 / 846 * 100%)) !important;
  --generate-submit-height: calc(64 / 846 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload {
  left: var(--generate-card-left) !important;
  top: var(--generate-card-top) !important;
  width: var(--generate-card-width) !important;
  height: var(--generate-card-height) !important;
  --generate-card-accent: 255, 205, 112;
  --generate-card-jewel: 220, 154, 68;
}

html[data-active-module="nav-generate"] .generate-reference-card-editor {
  --generate-card-accent: 166, 212, 255;
  --generate-card-jewel: 74, 146, 210;
}

html[data-active-module="nav-generate"] .generate-reference-card-inspiration {
  --generate-card-accent: 232, 176, 255;
  --generate-card-jewel: 180, 95, 255;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload,
html[data-active-module="nav-generate"] .generate-reference-card-editor,
html[data-active-module="nav-generate"] .generate-reference-card-inspiration {
  filter: none !important;
  transform-origin: center center !important;
  transition: transform 180ms cubic-bezier(0.2, 0.72, 0.24, 1), box-shadow 180ms ease !important;
  box-shadow:
    0 1.35rem 3.15rem rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 226, 172, 0.08),
    0 0 2.1rem rgba(var(--generate-card-accent), 0.16),
    0 0.18rem 1.4rem rgba(var(--generate-card-jewel), 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045) !important;
}

html[data-active-module="nav-generate"] .generate-reference-main-title {
  left: var(--generate-card-left) !important;
  top: calc(var(--generate-card-top) + (30 / 846 * 100%)) !important;
  width: var(--generate-card-width) !important;
}

html[data-active-module="nav-generate"] .generate-reference-options {
  left: var(--generate-request-left) !important;
  top: var(--generate-request-top) !important;
  width: var(--generate-request-width) !important;
  height: var(--generate-request-height) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button {
  left: var(--generate-request-left) !important;
  top: var(--generate-submit-top) !important;
  width: var(--generate-request-width) !important;
  height: var(--generate-submit-height) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked):has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked):has(.generate-submit-status-button:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked):has(.generate-reference-upload:focus-visible) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked):has(.generate-submit-status-button:focus-visible) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-editor:hover) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-inspiration:hover) .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-editor:focus-visible) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-inspiration:focus-visible) .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .generate-reference-card.is-hovered {
  z-index: 14 !important;
  transform: scale(1.045) !important;
  filter: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload:active,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.is-hovered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked.is-hover-upload .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-submit-status-button:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-reference-upload:active) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-submit-status-button:active) .generate-reference-card-upload {
  z-index: 13 !important;
  transform: none !important;
  filter: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.34rem, 0.52vw, 0.52rem) !important;
  width: min(100%, 17.7rem) !important;
  min-height: clamp(6.85rem, 9.25vw, 7.65rem) !important;
  padding: clamp(0.9rem, 1.12vw, 1.08rem) clamp(1rem, 1.26vw, 1.22rem) !important;
  overflow: hidden !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-stage,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-countdown,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-quota {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-stage {
  order: 1 !important;
  font-size: clamp(1.08rem, 1.38vw, 1.32rem) !important;
  font-weight: 930 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-countdown {
  order: 2 !important;
  color: rgba(255, 226, 174, 0.84) !important;
  font-size: clamp(0.76rem, 0.9vw, 0.92rem) !important;
  font-weight: 800 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-bar {
  position: static !important;
  order: 3 !important;
  display: block !important;
  width: min(100%, 12.55rem) !important;
  height: clamp(0.28rem, 0.38vw, 0.38rem) !important;
  margin: 0.02rem auto 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-quota {
  order: 4 !important;
  color: rgba(255, 226, 174, 0.58) !important;
  font-size: clamp(0.64rem, 0.76vw, 0.78rem) !important;
  font-weight: 720 !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  place-items: center !important;
  overflow: hidden !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > strong {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > .generate-submit-busy-meta,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > .generate-submit-busy-meta,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > .generate-submit-busy-meta,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > small {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-field.is-title,
html[data-active-module="nav-generate"] .generate-reference-field.is-message,
html[data-active-module="nav-generate"] .generate-reference-score-note {
  grid-column: 1 / -1 !important;
}

html[data-active-module="nav-generate"] .generate-reference-field,
html[data-active-module="nav-generate"] .generate-reference-upload-field {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: center !important;
  gap: clamp(0.22rem, 0.3vw, 0.32rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(0.54rem, 0.7vw, 0.74rem) clamp(0.7rem, 0.9vw, 0.94rem) !important;
  border: 1px solid rgba(255, 219, 146, 0.16) !important;
  border-radius: clamp(0.54rem, 0.7vw, 0.72rem) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(235, 177, 73, 0.11), transparent 68%),
    linear-gradient(180deg, rgba(24, 17, 10, 0.82), rgba(8, 8, 7, 0.88)) !important;
  color: rgba(255, 236, 197, 0.94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 245, 219, 0.07) !important;
  box-sizing: border-box !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload-field {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: flex !important;
  flex-direction: column !important;
  grid-column: 1 / -1 !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(0.24rem, 0.34vw, 0.36rem) !important;
  padding: clamp(0.82rem, 0.98vw, 1rem) clamp(0.7rem, 0.9vw, 0.94rem) clamp(0.68rem, 0.84vw, 0.86rem) !important;
  border-style: dashed !important;
  border-color: rgba(255, 206, 112, 0.38) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(226, 156, 43, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(20, 13, 8, 0.82), rgba(8, 7, 6, 0.88)) !important;
  color: rgba(255, 243, 221, 0.96) !important;
  text-align: center !important;
  cursor: pointer !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload-field::before {
  content: "" !important;
  display: grid !important;
  place-items: center !important;
  order: 2 !important;
  width: clamp(1.8rem, 2.35vw, 2.32rem) !important;
  height: clamp(1.8rem, 2.35vw, 2.32rem) !important;
  border: 1px solid rgba(255, 220, 146, 0.34) !important;
  border-radius: 999px !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd98f' stroke-width='1.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.4 18h.7a3.25 3.25 0 0 0 .3-6.48A5.15 5.15 0 0 0 8.5 8.1 4.15 4.15 0 0 0 6.6 18h.8'/%3E%3Cpath d='M12 18v-7'/%3E%3Cpath d='m9.15 13.85 2.85-2.85 2.85 2.85'/%3E%3C/svg%3E") center / clamp(1.18rem, 1.52vw, 1.42rem) clamp(1.18rem, 1.52vw, 1.42rem) no-repeat,
    radial-gradient(circle at 50% 38%, rgba(255, 214, 139, 0.16), transparent 58%),
    rgba(255, 196, 89, 0.11) !important;
  color: rgba(255, 211, 128, 0.98) !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

html[data-active-module="nav-generate"] .generate-reference-field span,
html[data-active-module="nav-generate"] .generate-reference-upload-field span {
  display: flex !important;
  align-items: center !important;
  gap: 0.26rem !important;
  min-width: 0 !important;
  color: rgba(238, 220, 190, 0.94) !important;
  font-size: clamp(0.84rem, 0.9vw, 0.94rem) !important;
  font-weight: 760 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload-field span {
  order: 1 !important;
  align-self: stretch !important;
  justify-content: flex-start !important;
}

html[data-active-module="nav-generate"] .generate-reference-field span b,
html[data-active-module="nav-generate"] .generate-reference-upload-field span b {
  color: rgba(190, 187, 178, 0.62) !important;
  font-size: 0.94em !important;
  font-weight: 520 !important;
}

html[data-active-module="nav-generate"] .generate-reference-field input,
html[data-active-module="nav-generate"] .generate-reference-field textarea {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: rgba(247, 240, 224, 0.96) !important;
  font: inherit !important;
  font-size: clamp(0.92rem, 1.04vw, 1.08rem) !important;
  font-weight: 860 !important;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-field.is-bpm {
  justify-items: center !important;
  padding-inline: clamp(0.42rem, 0.58vw, 0.6rem) !important;
}

html[data-active-module="nav-generate"] .generate-reference-field.is-bpm span {
  justify-content: center !important;
  width: 100% !important;
}

html[data-active-module="nav-generate"] .generate-reference-field.is-bpm input {
  font-size: clamp(1.02rem, 1.2vw, 1.2rem) !important;
  font-weight: 920 !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-reference-field.is-message input {
  font-size: clamp(0.72rem, 0.82vw, 0.86rem) !important;
}

html[data-active-module="nav-generate"] .generate-reference-field.is-message {
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
}

html[data-active-module="nav-generate"] .generate-reference-field.is-message textarea {
  padding-top: clamp(0.1rem, 0.16vw, 0.16rem) !important;
  color: rgba(247, 240, 224, 0.96) !important;
  font-size: clamp(0.9rem, 1vw, 1.04rem) !important;
  line-height: 1.32 !important;
  resize: none !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload-field strong,
html[data-active-module="nav-generate"] .generate-reference-upload-field small,
html[data-active-module="nav-generate"] .generate-reference-score-note {
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload-field strong {
  order: 3 !important;
  display: block !important;
  min-height: 1.12em !important;
  color: rgba(247, 238, 217, 0.96) !important;
  font-size: clamp(0.96rem, 1.08vw, 1.1rem) !important;
  font-weight: 920 !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload-field small {
  order: 4 !important;
  display: block !important;
  min-height: 1.18em !important;
  color: rgba(196, 193, 185, 0.72) !important;
  font-size: clamp(0.84rem, 0.9vw, 0.94rem) !important;
  font-weight: 520 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-reference-score-note {
  display: flex !important;
  align-items: center !important;
  align-self: end !important;
  min-height: 0 !important;
  padding: clamp(0.06rem, 0.12vw, 0.12rem) clamp(0.28rem, 0.38vw, 0.4rem) 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(198, 195, 188, 0.76) !important;
  font-size: clamp(0.84rem, 0.9vw, 0.94rem) !important;
  font-weight: 520 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

html[data-active-module="nav-generate"] .generate-reference-field input::placeholder,
html[data-active-module="nav-generate"] .generate-reference-field textarea::placeholder {
  color: rgba(184, 181, 174, 0.64) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

html[data-active-module="nav-generate"] .generate-reference-field:focus-within,
html[data-active-module="nav-generate"] .generate-reference-upload-field:hover,
html[data-active-module="nav-generate"] .generate-reference-upload-field:focus-visible {
  border-color: rgba(255, 221, 151, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 219, 0.1),
    0 0 0 1px rgba(255, 219, 146, 0.08),
    0 0.34rem 0.76rem rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="nav-generate"] .generate-reference-field input:disabled,
html[data-active-module="nav-generate"] .generate-reference-field textarea:disabled,
html[data-active-module="nav-generate"] .generate-reference-upload-field:disabled {
  opacity: 0.68 !important;
  cursor: wait !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference {
    --generate-card-left: calc(60 / 1672 * 100%);
    --generate-card-top: calc(36 / 846 * 100%);
    --generate-card-width: calc(456 / 1672 * 100%);
    --generate-card-height: calc(756 / 846 * 100%);
    --generate-request-left: calc(var(--generate-card-left) + (18 / 1672 * 100%));
    --generate-request-top: calc(var(--generate-card-top) + (104 / 846 * 100%));
    --generate-request-width: calc(var(--generate-card-width) - (36 / 1672 * 100%));
    --generate-request-height: calc(486 / 846 * 100%);
    --generate-submit-top: calc(var(--generate-card-top) + (648 / 846 * 100%));
  }
	}

/* learning-materials-library-theme-20260611-1: make learning material entries and pages follow the music-library palette. */
html[data-active-module="nav-learningTools"],
html[data-active-module="featureIntro"],
html[data-active-module="violinKnowledge"] {
  --library-study-gold: 232, 184, 111;
  --library-study-gold-soft: 255, 220, 166;
  --library-study-panel: 12, 13, 15;
  --library-study-line: 255, 255, 255;
  --library-study-blue: 138, 185, 217;
}

html[data-active-module="nav-learningTools"] body,
html[data-active-module="featureIntro"] body,
html[data-active-module="violinKnowledge"] body {
  background:
    radial-gradient(ellipse at 50% 12%, rgba(var(--library-study-gold), 0.075), transparent 34%),
    radial-gradient(ellipse at 84% 18%, rgba(var(--library-study-blue), 0.08), transparent 32%),
    linear-gradient(180deg, rgba(14, 15, 17, 0.98), rgba(6, 7, 9, 0.995) 42%, rgba(3, 4, 6, 0.995)) !important;
}

html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"],
html[data-active-module="featureIntro"] .content-grid[data-module="featureIntro"],
html[data-active-module="violinKnowledge"] .content-grid[data-module="violinKnowledge"] {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.035) 50%, transparent),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.01) 0 1px, transparent 1px 5px) !important;
}

html[data-active-module="nav-learningTools"] .nav-workbench-tools,
html[data-active-module="nav-learningTools"] .tools-board-layout,
html[data-active-module="featureIntro"] .feature-tour,
html[data-active-module="violinKnowledge"] .knowledge-3d-lab {
  border-color: rgba(var(--library-study-line), 0.105) !important;
  border-radius: clamp(1.05rem, 1.45vw, 1.5rem) !important;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(var(--library-study-gold), 0.08), transparent 38%),
    radial-gradient(ellipse at 88% 24%, rgba(var(--library-study-blue), 0.065), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)),
    rgba(var(--library-study-panel), 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 1.2rem 3.6rem rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(24px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.1) !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-section,
html[data-active-module="nav-learningTools"] .tools-practice-section,
html[data-active-module="featureIntro"] .feature-tour-nav,
html[data-active-module="featureIntro"] .feature-tour-stage-shell,
html[data-active-module="featureIntro"] .feature-tour-copy,
html[data-active-module="featureIntro"] .feature-tour-progress,
html[data-active-module="violinKnowledge"] .knowledge-section-stage,
html[data-active-module="violinKnowledge"] .knowledge-3d-stage-shell,
html[data-active-module="violinKnowledge"] .knowledge-3d-dock,
html[data-active-module="violinKnowledge"] .knowledge-video-frame,
html[data-active-module="violinKnowledge"] .knowledge-note-atlas,
html[data-active-module="violinKnowledge"] .knowledge-note-demo,
html[data-active-module="violinKnowledge"] .knowledge-note-category-panel,
html[data-active-module="violinKnowledge"] .theory-reader-board,
html[data-active-module="violinKnowledge"] .theory-reader-answer,
html[data-active-module="violinKnowledge"] .theory-lab-header,
html[data-active-module="violinKnowledge"] .theory-practice-card {
  border-color: rgba(var(--library-study-line), 0.105) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(var(--library-study-panel), 0.56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 0.9rem 2.2rem rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card,
html[data-active-module="featureIntro"] .feature-tour-nav-list button,
html[data-active-module="featureIntro"] .feature-tour-tip,
html[data-active-module="violinKnowledge"] .knowledge-side-slot,
html[data-active-module="violinKnowledge"] .knowledge-video-picker button,
html[data-active-module="violinKnowledge"] .knowledge-note-category-card,
html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card,
html[data-active-module="violinKnowledge"] .knowledge-note-detail-list span,
html[data-active-module="violinKnowledge"] .knowledge-note-category-brief,
html[data-active-module="violinKnowledge"] .theory-answer-stack div,
html[data-active-module="violinKnowledge"] .theory-note-index-strip button,
html[data-active-module="violinKnowledge"] .theory-reader-neighbors,
html[data-active-module="violinKnowledge"] .theory-reader-formula {
  border-color: rgba(var(--library-study-line), 0.09) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(26, 27, 27, 0.76) !important;
  color: rgba(245, 245, 243, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card::after,
html[data-active-module="featureIntro"] .feature-tour::before,
html[data-active-module="violinKnowledge"] .knowledge-3d-lab::before,
html[data-active-module="violinKnowledge"] .knowledge-section-stage::before {
  background:
    radial-gradient(ellipse at 82% 18%, rgba(var(--library-study-gold), 0.12), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(91, 55, 24, 0.18), rgba(0, 0, 0, 0.32)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.28)) !important;
}

html[data-active-module="nav-learningTools"] .tools-board-title,
html[data-active-module="nav-learningTools"] .tools-material-card strong,
html[data-active-module="featureIntro"] .feature-tour-brand strong,
html[data-active-module="featureIntro"] .feature-tour-copy h3,
html[data-active-module="featureIntro"] .feature-tour-nav-list strong,
html[data-active-module="violinKnowledge"] .knowledge-3d-title h3,
html[data-active-module="violinKnowledge"] .knowledge-side-slot strong,
html[data-active-module="violinKnowledge"] .knowledge-video-frame strong,
html[data-active-module="violinKnowledge"] .knowledge-note-category-card strong,
html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card strong,
html[data-active-module="violinKnowledge"] .knowledge-note-demo h3,
html[data-active-module="violinKnowledge"] .theory-score-caption strong,
html[data-active-module="violinKnowledge"] .theory-reader-answer > strong,
html[data-active-module="violinKnowledge"] .theory-answer-stack b {
  color: rgba(255, 251, 242, 0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-board-title::before,
html[data-active-module="featureIntro"] .feature-tour-brand .eyebrow,
html[data-active-module="featureIntro"] .feature-tour-copy .eyebrow,
html[data-active-module="featureIntro"] .feature-tour-tip span,
html[data-active-module="violinKnowledge"] .knowledge-3d-title .eyebrow,
html[data-active-module="violinKnowledge"] .knowledge-side-slot span,
html[data-active-module="violinKnowledge"] .knowledge-note-category-card span,
html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card em,
html[data-active-module="violinKnowledge"] .knowledge-note-category-toolbar strong,
html[data-active-module="violinKnowledge"] .theory-lab-progress strong,
html[data-active-module="violinKnowledge"] .theory-score-caption span,
html[data-active-module="violinKnowledge"] .theory-answer-stack small,
html[data-active-module="violinKnowledge"] .theory-reader-neighbors b {
  color: rgba(var(--library-study-gold-soft), 0.94) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card small,
html[data-active-module="featureIntro"] .feature-tour-brand small,
html[data-active-module="featureIntro"] .feature-tour-copy > p:not(.eyebrow),
html[data-active-module="featureIntro"] .feature-tour-copy li,
html[data-active-module="featureIntro"] .feature-tour-progress > span,
html[data-active-module="violinKnowledge"] .knowledge-3d-title p:not(.eyebrow),
html[data-active-module="violinKnowledge"] .knowledge-side-slot p,
html[data-active-module="violinKnowledge"] .knowledge-side-slot em,
html[data-active-module="violinKnowledge"] .knowledge-video-picker p,
html[data-active-module="violinKnowledge"] .knowledge-note-category-card p,
html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card small,
html[data-active-module="violinKnowledge"] .knowledge-note-demo-caption,
html[data-active-module="violinKnowledge"] .theory-reader-summary-box,
html[data-active-module="violinKnowledge"] .theory-score-caption em,
html[data-active-module="violinKnowledge"] .theory-answer-stack em,
html[data-active-module="violinKnowledge"] .knowledge-stage-caption {
  color: rgba(236, 232, 220, 0.72) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button:hover,
html[data-active-module="featureIntro"] .feature-tour-nav-list button.is-active,
html[data-active-module="featureIntro"] .feature-tour-progress-track button.is-active,
html[data-active-module="violinKnowledge"] .knowledge-side-slot:hover,
html[data-active-module="violinKnowledge"] .knowledge-side-slot.is-active,
html[data-active-module="violinKnowledge"] .knowledge-video-picker button:hover,
html[data-active-module="violinKnowledge"] .knowledge-video-picker button.is-active,
html[data-active-module="violinKnowledge"] .knowledge-note-category-card:hover,
html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card:hover,
html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card.is-selected,
html[data-active-module="violinKnowledge"] .theory-note-index-strip button.is-active {
  border-color: rgba(var(--library-study-gold-soft), 0.52) !important;
  background:
    linear-gradient(100deg, rgba(118, 79, 39, 0.86), rgba(230, 188, 126, 0.72) 48%, rgba(98, 68, 36, 0.82)),
    rgba(var(--library-study-gold), 0.28) !important;
  color: rgba(255, 245, 225, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.28),
    0 0 1rem rgba(var(--library-study-gold), 0.15) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible {
  border-color: rgba(var(--library-study-gold-soft), 0.46) !important;
  background-color: rgba(var(--library-study-gold), 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 1.25rem rgba(var(--library-study-gold), 0.13) !important;
}

html[data-active-module="featureIntro"] .feature-tour-actions .glass-button,
html[data-active-module="featureIntro"] .feature-tour-progress > button,
html[data-active-module="violinKnowledge"] .knowledge-note-back,
html[data-active-module="violinKnowledge"] .theory-reader-control-row button {
  border-color: rgba(var(--library-study-line), 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(26, 27, 27, 0.76) !important;
  color: rgba(245, 245, 243, 0.9) !important;
}

html[data-active-module="featureIntro"] .feature-tour-actions .glass-button.primary,
html[data-active-module="violinKnowledge"] .theory-reader-control-row button.is-primary {
  border-color: rgba(var(--library-study-gold-soft), 0.64) !important;
  background:
    linear-gradient(180deg, rgba(232, 197, 126, 0.96), rgba(174, 128, 53, 0.95)) !important;
  color: rgba(20, 14, 6, 0.96) !important;
  box-shadow: 0 0.75rem 1.5rem rgba(174, 128, 53, 0.18) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-video-frame,
html[data-active-module="violinKnowledge"] .knowledge-note-staff-demo,
html[data-active-module="violinKnowledge"] .theory-single-staff {
  border-color: rgba(var(--library-study-gold-soft), 0.16) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--library-study-gold), 0.1), transparent 58%),
    rgba(0, 0, 0, 0.3) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card-glyph,
html[data-active-module="violinKnowledge"] .knowledge-note-symbol-hero span,
html[data-active-module="violinKnowledge"] .theory-clef,
html[data-active-module="violinKnowledge"] .theory-reader-note {
  color: rgba(var(--library-study-gold-soft), 0.98) !important;
  text-shadow: 0 0 1.1rem rgba(var(--library-study-gold), 0.2) !important;
}

/* beginner-note-reader-20260611-1: keep the note reader focused on actions, not jargon. */
html[data-active-module="violinKnowledge"] .theory-reader-note.is-beginner-note-head {
  min-width: clamp(3.6rem, 4.7vw, 4.9rem) !important;
  height: clamp(2.8rem, 3.5vw, 3.75rem) !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-note.is-beginner-note-head > span {
  display: block !important;
  width: 44% !important;
  height: 34% !important;
  border-radius: 50% !important;
  background: rgba(255, 244, 218, 0.92) !important;
  box-shadow: 0 0 0.7rem rgba(var(--library-study-gold), 0.22) !important;
  transform: rotate(-12deg) !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-answer > .theory-beginner-main-answer {
  max-width: 100% !important;
  font-size: clamp(1.65rem, 2.25vw, 2.7rem) !important;
  line-height: 1.08 !important;
  word-break: keep-all !important;
}

html[data-active-module="violinKnowledge"] .theory-answer-stack div {
  min-height: 4.1rem !important;
}

html[data-active-module="violinKnowledge"] .theory-answer-stack small {
  font-size: clamp(0.68rem, 0.78vw, 0.82rem) !important;
}

html[data-active-module="violinKnowledge"] .theory-answer-stack b {
  font-size: clamp(0.98rem, 1.18vw, 1.28rem) !important;
}

html[data-active-module="violinKnowledge"] .theory-answer-stack em {
  font-size: clamp(0.68rem, 0.78vw, 0.82rem) !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-formula {
  padding: 0 0.8rem !important;
  text-align: center !important;
}

/* beginner-note-reader-two-panel-20260611-1: left staff board plus right static fingerboard demo. */
html[data-active-module="violinKnowledge"] .theory-reader-grid {
  grid-template-columns: minmax(31rem, 1.46fr) minmax(19rem, 0.74fr) !important;
  align-items: stretch !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-demo {
  display: grid !important;
  grid-template-rows: auto minmax(14.5rem, 1fr) auto auto !important;
  gap: clamp(0.52rem, 0.78vw, 0.82rem) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .theory-demo-title-row {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

html[data-active-module="violinKnowledge"] .theory-demo-title-row span {
  color: rgba(var(--library-study-gold-soft), 0.94);
  font-size: clamp(0.68rem, 0.78vw, 0.84rem);
  font-weight: 900;
}

html[data-active-module="violinKnowledge"] .theory-demo-title-row strong {
  color: rgba(255, 251, 242, 0.98);
  font-size: clamp(1.45rem, 2.25vw, 2.55rem);
  line-height: 1.05;
}

html[data-active-module="violinKnowledge"] .theory-demo-stage {
  position: relative;
  min-height: 0;
}

html[data-active-module="violinKnowledge"] .theory-demo-fingerboard {
  position: relative;
  height: 100%;
  min-height: clamp(14.5rem, 34vh, 24rem);
  overflow: hidden;
  border: 1px solid rgba(var(--library-study-gold-soft), 0.16);
  border-radius: 0.82rem;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(var(--library-study-gold), 0.16), transparent 42%),
    radial-gradient(ellipse at 50% 96%, rgba(126, 76, 36, 0.22), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.008)),
    rgba(0, 0, 0, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -2rem 4rem rgba(0, 0, 0, 0.28);
}

html[data-active-module="violinKnowledge"] .theory-demo-violin-asset {
  position: absolute;
  left: 50%;
  bottom: -20%;
  width: min(130%, 28rem);
  max-width: none;
  opacity: 0.22;
  filter: saturate(1.1) contrast(1.08) brightness(0.78);
  transform: translateX(-50%) rotate(-90deg) scaleX(1.08);
  transform-origin: 50% 50%;
  pointer-events: none;
}

html[data-active-module="violinKnowledge"] .theory-demo-hand-asset {
  position: absolute;
  left: 50%;
  bottom: -2%;
  z-index: 2;
  width: min(118%, 25rem);
  max-width: none;
  opacity: 0.54;
  filter: saturate(1.02) contrast(1.04) brightness(0.86);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  pointer-events: none;
}

html[data-active-module="violinKnowledge"] .theory-demo-neck {
  position: absolute;
  inset: 5.5% 15% 7%;
  z-index: 3;
  overflow: hidden;
  clip-path: polygon(33% 0, 67% 0, 90% 100%, 10% 100%);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 14% 86%, rgba(255, 255, 255, 0.08)),
    linear-gradient(180deg, rgba(47, 42, 36, 0.96), rgba(8, 9, 10, 0.98));
  box-shadow:
    inset 0 1.4rem 2.4rem rgba(255, 255, 255, 0.07),
    inset 0 -2.1rem 2.6rem rgba(0, 0, 0, 0.52),
    0 1.4rem 2.5rem rgba(0, 0, 0, 0.28);
}

html[data-active-module="violinKnowledge"] .theory-demo-neck::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 6%;
  height: 0.52rem;
  border-radius: 999px;
  background: rgba(236, 232, 222, 0.72);
  box-shadow: 0 0.18rem 0.5rem rgba(0, 0, 0, 0.35);
}

html[data-active-module="violinKnowledge"] .theory-demo-string {
  position: absolute;
  top: 5%;
  bottom: 4%;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(226, 232, 236, 0.34));
  box-shadow: 0 0 0.45rem rgba(236, 243, 255, 0.12);
}

html[data-active-module="violinKnowledge"] .theory-demo-string.is-g { left: 24%; }
html[data-active-module="violinKnowledge"] .theory-demo-string.is-d { left: 42%; }
html[data-active-module="violinKnowledge"] .theory-demo-string.is-a { left: 58%; }
html[data-active-module="violinKnowledge"] .theory-demo-string.is-e { left: 76%; }

html[data-active-module="violinKnowledge"] .theory-demo-string.is-active {
  width: 3px;
  background: linear-gradient(180deg, rgba(255, 247, 225, 1), rgba(var(--library-study-gold-soft), 0.72));
  box-shadow: 0 0 0.72rem rgba(var(--library-study-gold), 0.38);
}

html[data-active-module="violinKnowledge"] .theory-demo-string span {
  position: absolute;
  left: 50%;
  top: 0.55rem;
  display: grid;
  width: 1.28rem;
  height: 1.28rem;
  place-items: center;
  border: 1px solid rgba(255, 232, 187, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.54);
  color: rgba(245, 239, 224, 0.82);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 900;
  transform: translateX(-50%);
}

html[data-active-module="violinKnowledge"] .theory-demo-string.is-active span {
  border-color: rgba(var(--library-study-gold-soft), 0.62);
  color: rgba(255, 244, 218, 1);
}

html[data-active-module="violinKnowledge"] .theory-demo-position-band {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 999px;
  background: rgba(236, 232, 222, 0.22);
  box-shadow: 0 0 0.58rem rgba(236, 243, 255, 0.08);
}

html[data-active-module="violinKnowledge"] .theory-demo-position-band.is-p1 { top: 34%; }
html[data-active-module="violinKnowledge"] .theory-demo-position-band.is-p3 { top: 57%; }
html[data-active-module="violinKnowledge"] .theory-demo-position-band.is-p5 { top: 75%; }

html[data-active-module="violinKnowledge"] .theory-demo-position-band b {
  position: absolute;
  right: 0.2rem;
  bottom: 0.28rem;
  color: rgba(236, 232, 222, 0.48);
  font-size: 0.62rem;
  font-weight: 900;
  transform: translateY(50%);
}

html[data-active-module="violinKnowledge"] .theory-demo-position-band.is-current {
  height: 4px;
  background: rgba(var(--library-study-gold-soft), 0.82);
  box-shadow: 0 0 0.95rem rgba(var(--library-study-gold), 0.46);
}

html[data-active-module="violinKnowledge"] .theory-demo-position-band.is-current b {
  color: rgba(255, 244, 218, 0.96);
}

html[data-active-module="violinKnowledge"] .theory-demo-active-point {
  position: absolute;
  left: var(--active-string-x, 42%);
  top: var(--active-note-y, 31%);
  z-index: 4;
  display: grid;
  width: clamp(2.25rem, 3.4vw, 3.25rem);
  height: clamp(2.25rem, 3.4vw, 3.25rem);
  place-items: center;
  border: 2px solid rgba(255, 236, 198, 0.82);
  border-radius: 999px;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.32), transparent 36%),
    linear-gradient(180deg, rgba(73, 178, 232, 0.94), rgba(31, 93, 135, 0.94));
  box-shadow:
    0 0 0 0.28rem rgba(73, 178, 232, 0.14),
    0 0 1.2rem rgba(73, 178, 232, 0.42),
    0 0.85rem 1.5rem rgba(0, 0, 0, 0.34);
  color: rgba(255, 255, 255, 0.98);
  font-size: clamp(1rem, 1.32vw, 1.28rem);
  font-style: normal;
  font-weight: 950;
  transform: translate(-50%, -50%);
}

html[data-active-module="violinKnowledge"] .theory-demo-active-point.is-open-string {
  top: 13%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.34), transparent 36%),
    linear-gradient(180deg, rgba(var(--library-study-gold-soft), 0.94), rgba(135, 91, 42, 0.95));
}

html[data-active-module="violinKnowledge"] .theory-demo-active-point span {
  transform: translateY(-0.02rem);
}

html[data-active-module="violinKnowledge"] .theory-demo-hand-card {
  position: absolute;
  left: clamp(0.7rem, 1vw, 1rem);
  right: clamp(0.7rem, 1vw, 1rem);
  bottom: clamp(0.7rem, 1vw, 1rem);
  z-index: 5;
  display: grid;
  gap: 0.14rem;
  padding: 0.56rem 0.66rem;
  border: 1px solid rgba(255, 232, 187, 0.18);
  border-radius: 0.58rem;
  background: rgba(0, 0, 0, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

html[data-active-module="violinKnowledge"] .theory-demo-hand-card b {
  color: rgba(255, 251, 242, 0.96);
  font-size: clamp(0.78rem, 0.95vw, 0.98rem);
  line-height: 1.2;
}

html[data-active-module="violinKnowledge"] .theory-demo-hand-card span {
  color: rgba(236, 232, 220, 0.66);
  font-size: clamp(0.66rem, 0.76vw, 0.8rem);
  line-height: 1.28;
}

html[data-active-module="violinKnowledge"] .theory-demo-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.34rem;
}

html[data-active-module="violinKnowledge"] .theory-demo-status-card {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  min-height: 3.05rem;
  padding: 0.36rem 0.42rem;
  border: 1px solid rgba(255, 232, 187, 0.12);
  border-radius: 0.52rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008)),
    rgba(4, 5, 6, 0.74);
}

html[data-active-module="violinKnowledge"] .theory-demo-status-card small {
  color: rgba(var(--library-study-gold-soft), 0.9);
  font-size: 0.6rem;
  font-weight: 900;
}

html[data-active-module="violinKnowledge"] .theory-demo-status-card b {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 251, 242, 0.96);
  font-size: clamp(0.72rem, 0.9vw, 0.98rem);
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-active-module="violinKnowledge"] .theory-demo-status-card em {
  display: none;
  overflow: hidden;
  color: rgba(236, 232, 220, 0.6);
  font-size: 0.58rem;
  font-style: normal;
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html[data-active-module="violinKnowledge"] .theory-demo-lesson-slots {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-active-module="violinKnowledge"] .theory-demo-lesson-slots div {
  min-height: 3.6rem !important;
}

@media (max-width: 1180px) {
  html[data-active-module="violinKnowledge"] .theory-reader-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-active-module="violinKnowledge"] .theory-reader-demo {
    grid-template-rows: auto minmax(16rem, 42vh) auto auto !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="violinKnowledge"] .theory-demo-status-grid,
  html[data-active-module="violinKnowledge"] .theory-demo-lesson-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* theory-practice-copy-fingerboard-20260611-1: copy only the real practice hand/violin/point/position layers. */
html[data-active-module="violinKnowledge"] .theory-reader-demo.theory-practice-copy-panel {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.9) !important;
}

html[data-active-module="violinKnowledge"] .theory-practice-copy-stage {
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  min-height: clamp(25rem, 66vh, 43rem);
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 48% 32%, rgba(226, 181, 105, 0.08), transparent 38%),
    rgba(0, 0, 0, 0.96);
}

html[data-active-module="violinKnowledge"] .theory-practice-copy-stack {
  --main-practice-center-x: 50%;
  --main-practice-violin-h: 102.083333%;
  --main-practice-violin-w: 158.611111%;
  --main-practice-bottom: -4.583333%;
  position: relative;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 720 / 960;
  overflow: visible;
  transform: none;
  transform-origin: 50% 50%;
}

html[data-active-module="violinKnowledge"] .theory-copy-violin-real-asset,
html[data-active-module="violinKnowledge"] .theory-copy-string-overpass,
html[data-active-module="violinKnowledge"] .theory-copy-position-scale-layer,
html[data-active-module="violinKnowledge"] .theory-copy-solfege-layer,
html[data-active-module="violinKnowledge"] .theory-copy-active-point-layer {
  position: absolute !important;
  left: var(--main-practice-center-x) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--main-practice-bottom) !important;
  width: var(--main-practice-violin-w) !important;
  height: var(--main-practice-violin-h) !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 1516 / 1301 !important;
  transform: translateX(-50%) rotate(-1.2deg) !important;
  transform-origin: 50% 100% !important;
  pointer-events: none !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-violin-real-asset {
  z-index: 3 !important;
  object-fit: contain !important;
  object-position: center center !important;
  user-select: none !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-string-overpass {
  z-index: 7 !important;
  background: url("/player/assets/violin-strings-overlay.png") center center / contain no-repeat !important;
  opacity: 1 !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-position-scale-layer {
  z-index: 31 !important;
  overflow: visible !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-solfege-layer {
  z-index: 33 !important;
  overflow: visible !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-active-point-layer {
  z-index: 34 !important;
  overflow: visible !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-hand-layer {
  position: absolute !important;
  left: calc(var(--main-practice-center-x) - 0.694444%) !important;
  bottom: calc(var(--main-practice-bottom) - 84.895833%) !important;
  z-index: 32 !important;
  width: var(--main-practice-violin-w) !important;
  height: auto !important;
  aspect-ratio: 1 / 1.4 !important;
  overflow: visible !important;
  opacity: 0.8 !important;
  filter: none !important;
  transform: translateX(-50%) !important;
  transform-origin: 50% 100% !important;
  pointer-events: none !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-hand-layer[data-hand-gesture-id="open-string"] {
  left: calc(var(--main-practice-center-x) - 5.277778%) !important;
  bottom: calc(var(--main-practice-bottom) - 88.958333%) !important;
  width: 152.266667% !important;
  height: auto !important;
  aspect-ratio: 1 / 1.34 !important;
  z-index: 34 !important;
  opacity: 0.82 !important;
  transform: translateX(-50%) rotate(-1.2deg) !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-hand-layer img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-hand-layer[data-hand-gesture-id="open-string"] img {
  transform: translate(3.2%, -9.5%) scale(1) rotate(1.3deg) !important;
  transform-origin: 40% 25% !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-active-point-layer .violin-point > circle {
  fill: url("#theoryCopyPointGradient") !important;
  stroke: rgba(255, 236, 198, 0.86) !important;
  stroke-width: 1.6 !important;
  filter:
    drop-shadow(0 0 5px rgba(92, 187, 238, 0.55))
    drop-shadow(0 7px 12px rgba(0, 0, 0, 0.42)) !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-active-point-layer .violin-point.out-of-first-position-point > circle {
  stroke: rgba(255, 202, 142, 0.92) !important;
  filter:
    drop-shadow(0 0 7px rgba(255, 157, 74, 0.58))
    drop-shadow(0 7px 12px rgba(0, 0, 0, 0.44)) !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-active-point-layer .violin-point > text {
  fill: rgba(255, 255, 255, 0.96) !important;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-anchor: middle !important;
  dominant-baseline: middle !important;
  pointer-events: none !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-active-point-layer .violin-point > .theory-copy-solfege-halo,
html[data-active-module="violinKnowledge"] .theory-copy-active-point-layer .violin-point > .theory-copy-solfege-label {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
  font-size: 25px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-anchor: start !important;
  dominant-baseline: middle !important;
  paint-order: stroke fill !important;
  pointer-events: none !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-active-point-layer .violin-point > .theory-copy-solfege-halo {
  fill: rgba(0, 0, 0, 0.72) !important;
  stroke: rgba(0, 0, 0, 0.78) !important;
  stroke-width: 9px !important;
  opacity: 0.86 !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-active-point-layer .violin-point > .theory-copy-solfege-label {
  fill: rgba(255, 238, 194, 0.98) !important;
  stroke: rgba(58, 34, 12, 0.58) !important;
  stroke-width: 2.2px !important;
  filter:
    drop-shadow(0 0 5px rgba(255, 205, 107, 0.42))
    drop-shadow(0 5px 8px rgba(0, 0, 0, 0.38)) !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-solfege-layer .theory-copy-solfege-point > circle {
  fill: rgba(255, 224, 155, 0.2) !important;
  stroke: rgba(255, 232, 183, 0.34) !important;
  stroke-width: 0.9 !important;
  filter: drop-shadow(0 0 4px rgba(255, 194, 83, 0.18)) !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-solfege-layer .theory-copy-solfege-point > text {
  fill: rgba(255, 241, 210, 0.58) !important;
  stroke: rgba(0, 0, 0, 0.56) !important;
  stroke-width: 3.4px !important;
  paint-order: stroke fill !important;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-anchor: middle !important;
  dominant-baseline: middle !important;
  pointer-events: none !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.34)) !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-solfege-layer .theory-copy-solfege-point.is-current > circle {
  fill: rgba(255, 220, 137, 0.42) !important;
  stroke: rgba(255, 241, 198, 0.72) !important;
  stroke-width: 1.2 !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-solfege-layer .theory-copy-solfege-point.is-current > text {
  fill: rgba(255, 238, 194, 0.92) !important;
  font-size: 16px !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-position-scale-layer .position-scale-rail {
  stroke: url("#theoryCopyPositionScaleRailGradient") !important;
  stroke-width: 1.08 !important;
  stroke-linecap: round !important;
  filter: drop-shadow(0 0 4px rgba(255, 187, 82, 0.22)) !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-position-scale-layer .position-scale-dot {
  fill: url("#theoryCopyPositionScaleDotGradient") !important;
  opacity: 0.45 !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-position-scale-layer .position-scale-label {
  fill: rgba(164, 122, 61, 0.56) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-anchor: middle !important;
  dominant-baseline: middle !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-position-scale-layer .position-scale-label.active {
  fill: rgba(255, 227, 158, 1) !important;
  font-size: 28px !important;
  filter:
    drop-shadow(0 0 5px rgba(255, 218, 132, 0.64))
    drop-shadow(0 0 16px rgba(235, 145, 42, 0.28)) !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-position-scale-layer .position-scale-bracket {
  fill: none !important;
  stroke: rgba(192, 141, 64, 0.34) !important;
  stroke-width: 1.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-position-scale-layer .position-scale-bracket.active {
  stroke: rgba(255, 217, 145, 0.82) !important;
  stroke-width: 1.65 !important;
}

/* learning-materials-library-black-20260611-1: remove the remaining gray glass, matching the library black surface. */
html[data-active-module="nav-learningTools"] .nav-workbench-tools,
html[data-active-module="nav-learningTools"] .tools-board-layout,
html[data-active-module="featureIntro"] .feature-tour,
html[data-active-module="violinKnowledge"] .knowledge-3d-lab {
  background:
    radial-gradient(ellipse at 50% 16%, rgba(var(--library-study-gold), 0.055), transparent 35%),
    radial-gradient(ellipse at 90% 18%, rgba(var(--library-study-blue), 0.035), transparent 32%),
    linear-gradient(180deg, rgba(8, 9, 10, 0.98), rgba(3, 4, 5, 0.995) 58%, rgba(0, 0, 0, 0.995)) !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-section,
html[data-active-module="nav-learningTools"] .tools-practice-section,
html[data-active-module="featureIntro"] .feature-tour-nav,
html[data-active-module="featureIntro"] .feature-tour-stage-shell,
html[data-active-module="featureIntro"] .feature-tour-copy,
html[data-active-module="featureIntro"] .feature-tour-progress,
html[data-active-module="violinKnowledge"] .knowledge-section-stage,
html[data-active-module="violinKnowledge"] .knowledge-3d-stage-shell,
html[data-active-module="violinKnowledge"] .knowledge-3d-dock,
html[data-active-module="violinKnowledge"] .knowledge-video-frame,
html[data-active-module="violinKnowledge"] .knowledge-note-atlas,
html[data-active-module="violinKnowledge"] .knowledge-note-demo,
html[data-active-module="violinKnowledge"] .knowledge-note-category-panel,
html[data-active-module="violinKnowledge"] .theory-reader-board,
html[data-active-module="violinKnowledge"] .theory-reader-answer,
html[data-active-module="violinKnowledge"] .theory-lab-header,
html[data-active-module="violinKnowledge"] .theory-practice-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.006)),
    rgba(0, 0, 0, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.085) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card,
html[data-active-module="featureIntro"] .feature-tour-nav-list button,
html[data-active-module="featureIntro"] .feature-tour-tip,
html[data-active-module="featureIntro"] .feature-tour-actions .glass-button,
html[data-active-module="featureIntro"] .feature-tour-progress > button,
html[data-active-module="violinKnowledge"] .knowledge-side-slot,
html[data-active-module="violinKnowledge"] .knowledge-video-picker button,
html[data-active-module="violinKnowledge"] .knowledge-note-category-card,
html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card,
html[data-active-module="violinKnowledge"] .knowledge-note-detail-list span,
html[data-active-module="violinKnowledge"] .knowledge-note-category-brief,
html[data-active-module="violinKnowledge"] .knowledge-note-back,
html[data-active-module="violinKnowledge"] .theory-answer-stack div,
html[data-active-module="violinKnowledge"] .theory-note-index-strip button,
html[data-active-module="violinKnowledge"] .theory-reader-control-row button,
html[data-active-module="violinKnowledge"] .theory-reader-neighbors,
html[data-active-module="violinKnowledge"] .theory-reader-formula {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.006)),
    rgba(4, 5, 6, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.026),
    0 0.38rem 0.95rem rgba(0, 0, 0, 0.28) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible,
html[data-active-module="featureIntro"] .feature-tour-nav-list button:hover,
html[data-active-module="featureIntro"] .feature-tour-nav-list button.is-active,
html[data-active-module="violinKnowledge"] .knowledge-side-slot:hover,
html[data-active-module="violinKnowledge"] .knowledge-side-slot.is-active,
html[data-active-module="violinKnowledge"] .knowledge-video-picker button:hover,
html[data-active-module="violinKnowledge"] .knowledge-video-picker button.is-active,
html[data-active-module="violinKnowledge"] .knowledge-note-category-card:hover,
html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card:hover,
html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card.is-selected,
html[data-active-module="violinKnowledge"] .theory-note-index-strip button.is-active {
  background:
    linear-gradient(180deg, rgba(232, 184, 111, 0.26), rgba(42, 28, 12, 0.62)),
    rgba(6, 5, 3, 0.94) !important;
  border-color: rgba(var(--library-study-gold-soft), 0.58) !important;
}

html[data-active-module="featureIntro"] .feature-tour-actions .glass-button.primary,
html[data-active-module="violinKnowledge"] .theory-reader-control-row button.is-primary {
  background:
    linear-gradient(180deg, rgba(232, 197, 126, 0.96), rgba(174, 128, 53, 0.95)) !important;
}

/* beginner-note-fingering-sync-20260612-1: show staff-driven violin positions as clear action choices. */
html[data-active-module="violinKnowledge"] .theory-fingering-choice-strip {
  grid-template-columns: repeat(auto-fit, minmax(7.8rem, 1fr)) !important;
  gap: 0.44rem !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-board {
  grid-template-rows: auto minmax(15.5rem, 1fr) auto auto auto auto auto !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-modebar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
  padding: 0.42rem;
  border: 1px solid rgba(255, 232, 187, 0.1);
  border-radius: 0.62rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.006)),
    rgba(0, 0, 0, 0.62);
}

html[data-active-module="violinKnowledge"] .theory-reader-modebar button {
  min-height: 2rem;
  padding: 0 0.72rem;
  border: 1px solid rgba(255, 232, 187, 0.14);
  border-radius: 0.48rem;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(235, 232, 222, 0.78);
  font-size: clamp(0.66rem, 0.76vw, 0.84rem);
  font-weight: 900;
  cursor: pointer;
}

html[data-active-module="violinKnowledge"] .theory-reader-modebar button.is-active {
  border-color: rgba(var(--library-study-gold-soft), 0.58);
  background:
    linear-gradient(180deg, rgba(232, 197, 126, 0.9), rgba(174, 128, 53, 0.84));
  color: rgba(19, 13, 6, 0.96);
}

html[data-active-module="violinKnowledge"] .theory-reader-modebar span {
  justify-self: end;
  min-width: 0;
  overflow: hidden;
  color: rgba(222, 216, 202, 0.66);
  font-size: clamp(0.64rem, 0.72vw, 0.8rem);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-active-module="violinKnowledge"] .theory-beginner-answer-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

html[data-active-module="violinKnowledge"] .theory-beginner-answer-panel span {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
  padding: 0.48rem 0.56rem;
  border: 1px solid rgba(255, 232, 187, 0.12);
  border-radius: 0.58rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(233, 183, 96, 0.08), transparent 62%),
    rgba(0, 0, 0, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

html[data-active-module="violinKnowledge"] .theory-beginner-answer-panel small,
html[data-active-module="violinKnowledge"] .theory-beginner-answer-panel strong,
html[data-active-module="violinKnowledge"] .theory-beginner-answer-panel em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-active-module="violinKnowledge"] .theory-beginner-answer-panel small {
  color: rgba(255, 229, 176, 0.72);
  font-size: clamp(0.58rem, 0.68vw, 0.74rem);
  font-weight: 900;
}

html[data-active-module="violinKnowledge"] .theory-beginner-answer-panel strong {
  color: rgba(255, 246, 224, 0.98);
  font-size: clamp(0.92rem, 1.08vw, 1.28rem);
  font-weight: 950;
  line-height: 1.08;
}

html[data-active-module="violinKnowledge"] .theory-beginner-answer-panel em {
  color: rgba(222, 216, 202, 0.62);
  font-size: clamp(0.58rem, 0.68vw, 0.76rem);
  font-style: normal;
  font-weight: 780;
}

html[data-active-module="violinKnowledge"] .theory-beginner-answer-panel.is-hidden-answer span {
  border-color: rgba(255, 232, 187, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.004)),
    rgba(0, 0, 0, 0.62);
}

html[data-active-module="violinKnowledge"] .theory-quiz-feedback {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  min-height: 2.35rem;
  padding: 0.42rem 0.56rem;
  border: 1px solid rgba(255, 232, 187, 0.12);
  border-radius: 0.56rem;
  background: rgba(0, 0, 0, 0.46);
}

html[data-active-module="violinKnowledge"] .theory-quiz-feedback strong {
  color: rgba(255, 229, 176, 0.94);
  font-size: clamp(0.78rem, 0.88vw, 0.98rem);
  font-weight: 950;
  white-space: nowrap;
}

html[data-active-module="violinKnowledge"] .theory-quiz-feedback span {
  min-width: 0;
  overflow: hidden;
  color: rgba(222, 216, 202, 0.7);
  font-size: clamp(0.64rem, 0.74vw, 0.82rem);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-active-module="violinKnowledge"] .theory-quiz-feedback.is-correct {
  border-color: rgba(121, 213, 151, 0.36);
  background: linear-gradient(90deg, rgba(55, 126, 76, 0.18), rgba(0, 0, 0, 0.42));
}

html[data-active-module="violinKnowledge"] .theory-quiz-feedback.is-wrong {
  border-color: rgba(224, 96, 83, 0.36);
  background: linear-gradient(90deg, rgba(139, 42, 31, 0.2), rgba(0, 0, 0, 0.42));
}

html[data-active-module="violinKnowledge"] .theory-note-index-strip .theory-fingering-choice {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  justify-items: start !important;
  min-height: 3.7rem !important;
  padding: 0.5rem 0.62rem !important;
  text-align: left !important;
  gap: 0.14rem !important;
}

html[data-active-module="violinKnowledge"] .theory-fingering-choice strong,
html[data-active-module="violinKnowledge"] .theory-fingering-choice span,
html[data-active-module="violinKnowledge"] .theory-fingering-choice small {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.08 !important;
}

html[data-active-module="violinKnowledge"] .theory-fingering-choice strong {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.34rem !important;
  color: rgba(255, 229, 176, 0.96) !important;
  font-size: clamp(0.88rem, 0.98vw, 1.08rem) !important;
  font-weight: 950 !important;
}

html[data-active-module="violinKnowledge"] .theory-fingering-choice strong em {
  flex: 0 0 auto;
  padding: 0.12rem 0.34rem;
  border: 1px solid rgba(255, 232, 187, 0.18);
  border-radius: 999px;
  background: rgba(233, 183, 96, 0.12);
  color: rgba(255, 238, 205, 0.8);
  font-size: clamp(0.52rem, 0.62vw, 0.68rem);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

html[data-active-module="violinKnowledge"] .theory-fingering-choice span {
  color: rgba(245, 243, 237, 0.9) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.92rem) !important;
  font-weight: 900 !important;
}

html[data-active-module="violinKnowledge"] .theory-fingering-choice small {
  color: rgba(211, 203, 185, 0.62) !important;
  font-size: clamp(0.62rem, 0.72vw, 0.78rem) !important;
  font-weight: 850 !important;
}

html[data-active-module="violinKnowledge"] .theory-fingering-choice.is-correct-answer {
  border-color: rgba(121, 213, 151, 0.48) !important;
  background:
    linear-gradient(180deg, rgba(74, 158, 93, 0.24), rgba(8, 25, 12, 0.72)),
    rgba(0, 0, 0, 0.72) !important;
}

html[data-active-module="violinKnowledge"] .theory-fingering-choice.is-wrong-answer {
  border-color: rgba(224, 96, 83, 0.5) !important;
  background:
    linear-gradient(180deg, rgba(157, 48, 38, 0.24), rgba(29, 7, 5, 0.72)),
    rgba(0, 0, 0, 0.72) !important;
}

html[data-active-module="violinKnowledge"] .theory-fingering-choice.is-selected-answer:not(.is-correct-answer):not(.is-wrong-answer) {
  border-color: rgba(var(--library-study-gold-soft), 0.48) !important;
}

html[data-active-module="violinKnowledge"] .theory-copy-current-readout {
  position: absolute;
  z-index: 44;
  top: clamp(0.62rem, 0.9vw, 0.88rem);
  left: clamp(0.62rem, 0.9vw, 0.88rem);
  right: clamp(0.62rem, 0.9vw, 0.88rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  min-height: 2.55rem;
  padding: 0.48rem 0.62rem;
  border: 1px solid rgba(255, 232, 187, 0.16);
  border-radius: 0.68rem;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(27, 20, 10, 0.5)),
    rgba(0, 0, 0, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0.85rem 1.8rem rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

html[data-active-module="violinKnowledge"] .theory-copy-current-readout strong {
  color: rgba(255, 229, 176, 0.98);
  font-size: clamp(1.35rem, 1.9vw, 2rem);
  font-weight: 950;
  line-height: 0.96;
  text-shadow: 0 0 0.72rem rgba(233, 183, 96, 0.24);
}

html[data-active-module="violinKnowledge"] .theory-copy-current-readout span {
  min-width: 0;
  overflow: hidden;
  color: rgba(245, 242, 234, 0.9);
  font-size: clamp(0.7rem, 0.82vw, 0.92rem);
  font-weight: 900;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-active-module="violinKnowledge"] .theory-copy-current-readout small {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  color: rgba(222, 216, 202, 0.66);
  font-size: clamp(0.58rem, 0.68vw, 0.76rem);
  font-weight: 820;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-active-module="violinKnowledge"] .theory-practice-copy-stage.is-answer-hidden .theory-copy-hand-layer,
html[data-active-module="violinKnowledge"] .theory-practice-copy-stage.is-answer-hidden .theory-copy-solfege-layer,
html[data-active-module="violinKnowledge"] .theory-practice-copy-stage.is-answer-hidden .theory-copy-active-point-layer {
  opacity: 0 !important;
}

html[data-active-module="violinKnowledge"] .theory-practice-answer-mask {
  position: absolute;
  z-index: 43;
  left: 50%;
  top: 52%;
  display: grid;
  min-width: min(18rem, 72%);
  gap: 0.25rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid rgba(255, 232, 187, 0.14);
  border-radius: 0.72rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    rgba(0, 0, 0, 0.66);
  box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.32);
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

html[data-active-module="violinKnowledge"] .theory-practice-answer-mask strong {
  color: rgba(255, 229, 176, 0.96);
  font-size: clamp(1rem, 1.2vw, 1.35rem);
  font-weight: 950;
}

html[data-active-module="violinKnowledge"] .theory-practice-answer-mask span {
  color: rgba(222, 216, 202, 0.72);
  font-size: clamp(0.68rem, 0.78vw, 0.88rem);
  font-weight: 820;
}

@media (max-width: 1180px) {
  html[data-active-module="violinKnowledge"] .theory-beginner-answer-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-active-module="violinKnowledge"] .theory-reader-modebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-active-module="violinKnowledge"] .theory-reader-modebar span {
    justify-self: start;
  }
}

/* posture-wide-video-layout-20260611-5: give the lesson rail breathing room so cards do not feel clipped. */
html[data-active-module="violinKnowledge"] .knowledge-posture-stage {
  min-height: clamp(38rem, 80vh, 46rem);
}

html[data-active-module="violinKnowledge"] .knowledge-posture-stage .knowledge-3d-title {
  top: clamp(0.62rem, 0.85vw, 0.82rem);
  left: clamp(1rem, 2vw, 2rem);
  right: clamp(1rem, 2vw, 2rem);
  max-width: none;
  grid-template-columns: auto auto minmax(18rem, 1fr);
  gap: 0.1rem 0.82rem;
  align-items: center;
}

html[data-active-module="violinKnowledge"] .knowledge-posture-stage .knowledge-3d-title .eyebrow {
  grid-column: auto;
  align-self: center;
  font-size: clamp(0.58rem, 0.68vw, 0.68rem);
}

html[data-active-module="violinKnowledge"] .knowledge-posture-stage .knowledge-3d-title h3 {
  font-size: clamp(1.95rem, 2.55vw, 2.75rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-posture-stage .knowledge-3d-title p:not(.eyebrow) {
  margin-bottom: 0 !important;
  font-size: clamp(0.72rem, 0.82vw, 0.86rem) !important;
  line-height: 1.18 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-posture-layout {
  position: absolute;
  z-index: 2;
  inset: clamp(6.35rem, 10.8vh, 7.15rem) clamp(1rem, 2vw, 2rem) clamp(0.86rem, 1.45vw, 1.32rem);
  display: grid;
  grid-template-columns: minmax(38rem, 1fr) minmax(18.4rem, 21rem);
  gap: clamp(1rem, 1.55vw, 1.48rem);
  align-items: stretch;
}

html[data-active-module="violinKnowledge"] .knowledge-posture-layout .knowledge-video-frame {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: min(100%, 70.5rem);
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  justify-self: center;
  align-self: center;
  display: grid;
  place-items: center;
  gap: 0.75rem;
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
  overflow: hidden;
  border-radius: 0.85rem;
  text-align: center;
}

html[data-active-module="violinKnowledge"] .knowledge-posture-layout .knowledge-video-frame::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 18%),
    radial-gradient(ellipse at 50% 16%, rgba(var(--library-study-gold), 0.14), transparent 40%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.42));
  content: "";
}

html[data-active-module="violinKnowledge"] .knowledge-posture-layout .knowledge-video-frame > * {
  position: relative;
  z-index: 1;
}

html[data-active-module="violinKnowledge"] .knowledge-posture-video-media {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

html[data-active-module="violinKnowledge"] .knowledge-posture-layout .knowledge-video-frame .knowledge-video-format {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.18rem 0.46rem;
  border: 1px solid rgba(var(--library-study-gold-soft), 0.22);
  border-radius: 999px;
  color: rgba(var(--library-study-gold-soft), 0.78);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1;
}

html[data-active-module="violinKnowledge"] .knowledge-posture-layout .knowledge-video-frame strong {
  display: block;
  margin-bottom: 0.24rem;
  font-size: clamp(1.15rem, 1.5vw, 1.55rem);
}

html[data-active-module="violinKnowledge"] .knowledge-posture-layout .knowledge-video-frame p {
  max-width: 12rem;
  font-size: 0.82rem;
}

html[data-active-module="violinKnowledge"] .knowledge-posture-layout .knowledge-video-frame.has-media .knowledge-video-caption {
  position: absolute;
  left: clamp(0.82rem, 1.2vw, 1.1rem);
  bottom: clamp(0.82rem, 1.2vw, 1.1rem);
  z-index: 2;
  max-width: min(20rem, calc(100% - 7rem));
  padding: 0.58rem 0.72rem;
  border: 1px solid rgba(255, 232, 187, 0.16);
  border-radius: 0.64rem;
  background: rgba(0, 0, 0, 0.58);
  text-align: left;
  backdrop-filter: blur(12px);
}

html[data-active-module="violinKnowledge"] .knowledge-posture-layout .knowledge-video-frame.has-media .knowledge-video-caption p {
  max-width: none;
}

html[data-active-module="violinKnowledge"] .knowledge-posture-layout .knowledge-video-frame em {
  position: absolute;
  right: 0.9rem;
  bottom: 0.85rem;
  color: rgba(var(--library-study-gold-soft), 0.72);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 760;
}

html[data-active-module="violinKnowledge"] .knowledge-posture-layout .knowledge-play-symbol {
  width: clamp(3.4rem, 5vh, 4.4rem);
}

html[data-active-module="violinKnowledge"] .knowledge-posture-layout .knowledge-video-picker {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  gap: 0.62rem;
  align-self: stretch;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  padding: 0.12rem 0.08rem 0.04rem;
  overflow: visible;
}

html[data-active-module="violinKnowledge"] .knowledge-video-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 1.7rem;
}

html[data-active-module="violinKnowledge"] .knowledge-video-picker-head span {
  color: rgba(var(--library-study-gold-soft), 0.78);
  font-size: 0.72rem;
  font-weight: 760;
}

html[data-active-module="violinKnowledge"] .knowledge-video-picker-head strong {
  color: rgba(255, 251, 242, 0.94);
  font-size: 0.92rem;
}

html[data-active-module="violinKnowledge"] .knowledge-video-course-list {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 0.58rem;
  min-height: 0;
  overflow: visible;
}

html[data-active-module="violinKnowledge"] .knowledge-posture-layout .knowledge-video-picker button {
  min-height: 0;
  padding: clamp(0.66rem, 1vw, 0.86rem) clamp(0.76rem, 1.1vw, 0.96rem);
}

html[data-active-module="violinKnowledge"] .knowledge-posture-layout .knowledge-video-picker button:hover {
  transform: translateX(2px);
}

html[data-active-module="violinKnowledge"] .knowledge-video-empty {
  display: grid;
  place-items: center;
  min-height: 8rem;
  padding: 1rem;
  border: 1px dashed rgba(255, 232, 187, 0.18);
  border-radius: 0.82rem;
  color: rgba(236, 232, 220, 0.62);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.45;
  text-align: center;
}

html[data-active-module="violinKnowledge"] .knowledge-video-page-controls {
  display: grid;
  grid-template-columns: 2.55rem minmax(3.6rem, 1fr) minmax(7.8rem, auto);
  gap: 0.44rem;
  align-items: center;
}

html[data-active-module="violinKnowledge"] .knowledge-video-page-controls button,
html[data-active-module="violinKnowledge"] .knowledge-video-page-controls span {
  min-height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.72rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.006)),
    rgba(4, 5, 6, 0.92);
  color: rgba(245, 245, 243, 0.9);
  font-size: 0.78rem;
  font-weight: 760;
}

html[data-active-module="violinKnowledge"] .knowledge-video-page-controls button {
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, opacity 160ms ease;
}

html[data-active-module="violinKnowledge"] .knowledge-video-page-controls button:hover:not(:disabled) {
  border-color: rgba(var(--library-study-gold-soft), 0.54);
  background:
    linear-gradient(180deg, rgba(232, 184, 111, 0.26), rgba(42, 28, 12, 0.62)),
    rgba(6, 5, 3, 0.94);
  transform: translateY(-1px);
}

html[data-active-module="violinKnowledge"] .knowledge-video-page-controls button:disabled {
  cursor: default;
  opacity: 0.42;
}

html[data-active-module="violinKnowledge"] .knowledge-video-page-controls span {
  display: grid;
  place-items: center;
  color: rgba(236, 232, 220, 0.72);
}

@media (max-width: 900px) {
  html[data-active-module="violinKnowledge"] .knowledge-posture-stage {
    min-height: 58rem;
  }

  html[data-active-module="violinKnowledge"] .knowledge-posture-layout {
    inset: 8.8rem 1rem 1rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(22rem, 1fr);
  }

  html[data-active-module="violinKnowledge"] .knowledge-posture-layout .knowledge-video-frame {
    width: 100%;
    height: auto;
  }
}

/* Inspiration composer: reuse the score editor frame, swap the left rail for AI direction chips. */
html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer {
  --score-editor-gold: 190, 146, 255;
  --score-editor-gold-soft: 219, 196, 255;
  --score-editor-panel-black: 12, 10, 21;
  --score-editor-button-black: 28, 24, 42;
  --score-editor-line-soft: 236, 229, 255;
  background:
    radial-gradient(circle at 16% 12%, rgba(158, 106, 255, 0.14), transparent 31%),
    radial-gradient(circle at 78% 6%, rgba(79, 197, 214, 0.08), transparent 27%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0) 5.5rem),
    #06050a !important;
}

html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-editor-workspace {
  background:
    radial-gradient(circle at 18% 6%, rgba(158, 106, 255, 0.13), transparent 31rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 31rem),
    #07060c !important;
}

html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-compose-panel,
html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-editor-command-rail {
  background:
    radial-gradient(ellipse at 34% 0%, rgba(190, 146, 255, 0.18), transparent 42%),
    radial-gradient(ellipse at 100% 36%, rgba(78, 202, 218, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(13, 10, 23, 0.88) !important;
  border-color: rgba(226, 215, 255, 0.13) !important;
}

html[data-active-module="scoreEditor"] .inspiration-compose-panel {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  gap: 0.7rem !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0.82rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-panel-head,
html[data-active-module="scoreEditor"] .inspiration-summary-card,
html[data-active-module="scoreEditor"] .inspiration-prompt-card,
html[data-active-module="scoreEditor"] .inspiration-playability-card,
html[data-active-module="scoreEditor"] .inspiration-local-card,
html[data-active-module="scoreEditor"] .inspiration-version-card,
html[data-active-module="scoreEditor"] .inspiration-loop-card,
html[data-active-module="scoreEditor"] .inspiration-choice-group {
  border: 1px solid rgba(226, 215, 255, 0.12) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    rgba(16, 13, 28, 0.74) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0.5rem 1.4rem rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="scoreEditor"] .inspiration-panel-head {
  display: grid !important;
  grid-template-columns: 2.7rem minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.68rem !important;
  min-height: 4.95rem !important;
  padding: 0.7rem 0.76rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-panel-head > span {
  display: grid !important;
  width: 2.7rem !important;
  height: 2.7rem !important;
  place-items: center !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.18), transparent 36%),
    linear-gradient(140deg, rgba(148, 92, 238, 0.9), rgba(53, 161, 194, 0.72)) !important;
  color: rgba(255, 250, 255, 0.98) !important;
  font-size: 1.7rem !important;
  font-weight: 820 !important;
}

html[data-active-module="scoreEditor"] .inspiration-panel-head h3,
html[data-active-module="scoreEditor"] .inspiration-card-title h3,
html[data-active-module="scoreEditor"] .inspiration-loop-card h3,
html[data-active-module="scoreEditor"] .inspiration-choice-group h3 {
  margin: 0 !important;
  color: rgba(245, 238, 255, 0.96) !important;
  font-size: clamp(0.96rem, 1.35vh, 1.08rem) !important;
  font-weight: 840 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="scoreEditor"] .inspiration-panel-head p {
  margin: 0.18rem 0 0 !important;
  color: rgba(231, 225, 245, 0.66) !important;
  font-size: clamp(0.76rem, 1.06vh, 0.88rem) !important;
  line-height: 1.28 !important;
}

html[data-active-module="scoreEditor"] .inspiration-summary-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(6.8rem, 7.6vw, 8rem) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 0.46rem 0.72rem !important;
  min-height: 7.1rem !important;
  padding: 0.7rem 0.78rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-confirm-head {
  grid-column: 1 !important;
  display: grid !important;
  gap: 0.16rem !important;
  min-width: 0 !important;
}

html[data-active-module="scoreEditor"] .inspiration-confirm-head small,
html[data-active-module="scoreEditor"] .inspiration-summary-card small {
  color: rgba(116, 219, 230, 0.78) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
}

html[data-active-module="scoreEditor"] .inspiration-confirm-head strong,
html[data-active-module="scoreEditor"] .inspiration-summary-card strong {
  color: rgba(255, 250, 255, 0.96) !important;
  font-size: clamp(0.95rem, 1.34vh, 1.08rem) !important;
  line-height: 1.26 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-confirm-head em {
  color: rgba(226, 215, 255, 0.58) !important;
  font-size: clamp(0.68rem, 0.9vh, 0.76rem) !important;
  font-style: normal !important;
  font-weight: 720 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-confirm-grid {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
}

html[data-active-module="scoreEditor"] .inspiration-confirm-grid span {
  display: grid !important;
  gap: 0.06rem !important;
  min-width: 0 !important;
  min-height: 2.08rem !important;
  align-content: center !important;
  padding: 0.22rem 0.34rem !important;
  border: 1px solid rgba(226, 215, 255, 0.09) !important;
  border-radius: 7px !important;
  background: rgba(8, 7, 14, 0.45) !important;
}

html[data-active-module="scoreEditor"] .inspiration-confirm-grid span.is-good {
  border-color: rgba(116, 219, 188, 0.2) !important;
}

html[data-active-module="scoreEditor"] .inspiration-confirm-grid span.is-info {
  border-color: rgba(116, 219, 230, 0.18) !important;
}

html[data-active-module="scoreEditor"] .inspiration-confirm-grid span.is-warn {
  border-color: rgba(255, 197, 102, 0.36) !important;
  background: rgba(70, 45, 16, 0.24) !important;
}

html[data-active-module="scoreEditor"] .inspiration-confirm-grid b,
html[data-active-module="scoreEditor"] .inspiration-confirm-grid em {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-confirm-grid b {
  color: rgba(226, 215, 255, 0.56) !important;
  font-size: 0.62rem !important;
  font-weight: 760 !important;
}

html[data-active-module="scoreEditor"] .inspiration-confirm-grid em {
  color: rgba(255, 252, 255, 0.88) !important;
  font-size: 0.7rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

html[data-active-module="scoreEditor"] .inspiration-summary-card button,
html[data-active-module="scoreEditor"] .inspiration-local-actions button,
html[data-active-module="scoreEditor"] .inspiration-loop-card button,
html[data-active-module="scoreEditor"] .inspiration-choice-chip {
  min-width: 0 !important;
  border: 1px solid rgba(226, 215, 255, 0.12) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
    rgba(25, 21, 40, 0.8) !important;
  color: rgba(240, 236, 248, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  font: inherit !important;
}

html[data-active-module="scoreEditor"] .inspiration-summary-card button {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  min-height: 5.72rem !important;
  color: rgba(255, 252, 255, 0.98) !important;
  font-weight: 860 !important;
  background:
    linear-gradient(135deg, rgba(141, 86, 220, 0.98), rgba(54, 168, 201, 0.82) 58%, rgba(210, 164, 95, 0.72)),
    rgba(34, 23, 56, 0.9) !important;
}

html[data-active-module="scoreEditor"] .inspiration-prompt-card {
  display: grid !important;
  gap: 0.42rem !important;
  padding: 0.62rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-prompt-card span {
  color: rgba(116, 219, 230, 0.78) !important;
  font-size: 0.78rem !important;
  font-weight: 820 !important;
}

html[data-active-module="scoreEditor"] .inspiration-prompt-card textarea {
  width: 100% !important;
  min-height: 3.45rem !important;
  max-height: 4.8rem !important;
  resize: none !important;
  border: 1px solid rgba(226, 215, 255, 0.12) !important;
  border-radius: 7px !important;
  background: rgba(7, 6, 13, 0.72) !important;
  color: rgba(255, 252, 255, 0.94) !important;
  padding: 0.58rem 0.64rem !important;
  font: inherit !important;
  font-size: clamp(0.78rem, 1.05vh, 0.9rem) !important;
  line-height: 1.34 !important;
  outline: none !important;
}

html[data-active-module="scoreEditor"] .inspiration-prompt-card textarea:focus {
  border-color: rgba(116, 219, 230, 0.42) !important;
  box-shadow: 0 0 0 2px rgba(116, 219, 230, 0.1) !important;
}

html[data-active-module="scoreEditor"] .inspiration-prompt-signals {
  display: flex !important;
  align-self: start !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 0.32rem !important;
  height: auto !important;
  min-height: 1.55rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-prompt-signals span {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  gap: 0.28rem !important;
  max-width: 100% !important;
  min-height: 1.45rem !important;
  padding: 0 0.42rem !important;
  border: 1px solid rgba(116, 219, 230, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(116, 219, 230, 0.075) !important;
  color: rgba(242, 238, 255, 0.9) !important;
}

html[data-active-module="scoreEditor"] .inspiration-prompt-signals span.is-muted {
  border-color: rgba(226, 215, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(226, 215, 255, 0.58) !important;
}

html[data-active-module="scoreEditor"] .inspiration-prompt-signals b,
html[data-active-module="scoreEditor"] .inspiration-prompt-signals em {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-prompt-signals b {
  color: rgba(116, 219, 230, 0.86) !important;
  font-size: 0.62rem !important;
  font-weight: 820 !important;
}

html[data-active-module="scoreEditor"] .inspiration-prompt-signals em {
  color: inherit !important;
  font-size: 0.68rem !important;
  font-style: normal !important;
  font-weight: 760 !important;
}

html[data-active-module="scoreEditor"] .inspiration-card-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.72rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-card-title strong {
  color: rgba(116, 219, 230, 0.82) !important;
  font-size: 0.74rem !important;
  font-weight: 830 !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-playability-card,
html[data-active-module="scoreEditor"] .inspiration-local-card,
html[data-active-module="scoreEditor"] .inspiration-version-card {
  display: grid !important;
  gap: 0.52rem !important;
  padding: 0.62rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-local-meta {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.36rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-local-meta span {
  display: grid !important;
  gap: 0.1rem !important;
  min-height: 2.22rem !important;
  align-content: center !important;
  padding: 0.26rem 0.42rem !important;
  border: 1px solid rgba(226, 215, 255, 0.1) !important;
  border-radius: 7px !important;
  background: rgba(8, 7, 14, 0.52) !important;
}

html[data-active-module="scoreEditor"] .inspiration-local-meta b,
html[data-active-module="scoreEditor"] .inspiration-local-meta em {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-local-meta b {
  color: rgba(226, 215, 255, 0.58) !important;
  font-size: 0.66rem !important;
  font-weight: 760 !important;
}

html[data-active-module="scoreEditor"] .inspiration-local-meta em {
  color: rgba(255, 252, 255, 0.9) !important;
  font-size: 0.76rem !important;
  font-style: normal !important;
  font-weight: 820 !important;
}

html[data-active-module="scoreEditor"] .inspiration-local-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-local-actions button {
  min-height: 2.18rem !important;
  padding: 0 0.48rem !important;
  cursor: pointer !important;
  font-size: clamp(0.74rem, 1vh, 0.86rem) !important;
  font-weight: 780 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-local-actions button.is-wide {
  grid-column: 1 / -1 !important;
  min-height: 2.34rem !important;
  border-color: rgba(116, 219, 230, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(116, 219, 230, 0.11), rgba(255, 255, 255, 0.018)),
    rgba(25, 22, 42, 0.88) !important;
}

html[data-active-module="scoreEditor"] .inspiration-local-actions button:hover {
  border-color: rgba(116, 219, 230, 0.38) !important;
  background:
    linear-gradient(180deg, rgba(116, 219, 230, 0.1), rgba(255, 255, 255, 0.018)),
    rgba(26, 24, 44, 0.88) !important;
}

html[data-active-module="scoreEditor"] .inspiration-audit-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.36rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-audit-grid span {
  display: grid !important;
  gap: 0.12rem !important;
  min-height: 2.34rem !important;
  align-content: center !important;
  padding: 0.28rem 0.32rem !important;
  border: 1px solid rgba(226, 215, 255, 0.1) !important;
  border-radius: 7px !important;
  background: rgba(8, 7, 14, 0.55) !important;
}

html[data-active-module="scoreEditor"] .inspiration-audit-grid span.is-good {
  border-color: rgba(116, 219, 188, 0.18) !important;
}

html[data-active-module="scoreEditor"] .inspiration-audit-grid span.is-warn {
  border-color: rgba(255, 197, 102, 0.38) !important;
  background: rgba(70, 45, 16, 0.28) !important;
}

html[data-active-module="scoreEditor"] .inspiration-audit-grid b,
html[data-active-module="scoreEditor"] .inspiration-audit-grid em {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-audit-grid b {
  color: rgba(226, 215, 255, 0.68) !important;
  font-size: 0.66rem !important;
  font-weight: 760 !important;
}

html[data-active-module="scoreEditor"] .inspiration-audit-grid em {
  color: rgba(255, 252, 255, 0.92) !important;
  font-size: 0.76rem !important;
  font-style: normal !important;
  font-weight: 820 !important;
}

html[data-active-module="scoreEditor"] .inspiration-playability-card p,
html[data-active-module="scoreEditor"] .inspiration-version-list p {
  margin: 0 !important;
  color: rgba(231, 225, 245, 0.62) !important;
  font-size: clamp(0.72rem, 0.98vh, 0.82rem) !important;
  line-height: 1.34 !important;
}

html[data-active-module="scoreEditor"] .inspiration-version-list {
  display: grid !important;
  gap: 0.36rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-version-list button {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 0.48rem !important;
  min-height: 2.34rem !important;
  padding: 0.3rem 0.5rem !important;
  border: 1px solid rgba(226, 215, 255, 0.11) !important;
  border-radius: 7px !important;
  background: rgba(18, 15, 31, 0.74) !important;
  color: rgba(240, 236, 248, 0.86) !important;
  cursor: pointer !important;
  font: inherit !important;
}

html[data-active-module="scoreEditor"] .inspiration-version-list button small {
  grid-column: 1 / -1 !important;
  overflow: hidden !important;
  color: rgba(116, 219, 230, 0.64) !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-version-list button.is-active {
  border-color: rgba(223, 199, 255, 0.55) !important;
  background:
    linear-gradient(135deg, rgba(136, 85, 222, 0.52), rgba(61, 154, 190, 0.34)),
    rgba(32, 22, 52, 0.9) !important;
}

html[data-active-module="scoreEditor"] .inspiration-version-list b,
html[data-active-module="scoreEditor"] .inspiration-version-list span,
html[data-active-module="scoreEditor"] .inspiration-version-list em {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-version-list b {
  font-size: 0.78rem !important;
  font-weight: 820 !important;
}

html[data-active-module="scoreEditor"] .inspiration-version-list span,
html[data-active-module="scoreEditor"] .inspiration-version-list em {
  color: rgba(226, 215, 255, 0.62) !important;
  font-size: 0.7rem !important;
  font-style: normal !important;
  font-weight: 760 !important;
}

html[data-active-module="scoreEditor"] .inspiration-scroll-region {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-right: 0.16rem !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(226, 215, 255, 0.2) transparent !important;
}

html[data-active-module="scoreEditor"] .inspiration-choice-stack {
  display: grid !important;
  gap: 0.62rem !important;
  min-height: 0 !important;
}

html[data-active-module="scoreEditor"] .inspiration-choice-group {
  display: grid !important;
  gap: 0.48rem !important;
  padding: 0.62rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-choice-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(5rem, 1fr)) !important;
  gap: 0.48rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-choice-chip {
  min-height: 2.42rem !important;
  padding: 0.16rem 0.5rem !important;
  cursor: pointer !important;
  font-size: clamp(0.78rem, 1.08vh, 0.9rem) !important;
  font-weight: 760 !important;
  line-height: 1.16 !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-choice-chip:hover {
  border-color: rgba(116, 219, 230, 0.44) !important;
  background:
    linear-gradient(180deg, rgba(116, 219, 230, 0.12), rgba(255, 255, 255, 0.024)),
    rgba(26, 24, 44, 0.9) !important;
}

html[data-active-module="scoreEditor"] .inspiration-choice-chip.is-active {
  border-color: rgba(223, 199, 255, 0.72) !important;
  background:
    linear-gradient(135deg, rgba(136, 85, 222, 0.9), rgba(61, 154, 190, 0.64)),
    rgba(62, 40, 95, 0.92) !important;
  color: rgba(255, 252, 255, 0.99) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 1rem rgba(136, 85, 222, 0.18) !important;
}

html[data-active-module="scoreEditor"] .inspiration-choice-chip.is-auto-choice {
  border-color: rgba(224, 176, 102, 0.22) !important;
  color: rgba(255, 226, 174, 0.88) !important;
}

html[data-active-module="scoreEditor"] .inspiration-choice-chip.is-auto-choice.is-active {
  border-color: rgba(224, 176, 102, 0.58) !important;
  background:
    linear-gradient(135deg, rgba(224, 176, 102, 0.74), rgba(116, 219, 230, 0.36)),
    rgba(56, 36, 16, 0.9) !important;
}

html[data-active-module="scoreEditor"] .inspiration-advanced {
  display: grid !important;
  gap: 0.62rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-advanced summary {
  min-height: 2.28rem !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 0.7rem !important;
  border: 1px solid rgba(226, 215, 255, 0.11) !important;
  border-radius: 7px !important;
  background: rgba(16, 13, 28, 0.66) !important;
  color: rgba(226, 215, 255, 0.76) !important;
  cursor: pointer !important;
  font-size: 0.9rem !important;
  font-weight: 820 !important;
}

html[data-active-module="scoreEditor"] .inspiration-loop-card {
  display: grid !important;
  gap: 0.5rem !important;
  padding: 0.62rem !important;
  min-height: 7.25rem !important;
  flex: 0 0 auto !important;
}

html[data-active-module="scoreEditor"] .inspiration-loop-card > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.46rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-loop-card button {
  min-height: 2.28rem !important;
  padding: 0 0.55rem !important;
  font-size: clamp(0.78rem, 1.08vh, 0.9rem) !important;
  font-weight: 780 !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-editor-command-rail .score-commandbar-button.is-inspiration-primary,
html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-editor-command-rail .score-commandbar-button.is-play {
  border-color: rgba(223, 199, 255, 0.58) !important;
  background:
    linear-gradient(135deg, rgba(136, 85, 222, 0.9), rgba(61, 154, 190, 0.62), rgba(212, 166, 96, 0.58)),
    rgba(62, 40, 95, 0.9) !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(1rem, 2vw, 2rem) !important;
  background: rgba(3, 2, 7, 0.58) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm {
  width: min(52rem, 92vw) !important;
  display: grid !important;
  gap: 0.82rem !important;
  padding: 1rem !important;
  border: 1px solid rgba(226, 215, 255, 0.18) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(142, 96, 230, 0.2), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
    rgba(13, 10, 23, 0.96) !important;
  box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.42) !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm header,
html[data-active-module="scoreEditor"] .score-publish-confirm footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.72rem !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm header h3,
html[data-active-module="scoreEditor"] .score-publish-confirm header small {
  margin: 0 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm header small {
  color: rgba(116, 219, 230, 0.78) !important;
  font-size: 0.78rem !important;
  font-weight: 840 !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm header h3 {
  color: rgba(255, 252, 255, 0.96) !important;
  font-size: clamp(1.12rem, 1.6vw, 1.42rem) !important;
  font-weight: 880 !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm button {
  min-width: 0 !important;
  min-height: 2.46rem !important;
  padding: 0 0.8rem !important;
  border: 1px solid rgba(226, 215, 255, 0.14) !important;
  border-radius: 7px !important;
  background: rgba(24, 20, 38, 0.84) !important;
  color: rgba(242, 238, 255, 0.9) !important;
  cursor: pointer !important;
  font: inherit !important;
  font-weight: 820 !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm button[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm button.is-primary {
  border-color: rgba(223, 199, 255, 0.58) !important;
  background:
    linear-gradient(135deg, rgba(136, 85, 222, 0.95), rgba(61, 154, 190, 0.7)),
    rgba(62, 40, 95, 0.9) !important;
  color: rgba(255, 252, 255, 0.98) !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.46rem !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-grid span,
html[data-active-module="scoreEditor"] .score-publish-confirm-check,
html[data-active-module="scoreEditor"] .score-publish-confirm-issues button,
html[data-active-module="scoreEditor"] .score-publish-confirm-issues p {
  border: 1px solid rgba(226, 215, 255, 0.12) !important;
  border-radius: 7px !important;
  background: rgba(8, 7, 14, 0.52) !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-grid span {
  display: grid !important;
  gap: 0.1rem !important;
  min-height: 2.6rem !important;
  align-content: center !important;
  padding: 0.34rem 0.48rem !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-grid b,
html[data-active-module="scoreEditor"] .score-publish-confirm-grid em,
html[data-active-module="scoreEditor"] .score-publish-confirm-issues b,
html[data-active-module="scoreEditor"] .score-publish-confirm-issues span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-grid b {
  color: rgba(226, 215, 255, 0.58) !important;
  font-size: 0.68rem !important;
  font-weight: 780 !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-grid em {
  color: rgba(255, 252, 255, 0.9) !important;
  font-size: 0.8rem !important;
  font-style: normal !important;
  font-weight: 820 !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-check {
  display: grid !important;
  gap: 0.28rem !important;
  padding: 0.62rem 0.72rem !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-check strong,
html[data-active-module="scoreEditor"] .score-publish-confirm-check p {
  margin: 0 !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-check strong {
  color: rgba(116, 219, 230, 0.86) !important;
  font-size: 0.9rem !important;
  font-weight: 860 !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-check p {
  color: rgba(226, 215, 255, 0.68) !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-issues {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.46rem !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-issues button,
html[data-active-module="scoreEditor"] .score-publish-confirm-issues p {
  display: grid !important;
  gap: 0.16rem !important;
  min-height: 3.1rem !important;
  align-content: center !important;
  padding: 0.42rem 0.56rem !important;
  text-align: left !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-issues button.is-error {
  border-color: rgba(255, 126, 104, 0.42) !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-issues button.is-warn {
  border-color: rgba(255, 197, 102, 0.38) !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-issues b {
  color: rgba(255, 252, 255, 0.92) !important;
  font-size: 0.78rem !important;
  font-weight: 840 !important;
}

html[data-active-module="scoreEditor"] .score-publish-confirm-issues span,
html[data-active-module="scoreEditor"] .score-publish-confirm-issues p {
  color: rgba(226, 215, 255, 0.66) !important;
  font-size: 0.74rem !important;
}

@media (max-width: 1280px) {
  html[data-active-module="scoreEditor"] .inspiration-confirm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-active-module="scoreEditor"] .inspiration-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html[data-active-module="scoreEditor"] .inspiration-audit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  html[data-active-module="scoreEditor"] .score-publish-confirm {
    width: min(28rem, 94vw) !important;
  }

  html[data-active-module="scoreEditor"] .score-publish-confirm-grid,
  html[data-active-module="scoreEditor"] .score-publish-confirm-issues {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-active-module="scoreEditor"] .score-publish-confirm footer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-active-module="scoreEditor"] .score-publish-confirm footer .is-primary {
    grid-column: 1 / -1 !important;
  }

  html[data-active-module="scoreEditor"] .inspiration-summary-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-active-module="scoreEditor"] .inspiration-summary-card button {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 2.8rem !important;
  }

  html[data-active-module="scoreEditor"] .inspiration-choice-grid,
  html[data-active-module="scoreEditor"] .inspiration-audit-grid,
  html[data-active-module="scoreEditor"] .inspiration-confirm-grid,
  html[data-active-module="scoreEditor"] .inspiration-local-actions,
  html[data-active-module="scoreEditor"] .inspiration-loop-card > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	  }
	}

/* inspiration-picker-flow-20260612-1: make 灵感编谱 a selection-first workspace, then jump into the regular score editor. */
html[data-active-module="scoreEditor"] .inspiration-picker-page {
  --inspiration-picker-line: 226, 215, 255;
  --inspiration-picker-cyan: 116, 219, 230;
  --inspiration-picker-purple: 136, 85, 222;
  --inspiration-picker-gold: 224, 176, 102;
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto !important;
  gap: 0 !important;
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(0.52rem, 0.8vw, 0.72rem) !important;
  overflow: visible !important;
  border: 1px solid rgba(var(--inspiration-picker-gold), 0.16) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse at 38% 0%, rgba(var(--inspiration-picker-purple), 0.12), transparent 34rem),
    #07060c !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-header {
  display: none !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  min-height: 4.4rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-return {
  position: absolute !important;
  top: 0.72rem !important;
  right: 0.72rem !important;
  z-index: 6 !important;
  min-width: 4.4rem !important;
  min-height: 2.22rem !important;
  padding: 0 0.72rem !important;
  border: 1px solid rgba(var(--inspiration-picker-line), 0.2) !important;
  border-radius: 7px !important;
  background: rgba(33, 28, 50, 0.86) !important;
  color: rgba(255, 252, 255, 0.92) !important;
  font: inherit !important;
  font-size: 0.84rem !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-header small,
html[data-active-module="scoreEditor"] .inspiration-picker-summary-head small,
html[data-active-module="scoreEditor"] .inspiration-picker-prompt > span {
  color: rgba(var(--inspiration-picker-cyan), 0.82) !important;
  font-size: 0.76rem !important;
  font-weight: 840 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-header h2 {
  margin: 0.14rem 0 0 !important;
  color: rgba(255, 252, 255, 0.98) !important;
  font-size: 2.35rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-header p {
  margin: 0.34rem 0 0 !important;
  color: rgba(236, 232, 246, 0.64) !important;
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-header button,
html[data-active-module="scoreEditor"] .inspiration-picker-actions button,
html[data-active-module="scoreEditor"] .inspiration-template-card {
  min-width: 0 !important;
  border: 1px solid rgba(var(--inspiration-picker-line), 0.14) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.016)),
    rgba(23, 20, 36, 0.84) !important;
  color: rgba(242, 238, 255, 0.9) !important;
  font: inherit !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-header button {
  min-height: 2.6rem !important;
  padding: 0 0.88rem !important;
  font-size: 0.92rem !important;
  font-weight: 830 !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-layout {
  display: grid !important;
  grid-template-columns: minmax(16.5rem, 0.78fr) minmax(34rem, 1.92fr) minmax(18rem, 0.9fr) !important;
  align-items: start !important;
  gap: clamp(0.48rem, 0.72vw, 0.72rem) !important;
  min-height: 0 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-panel {
  align-self: start !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid rgba(var(--inspiration-picker-line), 0.12) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)),
    rgba(13, 10, 22, 0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 1rem 2.2rem rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-brief {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  gap: 0.48rem !important;
  padding: 0.62rem !important;
  overflow: hidden !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-watermark {
  position: absolute !important;
  right: 0.82rem !important;
  bottom: 0.52rem !important;
  z-index: 0 !important;
  display: grid !important;
  justify-items: end !important;
  gap: 0.08rem !important;
  pointer-events: none !important;
  opacity: 0.12 !important;
  text-align: right !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-watermark small,
html[data-active-module="scoreEditor"] .inspiration-picker-watermark strong,
html[data-active-module="scoreEditor"] .inspiration-picker-watermark em {
  color: rgba(255, 252, 255, 0.72) !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-watermark small {
  font-size: 0.62rem !important;
  font-weight: 900 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-watermark strong {
  font-size: clamp(2.2rem, 3.2vw, 3.4rem) !important;
  line-height: 0.92 !important;
  font-weight: 930 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-watermark em {
  font-size: 0.72rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-prompt {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 0.34rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-prompt textarea {
  width: 100% !important;
  min-height: 5.35rem !important;
  resize: none !important;
  border: 1px solid rgba(var(--inspiration-picker-line), 0.14) !important;
  border-radius: 7px !important;
  background: rgba(6, 5, 11, 0.76) !important;
  color: rgba(255, 252, 255, 0.94) !important;
  padding: 0.6rem 0.66rem !important;
  font: inherit !important;
  font-size: 0.92rem !important;
  line-height: 1.42 !important;
  outline: none !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-prompt textarea:focus {
  border-color: rgba(var(--inspiration-picker-cyan), 0.42) !important;
  box-shadow: 0 0 0 2px rgba(var(--inspiration-picker-cyan), 0.1) !important;
}

html[data-active-module="scoreEditor"] .inspiration-template-grid {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)) !important;
  align-content: start !important;
  gap: 0.42rem !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

html[data-active-module="scoreEditor"] .inspiration-template-card {
  display: grid !important;
  gap: 0.18rem !important;
  min-height: 3.26rem !important;
  padding: 0.46rem 0.58rem !important;
  text-align: left !important;
}

html[data-active-module="scoreEditor"] .inspiration-template-card:hover,
html[data-active-module="scoreEditor"] .inspiration-template-card.is-active {
  border-color: rgba(var(--inspiration-picker-cyan), 0.42) !important;
  background:
    linear-gradient(135deg, rgba(var(--inspiration-picker-purple), 0.64), rgba(61, 154, 190, 0.36)),
    rgba(31, 23, 48, 0.94) !important;
}

html[data-active-module="scoreEditor"] .inspiration-template-card strong,
html[data-active-module="scoreEditor"] .inspiration-template-card small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-template-card strong {
  color: rgba(255, 252, 255, 0.95) !important;
  font-size: 0.92rem !important;
  font-weight: 850 !important;
}

html[data-active-module="scoreEditor"] .inspiration-template-card small {
  color: rgba(226, 215, 255, 0.62) !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-choices {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 0.48rem !important;
  padding: 0.62rem !important;
  overflow: hidden !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-section-head {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.8rem !important;
  min-height: 1.55rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-section-head strong {
  color: rgba(255, 252, 255, 0.94) !important;
  font-size: 1.02rem !important;
  font-weight: 870 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-section-head small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(226, 215, 255, 0.58) !important;
  font-size: 0.78rem !important;
  font-weight: 760 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-choice-groups {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-content: start !important;
  gap: 0.38rem !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-right: 0 !important;
  scrollbar-width: none !important;
  scrollbar-color: rgba(var(--inspiration-picker-line), 0.22) transparent !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-choice-groups::-webkit-scrollbar,
html[data-active-module="scoreEditor"] .inspiration-template-grid::-webkit-scrollbar,
html[data-active-module="scoreEditor"] .inspiration-picker-summary::-webkit-scrollbar {
  display: none !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-page .inspiration-choice-group.is-picker-group {
  gap: 0.26rem !important;
  padding: 0.38rem !important;
  box-shadow: none !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-page .inspiration-choice-group.is-picker-group h3 {
  font-size: 0.78rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-page .inspiration-choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr)) !important;
  gap: 0.28rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-page .inspiration-choice-chip {
  min-height: 1.68rem !important;
  padding: 0.06rem 0.3rem !important;
  font-size: 0.7rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-summary {
  display: grid !important;
  grid-template-rows: auto auto auto auto minmax(0, auto) auto !important;
  align-content: start !important;
  gap: 0.48rem !important;
  padding: 0.62rem !important;
  padding-top: 2.95rem !important;
  overflow: hidden !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-summary-head {
  display: grid !important;
  gap: 0.18rem !important;
  min-width: 0 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-summary-head strong {
  overflow: hidden !important;
  color: rgba(255, 252, 255, 0.96) !important;
  font-size: 1.08rem !important;
  line-height: 1.22 !important;
  font-weight: 880 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-summary-head em {
  overflow: hidden !important;
  color: rgba(226, 215, 255, 0.58) !important;
  font-size: 0.78rem !important;
  font-style: normal !important;
  font-weight: 760 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-metrics {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.34rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-metrics span,
html[data-active-module="scoreEditor"] .inspiration-picker-audit,
html[data-active-module="scoreEditor"] .inspiration-picker-source-note,
html[data-active-module="scoreEditor"] .inspiration-picker-message {
  border: 1px solid rgba(var(--inspiration-picker-line), 0.11) !important;
  border-radius: 7px !important;
  background: rgba(7, 6, 13, 0.55) !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-metrics span {
  display: grid !important;
  gap: 0.1rem !important;
  min-height: 2.28rem !important;
  align-content: center !important;
  padding: 0.26rem 0.42rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-metrics b,
html[data-active-module="scoreEditor"] .inspiration-picker-metrics em {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-metrics b {
  color: rgba(var(--inspiration-picker-cyan), 0.76) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-metrics em {
  color: rgba(255, 252, 255, 0.93) !important;
  font-size: 0.86rem !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-summary .inspiration-confirm-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-audit,
html[data-active-module="scoreEditor"] .inspiration-picker-source-note,
html[data-active-module="scoreEditor"] .inspiration-picker-message {
  display: grid !important;
  gap: 0.24rem !important;
  padding: 0.46rem 0.56rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-audit.is-warn {
  border-color: rgba(255, 197, 102, 0.34) !important;
  background: rgba(70, 45, 16, 0.22) !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-audit strong {
  color: rgba(var(--inspiration-picker-cyan), 0.9) !important;
  font-size: 0.88rem !important;
  font-weight: 860 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-audit p,
html[data-active-module="scoreEditor"] .inspiration-picker-source-note,
html[data-active-module="scoreEditor"] .inspiration-picker-message {
  margin: 0 !important;
  color: rgba(226, 215, 255, 0.66) !important;
  font-size: 0.78rem !important;
  line-height: 1.38 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-source-note {
  color: rgba(255, 236, 196, 0.72) !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr) !important;
  gap: 0.5rem !important;
  margin-top: auto !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-actions button {
  min-height: 2.72rem !important;
  padding: 0 0.72rem !important;
  font-size: 0.94rem !important;
  font-weight: 860 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-actions button.is-primary {
  border-color: rgba(var(--inspiration-picker-gold), 0.54) !important;
  background:
    linear-gradient(135deg, rgba(var(--inspiration-picker-purple), 0.95), rgba(61, 154, 190, 0.7), rgba(var(--inspiration-picker-gold), 0.62)),
    rgba(62, 40, 95, 0.9) !important;
  color: rgba(255, 252, 255, 0.98) !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-actions button[disabled] {
  opacity: 0.58 !important;
  cursor: progress !important;
}

@media (max-width: 1320px) {
  html[data-active-module="scoreEditor"] .inspiration-picker-layout {
    grid-template-columns: minmax(16rem, 0.82fr) minmax(28rem, 1.34fr) !important;
  }

  html[data-active-module="scoreEditor"] .inspiration-picker-summary {
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr) minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    align-items: stretch !important;
  }

  html[data-active-module="scoreEditor"] .inspiration-picker-summary .inspiration-confirm-grid,
  html[data-active-module="scoreEditor"] .inspiration-picker-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-active-module="scoreEditor"] .inspiration-picker-actions {
    width: min(18rem, 100%) !important;
    align-self: stretch !important;
  }
}

@media (max-width: 920px) {
  html[data-active-module="scoreEditor"] .inspiration-picker-page {
    height: auto !important;
    min-height: calc(100vh - 5rem) !important;
    overflow: auto !important;
  }

  html[data-active-module="scoreEditor"] .inspiration-picker-header {
    align-items: stretch !important;
    display: grid !important;
  }

  html[data-active-module="scoreEditor"] .inspiration-picker-layout,
  html[data-active-module="scoreEditor"] .inspiration-picker-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-active-module="scoreEditor"] .inspiration-picker-choice-groups,
  html[data-active-module="scoreEditor"] .inspiration-template-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
	  }
	}

/* inspiration-picker-fill-buttons-20260612-1: fill the lower viewport and normalize option button sizing. */
html[data-active-module="scoreEditor"] .inspiration-picker-page {
  height: 100% !important;
  min-height: min(48rem, calc(100vh - 5.55rem)) !important;
  overflow: hidden !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-layout {
  height: 100% !important;
  min-height: calc(100vh - 6.9rem) !important;
  align-items: stretch !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-panel {
  align-self: stretch !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-brief,
html[data-active-module="scoreEditor"] .inspiration-picker-choices,
html[data-active-module="scoreEditor"] .inspiration-picker-summary {
  height: 100% !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-choices {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-choice-groups {
  height: 100% !important;
  align-content: start !important;
  align-items: start !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 0.34rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-page .inspiration-choice-group.is-picker-group {
  display: grid !important;
  align-self: start !important;
  grid-template-rows: auto auto !important;
  min-height: 0 !important;
  padding: 0.36rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-page .inspiration-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1.8rem !important;
  align-content: start !important;
  gap: 0.26rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-page .inspiration-choice-chip {
  width: 100% !important;
  height: 1.8rem !important;
  min-height: 1.8rem !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 0.34rem !important;
  font-size: 0.72rem !important;
  line-height: 1.12 !important;
  text-align: center !important;
}

html[data-active-module="scoreEditor"] .inspiration-template-card {
  height: 3.56rem !important;
  min-height: 3.56rem !important;
  align-content: center !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-actions button {
  height: 2.82rem !important;
  min-height: 2.82rem !important;
}

@media (max-width: 920px) {
  html[data-active-module="scoreEditor"] .inspiration-picker-page,
  html[data-active-module="scoreEditor"] .inspiration-picker-layout,
  html[data-active-module="scoreEditor"] .inspiration-picker-panel {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* inspiration-picker-summary-left-20260612-1: merge the confirmation column into the left inspiration rail. */
html[data-active-module="scoreEditor"] .inspiration-picker-layout {
  grid-template-columns: minmax(17.5rem, 0.72fr) minmax(42rem, 1.84fr) !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-brief {
  grid-template-rows: auto auto auto minmax(0, auto) !important;
  align-content: start !important;
  gap: 0.48rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-brief .inspiration-picker-summary {
  height: auto !important;
  min-height: 0 !important;
  grid-template-rows: auto auto auto auto auto !important;
  gap: 0.34rem !important;
  padding: 0.42rem 0 !important;
  padding-top: 0.18rem !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-brief .inspiration-picker-summary-head {
  gap: 0.12rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-brief .inspiration-picker-summary-head strong {
  font-size: 1rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-brief .inspiration-picker-metrics,
html[data-active-module="scoreEditor"] .inspiration-picker-brief .inspiration-confirm-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.28rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-brief .inspiration-picker-metrics span {
  min-height: 1.95rem !important;
  padding: 0.18rem 0.38rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-brief .inspiration-picker-audit,
html[data-active-module="scoreEditor"] .inspiration-picker-brief .inspiration-picker-source-note,
html[data-active-module="scoreEditor"] .inspiration-picker-brief .inspiration-picker-message {
  padding: 0.36rem 0.5rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-brief .inspiration-picker-source-note {
  display: none !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-brief .inspiration-picker-actions {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr) !important;
  gap: 0.4rem !important;
  margin-top: 0 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-brief .inspiration-picker-actions button {
  min-height: 2.46rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-brief .inspiration-template-grid {
  gap: 0.32rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-brief .inspiration-template-card {
  min-height: 2.84rem !important;
  padding: 0.34rem 0.5rem !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-choices {
  min-width: 0 !important;
}

html[data-active-module="scoreEditor"] .inspiration-picker-choice-groups {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 1320px) {
  html[data-active-module="scoreEditor"] .inspiration-picker-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* learning-tools-practice-library-palette-20260611-1: keep the edited tuner/metronome art, but match the library gold-black palette. */
html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
  --library-ref-gold: 232, 184, 111;
  --library-ref-gold-soft: 255, 220, 166;
  --library-ref-line: 255, 255, 255;
  --library-ref-panel: 12, 13, 15;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
  border-color: rgba(var(--library-ref-gold-soft), 0.18) !important;
  background-color: rgb(var(--library-ref-panel)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 224, 0.07),
    inset 0 0 2.2rem rgba(var(--library-ref-gold), 0.055),
    0 1.05rem 2.45rem rgba(0, 0, 0, 0.36) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible::after {
  background:
    radial-gradient(circle at 84% 18%, rgba(var(--library-ref-gold-soft), 0.18), transparent 34%),
    linear-gradient(90deg, rgba(var(--library-ref-panel), 0.76) 0%, rgba(36, 24, 12, 0.52) 42%, rgba(var(--library-ref-gold), 0.08) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.24) 100%) !important;
  opacity: 1 !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  border-color: rgba(var(--library-ref-gold-soft), 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 224, 0.1),
    inset 0 0 2.4rem rgba(var(--library-ref-gold), 0.08),
    0 1.18rem 2.7rem rgba(0, 0, 0, 0.38),
    0 0 1.05rem rgba(var(--library-ref-gold), 0.12) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner .tools-practice-meta b,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome .tools-practice-meta b {
  border-color: rgba(var(--library-ref-gold-soft), 0.2) !important;
  background: rgba(var(--library-ref-gold), 0.11) !important;
  color: rgba(255, 232, 186, 0.92) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner .tools-practice-copy strong,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome .tools-practice-copy strong {
  color: rgba(255, 246, 224, 0.98) !important;
  text-shadow: 0 0.18rem 0.58rem rgba(0, 0, 0, 0.66) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner .tools-practice-copy small,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome .tools-practice-copy small {
  color: rgba(237, 224, 196, 0.74) !important;
  text-shadow: 0 0.16rem 0.48rem rgba(0, 0, 0, 0.58) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner > .tools-card-arrow,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome > .tools-card-arrow {
  border-color: rgba(var(--library-ref-gold-soft), 0.26) !important;
  background: rgba(var(--library-ref-gold), 0.12) !important;
  color: rgba(255, 232, 186, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 224, 0.12),
    0 0.52rem 1.05rem rgba(0, 0, 0, 0.26) !important;
}

/* learning-tools-practice-layer-fix-20260611-1: resolve old order/image overlays that made tuner and metronome read as mismatched layers. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner {
  order: 1 !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
  order: 2 !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible {
  overflow: hidden !important;
  border-radius: 24px !important;
  background-color: rgb(var(--library-ref-panel)) !important;
  background-image: none !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-blend-mode: normal !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  overflow: visible !important;
  border-radius: 24px !important;
  background-color: transparent !important;
  background-image: none !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-blend-mode: normal !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  background-image: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible {
  background-image: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible::before {
  content: "" !important;
  position: absolute !important;
  top: -13.25% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: 113.25% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png") center top / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  clip-path: none !important;
  pointer-events: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(90deg, rgba(9, 7, 5, 0.08), rgba(84, 52, 18, 0.22)),
    url("/platform/assets/learning-tool-tuner-no-text.png?v=learning-tools-tuner-warm-mask-20260611-1") center / cover no-repeat !important;
  background-blend-mode: color, normal !important;
  filter: sepia(0.38) saturate(0.72) hue-rotate(338deg) brightness(0.86) contrast(1.08) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible::after {
  inset: 0 !important;
  z-index: 1 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 78% 12%, rgba(var(--library-ref-gold-soft), 0.14), transparent 34%),
    linear-gradient(90deg, rgba(var(--library-ref-panel), 0.72) 0%, rgba(34, 24, 13, 0.46) 45%, rgba(var(--library-ref-gold), 0.05) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.2) 100%) !important;
  opacity: 1 !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::after {
  background:
    radial-gradient(circle at 78% 12%, rgba(var(--library-ref-gold-soft), 0.2), transparent 35%),
    linear-gradient(90deg, rgba(8, 7, 5, 0.82) 0%, rgba(38, 25, 12, 0.7) 42%, rgba(108, 72, 26, 0.34) 100%),
    linear-gradient(180deg, rgba(74, 45, 14, 0.18), rgba(0, 0, 0, 0.26)) !important;
}

/* learning-tools-sealed-practice-restore-20260611-1: restore only tuner/metronome from the 20260608 sealed learning-tools card mask record. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner {
  order: 1 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: 24px !important;
  background-color: transparent !important;
  background-image: none !important;
  background-clip: padding-box !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
  order: 2 !important;
  overflow: visible !important;
  border-color: transparent !important;
  border-radius: 24px !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before {
  content: "" !important;
  position: absolute !important;
  top: -13.25% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: 113.25% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png") center top / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  clip-path: none !important;
  pointer-events: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: url("/platform/assets/learning-tool-tuner-no-text.png?v=learning-reference-crops-20260603-24") center / cover no-repeat !important;
  box-shadow: none !important;
  filter: brightness(1.08) saturate(1.05) contrast(1.02) !important;
  opacity: 1 !important;
  clip-path: inset(0 round 24px) !important;
  pointer-events: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  border-radius: inherit !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.04) 50%, transparent 72%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.04)) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after {
  clip-path: inset(0 round 24px) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::after {
  transform: none !important;
}

/* learning-tools-entry-no-click-color-eof-20260611-3: final lock after the sealed practice-card restore. */
html[data-active-module="nav-learningTools"] .tools-entry-card {
  -webkit-tap-highlight-color: transparent !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover,
html[data-active-module="nav-learningTools"] .tools-material-card:focus,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card:active {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.006)),
    rgba(4, 5, 6, 0.92) !important;
  color: inherit !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.026),
    0 0.38rem 0.95rem rgba(0, 0, 0, 0.28) !important;
  outline: 0 !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover::after,
html[data-active-module="nav-learningTools"] .tools-material-card:focus::after,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-material-card:active::after {
  background:
    radial-gradient(ellipse at 82% 18%, rgba(var(--library-study-gold), 0.12), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(91, 55, 24, 0.18), rgba(0, 0, 0, 0.32)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.28)) !important;
  opacity: 1 !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover strong,
html[data-active-module="nav-learningTools"] .tools-material-card:focus strong,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible strong,
html[data-active-module="nav-learningTools"] .tools-material-card:active strong {
  color: rgba(255, 251, 242, 0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover small,
html[data-active-module="nav-learningTools"] .tools-material-card:focus small,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible small,
html[data-active-module="nav-learningTools"] .tools-material-card:active small {
  color: rgba(236, 232, 220, 0.72) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card:active {
  outline: 0 !important;
  transform: none !important;
}

/* learning-tools-no-hover-filter-eof-20260611-6: absolute final hover lock. */
html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-entry-card:active {
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:not(.is-feature-intro):hover,
html[data-active-module="nav-learningTools"] .tools-material-card:not(.is-feature-intro):focus,
html[data-active-module="nav-learningTools"] .tools-material-card:not(.is-feature-intro):focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card:not(.is-feature-intro):active {
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:active {
  filter: brightness(1.08) saturate(1.05) !important;
}

html[data-active-module="nav-learningTools"] .tools-card-object,
html[data-active-module="nav-learningTools"] .tools-card-visual,
html[data-active-module="nav-learningTools"] .tools-card-arrow {
  transition: none !important;
}

/* learning-tools-no-hover-repaint-eof-20260611-9: true EOF lock for learning-tool entry cards. */
html[data-active-module="nav-learningTools"] .tools-entry-card,
html[data-active-module="nav-learningTools"] .tools-entry-card *,
html[data-active-module="nav-learningTools"] .tools-entry-card::before,
html[data-active-module="nav-learningTools"] .tools-entry-card::after {
  transition: transform 110ms ease, box-shadow 110ms ease !important;
  animation: none !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-entry-card:active {
  outline: 0 !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible {
  transform: scale(1.006) !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card:active {
  transform: translateY(1px) scale(0.995) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover,
html[data-active-module="nav-learningTools"] .tools-material-card:focus,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card:active {
  background-color: transparent !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-blend-mode: normal !important;
  color: inherit !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible {
  transform: scale(1.006) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:active {
  transform: translateY(1px) scale(0.995) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0.35rem 1.1rem rgba(0, 0, 0, 0.2),
    0 0.78rem 1.9rem rgba(0, 0, 0, 0.32) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:active {
  background-image: url("/platform/assets/learning-card-feature-123.png?v=learning-tools-123-source-20260607-3") !important;
  filter: brightness(1.08) saturate(1.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 1.1rem 2.7rem rgba(0, 0, 0, 0.38),
    0 0 1.15rem rgba(232, 197, 126, 0.16) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:active {
  background-image: url("/platform/assets/learning-card-basic-123.png?v=learning-tools-123-source-20260607-3") !important;
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:active {
  background-image: url("/platform/assets/learning-card-posture-123.png?v=learning-tools-123-source-20260607-3") !important;
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:active {
  background-image: url("/platform/assets/learning-card-notes-123.png?v=learning-tools-123-source-20260607-3") !important;
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:active {
  background-image: url("/platform/assets/learning-card-theory-123.png?v=learning-tools-123-source-20260607-3") !important;
  filter: brightness(0.96) saturate(0.98) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover::before,
html[data-active-module="nav-learningTools"] .tools-material-card:focus::before,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-material-card:active::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  transform: none !important;
}

/* learning-tools-practice-no-hover-repaint-eof-20260611-12: tuner/metronome hover only scales, never recolors. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner *,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome *,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after {
  transition: transform 110ms ease, box-shadow 110ms ease !important;
  animation: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  background-color: transparent !important;
  background-image: none !important;
  filter: none !important;
  transform: scale(1.006) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible {
  border-color: rgba(var(--library-ref-gold-soft), 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 224, 0.07),
    inset 0 0 2.2rem rgba(var(--library-ref-gold), 0.055),
    0 1.05rem 2.45rem rgba(0, 0, 0, 0.36) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible {
  overflow: hidden !important;
  border-radius: 24px !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  overflow: visible !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: url("/platform/assets/learning-tool-tuner-no-text.png?v=learning-reference-crops-20260603-24") center / cover no-repeat !important;
  box-shadow: none !important;
  filter: brightness(1.08) saturate(1.05) contrast(1.02) !important;
  opacity: 1 !important;
  clip-path: inset(0 round 24px) !important;
  pointer-events: none !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible::before {
  content: "" !important;
  position: absolute !important;
  top: -13.25% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: 113.25% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png") center top / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  clip-path: none !important;
  pointer-events: none !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  border-radius: inherit !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.04) 50%, transparent 72%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.04)) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::after {
  clip-path: inset(0 round 24px) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:active,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active {
  transform: translateY(1px) scale(0.995) !important;
}

/* note-atlas-detail-scroll-fix-eof-20260611-2: keep symbol detail cards readable instead of clipped. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-atlas {
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
  align-content: start !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  padding-bottom: clamp(1.2rem, 1.8vw, 1.75rem) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(var(--library-study-gold-soft), 0.42) rgba(255, 255, 255, 0.045) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo::-webkit-scrollbar {
  width: 0.42rem;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(var(--library-study-gold-soft), 0.36);
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-detail-list {
  padding-bottom: 0.2rem !important;
}

/* note-atlas-staff-only-detail-eof-20260611-1: show the staff example directly, no first hero frame or inner paging. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
  align-content: start !important;
  gap: clamp(0.82rem, 1.05vw, 1.05rem) !important;
  overflow: hidden !important;
  padding: clamp(1.05rem, 1.45vw, 1.45rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo .knowledge-note-demo-caption,
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo .knowledge-note-symbol-hero,
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo .knowledge-note-duration-hero,
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo .knowledge-note-rest-hero,
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo .knowledge-note-key-hero,
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo .knowledge-note-interval-hero {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-staff-demo {
  min-height: clamp(7.8rem, 17vh, 10.2rem) !important;
  margin-bottom: clamp(0.18rem, 0.36vw, 0.34rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo h3 {
  margin-top: 0 !important;
}

/* note-atlas-remove-hero-frame-eof-20260611-2: force-hide the old top symbol frame even if stale markup is still present. */
.knowledge-notes-stage.is-category-open .knowledge-note-demo > .knowledge-note-symbol-hero,
.knowledge-notes-stage.is-category-open .knowledge-note-demo > .knowledge-note-duration-hero,
.knowledge-notes-stage.is-category-open .knowledge-note-demo > .knowledge-note-rest-hero,
.knowledge-notes-stage.is-category-open .knowledge-note-demo > .knowledge-note-key-hero,
.knowledge-notes-stage.is-category-open .knowledge-note-demo > .knowledge-note-interval-hero,
.knowledge-notes-stage.is-category-open .knowledge-note-demo > .knowledge-note-demo-caption {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

.knowledge-notes-stage.is-category-open .knowledge-note-demo {
  overflow: hidden !important;
}

/* note-atlas-compact-category-overview-20260611-1: make the entry overview useful instead of a large empty hero. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-atlas {
  grid-template-columns: minmax(42rem, 1fr) minmax(15.5rem, 18.5rem) !important;
  gap: clamp(0.58rem, 0.82vw, 0.86rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview {
  align-content: start !important;
  align-self: start !important;
  gap: clamp(0.48rem, 0.72vw, 0.72rem) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(0.68rem, 0.92vw, 0.9rem) !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-head {
  display: grid;
  grid-template-columns: 2.85rem minmax(0, 1fr);
  gap: 0.62rem;
  align-items: center;
  min-height: 3.05rem;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-icon {
  display: grid;
  width: 2.85rem;
  height: 2.85rem;
  place-items: center;
  border: 1px solid rgba(var(--library-study-gold-soft), 0.22);
  border-radius: 0.58rem;
  background:
    radial-gradient(circle at 50% 28%, rgba(var(--library-study-gold), 0.26), transparent 56%),
    rgba(6, 7, 9, 0.72);
  color: rgba(255, 223, 166, 0.96);
  font-size: 1.42rem;
  font-weight: 860;
  line-height: 1;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-head .eyebrow {
  margin: 0 0 0.12rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-head h3 {
  margin: 0 !important;
  font-size: clamp(1.05rem, 1.32vw, 1.38rem) !important;
  line-height: 1.05 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-copy {
  margin: 0 !important;
  color: rgba(232, 232, 226, 0.72) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.84rem) !important;
  line-height: 1.48 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-stats {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.42rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-stats span {
  min-height: 2rem !important;
  padding: 0.48rem 0.58rem !important;
  font-size: clamp(0.68rem, 0.74vw, 0.76rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
  min-height: 0;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts button {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  min-height: 2.58rem;
  padding: 0.48rem 0.52rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.48rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.006)),
    rgba(4, 5, 6, 0.92);
  color: rgba(247, 249, 247, 0.94);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts button:hover {
  border-color: rgba(var(--library-study-gold-soft), 0.48);
  background:
    linear-gradient(180deg, rgba(232, 184, 111, 0.22), rgba(42, 28, 12, 0.58)),
    rgba(6, 5, 3, 0.94);
  transform: translateY(-1px);
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts strong,
html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts strong {
  color: rgba(255, 238, 205, 0.96);
  font-size: clamp(0.7rem, 0.78vw, 0.82rem);
  font-weight: 860;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts span {
  color: rgba(224, 229, 226, 0.58);
  font-size: 0.64rem;
  font-weight: 760;
}

@media (max-width: 1180px) {
  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-atlas {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-overview {
    order: -1;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* note-atlas-drawn-duration-no-scroll-20260611-1: draw note values directly and page symbol cards instead of scrolling. */
html[data-active-module="violinKnowledge"] .knowledge-note-category-panel.is-card-browser {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  align-content: stretch !important;
  gap: clamp(0.34rem, 0.5vw, 0.52rem) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  scrollbar-width: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail::-webkit-scrollbar {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card {
  min-height: 0 !important;
  padding: clamp(0.42rem, 0.56vw, 0.58rem) !important;
  border-radius: 0.58rem !important;
  gap: 0.12rem !important;
  grid-template-rows: minmax(2.55rem, 1fr) auto auto !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card.has-drawn-duration .knowledge-note-symbol-card-glyph {
  overflow: visible !important;
  text-overflow: clip !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration {
  position: relative;
  display: block;
  width: clamp(3.15rem, 4.4vw, 4.6rem);
  height: clamp(2.35rem, 3.45vw, 3.45rem);
  color: rgba(255, 225, 175, 0.98);
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .note-head {
  position: absolute;
  left: 20%;
  bottom: 12%;
  width: 1.38rem;
  height: 0.98rem;
  border: 0.18rem solid currentColor;
  border-radius: 999px;
  transform: rotate(-18deg);
  transform-origin: center;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-filled .note-head,
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-eighth .note-head,
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-sixteenth .note-head,
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-thirty-second .note-head,
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-sixty-fourth .note-head {
  background: currentColor;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .note-stem {
  position: absolute;
  left: calc(20% + 1.34rem);
  bottom: 36%;
  width: 0.17rem;
  height: 2.05rem;
  border-radius: 999px;
  background: currentColor;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-whole .note-head {
  left: 24%;
  bottom: 31%;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-breve .note-head {
  left: 26%;
  bottom: 31%;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .breve-bar {
  position: absolute;
  bottom: 27%;
  width: 0.16rem;
  height: 1.45rem;
  border-radius: 999px;
  background: currentColor;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .breve-bar.is-left {
  left: 20%;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .breve-bar.is-right {
  left: 65%;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .note-flag {
  position: absolute;
  left: calc(20% + 1.42rem);
  width: 1rem;
  height: 0.58rem;
  border-top: 0.18rem solid currentColor;
  border-right: 0.18rem solid currentColor;
  border-top-right-radius: 0.62rem;
  transform: skewY(18deg);
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .note-flag.is-1 { top: 16%; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .note-flag.is-2 { top: 30%; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .note-flag.is-3 { top: 44%; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .note-flag.is-4 { top: 58%; }

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .note-dot {
  position: absolute;
  left: 69%;
  bottom: 31%;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 999px;
  background: currentColor;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .note-dot.is-2 {
  left: 80%;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-beamed .note-head {
  position: absolute;
  bottom: 12%;
  width: 1.02rem;
  height: 0.76rem;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(-18deg);
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-beamed .note-head.is-left { left: 16%; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-beamed .note-head.is-right { left: 54%; }

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-beamed .note-stem {
  bottom: 29%;
  height: 2.05rem;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-beamed .note-stem.is-left { left: calc(16% + 0.96rem); }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-beamed .note-stem.is-right { left: calc(54% + 0.96rem); }

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .note-beam {
  position: absolute;
  left: calc(16% + 1rem);
  width: 2.1rem;
  height: 0.22rem;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(-4deg);
  transform-origin: left center;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .note-beam.is-1 { top: 10%; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .note-beam.is-2 { top: 25%; }

html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card strong {
  font-size: clamp(0.7rem, 0.78vw, 0.86rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card small {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card em {
  min-height: 1.12rem !important;
  padding: 0 0.38rem !important;
  font-size: clamp(0.5rem, 0.56vw, 0.62rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-page-controls {
  display: grid;
  grid-template-columns: minmax(4.8rem, auto) minmax(3.8rem, 1fr) minmax(4.8rem, auto);
  gap: 0.44rem;
  align-items: center;
  min-height: 2.25rem;
}

html[data-active-module="violinKnowledge"] .knowledge-note-page-controls button,
html[data-active-module="violinKnowledge"] .knowledge-note-page-controls span {
  min-height: 2.14rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.54rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.006)),
    rgba(4, 5, 6, 0.92);
  color: rgba(245, 245, 243, 0.9);
  font-size: 0.72rem;
  font-weight: 780;
}

html[data-active-module="violinKnowledge"] .knowledge-note-page-controls span {
  display: grid;
  place-items: center;
  color: rgba(236, 232, 220, 0.72);
}

html[data-active-module="violinKnowledge"] .knowledge-note-page-controls button {
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, opacity 160ms ease;
}

html[data-active-module="violinKnowledge"] .knowledge-note-page-controls button:hover:not(:disabled) {
  border-color: rgba(var(--library-study-gold-soft), 0.48);
  background:
    linear-gradient(180deg, rgba(232, 184, 111, 0.22), rgba(42, 28, 12, 0.58)),
    rgba(6, 5, 3, 0.94);
  transform: translateY(-1px);
}

html[data-active-module="violinKnowledge"] .knowledge-note-page-controls button:disabled {
  cursor: default;
  opacity: 0.42;
}

@media (max-width: 1180px) {
  html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(7, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(14, minmax(0, 1fr)) !important;
  }
}

/* note-atlas-drawn-rest-no-font-20260611-1: draw rest symbols instead of relying on missing music glyph fonts. */
html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card.has-drawn-rest .knowledge-note-symbol-card-glyph {
  overflow: visible !important;
  text-overflow: clip !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest {
  position: relative;
  display: block;
  width: clamp(3.15rem, 4.35vw, 4.55rem) !important;
  height: clamp(2.42rem, 3.35vw, 3.38rem) !important;
  color: rgba(255, 226, 178, 0.98) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  overflow: visible !important;
}

html[data-active-module="violinKnowledge"] .knowledge-rest-symbol.knowledge-drawn-rest {
  position: absolute !important;
  left: 51% !important;
  top: var(--rest-top, 47%) !important;
  z-index: 2 !important;
  width: clamp(4.2rem, 8.2vw, 5.35rem) !important;
  height: clamp(2.75rem, 5vw, 3.55rem) !important;
  color: rgba(255, 226, 178, 0.98) !important;
  font-family: inherit !important;
  transform: translate(-50%, -50%) !important;
  animation: knowledgeStaffSymbolDrop 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest i,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest b {
  position: absolute !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
  font-style: normal !important;
  line-height: 1 !important;
  text-shadow: none !important;
  animation: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-line {
  left: 12% !important;
  right: 12% !important;
  top: 50% !important;
  height: 0.13rem !important;
  border-radius: 999px !important;
  background: rgba(255, 226, 178, 0.42) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-block {
  left: 35% !important;
  width: 1.45rem !important;
  height: 0.44rem !important;
  border-radius: 0.08rem !important;
  background: currentColor !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-whole .rest-block {
  top: calc(50% + 0.08rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-half .rest-block {
  top: calc(50% - 0.5rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-multi::before,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-multi::after {
  position: absolute;
  left: 27%;
  right: 27%;
  height: 0.18rem;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-multi::before {
  top: 34%;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-multi::after {
  top: 60%;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-multi-bar {
  top: 28% !important;
  width: 0.2rem !important;
  height: 45% !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-multi-bar.is-left {
  left: 25% !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-multi-bar.is-right {
  right: 25% !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-multi-number {
  left: 50% !important;
  top: 50% !important;
  color: rgba(20, 13, 6, 0.96) !important;
  font-size: clamp(0.64rem, 0.9vw, 0.84rem) !important;
  font-weight: 900 !important;
  transform: translate(-50%, -54%) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-rest-symbol .rest-multi-number {
  font-size: clamp(0.82rem, 1.5vw, 1rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-zig {
  left: 46% !important;
  width: 0.25rem !important;
  height: 1.08rem !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform-origin: center !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-zig.is-1 {
  top: 8% !important;
  transform: rotate(-32deg) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-zig.is-2 {
  left: 50% !important;
  top: 28% !important;
  transform: rotate(34deg) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-zig.is-3 {
  left: 43% !important;
  top: 49% !important;
  transform: rotate(-28deg) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-curl {
  left: 42% !important;
  top: 66% !important;
  width: 0.88rem !important;
  height: 0.58rem !important;
  border-right: 0.2rem solid currentColor !important;
  border-bottom: 0.2rem solid currentColor !important;
  border-radius: 0 0 0.7rem 0 !important;
  transform: rotate(-22deg) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-stem {
  left: 45% !important;
  top: 13% !important;
  width: 0.18rem !important;
  height: 70% !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: rotate(8deg) !important;
  transform-origin: top center !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-hook {
  left: 46% !important;
  width: 1.12rem !important;
  height: 0.56rem !important;
  border-top: 0.19rem solid currentColor !important;
  border-right: 0.19rem solid currentColor !important;
  border-top-right-radius: 0.72rem !important;
  transform: rotate(20deg) skewY(-8deg) !important;
  transform-origin: left top !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-hook::before {
  position: absolute;
  left: -0.18rem;
  top: -0.34rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-hook.is-1 { top: 18% !important; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-hook.is-2 { top: 31% !important; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-hook.is-3 { top: 44% !important; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-hook.is-4 { top: 57% !important; }

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-dot {
  left: 72% !important;
  top: 53% !important;
  width: 0.32rem !important;
  height: 0.32rem !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .rest-dot.is-2 {
  left: 82% !important;
}

/* note-atlas-card-fit-audit-20260611-1: keep every paged symbol card inside its fixed row height. */
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card {
  grid-template-rows: minmax(2.2rem, 1fr) auto !important;
  align-content: center !important;
  gap: 0.1rem !important;
  padding: clamp(0.34rem, 0.46vw, 0.5rem) clamp(0.48rem, 0.58vw, 0.62rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card small,
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card em {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card-glyph {
  max-width: 100% !important;
  max-height: 2.42rem !important;
  min-height: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(0.9rem, 1.22vw, 1.24rem) !important;
  line-height: 1.02 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.is-symbol .knowledge-note-symbol-card-glyph {
  font-size: clamp(1.65rem, 2.25vw, 2.42rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-duration .knowledge-note-symbol-card-glyph,
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest .knowledge-note-symbol-card-glyph {
  max-height: 2.28rem !important;
  overflow: visible !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-duration .knowledge-note-card-duration,
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest .knowledge-note-card-rest {
  width: clamp(2.5rem, 3.15vw, 3.18rem) !important;
  height: clamp(1.76rem, 2.28vw, 2.28rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card strong {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(0.66rem, 0.74vw, 0.8rem) !important;
  line-height: 1.12 !important;
}

/* note-atlas-detail-fit-audit-20260611-1: prevent long explanations and long text symbols from spilling. */
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card:not(.is-symbol):not(.has-drawn-duration):not(.has-drawn-rest) .knowledge-note-symbol-card-glyph {
  font-size: clamp(0.72rem, 0.92vw, 0.98rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
  gap: clamp(0.48rem, 0.68vw, 0.68rem) !important;
  padding: clamp(0.82rem, 1.1vw, 1.05rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-staff-demo {
  min-height: clamp(6.65rem, 14vh, 8.25rem) !important;
  margin-bottom: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo h3 {
  font-size: clamp(1.34rem, 1.7vw, 1.72rem) !important;
  line-height: 1.06 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo > p:not(.eyebrow) {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: rgba(236, 232, 220, 0.72) !important;
  font-size: clamp(0.7rem, 0.78vw, 0.82rem) !important;
  line-height: 1.34 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-detail-list {
  gap: 0.32rem !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-detail-list span {
  display: -webkit-box !important;
  overflow: hidden !important;
  padding: 0.42rem 0.54rem !important;
  font-size: clamp(0.62rem, 0.7vw, 0.74rem) !important;
  line-height: 1.28 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

/* note-atlas-category-card-clean-20260611-1: remove cramped sample strings from the category index cards. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card {
  align-content: center !important;
  gap: 0.1rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card em {
  display: none !important;
}
/* home-start-practice-cover-eof-20260611-1: use the provided desktop image as the Start Practice cover. */
html[data-active-module="nav-practice"] .practice-player-board {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.22) 40%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.62) 100%),
    url("/platform/assets/home-start-practice-cover.png?v=home-start-practice-cover-20260611-1") center center / cover no-repeat !important;
  border-color: rgba(233, 183, 96, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(0, 0, 0, 0.32),
    0 1.35rem 3.2rem rgba(0, 0, 0, 0.48),
    0 0 1.4rem rgba(233, 183, 96, 0.08) !important;
}

html[data-active-module="nav-practice"] .practice-player-board::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 232, 187, 0.11), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(233, 183, 96, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 32%);
}

html[data-active-module="nav-practice"] .practice-player-head {
  grid-row: 1 !important;
  position: relative !important;
  z-index: 1 !important;
}

html[data-active-module="nav-practice"] .practice-player-controls {
  grid-row: 3 !important;
  position: relative !important;
  z-index: 1 !important;
  align-self: end !important;
}

html[data-active-module="nav-practice"] .practice-score-preview,
html[data-active-module="nav-practice"] .practice-fingerboard-scene {
  display: none !important;
}

html[data-active-module="nav-practice"] .practice-player-glow {
  display: none !important;
}

html[data-active-module="nav-practice"] .practice-player-copy h3,
html[data-active-module="nav-practice"] .practice-player-copy p,
html[data-active-module="nav-practice"] .practice-player-copy span {
  text-shadow: 0 0.45rem 1.1rem rgba(0, 0, 0, 0.72) !important;
}

html[data-active-module="nav-practice"] .practice-accuracy-card,
html[data-active-module="nav-practice"] .practice-player-controls {
  backdrop-filter: blur(14px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
}

/* home-portal-start-practice-cover-eof-20260611-1: the homepage Start Practice card uses the same provided cover. */
html[data-active-module="home"] .content-grid[data-module="home"] .portal-card.portal-continue::before,
html[data-active-module="home"] .home-portal-strip .portal-card.portal-continue::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.16) 46%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 42%, rgba(0, 0, 0, 0.78) 100%),
    url("/platform/assets/home-start-practice-cover.png?v=home-start-practice-cover-20260611-1") center center / cover no-repeat !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card.portal-continue::after,
html[data-active-module="home"] .home-portal-strip .portal-card.portal-continue::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 20%),
    radial-gradient(circle at 18% 16%, rgba(255, 232, 187, 0.12), transparent 28%),
    linear-gradient(180deg, transparent 0 38%, rgba(3, 4, 5, 0.58) 78%, rgba(3, 4, 5, 0.92) 100%) !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card.portal-continue .portal-visual,
html[data-active-module="home"] .home-portal-strip .portal-card.portal-continue .portal-visual {
  display: none !important;
}

html[data-active-module="home"] .content-grid[data-module="home"] .portal-card.portal-continue h3,
html[data-active-module="home"] .content-grid[data-module="home"] .portal-card.portal-continue p,
html[data-active-module="home"] .content-grid[data-module="home"] .portal-card.portal-continue .portal-action,
html[data-active-module="home"] .home-portal-strip .portal-card.portal-continue h3,
html[data-active-module="home"] .home-portal-strip .portal-card.portal-continue p,
html[data-active-module="home"] .home-portal-strip .portal-card.portal-continue .portal-action {
  text-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.74) !important;
}

/* nav-practice-full-cover-eof-20260611-1: replace the Start Practice page content with the provided cover image while keeping navigation. */
html[data-active-module="nav-practice"] .content-grid[data-module="nav-practice"] {
  padding: clamp(0.72rem, 1vw, 1rem) !important;
  overflow: hidden !important;
  align-content: stretch !important;
  grid-auto-rows: minmax(0, 1fr) !important;
}

html[data-active-module="nav-practice"] .nav-workbench-practice.nav-practice-cover-shell {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 0 !important;
}

html[data-active-module="nav-practice"] .practice-cover-board {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1916 / 821 !important;
  align-self: center !important;
  justify-self: center !important;
  min-height: 0 !important;
  place-items: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(180, 190, 204, 0.16) !important;
  border-radius: clamp(0.58rem, 0.9vw, 0.86rem) !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.18)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent 34%, rgba(0, 0, 0, 0.18)),
    url("/platform/assets/practice-cover-button-bg-neutral-v3.png?v=practice-bg-neutral-v3-20260612-1") center center / cover no-repeat,
    linear-gradient(180deg, #050403 0%, #080706 54%, #030202 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1.2rem 3rem rgba(0, 0, 0, 0.42) !important;
}

html[data-active-module="nav-practice"] .practice-cover-board::before,
html[data-active-module="nav-practice"] .practice-cover-board::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

html[data-active-module="nav-practice"] .practice-cover-board::before {
  z-index: 0 !important;
  inset: -5% !important;
  background:
    radial-gradient(ellipse at 56% 54%, rgba(255, 255, 255, 0.035), transparent 44%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.36), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.42)),
    url("/platform/assets/practice-cover-button-bg-neutral-v3.png?v=practice-bg-neutral-v3-20260612-1") center center / cover no-repeat !important;
  filter: blur(8px) brightness(0.72) saturate(0.98) !important;
  opacity: 0.98 !important;
  transform: scale(1.055) !important;
}

html[data-active-module="nav-practice"] .practice-cover-board::after {
  z-index: 2 !important;
  background:
    linear-gradient(90deg, rgba(3, 3, 3, 0.42) 0%, rgba(3, 3, 3, 0.18) 5%, rgba(3, 3, 3, 0) 12%, rgba(3, 3, 3, 0) 88%, rgba(3, 3, 3, 0.18) 95%, rgba(3, 3, 3, 0.42) 100%),
    radial-gradient(ellipse at 50% 96%, rgba(255, 255, 255, 0.055), transparent 42%) !important;
}

html[data-active-module="nav-practice"] .practice-cover-canvas {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  background:
    url("/platform/assets/practice-cover-button-bg-neutral-v3.png?v=practice-bg-neutral-v3-20260612-1") center center / cover no-repeat !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1916 / 821 !important;
  contain: layout paint !important;
}

html[data-active-module="nav-practice"] .practice-cover-image {
  position: absolute !important;
  z-index: 1 !important;
  display: block !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1916 / 821 !important;
  object-fit: contain !important;
  object-position: center center !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* practice-cover-real-image-crops-20260612-2: use PNG crops taken directly from the provided cover image. */
html[data-active-module="nav-practice"] .practice-cover-actions {
  position: absolute !important;
  z-index: 4 !important;
  inset: 0 !important;
  pointer-events: none !important;
}

html[data-active-module="nav-practice"] .practice-cover-action {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  color: inherit !important;
  font: inherit !important;
  cursor: pointer !important;
  overflow: visible !important;
  outline: none !important;
  pointer-events: auto !important;
  clip-path: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 1 !important;
  transform: scale(1) !important;
  transform-origin: center center !important;
  transition: transform 120ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

html[data-active-module="nav-practice"] .practice-cover-action.is-follow {
  left: 15.97% !important;
  top: 7.8% !important;
  width: 53.03% !important;
  height: 75.76% !important;
  --practice-cover-button-image: url("/platform/assets/practice-cover-crop-follow.png?v=practice-cover-ai-accompaniment-label-20260612-1");
}

html[data-active-module="nav-practice"] .practice-cover-action.is-fingerboard {
  left: 70.56% !important;
  top: 7.31% !important;
  width: 19.2% !important;
  height: 21.2% !important;
  --practice-cover-button-image: url("/platform/assets/practice-cover-crop-fingerboard.png?v=real-image-crops-20260612-2");
}

html[data-active-module="nav-practice"] .practice-cover-action.is-bow {
  left: 70.56% !important;
  top: 29.72% !important;
  width: 19.2% !important;
  height: 18.64% !important;
  --practice-cover-button-image: url("/platform/assets/practice-cover-crop-bow.png?v=real-image-crops-20260612-2");
}

html[data-active-module="nav-practice"] .practice-cover-action.is-record {
  left: 70.56% !important;
  top: 49.33% !important;
  width: 19.2% !important;
  height: 18.51% !important;
  --practice-cover-button-image: url("/platform/assets/practice-cover-crop-record.png?v=real-image-crops-20260612-2");
}

html[data-active-module="nav-practice"] .practice-cover-action.is-materials {
  left: 69.31% !important;
  top: 67.97% !important;
  width: 20.98% !important;
  height: 20.22% !important;
  --practice-cover-button-image: url("/platform/assets/practice-cover-crop-teacher.png?v=practice-cover-teacher-card-corner-20260612-1");
}

html[data-active-module="nav-practice"] .practice-cover-action:hover,
html[data-active-module="nav-practice"] .practice-cover-action:focus-visible {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  z-index: 2 !important;
  transform: scale(1) !important;
}

html[data-active-module="nav-practice"] .practice-cover-action:active {
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  z-index: 2 !important;
  transform: scale(1) !important;
}

html[data-active-module="nav-practice"] .practice-cover-action::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block !important;
  background-image: var(--practice-cover-button-image) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(1) !important;
  transform-origin: center center !important;
  transition: opacity 90ms ease, transform 120ms ease !important;
}

html[data-active-module="nav-practice"] .practice-cover-action:hover::before,
html[data-active-module="nav-practice"] .practice-cover-action:focus-visible::before {
  opacity: 1 !important;
  transform: scale(1.026) !important;
}

html[data-active-module="nav-practice"] .practice-cover-action:active::before {
  opacity: 1 !important;
  transform: scale(1.016) !important;
}

html[data-active-module="nav-practice"] .practice-cover-action::after {
  display: none !important;
  content: none !important;
}

html[data-active-module="nav-practice"] .practice-cover-action:hover::after,
html[data-active-module="nav-practice"] .practice-cover-action:focus-visible::after {
  display: none !important;
  content: none !important;
}

html[data-active-module="nav-practice"] .practice-cover-action:active::after {
  display: none !important;
  content: none !important;
}

/* ai-generate-busy-countdown-quota-20260611-1: show countdown and remaining quota inside the generating button. */
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  grid-template-rows: auto auto !important;
  align-content: center !important;
  gap: clamp(0.12rem, 0.18vw, 0.2rem) !important;
  padding-block: clamp(0.18rem, 0.28vw, 0.3rem) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > small {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 235, 190, 0.92) !important;
  font-size: clamp(0.58rem, 0.72vw, 0.78rem) !important;
  font-weight: 840 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > strong {
  font-size: clamp(0.9rem, 1.04vw, 1.06rem) !important;
  line-height: 1 !important;
}

/* note-atlas-dictionary-copy-20260611-1: after removing practice advice, make symbol explanations larger and reduce empty space. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
  align-content: start !important;
  gap: clamp(0.42rem, 0.62vw, 0.62rem) !important;
  padding: clamp(0.78rem, 1vw, 0.98rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-staff-demo {
  min-height: clamp(5.2rem, 10.5vh, 6.7rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo h3 {
  font-size: clamp(1.42rem, 1.92vw, 1.95rem) !important;
  line-height: 1.04 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo > p:not(.eyebrow) {
  display: block !important;
  overflow: visible !important;
  color: rgba(242, 238, 226, 0.82) !important;
  font-size: clamp(0.92rem, 1.08vw, 1.12rem) !important;
  line-height: 1.5 !important;
  -webkit-line-clamp: unset !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-detail-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin-top: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-detail-list span {
  display: block !important;
  overflow: visible !important;
  padding: clamp(0.58rem, 0.78vw, 0.76rem) clamp(0.68rem, 0.92vw, 0.9rem) !important;
  color: rgba(246, 239, 220, 0.86) !important;
  font-size: clamp(0.86rem, 0.98vw, 1.04rem) !important;
  line-height: 1.42 !important;
  -webkit-line-clamp: unset !important;
}

/* ai-generate-card-click-through-20260611-1: editor and inspiration cards are full-card actions. */
html[data-active-module="nav-generate"] button.generate-reference-card {
  appearance: none !important;
  -webkit-appearance: none !important;
  font: inherit !important;
  text-align: inherit !important;
  cursor: pointer !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-editor,
html[data-active-module="nav-generate"] .generate-reference-card-inspiration {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* note-atlas-standard-music-glyphs-20260611-1: use formal music glyphs instead of CSS-drawn note shapes. */
html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card-glyph.is-standard-music-glyph {
  display: inline-grid !important;
  place-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  color: rgba(255, 226, 178, 0.98) !important;
  font-family: "Bravura", "Noto Music", "Apple Symbols", "Segoe UI Symbol", "STIX Two Text", "DejaVu Sans", serif !important;
  font-size: clamp(2rem, 3vw, 3.1rem) !important;
  font-style: normal !important;
  font-variant-ligatures: none !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 0.92 !important;
  text-align: center !important;
  text-overflow: clip !important;
  text-shadow: 0 0.36rem 1.05rem rgba(232, 184, 111, 0.24) !important;
  transform: none !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card-glyph.is-standard-music-glyph {
  font-size: clamp(1.9rem, 2.45vw, 2.62rem) !important;
  line-height: 0.9 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card-glyph.is-standard-music-glyph.is-rest-glyph {
  font-size: clamp(1.72rem, 2.25vw, 2.42rem) !important;
}

/* note-atlas-dictionary-mobile-clean-20260612-1: simplify cards and make the selected symbol unmistakable. */
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card {
  grid-template-rows: minmax(2.45rem, 1fr) auto !important;
  justify-items: center !important;
  gap: clamp(0.14rem, 0.22vw, 0.24rem) !important;
  padding: clamp(0.44rem, 0.56vw, 0.6rem) clamp(0.42rem, 0.52vw, 0.56rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card.is-selected {
  border-color: rgba(var(--library-study-gold-soft), 0.78) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(var(--library-study-gold), 0.28), transparent 48%),
    linear-gradient(180deg, rgba(255, 231, 180, 0.16), rgba(50, 31, 10, 0.3)),
    rgba(12, 10, 7, 0.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 198, 0.22),
    0 0 0 1px rgba(var(--library-study-gold-soft), 0.18),
    0 0.85rem 1.9rem rgba(0, 0, 0, 0.38),
    0 0 1.15rem rgba(var(--library-study-gold), 0.2) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card.is-selected .knowledge-note-symbol-card-glyph {
  color: rgba(255, 238, 200, 1) !important;
  text-shadow:
    0 0.25rem 0.8rem rgba(var(--library-study-gold), 0.34),
    0 0 0.55rem rgba(255, 232, 184, 0.18) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card strong {
  color: rgba(255, 250, 238, 0.96) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.88rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  text-align: center !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card-glyph.is-standard-music-glyph {
  font-size: clamp(2.04rem, 2.72vw, 2.86rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card-glyph.is-standard-music-glyph.is-rest-glyph {
  font-size: clamp(1.86rem, 2.45vw, 2.62rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(0.36rem, 0.5vw, 0.54rem) !important;
  margin-top: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
  display: grid !important;
  grid-template-columns: minmax(4.2rem, 5.2rem) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(0.46rem, 0.64vw, 0.72rem) !important;
  padding: clamp(0.58rem, 0.74vw, 0.78rem) clamp(0.68rem, 0.88vw, 0.92rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail strong {
  color: rgba(var(--library-study-gold-soft), 0.94) !important;
  font-size: clamp(0.76rem, 0.86vw, 0.92rem) !important;
  font-weight: 900 !important;
  line-height: 1.24 !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  color: rgba(246, 240, 224, 0.88) !important;
  font-size: clamp(0.92rem, 1.04vw, 1.1rem) !important;
  font-style: normal !important;
  font-weight: 680 !important;
  line-height: 1.34 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card:nth-child(-n + 5) {
  border-color: rgba(var(--library-study-gold-soft), 0.3) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014)),
    rgba(9, 9, 8, 0.9) !important;
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
    grid-template-columns: 1fr !important;
    gap: 0.2rem !important;
  }
}

/* ai-generate-resilience-20260612-1: quota guard, completion sync guard, and small-screen fit. */
html[data-active-module="nav-generate"] .generate-reference-score-note {
  justify-content: space-between !important;
  gap: clamp(0.36rem, 0.5vw, 0.54rem) !important;
}

html[data-active-module="nav-generate"] .generate-reference-score-note span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-active-module="nav-generate"] .generate-reference-score-note.is-quota-warning {
  color: rgba(255, 170, 142, 0.94) !important;
  font-weight: 760 !important;
}

html[data-active-module="nav-generate"] .generate-quota-inline-action {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 auto !important;
  height: clamp(1.18rem, 1.36vw, 1.4rem) !important;
  padding: 0 clamp(0.46rem, 0.62vw, 0.66rem) !important;
  border: 1px solid rgba(255, 221, 151, 0.32) !important;
  border-radius: 999px !important;
  background: rgba(255, 214, 129, 0.1) !important;
  color: rgba(255, 231, 184, 0.94) !important;
  font: inherit !important;
  font-size: clamp(0.62rem, 0.7vw, 0.74rem) !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html[data-active-module="nav-generate"] .generate-complete-copy small {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 232, 188, 0.74) !important;
  font-size: clamp(0.56rem, 0.68vw, 0.72rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-complete-action:disabled,
html[data-active-module="nav-generate"] .generate-complete-action[disabled] {
  opacity: 0.58 !important;
  cursor: wait !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .generate-complete-toast {
    column-gap: clamp(0.34rem, 0.7vw, 0.52rem) !important;
    padding-inline: clamp(0.5rem, 1.2vw, 0.72rem) !important;
  }

  html[data-active-module="nav-generate"] .generate-complete-actions {
    gap: clamp(0.16rem, 0.42vw, 0.28rem) !important;
  }

  html[data-active-module="nav-generate"] .generate-complete-action {
    min-width: clamp(2.72rem, 7.4vw, 3.32rem) !important;
    height: clamp(1.36rem, 3.6vw, 1.66rem) !important;
    padding-inline: clamp(0.3rem, 0.78vw, 0.46rem) !important;
    font-size: clamp(0.56rem, 1.5vw, 0.68rem) !important;
  }

  html[data-active-module="nav-generate"] .generate-busy-progress {
    width: min(100%, 18.8rem) !important;
    padding: clamp(0.48rem, 1vw, 0.62rem) clamp(0.54rem, 1.18vw, 0.76rem) !important;
  }

  html[data-active-module="nav-generate"] .generate-busy-steps span {
    font-size: clamp(0.52rem, 1.45vw, 0.64rem) !important;
  }
}

@media (max-width: 520px) {
  html[data-active-module="nav-generate"] .generate-reference-score-note {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 0.22rem !important;
    font-size: clamp(0.66rem, 2.3vw, 0.76rem) !important;
    line-height: 1.22 !important;
  }

  html[data-active-module="nav-generate"] .generate-quota-inline-action {
    height: 1.26rem !important;
    font-size: 0.64rem !important;
  }

  html[data-active-module="nav-generate"] .generate-upload-clear-button {
    min-width: 2.58rem !important;
    height: 1.24rem !important;
    margin-top: 0.4rem !important;
    font-size: 0.62rem !important;
  }

  html[data-active-module="nav-generate"] .generate-complete-copy strong,
  html[data-active-module="nav-generate"] .generate-complete-copy small {
    display: none !important;
  }
}

/* note-atlas-short-label-icons-tail-20260612-1: final category icon and text clamp pass. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card > span {
  display: grid !important;
  width: clamp(2.12rem, 2.72vw, 2.72rem) !important;
  height: clamp(2.12rem, 2.72vw, 2.72rem) !important;
  place-items: center !important;
  border: 1px solid rgba(var(--library-study-gold-soft), 0.26) !important;
  border-radius: 0.52rem !important;
  background:
    radial-gradient(circle at 50% 26%, rgba(var(--library-study-gold), 0.22), transparent 58%),
    rgba(0, 0, 0, 0.22) !important;
  color: rgba(255, 230, 181, 0.98) !important;
  font-family: "Bravura", "Noto Music", "Apple Symbols", "Segoe UI Symbol", "STIX Two Text", "DejaVu Sans", serif !important;
  font-size: clamp(1.05rem, 1.46vw, 1.42rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: center !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card strong {
  font-size: clamp(0.9rem, 1.02vw, 1.08rem) !important;
  line-height: 1.08 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card p,
html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

/* score-editor-play-save-check-20260612-1: save state, score checks, full-fill action, and playback cursor. */
html[data-active-module="scoreEditor"] .score-fill-measure-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.42rem, 0.58vw, 0.58rem) !important;
}

html[data-active-module="scoreEditor"] .score-fill-measure-button.is-secondary {
  border-color: rgba(255, 230, 178, 0.2) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(14, 14, 13, 0.82) !important;
  color: rgba(245, 234, 210, 0.88) !important;
}

html[data-active-module="scoreEditor"] .score-paper-footer {
  grid-template-areas:
    "status actions"
    "check actions"
    "page actions" !important;
  align-items: start !important;
}

html[data-active-module="scoreEditor"] .score-save-status {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  padding: 0.24rem 0.52rem !important;
  border: 1px solid rgba(17, 17, 17, 0.12) !important;
  border-radius: 999px !important;
  color: rgba(17, 17, 17, 0.58) !important;
  background: rgba(255, 255, 255, 0.42) !important;
  font-size: clamp(0.66rem, 0.76vw, 0.78rem) !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

html[data-active-module="scoreEditor"] .score-save-status.is-saved {
  border-color: rgba(7, 116, 139, 0.18) !important;
  color: rgba(7, 100, 122, 0.94) !important;
  background: rgba(7, 116, 139, 0.08) !important;
}

html[data-active-module="scoreEditor"] .score-save-status.is-dirty {
  border-color: rgba(177, 111, 28, 0.24) !important;
  color: rgba(137, 82, 17, 0.96) !important;
  background: rgba(177, 111, 28, 0.1) !important;
}

html[data-active-module="scoreEditor"] .score-save-status.is-unsaved {
  border-color: rgba(116, 95, 55, 0.22) !important;
  color: rgba(86, 73, 50, 0.8) !important;
  background: rgba(116, 95, 55, 0.075) !important;
}

html[data-active-module="scoreEditor"] .score-editor-check-panel {
  grid-area: check !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: clamp(0.34rem, 0.46vw, 0.5rem) !important;
  max-width: min(100%, 48rem) !important;
  min-width: 0 !important;
}

html[data-active-module="scoreEditor"] .score-editor-check-panel button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.36rem !important;
  max-width: min(18rem, 100%) !important;
  min-height: 1.78rem !important;
  padding: 0.28rem 0.54rem !important;
  border: 1px solid rgba(17, 17, 17, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.36) !important;
  color: rgba(17, 17, 17, 0.68) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
  cursor: pointer !important;
}

html[data-active-module="scoreEditor"] .score-editor-check-panel button:hover,
html[data-active-module="scoreEditor"] .score-editor-check-panel button:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 0.34rem 0.72rem rgba(0, 0, 0, 0.12) !important;
}

html[data-active-module="scoreEditor"] .score-editor-check-panel b,
html[data-active-module="scoreEditor"] .score-editor-check-panel span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

html[data-active-module="scoreEditor"] .score-editor-check-panel b {
  flex: 0 0 auto !important;
  font-size: clamp(0.62rem, 0.72vw, 0.74rem) !important;
  font-weight: 900 !important;
}

html[data-active-module="scoreEditor"] .score-editor-check-panel span {
  font-size: clamp(0.68rem, 0.78vw, 0.82rem) !important;
  font-weight: 760 !important;
}

html[data-active-module="scoreEditor"] .score-editor-check-panel button.is-error {
  border-color: rgba(174, 54, 36, 0.24) !important;
  background: rgba(174, 54, 36, 0.075) !important;
  color: rgba(148, 44, 30, 0.96) !important;
}

html[data-active-module="scoreEditor"] .score-editor-check-panel button.is-warn {
  border-color: rgba(177, 111, 28, 0.22) !important;
  background: rgba(177, 111, 28, 0.08) !important;
  color: rgba(128, 77, 18, 0.96) !important;
}

html[data-active-module="scoreEditor"] .score-editor-check-more {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.78rem !important;
  color: rgba(17, 17, 17, 0.46) !important;
  font-size: clamp(0.66rem, 0.76vw, 0.8rem) !important;
  font-weight: 760 !important;
  white-space: nowrap !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-measure-hotspot.is-playing::before {
  content: "" !important;
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  top: 18% !important;
  bottom: 18% !important;
  border: 1px solid rgba(177, 111, 28, 0.24) !important;
  border-radius: 8px !important;
  background: rgba(177, 111, 28, 0.035) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
  pointer-events: none !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-playing::before,
html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-playing::after {
  content: "" !important;
  display: block !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-playing::before {
  position: absolute !important;
  left: 50% !important;
  top: 7% !important;
  bottom: 7% !important;
  width: 3px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: rgba(177, 111, 28, 0.94) !important;
  box-shadow: 0 0 0 4px rgba(177, 111, 28, 0.12), 0 0 1rem rgba(177, 111, 28, 0.22) !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-playing::after {
  position: absolute !important;
  inset: 18% 13% !important;
  border: 2px solid rgba(177, 111, 28, 0.9) !important;
  border-radius: 999px !important;
  background: rgba(177, 111, 28, 0.075) !important;
  box-shadow: 0 0 0 4px rgba(177, 111, 28, 0.1), 0 0 1rem rgba(177, 111, 28, 0.2) !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-note-hotspot.is-rest.is-playing::after {
  border-radius: 7px !important;
}

html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-vexflow-measure-hotspot.is-selected::before,
html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-vexflow-measure-hotspot.is-playing::before {
  content: "" !important;
  position: absolute !important;
  inset: 0.28rem 0.36rem !important;
  display: block !important;
  border: 2px solid rgba(142, 96, 230, 0.52) !important;
  border-radius: 8px !important;
  background: rgba(142, 96, 230, 0.045) !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-vexflow-measure-hotspot.is-playing::before {
  border-color: rgba(116, 219, 230, 0.72) !important;
  background: rgba(116, 219, 230, 0.07) !important;
}

html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-vexflow-note-hotspot.is-playing::before {
  width: 2px !important;
  background: rgba(116, 219, 230, 0.86) !important;
  box-shadow: none !important;
}

html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-vexflow-note-hotspot.is-playing::after,
html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-vexflow-note-hotspot.is-selected::after {
  content: "" !important;
  position: absolute !important;
  inset: 18% 12% !important;
  display: block !important;
  border: 2px solid rgba(142, 96, 230, 0.7) !important;
  border-radius: 999px !important;
  background: rgba(142, 96, 230, 0.075) !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html[data-active-module="scoreEditor"] .score-editor-page.is-inspiration-composer .score-vexflow-note-hotspot.is-playing::after {
  border-color: rgba(116, 219, 230, 0.88) !important;
  background: rgba(116, 219, 230, 0.1) !important;
}

@media (max-width: 920px) {
  html[data-active-module="scoreEditor"] .score-paper-footer {
    grid-template-areas:
      "status"
      "check"
      "page"
      "actions" !important;
  }

  html[data-active-module="scoreEditor"] .score-fill-measure-actions {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="scoreEditor"] .score-editor-check-panel button {
    max-width: 100% !important;
  }
}

/* note-atlas-final-quiet-home-tail-20260612-1: final winning rules for search, overview, and dictionary copy. */
html[data-active-module="violinKnowledge"] .knowledge-note-search-panel {
  gap: clamp(0.34rem, 0.48vw, 0.5rem) !important;
  padding: clamp(0.34rem, 0.48vw, 0.5rem) !important;
  border-color: rgba(255, 255, 255, 0.065) !important;
  background: rgba(6, 7, 8, 0.58) !important;
  box-shadow: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel input {
  min-height: 1.92rem !important;
  padding: 0 0.62rem !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  background: rgba(0, 0, 0, 0.24) !important;
  color: rgba(244, 239, 228, 0.86) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.82rem) !important;
  font-weight: 680 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel small {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-content: start !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-stats,
html[data-active-module="violinKnowledge"] .knowledge-note-overview-preview,
html[data-active-module="violinKnowledge"] .knowledge-note-learning-path {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts {
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: clamp(0.36rem, 0.5vw, 0.52rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts button {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 2.34rem !important;
  padding: 0 clamp(0.56rem, 0.76vw, 0.78rem) !important;
  border-radius: 0.5rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
  padding: clamp(0.54rem, 0.72vw, 0.72rem) clamp(0.62rem, 0.84vw, 0.84rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  font-size: clamp(0.82rem, 0.94vw, 1rem) !important;
  line-height: 1.34 !important;
}

/* note-atlas-image-audit-copy-20260612-1: fit plain-language and image-audit rows. */
html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail {
  gap: clamp(0.3rem, 0.46vw, 0.5rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
  grid-template-columns: minmax(4.2rem, 5.2rem) minmax(0, 1fr) !important;
  gap: clamp(0.38rem, 0.58vw, 0.64rem) !important;
  padding: clamp(0.46rem, 0.64vw, 0.66rem) clamp(0.58rem, 0.78vw, 0.8rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail strong {
  font-size: clamp(0.7rem, 0.8vw, 0.86rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  font-size: clamp(0.78rem, 0.9vw, 0.96rem) !important;
  line-height: 1.3 !important;
}

/* note-atlas-final-tooling-anchor-20260612-1: keep the latest note-atlas tooling after all previous overrides. */
html[data-active-module="violinKnowledge"] .knowledge-note-overview {
  grid-template-rows: auto auto auto auto !important;
  gap: clamp(0.58rem, 0.78vw, 0.82rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-recent {
  display: grid !important;
  gap: clamp(0.38rem, 0.54vw, 0.58rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-recent > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.36rem, 0.5vw, 0.52rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span:last-child {
  border-color: rgba(var(--library-study-gold-soft), 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 231, 180, 0.07), rgba(255, 231, 180, 0.025)),
    rgba(0, 0, 0, 0.18) !important;
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-note-recent > div {
    grid-template-columns: 1fr !important;
  }
}

/* feature-intro-final-tour-true-tail-20260612-1: last-word overrides for the guided practice tour. */
html[data-active-module="featureIntro"] .feature-tour-progress-track {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) !important;
  align-items: center !important;
  gap: clamp(0.28rem, 0.42vw, 0.48rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track .feature-tour-progress-group {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  gap: clamp(0.16rem, 0.24vw, 0.28rem) !important;
  min-width: 0 !important;
  padding: 0.16rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track .feature-tour-progress-group.is-active {
  background: rgba(var(--library-study-gold-soft), 0.12) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track .feature-tour-progress-group button {
  width: 100% !important;
  min-width: 0 !important;
  height: 0.28rem !important;
  border: 0 !important;
  border-radius: 999px !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track .feature-tour-progress-group button.is-complete {
  background: rgba(var(--library-study-gold-soft), 0.44) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track .feature-tour-progress-group button.is-active {
  background: linear-gradient(90deg, rgba(var(--library-study-gold-soft), 0.95), rgba(255, 244, 215, 0.42)) !important;
  box-shadow: 0 0 0.62rem rgba(var(--library-study-gold), 0.22) !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-route {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr) !important;
  align-items: center !important;
  gap: clamp(0.34rem, 0.48vw, 0.52rem) !important;
  min-width: 0 !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-route small,
html[data-active-module="featureIntro"] .feature-tour-next-route strong {
  overflow: hidden !important;
  min-width: 0 !important;
  line-height: 1.08 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-route small {
  color: rgba(236, 226, 207, 0.56) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.88rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-route b {
  display: grid !important;
  width: 1.35rem !important;
  height: 1.35rem !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(var(--library-study-gold-soft), 0.14) !important;
  color: rgba(255, 229, 177, 0.86) !important;
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-card.is-final {
  border-color: rgba(var(--library-study-gold-soft), 0.32) !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(var(--library-study-gold), 0.16), transparent 42%),
    linear-gradient(180deg, rgba(255, 231, 178, 0.07), rgba(255, 231, 178, 0.018)),
    rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="featureIntro"] .feature-tour-actions {
  margin-top: auto !important;
  padding-top: clamp(0.44rem, 0.62vw, 0.66rem) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="featureIntro"] .feature-tour-progress-track {
    grid-template-columns: 1fr !important;
  }
}

/* ai-generate-submit-countdown-quota-tail-20260612-1: keep countdown and remaining quota visible in the busy submit button. */
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: clamp(0.16rem, 0.28vw, 0.34rem) !important;
  padding-block: clamp(0.28rem, 0.46vw, 0.54rem) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > strong {
  display: block !important;
  font-size: clamp(0.96rem, 1.08vw, 1.16rem) !important;
  line-height: 1 !important;
}

html[data-active-module="nav-generate"] .generate-submit-busy-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 17.5rem) !important;
  min-width: 0 !important;
  gap: clamp(0.28rem, 0.46vw, 0.52rem) !important;
}

html[data-active-module="nav-generate"] .generate-submit-busy-meta b,
html[data-active-module="nav-generate"] .generate-submit-busy-meta em {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 238, 203, 0.92) !important;
  font-size: clamp(0.6rem, 0.72vw, 0.78rem) !important;
  font-style: normal !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-submit-busy-meta em {
  color: rgba(255, 229, 179, 0.78) !important;
  font-weight: 760 !important;
}

@media (max-width: 560px) {
  html[data-active-module="nav-generate"] .generate-submit-busy-meta {
    grid-template-columns: 1fr !important;
    gap: 0.16rem !important;
  }
}

/* note-atlas-direct-symbol-search-20260612-1: search can jump straight to matching symbols. */
html[data-active-module="violinKnowledge"] .knowledge-note-direct-panel {
  display: grid !important;
  gap: clamp(0.42rem, 0.6vw, 0.64rem) !important;
  padding: clamp(0.5rem, 0.72vw, 0.76rem) !important;
  border: 1px solid rgba(var(--library-study-gold-soft), 0.14) !important;
  border-radius: 0.62rem !important;
  background:
    linear-gradient(180deg, rgba(255, 231, 180, 0.055), rgba(255, 231, 180, 0.018)),
    rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-direct-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.6rem !important;
  min-width: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-direct-head strong {
  color: rgba(255, 246, 228, 0.96) !important;
  font-size: clamp(0.82rem, 0.94vw, 1rem) !important;
  font-weight: 920 !important;
  line-height: 1 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-direct-head span {
  color: rgba(248, 226, 184, 0.66) !important;
  font-size: clamp(0.66rem, 0.76vw, 0.8rem) !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-direct-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(0.38rem, 0.54vw, 0.58rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-direct-card {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid !important;
  grid-template-columns: clamp(2rem, 2.5vw, 2.42rem) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: clamp(3.05rem, 3.7vw, 3.6rem) !important;
  gap: 0.18rem 0.44rem !important;
  padding: clamp(0.42rem, 0.58vw, 0.62rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.54rem !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(248, 242, 229, 0.94) !important;
  cursor: pointer !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-direct-card:hover {
  border-color: rgba(var(--library-study-gold-soft), 0.32) !important;
  background: rgba(255, 231, 180, 0.085) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-direct-card .knowledge-note-symbol-card-glyph {
  grid-row: 1 / 3 !important;
  display: grid !important;
  width: clamp(2rem, 2.5vw, 2.42rem) !important;
  height: clamp(2rem, 2.5vw, 2.42rem) !important;
  place-items: center !important;
  border-radius: 0.44rem !important;
  background: rgba(0, 0, 0, 0.22) !important;
  color: rgba(255, 230, 181, 0.98) !important;
  font-size: clamp(1.05rem, 1.42vw, 1.46rem) !important;
  line-height: 1 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-direct-card strong,
html[data-active-module="violinKnowledge"] .knowledge-note-direct-card small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-direct-card strong {
  color: rgba(255, 250, 238, 0.96) !important;
  font-size: clamp(0.74rem, 0.86vw, 0.92rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-direct-card small {
  color: rgba(248, 226, 184, 0.64) !important;
  font-size: clamp(0.62rem, 0.72vw, 0.76rem) !important;
  font-weight: 740 !important;
  line-height: 1 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-direct-card mark {
  border-radius: 0.18rem !important;
  background: rgba(var(--library-study-gold-soft), 0.22) !important;
  color: rgba(255, 247, 226, 0.98) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="violinKnowledge"] .knowledge-note-direct-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="violinKnowledge"] .knowledge-note-direct-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* feature-intro-final-tour-20260612-1: sharper guided-tour focus, route card, and chapter progress. */
html[data-active-module="featureIntro"] .feature-player-preview-toolbar {
  position: absolute !important;
  top: clamp(0.54rem, 0.72vw, 0.78rem) !important;
  left: clamp(0.54rem, 0.72vw, 0.78rem) !important;
  z-index: 8 !important;
  display: flex !important;
  max-width: min(72%, 34rem) !important;
  align-items: center !important;
  gap: clamp(0.44rem, 0.6vw, 0.64rem) !important;
  min-height: 1.86rem !important;
  padding: 0 clamp(0.62rem, 0.82vw, 0.86rem) !important;
  border: 1px solid rgba(255, 228, 172, 0.22) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012)),
    rgba(6, 7, 8, 0.72) !important;
  box-shadow: 0 0.7rem 1.4rem rgba(0, 0, 0, 0.28) !important;
  pointer-events: none !important;
}

html[data-active-module="featureIntro"] .feature-player-preview-toolbar span,
html[data-active-module="featureIntro"] .feature-player-preview-toolbar strong {
  overflow: hidden !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="featureIntro"] .feature-player-preview-toolbar span {
  color: rgba(235, 223, 202, 0.68) !important;
  font-size: clamp(0.62rem, 0.72vw, 0.76rem) !important;
  font-weight: 760 !important;
}

html[data-active-module="featureIntro"] .feature-player-preview-toolbar strong {
  color: rgba(255, 242, 212, 0.96) !important;
  font-size: clamp(0.68rem, 0.8vw, 0.84rem) !important;
  font-weight: 920 !important;
}

html[data-active-module="featureIntro"] .feature-player-focus-outline {
  position: absolute !important;
  z-index: 7 !important;
  border: 1.5px solid rgba(255, 222, 155, 0.84) !important;
  border-radius: clamp(0.52rem, 0.72vw, 0.76rem) !important;
  background: rgba(255, 214, 130, 0.035) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 232, 0.18),
    0 0 0 999rem rgba(0, 0, 0, 0.12),
    0 0 1.15rem rgba(223, 166, 60, 0.28) !important;
  opacity: 0.95 !important;
  pointer-events: none !important;
  transform: translateZ(0) !important;
  transition:
    left 240ms ease,
    top 240ms ease,
    right 240ms ease,
    bottom 240ms ease,
    width 240ms ease,
    height 240ms ease,
    opacity 180ms ease !important;
}

html[data-active-module="featureIntro"] .feature-player-secondary-focus-outline {
  position: absolute !important;
  z-index: 9 !important;
  border: 1.5px solid rgba(255, 222, 155, 0.88) !important;
  border-radius: clamp(0.5rem, 0.68vw, 0.72rem) !important;
  background: rgba(255, 214, 130, 0.04) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 232, 0.2),
    inset 0 0 1.2rem rgba(255, 216, 142, 0.06),
    0 0 1rem rgba(223, 166, 60, 0.34) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateZ(0) !important;
  transition:
    left 240ms ease,
    top 240ms ease,
    width 240ms ease,
    height 240ms ease,
    opacity 180ms ease !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="overview"] .feature-player-focus-outline {
  opacity: 0 !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="waterfall"] .feature-player-focus-outline {
  left: 0.6% !important;
  top: 1.8% !important;
  width: 30.4% !important;
  height: 96.2% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="judgement"] .feature-player-focus-outline {
  left: 0.7% !important;
  bottom: 9.5% !important;
  width: 30.2% !important;
  height: 14.8% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="fingerboard"] .feature-player-focus-outline {
  left: 38.2% !important;
  top: 20% !important;
  width: 29.8% !important;
  height: 72% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="score"] .feature-player-focus-outline {
  left: 38% !important;
  top: 1.5% !important;
  width: 60% !important;
  height: 25.5% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="controls"] .feature-player-focus-outline {
  left: 75.3% !important;
  top: 49.3% !important;
  width: 15% !important;
  height: 7.7% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="intonation"] .feature-player-focus-outline {
  right: 2.2% !important;
  top: 34.6% !important;
  width: 28.4% !important;
  height: 28.6% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="position"] .feature-player-focus-outline {
  left: 41.6% !important;
  top: 32.5% !important;
  width: 27.2% !important;
  height: 44% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="bowing"] .feature-player-focus-outline,
html[data-active-module="featureIntro"] .feature-player-preview[data-focus="ai"] .feature-player-focus-outline {
  right: 2.2% !important;
  bottom: 2.4% !important;
  width: 28.4% !important;
  height: 22.6% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="loop"] .feature-player-focus-outline {
  left: 88.9% !important;
  top: 50.8% !important;
  width: 9.4% !important;
  height: 7.7% !important;
}

html[data-active-module="featureIntro"] .feature-demo-focus-label.feature-player-preview-label {
  z-index: 9 !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button.is-complete {
  border-color: rgba(var(--library-study-gold-soft), 0.2) !important;
  background:
    linear-gradient(180deg, rgba(255, 231, 178, 0.08), rgba(255, 231, 178, 0.016)),
    rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button.is-complete span {
  color: rgba(255, 229, 177, 0.78) !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-card {
  gap: clamp(0.28rem, 0.42vw, 0.46rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-card.is-final {
  border-color: rgba(var(--library-study-gold-soft), 0.32) !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(var(--library-study-gold), 0.16), transparent 42%),
    linear-gradient(180deg, rgba(255, 231, 178, 0.07), rgba(255, 231, 178, 0.018)),
    rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-route {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr) !important;
  align-items: center !important;
  gap: clamp(0.34rem, 0.48vw, 0.52rem) !important;
  min-width: 0 !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-route small,
html[data-active-module="featureIntro"] .feature-tour-next-route strong {
  overflow: hidden !important;
  min-width: 0 !important;
  line-height: 1.08 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-route small {
  color: rgba(236, 226, 207, 0.56) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.88rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-route b {
  display: grid !important;
  width: 1.35rem !important;
  height: 1.35rem !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(var(--library-study-gold-soft), 0.14) !important;
  color: rgba(255, 229, 177, 0.86) !important;
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html[data-active-module="featureIntro"] .feature-tour-actions {
  margin-top: auto !important;
  padding-top: clamp(0.44rem, 0.62vw, 0.66rem) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html[data-active-module="featureIntro"] .feature-tour-actions .feature-tour-experience {
  min-height: 2.24rem !important;
  font-size: clamp(0.76rem, 0.86vw, 0.9rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) !important;
  align-items: center !important;
  gap: clamp(0.28rem, 0.42vw, 0.48rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-group {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(0.16rem, 0.24vw, 0.28rem) !important;
  min-width: 0 !important;
  padding: 0.16rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-group.is-active {
  background: rgba(var(--library-study-gold-soft), 0.12) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track .feature-tour-progress-group button {
  width: 100% !important;
  min-width: 0 !important;
  height: 0.28rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track .feature-tour-progress-group button.is-complete {
  background: rgba(var(--library-study-gold-soft), 0.44) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track .feature-tour-progress-group button.is-active {
  background: linear-gradient(90deg, rgba(var(--library-study-gold-soft), 0.95), rgba(255, 244, 215, 0.42)) !important;
  box-shadow: 0 0 0.62rem rgba(var(--library-study-gold), 0.22) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="featureIntro"] .feature-player-preview-toolbar {
    max-width: calc(100% - 1.2rem) !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-progress-track {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  html[data-active-module="featureIntro"] .feature-player-preview-toolbar {
    top: 0.44rem !important;
    left: 0.44rem !important;
    min-height: 1.66rem !important;
    padding-inline: 0.54rem !important;
  }

  html[data-active-module="featureIntro"] .feature-player-preview-toolbar span {
    display: none !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-next-route {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  }
}

/* note-atlas-final-tooling-20260612-1: recent notes, clear filter, breadcrumb, and mistake hints. */
html[data-active-module="violinKnowledge"] .knowledge-note-search-panel > div {
  grid-template-columns: auto auto !important;
  align-content: center !important;
  justify-content: end !important;
  gap: clamp(0.28rem, 0.4vw, 0.44rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-clear-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 2.9rem !important;
  height: 1.72rem !important;
  padding: 0 0.58rem !important;
  border: 1px solid rgba(var(--library-study-gold-soft), 0.24) !important;
  border-radius: 999px !important;
  background: rgba(255, 231, 180, 0.08) !important;
  color: rgba(255, 232, 188, 0.9) !important;
  font-size: 0.68rem !important;
  font-weight: 860 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-clear-button:hover {
  border-color: rgba(var(--library-study-gold-soft), 0.38) !important;
  background: rgba(255, 231, 180, 0.12) !important;
  color: rgba(255, 246, 225, 0.98) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview {
  grid-template-rows: auto auto auto auto !important;
  gap: clamp(0.58rem, 0.78vw, 0.82rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-recent {
  display: grid !important;
  gap: clamp(0.38rem, 0.54vw, 0.58rem) !important;
  padding-top: clamp(0.18rem, 0.28vw, 0.32rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-recent > strong {
  color: rgba(var(--library-study-gold-soft), 0.9) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.82rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-recent > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.36rem, 0.5vw, 0.52rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-recent button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid !important;
  grid-template-columns: 2rem minmax(0, 1fr) !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 2.34rem !important;
  gap: 0.42rem !important;
  padding: 0 0.52rem !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 0.5rem !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(246, 240, 226, 0.92) !important;
  cursor: pointer !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-recent button:hover {
  border-color: rgba(var(--library-study-gold-soft), 0.28) !important;
  background: rgba(255, 231, 180, 0.08) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-recent span {
  display: grid !important;
  width: 2rem !important;
  height: 1.82rem !important;
  place-items: center !important;
  border-radius: 0.42rem !important;
  background: rgba(0, 0, 0, 0.22) !important;
  color: rgba(255, 232, 188, 0.94) !important;
  font-family: "Bravura", "Noto Music", "Apple Symbols", "Segoe UI Symbol", "STIX Two Text", "DejaVu Sans", serif !important;
  font-size: 1.02rem !important;
  line-height: 1 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-recent small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(248, 242, 229, 0.88) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.82rem) !important;
  font-weight: 820 !important;
  line-height: 1.1 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 0.36rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(250, 232, 188, 0.66) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.82rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-breadcrumb button {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(var(--library-study-gold-soft), 0.9) !important;
  font: inherit !important;
  cursor: pointer !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-breadcrumb span,
html[data-active-module="violinKnowledge"] .knowledge-note-breadcrumb em {
  min-width: 0 !important;
  overflow: hidden !important;
  font-style: normal !important;
  text-overflow: ellipsis !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-breadcrumb span::before,
html[data-active-module="violinKnowledge"] .knowledge-note-breadcrumb em::before {
  content: "/" !important;
  margin-right: 0.36rem !important;
  color: rgba(255, 255, 255, 0.28) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span:last-child {
  border-color: rgba(var(--library-study-gold-soft), 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 231, 180, 0.07), rgba(255, 231, 180, 0.025)),
    rgba(0, 0, 0, 0.18) !important;
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-note-recent > div {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-breadcrumb {
    max-width: 100% !important;
  }
}

/* ai-generate-resilience-final-20260612-1: final winning layer for generate quota/sync/mobile guards. */
html[data-active-module="nav-generate"] .generate-reference-score-note {
  justify-content: space-between !important;
  gap: clamp(0.36rem, 0.5vw, 0.54rem) !important;
}

html[data-active-module="nav-generate"] .generate-reference-score-note span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-active-module="nav-generate"] .generate-reference-score-note.is-quota-warning {
  color: rgba(255, 170, 142, 0.94) !important;
  font-weight: 760 !important;
}

html[data-active-module="nav-generate"] .generate-quota-inline-action {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 auto !important;
  height: clamp(1.18rem, 1.36vw, 1.4rem) !important;
  padding: 0 clamp(0.46rem, 0.62vw, 0.66rem) !important;
  border: 1px solid rgba(255, 221, 151, 0.32) !important;
  border-radius: 999px !important;
  background: rgba(255, 214, 129, 0.1) !important;
  color: rgba(255, 231, 184, 0.94) !important;
  font: inherit !important;
  font-size: clamp(0.62rem, 0.7vw, 0.74rem) !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html[data-active-module="nav-generate"] .generate-complete-copy small {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 232, 188, 0.74) !important;
  font-size: clamp(0.56rem, 0.68vw, 0.72rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-complete-action:disabled,
html[data-active-module="nav-generate"] .generate-complete-action[disabled] {
  opacity: 0.58 !important;
  cursor: wait !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .generate-complete-action {
    min-width: clamp(2.72rem, 7.4vw, 3.32rem) !important;
    height: clamp(1.36rem, 3.6vw, 1.66rem) !important;
    padding-inline: clamp(0.3rem, 0.78vw, 0.46rem) !important;
    font-size: clamp(0.56rem, 1.5vw, 0.68rem) !important;
  }

  html[data-active-module="nav-generate"] .generate-busy-progress {
    width: min(100%, 18.8rem) !important;
    padding: clamp(0.48rem, 1vw, 0.62rem) clamp(0.54rem, 1.18vw, 0.76rem) !important;
  }
}

@media (max-width: 520px) {
  html[data-active-module="nav-generate"] .generate-reference-score-note {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 0.22rem !important;
    font-size: clamp(0.66rem, 2.3vw, 0.76rem) !important;
    line-height: 1.22 !important;
  }

  html[data-active-module="nav-generate"] .generate-complete-copy strong,
  html[data-active-module="nav-generate"] .generate-complete-copy small {
    display: none !important;
  }
}

/* note-atlas-final-simplify-overview-20260612-1: keep the atlas homepage quiet and phone-first. */
html[data-active-module="violinKnowledge"] .knowledge-note-search-panel {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: clamp(0.34rem, 0.48vw, 0.5rem) !important;
  padding: clamp(0.34rem, 0.48vw, 0.5rem) !important;
  border-color: rgba(255, 255, 255, 0.065) !important;
  background: rgba(6, 7, 8, 0.58) !important;
  box-shadow: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel label {
  gap: 0.16rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel label span {
  color: rgba(226, 218, 200, 0.58) !important;
  font-size: clamp(0.54rem, 0.62vw, 0.66rem) !important;
  font-weight: 760 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel input {
  min-height: 1.92rem !important;
  padding: 0 0.62rem !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  background: rgba(0, 0, 0, 0.24) !important;
  color: rgba(244, 239, 228, 0.86) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.82rem) !important;
  font-weight: 680 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel > div {
  min-width: 4.1rem !important;
  opacity: 0.72 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel > div strong {
  font-size: clamp(0.76rem, 0.88vw, 0.92rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel small {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-content: start !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-head {
  grid-template-columns: 2.42rem minmax(0, 1fr) !important;
  min-height: 2.55rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-icon {
  width: 2.42rem !important;
  height: 2.42rem !important;
  font-size: 1.18rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-copy {
  color: rgba(232, 226, 210, 0.66) !important;
  font-size: clamp(0.7rem, 0.8vw, 0.82rem) !important;
  line-height: 1.38 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-stats,
html[data-active-module="violinKnowledge"] .knowledge-note-overview-preview,
html[data-active-module="violinKnowledge"] .knowledge-note-learning-path {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts {
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: clamp(0.36rem, 0.5vw, 0.52rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts button {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 2.34rem !important;
  padding: 0 clamp(0.56rem, 0.76vw, 0.78rem) !important;
  border-radius: 0.5rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
  padding: clamp(0.54rem, 0.72vw, 0.72rem) clamp(0.62rem, 0.84vw, 0.84rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  font-size: clamp(0.82rem, 0.94vw, 1rem) !important;
  line-height: 1.34 !important;
}

/* feature-intro-path-upgrade-20260612-1: grouped steps, focus overlay, clearer
   next action, and a compact teaching summary. */
html[data-active-module="featureIntro"] .feature-tour-nav-list {
  align-content: stretch !important;
  gap: clamp(0.46rem, 0.6vw, 0.66rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-group {
  display: grid !important;
  gap: clamp(0.22rem, 0.32vw, 0.34rem) !important;
  min-width: 0 !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-group-title {
  display: grid !important;
  gap: 0.08rem !important;
  padding: 0.08rem 0.28rem 0.02rem !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-group-title span {
  color: rgba(var(--library-study-gold-soft), 0.9) !important;
  font-size: clamp(0.62rem, 0.72vw, 0.76rem) !important;
  font-weight: 920 !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-group-title small {
  overflow: hidden !important;
  color: rgba(229, 222, 208, 0.52) !important;
  font-size: clamp(0.58rem, 0.66vw, 0.7rem) !important;
  font-weight: 560 !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-group + .feature-tour-nav-group {
  padding-top: clamp(0.1rem, 0.2vw, 0.18rem) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.055) !important;
}

html[data-active-module="featureIntro"] .feature-tour-stage-shell {
  position: relative !important;
  isolation: isolate !important;
}

html[data-active-module="featureIntro"] .feature-player-preview::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  opacity: 0.76 !important;
  transition: opacity 180ms ease, background 180ms ease !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="overview"] .feature-player-preview::before {
  opacity: 0 !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="waterfall"] .feature-player-preview::before,
html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="judgement"] .feature-player-preview::before {
  background:
    linear-gradient(90deg, transparent 0 31%, rgba(0, 0, 0, 0.48) 39% 100%),
    radial-gradient(ellipse at 20% 49%, rgba(255, 219, 150, 0.12), transparent 34%) !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="fingerboard"] .feature-player-preview::before,
html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="position"] .feature-player-preview::before {
  background:
    radial-gradient(ellipse at 55% 52%, transparent 0 29%, rgba(0, 0, 0, 0.42) 43% 100%),
    radial-gradient(ellipse at 55% 52%, rgba(255, 219, 150, 0.11), transparent 32%) !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="score"] .feature-player-preview::before {
  background:
    linear-gradient(180deg, transparent 0 23%, rgba(0, 0, 0, 0.46) 36% 100%),
    radial-gradient(ellipse at 68% 15%, rgba(255, 219, 150, 0.14), transparent 32%) !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="controls"] .feature-player-preview::before,
html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="intonation"] .feature-player-preview::before {
  background:
    radial-gradient(ellipse at 84% 58%, transparent 0 25%, rgba(0, 0, 0, 0.44) 42% 100%),
    radial-gradient(ellipse at 84% 58%, rgba(255, 219, 150, 0.12), transparent 30%) !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="bowing"] .feature-player-preview::before,
html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="ai"] .feature-player-preview::before {
  background:
    radial-gradient(ellipse at 84% 84%, transparent 0 22%, rgba(0, 0, 0, 0.45) 40% 100%),
    radial-gradient(ellipse at 84% 84%, rgba(255, 219, 150, 0.13), transparent 30%) !important;
}

html[data-active-module="featureIntro"] .feature-tour-status-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.38rem, 0.52vw, 0.56rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-status-grid article,
html[data-active-module="featureIntro"] .feature-tour-next-card {
  display: grid !important;
  gap: 0.18rem !important;
  min-width: 0 !important;
  padding: clamp(0.46rem, 0.62vw, 0.66rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 0.58rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.005)),
    rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="featureIntro"] .feature-tour-status-grid span,
html[data-active-module="featureIntro"] .feature-tour-next-card span {
  color: rgba(var(--library-study-gold-soft), 0.84) !important;
  font-size: clamp(0.58rem, 0.66vw, 0.7rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
}

html[data-active-module="featureIntro"] .feature-tour-status-grid strong {
  overflow: hidden !important;
  color: rgba(255, 246, 226, 0.95) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.94rem) !important;
  font-weight: 880 !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-card {
  border-color: rgba(var(--library-study-gold-soft), 0.18) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--library-study-gold), 0.11), transparent 42%),
    rgba(255, 255, 255, 0.018) !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-card strong {
  color: rgba(255, 246, 226, 0.96) !important;
  font-size: clamp(0.9rem, 1.02vw, 1.08rem) !important;
  font-weight: 920 !important;
  line-height: 1.12 !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-card em {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: rgba(232, 224, 208, 0.62) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.82rem) !important;
  font-style: normal !important;
  line-height: 1.32 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html[data-active-module="featureIntro"] .feature-tour-actions .feature-tour-experience {
  border-color: rgba(var(--library-study-gold-soft), 0.64) !important;
  background:
    linear-gradient(180deg, rgba(232, 197, 126, 0.94), rgba(168, 112, 35, 0.96)) !important;
  color: rgba(20, 14, 6, 0.98) !important;
  font-weight: 960 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.38),
    0 0.65rem 1.28rem rgba(168, 112, 35, 0.16) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="featureIntro"] .feature-tour-nav-group {
    min-width: min(18rem, 78vw) !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-status-grid {
    grid-template-columns: 1fr !important;
  }
}

/* note-atlas-short-label-icons-final-20260612-1: keep category cards icon-led after all later overrides. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card > span {
  display: grid !important;
  width: clamp(2.12rem, 2.72vw, 2.72rem) !important;
  height: clamp(2.12rem, 2.72vw, 2.72rem) !important;
  place-items: center !important;
  border: 1px solid rgba(var(--library-study-gold-soft), 0.26) !important;
  border-radius: 0.52rem !important;
  background:
    radial-gradient(circle at 50% 26%, rgba(var(--library-study-gold), 0.22), transparent 58%),
    rgba(0, 0, 0, 0.22) !important;
  color: rgba(255, 230, 181, 0.98) !important;
  font-family: "Bravura", "Noto Music", "Apple Symbols", "Segoe UI Symbol", "STIX Two Text", "DejaVu Sans", serif !important;
  font-size: clamp(1.05rem, 1.46vw, 1.42rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: center !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card strong {
  font-size: clamp(0.9rem, 1.02vw, 1.08rem) !important;
  line-height: 1.08 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card p,
html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

/* note-atlas-short-label-icons-20260612-1: make category browsing more visual and compact on phones. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card > span {
  display: grid !important;
  width: clamp(2.12rem, 2.72vw, 2.72rem) !important;
  height: clamp(2.12rem, 2.72vw, 2.72rem) !important;
  place-items: center !important;
  border: 1px solid rgba(var(--library-study-gold-soft), 0.26) !important;
  border-radius: 0.52rem !important;
  background:
    radial-gradient(circle at 50% 26%, rgba(var(--library-study-gold), 0.22), transparent 58%),
    rgba(0, 0, 0, 0.22) !important;
  color: rgba(255, 230, 181, 0.98) !important;
  font-family: "Bravura", "Noto Music", "Apple Symbols", "Segoe UI Symbol", "STIX Two Text", "DejaVu Sans", serif !important;
  font-size: clamp(1.05rem, 1.46vw, 1.42rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: center !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card strong {
  font-size: clamp(0.9rem, 1.02vw, 1.08rem) !important;
  line-height: 1.08 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card p {
  display: -webkit-box !important;
  overflow: hidden !important;
  line-height: 1.34 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-path-strip button,
html[data-active-module="violinKnowledge"] .knowledge-note-learning-path button em,
html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts strong {
  letter-spacing: 0 !important;
}

/* score-editor-insert-plan-20260612-1: precise click insertion, empty-measure affordance, and clearer capacity preview. */
html[data-active-module="scoreEditor"] .score-vexflow-measure-hotspot.is-empty::before {
  content: "" !important;
  position: absolute !important;
  left: 12% !important;
  right: 12% !important;
  top: 34% !important;
  height: 32% !important;
  border: 1px dashed rgba(7, 116, 139, 0.24) !important;
  border-radius: 7px !important;
  background: rgba(7, 116, 139, 0.035) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 120ms ease, border-color 120ms ease, background 120ms ease !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-measure-hotspot.is-empty:hover::before,
html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-note .score-vexflow-measure-hotspot.is-empty::before,
html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-rest .score-vexflow-measure-hotspot.is-empty::before {
  opacity: 1 !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-hit-layer.is-tool-rest .score-vexflow-measure-hotspot.is-empty::before {
  border-color: rgba(177, 111, 28, 0.28) !important;
  background: rgba(177, 111, 28, 0.04) !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-measure-hotspot.is-full:hover::before,
html[data-active-module="scoreEditor"] .score-vexflow-measure-hotspot.is-over:hover::before {
  border-color: rgba(184, 60, 47, 0.3) !important;
  background: rgba(184, 60, 47, 0.045) !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-drop-preview {
  will-change: left, top, opacity !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-drop-preview.is-invalid b {
  border-color: rgba(184, 60, 47, 0.82) !important;
  color: #b83c2f !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-drop-preview.is-invalid em {
  color: #b83c2f !important;
  font-weight: 860 !important;
}

/* feature-intro-product-polish-20260612-1: final pass for the guide page. */
html[data-active-module="featureIntro"] .content-grid[data-module="featureIntro"] {
  padding-top: clamp(0.42rem, 0.62vw, 0.68rem) !important;
  padding-bottom: clamp(0.48rem, 0.7vw, 0.76rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour {
  grid-template-columns:
    clamp(15.25rem, 15.7vw, 17rem)
    minmax(0, 1fr)
    clamp(18.8rem, 18.6vw, 20.4rem) !important;
  grid-template-rows: minmax(0, 1fr) clamp(2.32rem, 4.6vh, 2.72rem) !important;
  gap: clamp(0.64rem, 0.82vw, 0.9rem) !important;
  padding: clamp(0.58rem, 0.74vw, 0.8rem) !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
  background:
    radial-gradient(ellipse at 48% 0%, rgba(var(--library-study-gold), 0.045), transparent 34%),
    radial-gradient(ellipse at 77% 18%, rgba(255, 255, 255, 0.02), transparent 30%),
    linear-gradient(180deg, rgba(7, 8, 9, 0.95), rgba(0, 0, 0, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.026),
    0 0.75rem 1.8rem rgba(0, 0, 0, 0.28) !important;
}

html[data-active-module="featureIntro"] .feature-tour::before {
  opacity: 0.1 !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav,
html[data-active-module="featureIntro"] .feature-tour-stage-shell,
html[data-active-module="featureIntro"] .feature-tour-copy,
html[data-active-module="featureIntro"] .feature-tour-progress {
  border-color: rgba(255, 255, 255, 0.07) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav {
  gap: clamp(0.42rem, 0.56vw, 0.58rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-brand {
  padding: clamp(0.56rem, 0.72vw, 0.76rem) !important;
  border-radius: 0.66rem !important;
  background:
    radial-gradient(circle at 95% 0%, rgba(var(--library-study-gold), 0.11), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.004)),
    rgba(5, 5, 5, 0.72) !important;
}

html[data-active-module="featureIntro"] .feature-tour-brand .eyebrow {
  color: rgba(var(--library-study-gold-soft), 0.88) !important;
}

html[data-active-module="featureIntro"] .feature-tour-brand strong {
  color: rgba(255, 248, 232, 0.96) !important;
  font-size: clamp(1.02rem, 1.12vw, 1.18rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-brand small {
  color: rgba(224, 217, 204, 0.62) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list {
  gap: clamp(0.3rem, 0.42vw, 0.44rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button {
  min-height: clamp(2.3rem, 4.1vh, 2.74rem) !important;
  padding: 0.32rem 0.48rem !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.004)),
    rgba(2, 3, 4, 0.76) !important;
  color: rgba(235, 228, 214, 0.72) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button:not(.is-active) {
  opacity: 0.78 !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button.is-active {
  opacity: 1 !important;
  border-color: rgba(var(--library-study-gold-soft), 0.56) !important;
  background:
    linear-gradient(90deg, rgba(128, 83, 22, 0.64), rgba(38, 24, 8, 0.88)),
    rgba(8, 6, 3, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 196, 0.15),
    0 0.5rem 1rem rgba(0, 0, 0, 0.24),
    0 0 0.75rem rgba(var(--library-study-gold), 0.09) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button:hover {
  opacity: 1 !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list span {
  width: 1.58rem !important;
  border-color: rgba(var(--library-study-gold-soft), 0.3) !important;
  color: rgba(255, 229, 180, 0.88) !important;
  background: rgba(255, 235, 190, 0.03) !important;
}

html[data-active-module="featureIntro"] .feature-tour-stage-shell {
  align-self: center !important;
  border-radius: 0.82rem !important;
  border-color: rgba(255, 225, 166, 0.14) !important;
  background: rgba(0, 0, 0, 0.74) !important;
  box-shadow:
    0 0 0 1px rgba(255, 225, 166, 0.035),
    0 0.8rem 1.8rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="featureIntro"] .feature-player-preview::after {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    inset 0 -3rem 4rem rgba(0, 0, 0, 0.2) !important;
}

html[data-active-module="featureIntro"] .feature-player-preview-label {
  padding: 0.48rem 0.6rem !important;
  border-color: rgba(var(--library-study-gold-soft), 0.18) !important;
  background: rgba(3, 4, 5, 0.76) !important;
  box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy {
  position: relative !important;
  align-self: start !important;
  gap: clamp(0.48rem, 0.62vw, 0.68rem) !important;
  height: auto !important;
  max-height: calc(100% - 0.2rem) !important;
  overflow: visible !important;
  padding: clamp(0.78rem, 0.98vw, 1rem) !important;
  border-radius: 0.76rem !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--library-study-gold), 0.095), transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.004)),
    rgba(2, 3, 4, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 0.7rem 1.45rem rgba(0, 0, 0, 0.23) !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy::after {
  content: "" !important;
  position: absolute !important;
  left: 0.84rem !important;
  right: 0.84rem !important;
  bottom: -0.8rem !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(var(--library-study-gold-soft), 0.2), transparent) !important;
  pointer-events: none !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy h3 {
  font-size: clamp(1.42rem, 1.7vw, 1.88rem) !important;
  line-height: 1.05 !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy > p:not(.eyebrow) {
  color: rgba(230, 223, 210, 0.74) !important;
  font-size: clamp(0.8rem, 0.88vw, 0.93rem) !important;
  line-height: 1.45 !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy ul {
  gap: 0.34rem !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy li {
  color: rgba(230, 223, 210, 0.68) !important;
  font-size: clamp(0.72rem, 0.78vw, 0.82rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy li::before {
  top: 0.48rem !important;
  width: 0.28rem !important;
  background: rgba(var(--library-study-gold-soft), 0.78) !important;
}

html[data-active-module="featureIntro"] .feature-tour-tip {
  padding: 0.54rem 0.64rem !important;
  border-color: rgba(var(--library-study-gold-soft), 0.16) !important;
  background:
    linear-gradient(180deg, rgba(var(--library-study-gold), 0.06), rgba(0, 0, 0, 0.06)),
    rgba(255, 255, 255, 0.02) !important;
}

html[data-active-module="featureIntro"] .feature-tour-actions {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  gap: 0.42rem !important;
}

html[data-active-module="featureIntro"] .feature-tour-actions .glass-button {
  min-height: 2.02rem !important;
  padding: 0.35rem 0.56rem !important;
  font-size: 0.72rem !important;
}

html[data-active-module="featureIntro"] .feature-tour-actions .glass-button:last-child {
  grid-column: 1 / -1 !important;
  min-height: 2rem !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress {
  min-height: 2.32rem !important;
  padding: 0.32rem 0.52rem !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  background: rgba(0, 0, 0, 0.62) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress > span,
html[data-active-module="featureIntro"] .feature-tour-progress > button {
  font-size: 0.7rem !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track button {
  height: 0.24rem !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track button.is-active {
  background: linear-gradient(90deg, rgba(var(--library-study-gold-soft), 0.86), rgba(255, 239, 198, 0.35)) !important;
}

@media (min-width: 1181px) and (max-height: 820px) {
  html[data-active-module="featureIntro"] .feature-tour-brand {
    padding-block: 0.52rem !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-nav-list button {
    min-height: clamp(2.06rem, 3.8vh, 2.52rem) !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-copy {
    gap: 0.42rem !important;
    padding: 0.78rem !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-copy h3 {
    font-size: clamp(1.3rem, 1.55vw, 1.66rem) !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-tip {
    padding: 0.46rem 0.58rem !important;
  }
}

@media (max-width: 1180px) {
  html[data-active-module="featureIntro"] .feature-tour {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-copy {
    align-self: stretch !important;
    max-height: none !important;
  }
}

/* feature-intro-native-player-ratio-20260611-1: keep the learning-tools
   preview as the same 16:9 player surface users see when opening practice. */
html[data-active-module="featureIntro"] .feature-tour-stage-shell {
  align-self: center !important;
  display: grid !important;
  width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  place-items: stretch !important;
}

html[data-active-module="featureIntro"] .feature-player-preview {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 9 !important;
}

html[data-active-module="featureIntro"] .feature-player-iframe {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* note-atlas-search-path-overview-20260611-1: searchable category entry with beginner path and richer preview. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-atlas {
  grid-template-columns: minmax(44rem, 1fr) minmax(17.2rem, 19.5rem) !important;
  gap: clamp(0.62rem, 0.86vw, 0.9rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-category-index-panel {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: clamp(0.46rem, 0.62vw, 0.66rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(0.5rem, 0.7vw, 0.76rem) !important;
  padding: clamp(0.5rem, 0.7vw, 0.72rem) !important;
  border: 1px solid rgba(var(--library-study-line), 0.12) !important;
  border-radius: 0.55rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.016)),
    rgba(11, 12, 12, 0.82) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel label {
  display: grid !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel label span,
html[data-active-module="violinKnowledge"] .knowledge-note-search-panel small,
html[data-active-module="violinKnowledge"] .knowledge-note-overview-preview small {
  color: rgba(var(--library-study-gold-soft), 0.9) !important;
  font-size: clamp(0.58rem, 0.66vw, 0.7rem) !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel input {
  width: 100% !important;
  min-height: 2.22rem !important;
  min-width: 0 !important;
  padding: 0 0.78rem !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 0.45rem !important;
  outline: none !important;
  background: rgba(0, 0, 0, 0.32) !important;
  color: rgba(255, 252, 244, 0.96) !important;
  font: inherit !important;
  font-size: clamp(0.75rem, 0.84vw, 0.88rem) !important;
  font-weight: 760 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel input:focus {
  border-color: rgba(var(--library-study-gold-soft), 0.48) !important;
  box-shadow: 0 0 0 2px rgba(var(--library-study-gold), 0.12) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel > div {
  display: grid !important;
  justify-items: end !important;
  gap: 0.16rem !important;
  min-width: 5.2rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel > div strong {
  color: rgba(255, 250, 238, 0.96) !important;
  font-size: clamp(0.9rem, 1vw, 1.05rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-filter-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.4rem !important;
  min-width: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-filter-strip button {
  min-width: 0 !important;
  min-height: 1.9rem !important;
  padding: 0 0.52rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(var(--library-study-line), 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.032) !important;
  color: rgba(238, 232, 218, 0.78) !important;
  font: inherit !important;
  font-size: clamp(0.6rem, 0.7vw, 0.74rem) !important;
  font-weight: 820 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-filter-strip button:hover,
html[data-active-module="violinKnowledge"] .knowledge-note-filter-strip button.is-active {
  border-color: rgba(var(--library-study-gold-soft), 0.48) !important;
  background:
    linear-gradient(180deg, rgba(var(--library-study-gold), 0.18), rgba(0, 0, 0, 0.16)),
    rgba(12, 10, 7, 0.72) !important;
  color: rgba(255, 236, 198, 0.96) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-path-strip {
  display: flex !important;
  gap: 0.4rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-path-strip button,
html[data-active-module="violinKnowledge"] .knowledge-note-overview-preview button,
html[data-active-module="violinKnowledge"] .knowledge-note-learning-path button {
  min-width: 0 !important;
  border: 1px solid rgba(var(--library-study-line), 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(255, 238, 204, 0.92) !important;
  font: inherit !important;
  font-size: clamp(0.62rem, 0.72vw, 0.76rem) !important;
  font-weight: 820 !important;
  cursor: pointer !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-path-strip button {
  flex: 1 1 0 !important;
  min-height: 1.85rem !important;
  padding: 0 0.56rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-path-strip button:hover,
html[data-active-module="violinKnowledge"] .knowledge-note-overview-preview button:hover,
html[data-active-module="violinKnowledge"] .knowledge-note-learning-path button:hover {
  border-color: rgba(var(--library-study-gold-soft), 0.5) !important;
  background: rgba(var(--library-study-gold), 0.16) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(0.34rem, 0.48vw, 0.52rem) !important;
  min-height: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  padding: clamp(0.42rem, 0.54vw, 0.56rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-category-card mark {
  padding: 0 0.1rem !important;
  border-radius: 0.16rem !important;
  background: rgba(var(--library-study-gold), 0.26) !important;
  color: rgba(255, 246, 218, 0.98) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-category-tags {
  display: flex !important;
  gap: 0.24rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-category-tags i {
  min-width: 0 !important;
  max-width: 50% !important;
  padding: 0.12rem 0.34rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(var(--library-study-gold-soft), 0.16) !important;
  border-radius: 999px !important;
  color: rgba(255, 224, 168, 0.82) !important;
  font-size: clamp(0.5rem, 0.56vw, 0.6rem) !important;
  font-style: normal !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-category-empty {
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 0.42rem !important;
  min-height: 16rem !important;
  border: 1px dashed rgba(var(--library-study-gold-soft), 0.22) !important;
  border-radius: 0.58rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  text-align: center !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-category-empty strong {
  color: rgba(255, 250, 238, 0.94) !important;
  font-size: clamp(1rem, 1.2vw, 1.2rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-category-empty p {
  margin: 0 !important;
  color: rgba(236, 232, 220, 0.68) !important;
  font-size: clamp(0.75rem, 0.86vw, 0.88rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview {
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-preview {
  display: grid !important;
  gap: 0.32rem !important;
  padding: clamp(0.68rem, 0.84vw, 0.88rem) !important;
  border: 1px solid rgba(var(--library-study-gold-soft), 0.18) !important;
  border-radius: 0.52rem !important;
  background:
    linear-gradient(135deg, rgba(var(--library-study-gold), 0.12), rgba(255, 255, 255, 0.02)),
    rgba(8, 9, 9, 0.78) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-preview strong {
  color: rgba(255, 250, 238, 0.96) !important;
  font-size: clamp(1rem, 1.16vw, 1.22rem) !important;
  font-weight: 900 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-preview p {
  display: -webkit-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(236, 232, 220, 0.7) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.82rem) !important;
  line-height: 1.36 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-preview button {
  justify-self: start !important;
  min-height: 1.9rem !important;
  padding: 0 0.72rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-learning-path {
  display: grid !important;
  gap: 0.34rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-learning-path > strong {
  color: rgba(255, 250, 238, 0.9) !important;
  font-size: clamp(0.74rem, 0.82vw, 0.86rem) !important;
  font-weight: 880 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-learning-path button {
  display: grid !important;
  grid-template-columns: 1.4rem minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 1.92rem !important;
  padding: 0 0.62rem 0 0.28rem !important;
  border-radius: 0.48rem !important;
  text-align: left !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-learning-path button span {
  display: grid !important;
  width: 1.12rem !important;
  height: 1.12rem !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(var(--library-study-gold), 0.16) !important;
  color: rgba(255, 233, 190, 0.92) !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-learning-path button em {
  overflow: hidden !important;
  color: rgba(255, 246, 228, 0.9) !important;
  font-style: normal !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-related {
  display: grid !important;
  gap: clamp(0.4rem, 0.56vw, 0.58rem) !important;
  min-height: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-related > strong {
  color: rgba(var(--library-study-gold-soft), 0.92) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.88rem) !important;
  font-weight: 900 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-related > div {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(0.36rem, 0.48vw, 0.54rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-related button {
  display: grid !important;
  gap: 0.16rem !important;
  min-width: 0 !important;
  min-height: 2.55rem !important;
  padding: 0.42rem 0.52rem !important;
  border: 1px solid rgba(var(--library-study-line), 0.12) !important;
  border-radius: 0.48rem !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(255, 246, 228, 0.9) !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-related button:hover {
  border-color: rgba(var(--library-study-gold-soft), 0.44) !important;
  background: rgba(var(--library-study-gold), 0.12) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-related button span,
html[data-active-module="violinKnowledge"] .knowledge-note-related button small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-related button span {
  color: rgba(255, 250, 238, 0.94) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.84rem) !important;
  font-weight: 860 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-related button small {
  color: rgba(232, 224, 204, 0.58) !important;
  font-size: clamp(0.56rem, 0.64vw, 0.68rem) !important;
  font-weight: 720 !important;
}

@media (max-width: 1180px) {
  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-atlas {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    overflow: auto !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-overview {
    order: -1 !important;
  }
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-note-filter-strip,
  html[data-active-module="violinKnowledge"] .knowledge-note-related > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* feature-intro-composed-layout-20260611-1: denser guide rails, a compact
   copy card, and a cleaner native-player preview without changing behavior. */
html[data-active-module="featureIntro"] .feature-tour {
  grid-template-columns:
    clamp(14.8rem, 15.9vw, 17.1rem)
    minmax(42rem, 1fr)
    clamp(18rem, 18.9vw, 20.7rem) !important;
  grid-template-rows: minmax(0, 1fr) clamp(2.48rem, 5.2vh, 3rem) !important;
  gap: clamp(0.58rem, 0.82vw, 0.86rem) !important;
  padding: clamp(0.62rem, 0.78vw, 0.82rem) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  border-radius: clamp(0.82rem, 1vw, 1rem) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--library-study-gold), 0.055), transparent 38%),
    linear-gradient(180deg, rgba(8, 9, 10, 0.94), rgba(0, 0, 0, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 1rem 2.6rem rgba(0, 0, 0, 0.3) !important;
}

html[data-active-module="featureIntro"] .feature-tour::before {
  opacity: 0.18 !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav {
  gap: clamp(0.46rem, 0.62vw, 0.62rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-brand {
  gap: 0.18rem !important;
  padding: clamp(0.62rem, 0.78vw, 0.78rem) !important;
  border-radius: 0.72rem !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--library-study-gold), 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.008)),
    rgba(4, 5, 6, 0.82) !important;
}

html[data-active-module="featureIntro"] .feature-tour-brand strong {
  font-size: clamp(1rem, 1.1vw, 1.16rem) !important;
  letter-spacing: 0 !important;
}

html[data-active-module="featureIntro"] .feature-tour-brand small {
  color: rgba(236, 232, 220, 0.66) !important;
  font-size: clamp(0.68rem, 0.74vw, 0.76rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list {
  gap: clamp(0.34rem, 0.48vw, 0.48rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button {
  grid-template-columns: 2rem minmax(0, 1fr) !important;
  gap: 0.46rem !important;
  min-height: clamp(2.36rem, 4.45vh, 2.9rem) !important;
  padding: 0.34rem 0.5rem !important;
  border-radius: 0.64rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.004)),
    rgba(2, 3, 4, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.022) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button.is-active {
  background:
    linear-gradient(90deg, rgba(var(--library-study-gold), 0.28), rgba(48, 31, 10, 0.76)),
    rgba(8, 6, 3, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 196, 0.16),
    0 0.58rem 1.18rem rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list span {
  width: 1.62rem !important;
  color: rgba(255, 227, 174, 0.9) !important;
  font-size: 0.64rem !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list strong {
  font-size: clamp(0.76rem, 0.84vw, 0.86rem) !important;
  font-weight: 760 !important;
}

html[data-active-module="featureIntro"] .feature-tour-stage-shell {
  border-radius: 0.88rem !important;
  border-color: rgba(255, 225, 166, 0.18) !important;
  background: rgba(0, 0, 0, 0.62) !important;
  box-shadow:
    0 0 0 1px rgba(255, 225, 166, 0.05),
    0 1rem 2.2rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="featureIntro"] .feature-player-preview {
  border-radius: inherit !important;
}

html[data-active-module="featureIntro"] .feature-player-preview::after {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 -4rem 5rem rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="featureIntro"] .feature-player-preview-label {
  left: clamp(0.72rem, 0.88vw, 0.95rem) !important;
  bottom: clamp(0.72rem, 0.88vw, 0.95rem) !important;
  padding: 0.55rem 0.68rem !important;
  border-radius: 0.56rem !important;
  background: rgba(3, 4, 5, 0.72) !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy {
  align-self: start !important;
  gap: clamp(0.52rem, 0.72vw, 0.72rem) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: clamp(0.78rem, 0.98vw, 1rem) !important;
  border-radius: 0.82rem !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--library-study-gold), 0.11), transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.006)),
    rgba(1, 2, 3, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.026),
    0 0.76rem 1.6rem rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy h3 {
  font-size: clamp(1.45rem, 1.84vw, 2rem) !important;
  font-weight: 880 !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy > p:not(.eyebrow) {
  color: rgba(236, 232, 220, 0.74) !important;
  font-size: clamp(0.8rem, 0.92vw, 0.96rem) !important;
  line-height: 1.46 !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy ul {
  gap: 0.36rem !important;
  padding-top: 0.06rem !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy li {
  color: rgba(236, 232, 220, 0.7) !important;
  font-size: clamp(0.72rem, 0.8vw, 0.84rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-tip {
  padding: 0.58rem 0.68rem !important;
  border-radius: 0.66rem !important;
  background:
    linear-gradient(180deg, rgba(var(--library-study-gold), 0.08), rgba(0, 0, 0, 0.1)),
    rgba(255, 255, 255, 0.026) !important;
}

html[data-active-module="featureIntro"] .feature-tour-tip strong {
  font-size: clamp(0.82rem, 0.92vw, 0.96rem) !important;
  line-height: 1.38 !important;
}

html[data-active-module="featureIntro"] .feature-tour-actions {
  gap: 0.44rem !important;
  margin-top: 0.08rem !important;
}

html[data-active-module="featureIntro"] .feature-tour-actions .glass-button {
  min-height: 2.15rem !important;
  border-radius: 999px !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress {
  min-height: 2.48rem !important;
  padding: 0.36rem 0.58rem !important;
  border-radius: 0.7rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.004)),
    rgba(0, 0, 0, 0.78) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track {
  gap: clamp(0.28rem, 0.42vw, 0.42rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track button {
  height: 0.28rem !important;
}

@media (max-width: 1180px) {
  html[data-active-module="featureIntro"] .feature-tour {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    height: auto !important;
    min-height: calc(100dvh - 8rem) !important;
    overflow: auto !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-copy {
    align-self: stretch !important;
  }
}

/* ai-generate-request-polish-20260611-1: clearer title, upload state, BPM controls, and busy progress. */
html[data-active-module="nav-generate"] .generate-reference-card-upload::before {
  content: none !important;
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-reference-main-title {
  position: absolute !important;
  z-index: 20 !important;
  left: var(--generate-card-left) !important;
  top: calc(var(--generate-card-top) + (30 / 846 * 100%)) !important;
  width: var(--generate-card-width) !important;
  margin: 0 !important;
  padding: 0 clamp(1rem, 1.3vw, 1.24rem) !important;
  color: rgba(255, 250, 242, 0.96) !important;
  font-size: clamp(1.5rem, 2vw, 1.92rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow:
    0 0.14rem 0.42rem rgba(0, 0, 0, 0.62),
    0 0 1.05rem rgba(255, 222, 157, 0.18) !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

html[data-active-module="nav-generate"] .generate-bpm-stepper {
  display: grid !important;
  grid-template-columns: clamp(1.25rem, 1.55vw, 1.48rem) minmax(0, 1fr) clamp(1.25rem, 1.55vw, 1.48rem) !important;
  align-items: center !important;
  gap: clamp(0.12rem, 0.18vw, 0.2rem) !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
}

html[data-active-module="nav-generate"] .generate-bpm-stepper button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  place-items: center !important;
  border: 1px solid rgba(255, 221, 151, 0.24) !important;
  border-radius: 999px !important;
  background: rgba(255, 217, 143, 0.09) !important;
  color: rgba(255, 233, 189, 0.94) !important;
  font: 900 clamp(0.86rem, 1vw, 1rem) / 1 inherit !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

html[data-active-module="nav-generate"] .generate-bpm-stepper button:hover,
html[data-active-module="nav-generate"] .generate-bpm-stepper button:focus-visible {
  border-color: rgba(255, 221, 151, 0.44) !important;
  background: rgba(255, 217, 143, 0.15) !important;
}

html[data-active-module="nav-generate"] .generate-bpm-stepper button:disabled {
  opacity: 0.45 !important;
  cursor: wait !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload-field.has-file {
  border-style: solid !important;
  border-color: rgba(137, 202, 134, 0.48) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(112, 198, 112, 0.13), transparent 36%),
    linear-gradient(180deg, rgba(17, 22, 12, 0.82), rgba(8, 8, 7, 0.9)) !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload-field.has-file::before {
  width: clamp(1.56rem, 2vw, 1.9rem) !important;
  height: clamp(1.56rem, 2vw, 1.9rem) !important;
  border-color: rgba(164, 226, 153, 0.38) !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bdf4a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% 62% no-repeat,
    rgba(103, 185, 93, 0.13) !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload-field.has-file span b {
  color: rgba(182, 231, 163, 0.88) !important;
  font-weight: 780 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
  align-content: center !important;
  gap: clamp(0.34rem, 0.48vw, 0.5rem) !important;
  padding: clamp(4.1rem, 5.1vw, 4.9rem) clamp(1.05rem, 1.35vw, 1.35rem) clamp(1.2rem, 1.55vw, 1.45rem) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > span {
  color: rgba(238, 202, 142, 0.94) !important;
  font-size: clamp(0.82rem, 0.96vw, 1rem) !important;
  font-weight: 840 !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > strong {
  max-width: min(100%, 22rem) !important;
  color: rgba(255, 252, 244, 0.98) !important;
  font-size: clamp(1.32rem, 1.9vw, 1.72rem) !important;
  line-height: 1.08 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html[data-active-module="nav-generate"] .generate-busy-progress {
  display: grid !important;
  width: min(100%, 20.5rem) !important;
  gap: clamp(0.24rem, 0.36vw, 0.34rem) !important;
  margin: clamp(0.08rem, 0.14vw, 0.14rem) auto 0 !important;
  padding: clamp(0.56rem, 0.72vw, 0.72rem) clamp(0.68rem, 0.9vw, 0.92rem) !important;
  border: 1px solid rgba(255, 221, 151, 0.16) !important;
  border-radius: clamp(0.58rem, 0.74vw, 0.78rem) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 214, 132, 0.11), transparent 68%),
    linear-gradient(180deg, rgba(20, 14, 8, 0.74), rgba(8, 8, 7, 0.82)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-active-module="nav-generate"] .generate-busy-progress span,
html[data-active-module="nav-generate"] .generate-busy-progress small,
html[data-active-module="nav-generate"] .generate-busy-progress em {
  display: block !important;
  margin: 0 !important;
  overflow: hidden !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-busy-progress span {
  color: rgba(255, 232, 186, 0.95) !important;
  font-size: clamp(0.74rem, 0.86vw, 0.9rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="nav-generate"] .generate-busy-progress i {
  display: block !important;
  width: 100% !important;
  height: clamp(0.3rem, 0.42vw, 0.42rem) !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="nav-generate"] .generate-busy-progress i b {
  display: block !important;
  height: 100% !important;
  min-width: 8% !important;
  border-radius: inherit !important;
  background:
    linear-gradient(90deg, rgba(255, 176, 51, 0.95), rgba(255, 219, 134, 0.98)) !important;
  box-shadow: 0 0 0.78rem rgba(255, 186, 70, 0.24) !important;
}

html[data-active-module="nav-generate"] .generate-busy-progress small {
  color: rgba(244, 236, 216, 0.9) !important;
  font-size: clamp(0.68rem, 0.8vw, 0.84rem) !important;
  font-weight: 760 !important;
}

html[data-active-module="nav-generate"] .generate-busy-progress em {
  color: rgba(198, 194, 183, 0.72) !important;
  font-size: clamp(0.62rem, 0.74vw, 0.78rem) !important;
  font-style: normal !important;
  font-weight: 620 !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  grid-template-rows: 1fr !important;
  gap: 0 !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > small {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > strong {
  font-size: clamp(1rem, 1.18vw, 1.2rem) !important;
}

/* ai-generate-flow-actions-20260612-1: clearer validation, removable upload, busy steps, and completion actions. */
html[data-active-module="nav-generate"] .generate-reference-field.is-title.is-invalid {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  border-color: rgba(255, 114, 96, 0.48) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 118, 84, 0.13), transparent 68%),
    linear-gradient(180deg, rgba(28, 12, 9, 0.84), rgba(8, 8, 7, 0.9)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 219, 0.07),
    0 0 0 1px rgba(255, 110, 78, 0.08) !important;
}

html[data-active-module="nav-generate"] .generate-reference-field.is-title.is-invalid input {
  color: rgba(255, 243, 232, 0.98) !important;
}

html[data-active-module="nav-generate"] .generate-title-error {
  display: block !important;
  min-width: 0 !important;
  margin: clamp(0.02rem, 0.08vw, 0.08rem) 0 0 !important;
  overflow: hidden !important;
  color: rgba(255, 170, 142, 0.92) !important;
  font-size: clamp(0.62rem, 0.72vw, 0.76rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-upload-clear-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  align-self: start !important;
  justify-self: end !important;
  z-index: 5 !important;
  min-width: clamp(2.9rem, 3.5vw, 3.4rem) !important;
  height: clamp(1.34rem, 1.6vw, 1.56rem) !important;
  margin: clamp(0.46rem, 0.58vw, 0.62rem) clamp(0.58rem, 0.76vw, 0.78rem) 0 0 !important;
  padding: 0 clamp(0.48rem, 0.62vw, 0.64rem) !important;
  border: 1px solid rgba(255, 221, 151, 0.28) !important;
  border-radius: 999px !important;
  background: rgba(8, 8, 7, 0.72) !important;
  color: rgba(255, 232, 188, 0.92) !important;
  font-size: clamp(0.66rem, 0.74vw, 0.78rem) !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 219, 0.08),
    0 0.22rem 0.58rem rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="nav-generate"] .generate-upload-clear-button:hover,
html[data-active-module="nav-generate"] .generate-upload-clear-button:focus-visible {
  border-color: rgba(255, 221, 151, 0.48) !important;
  background: rgba(32, 21, 10, 0.86) !important;
}

html[data-active-module="nav-generate"] .generate-busy-progress {
  width: min(100%, 21.5rem) !important;
  gap: clamp(0.26rem, 0.38vw, 0.38rem) !important;
}

html[data-active-module="nav-generate"] .generate-busy-progress > span {
  color: rgba(255, 232, 186, 0.95) !important;
  font-size: clamp(0.74rem, 0.86vw, 0.9rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="nav-generate"] .generate-busy-steps {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(0.2rem, 0.28vw, 0.3rem) !important;
  width: 100% !important;
  margin: clamp(0.02rem, 0.08vw, 0.08rem) 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html[data-active-module="nav-generate"] .generate-busy-steps::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: 16.5% !important;
  right: 16.5% !important;
  top: clamp(0.38rem, 0.48vw, 0.5rem) !important;
  height: 1px !important;
  background: rgba(255, 221, 151, 0.18) !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .generate-busy-steps li {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  justify-items: center !important;
  gap: clamp(0.14rem, 0.2vw, 0.22rem) !important;
  min-width: 0 !important;
}

html[data-active-module="nav-generate"] .generate-busy-steps i {
  display: block !important;
  width: clamp(0.76rem, 0.92vw, 0.94rem) !important;
  height: clamp(0.76rem, 0.92vw, 0.94rem) !important;
  border: 1px solid rgba(255, 221, 151, 0.28) !important;
  border-radius: 999px !important;
  background: rgba(18, 14, 9, 0.9) !important;
  box-shadow: 0 0 0.38rem rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="nav-generate"] .generate-busy-steps li.is-done i,
html[data-active-module="nav-generate"] .generate-busy-steps li.is-active i {
  border-color: rgba(255, 216, 129, 0.62) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 236, 177, 0.98) 0 26%, transparent 28%),
    rgba(191, 121, 24, 0.86) !important;
}

html[data-active-module="nav-generate"] .generate-busy-steps li.is-active i {
  box-shadow:
    0 0 0 0.16rem rgba(255, 191, 73, 0.12),
    0 0 0.68rem rgba(255, 184, 61, 0.28) !important;
}

html[data-active-module="nav-generate"] .generate-busy-steps span {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: rgba(221, 211, 190, 0.72) !important;
  font-size: clamp(0.58rem, 0.68vw, 0.72rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-busy-steps li.is-done span,
html[data-active-module="nav-generate"] .generate-busy-steps li.is-active span {
  color: rgba(255, 230, 178, 0.94) !important;
}

html[data-active-module="nav-generate"] .generate-complete-toast {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  justify-items: stretch !important;
  column-gap: clamp(0.54rem, 0.72vw, 0.78rem) !important;
  padding: 0 clamp(0.72rem, 0.92vw, 0.94rem) !important;
  cursor: default !important;
}

html[data-active-module="nav-generate"] .generate-complete-copy {
  display: grid !important;
  gap: clamp(0.12rem, 0.18vw, 0.2rem) !important;
  min-width: 0 !important;
}

html[data-active-module="nav-generate"] .generate-complete-copy span,
html[data-active-module="nav-generate"] .generate-complete-copy strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-complete-copy span {
  color: rgba(255, 250, 236, 0.99) !important;
  font-size: clamp(0.84rem, 0.98vw, 1.02rem) !important;
  font-weight: 940 !important;
  line-height: 1 !important;
}

html[data-active-module="nav-generate"] .generate-complete-copy strong {
  color: rgba(255, 237, 194, 0.86) !important;
  font-size: clamp(0.64rem, 0.76vw, 0.8rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
}

html[data-active-module="nav-generate"] .generate-complete-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(0.24rem, 0.34vw, 0.36rem) !important;
  min-width: 0 !important;
}

html[data-active-module="nav-generate"] .generate-complete-action {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: clamp(3.3rem, 4.1vw, 4.1rem) !important;
  height: clamp(1.56rem, 1.86vw, 1.86rem) !important;
  padding: 0 clamp(0.44rem, 0.56vw, 0.58rem) !important;
  border: 1px solid rgba(255, 245, 219, 0.2) !important;
  border-radius: 999px !important;
  background: rgba(8, 8, 7, 0.3) !important;
  color: rgba(255, 246, 224, 0.96) !important;
  font-size: clamp(0.64rem, 0.74vw, 0.78rem) !important;
  font-weight: 860 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

html[data-active-module="nav-generate"] .generate-complete-action.is-primary {
  border-color: rgba(255, 250, 230, 0.42) !important;
  background: rgba(255, 239, 205, 0.18) !important;
}

html[data-active-module="nav-generate"] .generate-complete-action.is-ghost {
  color: rgba(255, 229, 181, 0.84) !important;
}

/* note-atlas-final-dictionary-polish-20260612-1: final override for the simplified phone-friendly dictionary. */
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card {
  grid-template-rows: minmax(2.45rem, 1fr) auto !important;
  justify-items: center !important;
  gap: clamp(0.14rem, 0.22vw, 0.24rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card.is-selected {
  border-color: rgba(var(--library-study-gold-soft), 0.78) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(var(--library-study-gold), 0.28), transparent 48%),
    linear-gradient(180deg, rgba(255, 231, 180, 0.16), rgba(50, 31, 10, 0.3)),
    rgba(12, 10, 7, 0.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 198, 0.22),
    0 0 0 1px rgba(var(--library-study-gold-soft), 0.18),
    0 0.85rem 1.9rem rgba(0, 0, 0, 0.38),
    0 0 1.15rem rgba(var(--library-study-gold), 0.2) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card strong {
  color: rgba(255, 250, 238, 0.96) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.88rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  text-align: center !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card-glyph.is-standard-music-glyph {
  font-size: clamp(2.04rem, 2.72vw, 2.86rem) !important;
  line-height: 0.9 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card-glyph.is-standard-music-glyph.is-rest-glyph {
  font-size: clamp(1.86rem, 2.45vw, 2.62rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(0.42rem, 0.58vw, 0.62rem) !important;
  margin-top: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
  display: grid !important;
  grid-template-columns: minmax(3.6rem, 4.6rem) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(0.5rem, 0.72vw, 0.78rem) !important;
  padding: clamp(0.68rem, 0.86vw, 0.86rem) clamp(0.74rem, 0.96vw, 0.98rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail strong {
  color: rgba(var(--library-study-gold-soft), 0.94) !important;
  font-size: clamp(0.76rem, 0.86vw, 0.92rem) !important;
  font-weight: 900 !important;
  line-height: 1.24 !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  color: rgba(246, 240, 224, 0.88) !important;
  font-size: clamp(0.88rem, 1vw, 1.06rem) !important;
  font-style: normal !important;
  font-weight: 660 !important;
  line-height: 1.44 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card:nth-child(-n + 5) {
  border-color: rgba(var(--library-study-gold-soft), 0.3) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014)),
    rgba(9, 9, 8, 0.9) !important;
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
    grid-template-columns: 1fr !important;
    gap: 0.2rem !important;
  }
}

/* note-atlas-short-label-icons-anchored-20260612-1: icon-led category cards after the final dictionary override. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card > span {
  display: grid !important;
  width: clamp(2.12rem, 2.72vw, 2.72rem) !important;
  height: clamp(2.12rem, 2.72vw, 2.72rem) !important;
  place-items: center !important;
  border: 1px solid rgba(var(--library-study-gold-soft), 0.26) !important;
  border-radius: 0.52rem !important;
  background:
    radial-gradient(circle at 50% 26%, rgba(var(--library-study-gold), 0.22), transparent 58%),
    rgba(0, 0, 0, 0.22) !important;
  color: rgba(255, 230, 181, 0.98) !important;
  font-family: "Bravura", "Noto Music", "Apple Symbols", "Segoe UI Symbol", "STIX Two Text", "DejaVu Sans", serif !important;
  font-size: clamp(1.05rem, 1.46vw, 1.42rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: center !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card strong {
  font-size: clamp(0.9rem, 1.02vw, 1.08rem) !important;
  line-height: 1.08 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card p,
html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

/* note-atlas-final-quiet-home-anchored-20260612-1: final winning rules for search, overview, and dictionary copy. */
html[data-active-module="violinKnowledge"] .knowledge-note-search-panel {
  gap: clamp(0.34rem, 0.48vw, 0.5rem) !important;
  padding: clamp(0.34rem, 0.48vw, 0.5rem) !important;
  border-color: rgba(255, 255, 255, 0.065) !important;
  background: rgba(6, 7, 8, 0.58) !important;
  box-shadow: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel input {
  min-height: 1.92rem !important;
  padding: 0 0.62rem !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  background: rgba(0, 0, 0, 0.24) !important;
  color: rgba(244, 239, 228, 0.86) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.82rem) !important;
  font-weight: 680 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel small {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-content: start !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-stats,
html[data-active-module="violinKnowledge"] .knowledge-note-overview-preview,
html[data-active-module="violinKnowledge"] .knowledge-note-learning-path {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts {
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: clamp(0.36rem, 0.5vw, 0.52rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts button {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 2.34rem !important;
  padding: 0 clamp(0.56rem, 0.76vw, 0.78rem) !important;
  border-radius: 0.5rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
  padding: clamp(0.54rem, 0.72vw, 0.72rem) clamp(0.62rem, 0.84vw, 0.84rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  font-size: clamp(0.82rem, 0.94vw, 1rem) !important;
  line-height: 1.34 !important;
}

/* note-atlas-final-tooling-true-tail-20260612-1: final note-atlas tooling after quiet-home anchored rules. */
html[data-active-module="violinKnowledge"] .knowledge-note-overview {
  grid-template-rows: auto auto auto auto !important;
  gap: clamp(0.58rem, 0.78vw, 0.82rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-recent {
  display: grid !important;
  gap: clamp(0.38rem, 0.54vw, 0.58rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-recent > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.36rem, 0.5vw, 0.52rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span:last-child {
  border-color: rgba(var(--library-study-gold-soft), 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 231, 180, 0.07), rgba(255, 231, 180, 0.025)),
    rgba(0, 0, 0, 0.18) !important;
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-note-recent > div {
    grid-template-columns: 1fr !important;
  }
}

/* feature-intro-tail-lock-20260612-1: true EOF lock for the guided tour refinements. */
html[data-active-module="featureIntro"] .feature-tour-progress-track {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) !important;
  align-items: center !important;
  gap: clamp(0.28rem, 0.42vw, 0.48rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track .feature-tour-progress-group {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  gap: clamp(0.16rem, 0.24vw, 0.28rem) !important;
  min-width: 0 !important;
  padding: 0.16rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track .feature-tour-progress-group.is-active {
  background: rgba(var(--library-study-gold-soft), 0.12) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track .feature-tour-progress-group button {
  width: 100% !important;
  min-width: 0 !important;
  height: 0.28rem !important;
  border: 0 !important;
  border-radius: 999px !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track .feature-tour-progress-group button.is-complete {
  background: rgba(var(--library-study-gold-soft), 0.44) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track .feature-tour-progress-group button.is-active {
  background: linear-gradient(90deg, rgba(var(--library-study-gold-soft), 0.95), rgba(255, 244, 215, 0.42)) !important;
  box-shadow: 0 0 0.62rem rgba(var(--library-study-gold), 0.22) !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-route {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr) !important;
  align-items: center !important;
  gap: clamp(0.34rem, 0.48vw, 0.52rem) !important;
  min-width: 0 !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-route small,
html[data-active-module="featureIntro"] .feature-tour-next-route strong {
  overflow: hidden !important;
  min-width: 0 !important;
  line-height: 1.08 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-route small {
  color: rgba(236, 226, 207, 0.56) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.88rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-route b {
  display: grid !important;
  width: 1.35rem !important;
  height: 1.35rem !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(var(--library-study-gold-soft), 0.14) !important;
  color: rgba(255, 229, 177, 0.86) !important;
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html[data-active-module="featureIntro"] .feature-tour-next-card.is-final {
  border-color: rgba(var(--library-study-gold-soft), 0.32) !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(var(--library-study-gold), 0.16), transparent 42%),
    linear-gradient(180deg, rgba(255, 231, 178, 0.07), rgba(255, 231, 178, 0.018)),
    rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="featureIntro"] .feature-tour-actions {
  margin-top: auto !important;
  padding-top: clamp(0.44rem, 0.62vw, 0.66rem) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="featureIntro"] .feature-tour-progress-track {
    grid-template-columns: 1fr !important;
  }
}

/* feature-intro-guide-refine-20260612-1: lighter focus, clearer state, loading affordance, and mobile order. */
html[data-active-module="featureIntro"] .feature-tour {
  overflow: hidden !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy {
  display: grid !important;
  align-content: start !important;
  grid-template-rows: auto auto auto auto auto auto auto 1fr auto !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy > p:not(.eyebrow),
html[data-active-module="featureIntro"] .feature-tour-tip strong,
html[data-active-module="featureIntro"] .feature-tour-next-card em {
  color: rgba(235, 228, 214, 0.72) !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy ul {
  margin-block: 0 !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy li {
  padding-left: 0.72rem !important;
  line-height: 1.32 !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button {
  position: relative !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button:not(.is-active):not(.is-complete) {
  opacity: 0.5 !important;
  filter: saturate(0.72) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button.is-complete:not(.is-active) {
  opacity: 0.78 !important;
  border-color: rgba(var(--library-study-gold-soft), 0.22) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button.is-active {
  transform: translateX(0.12rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button span {
  position: relative !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button.is-complete:not(.is-active) span::after {
  content: "" !important;
  position: absolute !important;
  right: -0.08rem !important;
  bottom: 0.04rem !important;
  width: 0.32rem !important;
  height: 0.18rem !important;
  border-left: 2px solid rgba(255, 235, 190, 0.74) !important;
  border-bottom: 2px solid rgba(255, 235, 190, 0.74) !important;
  transform: rotate(-45deg) !important;
}

html[data-active-module="featureIntro"] .feature-player-preview {
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 226, 162, 0.04), transparent 38%),
    rgba(0, 0, 0, 0.88) !important;
}

html[data-active-module="featureIntro"] .feature-player-preview-loading {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  display: grid !important;
  place-items: center !important;
  gap: 0.52rem !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--library-study-gold), 0.12), transparent 30%),
    rgba(0, 0, 0, 0.64) !important;
  color: rgba(255, 244, 220, 0.9) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transition: opacity 240ms ease, visibility 240ms ease !important;
}

html[data-active-module="featureIntro"] .feature-player-preview.is-loaded .feature-player-preview-loading {
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-active-module="featureIntro"] .feature-player-preview-loading span {
  display: block !important;
  width: 2.2rem !important;
  height: 2.2rem !important;
  border: 2px solid rgba(255, 226, 170, 0.18) !important;
  border-top-color: rgba(255, 226, 170, 0.86) !important;
  border-radius: 999px !important;
  animation: featurePreviewSpin 850ms linear infinite !important;
}

html[data-active-module="featureIntro"] .feature-player-preview-loading strong {
  font-size: clamp(0.76rem, 0.9vw, 0.96rem) !important;
  font-weight: 860 !important;
  line-height: 1 !important;
}

html[data-active-module="featureIntro"] .feature-player-preview::before {
  opacity: 0.48 !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="overview"]::before {
  opacity: 0 !important;
}

html[data-active-module="featureIntro"] .feature-player-focus-outline {
  border-color: rgba(255, 224, 166, 0.9) !important;
  background: rgba(255, 214, 130, 0.025) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 232, 0.22),
    0 0 0 999rem rgba(0, 0, 0, 0.045),
    0 0 0.9rem rgba(223, 166, 60, 0.26) !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="waterfall"] .feature-player-focus-outline {
  left: 0.7% !important;
  top: 1.9% !important;
  width: 30.2% !important;
  height: 95.6% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="judgement"] .feature-player-focus-outline {
  left: 0.8% !important;
  bottom: 8.6% !important;
  width: 30% !important;
  height: 13.8% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="fingerboard"] .feature-player-focus-outline {
  left: 37.4% !important;
  top: 19.2% !important;
  width: 30.8% !important;
  height: 73.2% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="bowing"] .feature-player-focus-outline,
html[data-active-module="featureIntro"] .feature-player-preview[data-focus="ai"] .feature-player-focus-outline {
  right: 1.8% !important;
  bottom: 2.2% !important;
  width: 29% !important;
  height: 23.2% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="score"] .feature-player-focus-outline {
  left: 37.6% !important;
  top: 1.2% !important;
  width: 60.4% !important;
  height: 25.8% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="intonation"] .feature-player-focus-outline {
  right: 1.8% !important;
  top: 33.8% !important;
  width: 29% !important;
  height: 29.4% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="position"] .feature-player-focus-outline {
  left: 37.8% !important;
  top: 17.6% !important;
  width: 16.8% !important;
  height: 68.2% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="controls"] .feature-player-focus-outline {
  left: 75.3% !important;
  top: 49.3% !important;
  width: 15% !important;
  height: 7.7% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="loop"] .feature-player-focus-outline {
  left: 88.9% !important;
  top: 50.8% !important;
  width: 9.4% !important;
  height: 7.7% !important;
}

html[data-active-module="featureIntro"] .feature-tour-complete-card {
  display: grid !important;
  gap: 0.18rem !important;
  padding: clamp(0.58rem, 0.76vw, 0.8rem) !important;
  border: 1px solid rgba(var(--library-study-gold-soft), 0.38) !important;
  border-radius: 0.62rem !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--library-study-gold), 0.18), transparent 38%),
    linear-gradient(180deg, rgba(255, 231, 178, 0.12), rgba(255, 231, 178, 0.025)),
    rgba(0, 0, 0, 0.26) !important;
}

html[data-active-module="featureIntro"] .feature-tour-complete-card span {
  color: rgba(var(--library-study-gold-soft), 0.92) !important;
  font-size: clamp(0.62rem, 0.72vw, 0.76rem) !important;
  font-weight: 920 !important;
  line-height: 1 !important;
}

html[data-active-module="featureIntro"] .feature-tour-complete-card strong {
  color: rgba(255, 248, 232, 0.96) !important;
  font-size: clamp(0.9rem, 1.02vw, 1.08rem) !important;
  font-weight: 920 !important;
  line-height: 1.16 !important;
}

html[data-active-module="featureIntro"] .feature-tour.is-final-step .feature-tour-actions .feature-tour-experience {
  min-height: 2.48rem !important;
  font-size: clamp(0.84rem, 0.96vw, 1rem) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.42),
    0 0.72rem 1.4rem rgba(194, 132, 42, 0.2),
    0 0 1rem rgba(var(--library-study-gold), 0.18) !important;
}

html[data-active-module="featureIntro"] .feature-tour-progress-track .feature-tour-progress-group:not(.is-active) {
  opacity: 0.62 !important;
}

@keyframes featurePreviewSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1180px) {
  html[data-active-module="featureIntro"] .feature-tour {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    height: auto !important;
    min-height: calc(100dvh - 5.4rem) !important;
    overflow: auto !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-stage-shell {
    order: 1 !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-nav {
    order: 2 !important;
    max-height: none !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-copy {
    order: 3 !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-progress {
    order: 4 !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-nav-list {
    display: flex !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    padding-bottom: 0.12rem !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-nav-group {
    flex: 0 0 min(22rem, 86vw) !important;
  }
}

@media (max-width: 720px) {
  html[data-active-module="featureIntro"] .content-grid[data-module="featureIntro"] {
    padding: 0.42rem !important;
  }

  html[data-active-module="featureIntro"] .feature-tour {
    gap: 0.56rem !important;
    padding: 0.5rem !important;
    border-radius: 0.72rem !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-stage-shell {
    border-radius: 0.58rem !important;
  }

  html[data-active-module="featureIntro"] .feature-player-preview-toolbar {
    max-width: calc(100% - 0.84rem) !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-copy {
    grid-template-rows: auto !important;
    gap: 0.5rem !important;
    padding: 0.72rem !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-status-grid,
  html[data-active-module="featureIntro"] .feature-tour-actions {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-actions .glass-button:last-child {
    grid-column: auto !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-progress {
    grid-template-columns: 1fr auto !important;
    gap: 0.38rem !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-progress-track {
    grid-column: 1 / -1 !important;
  }
}

/* note-atlas-detail-unclip-tail-20260612-1: keep symbol detail pages fully readable on narrow screens. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-atlas,
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo,
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-staff-demo,
html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail,
html[data-active-module="violinKnowledge"] .knowledge-note-related,
html[data-active-module="violinKnowledge"] .knowledge-note-related > div {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-bottom: max(clamp(1.1rem, 2vw, 1.8rem), env(safe-area-inset-bottom)) !important;
  scrollbar-width: thin !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-staff-demo {
  width: 100% !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  display: block !important;
  overflow: visible !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-related > div {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.8rem), 1fr)) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-related button {
  width: 100% !important;
  min-width: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-related button span,
html[data-active-module="violinKnowledge"] .knowledge-note-related button small {
  min-width: 0 !important;
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
    gap: 0.66rem !important;
    padding: 0.72rem !important;
    padding-bottom: max(1.2rem, env(safe-area-inset-bottom)) !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-related > div {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-related button {
    min-height: 2.36rem !important;
  }
}

/* ai-generate-submit-countdown-quota-true-tail-20260612-1: override later generate button rules that collapse busy details. */
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: clamp(0.16rem, 0.28vw, 0.34rem) !important;
  padding-block: clamp(0.28rem, 0.46vw, 0.54rem) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > .generate-submit-busy-meta,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > .generate-submit-busy-meta,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > .generate-submit-busy-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  width: min(100%, 17.5rem) !important;
  min-width: 0 !important;
  gap: clamp(0.28rem, 0.46vw, 0.52rem) !important;
  opacity: 1 !important;
  transform: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-busy-meta b,
html[data-active-module="nav-generate"] .generate-submit-busy-meta em {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 238, 203, 0.92) !important;
  font-size: clamp(0.6rem, 0.72vw, 0.78rem) !important;
  font-style: normal !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-submit-busy-meta em {
  color: rgba(255, 229, 179, 0.78) !important;
  font-weight: 760 !important;
}

@media (max-width: 560px) {
  html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > .generate-submit-busy-meta,
  html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > .generate-submit-busy-meta,
  html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > .generate-submit-busy-meta {
    grid-template-columns: 1fr !important;
    gap: 0.16rem !important;
  }
}

/* score-editor-workflow-tools-20260612-1: measure tools, auto-save clarity, and issue-location flash. */
html[data-active-module="scoreEditor"] .score-measure-manage-actions {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(0.28rem, 0.42vw, 0.46rem) !important;
  margin-top: clamp(0.42rem, 0.58vw, 0.62rem) !important;
}

html[data-active-module="scoreEditor"] .score-measure-manage-actions button {
  display: grid !important;
  grid-template-rows: auto auto !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: clamp(2.34rem, 4.6vh, 2.82rem) !important;
  padding: 0.28rem 0.22rem !important;
  border: 1px solid rgba(255, 230, 178, 0.16) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008)),
    rgba(10, 10, 9, 0.76) !important;
  color: rgba(244, 236, 219, 0.86) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  cursor: pointer !important;
}

html[data-active-module="scoreEditor"] .score-measure-manage-actions button:hover,
html[data-active-module="scoreEditor"] .score-measure-manage-actions button:focus-visible {
  border-color: rgba(var(--library-study-gold-soft), 0.36) !important;
  background:
    linear-gradient(180deg, rgba(var(--library-study-gold), 0.18), rgba(255, 255, 255, 0.012)),
    rgba(16, 12, 6, 0.86) !important;
}

html[data-active-module="scoreEditor"] .score-measure-manage-actions span,
html[data-active-module="scoreEditor"] .score-measure-manage-actions small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

html[data-active-module="scoreEditor"] .score-measure-manage-actions span {
  color: rgba(255, 231, 183, 0.98) !important;
  font-size: clamp(0.92rem, 1.16vw, 1.18rem) !important;
  font-weight: 880 !important;
}

html[data-active-module="scoreEditor"] .score-measure-manage-actions small {
  color: rgba(236, 228, 212, 0.78) !important;
  font-size: clamp(0.56rem, 0.68vw, 0.72rem) !important;
  font-weight: 760 !important;
}

html[data-active-module="scoreEditor"] .score-commandbar-button[data-score-editor-action="pause"],
html[data-active-module="scoreEditor"] .score-commandbar-button[data-score-editor-action="stop"] {
  border-color: rgba(255, 230, 178, 0.18) !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-measure-hotspot.is-flashing::before {
  content: "" !important;
  position: absolute !important;
  left: 6% !important;
  right: 6% !important;
  top: 14% !important;
  bottom: 14% !important;
  border: 2px solid rgba(184, 60, 47, 0.82) !important;
  border-radius: 8px !important;
  background: rgba(184, 60, 47, 0.06) !important;
  box-shadow: 0 0 0 4px rgba(184, 60, 47, 0.1), 0 0 1.2rem rgba(184, 60, 47, 0.24) !important;
  pointer-events: none !important;
  animation: scoreEditorIssueFlash 620ms ease-in-out 2 !important;
}

@keyframes scoreEditorIssueFlash {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.99);
  }

  48% {
    opacity: 1;
    transform: scale(1.01);
  }
}

@media (max-width: 920px) {
  html[data-active-module="scoreEditor"] .score-measure-manage-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* score-editor-staff-restore-20260612-1: restore 2-row staff page, prevent sidebar overlap, and draw stable rest icons. */
html[data-active-module="scoreEditor"] .score-compose-panel {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-bottom: clamp(1rem, 2.2vh, 1.8rem) !important;
  scrollbar-width: thin !important;
}

html[data-active-module="scoreEditor"] .score-compose-panel::-webkit-scrollbar {
  display: block !important;
  width: 0.34rem !important;
}

html[data-active-module="scoreEditor"] .score-score-settings {
  grid-template-columns: clamp(3.6rem, 4.3vw, 5.4rem) minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  row-gap: clamp(0.42rem, 0.62vh, 0.62rem) !important;
  padding-bottom: clamp(0.56rem, 1vh, 0.9rem) !important;
}

html[data-active-module="scoreEditor"] .score-score-settings h3 {
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
}

html[data-active-module="scoreEditor"] .score-score-settings .score-settings-row,
html[data-active-module="scoreEditor"] .score-score-settings .score-fill-measure-actions,
html[data-active-module="scoreEditor"] .score-score-settings .score-measure-manage-actions {
  grid-column: 2 !important;
  grid-row: auto !important;
  min-width: 0 !important;
}

html[data-active-module="scoreEditor"] .score-score-settings .score-fill-measure-actions {
  margin: 0 !important;
}

html[data-active-module="scoreEditor"] .score-score-settings .score-measure-manage-actions {
  margin-top: 0 !important;
}

html[data-active-module="scoreEditor"] .score-score-settings .score-fill-measure-button {
  grid-column: auto !important;
  grid-row: auto !important;
}

html[data-active-module="scoreEditor"] .score-compose-rest .score-palette-button > .score-rest-icon {
  position: relative !important;
  display: block !important;
  width: clamp(1.62rem, 2vw, 2.08rem) !important;
  height: clamp(1.62rem, 2vw, 2.08rem) !important;
  color: rgba(255, 246, 226, 0.98) !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

html[data-active-module="scoreEditor"] .score-rest-icon::before,
html[data-active-module="scoreEditor"] .score-rest-icon::after,
html[data-active-module="scoreEditor"] .score-rest-icon i {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

html[data-active-module="scoreEditor"] .score-rest-icon.is-whole::before,
html[data-active-module="scoreEditor"] .score-rest-icon.is-half::before {
  left: 17% !important;
  right: 17% !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

html[data-active-module="scoreEditor"] .score-rest-icon.is-whole::before {
  top: 34% !important;
}

html[data-active-module="scoreEditor"] .score-rest-icon.is-half::before {
  top: 56% !important;
}

html[data-active-module="scoreEditor"] .score-rest-icon.is-whole i,
html[data-active-module="scoreEditor"] .score-rest-icon.is-half i {
  left: 34% !important;
  width: 32% !important;
  height: 24% !important;
  border-radius: 2px !important;
  background: currentColor !important;
}

html[data-active-module="scoreEditor"] .score-rest-icon.is-whole i {
  top: 40% !important;
}

html[data-active-module="scoreEditor"] .score-rest-icon.is-half i {
  top: 32% !important;
}

html[data-active-module="scoreEditor"] .score-rest-icon.is-quarter i {
  left: 45% !important;
  top: 13% !important;
  width: 4px !important;
  height: 72% !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: rotate(-18deg) !important;
}

html[data-active-module="scoreEditor"] .score-rest-icon.is-quarter::before,
html[data-active-module="scoreEditor"] .score-rest-icon.is-quarter::after {
  left: 32% !important;
  width: 42% !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: rotate(28deg) !important;
}

html[data-active-module="scoreEditor"] .score-rest-icon.is-quarter::before {
  top: 27% !important;
}

html[data-active-module="scoreEditor"] .score-rest-icon.is-quarter::after {
  top: 58% !important;
}

html[data-active-module="scoreEditor"] .score-rest-icon.is-eighth i,
html[data-active-module="scoreEditor"] .score-rest-icon.is-sixteenth i {
  left: 34% !important;
  top: 18% !important;
  width: 4px !important;
  height: 66% !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

html[data-active-module="scoreEditor"] .score-rest-icon.is-eighth::before,
html[data-active-module="scoreEditor"] .score-rest-icon.is-sixteenth::before,
html[data-active-module="scoreEditor"] .score-rest-icon.is-sixteenth::after {
  left: 42% !important;
  width: 46% !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: rotate(25deg) !important;
  transform-origin: left center !important;
}

html[data-active-module="scoreEditor"] .score-rest-icon.is-eighth::before,
html[data-active-module="scoreEditor"] .score-rest-icon.is-sixteenth::before {
  top: 26% !important;
}

html[data-active-module="scoreEditor"] .score-rest-icon.is-sixteenth::after {
  top: 42% !important;
}

/* ai-generate-hide-form-while-busy-20260612-1: generating state only shows progress, not editable options. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-options,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-hotspot.generate-reference-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-file-input {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* note-atlas-detail-one-screen-tail-20260612-1: compact symbol detail without internal scrolling. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
  display: grid !important;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
  align-content: start !important;
  gap: clamp(0.42rem, 0.72vw, 0.72rem) !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  padding: clamp(0.68rem, 1vw, 1rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-breadcrumb {
  gap: 0.28rem !important;
  min-height: 1.18rem !important;
  font-size: clamp(0.66rem, 0.78vw, 0.8rem) !important;
  line-height: 1.05 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo > .eyebrow {
  margin: 0 !important;
  font-size: clamp(0.6rem, 0.72vw, 0.74rem) !important;
  line-height: 1 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-staff-demo {
  width: 100% !important;
  min-height: clamp(4.25rem, 10.5vh, 5.8rem) !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo h3 {
  overflow: hidden !important;
  margin: 0 !important;
  color: rgba(255, 250, 238, 0.98) !important;
  font-size: clamp(1.32rem, 2.1vw, 2.1rem) !important;
  line-height: 1.02 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail {
  align-content: start !important;
  gap: clamp(0.34rem, 0.54vw, 0.54rem) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
  grid-template-columns: minmax(3.92rem, 4.82rem) minmax(0, 1fr) !important;
  gap: clamp(0.4rem, 0.62vw, 0.66rem) !important;
  min-height: 0 !important;
  padding: clamp(0.48rem, 0.7vw, 0.68rem) clamp(0.58rem, 0.84vw, 0.82rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail strong {
  font-size: clamp(0.72rem, 0.84vw, 0.88rem) !important;
  line-height: 1.12 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: rgba(250, 244, 230, 0.92) !important;
  font-size: clamp(0.86rem, 1.02vw, 1.06rem) !important;
  font-weight: 720 !important;
  line-height: 1.24 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-related {
  display: none !important;
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
    gap: 0.42rem !important;
    padding: 0.58rem !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-staff-demo {
    min-height: 4.15rem !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
    grid-template-columns: 1fr !important;
    gap: 0.12rem !important;
    padding: 0.46rem 0.54rem !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
}

/* ai-generate-busy-progress-unstack-tail-20260612-1: prevent busy progress text from overlapping in the generate card. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: clamp(0.36rem, 0.58vw, 0.66rem) !important;
  padding: clamp(4.4rem, 5.4vw, 5.2rem) clamp(1rem, 1.35vw, 1.35rem) clamp(1.1rem, 1.5vw, 1.45rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  width: min(100%, 18.8rem) !important;
  gap: clamp(0.34rem, 0.48vw, 0.54rem) !important;
  margin: 0 auto !important;
  padding: clamp(0.58rem, 0.78vw, 0.82rem) clamp(0.72rem, 0.96vw, 1rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 232, 186, 0.95) !important;
  font-size: clamp(0.78rem, 0.92vw, 0.96rem) !important;
  font-weight: 860 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress .generate-busy-steps {
  display: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress small,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress em {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: clamp(0.68rem, 0.8vw, 0.84rem) !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress em {
  font-style: normal !important;
  color: rgba(255, 229, 179, 0.76) !important;
}

/* support-single-flow-20260612-1: one customer-service submission flow, then answer, then human handoff. */
html[data-active-module="support"] .content-grid[data-module="support"] {
  display: grid !important;
  place-items: center !important;
  padding: clamp(1.1rem, 2.1vw, 2.2rem) !important;
}

html[data-active-module="support"] .support-single-page {
  display: grid !important;
  width: 100% !important;
  min-height: calc(100dvh - 7.6rem) !important;
  place-items: center !important;
}

html[data-active-module="support"] .support-single-shell {
  display: grid !important;
  width: min(100%, 62rem) !important;
  place-items: center !important;
}

html[data-active-module="support"] .support-single-card {
  display: grid !important;
  width: min(100%, 54rem) !important;
  min-height: clamp(32rem, 70vh, 42rem) !important;
  align-content: start !important;
  gap: clamp(0.86rem, 1.25vw, 1.2rem) !important;
  padding: clamp(1.08rem, 1.55vw, 1.55rem) !important;
  border: 1px solid rgba(255, 230, 178, 0.14) !important;
  border-radius: 0.86rem !important;
  background:
    radial-gradient(ellipse at 52% 0%, rgba(224, 171, 82, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    rgba(8, 9, 10, 0.8) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1.4rem 4rem rgba(0, 0, 0, 0.36) !important;
  backdrop-filter: blur(24px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.08) !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-card,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-card {
  width: min(100%, 62rem) !important;
}

html[data-active-module="support"] .support-single-head {
  display: grid !important;
  gap: clamp(0.28rem, 0.5vw, 0.48rem) !important;
  text-align: center !important;
}

html[data-active-module="support"] .support-single-head .eyebrow {
  margin: 0 !important;
  color: rgba(255, 224, 166, 0.9) !important;
  font-size: clamp(0.7rem, 0.84vw, 0.88rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html[data-active-module="support"] .support-single-head h3 {
  margin: 0 !important;
  color: rgba(255, 255, 252, 0.98) !important;
  font-size: clamp(2.8rem, 5vw, 4.5rem) !important;
  font-weight: 940 !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0.36rem 0.96rem rgba(0, 0, 0, 0.52) !important;
}

html[data-active-module="support"] .support-single-head p:not(.eyebrow) {
  justify-self: center !important;
  max-width: 36rem !important;
  margin: 0 !important;
  color: rgba(236, 232, 220, 0.74) !important;
  font-size: clamp(0.86rem, 1.02vw, 1.04rem) !important;
  font-weight: 680 !important;
  line-height: 1.48 !important;
}

html[data-active-module="support"] .support-single-form,
html[data-active-module="support"] .support-single-result,
html[data-active-module="support"] .support-single-human {
  display: grid !important;
  gap: clamp(0.72rem, 1vw, 0.98rem) !important;
  min-width: 0 !important;
}

html[data-active-module="support"] .support-single-field {
  display: grid !important;
  gap: 0.46rem !important;
}

html[data-active-module="support"] .support-single-field span,
html[data-active-module="support"] .support-single-question span,
html[data-active-module="support"] .support-single-answer-card > span,
html[data-active-module="support"] .support-single-human-box span,
html[data-active-module="support"] .support-human-dialog span {
  color: rgba(255, 224, 166, 0.88) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.86rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html[data-active-module="support"] .support-single-field textarea,
html[data-active-module="support"] .support-human-dialog textarea {
  width: 100% !important;
  min-height: clamp(9rem, 20vh, 12rem) !important;
  padding: clamp(0.86rem, 1.16vw, 1rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 0.62rem !important;
  outline: none !important;
  resize: vertical !important;
  background: rgba(0, 0, 0, 0.3) !important;
  color: rgba(255, 250, 238, 0.94) !important;
  font: inherit !important;
  font-size: clamp(0.92rem, 1.08vw, 1.08rem) !important;
  font-weight: 720 !important;
  line-height: 1.56 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="support"] .support-single-field textarea:focus,
html[data-active-module="support"] .support-human-dialog textarea:focus {
  border-color: rgba(255, 224, 166, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 2px rgba(214, 154, 57, 0.16) !important;
}

html[data-active-module="support"] .support-single-field textarea::placeholder,
html[data-active-module="support"] .support-human-dialog textarea::placeholder {
  color: rgba(236, 232, 220, 0.42) !important;
}

html[data-active-module="support"] .support-single-primary {
  display: inline-grid !important;
  width: 100% !important;
  min-height: clamp(3.15rem, 5.7vh, 3.7rem) !important;
  place-items: center !important;
  border: 1px solid rgba(255, 231, 184, 0.42) !important;
  border-radius: 0.58rem !important;
  background:
    linear-gradient(180deg, rgba(232, 184, 111, 0.98), rgba(166, 105, 28, 0.98)) !important;
  color: rgba(28, 16, 4, 0.98) !important;
  font-size: clamp(0.98rem, 1.22vw, 1.18rem) !important;
  font-weight: 940 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 224, 0.46),
    0 0.86rem 1.8rem rgba(178, 111, 31, 0.22),
    0 0 1rem rgba(214, 154, 57, 0.15) !important;
}

html[data-active-module="support"] .support-single-primary[disabled] {
  cursor: default !important;
  opacity: 0.58 !important;
}

html[data-active-module="support"] .support-single-status {
  margin: 0 !important;
  padding: 0.58rem 0.72rem !important;
  border: 1px solid rgba(255, 224, 166, 0.16) !important;
  border-radius: 0.52rem !important;
  background: rgba(255, 226, 170, 0.055) !important;
  color: rgba(255, 235, 196, 0.88) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.94rem) !important;
  font-weight: 760 !important;
  line-height: 1.36 !important;
}

html[data-active-module="support"] .support-single-prompts {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.42rem !important;
  padding-top: 0.12rem !important;
}

html[data-active-module="support"] .support-single-prompts strong {
  color: rgba(226, 176, 91, 0.82) !important;
  font-size: clamp(0.72rem, 0.84vw, 0.86rem) !important;
  font-weight: 900 !important;
}

html[data-active-module="support"] .support-single-prompts button {
  min-height: 2rem !important;
  padding: 0 0.72rem !important;
  border: 1px solid rgba(255, 224, 166, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(255, 229, 186, 0.9) !important;
  font: inherit !important;
  font-size: clamp(0.72rem, 0.84vw, 0.88rem) !important;
  font-weight: 760 !important;
  cursor: pointer !important;
}

html[data-active-module="support"] .support-single-prompts button:hover {
  border-color: rgba(255, 224, 166, 0.36) !important;
  background: rgba(255, 226, 170, 0.08) !important;
}

html[data-active-module="support"] .support-single-note {
  margin: 0 !important;
  color: rgba(236, 232, 220, 0.5) !important;
  font-size: clamp(0.74rem, 0.86vw, 0.88rem) !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

html[data-active-module="support"] .support-single-question,
html[data-active-module="support"] .support-single-answer-card,
html[data-active-module="support"] .support-single-human-box,
html[data-active-module="support"] .support-single-human .support-answer-content,
html[data-active-module="support"] .support-human-dialog {
  display: grid !important;
  gap: clamp(0.46rem, 0.7vw, 0.72rem) !important;
  min-width: 0 !important;
  padding: clamp(0.82rem, 1.18vw, 1.08rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.085) !important;
  border-radius: 0.62rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.008)),
    rgba(0, 0, 0, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.038) !important;
}

html[data-active-module="support"] .support-single-question strong {
  color: rgba(255, 250, 238, 0.96) !important;
  font-size: clamp(1.04rem, 1.36vw, 1.34rem) !important;
  font-weight: 900 !important;
  line-height: 1.24 !important;
}

html[data-active-module="support"] .support-single-answer-card {
  border-color: rgba(255, 224, 166, 0.16) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(224, 171, 82, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
    rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="support"] .support-single-answer-card p {
  margin: 0 !important;
  color: rgba(239, 233, 221, 0.82) !important;
  font-size: clamp(0.9rem, 1.04vw, 1.06rem) !important;
  font-weight: 680 !important;
  line-height: 1.58 !important;
}

html[data-active-module="support"] .support-single-answer-card.is-loading {
  opacity: 0.86 !important;
}

html[data-active-module="support"] .support-single-answer-card.is-error {
  border-color: rgba(255, 171, 132, 0.22) !important;
}

html[data-active-module="support"] .support-single-human-box {
  border-color: rgba(255, 224, 166, 0.22) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(224, 171, 82, 0.1), transparent 40%),
    rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="support"] .support-single-human-box > div:first-child {
  display: grid !important;
  gap: 0.26rem !important;
  text-align: center !important;
}

html[data-active-module="support"] .support-single-human-box p {
  margin: 0 !important;
  color: rgba(236, 232, 220, 0.62) !important;
  font-size: clamp(0.78rem, 0.92vw, 0.94rem) !important;
  font-weight: 680 !important;
  line-height: 1.42 !important;
}

html[data-active-module="support"] .support-single-human-box .support-wecom-upload-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(0.42rem, 0.64vw, 0.64rem) !important;
}

html[data-active-module="support"] .support-single-human-box .support-upload-entry {
  min-height: 4.3rem !important;
  padding: 0.62rem !important;
  border: 1px dashed rgba(255, 224, 166, 0.18) !important;
  border-radius: 0.5rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

html[data-active-module="support"] .support-single-human .support-chat-card {
  min-height: clamp(14rem, 34vh, 21rem) !important;
}

html[data-active-module="support"] .support-human-dialog textarea {
  min-height: clamp(5.8rem, 14vh, 8rem) !important;
}

@media (max-width: 920px) {
  html[data-active-module="support"] .support-single-card {
    min-height: auto !important;
  }

  html[data-active-module="support"] .support-single-head {
    text-align: left !important;
  }

  html[data-active-module="support"] .support-single-head p:not(.eyebrow) {
    justify-self: stretch !important;
  }
}

@media (max-width: 680px) {
  html[data-active-module="support"] .content-grid[data-module="support"] {
    padding: 0.56rem !important;
  }

  html[data-active-module="support"] .support-single-page {
    min-height: calc(100dvh - 5.6rem) !important;
  }

  html[data-active-module="support"] .support-single-card {
    gap: 0.72rem !important;
    padding: 0.78rem !important;
    border-radius: 0.7rem !important;
  }

  html[data-active-module="support"] .support-single-head h3 {
    font-size: clamp(2.1rem, 12vw, 3.1rem) !important;
  }

  html[data-active-module="support"] .support-single-field textarea {
    min-height: 8.5rem !important;
  }

  html[data-active-module="support"] .support-single-human-box .support-wecom-upload-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Final support visual lock: restore the old gold CTA and compact layout. */
html[data-active-module="support"] .support-page.support-single-page {
  place-items: center !important;
}

html[data-active-module="support"] .support-single-shell {
  width: min(100%, 44rem) !important;
}

html[data-active-module="support"] .support-single-card {
  min-height: 0 !important;
  padding: clamp(0.35rem, 0.7vw, 0.65rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="support"] .support-single-head {
  text-align: left !important;
}

html[data-active-module="support"] .support-single-head h3 {
  font-size: clamp(1.42rem, 2.1vw, 1.78rem) !important;
}

html[data-active-module="support"] .support-single-form {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.62rem 0.7rem !important;
  align-items: center !important;
}

html[data-active-module="support"] .support-single-field {
  grid-template-columns: auto minmax(12rem, 20rem) !important;
  gap: 0.5rem !important;
  align-items: center !important;
}

html[data-active-module="support"] .support-single-field span,
html[data-active-module="support"] .support-single-prompts strong {
  color: rgba(255, 255, 252, 0.92) !important;
  font-size: clamp(0.92rem, 1.02vw, 1rem) !important;
  font-weight: 850 !important;
}

html[data-active-module="support"] .support-single-field textarea {
  min-height: 2.1rem !important;
  max-height: 4.8rem !important;
  padding: 0.32rem 0.48rem !important;
  border-radius: 0 !important;
  font-size: 0.78rem !important;
  line-height: 1.32 !important;
}

html[data-active-module="support"] .support-single-primary,
html[data-active-module="support"] .support-single-primary.glass-button.primary {
  width: auto !important;
  min-width: 5.5rem !important;
  min-height: 3.48rem !important;
  padding: 0.72rem 0.94rem !important;
  border: 1px solid rgba(255, 218, 159, 0.5) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(100deg, rgba(111, 75, 37, 0.92), rgba(225, 185, 119, 0.76) 48%, rgba(93, 65, 36, 0.9)),
    rgba(232, 184, 111, 0.26) !important;
  color: rgba(255, 246, 226, 0.98) !important;
  font-size: 0.92rem !important;
  font-weight: 860 !important;
  line-height: 1.1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 226, 0.3),
    0 0.1rem 0.18rem rgba(255, 255, 255, 0.12),
    0 0 1rem rgba(232, 184, 111, 0.18) !important;
}

html[data-active-module="support"] .support-single-prompts {
  justify-content: flex-start !important;
  gap: 0.36rem !important;
  padding-top: 0 !important;
}

html[data-active-module="support"] .support-single-prompts button {
  min-height: 2rem !important;
  padding: 0.28rem 0.5rem !important;
  border: 1px solid rgba(226, 232, 240, 0.34) !important;
  border-radius: 0.12rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(55, 63, 74, 0.58) !important;
  color: rgba(245, 247, 250, 0.92) !important;
  font-size: 0.92rem !important;
  font-weight: 820 !important;
}

html[data-active-module="support"] .support-single-note {
  color: rgba(214, 221, 230, 0.74) !important;
  font-size: 0.95rem !important;
  font-weight: 650 !important;
  text-align: left !important;
}

@media (max-width: 720px) {
  html[data-active-module="support"] .support-single-form,
  html[data-active-module="support"] .support-single-field {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-single-primary,
  html[data-active-module="support"] .support-single-primary.glass-button.primary {
    width: 100% !important;
    min-height: 2.9rem !important;
  }
}

/* ai-generate-submit-no-time-tail-20260612-1: bottom busy button shows quota only, no countdown time. */
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > .generate-submit-busy-meta,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > .generate-submit-busy-meta,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > .generate-submit-busy-meta {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: min(100%, 10.5rem) !important;
  justify-items: center !important;
  gap: 0 !important;
}

html[data-active-module="nav-generate"] .generate-submit-busy-meta b {
  display: none !important;
}

html[data-active-module="nav-generate"] .generate-submit-busy-meta em {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

/* support-final-scale-20260612: larger support form with rectangular gold submit button. */
html[data-active-module="support"] .support-single-shell {
  width: min(100%, 58rem) !important;
}

html[data-active-module="support"] .support-single-card {
  gap: clamp(1rem, 1.55vw, 1.45rem) !important;
  padding: clamp(0.9rem, 1.55vw, 1.35rem) !important;
}

html[data-active-module="support"] .support-single-head {
  gap: 0.85rem !important;
}

html[data-active-module="support"] .support-single-head .eyebrow {
  font-size: clamp(0.86rem, 1vw, 1rem) !important;
}

html[data-active-module="support"] .support-single-head h3 {
  font-size: clamp(2.05rem, 3.1vw, 2.8rem) !important;
  line-height: 1.02 !important;
}

html[data-active-module="support"] .support-single-head p {
  font-size: clamp(1.05rem, 1.24vw, 1.22rem) !important;
}

html[data-active-module="support"] .support-single-form {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.78rem 0.9rem !important;
}

html[data-active-module="support"] .support-single-field {
  grid-template-columns: auto minmax(22rem, 32rem) !important;
  gap: 0.82rem !important;
}

html[data-active-module="support"] .support-single-field span,
html[data-active-module="support"] .support-single-prompts strong {
  font-size: clamp(1.05rem, 1.18vw, 1.18rem) !important;
}

html[data-active-module="support"] .support-single-field textarea {
  min-height: 3.15rem !important;
  max-height: 5.6rem !important;
  padding: 0.72rem 0.9rem !important;
  font-size: clamp(0.95rem, 1.06vw, 1.05rem) !important;
}

html[data-active-module="support"] .support-single-primary,
html[data-active-module="support"] .support-single-primary.glass-button.primary {
  min-width: 8.5rem !important;
  min-height: 3.25rem !important;
  padding: 0.78rem 1.25rem !important;
  border-radius: 0.72rem !important;
  font-size: clamp(1rem, 1.14vw, 1.12rem) !important;
}

html[data-active-module="support"] .support-single-prompts {
  gap: 0.48rem !important;
}

html[data-active-module="support"] .support-single-prompts button {
  min-height: 2.28rem !important;
  padding: 0.34rem 0.72rem !important;
  font-size: clamp(1rem, 1.12vw, 1.1rem) !important;
}

html[data-active-module="support"] .support-single-note,
html[data-active-module="support"] .support-single-status {
  font-size: clamp(1rem, 1.15vw, 1.12rem) !important;
}

@media (max-width: 720px) {
  html[data-active-module="support"] .support-single-shell {
    width: 100% !important;
  }

  html[data-active-module="support"] .support-single-field {
    grid-template-columns: 1fr !important;
  }

html[data-active-module="support"] .support-single-primary,
html[data-active-module="support"] .support-single-primary.glass-button.primary {
  width: 100% !important;
  min-height: 3.1rem !important;
  }
}

/* support-background-seam-fix-20260612: use one full-bleed background, no left/top image seam. */
html[data-active-module="support"] .app-shell::before,
html[data-active-module="support"] .app-shell::after,
html[data-active-module="support"] .content-grid[data-module="support"]::before,
html[data-active-module="support"] .content-grid[data-module="support"]::after {
  display: none !important;
  content: none !important;
}

html[data-active-module="support"] .app-shell,
html[data-active-module="support"] .main-stage,
html[data-active-module="support"] .content-grid[data-module="support"] {
  background:
    radial-gradient(ellipse at 47% -4%, rgba(255, 221, 158, 0.1), transparent 34%),
    radial-gradient(ellipse at 76% 0%, rgba(70, 112, 145, 0.14), transparent 42%),
    radial-gradient(ellipse at 4% 8%, rgba(120, 78, 42, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(17, 17, 18, 0.99), rgba(5, 6, 8, 1)) !important;
}

html[data-active-module="support"] .main-stage {
  width: 100dvw !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .content-grid[data-module="support"] {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-page.support-single-page,
html[data-active-module="support"] .support-single-page {
  min-height: 100% !important;
  padding: clamp(1.2rem, 2.4vw, 2rem) !important;
  background: transparent !important;
}

/* score-editor-sidebar-rest-polish-20260612-1: keep score settings readable and rest glyphs stable. */
html[data-active-module="scoreEditor"] .score-score-settings {
  display: grid !important;
  grid-template-columns: clamp(3.4rem, 4.05vw, 4.85rem) minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  align-items: stretch !important;
  gap: clamp(0.3rem, 0.48vh, 0.42rem) clamp(0.28rem, 0.48vw, 0.42rem) !important;
  min-height: max-content !important;
  height: auto !important;
  overflow: visible !important;
  padding-bottom: clamp(0.38rem, 0.72vh, 0.62rem) !important;
}

html[data-active-module="scoreEditor"] .score-score-settings h3 {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  min-height: 100% !important;
}

html[data-active-module="scoreEditor"] .score-score-settings .score-settings-row {
  display: none !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
}

html[data-active-module="scoreEditor"] .score-score-settings .score-fill-measure-actions {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.26rem, 0.42vw, 0.42rem) !important;
  margin: 0 !important;
  min-width: 0 !important;
}

html[data-active-module="scoreEditor"] .score-score-settings .score-measure-manage-actions {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(0.22rem, 0.36vw, 0.36rem) !important;
  margin: 0 !important;
  min-width: 0 !important;
}

html[data-active-module="scoreEditor"] .score-score-settings .score-fill-measure-button,
html[data-active-module="scoreEditor"] .score-score-settings .score-measure-manage-actions button {
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0 !important;
}

html[data-active-module="scoreEditor"] .score-score-settings .score-fill-measure-button {
  min-height: clamp(2.05rem, 3.7vh, 2.55rem) !important;
  padding: 0.24rem 0.34rem !important;
  font-size: clamp(0.72rem, 1.18vh, 0.88rem) !important;
  line-height: 1.05 !important;
  white-space: normal !important;
}

html[data-active-module="scoreEditor"] .score-score-settings .score-measure-manage-actions button {
  min-height: clamp(1.95rem, 3.45vh, 2.34rem) !important;
  padding: 0.18rem 0.12rem !important;
}

html[data-active-module="scoreEditor"] .score-score-settings .score-measure-manage-actions span {
  font-size: clamp(0.74rem, 1.03vw, 0.98rem) !important;
}

html[data-active-module="scoreEditor"] .score-score-settings .score-measure-manage-actions small {
  font-size: clamp(0.5rem, 0.62vw, 0.64rem) !important;
}

html[data-active-module="scoreEditor"] .score-compose-rest .score-palette-button > .score-rest-icon,
html[data-active-module="scoreEditor"] .score-compose-rest .score-palette-button > .score-rest-icon * {
  font-family: inherit !important;
  font-size: 0 !important;
  text-indent: 0 !important;
}

@media (max-height: 760px) and (min-width: 901px) {
  html[data-active-module="scoreEditor"] .score-compose-panel {
    gap: clamp(0.2rem, 0.38vh, 0.32rem) !important;
    padding: 0.34rem 0.48rem 0.54rem !important;
  }

  html[data-active-module="scoreEditor"] .score-compose-section {
    padding-bottom: 0.18rem !important;
  }

  html[data-active-module="scoreEditor"] .score-score-settings {
    gap: 0.24rem 0.28rem !important;
    padding-bottom: 0.24rem !important;
  }

  html[data-active-module="scoreEditor"] .score-score-settings .score-fill-measure-button {
    min-height: 1.72rem !important;
    padding: 0.16rem 0.22rem !important;
    font-size: 0.68rem !important;
  }

  html[data-active-module="scoreEditor"] .score-score-settings .score-measure-manage-actions button {
    min-height: 1.58rem !important;
    padding: 0.12rem 0.08rem !important;
  }

  html[data-active-module="scoreEditor"] .score-score-settings .score-measure-manage-actions span {
    font-size: 0.72rem !important;
  }

  html[data-active-module="scoreEditor"] .score-score-settings .score-measure-manage-actions small {
    font-size: 0.48rem !important;
  }
}

/* note-atlas-two-meaning-rows-tail-20260612-1: two clear meaning rows for symbol details. */
html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail {
  gap: clamp(0.48rem, 0.72vw, 0.72rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
  grid-template-columns: minmax(4.35rem, 5.2rem) minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: clamp(3.25rem, 5.8vh, 4.2rem) !important;
  padding: clamp(0.62rem, 0.9vw, 0.88rem) clamp(0.68rem, 0.96vw, 0.96rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail strong {
  font-size: clamp(0.78rem, 0.9vw, 0.94rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  font-size: clamp(0.94rem, 1.08vw, 1.12rem) !important;
  line-height: 1.28 !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail {
    gap: 0.42rem !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    min-height: 3.1rem !important;
    padding: 0.56rem 0.62rem !important;
  }
}

/* note-atlas-detail-polished-layout-tail-20260612-1: clearer hierarchy for two-row symbol details. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  gap: clamp(0.64rem, 1vw, 0.96rem) !important;
  padding: clamp(0.9rem, 1.35vw, 1.28rem) clamp(0.9rem, 1.45vw, 1.36rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-breadcrumb {
  margin-bottom: clamp(0.08rem, 0.2vw, 0.18rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo h3 {
  margin: 0 !important;
  font-size: clamp(1.86rem, 3.2vw, 3rem) !important;
  line-height: 0.96 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-staff-demo {
  min-height: clamp(5.5rem, 13.5vh, 7.1rem) !important;
  border-color: rgba(var(--library-study-gold-soft), 0.24) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--library-study-gold), 0.09), transparent 58%),
    rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(0.58rem, 0.9vw, 0.82rem) !important;
  margin-top: clamp(0.06rem, 0.18vw, 0.16rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
  position: relative !important;
  grid-template-columns: minmax(4.45rem, 5.4rem) minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: clamp(3.55rem, 6.4vh, 4.55rem) !important;
  padding: clamp(0.72rem, 1.02vw, 0.98rem) clamp(0.78rem, 1.12vw, 1.08rem) !important;
  border-radius: 0.62rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 0.18rem !important;
  border-radius: inherit !important;
  background: rgba(var(--library-study-gold-soft), 0.42) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span:last-child {
  border-color: rgba(var(--library-study-gold-soft), 0.2) !important;
  background:
    linear-gradient(180deg, rgba(255, 231, 180, 0.07), rgba(255, 231, 180, 0.025)),
    rgba(0, 0, 0, 0.2) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail strong {
  color: rgba(255, 224, 166, 0.98) !important;
  font-size: clamp(0.8rem, 0.94vw, 0.98rem) !important;
  line-height: 1.08 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  color: rgba(255, 250, 238, 0.96) !important;
  font-size: clamp(0.98rem, 1.16vw, 1.18rem) !important;
  line-height: 1.24 !important;
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
    gap: 0.58rem !important;
    padding: 0.72rem !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo h3 {
    font-size: clamp(1.82rem, 7.2vw, 2.52rem) !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-staff-demo {
    min-height: 5.2rem !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail {
    gap: 0.5rem !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
    min-height: 3.4rem !important;
    padding: 0.62rem 0.68rem 0.62rem 0.82rem !important;
  }
}

/* support-back-button-20260612: add a quiet return control on answer/human states. */
html[data-active-module="support"] .support-single-toolbar {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  min-width: 0 !important;
}

html[data-active-module="support"] .support-single-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.35rem !important;
  padding: 0.42rem 0.78rem !important;
  border: 1px solid rgba(255, 218, 159, 0.34) !important;
  border-radius: 0.42rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
    rgba(111, 75, 37, 0.16) !important;
  color: rgba(255, 229, 186, 0.94) !important;
  font: inherit !important;
  font-size: clamp(0.9rem, 1vw, 1rem) !important;
  font-weight: 820 !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 246, 226, 0.12) !important;
}

html[data-active-module="support"] .support-single-back::before {
  content: "<" !important;
  margin-right: 0.42rem !important;
  font-weight: 900 !important;
}

html[data-active-module="support"] .support-single-back:hover {
  border-color: rgba(255, 226, 173, 0.56) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
    rgba(111, 75, 37, 0.24) !important;
}

/* note-atlas-detail-layout-true-tail-20260612-1: final symbol-detail layout polish. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  gap: clamp(0.68rem, 1.05vw, 1rem) !important;
  overflow: hidden !important;
  padding: clamp(0.92rem, 1.42vw, 1.32rem) clamp(0.9rem, 1.52vw, 1.42rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-breadcrumb {
  margin: 0 !important;
  min-height: 1rem !important;
  opacity: 0.92 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo h3 {
  margin: clamp(0.02rem, 0.12vw, 0.12rem) 0 0 !important;
  font-size: clamp(1.95rem, 3.4vw, 3.08rem) !important;
  line-height: 0.95 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-staff-demo {
  min-height: clamp(5.75rem, 14.2vh, 7.35rem) !important;
  margin: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail {
  gap: clamp(0.62rem, 0.95vw, 0.88rem) !important;
  margin-top: clamp(0.02rem, 0.12vw, 0.12rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
  grid-template-columns: minmax(4.45rem, 5.35rem) minmax(0, 1fr) !important;
  min-height: clamp(3.75rem, 6.8vh, 4.8rem) !important;
  padding: clamp(0.76rem, 1.08vw, 1.02rem) clamp(0.82rem, 1.16vw, 1.1rem) !important;
  border-radius: 0.64rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail strong {
  color: rgba(255, 224, 166, 0.98) !important;
  font-size: clamp(0.8rem, 0.95vw, 0.98rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  color: rgba(255, 250, 238, 0.96) !important;
  font-size: clamp(1rem, 1.18vw, 1.2rem) !important;
  line-height: 1.24 !important;
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
    gap: 0.58rem !important;
    padding: 0.74rem !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo h3 {
    font-size: clamp(1.92rem, 7.4vw, 2.58rem) !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-staff-demo {
    min-height: 5.45rem !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
    grid-template-columns: 1fr !important;
    min-height: 3.62rem !important;
    padding: 0.66rem 0.74rem 0.66rem 0.86rem !important;
  }
}

/* ai-generate-busy-no-time-true-tail-20260612-1: internal busy card has no countdown text, so nothing can overlap the stage. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-items: center !important;
  gap: clamp(0.38rem, 0.58vw, 0.62rem) !important;
  width: min(100%, 18.2rem) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress .generate-busy-steps,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress small {
  display: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > span,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > em {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > span {
  color: rgba(255, 236, 195, 0.98) !important;
  font-size: clamp(0.92rem, 1.18vw, 1.18rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > em {
  color: rgba(255, 226, 174, 0.72) !important;
  font-size: clamp(0.66rem, 0.82vw, 0.84rem) !important;
  font-style: normal !important;
  font-weight: 760 !important;
  line-height: 1.08 !important;
}

/* note-atlas-real-bowing-symbols-20260612-1: draw bowing marks instead of relying on unsupported music glyphs. */
html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card-glyph.is-custom-symbol {
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  min-height: 2.2rem !important;
  max-height: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-bowing-glyph {
  position: relative !important;
  display: block !important;
  width: clamp(1.52rem, 2.3vw, 2.08rem) !important;
  height: clamp(1.34rem, 1.95vw, 1.78rem) !important;
  color: rgba(255, 226, 174, 0.98) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-bowing-glyph.is-down {
  border-top: 0.18rem solid currentColor !important;
  border-left: 0.18rem solid currentColor !important;
  border-right: 0.18rem solid currentColor !important;
  border-radius: 0.06rem 0.06rem 0 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-bowing-glyph.is-up::before,
html[data-active-module="violinKnowledge"] .knowledge-bowing-glyph.is-up::after {
  content: "" !important;
  position: absolute !important;
  top: 0.04rem !important;
  left: 50% !important;
  width: 0.18rem !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform-origin: 50% 100% !important;
}

html[data-active-module="violinKnowledge"] .knowledge-bowing-glyph.is-up::before {
  transform: translateX(-50%) rotate(30deg) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-bowing-glyph.is-up::after {
  transform: translateX(-50%) rotate(-30deg) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-staff-bowing-mark {
  position: absolute !important;
  left: 50% !important;
  top: 23% !important;
  width: 2.2rem !important;
  height: 1.72rem !important;
  color: rgba(255, 229, 184, 0.98) !important;
  transform: translateX(-50%) !important;
  animation: knowledgeStaffSymbolDrop 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both !important;
}

html[data-active-module="violinKnowledge"] .knowledge-staff-bowing-mark.is-down {
  border-top: 0.2rem solid currentColor !important;
  border-left: 0.2rem solid currentColor !important;
  border-right: 0.2rem solid currentColor !important;
  border-radius: 0.06rem 0.06rem 0 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-staff-bowing-mark.is-up::before,
html[data-active-module="violinKnowledge"] .knowledge-staff-bowing-mark.is-up::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 0.2rem !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform-origin: 50% 100% !important;
}

html[data-active-module="violinKnowledge"] .knowledge-staff-bowing-mark.is-up::before {
  transform: translateX(-50%) rotate(31deg) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-staff-bowing-mark.is-up::after {
  transform: translateX(-50%) rotate(-31deg) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph {
  position: relative !important;
  display: block !important;
  width: clamp(1.8rem, 2.5vw, 2.35rem) !important;
  height: clamp(1.44rem, 2vw, 1.9rem) !important;
  color: rgba(255, 226, 174, 0.98) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph i,
html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph b {
  position: absolute !important;
  display: block !important;
}

html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph i {
  top: 0 !important;
  bottom: 0 !important;
  width: 0.15rem !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph i:first-child {
  left: 34% !important;
  opacity: 0.58 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph i:nth-child(2) {
  left: 50% !important;
  width: 0.22rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph b {
  width: 0.28rem !important;
  height: 0.28rem !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph b:first-of-type {
  top: 33% !important;
}

html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph b:last-of-type {
  top: 61% !important;
}

html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph.is-start b {
  left: 70% !important;
}

html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph.is-end b {
  left: 12% !important;
}

html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph.is-double b,
html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph.is-final b {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph.is-double i:first-child {
  left: 42% !important;
  opacity: 1 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph.is-double i:nth-child(2) {
  left: 58% !important;
  width: 0.15rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph.is-final i:first-child {
  left: 38% !important;
  opacity: 1 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-repeat-glyph.is-final i:nth-child(2) {
  left: 58% !important;
  width: 0.28rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-fermata-glyph {
  position: relative !important;
  display: block !important;
  width: clamp(1.8rem, 2.5vw, 2.35rem) !important;
  height: clamp(1.35rem, 1.9vw, 1.78rem) !important;
  color: rgba(255, 226, 174, 0.98) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-fermata-glyph i {
  position: absolute !important;
  left: 50% !important;
  top: 6% !important;
  width: 1.6rem !important;
  height: 0.86rem !important;
  border-top: 0.18rem solid currentColor !important;
  border-left: 0.18rem solid currentColor !important;
  border-right: 0.18rem solid currentColor !important;
  border-radius: 999px 999px 0 0 !important;
  transform: translateX(-50%) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-fermata-glyph b {
  position: absolute !important;
  left: 50% !important;
  bottom: 18% !important;
  width: 0.34rem !important;
  height: 0.34rem !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: translateX(-50%) !important;
}

/* support-upscale-layout-20260612: wider, larger, more balanced customer support layout. */
html[data-active-module="support"] .content-grid[data-module="support"] {
  display: grid !important;
  place-items: center !important;
}

html[data-active-module="support"] .support-page.support-single-page,
html[data-active-module="support"] .support-single-page {
  display: grid !important;
  place-items: center !important;
  padding: clamp(2.6rem, 5vw, 5.2rem) clamp(3.1rem, 6vw, 6.6rem) !important;
}

html[data-active-module="support"] .support-single-shell {
  width: min(100%, 76rem) !important;
  margin: 0 auto !important;
}

html[data-active-module="support"] .support-single-card {
  width: 100% !important;
  max-width: none !important;
  gap: clamp(1.45rem, 2.1vw, 2.2rem) !important;
  padding: 0 !important;
}

html[data-active-module="support"] .support-single-head {
  display: grid !important;
  grid-template-columns: minmax(18rem, 0.58fr) minmax(28rem, 1fr) !important;
  grid-template-areas:
    "eyebrow intro"
    "title intro" !important;
  column-gap: clamp(2.2rem, 4vw, 4.8rem) !important;
  row-gap: 0.48rem !important;
  align-items: center !important;
  text-align: left !important;
}

html[data-active-module="support"] .support-single-head .eyebrow {
  grid-area: eyebrow !important;
  font-size: clamp(1rem, 1.18vw, 1.18rem) !important;
  line-height: 1 !important;
}

html[data-active-module="support"] .support-single-head h3 {
  grid-area: title !important;
  font-size: clamp(3.45rem, 5.4vw, 5.35rem) !important;
  line-height: 0.98 !important;
}

html[data-active-module="support"] .support-single-head p:not(.eyebrow) {
  grid-area: intro !important;
  justify-self: start !important;
  max-width: 44rem !important;
  font-size: clamp(1.22rem, 1.45vw, 1.48rem) !important;
  line-height: 1.42 !important;
}

html[data-active-module="support"] .support-single-form {
  display: grid !important;
  grid-template-columns: auto minmax(34rem, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(1rem, 1.42vw, 1.45rem) clamp(1rem, 1.6vw, 1.8rem) !important;
  width: min(100%, 72rem) !important;
}

html[data-active-module="support"] .support-single-field {
  display: contents !important;
}

html[data-active-module="support"] .support-single-field span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  font-size: clamp(1.18rem, 1.36vw, 1.38rem) !important;
}

html[data-active-module="support"] .support-single-field textarea {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: clamp(4.25rem, 6.4vw, 5rem) !important;
  max-height: clamp(6rem, 10vw, 8rem) !important;
  padding: clamp(0.9rem, 1.1vw, 1.08rem) clamp(1rem, 1.3vw, 1.28rem) !important;
  font-size: clamp(1.08rem, 1.22vw, 1.22rem) !important;
  line-height: 1.38 !important;
}

html[data-active-module="support"] .support-single-primary,
html[data-active-module="support"] .support-single-primary.glass-button.primary {
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-width: clamp(10.4rem, 12vw, 12.4rem) !important;
  min-height: clamp(4.1rem, 6vw, 4.7rem) !important;
  padding: 0.92rem 1.65rem !important;
  border-radius: 0.82rem !important;
  font-size: clamp(1.12rem, 1.32vw, 1.32rem) !important;
}

html[data-active-module="support"] .support-single-prompts {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(0.56rem, 0.82vw, 0.86rem) !important;
}

html[data-active-module="support"] .support-single-prompts strong {
  font-size: clamp(1.18rem, 1.36vw, 1.38rem) !important;
}

html[data-active-module="support"] .support-single-prompts button {
  min-height: clamp(2.55rem, 3.4vw, 3rem) !important;
  padding: 0.44rem 0.9rem !important;
  font-size: clamp(1.12rem, 1.28vw, 1.28rem) !important;
}

html[data-active-module="support"] .support-single-note,
html[data-active-module="support"] .support-single-status {
  grid-column: 2 / -1 !important;
  font-size: clamp(1.12rem, 1.32vw, 1.34rem) !important;
  line-height: 1.45 !important;
}

html[data-active-module="support"] .support-single-result,
html[data-active-module="support"] .support-single-human {
  width: min(100%, 72rem) !important;
  gap: clamp(1rem, 1.45vw, 1.5rem) !important;
}

html[data-active-module="support"] .support-single-question,
html[data-active-module="support"] .support-single-answer-card,
html[data-active-module="support"] .support-single-human-box {
  padding: clamp(1.1rem, 1.55vw, 1.5rem) !important;
}

@media (max-width: 900px) {
  html[data-active-module="support"] .support-page.support-single-page,
  html[data-active-module="support"] .support-single-page {
    padding: clamp(1.4rem, 5vw, 2.4rem) !important;
  }

  html[data-active-module="support"] .support-single-head {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "eyebrow"
      "title"
      "intro" !important;
  }

  html[data-active-module="support"] .support-single-form {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-single-field {
    display: grid !important;
    gap: 0.72rem !important;
  }

  html[data-active-module="support"] .support-single-field span,
  html[data-active-module="support"] .support-single-field textarea,
  html[data-active-module="support"] .support-single-primary,
  html[data-active-module="support"] .support-single-primary.glass-button.primary,
  html[data-active-module="support"] .support-single-prompts,
  html[data-active-module="support"] .support-single-note,
  html[data-active-module="support"] .support-single-status {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

html[data-active-module="support"] .support-single-primary,
html[data-active-module="support"] .support-single-primary.glass-button.primary {
    width: 100% !important;
  }
}

/* support-half-step-polish-20260612: tune scale, rhythm, and line breaks after the wide layout. */
html[data-active-module="support"] .support-single-shell {
  width: min(100%, 78rem) !important;
}

html[data-active-module="support"] .support-single-card {
  gap: clamp(1.32rem, 1.85vw, 1.95rem) !important;
}

html[data-active-module="support"] .support-single-head {
  grid-template-columns: minmax(21rem, 0.42fr) minmax(40rem, 1fr) !important;
  column-gap: clamp(2rem, 3.5vw, 4.2rem) !important;
}

html[data-active-module="support"] .support-single-head h3 {
  font-size: clamp(3.2rem, 4.8vw, 4.85rem) !important;
  text-shadow:
    0 0.34rem 0.86rem rgba(0, 0, 0, 0.5),
    0 0 1.2rem rgba(255, 224, 166, 0.035) !important;
}

html[data-active-module="support"] .support-single-head p:not(.eyebrow) {
  max-width: 46rem !important;
  font-size: clamp(1.16rem, 1.34vw, 1.36rem) !important;
  line-height: 1.5 !important;
}

html[data-active-module="support"] .support-single-form {
  width: min(100%, 74rem) !important;
  grid-template-columns: minmax(7.2rem, auto) minmax(36rem, 1fr) minmax(10.8rem, auto) !important;
  column-gap: clamp(1.15rem, 1.72vw, 1.95rem) !important;
  row-gap: clamp(0.86rem, 1.16vw, 1.18rem) !important;
}

html[data-active-module="support"] .support-single-field span,
html[data-active-module="support"] .support-single-prompts strong {
  font-size: clamp(1.12rem, 1.27vw, 1.28rem) !important;
}

html[data-active-module="support"] .support-single-field textarea {
  min-height: clamp(4rem, 5.6vw, 4.55rem) !important;
  padding-inline: clamp(1rem, 1.2vw, 1.2rem) !important;
}

html[data-active-module="support"] .support-single-primary,
html[data-active-module="support"] .support-single-primary.glass-button.primary {
  min-width: clamp(10.8rem, 11.6vw, 12rem) !important;
  min-height: clamp(3.9rem, 5.2vw, 4.35rem) !important;
  border-radius: 0.72rem !important;
}

html[data-active-module="support"] .support-single-prompts {
  align-items: center !important;
}

html[data-active-module="support"] .support-single-prompts button {
  min-height: clamp(2.42rem, 3vw, 2.76rem) !important;
  padding-inline: 0.82rem !important;
}

html[data-active-module="support"] .support-single-note,
html[data-active-module="support"] .support-single-status {
  font-size: clamp(1.06rem, 1.22vw, 1.22rem) !important;
}

@media (max-width: 1100px) {
  html[data-active-module="support"] .support-single-head {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "eyebrow"
      "title"
      "intro" !important;
    row-gap: 0.58rem !important;
  }

  html[data-active-module="support"] .support-single-form {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-single-field {
    display: grid !important;
    gap: 0.72rem !important;
  }

  html[data-active-module="support"] .support-single-field span,
  html[data-active-module="support"] .support-single-field textarea,
  html[data-active-module="support"] .support-single-primary,
  html[data-active-module="support"] .support-single-primary.glass-button.primary,
  html[data-active-module="support"] .support-single-prompts,
  html[data-active-module="support"] .support-single-note,
  html[data-active-module="support"] .support-single-status {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* ai-generate-submit-typography-tail-20260612-1: two-line centered busy button copy. */
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: clamp(0.14rem, 0.24vw, 0.24rem) !important;
  padding: clamp(0.42rem, 0.64vw, 0.66rem) clamp(0.82rem, 1.1vw, 1.12rem) !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > strong {
  display: block !important;
  width: 100% !important;
  color: rgba(255, 250, 238, 0.98) !important;
  font-size: clamp(1.04rem, 1.24vw, 1.24rem) !important;
  font-weight: 940 !important;
  line-height: 1.06 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > .generate-submit-busy-meta,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > .generate-submit-busy-meta,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > .generate-submit-busy-meta {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button .generate-submit-busy-meta em {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  color: rgba(255, 232, 188, 0.72) !important;
  font-size: clamp(0.64rem, 0.78vw, 0.78rem) !important;
  font-style: normal !important;
  font-weight: 780 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ai-generate-busy-countdown-align-20260612-1: restore countdown and keep busy-card copy centered. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: clamp(0.3rem, 0.48vw, 0.5rem) !important;
  width: min(100%, 18.2rem) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: clamp(0.72rem, 0.96vw, 0.96rem) clamp(0.84rem, 1.12vw, 1.12rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > span,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > small,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > em {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.14 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > span {
  color: rgba(255, 238, 199, 0.98) !important;
  font-size: clamp(1.02rem, 1.22vw, 1.2rem) !important;
  font-weight: 930 !important;
  text-shadow: 0 0 0.7rem rgba(255, 195, 94, 0.24) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > small {
  display: block !important;
  color: rgba(255, 226, 174, 0.82) !important;
  font-size: clamp(0.72rem, 0.88vw, 0.9rem) !important;
  font-weight: 790 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > i {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > em {
  color: rgba(255, 226, 174, 0.66) !important;
  font-size: clamp(0.64rem, 0.78vw, 0.8rem) !important;
  font-weight: 720 !important;
}

/* score-editor-duration-icon-fallback-20260612-1: fix cached duration glyph spans too. */
html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration] > span:not(.score-note-icon) {
  position: relative !important;
  display: block !important;
  width: clamp(1.62rem, 2vw, 2.08rem) !important;
  height: clamp(1.62rem, 2vw, 2.08rem) !important;
  color: rgba(255, 246, 226, 0.98) !important;
  font-family: inherit !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
}

html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration] > span:not(.score-note-icon)::before,
html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration] > span:not(.score-note-icon)::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration] > span:not(.score-note-icon)::before {
  left: 16% !important;
  bottom: 11% !important;
  width: 48% !important;
  height: 32% !important;
  border-radius: 999px !important;
  transform: rotate(-18deg) !important;
  background: currentColor !important;
}

html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration] > span:not(.score-note-icon)::after {
  left: 59% !important;
  top: 10% !important;
  width: 4px !important;
  height: 64% !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration="whole"] > span:not(.score-note-icon)::before {
  left: 14% !important;
  top: 32% !important;
  width: 72% !important;
  height: 36% !important;
  border: 2px solid currentColor !important;
  background: transparent !important;
}

html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration="whole"] > span:not(.score-note-icon)::after {
  display: none !important;
}

html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration="half"] > span:not(.score-note-icon)::before {
  border: 2px solid currentColor !important;
  background: transparent !important;
}

html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration="eighth"] > span:not(.score-note-icon)::after,
html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration="sixteenth"] > span:not(.score-note-icon)::after {
  width: 38% !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, currentColor 0 4px, transparent 4px),
    linear-gradient(28deg, transparent 35%, currentColor 36% 48%, transparent 49%) !important;
}

html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration="sixteenth"] > span:not(.score-note-icon)::after {
  background:
    linear-gradient(90deg, currentColor 0 4px, transparent 4px),
    linear-gradient(28deg, transparent 25%, currentColor 26% 38%, transparent 39%),
    linear-gradient(28deg, transparent 50%, currentColor 51% 63%, transparent 64%) !important;
}

/* ai-generate-busy-countdown-placement-20260612-1: split stage and countdown so they cannot overlap. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: clamp(0.72rem, 1vw, 1rem) !important;
  width: min(100%, 18.2rem) !important;
  min-width: 0 !important;
  min-height: clamp(6.5rem, 9.2vw, 7.6rem) !important;
  margin: 0 auto !important;
  padding: clamp(0.86rem, 1.14vw, 1.08rem) clamp(0.92rem, 1.22vw, 1.18rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-stage {
  position: static !important;
  inset: auto !important;
  display: block !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  color: rgba(255, 238, 199, 0.98) !important;
  font-size: clamp(1.04rem, 1.3vw, 1.28rem) !important;
  font-weight: 940 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 0 0.72rem rgba(255, 195, 94, 0.24) !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter {
  display: grid !important;
  grid-row: 2 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: clamp(0.32rem, 0.5vw, 0.5rem) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > i {
  display: block !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > small,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > em {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > small {
  grid-row: 2 !important;
  color: rgba(255, 226, 174, 0.84) !important;
  font-size: clamp(0.74rem, 0.9vw, 0.92rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > em {
  grid-row: 3 !important;
  color: rgba(255, 226, 174, 0.62) !important;
  font-size: clamp(0.62rem, 0.76vw, 0.78rem) !important;
  font-weight: 720 !important;
}

/* support-prompt-column-absolute-tail-20260612: quick-question buttons align with the textarea column. */
html[data-active-module="support"] .support-single-prompts {
  grid-template-columns: minmax(7.8rem, auto) minmax(0, 1fr) !important;
}

html[data-active-module="support"] .support-single-prompt-list {
  grid-column: 2 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: clamp(0.75rem, 1.1vw, 1.1rem) !important;
  min-width: 0 !important;
}

html[data-active-module="support"] .support-single-prompt-list button {
  flex: 0 0 auto !important;
  justify-self: auto !important;
}

@media (max-width: 1180px) {
  html[data-active-module="support"] .support-single-prompt-list {
    grid-column: 1 !important;
  }
}

/* account-popover-global-layer-20260612-1: keep top-right popovers above oversized learning-tool artwork. */
html[data-active-module] .topbar {
  position: relative !important;
  z-index: 9000 !important;
}

html[data-active-module] .user-area,
html[data-active-module] .notification-button,
html[data-active-module] .user-profile {
  position: relative !important;
  z-index: 9001 !important;
}

/* notification-badge-visible-20260612-1: keep unread numbers outside the bell circle. */
html[data-active-module] .notification-button {
  overflow: visible !important;
}

html[data-active-module] .message-unread-dot {
  right: -0.22rem !important;
  top: -0.22rem !important;
  z-index: 3 !important;
  min-width: 1.12rem !important;
  height: 1.12rem !important;
  padding: 0 0.24rem !important;
  border-width: 1.2px !important;
  font-size: 0.62rem !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

.account-menu-popover,
.message-center-popover {
  position: fixed !important;
  top: var(--popover-top, calc(env(safe-area-inset-top, 0px) + 4.25rem)) !important;
  right: var(--popover-right, calc(env(safe-area-inset-right, 0px) + 1rem)) !important;
  z-index: 30000 !important;
  isolation: isolate !important;
  pointer-events: auto !important;
}

.account-menu-popover::before {
  right: 1.05rem !important;
}

/* support-answer-fit-final-20260612: compact answer/human states so they do not squeeze or require page turning. */
html[data-active-module="support"] .support-single-page[data-support-stage="answer"],
html[data-active-module="support"] .support-single-page[data-support-stage="human"] {
  align-items: center !important;
  padding: clamp(1rem, 2vw, 1.8rem) clamp(2rem, 4vw, 4.2rem) !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-shell,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-shell {
  width: min(100%, 78rem) !important;
  height: 100% !important;
  min-height: 0 !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-card,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "head"
    "body" !important;
  align-content: center !important;
  gap: clamp(0.8rem, 1.3vw, 1.2rem) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-head,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-head {
  grid-area: head !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "eyebrow intro"
    "title intro" !important;
  align-items: center !important;
  column-gap: clamp(1.6rem, 3vw, 3.4rem) !important;
  row-gap: 0.2rem !important;
  max-width: none !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-head h3,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-head h3 {
  white-space: nowrap !important;
  font-size: clamp(2.5rem, 4.6vw, 4rem) !important;
  line-height: 0.96 !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-head p:not(.eyebrow),
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-head p:not(.eyebrow) {
  max-width: none !important;
  margin: 0 !important;
  font-size: clamp(1rem, 1.25vw, 1.22rem) !important;
  line-height: 1.42 !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-result,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-human {
  grid-area: body !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, auto) auto !important;
  gap: clamp(0.7rem, 1vw, 0.95rem) !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-toolbar,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-toolbar {
  min-height: 0 !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-back,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-back {
  min-height: 2.1rem !important;
  padding: 0.34rem 0.66rem !important;
  font-size: clamp(0.82rem, 0.95vw, 0.94rem) !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-question,
html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-answer-card,
html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-chat-card,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-human-dialog {
  padding: clamp(0.72rem, 1vw, 0.95rem) !important;
  border-radius: 0.52rem !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-question strong {
  font-size: clamp(1.08rem, 1.35vw, 1.32rem) !important;
  line-height: 1.18 !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-answer-card p,
html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box p {
  font-size: clamp(0.9rem, 1.08vw, 1.05rem) !important;
  line-height: 1.48 !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box {
  gap: clamp(0.5rem, 0.8vw, 0.72rem) !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-wecom-upload-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.52rem !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-upload-entry {
  min-height: 3.45rem !important;
  padding: 0.48rem !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-single-primary,
html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-single-primary.glass-button.primary {
  min-height: 3.2rem !important;
  min-width: 100% !important;
}

@media (max-width: 900px) {
  html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-head,
  html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-head {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "eyebrow"
      "title"
      "intro" !important;
  }

  html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-head h3,
  html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-head h3 {
    white-space: normal !important;
  }
}

/* ai-generate-busy-countdown-final-true-tail-20260612-1: centered countdown card after every duplicate tail block. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  gap: clamp(0.66rem, 0.95vw, 0.9rem) !important;
  width: min(100%, 18.2rem) !important;
  min-width: 0 !important;
  min-height: clamp(6.8rem, 9.6vw, 7.8rem) !important;
  margin: 0 auto !important;
  padding: clamp(0.92rem, 1.24vw, 1.16rem) clamp(0.96rem, 1.28vw, 1.22rem) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-stage {
  position: static !important;
  inset: auto !important;
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
  color: rgba(255, 238, 199, 0.98) !important;
  font-size: clamp(1.12rem, 1.42vw, 1.34rem) !important;
  font-weight: 940 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-overflow: clip !important;
  text-shadow: 0 0 0.72rem rgba(255, 195, 94, 0.24) !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter {
  position: static !important;
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: clamp(0.34rem, 0.5vw, 0.5rem) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > i {
  position: static !important;
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: clamp(0.26rem, 0.38vw, 0.38rem) !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > small,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > em {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > small {
  grid-column: 1 !important;
  grid-row: 2 !important;
  color: rgba(255, 226, 174, 0.86) !important;
  font-size: clamp(0.78rem, 0.94vw, 0.94rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > em {
  grid-column: 1 !important;
  grid-row: 3 !important;
  color: rgba(255, 226, 174, 0.64) !important;
  font-size: clamp(0.64rem, 0.78vw, 0.8rem) !important;
  font-weight: 720 !important;
}

/* note-atlas-duration-symbols-reference-drawn-20260612-1: draw notation values instead of font glyph boxes. */
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-duration {
  grid-template-rows: minmax(3.15rem, 1fr) auto !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card-glyph.is-drawn-duration-glyph {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: clamp(2.95rem, 4.4vw, 3.72rem) !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-duration .knowledge-note-card-duration {
  width: clamp(3.8rem, 5.1vw, 5.12rem) !important;
  height: clamp(2.72rem, 3.9vw, 3.72rem) !important;
  color: rgba(255, 226, 178, 0.98) !important;
  transform: scale(1.04) !important;
  transform-origin: center !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-duration .knowledge-note-card-duration.is-whole,
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-duration .knowledge-note-card-duration.is-breve {
  transform: scale(1.14) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-duration .knowledge-note-card-duration.is-beamed {
  transform: scale(1.1) !important;
}

/* support-human-box-compact-material-20260612-1: one material button and a shorter handoff box. */
html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: clamp(0.72rem, 1.1vw, 1rem) !important;
  min-height: 0 !important;
  padding: clamp(0.62rem, 0.86vw, 0.86rem) clamp(0.82rem, 1.18vw, 1.16rem) !important;
  border-radius: 0.5rem !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box > div:first-child {
  display: grid !important;
  gap: 0.22rem !important;
  min-width: 0 !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box > div:first-child span {
  font-size: clamp(0.88rem, 1.04vw, 1.02rem) !important;
  line-height: 1.05 !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box p {
  margin: 0 !important;
  font-size: clamp(0.82rem, 0.98vw, 0.96rem) !important;
  line-height: 1.34 !important;
}

html[data-active-module="support"] .support-material-button {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: clamp(7.2rem, 9.4vw, 9rem) !important;
  min-height: clamp(2.55rem, 3.35vw, 3rem) !important;
  padding: 0.48rem 0.9rem !important;
  border: 1px solid rgba(255, 229, 177, 0.22) !important;
  border-radius: 0.54rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02)),
    rgba(7, 8, 10, 0.62) !important;
  color: rgba(255, 241, 214, 0.94) !important;
  font: inherit !important;
  font-size: clamp(0.94rem, 1.08vw, 1.08rem) !important;
  font-weight: 880 !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0.5rem 1rem rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="support"] .support-material-button:hover,
html[data-active-module="support"] .support-material-button:focus-within {
  border-color: rgba(255, 218, 150, 0.45) !important;
  background:
    linear-gradient(180deg, rgba(255, 223, 164, 0.14), rgba(255, 255, 255, 0.03)),
    rgba(8, 9, 10, 0.68) !important;
}

html[data-active-module="support"] .support-material-button input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  opacity: 0 !important;
}

html[data-active-module="support"] .support-material-button.is-loading {
  cursor: default !important;
  opacity: 0.64 !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-single-primary,
html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-single-primary.glass-button.primary {
  width: auto !important;
  min-width: clamp(14rem, 20vw, 20rem) !important;
  min-height: clamp(2.8rem, 3.7vw, 3.25rem) !important;
  padding: 0.58rem 1.12rem !important;
  border-radius: 0.62rem !important;
  font-size: clamp(1rem, 1.18vw, 1.16rem) !important;
}

@media (max-width: 900px) {
  html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-material-button,
  html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-single-primary,
  html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-single-primary.glass-button.primary {
    width: 100% !important;
  }
}

/* beginner-note-reader-simple-controls-20260612-1: keep the left reader to intro + staff + three actions. */
html[data-active-module="violinKnowledge"] .theory-reader-board.theory-score-board {
  grid-template-rows: auto minmax(18rem, 1fr) auto !important;
  gap: 0.72rem !important;
  padding: clamp(0.72rem, 1.1vw, 1rem) !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-intro-card {
  display: grid !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
  padding: clamp(0.56rem, 0.8vw, 0.82rem) clamp(0.74rem, 1vw, 1rem) !important;
  border: 1px solid rgba(226, 183, 105, 0.28) !important;
  border-radius: 0.55rem !important;
  background:
    radial-gradient(ellipse at 52% 0%, rgba(222, 169, 83, 0.1), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.006)),
    rgba(0, 0, 0, 0.84) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 234, 190, 0.06),
    0 0.7rem 1.5rem rgba(0, 0, 0, 0.28) !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-intro-card > div {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.5rem !important;
  min-width: 0 !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-intro-card strong {
  flex: 0 0 auto !important;
  color: rgba(255, 220, 144, 0.98) !important;
  font-size: clamp(1.55rem, 2.1vw, 2.18rem) !important;
  font-weight: 950 !important;
  line-height: 0.95 !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-intro-card span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(246, 241, 229, 0.94) !important;
  font-size: clamp(0.86rem, 1vw, 1.05rem) !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-intro-card p {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(222, 218, 205, 0.74) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.88rem) !important;
  font-weight: 800 !important;
  line-height: 1.42 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-board.theory-score-board .theory-reader-control-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.6rem !important;
}

html[data-active-module="violinKnowledge"] .theory-reader-board.theory-score-board .theory-reader-control-row button {
  min-height: clamp(2.55rem, 3.2vw, 3rem) !important;
  border-radius: 0.56rem !important;
  font-size: clamp(0.88rem, 0.98vw, 1.05rem) !important;
  font-weight: 950 !important;
}

/* beginner-note-reader-player-embed-20260612-1: use the real player fingerboard for hand/point/position accuracy. */
html[data-active-module="violinKnowledge"] .theory-practice-copy-panel.is-player-embed {
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .theory-practice-copy-stage.is-player-embed-stage {
  position: relative !important;
  display: block !important;
  min-height: clamp(25rem, 66vh, 43rem) !important;
  overflow: hidden !important;
  background: #050403 !important;
}

html[data-active-module="violinKnowledge"] .theory-practice-player-embed-wrap {
  position: absolute !important;
  inset: 0 !important;
  z-index: 12 !important;
  overflow: hidden !important;
  background: #050403 !important;
}

html[data-active-module="violinKnowledge"] .theory-practice-player-embed-wrap::before {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  content: "" !important;
  background: #050403 !important;
  opacity: 1 !important;
  transition: opacity 180ms ease !important;
}

html[data-active-module="violinKnowledge"] .theory-practice-player-embed {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 720px !important;
  height: 960px !important;
  border: 0 !important;
  background: #050403 !important;
  transform: translate(-50%, -50%) scale(var(--theory-embed-scale, 0.5)) !important;
  transform-origin: 50% 50% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease !important;
}

html[data-active-module="violinKnowledge"] .theory-practice-player-embed-wrap.is-loaded::before {
  opacity: 0 !important;
  pointer-events: none !important;
}

html[data-active-module="violinKnowledge"] .theory-practice-player-embed-wrap.is-loaded .theory-practice-player-embed {
  opacity: 1 !important;
}

html[data-active-module="violinKnowledge"] .theory-practice-player-embed-loader {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 3 !important;
  width: 1.8rem !important;
  height: 1.8rem !important;
  border: 2px solid rgba(219, 177, 105, 0.16) !important;
  border-top-color: rgba(237, 203, 139, 0.78) !important;
  border-radius: 50% !important;
  opacity: 0.92 !important;
  transform: translate(-50%, -50%) !important;
  animation: theory-embed-loader-spin 760ms linear infinite !important;
  pointer-events: none !important;
}

html[data-active-module="violinKnowledge"] .theory-practice-player-embed-wrap.is-loaded .theory-practice-player-embed-loader {
  opacity: 0 !important;
  animation: none !important;
}

html[data-active-module="violinKnowledge"] .theory-hand-calibration-panel {
  position: absolute !important;
  left: 0.7rem !important;
  right: 0.7rem !important;
  bottom: 0.7rem !important;
  z-index: 25 !important;
  display: grid !important;
  gap: 0.38rem !important;
  padding: 0.58rem 0.66rem !important;
  border: 1px solid rgba(225, 180, 93, 0.42) !important;
  border-radius: 0.56rem !important;
  background: linear-gradient(180deg, rgba(13, 12, 10, 0.92), rgba(3, 3, 3, 0.88)) !important;
  box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.42) !important;
  color: rgba(255, 244, 221, 0.94) !important;
  pointer-events: auto !important;
}

html[data-active-module="violinKnowledge"] .theory-hand-calibration-panel strong {
  color: rgba(238, 198, 121, 0.98) !important;
  font-size: 0.8rem !important;
  font-weight: 950 !important;
}

html[data-active-module="violinKnowledge"] .theory-hand-calibration-panel span,
html[data-active-module="violinKnowledge"] .theory-hand-calibration-panel small {
  color: rgba(230, 224, 209, 0.78) !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
}

html[data-active-module="violinKnowledge"] .theory-hand-calibration-panel div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
}

html[data-active-module="violinKnowledge"] .theory-hand-calibration-panel button {
  min-width: 2.45rem !important;
  min-height: 1.8rem !important;
  border: 1px solid rgba(227, 184, 104, 0.36) !important;
  border-radius: 0.38rem !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(255, 242, 215, 0.94) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
}

html[data-active-module="violinKnowledge"] .theory-hand-calibration-panel button:hover {
  border-color: rgba(241, 199, 118, 0.68) !important;
  background: rgba(205, 151, 55, 0.18) !important;
}

@keyframes theory-embed-loader-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (max-width: 760px) {
  html[data-active-module="violinKnowledge"] .theory-reader-intro-card > div {
    align-items: start !important;
    flex-direction: column !important;
    gap: 0.16rem !important;
  }

  html[data-active-module="violinKnowledge"] .theory-reader-intro-card span,
  html[data-active-module="violinKnowledge"] .theory-reader-intro-card p {
    white-space: normal !important;
  }
}

/* score-editor-hide-pitch-field-20260612-1: remove the redundant pitch selector from the left toolbar. */
html[data-active-module="scoreEditor"] .score-compose-note-input {
  grid-template-rows: minmax(0, 1fr) !important;
}

html[data-active-module="scoreEditor"] .score-compose-note-input .score-input-card-grid {
  grid-column: 2 !important;
  grid-row: 1 !important;
  height: 100% !important;
}

html[data-active-module="scoreEditor"] .score-compose-note-input .score-pitch-field {
  display: none !important;
}

/* score-editor-stable-toolbar-symbols-20260612-1: all palette symbols use fixed SVG drawings. */
html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon {
  display: grid !important;
  place-items: center !important;
  width: clamp(1.34rem, 2.35vh, 1.68rem) !important;
  height: clamp(1.34rem, 2.35vh, 1.68rem) !important;
  align-self: center !important;
  justify-self: center !important;
  overflow: visible !important;
  color: rgba(255, 246, 226, 0.98) !important;
  font-family: inherit !important;
  font-size: 0 !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  fill: currentColor !important;
  stroke: none !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon .score-symbol-image {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: var(--score-symbol-image-width, 82%) !important;
  max-height: var(--score-symbol-image-height, 82%) !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: translateY(var(--score-symbol-image-offset-y, -0.02rem)) !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

/* score-editor-reference-symbol-size-20260612-2: keep traced reference symbols inside the button icon row. */
html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-duration.is-whole {
  --score-symbol-image-width: 78%;
  --score-symbol-image-height: 48%;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-duration.is-half,
html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-duration.is-quarter {
  --score-symbol-image-width: 70%;
  --score-symbol-image-height: 88%;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-duration.is-eighth,
html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-duration.is-sixteenth {
  --score-symbol-image-width: 76%;
  --score-symbol-image-height: 86%;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-rest.is-whole,
html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-rest.is-half {
  --score-symbol-image-width: 126%;
  --score-symbol-image-height: 66%;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-rest.is-quarter {
  --score-symbol-image-width: clamp(0.62rem, 1.22vh, 0.82rem);
  --score-symbol-image-height: clamp(1.34rem, 2.38vh, 1.5rem);
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-rest.is-eighth {
  --score-symbol-image-width: clamp(0.58rem, 1.16vh, 0.82rem);
  --score-symbol-image-height: clamp(1.28rem, 2.28vh, 1.44rem);
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-rest.is-sixteenth {
  --score-symbol-image-width: clamp(0.58rem, 1.18vh, 0.82rem);
  --score-symbol-image-height: clamp(1.32rem, 2.34vh, 1.48rem);
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-accidental.is-sharp {
  --score-symbol-image-width: clamp(0.98rem, 1.84vh, 1.2rem);
  --score-symbol-image-height: clamp(1.42rem, 2.52vh, 1.58rem);
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-accidental.is-flat {
  --score-symbol-image-width: clamp(0.58rem, 1.14vh, 0.76rem);
  --score-symbol-image-height: clamp(1.42rem, 2.5vh, 1.58rem);
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-accidental.is-natural {
  --score-symbol-image-width: clamp(0.52rem, 1.02vh, 0.7rem);
  --score-symbol-image-height: clamp(1.42rem, 2.48vh, 1.56rem);
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-repeat.is-dot {
  --score-symbol-image-width: clamp(1.04rem, 1.94vh, 1.24rem);
  --score-symbol-image-height: clamp(1.32rem, 2.34vh, 1.46rem);
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-repeat.is-beam {
  --score-symbol-image-width: 96%;
  --score-symbol-image-height: 86%;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-repeat.is-start,
html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-repeat.is-end {
  --score-symbol-image-width: clamp(0.66rem, 1.28vh, 0.86rem);
  --score-symbol-image-height: clamp(1.32rem, 2.34vh, 1.46rem);
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon text {
  fill: currentColor !important;
  font-family: "Bravura", "JMDT Noto Music", "Noto Music", "Apple Symbols", "Segoe UI Symbol", "STIX Two Text", serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon path,
html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon ellipse,
html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon circle,
html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon rect {
  vector-effect: non-scaling-stroke !important;
}

html[data-active-module="scoreEditor"] .score-palette-button.is-active > .score-symbol-icon,
html[data-active-module="scoreEditor"] .score-palette-button:hover > .score-symbol-icon {
  color: rgba(255, 250, 236, 0.99) !important;
}

/* support-title-two-lines-20260612-1: keep 客服中心 as two balanced lines. */
html[data-active-module="support"] .support-single-head .support-single-title {
  display: grid !important;
  gap: 0.08em !important;
  white-space: normal !important;
}

html[data-active-module="support"] .support-single-head .support-single-title span {
  display: block !important;
  white-space: nowrap !important;
}

/* ai-generate-busy-countdown-final-20260612-1: final centered order inside the busy card. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  gap: clamp(0.66rem, 0.95vw, 0.9rem) !important;
  width: min(100%, 18.2rem) !important;
  min-width: 0 !important;
  min-height: clamp(6.8rem, 9.6vw, 7.8rem) !important;
  margin: 0 auto !important;
  padding: clamp(0.92rem, 1.24vw, 1.16rem) clamp(0.96rem, 1.28vw, 1.22rem) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-stage {
  position: static !important;
  inset: auto !important;
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
  color: rgba(255, 238, 199, 0.98) !important;
  font-size: clamp(1.12rem, 1.42vw, 1.34rem) !important;
  font-weight: 940 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-overflow: clip !important;
  text-shadow: 0 0 0.72rem rgba(255, 195, 94, 0.24) !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter {
  position: static !important;
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: clamp(0.34rem, 0.5vw, 0.5rem) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > i {
  position: static !important;
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: clamp(0.26rem, 0.38vw, 0.38rem) !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > small,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > em {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > small {
  grid-column: 1 !important;
  grid-row: 2 !important;
  color: rgba(255, 226, 174, 0.86) !important;
  font-size: clamp(0.78rem, 0.94vw, 0.94rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > em {
  grid-column: 1 !important;
  grid-row: 3 !important;
  color: rgba(255, 226, 174, 0.64) !important;
  font-size: clamp(0.64rem, 0.78vw, 0.8rem) !important;
  font-weight: 720 !important;
}

/* profile-membership-preferences-actions-20260612-1: membership status actions, quota sync, order recovery, and profile privacy settings. */
html[data-active-module="profile"] .content-grid[data-module="profile"] {
  align-content: start !important;
  height: 100% !important;
  overflow: auto !important;
}

html[data-active-module="profile"] .profile-dashboard.profile-account-page {
  grid-template-rows:
    minmax(10.9rem, auto)
    minmax(12.2rem, auto)
    minmax(15.8rem, auto)
    minmax(18rem, auto) !important;
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
}

html[data-active-module="profile"] .profile-generated-card {
  grid-row: 3 !important;
}

html[data-active-module="profile"] .profile-orders-card {
  grid-row: 3 !important;
}

html[data-active-module="profile"] .profile-preferences-card {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, auto) !important;
  gap: clamp(0.76rem, 1vw, 1rem) !important;
  padding: clamp(1rem, 1.32vw, 1.28rem) !important;
  overflow: visible !important;
}

html[data-active-module="profile"] .profile-card-head-actions,
html[data-active-module="profile"] .profile-card-actions,
html[data-active-module="profile"] .profile-status-actions,
html[data-active-module="profile"] .profile-generated-actions,
html[data-active-module="profile"] .profile-order-actions,
html[data-active-module="profile"] .profile-order-empty-actions,
html[data-active-module="profile"] .profile-account-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.42rem !important;
  min-width: 0 !important;
}

html[data-active-module="profile"] .profile-card-actions {
  margin-top: 0.18rem !important;
}

html[data-active-module="profile"] .profile-status-actions {
  align-self: start !important;
}

html[data-active-module="profile"] .profile-card-primary,
html[data-active-module="profile"] .profile-card-secondary,
html[data-active-module="profile"] .profile-generated-actions :is(a, button),
html[data-active-module="profile"] .profile-order-actions :is(a, button),
html[data-active-module="profile"] .profile-order-empty-actions button,
html[data-active-module="profile"] .profile-account-actions button {
  min-height: 2.14rem !important;
  min-width: 0 !important;
  padding: 0 0.78rem !important;
  border: 1px solid rgba(232, 197, 126, 0.24) !important;
  border-radius: 999px !important;
  background: rgba(232, 197, 126, 0.11) !important;
  color: rgba(255, 232, 178, 0.96) !important;
  cursor: pointer !important;
  font: inherit !important;
  font-size: clamp(0.72rem, 0.78vw, 0.82rem) !important;
  font-weight: 860 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-card-secondary,
html[data-active-module="profile"] .profile-order-actions button,
html[data-active-module="profile"] .profile-order-empty-actions button:last-child {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(235, 230, 215, 0.84) !important;
}

html[data-active-module="profile"] .profile-card-primary:is(:hover, :focus-visible),
html[data-active-module="profile"] .profile-card-secondary:is(:hover, :focus-visible),
html[data-active-module="profile"] .profile-generated-actions :is(a, button):is(:hover, :focus-visible),
html[data-active-module="profile"] .profile-order-actions :is(a, button):is(:hover, :focus-visible),
html[data-active-module="profile"] .profile-order-empty-actions button:is(:hover, :focus-visible),
html[data-active-module="profile"] .profile-account-actions button:is(:hover, :focus-visible) {
  border-color: rgba(232, 197, 126, 0.42) !important;
  background: rgba(232, 197, 126, 0.18) !important;
  color: rgba(255, 244, 218, 0.98) !important;
  outline: 0 !important;
}

html[data-active-module="profile"] .profile-generated-actions button[disabled] {
  cursor: default !important;
  opacity: 0.68 !important;
}

html[data-active-module="profile"] .profile-quota-rule,
html[data-active-module="profile"] .profile-order-sync {
  margin: 0 !important;
  color: rgba(232, 197, 126, 0.72) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.8rem) !important;
  font-weight: 760 !important;
  line-height: 1.32 !important;
}

html[data-active-module="profile"] .profile-order-sync {
  padding: 0.1rem 0.2rem !important;
}

html[data-active-module="profile"] .profile-benefit-grid.is-guest {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html[data-active-module="profile"] .profile-benefit-grid span.is-locked {
  border-color: rgba(255, 255, 255, 0.065) !important;
  background: rgba(255, 255, 255, 0.026) !important;
}

html[data-active-module="profile"] .profile-benefit-grid span.is-locked b {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(232, 197, 126, 0.76) !important;
}

html[data-active-module="profile"] .profile-generated-item {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto auto !important;
  align-items: center !important;
}

html[data-active-module="profile"] .profile-generated-item.is-busy {
  border-color: rgba(232, 197, 126, 0.2) !important;
  background: linear-gradient(135deg, rgba(232, 197, 126, 0.07), rgba(255, 255, 255, 0.028)) !important;
}

html[data-active-module="profile"] .profile-generated-item.is-error,
html[data-active-module="profile"] .profile-order-item.is-attention {
  border-color: rgba(255, 174, 116, 0.22) !important;
  background: linear-gradient(135deg, rgba(255, 150, 91, 0.07), rgba(255, 255, 255, 0.025)) !important;
}

html[data-active-module="profile"] .profile-generated-actions {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  justify-self: end !important;
}

html[data-active-module="profile"] .profile-order-actions {
  grid-column: 1 / -1 !important;
  padding-top: 0.16rem !important;
}

html[data-active-module="profile"] .profile-order-item b.is-attention {
  background: rgba(255, 166, 100, 0.14) !important;
  color: rgba(255, 215, 184, 0.94) !important;
}

html[data-active-module="profile"] .profile-order-empty-actions {
  margin-top: 0.22rem !important;
}

html[data-active-module="profile"] .profile-settings-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.45fr) minmax(16rem, 0.7fr) !important;
  gap: clamp(0.72rem, 0.95vw, 0.95rem) !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html[data-active-module="profile"] .profile-settings-panel {
  display: grid !important;
  align-content: start !important;
  gap: clamp(0.66rem, 0.84vw, 0.84rem) !important;
  min-width: 0 !important;
  padding: clamp(0.78rem, 1vw, 1rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 0.5rem !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="profile"] .profile-settings-fields {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 0.42fr) !important;
  gap: 0.58rem !important;
}

html[data-active-module="profile"] .profile-settings-fields label {
  display: grid !important;
  gap: 0.34rem !important;
  min-width: 0 !important;
}

html[data-active-module="profile"] .profile-settings-fields span {
  color: rgba(246, 238, 218, 0.78) !important;
  font-size: 0.74rem !important;
  font-weight: 820 !important;
}

html[data-active-module="profile"] .profile-settings-fields input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 2.42rem !important;
  padding: 0 0.72rem !important;
  border: 1px solid rgba(232, 197, 126, 0.16) !important;
  border-radius: 0.46rem !important;
  background: rgba(0, 0, 0, 0.24) !important;
  color: rgba(255, 250, 238, 0.96) !important;
  font: inherit !important;
  font-size: 0.86rem !important;
  font-weight: 780 !important;
  outline: 0 !important;
  box-sizing: border-box !important;
}

html[data-active-module="profile"] .profile-settings-fields input:focus {
  border-color: rgba(232, 197, 126, 0.38) !important;
  box-shadow: 0 0 0 2px rgba(232, 197, 126, 0.08) !important;
}

html[data-active-module="profile"] .profile-privacy-grid {
  display: grid !important;
  gap: 0.54rem !important;
}

html[data-active-module="profile"] .profile-privacy-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.7rem !important;
  min-width: 0 !important;
  padding: 0.62rem 0.68rem !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0.46rem !important;
  background: rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="profile"] .profile-privacy-row strong,
html[data-active-module="profile"] .profile-account-actions strong {
  display: block !important;
  color: rgba(255, 250, 238, 0.92) !important;
  font-size: 0.84rem !important;
  font-weight: 880 !important;
}

html[data-active-module="profile"] .profile-privacy-row small,
html[data-active-module="profile"] .profile-account-actions small {
  display: block !important;
  margin-top: 0.18rem !important;
  color: rgba(221, 226, 224, 0.62) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
}

html[data-active-module="profile"] .profile-privacy-options {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 0.36rem !important;
}

html[data-active-module="profile"] .profile-privacy-options button {
  min-height: 2rem !important;
  padding: 0 0.62rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(226, 230, 226, 0.74) !important;
  cursor: pointer !important;
  font: inherit !important;
  font-size: 0.72rem !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-privacy-options button.is-active,
html[data-active-module="profile"] .profile-privacy-options button:is(:hover, :focus-visible) {
  border-color: rgba(232, 197, 126, 0.36) !important;
  background: rgba(232, 197, 126, 0.14) !important;
  color: rgba(255, 238, 200, 0.98) !important;
  outline: 0 !important;
}

html[data-active-module="profile"] .profile-account-actions {
  justify-content: space-between !important;
}

html[data-active-module="profile"] .profile-account-actions button {
  border-color: rgba(255, 174, 116, 0.24) !important;
  background: rgba(255, 135, 83, 0.08) !important;
  color: rgba(255, 222, 196, 0.94) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="profile"] .profile-benefit-grid.is-guest,
  html[data-active-module="profile"] .profile-settings-layout {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="profile"] .profile-preferences-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="profile"] .profile-card-head,
  html[data-active-module="profile"] .profile-account-actions,
  html[data-active-module="profile"] .profile-privacy-row {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="profile"] .profile-card-head {
    display: grid !important;
  }

  html[data-active-module="profile"] .profile-card-head-actions,
  html[data-active-module="profile"] .profile-status-actions,
  html[data-active-module="profile"] .profile-card-actions,
  html[data-active-module="profile"] .profile-privacy-options {
    justify-content: flex-start !important;
  }

  html[data-active-module="profile"] .profile-settings-fields,
  html[data-active-module="profile"] .profile-generated-list {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="profile"] .profile-generated-item {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="profile"] .profile-generated-actions {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
  }
}

/* ai-generate-busy-countdown-placement-true-tail-20260612-1: final placement for busy-card countdown. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: clamp(0.72rem, 1vw, 1rem) !important;
  width: min(100%, 18.2rem) !important;
  min-width: 0 !important;
  min-height: clamp(6.5rem, 9.2vw, 7.6rem) !important;
  margin: 0 auto !important;
  padding: clamp(0.86rem, 1.14vw, 1.08rem) clamp(0.92rem, 1.22vw, 1.18rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-stage {
  position: static !important;
  inset: auto !important;
  display: block !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  color: rgba(255, 238, 199, 0.98) !important;
  font-size: clamp(1.04rem, 1.3vw, 1.28rem) !important;
  font-weight: 940 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 0 0.72rem rgba(255, 195, 94, 0.24) !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter {
  display: grid !important;
  grid-row: 2 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: clamp(0.32rem, 0.5vw, 0.5rem) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > i {
  display: block !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > small,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > em {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > small {
  grid-row: 2 !important;
  color: rgba(255, 226, 174, 0.84) !important;
  font-size: clamp(0.74rem, 0.9vw, 0.92rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > em {
  grid-row: 3 !important;
  color: rgba(255, 226, 174, 0.62) !important;
  font-size: clamp(0.62rem, 0.76vw, 0.78rem) !important;
  font-weight: 720 !important;
}

/* support-prompt-column-final-20260612: quick-question buttons start at the textarea edge. */
html[data-active-module="support"] .support-single-prompts {
  grid-template-columns: minmax(7.8rem, auto) minmax(0, 1fr) !important;
}

html[data-active-module="support"] .support-single-prompt-list {
  grid-column: 2 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: clamp(0.75rem, 1.1vw, 1.1rem) !important;
  min-width: 0 !important;
}

html[data-active-module="support"] .support-single-prompt-list button {
  flex: 0 0 auto !important;
  justify-self: auto !important;
}

@media (max-width: 1180px) {
  html[data-active-module="support"] .support-single-prompt-list {
    grid-column: 1 !important;
  }
}

/* support-single-entry-scale-tail-20260612-1: final support entry sizing override. */
html[data-active-module="support"] .support-page.support-single-page,
html[data-active-module="support"] .support-single-page {
  min-height: calc(100dvh - 5.2rem) !important;
  padding: clamp(2.4rem, 4.2vw, 4.8rem) clamp(3.2rem, 6.2vw, 7rem) !important;
}

html[data-active-module="support"] .support-single-shell {
  width: min(100%, 88rem) !important;
}

html[data-active-module="support"] .support-single-card {
  width: 100% !important;
  min-height: clamp(34rem, 68vh, 46rem) !important;
  align-content: center !important;
  gap: clamp(2rem, 3vw, 3.2rem) !important;
  padding: clamp(2.2rem, 3.5vw, 4rem) clamp(2.4rem, 4vw, 4.8rem) !important;
  border: 1px solid rgba(255, 229, 177, 0.13) !important;
  border-radius: 1rem !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(217, 160, 72, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(8, 9, 10, 0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 1.4rem 4.2rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="support"] .support-single-head {
  grid-template-columns: minmax(20rem, 0.52fr) minmax(34rem, 1fr) !important;
  column-gap: clamp(2.8rem, 5vw, 6.2rem) !important;
  row-gap: clamp(0.5rem, 0.8vw, 0.85rem) !important;
}

html[data-active-module="support"] .support-single-head .eyebrow {
  font-size: clamp(1.16rem, 1.42vw, 1.46rem) !important;
}

html[data-active-module="support"] .support-single-head h3 {
  font-size: clamp(4.25rem, 6.4vw, 6.6rem) !important;
}

html[data-active-module="support"] .support-single-head p:not(.eyebrow) {
  max-width: 50rem !important;
  font-size: clamp(1.32rem, 1.58vw, 1.62rem) !important;
  line-height: 1.5 !important;
}

html[data-active-module="support"] .support-single-form {
  width: 100% !important;
  grid-template-columns: auto minmax(40rem, 1fr) auto !important;
  gap: clamp(1.15rem, 1.8vw, 2rem) clamp(1.2rem, 2vw, 2.2rem) !important;
}

html[data-active-module="support"] .support-single-field span,
html[data-active-module="support"] .support-single-prompts strong {
  font-size: clamp(1.32rem, 1.58vw, 1.62rem) !important;
}

html[data-active-module="support"] .support-single-field textarea {
  min-height: clamp(6.2rem, 10vw, 8.2rem) !important;
  max-height: clamp(9rem, 14vw, 12rem) !important;
  padding: clamp(1.08rem, 1.45vw, 1.42rem) clamp(1.22rem, 1.72vw, 1.7rem) !important;
  border-radius: 0.9rem !important;
  font-size: clamp(1.28rem, 1.52vw, 1.56rem) !important;
  line-height: 1.44 !important;
}

html[data-active-module="support"] .support-single-primary,
html[data-active-module="support"] .support-single-primary.glass-button.primary {
  min-width: clamp(13.2rem, 15vw, 15.6rem) !important;
  min-height: clamp(5.8rem, 8.6vw, 7.2rem) !important;
  padding: 1.2rem 2rem !important;
  border-radius: 1rem !important;
  font-size: clamp(1.28rem, 1.55vw, 1.62rem) !important;
}

html[data-active-module="support"] .support-single-prompts {
  gap: clamp(0.75rem, 1.1vw, 1.1rem) !important;
}

html[data-active-module="support"] .support-single-prompts button {
  min-height: clamp(3rem, 4.4vw, 3.6rem) !important;
  padding: 0.58rem 1.1rem !important;
  border-radius: 0.72rem !important;
  font-size: clamp(1.22rem, 1.45vw, 1.48rem) !important;
}

html[data-active-module="support"] .support-single-note,
html[data-active-module="support"] .support-single-status {
  font-size: clamp(1.24rem, 1.5vw, 1.55rem) !important;
  line-height: 1.5 !important;
}

@media (max-width: 980px) {
  html[data-active-module="support"] .support-page.support-single-page,
  html[data-active-module="support"] .support-single-page {
    padding: clamp(1.6rem, 5vw, 2.8rem) !important;
  }

  html[data-active-module="support"] .support-single-card {
    min-height: auto !important;
    align-content: start !important;
    padding: clamp(1.55rem, 5vw, 2.8rem) !important;
  }

  html[data-active-module="support"] .support-single-head,
  html[data-active-module="support"] .support-single-form {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-single-head {
    grid-template-areas:
      "eyebrow"
      "title"
      "intro" !important;
    text-align: left !important;
  }

  html[data-active-module="support"] .support-single-primary,
  html[data-active-module="support"] .support-single-primary.glass-button.primary {
    width: 100% !important;
    min-height: 4.4rem !important;
  }
}

/* support-half-step-final-tail-20260612: final visible polish after all support overrides. */
html[data-active-module="support"] .support-page.support-single-page,
html[data-active-module="support"] .support-single-page {
  min-height: 100% !important;
  padding: clamp(3rem, 5vw, 5.4rem) clamp(3.4rem, 6.4vw, 7rem) !important;
}

html[data-active-module="support"] .support-single-shell {
  width: min(100%, 84rem) !important;
}

html[data-active-module="support"] .support-single-card {
  width: 100% !important;
  min-height: 0 !important;
  align-content: center !important;
  gap: clamp(1.75rem, 2.45vw, 2.65rem) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="support"] .support-single-head {
  grid-template-columns: minmax(20rem, 0.42fr) minmax(43rem, 1fr) !important;
  column-gap: clamp(2.2rem, 4.2vw, 4.8rem) !important;
  row-gap: 0.54rem !important;
}

html[data-active-module="support"] .support-single-head .eyebrow {
  font-size: clamp(1.06rem, 1.24vw, 1.26rem) !important;
}

html[data-active-module="support"] .support-single-head h3 {
  font-size: clamp(3.9rem, 5.55vw, 5.65rem) !important;
  line-height: 0.98 !important;
}

html[data-active-module="support"] .support-single-head p:not(.eyebrow) {
  max-width: 54rem !important;
  font-size: clamp(1.2rem, 1.38vw, 1.42rem) !important;
  line-height: 1.48 !important;
}

html[data-active-module="support"] .support-single-form {
  width: min(100%, 80rem) !important;
  grid-template-columns: minmax(7.4rem, auto) minmax(38rem, 1fr) minmax(12rem, auto) !important;
  gap: clamp(0.95rem, 1.35vw, 1.35rem) clamp(1.15rem, 1.78vw, 1.9rem) !important;
}

html[data-active-module="support"] .support-single-field span,
html[data-active-module="support"] .support-single-prompts strong {
  font-size: clamp(1.16rem, 1.32vw, 1.34rem) !important;
}

html[data-active-module="support"] .support-single-field textarea {
  min-height: clamp(4.75rem, 6.4vw, 5.6rem) !important;
  max-height: clamp(7rem, 10vw, 9rem) !important;
  padding: clamp(0.96rem, 1.22vw, 1.22rem) clamp(1.08rem, 1.42vw, 1.4rem) !important;
  border-radius: 0.28rem !important;
  font-size: clamp(1.08rem, 1.24vw, 1.26rem) !important;
  line-height: 1.42 !important;
}

html[data-active-module="support"] .support-single-primary,
html[data-active-module="support"] .support-single-primary.glass-button.primary {
  min-width: clamp(11.8rem, 13vw, 13.6rem) !important;
  min-height: clamp(4.55rem, 6.2vw, 5.25rem) !important;
  padding: 0.98rem 1.7rem !important;
  border-radius: 0.78rem !important;
  font-size: clamp(1.14rem, 1.32vw, 1.34rem) !important;
}

html[data-active-module="support"] .support-single-prompts {
  gap: clamp(0.58rem, 0.86vw, 0.88rem) !important;
}

html[data-active-module="support"] .support-single-prompts button {
  min-height: clamp(2.58rem, 3.35vw, 3rem) !important;
  padding: 0.42rem 0.9rem !important;
  border-radius: 0.32rem !important;
  font-size: clamp(1.1rem, 1.26vw, 1.28rem) !important;
}

html[data-active-module="support"] .support-single-note,
html[data-active-module="support"] .support-single-status {
  font-size: clamp(1.08rem, 1.26vw, 1.28rem) !important;
  line-height: 1.46 !important;
}

@media (max-width: 1100px) {
  html[data-active-module="support"] .support-single-head,
  html[data-active-module="support"] .support-single-form {
    grid-template-columns: 1fr !important;
  }

html[data-active-module="support"] .support-single-head {
    grid-template-areas:
      "eyebrow"
      "title"
      "intro" !important;
  }

  html[data-active-module="support"] .support-single-primary,
  html[data-active-module="support"] .support-single-primary.glass-button.primary {
    width: 100% !important;
  }
}

/* support-composition-layout-20260612: two-column composition, form grouped as one workspace. */
html[data-active-module="support"] .support-page.support-single-page,
html[data-active-module="support"] .support-single-page {
  padding: clamp(3.2rem, 5.4vw, 5.8rem) clamp(3.6rem, 6.8vw, 7.6rem) !important;
}

html[data-active-module="support"] .support-single-shell {
  width: min(100%, 86rem) !important;
}

html[data-active-module="support"] .support-single-card {
  display: grid !important;
  grid-template-columns: minmax(20rem, 0.38fr) minmax(44rem, 1fr) !important;
  grid-template-areas: "head body" !important;
  align-items: center !important;
  column-gap: clamp(3rem, 5.4vw, 6.4rem) !important;
  row-gap: clamp(2rem, 3vw, 3rem) !important;
  width: 100% !important;
  padding: 0 !important;
}

html[data-active-module="support"] .support-single-head {
  grid-area: head !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "eyebrow"
    "title"
    "intro" !important;
  align-content: center !important;
  row-gap: clamp(0.5rem, 0.9vw, 0.9rem) !important;
  max-width: 28rem !important;
}

html[data-active-module="support"] .support-single-head .eyebrow {
  grid-area: eyebrow !important;
  font-size: clamp(1.02rem, 1.18vw, 1.2rem) !important;
}

html[data-active-module="support"] .support-single-head h3 {
  grid-area: title !important;
  font-size: clamp(4.1rem, 6vw, 6.1rem) !important;
  line-height: 0.96 !important;
}

html[data-active-module="support"] .support-single-head p:not(.eyebrow) {
  grid-area: intro !important;
  max-width: 25rem !important;
  margin-top: clamp(0.45rem, 0.8vw, 0.85rem) !important;
  font-size: clamp(1.05rem, 1.18vw, 1.2rem) !important;
  line-height: 1.58 !important;
}

html[data-active-module="support"] .support-single-form,
html[data-active-module="support"] .support-single-result,
html[data-active-module="support"] .support-single-human {
  grid-area: body !important;
  width: 100% !important;
  max-width: none !important;
}

html[data-active-module="support"] .support-single-form {
  display: grid !important;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) minmax(11.5rem, auto) !important;
  align-items: center !important;
  column-gap: clamp(1rem, 1.6vw, 1.8rem) !important;
  row-gap: clamp(0.9rem, 1.3vw, 1.35rem) !important;
}

html[data-active-module="support"] .support-single-field {
  display: contents !important;
}

html[data-active-module="support"] .support-single-field span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  font-size: clamp(1.12rem, 1.26vw, 1.28rem) !important;
}

html[data-active-module="support"] .support-single-field textarea {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-height: clamp(4.65rem, 6vw, 5.3rem) !important;
  max-height: clamp(7rem, 10vw, 8.8rem) !important;
  border-radius: 0.28rem !important;
}

html[data-active-module="support"] .support-single-primary,
html[data-active-module="support"] .support-single-primary.glass-button.primary {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  min-width: clamp(11.5rem, 12.6vw, 13rem) !important;
  min-height: 0 !important;
  border-radius: 0.78rem !important;
}

html[data-active-module="support"] .support-single-prompts {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(0.6rem, 0.9vw, 0.95rem) clamp(1rem, 1.6vw, 1.8rem) !important;
}

html[data-active-module="support"] .support-single-prompts strong {
  grid-column: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="support"] .support-single-prompt-list {
  grid-column: 2 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: clamp(0.58rem, 0.86vw, 0.88rem) !important;
  min-width: 0 !important;
}

html[data-active-module="support"] .support-single-prompt-list button {
  justify-self: auto !important;
}

html[data-active-module="support"] .support-single-note,
html[data-active-module="support"] .support-single-status {
  grid-column: 2 / -1 !important;
  max-width: 48rem !important;
}

html[data-active-module="support"] .support-single-result,
html[data-active-module="support"] .support-single-human {
  gap: clamp(1rem, 1.45vw, 1.55rem) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="support"] .support-single-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "head"
      "body" !important;
  }

  html[data-active-module="support"] .support-single-head {
    max-width: 100% !important;
  }

  html[data-active-module="support"] .support-single-head p:not(.eyebrow) {
    max-width: 44rem !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="support"] .support-page.support-single-page,
  html[data-active-module="support"] .support-single-page {
    padding: clamp(1.3rem, 5vw, 2.2rem) !important;
  }

  html[data-active-module="support"] .support-single-form,
  html[data-active-module="support"] .support-single-prompts {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-single-field {
    display: grid !important;
    gap: 0.72rem !important;
  }

  html[data-active-module="support"] .support-single-field span,
  html[data-active-module="support"] .support-single-field textarea,
  html[data-active-module="support"] .support-single-primary,
  html[data-active-module="support"] .support-single-primary.glass-button.primary,
  html[data-active-module="support"] .support-single-prompts,
  html[data-active-module="support"] .support-single-prompts strong,
  html[data-active-module="support"] .support-single-prompt-list,
  html[data-active-module="support"] .support-single-note,
  html[data-active-module="support"] .support-single-status {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  html[data-active-module="support"] .support-single-primary,
  html[data-active-module="support"] .support-single-primary.glass-button.primary {
    width: 100% !important;
    min-height: 4rem !important;
  }
}

/* support-prompt-alignment-tail-20260612: align quick prompts with the textarea column. */
html[data-active-module="support"] .support-single-prompts {
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) !important;
}

html[data-active-module="support"] .support-single-prompt-list {
  grid-column: 2 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: clamp(0.58rem, 0.86vw, 0.88rem) !important;
  min-width: 0 !important;
}

html[data-active-module="support"] .support-single-prompt-list button {
  flex: 0 0 auto !important;
}

@media (max-width: 760px) {
  html[data-active-module="support"] .support-single-prompt-list {
    grid-column: 1 !important;
  }
}

/* note-atlas-detail-breathing-room-true-tail-20260612-1: softer spacing for symbol detail cards. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  gap: clamp(0.9rem, 1.45vw, 1.35rem) !important;
  padding: clamp(1.28rem, 2.2vw, 2.05rem) clamp(1.28rem, 2.35vw, 2.25rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-breadcrumb {
  margin-bottom: clamp(0.18rem, 0.42vw, 0.38rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo h3 {
  margin: 0 0 clamp(0.12rem, 0.34vw, 0.32rem) !important;
  font-size: clamp(2rem, 3.28vw, 3rem) !important;
  line-height: 0.98 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-staff-demo {
  min-height: clamp(6.1rem, 15.6vh, 8.1rem) !important;
  border-radius: 0.78rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail {
  gap: clamp(0.78rem, 1.18vw, 1.08rem) !important;
  margin-top: clamp(0.2rem, 0.54vw, 0.46rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
  grid-template-columns: minmax(4.7rem, 5.8rem) minmax(0, 1fr) !important;
  min-height: clamp(4.08rem, 7.4vh, 5.25rem) !important;
  padding: clamp(0.88rem, 1.28vw, 1.18rem) clamp(0.98rem, 1.48vw, 1.42rem) !important;
  border-radius: 0.72rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail strong {
  align-self: start !important;
  padding-top: 0.08rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail em {
  line-height: 1.34 !important;
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo {
    gap: 0.8rem !important;
    padding: 1rem 0.9rem !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-staff-demo {
    min-height: 5.95rem !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail {
    gap: 0.7rem !important;
    margin-top: 0.1rem !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail span {
    min-height: 4.15rem !important;
    padding: 0.78rem 0.9rem 0.82rem 1rem !important;
  }
}

/* score-editor-hide-sidebar-measure-tools-20260612-1: remove redundant bottom score-tool buttons from the sidebar. */
html[data-active-module="scoreEditor"] .score-compose-panel {
  grid-template-rows:
    minmax(0, 1.06fr)
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(0, 0.86fr)
    minmax(0, 0.86fr)
    minmax(0, 0.7fr)
    minmax(0, 0.94fr) !important;
}

html[data-active-module="scoreEditor"] .score-score-settings {
  display: none !important;
}

/* note-atlas-overview-filled-layout-20260612-1: use the overview card height after removing search. */
html[data-active-module="violinKnowledge"] .knowledge-note-overview {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  gap: clamp(0.64rem, 0.96vw, 0.92rem) !important;
  min-height: 100% !important;
  padding: clamp(0.86rem, 1.28vw, 1.22rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-copy {
  max-width: 28rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.42rem, 0.62vw, 0.58rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts button {
  min-height: clamp(2.58rem, 4.25vh, 3.08rem) !important;
  padding: 0 clamp(0.62rem, 0.88vw, 0.86rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-all {
  display: grid !important;
  align-content: start !important;
  gap: clamp(0.42rem, 0.64vw, 0.62rem) !important;
  min-height: 0 !important;
  padding-top: clamp(0.1rem, 0.24vw, 0.2rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-all > strong {
  color: rgba(var(--library-study-gold-soft), 0.96) !important;
  font-size: clamp(0.76rem, 0.9vw, 0.94rem) !important;
  font-weight: 920 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-all > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.32rem, 0.5vw, 0.48rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-all button {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.42rem !important;
  min-width: 0 !important;
  min-height: clamp(2.04rem, 3.35vh, 2.38rem) !important;
  padding: 0 clamp(0.54rem, 0.78vw, 0.78rem) !important;
  border: 1px solid rgba(var(--library-study-line), 0.11) !important;
  border-radius: 0.5rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 246, 228, 0.9) !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-all button:hover {
  border-color: rgba(var(--library-study-gold-soft), 0.38) !important;
  background: rgba(var(--library-study-gold), 0.1) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-all span,
html[data-active-module="violinKnowledge"] .knowledge-note-overview-all small {
  overflow: hidden !important;
  min-width: 0 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-all span {
  color: rgba(255, 250, 238, 0.94) !important;
  font-size: clamp(0.7rem, 0.82vw, 0.86rem) !important;
  font-weight: 840 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-overview-all small {
  color: rgba(232, 224, 204, 0.56) !important;
  font-size: clamp(0.58rem, 0.68vw, 0.72rem) !important;
  font-weight: 720 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-recent {
  margin-top: auto !important;
}

@media (max-width: 720px) {
  html[data-active-module="violinKnowledge"] .knowledge-note-overview {
    gap: 0.58rem !important;
    padding: 0.74rem !important;
  }

  html[data-active-module="violinKnowledge"] .knowledge-note-overview-shortcuts,
  html[data-active-module="violinKnowledge"] .knowledge-note-overview-all > div {
    grid-template-columns: 1fr !important;
  }
}

/* support-entry-large-final-20260612-2: keep the customer-support submission area large after all later support overrides. */
html[data-active-module="support"] .support-page.support-single-page,
html[data-active-module="support"] .support-single-page {
  min-height: calc(100dvh - 5rem) !important;
  padding: clamp(2.2rem, 4.5vw, 5rem) clamp(2.6rem, 5.6vw, 6.8rem) !important;
}

html[data-active-module="support"] .support-single-shell {
  width: min(100%, 90rem) !important;
}

html[data-active-module="support"] .support-single-card {
  display: grid !important;
  grid-template-columns: minmax(22rem, 0.42fr) minmax(42rem, 1fr) !important;
  grid-template-areas: "head body" !important;
  align-items: center !important;
  width: 100% !important;
  min-height: clamp(34rem, 70vh, 48rem) !important;
  gap: clamp(2.2rem, 4vw, 5.2rem) !important;
  padding: clamp(2.3rem, 3.8vw, 4.4rem) clamp(2.4rem, 4.2vw, 4.8rem) !important;
  border: 1px solid rgba(255, 229, 177, 0.14) !important;
  border-radius: 1rem !important;
  background:
    radial-gradient(ellipse at 48% 0%, rgba(217, 160, 72, 0.13), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.012)),
    rgba(8, 9, 10, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 1.4rem 4.4rem rgba(0, 0, 0, 0.36) !important;
}

html[data-active-module="support"] .support-single-head {
  grid-area: head !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "eyebrow"
    "title"
    "intro" !important;
  align-content: center !important;
  max-width: 31rem !important;
  gap: clamp(0.55rem, 0.95vw, 0.95rem) !important;
  text-align: left !important;
}

html[data-active-module="support"] .support-single-head .eyebrow {
  font-size: clamp(1.14rem, 1.38vw, 1.46rem) !important;
}

html[data-active-module="support"] .support-single-head h3 {
  font-size: clamp(4.75rem, 7.2vw, 7.1rem) !important;
  line-height: 0.95 !important;
}

html[data-active-module="support"] .support-single-head p:not(.eyebrow) {
  max-width: 30rem !important;
  margin-top: clamp(0.35rem, 0.7vw, 0.75rem) !important;
  font-size: clamp(1.22rem, 1.46vw, 1.52rem) !important;
  line-height: 1.58 !important;
}

html[data-active-module="support"] .support-single-form,
html[data-active-module="support"] .support-single-result,
html[data-active-module="support"] .support-single-human {
  grid-area: body !important;
  width: 100% !important;
  max-width: none !important;
}

html[data-active-module="support"] .support-single-form {
  display: grid !important;
  grid-template-columns: minmax(7.8rem, auto) minmax(0, 1fr) minmax(13rem, auto) !important;
  align-items: stretch !important;
  gap: clamp(1rem, 1.55vw, 1.55rem) clamp(1.1rem, 1.8vw, 2rem) !important;
}

html[data-active-module="support"] .support-single-field {
  display: contents !important;
}

html[data-active-module="support"] .support-single-field span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  font-size: clamp(1.28rem, 1.54vw, 1.6rem) !important;
}

html[data-active-module="support"] .support-single-field textarea {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-height: clamp(6.4rem, 9vw, 8.4rem) !important;
  max-height: clamp(10rem, 14vw, 13rem) !important;
  padding: clamp(1.14rem, 1.55vw, 1.5rem) clamp(1.24rem, 1.8vw, 1.75rem) !important;
  border-radius: 0.86rem !important;
  font-size: clamp(1.3rem, 1.58vw, 1.62rem) !important;
  line-height: 1.45 !important;
}

html[data-active-module="support"] .support-single-primary,
html[data-active-module="support"] .support-single-primary.glass-button.primary {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  min-width: clamp(13rem, 15vw, 15.8rem) !important;
  min-height: 0 !important;
  border-radius: 0.95rem !important;
  font-size: clamp(1.28rem, 1.55vw, 1.62rem) !important;
}

html[data-active-module="support"] .support-single-prompts {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(7.8rem, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(0.75rem, 1.1vw, 1.1rem) clamp(1.1rem, 1.8vw, 2rem) !important;
}

html[data-active-module="support"] .support-single-prompts strong {
  grid-column: 1 !important;
  font-size: clamp(1.28rem, 1.54vw, 1.6rem) !important;
  white-space: nowrap !important;
}

html[data-active-module="support"] .support-single-prompts button {
  justify-self: start !important;
  min-height: clamp(3.05rem, 4.3vw, 3.65rem) !important;
  padding: 0.62rem 1.15rem !important;
  border-radius: 0.7rem !important;
  font-size: clamp(1.18rem, 1.42vw, 1.46rem) !important;
}

html[data-active-module="support"] .support-single-note,
html[data-active-module="support"] .support-single-status {
  grid-column: 2 / -1 !important;
  max-width: 58rem !important;
  font-size: clamp(1.18rem, 1.42vw, 1.48rem) !important;
  line-height: 1.52 !important;
}

@media (max-width: 1180px) {
  html[data-active-module="support"] .support-single-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "head"
      "body" !important;
    align-content: center !important;
    min-height: clamp(34rem, 72vh, 48rem) !important;
  }

  html[data-active-module="support"] .support-single-head {
    max-width: 100% !important;
  }

  html[data-active-module="support"] .support-single-head h3 {
    font-size: clamp(4.15rem, 9vw, 6rem) !important;
  }

  html[data-active-module="support"] .support-single-head p:not(.eyebrow) {
    max-width: 48rem !important;
  }

  html[data-active-module="support"] .support-single-form,
  html[data-active-module="support"] .support-single-prompts {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-single-field {
    display: grid !important;
    gap: 0.82rem !important;
  }

  html[data-active-module="support"] .support-single-field span,
  html[data-active-module="support"] .support-single-field textarea,
  html[data-active-module="support"] .support-single-primary,
  html[data-active-module="support"] .support-single-primary.glass-button.primary,
  html[data-active-module="support"] .support-single-prompts,
  html[data-active-module="support"] .support-single-prompts strong,
  html[data-active-module="support"] .support-single-note,
  html[data-active-module="support"] .support-single-status {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  html[data-active-module="support"] .support-single-field textarea {
    min-height: clamp(7.2rem, 16vw, 10rem) !important;
  }

  html[data-active-module="support"] .support-single-primary,
  html[data-active-module="support"] .support-single-primary.glass-button.primary {
    width: 100% !important;
    min-height: clamp(4.8rem, 9vw, 6rem) !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="support"] .support-page.support-single-page,
  html[data-active-module="support"] .support-single-page {
    padding: clamp(1.25rem, 4.8vw, 2.2rem) !important;
  }

  html[data-active-module="support"] .support-single-card {
    min-height: auto !important;
    padding: clamp(1.5rem, 5vw, 2.3rem) !important;
  }
}

/* note-atlas-category-home-clean-slate-20260612-1: single clean category grid, no cramped utility chrome. */
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-atlas {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-index-panel {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  min-height: 0 !important;
  padding: clamp(0.72rem, 1.1vw, 1.08rem) !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-search-panel,
html[data-active-module="violinKnowledge"] .knowledge-note-filter-strip,
html[data-active-module="violinKnowledge"] .knowledge-note-path-strip,
html[data-active-module="violinKnowledge"] .knowledge-note-direct-matches,
html[data-active-module="violinKnowledge"] .knowledge-note-overview {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(clamp(5.1rem, 10vh, 6.8rem), 1fr) !important;
  align-content: stretch !important;
  gap: clamp(0.62rem, 0.92vw, 0.92rem) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: clamp(0.72rem, 1.1vw, 1.06rem) !important;
  row-gap: 0.18rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(0.82rem, 1.2vw, 1.12rem) !important;
  border-radius: 0.7rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card > span {
  grid-row: 1 / 3 !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(2.62rem, 3.5vw, 3.18rem) !important;
  height: clamp(2.62rem, 3.5vw, 3.18rem) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 0 0.12rem !important;
  font-size: clamp(1.22rem, 1.72vw, 1.62rem) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card strong {
  align-self: end !important;
  overflow: hidden !important;
  min-width: 0 !important;
  color: rgba(255, 250, 238, 0.96) !important;
  font-size: clamp(1.02rem, 1.45vw, 1.38rem) !important;
  font-weight: 940 !important;
  line-height: 1.06 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card small {
  align-self: start !important;
  display: block !important;
  overflow: hidden !important;
  min-width: 0 !important;
  color: rgba(232, 224, 204, 0.62) !important;
  font-size: clamp(0.68rem, 0.86vw, 0.84rem) !important;
  font-weight: 760 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card p,
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card b,
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-card em {
  display: none !important;
}

@media (max-width: 960px) {
  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(4.7rem, auto) !important;
    overflow: auto !important;
  }
}

@media (max-width: 560px) {
  html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-index .knowledge-note-category-grid {
    grid-template-columns: 1fr !important;
  }
}

/* note-atlas-rest-card-drawn-readable-20260612-1: make rest cards use clear drawn symbols. */
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest {
  grid-template-rows: minmax(3rem, 1fr) auto !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card-glyph.is-drawn-rest-glyph {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: clamp(2.86rem, 4.5vw, 3.65rem) !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest .knowledge-note-card-rest {
  width: clamp(3.85rem, 5.2vw, 5.25rem) !important;
  height: clamp(2.76rem, 3.95vw, 3.72rem) !important;
  transform: scale(1.08) !important;
  transform-origin: center !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest .knowledge-drawn-rest.is-whole,
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest .knowledge-drawn-rest.is-half {
  transform: scale(1.14) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest .knowledge-drawn-rest.is-flagged {
  transform: scale(1.2) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest strong {
  margin-top: 0.08rem !important;
}

/* note-atlas-symbol-audit-fixes-20260612-1: keep audited notation symbols readable in cards. */
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card-glyph.is-key-signature-glyph {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.02rem, 0.12vw, 0.12rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(2.1rem, 3.1vw, 2.8rem) !important;
  overflow: visible !important;
  color: rgba(255, 226, 178, 0.98) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card-glyph.is-key-signature-glyph b {
  display: inline-block !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.3rem, 1.95vw, 1.9rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-shadow: 0 0 0.72rem rgba(255, 196, 96, 0.22) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card-glyph.is-key-signature-glyph b:nth-child(even) {
  transform: translateY(0.22rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest .knowledge-drawn-rest.is-whole .rest-block,
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest .knowledge-drawn-rest.is-half .rest-block {
  left: 32% !important;
  width: clamp(1.8rem, 2.35vw, 2.2rem) !important;
  height: clamp(0.44rem, 0.58vw, 0.6rem) !important;
  border-radius: 0.08rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest .knowledge-drawn-rest.is-whole .rest-block {
  top: calc(50% + 0.12rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest .knowledge-drawn-rest.is-half .rest-block {
  top: calc(50% - 0.62rem) !important;
}

/* ai-generate-busy-countdown-align-true-tail-20260612-1: keep busy card countdown and stage text stable. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: clamp(0.3rem, 0.48vw, 0.5rem) !important;
  width: min(100%, 18.2rem) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: clamp(0.72rem, 0.96vw, 0.96rem) clamp(0.84rem, 1.12vw, 1.12rem) !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > span,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > small,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > em {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.14 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > span {
  color: rgba(255, 238, 199, 0.98) !important;
  font-size: clamp(1.02rem, 1.22vw, 1.2rem) !important;
  font-weight: 930 !important;
  text-shadow: 0 0 0.7rem rgba(255, 195, 94, 0.24) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > small {
  display: block !important;
  color: rgba(255, 226, 174, 0.82) !important;
  font-size: clamp(0.72rem, 0.88vw, 0.9rem) !important;
  font-weight: 790 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > i {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > em {
  color: rgba(255, 226, 174, 0.66) !important;
  font-size: clamp(0.64rem, 0.78vw, 0.8rem) !important;
  font-weight: 720 !important;
}

/* support-prompt-column-absolute-tail-20260612: quick-question buttons align with the textarea column. */
html[data-active-module="support"] .support-single-prompts {
  grid-template-columns: minmax(7.8rem, auto) minmax(0, 1fr) !important;
}

html[data-active-module="support"] .support-single-prompt-list {
  grid-column: 2 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: clamp(0.75rem, 1.1vw, 1.1rem) !important;
  min-width: 0 !important;
}

html[data-active-module="support"] .support-single-prompt-list button {
  flex: 0 0 auto !important;
  justify-self: auto !important;
}

@media (max-width: 1180px) {
  html[data-active-module="support"] .support-single-prompt-list {
    grid-column: 1 !important;
  }
}
/* support-answer-fit-absolute-tail-20260612: answer/human states fit one screen without title squeeze. */
html[data-active-module="support"] .support-single-page[data-support-stage="answer"],
html[data-active-module="support"] .support-single-page[data-support-stage="human"] {
  align-items: center !important;
  padding: clamp(1rem, 2vw, 1.8rem) clamp(2rem, 4vw, 4.2rem) !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-shell,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-shell {
  width: min(100%, 78rem) !important;
  height: 100% !important;
  min-height: 0 !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-card,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "head"
    "body" !important;
  align-content: center !important;
  gap: clamp(0.8rem, 1.3vw, 1.2rem) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-head,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-head {
  grid-area: head !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "eyebrow intro"
    "title intro" !important;
  align-items: center !important;
  column-gap: clamp(1.6rem, 3vw, 3.4rem) !important;
  row-gap: 0.2rem !important;
  max-width: none !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-head h3,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-head h3 {
  white-space: nowrap !important;
  font-size: clamp(2.5rem, 4.6vw, 4rem) !important;
  line-height: 0.96 !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-head p:not(.eyebrow),
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-head p:not(.eyebrow) {
  max-width: none !important;
  margin: 0 !important;
  font-size: clamp(1rem, 1.25vw, 1.22rem) !important;
  line-height: 1.42 !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-result,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-human {
  grid-area: body !important;
  display: grid !important;
  gap: clamp(0.7rem, 1vw, 0.95rem) !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-back,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-back {
  min-height: 2.1rem !important;
  padding: 0.34rem 0.66rem !important;
  font-size: clamp(0.82rem, 0.95vw, 0.94rem) !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-question,
html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-answer-card,
html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-chat-card,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-human-dialog {
  padding: clamp(0.72rem, 1vw, 0.95rem) !important;
  border-radius: 0.52rem !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-question strong {
  font-size: clamp(1.08rem, 1.35vw, 1.32rem) !important;
  line-height: 1.18 !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-answer-card p,
html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box p {
  font-size: clamp(0.9rem, 1.08vw, 1.05rem) !important;
  line-height: 1.48 !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box {
  gap: clamp(0.5rem, 0.8vw, 0.72rem) !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-wecom-upload-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.52rem !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-upload-entry {
  min-height: 3.45rem !important;
  padding: 0.48rem !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-single-primary,
html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-single-primary.glass-button.primary {
  min-height: 3.2rem !important;
  min-width: 100% !important;
}

@media (max-width: 900px) {
  html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-head,
  html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-head {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "eyebrow"
      "title"
      "intro" !important;
  }

  html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-head h3,
  html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-head h3 {
    white-space: normal !important;
  }
}

/* ai-generate-busy-countdown-eof-20260612-1: real EOF override for centered countdown card. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  gap: clamp(0.66rem, 0.95vw, 0.9rem) !important;
  width: min(100%, 18.2rem) !important;
  min-width: 0 !important;
  min-height: clamp(6.8rem, 9.6vw, 7.8rem) !important;
  margin: 0 auto !important;
  padding: clamp(0.92rem, 1.24vw, 1.16rem) clamp(0.96rem, 1.28vw, 1.22rem) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-stage {
  position: static !important;
  inset: auto !important;
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
  color: rgba(255, 238, 199, 0.98) !important;
  font-size: clamp(1.12rem, 1.42vw, 1.34rem) !important;
  font-weight: 940 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-overflow: clip !important;
  text-shadow: 0 0 0.72rem rgba(255, 195, 94, 0.24) !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter {
  position: static !important;
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: clamp(0.34rem, 0.5vw, 0.5rem) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > i {
  position: static !important;
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: clamp(0.26rem, 0.38vw, 0.38rem) !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > small,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > em {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > small {
  grid-column: 1 !important;
  grid-row: 2 !important;
  color: rgba(255, 226, 174, 0.86) !important;
  font-size: clamp(0.78rem, 0.94vw, 0.94rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress > .generate-busy-meter > em {
  grid-column: 1 !important;
  grid-row: 3 !important;
  color: rgba(255, 226, 174, 0.64) !important;
  font-size: clamp(0.64rem, 0.78vw, 0.8rem) !important;
  font-weight: 720 !important;
}

/* ai-generate-busy-compact-status-eof-20260612-1: clean four-line status layout. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.42rem, 0.68vw, 0.64rem) !important;
  width: min(100%, 18.2rem) !important;
  min-width: 0 !important;
  min-height: clamp(7rem, 10vw, 8.2rem) !important;
  margin: 0 auto !important;
  padding: clamp(1rem, 1.35vw, 1.28rem) clamp(1rem, 1.35vw, 1.3rem) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-stage,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-countdown,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-quota {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-stage {
  order: 1 !important;
  color: rgba(255, 238, 199, 0.98) !important;
  font-size: clamp(1.18rem, 1.55vw, 1.46rem) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-shadow: 0 0 0.78rem rgba(255, 195, 94, 0.26) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-countdown {
  order: 2 !important;
  color: rgba(255, 226, 174, 0.86) !important;
  font-size: clamp(0.8rem, 0.96vw, 0.98rem) !important;
  font-weight: 830 !important;
  line-height: 1.08 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-bar {
  position: static !important;
  order: 3 !important;
  display: block !important;
  width: min(100%, 12.8rem) !important;
  min-width: 0 !important;
  height: clamp(0.3rem, 0.42vw, 0.42rem) !important;
  margin: 0.02rem auto 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-quota {
  order: 4 !important;
  color: rgba(255, 226, 174, 0.62) !important;
  font-size: clamp(0.66rem, 0.8vw, 0.82rem) !important;
  font-weight: 730 !important;
  line-height: 1.08 !important;
}

/* learning-tools-background-restore-20260612-1: restore the glass backplates without changing card image sizes. */
html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
  background:
    radial-gradient(ellipse at 0% 18%, rgba(232, 184, 111, 0.11), transparent 31%),
    radial-gradient(ellipse at 100% 14%, rgba(88, 130, 174, 0.1), transparent 36%),
    linear-gradient(90deg, rgba(232, 184, 111, 0.035), transparent 24%, transparent 76%, rgba(88, 130, 174, 0.035)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 5px) !important;
}

html[data-active-module="nav-learningTools"] .nav-workbench-tools,
html[data-active-module="nav-learningTools"] .tools-board-layout {
  border: 1px solid rgba(255, 232, 186, 0.12) !important;
  border-radius: clamp(1rem, 1.35vw, 1.35rem) !important;
  background:
    radial-gradient(ellipse at 8% 0%, rgba(232, 184, 111, 0.12), transparent 32%),
    radial-gradient(ellipse at 86% 0%, rgba(88, 130, 174, 0.1), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.008)),
    rgba(3, 4, 5, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1.25rem 3.4rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-section,
html[data-active-module="nav-learningTools"] .tools-practice-section {
  padding: clamp(0.72rem, 1vw, 1rem) !important;
  border: 1px solid rgba(255, 232, 186, 0.11) !important;
  border-radius: clamp(0.78rem, 1vw, 1rem) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008)),
    rgba(0, 0, 0, 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0.85rem 2rem rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="nav-learningTools"] .tools-card-arrow,
html[data-active-module="nav-learningTools"] .tools-practice-card > .tools-card-arrow,
html[data-active-module="nav-learningTools"] .tools-entry-card:hover .tools-card-arrow,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible .tools-card-arrow {
  display: grid !important;
  place-items: center !important;
  width: clamp(2.1rem, 2.75vw, 2.7rem) !important;
  height: clamp(2.1rem, 2.75vw, 2.7rem) !important;
  border: 1px solid rgba(255, 232, 186, 0.2) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.34) !important;
  color: rgba(255, 236, 198, 0.96) !important;
  opacity: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0.65rem 1.35rem rgba(0, 0, 0, 0.28) !important;
}

/* support-material-height-match-20260612-1: align material upload button with the human handoff button. */
html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box {
  align-items: stretch !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-material-button {
  align-self: stretch !important;
  height: 100% !important;
  min-height: clamp(3.2rem, 3.8vw, 3.45rem) !important;
  padding-block: 0.58rem !important;
  border-radius: 0.62rem !important;
  box-sizing: border-box !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-single-primary,
html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-single-primary.glass-button.primary {
  align-self: stretch !important;
  height: 100% !important;
  min-height: clamp(3.2rem, 3.8vw, 3.45rem) !important;
  box-sizing: border-box !important;
}

/* learning-tools-single-backplate-20260612-1: remove the duplicate inner module shell. */
html[data-active-module="nav-learningTools"] .tools-board-layout {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-section,
html[data-active-module="nav-learningTools"] .tools-practice-section {
  border-color: rgba(255, 232, 186, 0.075) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.006)),
    rgba(0, 0, 0, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* support-answer-title-inline-20260612-1: answer/human pages use one-line title to save space. */
html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-head .support-single-title,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-head .support-single-title {
  display: block !important;
  white-space: nowrap !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-head .support-single-title span,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-head .support-single-title span {
  display: inline !important;
  white-space: nowrap !important;
}

/* ai-generate-disable-upload-hover-scale-20260612-1: only the yellow upload card stays fixed while busy. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.is-hovered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked.is-hover-upload .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-submit-status-button:hover) .generate-reference-card-upload {
  z-index: 13 !important;
  transform: none !important;
  filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 188, 0.08),
    inset 0 0 1.8rem rgba(238, 173, 68, 0.055),
    0 1.05rem 2.3rem rgba(0, 0, 0, 0.28) !important;
  outline: 0 !important;
}

/* ai-generate-disable-upload-active-scale-20260612-1: the yellow busy card also stays fixed while pressing. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload:active,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.is-hovered:active,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-submit-status-button:active) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-reference-upload:active) .generate-reference-card-upload {
  z-index: 13 !important;
  transform: none !important;
  filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 188, 0.08),
    inset 0 0 1.8rem rgba(238, 173, 68, 0.055),
    0 1.05rem 2.3rem rgba(0, 0, 0, 0.28) !important;
  outline: 0 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-submit-status-button:active {
  transform: none !important;
}

/* support-human-action-visible-20260612-1: keep the handoff button text visible inside the compact support box. */
html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box {
  grid-template-columns: minmax(0, 1fr) auto minmax(11.8rem, 17.5rem) !important;
  overflow: visible !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-single-primary,
html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-single-primary.glass-button.primary {
  display: inline-grid !important;
  place-items: center !important;
  justify-self: end !important;
  width: clamp(11.8rem, 18vw, 17.5rem) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0.58rem 0.95rem !important;
  overflow: visible !important;
  color: rgba(255, 247, 232, 0.98) !important;
  font-size: clamp(0.94rem, 1.08vw, 1.08rem) !important;
  line-height: 1.08 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.26) !important;
}

@media (max-width: 900px) {
  html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-single-primary,
  html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-human-box .support-single-primary.glass-button.primary {
    width: 100% !important;
  }
}

/* learning-tools-remove-outer-shell-20260612-1: remove the remaining large rounded module frame. */
html[data-active-module="nav-learningTools"] .nav-workbench-tools,
html[data-active-module="nav-learningTools"] .tools-board-layout {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-section,
html[data-active-module="nav-learningTools"] .tools-practice-section {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* profile-library-style-20260612-1: keep existing profile content, restyle it like the score library. */
html[data-active-module="profile"] .content-grid[data-module="profile"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(0.72rem, 1vw, 1rem) !important;
  overflow: hidden !important;
}

html[data-active-module="profile"] .profile-dashboard.profile-account-page {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(19.5rem, 0.34fr) !important;
  grid-template-rows: minmax(7.8rem, 0.24fr) minmax(11rem, 0.32fr) minmax(0, 1fr) !important;
  gap: clamp(0.54rem, 0.74vw, 0.76rem) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="profile"] .profile-preferences-card {
  display: none !important;
}

html[data-active-module="profile"] .profile-account-page .profile-glass-card {
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 0.72rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
    rgba(6, 7, 7, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 1rem 2.6rem rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(22px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.05) !important;
}

html[data-active-module="profile"] .profile-account-summary {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(15rem, 0.35fr) !important;
  align-items: center !important;
  gap: clamp(0.78rem, 1.04vw, 1rem) !important;
  padding: clamp(0.72rem, 1.05vw, 1.05rem) !important;
}

html[data-active-module="profile"] .profile-avatar-mark {
  width: clamp(3.35rem, 4.3vw, 4.1rem) !important;
  height: clamp(3.35rem, 4.3vw, 4.1rem) !important;
  border-color: rgba(232, 197, 126, 0.28) !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 246, 224, 0.24), transparent 36%),
    rgba(232, 197, 126, 0.1) !important;
  font-size: clamp(1.45rem, 2.1vw, 2rem) !important;
}

html[data-active-module="profile"] .profile-account-copy h3 {
  max-width: 100% !important;
  overflow: hidden !important;
  color: rgba(255, 255, 252, 0.96) !important;
  font-size: clamp(1.82rem, 2.75vw, 3rem) !important;
  line-height: 0.98 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .profile-account-copy p:not(.eyebrow) {
  margin: 0.34rem 0 0 !important;
  color: rgba(226, 226, 220, 0.68) !important;
  font-size: clamp(0.76rem, 0.88vw, 0.92rem) !important;
  font-weight: 780 !important;
}

html[data-active-module="profile"] .profile-status-panel {
  gap: 0.26rem !important;
  padding: clamp(0.62rem, 0.82vw, 0.82rem) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  border-radius: 0.58rem !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="profile"] .profile-days-card,
html[data-active-module="profile"] .profile-quota-card {
  align-content: center !important;
  gap: 0.3rem !important;
  padding: clamp(0.86rem, 1.14vw, 1.12rem) !important;
}

html[data-active-module="profile"] .profile-days-card {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

html[data-active-module="profile"] .profile-quota-card {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

html[data-active-module="profile"] .profile-days-card strong,
html[data-active-module="profile"] .profile-quota-card strong {
  font-size: clamp(2.1rem, 3.65vw, 3.72rem) !important;
  line-height: 0.92 !important;
}

html[data-active-module="profile"] .profile-days-card small,
html[data-active-module="profile"] .profile-quota-card small,
html[data-active-module="profile"] .profile-quota-rule {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  color: rgba(226, 226, 220, 0.66) !important;
}

html[data-active-module="profile"] .profile-quota-rule {
  color: rgba(232, 197, 126, 0.74) !important;
}

html[data-active-module="profile"] .profile-benefits-card {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(0.54rem, 0.74vw, 0.74rem) !important;
  padding: clamp(0.82rem, 1.08vw, 1.08rem) !important;
}

html[data-active-module="profile"] .profile-generated-card {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

html[data-active-module="profile"] .profile-orders-card {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

html[data-active-module="profile"] .profile-generated-card,
html[data-active-module="profile"] .profile-orders-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(0.52rem, 0.7vw, 0.72rem) !important;
  padding: clamp(0.82rem, 1.08vw, 1.08rem) !important;
  overflow: hidden !important;
}

html[data-active-module="profile"] .profile-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.72rem !important;
}

html[data-active-module="profile"] .profile-card-head h3 {
  color: rgba(255, 255, 252, 0.94) !important;
  font-size: clamp(1rem, 1.12vw, 1.18rem) !important;
  line-height: 1.08 !important;
}

html[data-active-module="profile"] .profile-benefit-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(0.46rem, 0.64vw, 0.66rem) !important;
  min-height: 0 !important;
}

html[data-active-module="profile"] .profile-benefit-grid span,
html[data-active-module="profile"] .profile-generated-item,
html[data-active-module="profile"] .profile-order-item,
html[data-active-module="profile"] .profile-order-empty,
html[data-active-module="profile"] .profile-empty-state {
  border: 0 !important;
  border-radius: 0.58rem !important;
  background: rgba(255, 255, 255, 0.026) !important;
  box-shadow: none !important;
}

html[data-active-module="profile"] .profile-benefit-grid span {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-content: center !important;
  min-height: clamp(5.8rem, 7.4vw, 6.8rem) !important;
  padding: clamp(0.7rem, 0.92vw, 0.92rem) !important;
}

html[data-active-module="profile"] .profile-benefit-grid span b {
  width: 2rem !important;
  height: 2rem !important;
  grid-row: 1 / span 2 !important;
  border-radius: 999px !important;
  background: rgba(232, 197, 126, 0.1) !important;
  color: rgba(255, 225, 172, 0.88) !important;
}

html[data-active-module="profile"] .profile-benefit-grid span strong,
html[data-active-module="profile"] .profile-generated-item strong,
html[data-active-module="profile"] .profile-order-item strong {
  color: rgba(255, 255, 252, 0.93) !important;
  font-size: clamp(0.86rem, 0.96vw, 1rem) !important;
  font-weight: 880 !important;
}

html[data-active-module="profile"] .profile-benefit-grid span small,
html[data-active-module="profile"] .profile-generated-item small,
html[data-active-module="profile"] .profile-order-item small,
html[data-active-module="profile"] .profile-order-item em,
html[data-active-module="profile"] .profile-order-empty p,
html[data-active-module="profile"] .profile-empty-state p {
  color: rgba(226, 226, 220, 0.62) !important;
  font-size: clamp(0.66rem, 0.76vw, 0.78rem) !important;
  line-height: 1.32 !important;
}

html[data-active-module="profile"] .profile-generated-list,
html[data-active-module="profile"] .profile-order-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 0.46rem !important;
  overflow: auto !important;
}

html[data-active-module="profile"] .profile-generated-item,
html[data-active-module="profile"] .profile-order-item {
  min-height: clamp(3.9rem, 5vw, 4.7rem) !important;
  padding: clamp(0.62rem, 0.78vw, 0.82rem) !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01)) !important;
}

html[data-active-module="profile"] .profile-generated-item:nth-child(even),
html[data-active-module="profile"] .profile-order-item:nth-child(even) {
  background: rgba(255, 255, 255, 0.016) !important;
}

html[data-active-module="profile"] .profile-generated-item:is(:hover, :focus-within),
html[data-active-module="profile"] .profile-order-item:is(:hover, :focus-within) {
  background: linear-gradient(90deg, rgba(232, 197, 126, 0.07), rgba(255, 255, 255, 0.018) 54%, transparent 100%) !important;
}

html[data-active-module="profile"] .profile-generated-item b,
html[data-active-module="profile"] .profile-order-item b {
  padding: 0.14rem 0.42rem !important;
  border-radius: 999px !important;
  background: rgba(232, 197, 126, 0.11) !important;
  color: rgba(255, 226, 176, 0.94) !important;
  font-size: 0.64rem !important;
}

html[data-active-module="profile"] .profile-card-primary,
html[data-active-module="profile"] .profile-card-secondary,
html[data-active-module="profile"] .profile-generated-actions :is(a, button),
html[data-active-module="profile"] .profile-order-actions :is(a, button),
html[data-active-module="profile"] .profile-order-empty-actions button,
html[data-active-module="profile"] .profile-card-head .glass-button,
html[data-active-module="profile"] .profile-card-head-actions .glass-button {
  min-height: 2rem !important;
  padding: 0 0.72rem !important;
  border: 1px solid rgba(232, 197, 126, 0.3) !important;
  border-radius: 999px !important;
  background: rgba(9, 10, 12, 0.54) !important;
  color: rgba(255, 225, 172, 0.96) !important;
  font-size: clamp(0.68rem, 0.76vw, 0.78rem) !important;
  font-weight: 850 !important;
  box-shadow: inset 0 1px 0 rgba(255, 244, 218, 0.08) !important;
}

html[data-active-module="profile"] .profile-card-secondary,
html[data-active-module="profile"] .profile-order-actions button,
html[data-active-module="profile"] .profile-order-empty-actions button:last-child {
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: rgba(235, 230, 215, 0.78) !important;
}

html[data-active-module="profile"] .profile-card-actions,
html[data-active-module="profile"] .profile-status-actions,
html[data-active-module="profile"] .profile-card-head-actions,
html[data-active-module="profile"] .profile-order-empty-actions {
  gap: 0.34rem !important;
}

html[data-active-module="profile"] .profile-empty-state,
html[data-active-module="profile"] .profile-order-empty {
  align-content: center !important;
  min-height: clamp(7rem, 12vh, 10rem) !important;
  padding: clamp(0.86rem, 1vw, 1rem) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="profile"] .content-grid[data-module="profile"] {
    overflow: auto !important;
  }

  html[data-active-module="profile"] .profile-dashboard.profile-account-page {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

  html[data-active-module="profile"] .profile-account-summary,
  html[data-active-module="profile"] .profile-days-card,
  html[data-active-module="profile"] .profile-quota-card,
  html[data-active-module="profile"] .profile-benefits-card,
  html[data-active-module="profile"] .profile-generated-card,
  html[data-active-module="profile"] .profile-orders-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 820px) {
  html[data-active-module="profile"] .profile-account-summary {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  html[data-active-module="profile"] .profile-status-panel {
    grid-column: 1 / -1 !important;
  }

html[data-active-module="profile"] .profile-benefit-grid {
    grid-template-columns: 1fr !important;
  }
}

/* profile-library-style-tighten-20260612-1: avoid clipped right summary text in the library-style profile layout. */
html[data-active-module="profile"] .profile-dashboard.profile-account-page {
  grid-template-rows: minmax(8.45rem, 0.25fr) minmax(10.75rem, 0.31fr) minmax(0, 1fr) !important;
}

html[data-active-module="profile"] .profile-days-card {
  align-content: start !important;
}

html[data-active-module="profile"] .profile-days-card strong {
  font-size: clamp(1.95rem, 3.15vw, 3.08rem) !important;
}

html[data-active-module="profile"] .profile-days-card .profile-card-actions {
  margin-top: 0.08rem !important;
}

html[data-active-module="profile"] .profile-days-card .profile-card-primary,
html[data-active-module="profile"] .profile-days-card .profile-card-secondary {
  min-height: 1.86rem !important;
  padding: 0 0.64rem !important;
}

/* ai-generate-upload-default-size-match-20260612-1: make the yellow AI card match the other two default card sizes. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference {
  --generate-card-left: calc(25 / 1672 * 100%) !important;
  --generate-card-top: calc(27 / 846 * 100%) !important;
  --generate-card-width: calc(514 / 1672 * 100%) !important;
  --generate-card-height: calc(758 / 846 * 100%) !important;
  --generate-request-left: calc(var(--generate-card-left) + (18 / 1672 * 100%)) !important;
  --generate-request-top: calc(var(--generate-card-top) + (104 / 846 * 100%)) !important;
  --generate-request-width: calc(var(--generate-card-width) - (36 / 1672 * 100%)) !important;
  --generate-request-height: calc(486 / 846 * 100%) !important;
  --generate-submit-top: calc(var(--generate-card-top) + (648 / 846 * 100%)) !important;
  --generate-submit-height: calc(64 / 846 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload {
  left: var(--generate-card-left) !important;
  top: var(--generate-card-top) !important;
  width: var(--generate-card-width) !important;
  height: var(--generate-card-height) !important;
}

html[data-active-module="nav-generate"] .generate-reference-main-title {
  left: var(--generate-card-left) !important;
  top: calc(var(--generate-card-top) + (30 / 846 * 100%)) !important;
  width: var(--generate-card-width) !important;
}

html[data-active-module="nav-generate"] .generate-reference-options {
  left: var(--generate-request-left) !important;
  top: var(--generate-request-top) !important;
  width: var(--generate-request-width) !important;
  height: var(--generate-request-height) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button {
  left: var(--generate-request-left) !important;
  top: var(--generate-submit-top) !important;
  width: var(--generate-request-width) !important;
  height: var(--generate-submit-height) !important;
}

/* note-atlas-duration-rest-card-eof-fit-20260612-1: final note atlas card override. */
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-duration,
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest {
  position: relative !important;
  display: block !important;
  min-height: 4.26rem !important;
  padding: clamp(0.34rem, 0.48vw, 0.5rem) clamp(0.38rem, 0.54vw, 0.58rem) !important;
  overflow: hidden !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card-glyph.is-drawn-duration-glyph,
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card-glyph.is-drawn-rest-glyph {
  position: absolute !important;
  display: grid !important;
  place-items: center !important;
  top: 0.36rem !important;
  right: 0.44rem !important;
  bottom: auto !important;
  left: 0.44rem !important;
  width: auto !important;
  height: calc(100% - 2rem) !important;
  min-height: 0 !important;
  max-height: 2.32rem !important;
  overflow: visible !important;
  line-height: 1 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-duration .knowledge-note-card-duration,
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest .knowledge-note-card-rest {
  width: min(3.72rem, 84%) !important;
  height: min(2.26rem, 100%) !important;
  max-height: 100% !important;
  transform: none !important;
  transform-origin: center !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-duration .knowledge-note-card-duration.is-whole,
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-duration .knowledge-note-card-duration.is-breve,
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest .knowledge-drawn-rest.is-whole,
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest .knowledge-drawn-rest.is-half,
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest .knowledge-drawn-rest.is-flagged {
  transform: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-duration strong,
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-rest strong {
  position: absolute !important;
  right: 0.32rem !important;
  bottom: 0.28rem !important;
  left: 0.32rem !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 255, 248, 0.96) !important;
  font-size: clamp(0.58rem, 0.66vw, 0.7rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  z-index: 2 !important;
}

/* note-atlas-standard-svg-symbols-20260612-1: render duration/rest symbols as clean SVG notation. */
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest {
  display: grid !important;
  place-items: center !important;
  color: rgba(255, 226, 178, 0.98) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .knowledge-notation-svg,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .knowledge-notation-svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .knowledge-notation-svg *,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .knowledge-notation-svg * {
  transform-box: fill-box !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .knowledge-notation-font,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .knowledge-notation-font {
  display: block !important;
  font-family:
    "Apple Symbols",
    "Noto Music",
    "Bravura",
    "Gonville",
    "Segoe UI Symbol",
    "Arial Unicode MS",
    serif !important;
  font-size: clamp(2.16rem, 3.05vw, 2.88rem) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0.88 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-rendering: geometricPrecision !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-beamed .knowledge-notation-font {
  font-size: clamp(2rem, 2.78vw, 2.62rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .knowledge-notation-font {
  font-size: clamp(1.72rem, 2.42vw, 2.28rem) !important;
}

/* note-atlas-kill-handdrawn-fallback-20260612-1: never show the old hand-built note parts. */
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration > *,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest > * {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration::before,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest::before {
  display: block !important;
  font-family:
    "Apple Symbols",
    "Noto Music",
    "Bravura",
    "Gonville",
    "Segoe UI Symbol",
    "Arial Unicode MS",
    serif !important;
  font-size: clamp(2.16rem, 3.05vw, 2.88rem) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0.88 !important;
  letter-spacing: 0 !important;
  color: rgba(255, 226, 178, 0.98) !important;
  text-align: center !important;
  text-rendering: geometricPrecision !important;
  white-space: nowrap !important;
  content: "𝅘𝅥";
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-breve::before { content: "𝅜"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-whole::before { content: "𝅝"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-half::before { content: "𝅗𝅥"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-quarter::before { content: "𝅘𝅥"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-eighth::before { content: "𝅘𝅥𝅮"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-sixteenth::before { content: "𝅘𝅥𝅯"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-thirty-second::before { content: "𝅘𝅥𝅰"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-sixty-fourth::before { content: "𝅘𝅥𝅱"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-beamed-eighth::before { content: "♫"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-beamed-sixteenth::before { content: "♬"; }

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest::before {
  font-size: clamp(1.72rem, 2.42vw, 2.28rem) !important;
  content: "𝄽";
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-breve::before { content: "𝄺"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-whole::before { content: "𝄻"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-half::before { content: "𝄼"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-quarter::before { content: "𝄽"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-eighth::before { content: "𝄾"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-sixteenth::before { content: "𝄿"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-thirty-second::before { content: "𝅀"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-sixty-fourth::before { content: "𝅁"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-multi::before { content: "𝄩"; }

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.has-dots::after,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.has-dots::after {
  display: block !important;
  margin-left: 0.12em !important;
  color: rgba(255, 226, 178, 0.98) !important;
  font-family:
    "Apple Symbols",
    "Noto Music",
    "Bravura",
    "Gonville",
    "Segoe UI Symbol",
    "Arial Unicode MS",
    serif !important;
  font-size: clamp(1.25rem, 1.72vw, 1.6rem) !important;
  line-height: 1 !important;
  content: ".";
}

/* note-atlas-no-duplicate-font-eof-20260612-1: current JS font glyph wins over fallback. */
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration > .knowledge-notation-font,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest > .knowledge-notation-font {
  display: block !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration:has(.knowledge-notation-font)::before,
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration:has(.knowledge-notation-font)::after,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest:has(.knowledge-notation-font)::before,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest:has(.knowledge-notation-font)::after {
  display: none !important;
  content: none !important;
}

/* note-atlas-bundled-music-font-eof-20260612-1: ship the music glyph font so users do not see boxes. */
@font-face {
  font-family: "JMDT Noto Music";
  src: url("/platform/assets/fonts/NotoMusic-Regular.ttf?v=20260612-1") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .knowledge-notation-font,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .knowledge-notation-font,
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration::before,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest::before,
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.has-dots::after,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.has-dots::after {
  font-family:
    "JMDT Noto Music",
    "Apple Symbols",
    "Noto Music",
    "Bravura",
    "Gonville",
    "Segoe UI Symbol",
    "Arial Unicode MS",
    serif !important;
}

/* learning-tools-library-black-bg-final-20260612-1: final guard so the learning-tools page matches the library black stage. */
html[data-active-module="nav-learningTools"],
html[data-active-module="nav-learningTools"] body {
  background: #030405 !important;
}

html[data-active-module="nav-learningTools"] .app-shell,
html[data-active-module="nav-learningTools"] .main-stage,
html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
  background: #030405 !important;
}

html[data-active-module="nav-learningTools"] .app-shell::before,
html[data-active-module="nav-learningTools"] .app-shell::after,
html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"]::before,
html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"]::after {
  content: none !important;
  display: none !important;
}

html[data-active-module="nav-learningTools"] .nav-workbench-tools,
html[data-active-module="nav-learningTools"] .tools-board-layout,
html[data-active-module="nav-learningTools"] .tools-entry-section,
html[data-active-module="nav-learningTools"] .tools-practice-section {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ai-generate-final-visual-polish-true-eof-20260612-1: final AI generate visual guard after all duplicate tail blocks. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference {
  --generate-card-left: calc(25 / 1672 * 100%) !important;
  --generate-card-top: calc(27 / 846 * 100%) !important;
  --generate-card-width: calc(514 / 1672 * 100%) !important;
  --generate-card-height: calc(758 / 846 * 100%) !important;
  --generate-request-left: calc(var(--generate-card-left) + (18 / 1672 * 100%)) !important;
  --generate-request-top: calc(var(--generate-card-top) + (104 / 846 * 100%)) !important;
  --generate-request-width: calc(var(--generate-card-width) - (36 / 1672 * 100%)) !important;
  --generate-request-height: calc(486 / 846 * 100%) !important;
  --generate-submit-top: calc(var(--generate-card-top) + (648 / 846 * 100%)) !important;
  --generate-submit-height: calc(64 / 846 * 100%) !important;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload {
  left: var(--generate-card-left) !important;
  top: var(--generate-card-top) !important;
  width: var(--generate-card-width) !important;
  height: var(--generate-card-height) !important;
  --generate-card-accent: 255, 205, 112;
  --generate-card-jewel: 220, 154, 68;
}

html[data-active-module="nav-generate"] .generate-reference-card-editor {
  --generate-card-accent: 166, 212, 255;
  --generate-card-jewel: 74, 146, 210;
}

html[data-active-module="nav-generate"] .generate-reference-card-inspiration {
  --generate-card-accent: 232, 176, 255;
  --generate-card-jewel: 180, 95, 255;
}

html[data-active-module="nav-generate"] .generate-reference-card-upload,
html[data-active-module="nav-generate"] .generate-reference-card-editor,
html[data-active-module="nav-generate"] .generate-reference-card-inspiration {
  filter: none !important;
  transform-origin: center center !important;
  transition: transform 180ms cubic-bezier(0.2, 0.72, 0.24, 1), box-shadow 180ms ease !important;
  box-shadow:
    0 1.35rem 3.15rem rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 226, 172, 0.08),
    0 0 2.1rem rgba(var(--generate-card-accent), 0.16),
    0 0.18rem 1.4rem rgba(var(--generate-card-jewel), 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045) !important;
}

html[data-active-module="nav-generate"] .generate-reference-main-title {
  left: var(--generate-card-left) !important;
  top: calc(var(--generate-card-top) + (30 / 846 * 100%)) !important;
  width: var(--generate-card-width) !important;
}

html[data-active-module="nav-generate"] .generate-reference-options {
  left: var(--generate-request-left) !important;
  top: var(--generate-request-top) !important;
  width: var(--generate-request-width) !important;
  height: var(--generate-request-height) !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button {
  left: var(--generate-request-left) !important;
  top: var(--generate-submit-top) !important;
  width: var(--generate-request-width) !important;
  height: var(--generate-submit-height) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked):has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked):has(.generate-submit-status-button:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-editor:hover) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-inspiration:hover) .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-card-upload:hover,
html[data-active-module="nav-generate"] .generate-reference-card-editor:hover,
html[data-active-module="nav-generate"] .generate-reference-card-inspiration:hover,
html[data-active-module="nav-generate"] .generate-reference-card.is-hovered {
  z-index: 14 !important;
  transform: scale(1.045) !important;
  filter: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload:active,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.is-hovered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked.is-hover-upload .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-submit-status-button:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-reference-upload:active) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-submit-status-button:active) .generate-reference-card-upload {
  z-index: 13 !important;
  transform: none !important;
  filter: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.34rem, 0.52vw, 0.52rem) !important;
  width: min(100%, 17.7rem) !important;
  min-height: clamp(6.85rem, 9.25vw, 7.65rem) !important;
  padding: clamp(0.9rem, 1.12vw, 1.08rem) clamp(1rem, 1.26vw, 1.22rem) !important;
  overflow: hidden !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-stage,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-countdown,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-quota {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-stage {
  order: 1 !important;
  font-size: clamp(1.08rem, 1.38vw, 1.32rem) !important;
  font-weight: 930 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-countdown {
  order: 2 !important;
  color: rgba(255, 226, 174, 0.84) !important;
  font-size: clamp(0.76rem, 0.9vw, 0.92rem) !important;
  font-weight: 800 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-bar {
  position: static !important;
  order: 3 !important;
  display: block !important;
  width: min(100%, 12.55rem) !important;
  height: clamp(0.28rem, 0.38vw, 0.38rem) !important;
  margin: 0.02rem auto 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-quota {
  order: 4 !important;
  color: rgba(255, 226, 174, 0.58) !important;
  font-size: clamp(0.64rem, 0.76vw, 0.78rem) !important;
  font-weight: 720 !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  place-items: center !important;
  overflow: hidden !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > strong,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > strong {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > .generate-submit-busy-meta,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > .generate-submit-busy-meta,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > .generate-submit-busy-meta,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted > small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review > small,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working > small {
  display: none !important;
}

/* ai-generate-options-hover-true-eof-20260612-1: form-area hover also enlarges the yellow card before generation. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked):has(.generate-reference-options:hover) .generate-reference-card-upload {
  z-index: 14 !important;
  transform: scale(1.045) !important;
  filter: none !important;
}

/* support-center-polish-eof-20260612-1: tune existing support flow only; no new content or actions. */
html[data-active-module="support"] .support-page.support-single-page,
html[data-active-module="support"] .support-single-page {
  padding: clamp(1.35rem, 2.8vw, 3.2rem) clamp(1.55rem, 3.6vw, 4.6rem) !important;
}

html[data-active-module="support"] .support-single-shell {
  width: min(100%, 86rem) !important;
}

html[data-active-module="support"] .support-single-card {
  grid-template-columns: minmax(16rem, 0.34fr) minmax(0, 1fr) !important;
  gap: clamp(1.45rem, 2.65vw, 3.2rem) !important;
  min-height: clamp(30rem, 64vh, 40rem) !important;
  padding: clamp(1.85rem, 3vw, 3.35rem) clamp(1.85rem, 3.2vw, 3.65rem) !important;
}

html[data-active-module="support"] .support-single-head {
  max-width: 24rem !important;
  gap: clamp(0.48rem, 0.72vw, 0.78rem) !important;
}

html[data-active-module="support"] .support-single-title {
  display: block !important;
  white-space: nowrap !important;
}

html[data-active-module="support"] .support-single-title span {
  display: inline !important;
  white-space: nowrap !important;
}

html[data-active-module="support"] .support-single-head h3 {
  font-size: clamp(4.1rem, 5.9vw, 6rem) !important;
  line-height: 0.94 !important;
}

html[data-active-module="support"] .support-single-head p:not(.eyebrow) {
  font-size: clamp(1.08rem, 1.22vw, 1.28rem) !important;
  line-height: 1.52 !important;
}

html[data-active-module="support"] .support-single-form {
  grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr) minmax(12.5rem, 14.8rem) !important;
  gap: clamp(0.82rem, 1.2vw, 1.18rem) clamp(0.95rem, 1.45vw, 1.55rem) !important;
}

html[data-active-module="support"] .support-single-field span,
html[data-active-module="support"] .support-single-prompts strong {
  color: rgba(255, 230, 184, 0.92) !important;
  font-size: clamp(1.16rem, 1.32vw, 1.4rem) !important;
  font-weight: 880 !important;
}

html[data-active-module="support"] .support-single-field textarea {
  min-height: clamp(5.9rem, 7.8vw, 7.2rem) !important;
  padding: clamp(1rem, 1.28vw, 1.28rem) clamp(1.08rem, 1.48vw, 1.5rem) !important;
  border-color: rgba(255, 232, 186, 0.15) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.01)),
    rgba(0, 0, 0, 0.44) !important;
  font-size: clamp(1.14rem, 1.28vw, 1.36rem) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0.65rem 1.4rem rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="support"] .support-single-form > .support-single-primary,
html[data-active-module="support"] .support-single-form > .support-single-primary.glass-button.primary {
  min-width: 0 !important;
  min-height: clamp(5.9rem, 7.8vw, 7.2rem) !important;
  padding: 0.7rem 1rem !important;
  font-size: clamp(1.12rem, 1.28vw, 1.36rem) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 224, 0.22),
    0 0.75rem 1.75rem rgba(178, 112, 25, 0.24) !important;
}

html[data-active-module="support"] .support-single-prompts {
  margin-top: clamp(0.18rem, 0.42vw, 0.38rem) !important;
  grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr) !important;
}

html[data-active-module="support"] .support-single-prompt-list {
  gap: clamp(0.58rem, 0.78vw, 0.82rem) !important;
}

html[data-active-module="support"] .support-single-prompt-list button {
  min-height: clamp(2.82rem, 3.45vw, 3.16rem) !important;
  padding: 0.54rem 0.92rem !important;
  border-color: rgba(255, 225, 171, 0.19) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.014)),
    rgba(31, 32, 34, 0.62) !important;
  color: rgba(255, 239, 209, 0.9) !important;
  font-size: clamp(1rem, 1.12vw, 1.16rem) !important;
  font-weight: 850 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.052),
    0 0.5rem 1.1rem rgba(0, 0, 0, 0.18) !important;
}

html[data-active-module="support"] .support-single-prompt-list button:hover,
html[data-active-module="support"] .support-single-prompt-list button:focus-visible {
  border-color: rgba(255, 208, 129, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(255, 216, 145, 0.2), rgba(255, 176, 67, 0.08)),
    rgba(38, 31, 20, 0.78) !important;
  color: rgba(255, 248, 232, 0.98) !important;
  transform: translateY(-1px) !important;
}

html[data-active-module="support"] .support-single-note,
html[data-active-module="support"] .support-single-status {
  max-width: 52rem !important;
  color: rgba(229, 223, 211, 0.76) !important;
  font-size: clamp(0.98rem, 1.12vw, 1.16rem) !important;
  line-height: 1.45 !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-shell,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-shell {
  width: min(100%, 80rem) !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-card,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-card {
  padding: clamp(1.35rem, 2vw, 2.25rem) clamp(1.45rem, 2.45vw, 2.7rem) !important;
  gap: clamp(0.72rem, 1vw, 0.95rem) !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-head,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-head {
  grid-template-columns: auto minmax(0, 1fr) !important;
  column-gap: clamp(1.1rem, 2vw, 2.2rem) !important;
}

html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-head h3,
html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-head h3 {
  font-size: clamp(2.35rem, 3.65vw, 3.5rem) !important;
}

html[data-active-module="support"] .support-single-result,
html[data-active-module="support"] .support-single-human {
  gap: clamp(0.62rem, 0.86vw, 0.84rem) !important;
}

html[data-active-module="support"] .support-single-question,
html[data-active-module="support"] .support-single-answer-card,
html[data-active-module="support"] .support-single-human-box,
html[data-active-module="support"] .support-chat-card,
html[data-active-module="support"] .support-human-dialog {
  border-color: rgba(255, 232, 186, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.01)),
    rgba(0, 0, 0, 0.42) !important;
}

html[data-active-module="support"] .support-single-question {
  padding: clamp(0.72rem, 0.92vw, 0.9rem) clamp(0.85rem, 1.15vw, 1.08rem) !important;
}

html[data-active-module="support"] .support-single-question span,
html[data-active-module="support"] .support-single-answer-card span,
html[data-active-module="support"] .support-single-human-box span {
  color: rgba(255, 216, 145, 0.82) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem) !important;
  font-weight: 860 !important;
}

html[data-active-module="support"] .support-single-question strong {
  color: rgba(255, 249, 238, 0.96) !important;
  font-size: clamp(1.1rem, 1.28vw, 1.28rem) !important;
  line-height: 1.2 !important;
}

html[data-active-module="support"] .support-single-answer-card {
  padding: clamp(0.95rem, 1.18vw, 1.18rem) clamp(1rem, 1.32vw, 1.3rem) !important;
}

html[data-active-module="support"] .support-single-answer-card p {
  color: rgba(236, 231, 219, 0.86) !important;
  font-size: clamp(1rem, 1.12vw, 1.14rem) !important;
  line-height: 1.54 !important;
}

html[data-active-module="support"] .support-single-human-box {
  grid-template-columns: minmax(0, 1fr) minmax(9.8rem, 11.8rem) minmax(13.8rem, 18rem) !important;
  align-items: stretch !important;
  gap: clamp(0.62rem, 0.86vw, 0.86rem) !important;
  padding: clamp(0.78rem, 1vw, 1rem) !important;
}

html[data-active-module="support"] .support-material-button,
html[data-active-module="support"] .support-single-human-box .support-single-primary,
html[data-active-module="support"] .support-single-human-box .support-single-primary.glass-button.primary {
  min-height: clamp(3.35rem, 3.85vw, 3.8rem) !important;
  border-radius: 0.68rem !important;
}

html[data-active-module="support"] .support-material-button {
  display: grid !important;
  place-items: center !important;
  color: rgba(255, 234, 196, 0.96) !important;
  font-size: clamp(0.96rem, 1.08vw, 1.08rem) !important;
  font-weight: 880 !important;
}

html[data-active-module="support"] .support-single-human-box .support-single-primary,
html[data-active-module="support"] .support-single-human-box .support-single-primary.glass-button.primary {
  width: 100% !important;
  padding-inline: clamp(0.86rem, 1.18vw, 1.16rem) !important;
  font-size: clamp(1.02rem, 1.14vw, 1.16rem) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="support"] .support-single-card {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-single-head {
    max-width: 100% !important;
  }

  html[data-active-module="support"] .support-single-form,
  html[data-active-module="support"] .support-single-prompts {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  html[data-active-module="support"] .support-single-head h3 {
    font-size: clamp(3.15rem, 9vw, 4.5rem) !important;
  }

  html[data-active-module="support"] .support-single-page[data-support-stage="answer"] .support-single-head,
  html[data-active-module="support"] .support-single-page[data-support-stage="human"] .support-single-head {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="support"] .support-single-human-box {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  html[data-active-module="support"] .content-grid[data-module="support"] {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden !important;
  }

  html[data-active-module="support"] .support-page.support-single-page,
  html[data-active-module="support"] .support-single-page {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 1rem !important;
  }

  html[data-active-module="support"] .support-single-shell,
  html[data-active-module="support"] .support-single-card,
  html[data-active-module="support"] .support-single-head,
  html[data-active-module="support"] .support-single-form,
  html[data-active-module="support"] .support-single-prompts {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html[data-active-module="support"] .support-single-card {
    padding: 1.18rem !important;
    border-radius: 0.82rem !important;
  }

  html[data-active-module="support"] .support-single-title {
    white-space: normal !important;
  }

  html[data-active-module="support"] .support-single-head h3 {
    font-size: clamp(2.75rem, 13vw, 3.8rem) !important;
  }

  html[data-active-module="support"] .support-single-form > .support-single-primary,
  html[data-active-module="support"] .support-single-form > .support-single-primary.glass-button.primary {
    min-height: 4.6rem !important;
  }

  html[data-active-module="support"] .support-single-prompt-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-active-module="support"] .support-single-prompt-list button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* profile-library-minimal-final-20260612-1: keep profile compact after later EOF overrides. */
html[data-active-module="profile"],
html[data-active-module="profile"] body,
html[data-active-module="profile"] .app-shell,
html[data-active-module="profile"] .main-stage,
html[data-active-module="profile"] .content-grid[data-module="profile"] {
  background: #030405 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] {
  align-items: start !important;
  align-content: start !important;
  overflow: auto !important;
}

html[data-active-module="profile"] .profile-dashboard.profile-account-page {
  align-self: start !important;
  align-content: start !important;
  grid-template-columns: minmax(0, 1fr) minmax(13.8rem, 0.25fr) !important;
  grid-template-rows: max-content max-content max-content !important;
  height: max-content !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html[data-active-module="profile"] .profile-account-summary,
html[data-active-module="profile"] .profile-days-card,
html[data-active-module="profile"] .profile-quota-card,
html[data-active-module="profile"] .profile-benefits-card,
html[data-active-module="profile"] .profile-generated-card,
html[data-active-module="profile"] .profile-orders-card {
  align-self: start !important;
  height: auto !important;
}

html[data-active-module="profile"] .profile-account-summary {
  min-height: clamp(5.1rem, 7.6vh, 6.1rem) !important;
}

html[data-active-module="profile"] .profile-days-card,
html[data-active-module="profile"] .profile-quota-card {
  min-height: clamp(5.45rem, 8.4vh, 6.25rem) !important;
  gap: 0.12rem !important;
  padding: clamp(0.48rem, 0.68vw, 0.68rem) !important;
}

html[data-active-module="profile"] .profile-days-card .profile-card-actions,
html[data-active-module="profile"] .profile-quota-card .profile-card-actions {
  margin-top: 0.04rem !important;
}

html[data-active-module="profile"] .profile-days-card .profile-card-primary,
html[data-active-module="profile"] .profile-days-card .profile-card-secondary,
html[data-active-module="profile"] .profile-quota-card .profile-card-primary,
html[data-active-module="profile"] .profile-quota-card .profile-card-secondary {
  min-height: 1.42rem !important;
}

html[data-active-module="profile"] .profile-benefits-card {
  min-height: clamp(6.6rem, 10vh, 8rem) !important;
}

html[data-active-module="profile"] .profile-generated-card,
html[data-active-module="profile"] .profile-orders-card {
  grid-template-rows: auto auto !important;
  min-height: clamp(5.7rem, 9vh, 7rem) !important;
}

html[data-active-module="profile"] .profile-generated-list,
html[data-active-module="profile"] .profile-order-list {
  align-self: start !important;
  height: auto !important;
}

html[data-active-module="profile"] .profile-empty-state,
html[data-active-module="profile"] .profile-order-empty {
  min-height: clamp(2.85rem, 4.8vh, 3.55rem) !important;
}

html[data-active-module="profile"] .profile-preferences-card {
  display: none !important;
}

@media (max-width: 1180px) {
  html[data-active-module="profile"] .profile-dashboard.profile-account-page {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }
}

/* profile-card-minheight-final-20260612-1: outrank older generic card min-height rules. */
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page .profile-account-summary {
  min-height: clamp(5.1rem, 7.6vh, 6.1rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page .profile-days-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page .profile-quota-card {
  min-height: clamp(5.45rem, 8.4vh, 6.25rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page .profile-benefits-card {
  min-height: clamp(6.6rem, 10vh, 8rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page .profile-generated-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page .profile-orders-card {
  min-height: clamp(5.7rem, 9vh, 7rem) !important;
}

/* profile-orders-empty-readable-20260612-1: keep the narrow order card compact but readable. */
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page .profile-order-empty {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  gap: 0.2rem !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page .profile-order-empty strong,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page .profile-order-empty p,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page .profile-order-empty-actions {
  grid-column: 1 !important;
  grid-row: auto !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page .profile-order-empty-actions {
  justify-self: start !important;
  margin-top: 0.08rem !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page .profile-order-empty p {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  white-space: normal !important;
}

/* learning-tools-practice-card-separation-20260612-1: keep tuner and metronome as two independent cards on the black library background. */
html[data-active-module="nav-learningTools"] .tools-practice-section {
  overflow: visible !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: clamp(1.05rem, 1.42vw, 1.55rem) !important;
  row-gap: clamp(0.9rem, 1.12vw, 1.18rem) !important;
  background: #030405 !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
  border: 1px solid rgba(255, 232, 186, 0.12) !important;
  border-radius: clamp(0.9rem, 1.12vw, 1.18rem) !important;
  background-color: #050607 !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 0.9rem 2.1rem rgba(0, 0, 0, 0.28) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner {
  overflow: hidden !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
  overflow: visible !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after {
  border-radius: inherit !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before {
  right: 0 !important;
  left: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-learningTools"] .tools-practice-grid {
    grid-template-columns: 1fr !important;
  }
}

/* note-atlas-kill-handdrawn-eof-20260612-1: final override, no hand-built notation pieces. */
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.06em !important;
  color: rgba(255, 226, 178, 0.98) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration > *,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest > * {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration::before,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest::before {
  display: block !important;
  font-family:
    "Apple Symbols",
    "Noto Music",
    "Bravura",
    "Gonville",
    "Segoe UI Symbol",
    "Arial Unicode MS",
    serif !important;
  font-size: clamp(2.16rem, 3.05vw, 2.88rem) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0.88 !important;
  letter-spacing: 0 !important;
  color: rgba(255, 226, 178, 0.98) !important;
  text-align: center !important;
  text-rendering: geometricPrecision !important;
  white-space: nowrap !important;
  content: "𝅘𝅥";
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-breve::before { content: "𝅜"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-whole::before { content: "𝅝"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-half::before { content: "𝅗𝅥"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-quarter::before { content: "𝅘𝅥"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-eighth::before { content: "𝅘𝅥𝅮"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-sixteenth::before { content: "𝅘𝅥𝅯"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-thirty-second::before { content: "𝅘𝅥𝅰"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-sixty-fourth::before { content: "𝅘𝅥𝅱"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-beamed-eighth::before { content: "♫"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-beamed-sixteenth::before { content: "♬"; }

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest::before {
  font-size: clamp(1.72rem, 2.42vw, 2.28rem) !important;
  content: "𝄽";
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-breve::before { content: "𝄺"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-whole::before { content: "𝄻"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-half::before { content: "𝄼"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-quarter::before { content: "𝄽"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-eighth::before { content: "𝄾"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-sixteenth::before { content: "𝄿"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-thirty-second::before { content: "𝅀"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-sixty-fourth::before { content: "𝅁"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-multi::before { content: "𝄩"; }

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.has-dots::after,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.has-dots::after {
  display: block !important;
  margin-left: 0.1em !important;
  color: rgba(255, 226, 178, 0.98) !important;
  font-family:
    "Apple Symbols",
    "Noto Music",
    "Bravura",
    "Gonville",
    "Segoe UI Symbol",
    "Arial Unicode MS",
    serif !important;
  font-size: clamp(1.25rem, 1.72vw, 1.6rem) !important;
  line-height: 1 !important;
  content: ".";
}

/* profile-dedupe-proportion-final-20260612-1: fewer repeated actions and calmer status typography. */
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page {
  grid-template-rows: max-content max-content max-content !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel {
  grid-template-columns: 1fr !important;
  align-content: center !important;
  gap: 0.16rem !important;
  padding: clamp(0.44rem, 0.62vw, 0.62rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel p,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel span,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel strong {
  grid-column: 1 !important;
  grid-row: auto !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel strong {
  font-size: clamp(0.82rem, 0.94vw, 0.98rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-actions:empty,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-actions:empty,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-head-actions:empty,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-empty-actions:empty {
  display: none !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card {
  align-content: center !important;
  min-height: clamp(4.35rem, 6.6vh, 5.1rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card strong {
  color: rgba(255, 255, 252, 0.94) !important;
  font-size: clamp(1.18rem, 1.54vw, 1.48rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card {
  min-height: clamp(5.15rem, 7.8vh, 5.9rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card strong {
  font-size: clamp(1.82rem, 2.68vw, 2.56rem) !important;
  line-height: 0.94 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefits-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-orders-card {
  padding: clamp(0.46rem, 0.66vw, 0.66rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefits-card {
  min-height: clamp(6.25rem, 9.2vh, 7.25rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-orders-card {
  min-height: clamp(4.8rem, 7.6vh, 5.85rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card .profile-card-head,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-orders-card .profile-card-head {
  min-height: 1.6rem !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-empty {
  min-height: clamp(3.25rem, 5.4vh, 4.1rem) !important;
  align-content: center !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-empty-state {
  min-height: clamp(2.75rem, 4.8vh, 3.45rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-primary,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-secondary,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-head .glass-button,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-head-actions .glass-button,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-actions :is(a, button),
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-actions :is(a, button) {
  min-height: clamp(1.42rem, 2.18vh, 1.62rem) !important;
  padding: 0 0.48rem !important;
  font-size: clamp(0.56rem, 0.64vw, 0.66rem) !important;
}

/* profile-status-number-linebox-20260612-1: avoid clipped status numerals after resizing. */
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card strong,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card strong {
  display: flex !important;
  align-items: center !important;
  min-height: 1.36em !important;
  overflow: visible !important;
  line-height: 1.18 !important;
}

/* learning-tools-breathing-layout-final-20260612-1: add page breathing room and a real gutter between the two practice cards. */
html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
  display: block !important;
  height: calc(var(--app-height, 100dvh) - clamp(4.35rem, 5.25vw, 5.45rem)) !important;
  padding:
    clamp(1.85rem, 2.65vw, 2.9rem)
    clamp(2.65rem, 4.9vw, 5.25rem)
    clamp(2.6rem, 4.25vw, 4.65rem) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #030405 !important;
  scrollbar-gutter: stable both-edges !important;
}

html[data-active-module="nav-learningTools"] .nav-workbench.nav-workbench-tools {
  width: min(100%, 92rem) !important;
  max-width: 92rem !important;
  height: auto !important;
  margin: 0 auto !important;
}

html[data-active-module="nav-learningTools"] .tools-board-layout {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: clamp(2.2rem, 3.15vw, 3.55rem) !important;
  height: auto !important;
  align-content: start !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-section {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: clamp(1.08rem, 1.42vw, 1.62rem) !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html[data-active-module="nav-learningTools"] .tools-learning-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(1.05rem, 1.55vw, 1.7rem) !important;
  height: auto !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-section {
  padding-top: clamp(0.45rem, 0.75vw, 0.9rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-section::before {
  top: clamp(-1.35rem, -1.25vw, -0.8rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-grid {
  --tools-practice-card-trim: clamp(0.42rem, 0.78vw, 0.9rem);
  --tools-practice-center-gutter: clamp(2.65rem, 4vw, 4.55rem);
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: var(--tools-practice-center-gutter) !important;
  row-gap: clamp(1.2rem, 1.6vw, 1.72rem) !important;
  height: auto !important;
  overflow: visible !important;
  background: #030405 !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
  box-sizing: border-box !important;
  width: calc(100% - var(--tools-practice-card-trim)) !important;
  min-width: 0 !important;
  border: 1px solid rgba(255, 232, 186, 0.14) !important;
  border-radius: clamp(0.92rem, 1.16vw, 1.22rem) !important;
  background-color: #050607 !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1rem 2.35rem rgba(0, 0, 0, 0.32) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner {
  justify-self: start !important;
  overflow: hidden !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
  justify-self: end !important;
  overflow: visible !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after {
  border-radius: inherit !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before {
  right: 0 !important;
  left: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 1180px) {
  html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
    padding-inline: clamp(1.25rem, 4vw, 2.2rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-learning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="nav-learningTools"] .tools-practice-grid {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
  html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
    width: 100% !important;
    justify-self: stretch !important;
  }
}

/* learning-tools-card-hover-scale-final-20260612-1: every learning-tools module gently grows on hover or press. */
html[data-active-module="nav-learningTools"] .tools-entry-card {
  transform-origin: center center !important;
  will-change: transform, filter, box-shadow !important;
  transition:
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible {
  transform: translate3d(0, -0.12rem, 0) scale(1.018) !important;
  filter: brightness(1.07) saturate(1.04) !important;
  z-index: 6 !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card:active {
  transform: translate3d(0, -0.04rem, 0) scale(1.012) !important;
  filter: brightness(1.05) saturate(1.03) !important;
  z-index: 7 !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  transform: translate3d(0, -0.16rem, 0) scale(1.016) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:active,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active {
  transform: translate3d(0, -0.06rem, 0) scale(1.012) !important;
}

/* note-atlas-bundled-music-font-eof-final-20260612-1: ship the music glyph font so users do not see boxes. */
@font-face {
  font-family: "JMDT Noto Music";
  src: url("/platform/assets/fonts/NotoMusic-Regular.ttf?v=20260612-1") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.06em !important;
  color: rgba(255, 226, 178, 0.98) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration > :not(.knowledge-notation-font),
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest > :not(.knowledge-notation-font) {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration > .knowledge-notation-font,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest > .knowledge-notation-font {
  display: block !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .knowledge-notation-font,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .knowledge-notation-font,
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration::before,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest::before,
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.has-dots::after,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.has-dots::after {
  font-family:
    "JMDT Noto Music",
    "Apple Symbols",
    "Noto Music",
    "Bravura",
    "Gonville",
    "Segoe UI Symbol",
    "Arial Unicode MS",
    serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: rgba(255, 226, 178, 0.98) !important;
  text-align: center !important;
  text-rendering: geometricPrecision !important;
  white-space: nowrap !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration .knowledge-notation-font,
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration::before {
  font-size: clamp(2.16rem, 3.05vw, 2.88rem) !important;
  line-height: 0.88 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest .knowledge-notation-font,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest::before {
  font-size: clamp(1.72rem, 2.42vw, 2.28rem) !important;
  line-height: 0.9 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration:has(.knowledge-notation-font)::before,
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration:has(.knowledge-notation-font)::after,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest:has(.knowledge-notation-font)::before,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest:has(.knowledge-notation-font)::after {
  display: none !important;
  content: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration:not(:has(.knowledge-notation-font))::before,
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest:not(:has(.knowledge-notation-font))::before {
  display: block !important;
  content: "𝅘𝅥";
}

html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-breve:not(:has(.knowledge-notation-font))::before { content: "𝅜"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-whole:not(:has(.knowledge-notation-font))::before { content: "𝅝"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-half:not(:has(.knowledge-notation-font))::before { content: "𝅗𝅥"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-quarter:not(:has(.knowledge-notation-font))::before { content: "𝅘𝅥"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-eighth:not(:has(.knowledge-notation-font))::before { content: "𝅘𝅥𝅮"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-sixteenth:not(:has(.knowledge-notation-font))::before { content: "𝅘𝅥𝅯"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-thirty-second:not(:has(.knowledge-notation-font))::before { content: "𝅘𝅥𝅰"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-sixty-fourth:not(:has(.knowledge-notation-font))::before { content: "𝅘𝅥𝅱"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-beamed-eighth:not(:has(.knowledge-notation-font))::before { content: "♫"; }
html[data-active-module="violinKnowledge"] .knowledge-note-card-duration.is-beamed-sixteenth:not(:has(.knowledge-notation-font))::before { content: "♬"; }

html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-breve:not(:has(.knowledge-notation-font))::before { content: "𝄺"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-whole:not(:has(.knowledge-notation-font))::before { content: "𝄻"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-half:not(:has(.knowledge-notation-font))::before { content: "𝄼"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-quarter:not(:has(.knowledge-notation-font))::before { content: "𝄽"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-eighth:not(:has(.knowledge-notation-font))::before { content: "𝄾"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-sixteenth:not(:has(.knowledge-notation-font))::before { content: "𝄿"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-thirty-second:not(:has(.knowledge-notation-font))::before { content: "𝅀"; }
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-sixty-fourth:not(:has(.knowledge-notation-font))::before { content: "𝅁"; }

/* standalone-preferences-page-eof-20260612-1: keep preferences as its own compact account surface. */
html[data-active-module="preferences"] .content-grid[data-module="preferences"] {
  align-content: start !important;
  overflow: auto !important;
}

html[data-active-module="preferences"] .preferences-page {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: clamp(0.78rem, 1.05vw, 1.1rem) !important;
  min-height: 0 !important;
}

html[data-active-module="preferences"] .preferences-hero-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(0.9rem, 1.2vw, 1.25rem) !important;
  min-height: clamp(6.2rem, 10vh, 8rem) !important;
  padding: clamp(1rem, 1.32vw, 1.32rem) !important;
}

html[data-active-module="preferences"] .preferences-hero-card h2 {
  margin: 0 !important;
  color: rgba(255, 250, 238, 0.98) !important;
  font-size: clamp(1.8rem, 2.6vw, 3rem) !important;
  font-weight: 940 !important;
  line-height: 1 !important;
}

html[data-active-module="preferences"] .preferences-hero-card p:not(.eyebrow) {
  max-width: 42rem !important;
  margin: 0.35rem 0 0 !important;
  color: rgba(229, 226, 214, 0.68) !important;
  font-size: clamp(0.82rem, 0.95vw, 1rem) !important;
  font-weight: 720 !important;
  line-height: 1.45 !important;
}

html[data-active-module="preferences"] .preferences-summary-card {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(0.5rem, 0.74vw, 0.74rem) !important;
  padding: clamp(0.8rem, 1vw, 1.05rem) !important;
}

html[data-active-module="preferences"] .preferences-summary-card span {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.18rem !important;
  padding: clamp(0.62rem, 0.82vw, 0.82rem) !important;
  border: 1px solid rgba(232, 197, 126, 0.14) !important;
  border-radius: 0.5rem !important;
  background: rgba(232, 197, 126, 0.055) !important;
}

html[data-active-module="preferences"] .preferences-summary-card small,
html[data-active-module="preferences"] .profile-preference-group-head small {
  color: rgba(221, 226, 224, 0.62) !important;
  font-size: clamp(0.66rem, 0.72vw, 0.78rem) !important;
  font-weight: 720 !important;
  line-height: 1.32 !important;
}

html[data-active-module="preferences"] .preferences-summary-card strong {
  overflow: hidden !important;
  color: rgba(255, 250, 238, 0.94) !important;
  font-size: clamp(0.86rem, 0.95vw, 1rem) !important;
  font-weight: 880 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="preferences"] .preferences-options-card {
  min-height: clamp(13rem, 26vh, 19rem) !important;
  padding: clamp(0.92rem, 1.2vw, 1.18rem) !important;
}

html[data-active-module="preferences"] .profile-preference-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(0.72rem, 0.95vw, 0.95rem) !important;
  min-height: 0 !important;
}

html[data-active-module="preferences"] .profile-preference-group {
  display: grid !important;
  align-content: start !important;
  gap: clamp(0.6rem, 0.78vw, 0.78rem) !important;
  min-width: 0 !important;
  padding: clamp(0.76rem, 0.96vw, 1rem) !important;
  border-left: 1px solid rgba(232, 197, 126, 0.18) !important;
}

html[data-active-module="preferences"] .profile-preference-group-head {
  display: grid !important;
  gap: 0.22rem !important;
  min-width: 0 !important;
}

html[data-active-module="preferences"] .profile-preference-group h4 {
  margin: 0 !important;
  color: rgba(255, 250, 238, 0.96) !important;
  font-size: clamp(0.98rem, 1.08vw, 1.14rem) !important;
  font-weight: 920 !important;
  line-height: 1.16 !important;
}

html[data-active-module="preferences"] .profile-preference-row {
  display: grid !important;
  gap: 0.42rem !important;
  min-width: 0 !important;
}

html[data-active-module="preferences"] .profile-preference-row > strong {
  color: rgba(246, 238, 218, 0.86) !important;
  font-size: clamp(0.74rem, 0.82vw, 0.86rem) !important;
  font-weight: 820 !important;
  line-height: 1.16 !important;
}

html[data-active-module="preferences"] .profile-preference-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.34rem !important;
  min-width: 0 !important;
}

html[data-active-module="preferences"] .profile-preference-options button {
  min-height: 2rem !important;
  min-width: 0 !important;
  padding: 0 0.62rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(226, 230, 226, 0.72) !important;
  cursor: pointer !important;
  font: inherit !important;
  font-size: clamp(0.68rem, 0.74vw, 0.78rem) !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="preferences"] .profile-preference-options button:is(:hover, :focus-visible),
html[data-active-module="preferences"] .profile-preference-options button.is-active {
  border-color: rgba(232, 197, 126, 0.36) !important;
  background: rgba(232, 197, 126, 0.14) !important;
  color: rgba(255, 238, 200, 0.98) !important;
  outline: 0 !important;
}

@media (max-width: 1280px) {
  html[data-active-module="preferences"] .profile-preference-grid,
  html[data-active-module="preferences"] .preferences-summary-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="preferences"] .preferences-hero-card {
    align-items: stretch !important;
    display: grid !important;
  }

  html[data-active-module="preferences"] .profile-preference-grid,
  html[data-active-module="preferences"] .preferences-summary-card {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="preferences"] .profile-preference-group {
    border-top: 1px solid rgba(232, 197, 126, 0.16) !important;
    border-left: 0 !important;
  }
}
html[data-active-module="violinKnowledge"] .knowledge-drawn-rest.is-multi:not(:has(.knowledge-notation-font))::before { content: "𝄩"; }

/* profile-generated-sidebar-layout-20260612-1: swap generated songs with the three membership info cards. */
html[data-active-module="profile"] .content-grid[data-module="profile"] {
  align-items: stretch !important;
  align-content: stretch !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(17.2rem, 0.34fr) !important;
  grid-template-rows: minmax(5.7rem, 0.22fr) minmax(10rem, 0.42fr) minmax(7.2rem, 0.36fr) !important;
  align-self: stretch !important;
  align-content: stretch !important;
  gap: clamp(0.48rem, 0.72vw, 0.72rem) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary {
  grid-column: 1 / 4 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefits-card {
  grid-column: 1 / 4 !important;
  grid-row: 2 !important;
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-orders-card {
  grid-column: 3 !important;
  grid-row: 3 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card {
  grid-column: 4 !important;
  grid-row: 1 / 4 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-orders-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card {
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-orders-card {
  padding: clamp(0.58rem, 0.86vw, 0.86rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card {
  align-content: center !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card {
  align-content: start !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-orders-card {
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card {
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-list {
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-list.is-empty {
  align-content: center !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card .profile-empty-state {
  min-height: clamp(7.5rem, 18vh, 11rem) !important;
  align-content: center !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card strong {
  font-size: clamp(1.18rem, 1.52vw, 1.5rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card strong {
  font-size: clamp(1.85rem, 2.62vw, 2.5rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-empty {
  min-height: 0 !important;
  height: 100% !important;
  align-content: center !important;
}

@media (max-width: 1180px) {
  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary,
  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card,
  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card,
  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefits-card,
  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card,
  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-orders-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* learning-tools-hover-no-halo-final-20260612-1: keep hover scale, remove glow diffusion around learning-tool cards. */
html[data-active-module="nav-learningTools"] .tools-entry-card,
html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-entry-card:active,
html[data-active-module="nav-learningTools"] .tools-material-card,
html[data-active-module="nav-learningTools"] .tools-material-card:hover,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card:active,
html[data-active-module="nav-learningTools"] .tools-practice-card,
html[data-active-module="nav-learningTools"] .tools-practice-card:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card:active {
  filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible {
  transform: translate3d(0, -0.1rem, 0) scale(1.016) !important;
  border-color: rgba(255, 232, 186, 0.16) !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card:active {
  transform: translate3d(0, -0.03rem, 0) scale(1.01) !important;
  border-color: rgba(255, 232, 186, 0.14) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  transform: translate3d(0, -0.12rem, 0) scale(1.014) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:active,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active {
  transform: translate3d(0, -0.03rem, 0) scale(1.01) !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card::after,
html[data-active-module="nav-learningTools"] .tools-entry-card:hover::after,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-entry-card:active::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.12) 54%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.12) 44%, rgba(0, 0, 0, 0) 76%) !important;
}

/* learning-tools-no-outer-shadow-final-20260612-1: remove every external glow outside card borders. */
html[data-active-module="nav-learningTools"] .tools-entry-card,
html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-entry-card:active,
html[data-active-module="nav-learningTools"] .tools-entry-card::before,
html[data-active-module="nav-learningTools"] .tools-entry-card::after,
html[data-active-module="nav-learningTools"] .tools-entry-card:hover::before,
html[data-active-module="nav-learningTools"] .tools-entry-card:hover::after,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-practice-card,
html[data-active-module="nav-learningTools"] .tools-practice-card:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card:active,
html[data-active-module="nav-learningTools"] .tools-practice-card::before,
html[data-active-module="nav-learningTools"] .tools-practice-card::after,
html[data-active-module="nav-learningTools"] .tools-practice-card:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-card-arrow,
html[data-active-module="nav-learningTools"] .tools-card-arrow:hover {
  filter: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card,
html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-entry-card:active,
html[data-active-module="nav-learningTools"] .tools-practice-card,
html[data-active-module="nav-learningTools"] .tools-practice-card:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

/* learning-tools-spacing-balance-final-20260612-4: rebalance the learning tools page after the breathing pass. */
html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
  display: block !important;
  height: calc(var(--app-height, 100dvh) - clamp(4.35rem, 5.25vw, 5.45rem)) !important;
  padding:
    clamp(0.98rem, 1.34vw, 1.36rem)
    clamp(2rem, 3.35vw, 3.6rem)
    clamp(1rem, 1.42vw, 1.42rem) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #030405 !important;
  scrollbar-gutter: stable both-edges !important;
}

html[data-active-module="nav-learningTools"] .nav-workbench.nav-workbench-tools {
  width: min(100%, 96rem) !important;
  max-width: 96rem !important;
  height: auto !important;
  margin: 0 auto !important;
}

html[data-active-module="nav-learningTools"] .tools-board-layout {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: clamp(0.82rem, 1.08vw, 1.18rem) !important;
  height: auto !important;
  align-content: start !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-section {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: clamp(0.56rem, 0.76vw, 0.82rem) !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html[data-active-module="nav-learningTools"] .tools-learning-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(0.78rem, 1.06vw, 1.12rem) !important;
  height: auto !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  height: clamp(15.8rem, 17.4vw, 18.2rem) !important;
  min-height: clamp(15.8rem, 17.4vw, 18.2rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-section {
  padding-top: clamp(0.04rem, 0.18vw, 0.22rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-section::before {
  top: clamp(-0.58rem, -0.5vw, -0.36rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-grid {
  --tools-practice-card-trim: 0rem;
  --tools-practice-center-gutter: clamp(1.05rem, 1.55vw, 1.62rem);
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: var(--tools-practice-center-gutter) !important;
  row-gap: clamp(0.92rem, 1.16vw, 1.18rem) !important;
  height: auto !important;
  overflow: visible !important;
  background: #030405 !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card {
  height: clamp(13.9rem, 15vw, 16rem) !important;
  min-height: clamp(13.9rem, 15vw, 16rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid rgba(255, 232, 186, 0.14) !important;
  border-radius: clamp(0.92rem, 1.16vw, 1.22rem) !important;
  background-color: #050607 !important;
  background-clip: padding-box !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
  justify-self: stretch !important;
}

@media (max-width: 1180px) {
  html[data-active-module="nav-learningTools"] .content-grid[data-module="nav-learningTools"] {
    padding-inline: clamp(1.2rem, 3.5vw, 2.2rem) !important;
  }

  html[data-active-module="nav-learningTools"] .tools-learning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="nav-learningTools"] .tools-learning-grid,
  html[data-active-module="nav-learningTools"] .tools-practice-grid {
    grid-template-columns: 1fr !important;
  }
}

/* profile-top-nav-global-lock-20260612-1: keep Profile on the same top-attached platform frame as the other main modules. */
html[data-active-module="profile"] .app-shell {
  padding: 0 !important;
  place-items: stretch !important;
}

html[data-active-module="profile"] .main-stage {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: 100dvw !important;
  height: var(--app-height, 100dvh) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

html[data-active-module="profile"] .topbar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 9000 !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.58rem, 0.9vw, 0.92rem) !important;
  min-height: auto !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: clamp(0.78rem, 1.2vw, 1.05rem) clamp(0.98rem, 1.6vw, 1.34rem) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(233, 183, 96, 0.12) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 9% 0%, rgba(233, 183, 96, 0.055), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.006)),
    rgba(3, 3, 3, 0.72) !important;
  box-shadow: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module="profile"] .top-brand {
  flex: 0 0 auto !important;
  min-width: clamp(8.8rem, 12.8vw, 11rem) !important;
  max-width: clamp(8.8rem, 12.8vw, 11rem) !important;
  min-height: clamp(2.6rem, 3.1vw, 2.95rem) !important;
  padding: 0.14rem 0.38rem 0.14rem 0.16rem !important;
  gap: 0.52rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="profile"] .brand-mark {
  width: clamp(2.38rem, 2.85vw, 2.68rem) !important;
  height: clamp(2.38rem, 2.85vw, 2.68rem) !important;
  border: 1px solid rgba(233, 183, 96, 0.36) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 40% 30%, rgba(255, 226, 165, 0.18), transparent 48%),
    rgba(233, 183, 96, 0.075) !important;
  color: rgba(255, 232, 187, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 1rem rgba(233, 183, 96, 0.1) !important;
  font-size: clamp(1.02rem, 1.22vw, 1.16rem) !important;
}

html[data-active-module="profile"] .top-brand strong {
  color: rgba(245, 242, 234, 0.96) !important;
  font-size: clamp(1rem, 1.08vw, 1.16rem) !important;
  font-weight: 820 !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .top-brand em {
  display: none !important;
}

html[data-active-module="profile"] .top-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: clamp(2.9rem, 3.35vw, 3.22rem) !important;
  margin-inline: clamp(0.56rem, 0.95vw, 1rem) !important;
  padding: 0.17rem !important;
  gap: 0.17rem !important;
  border: 1px solid rgba(233, 183, 96, 0.13) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(0, 0, 0, 0.22)),
    rgba(0, 0, 0, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.046),
    0 0.75rem 1.8rem rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module="profile"] .top-nav .top-nav-group {
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

html[data-active-module="profile"] .top-nav .top-nav-group + .top-nav-group::before,
html[data-active-module="profile"] .top-nav .nav-item.is-active::after {
  display: none !important;
  content: none !important;
}

html[data-active-module="profile"] .top-nav .nav-item {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  grid-template-columns: none !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(2.52rem, 2.92vw, 2.82rem) !important;
  padding: 0.4rem 0.58rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(235, 232, 222, 0.62) !important;
  box-shadow: none !important;
  font-size: clamp(0.8rem, 0.88vw, 0.94rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .top-nav .nav-item:hover {
  border-color: rgba(233, 183, 96, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(233, 183, 96, 0.07), rgba(0, 0, 0, 0.2)),
    rgba(255, 255, 255, 0.018) !important;
  color: rgba(255, 232, 187, 0.9) !important;
}

html[data-active-module="profile"] .top-nav .nav-item.is-active {
  border-color: rgba(233, 183, 96, 0.4) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(233, 183, 96, 0.16), transparent 56%),
    linear-gradient(180deg, rgba(233, 183, 96, 0.13), rgba(0, 0, 0, 0.26)),
    rgba(8, 6, 4, 0.78) !important;
  color: rgba(255, 236, 198, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 196, 0.11),
    0 0 1rem rgba(233, 183, 96, 0.1) !important;
}

html[data-active-module="profile"] .top-nav .nav-icon {
  flex: 0 0 auto !important;
  margin-right: 0.22rem !important;
  color: rgba(233, 183, 96, 0.86) !important;
  font-size: 0.94em !important;
  line-height: 1 !important;
}

html[data-active-module="profile"] .top-nav .nav-item.is-active .nav-icon {
  color: rgba(255, 224, 156, 0.98) !important;
}

/* ai-generate-reselect-state-unstack-20260612-1: editable upload states use the form row only, avoiding duplicate status layers. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-card-upload.has-upload-state .generate-upload-inline-state {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload-field.needs-reselect {
  border-style: solid !important;
  border-color: rgba(255, 202, 112, 0.44) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 185, 78, 0.13), transparent 38%),
    linear-gradient(180deg, rgba(24, 17, 9, 0.84), rgba(8, 8, 7, 0.91)) !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload-field.needs-reselect::before {
  border-color: rgba(255, 214, 139, 0.4) !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd98f' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.4 18h.7a3.25 3.25 0 0 0 .3-6.48A5.15 5.15 0 0 0 8.5 8.1 4.15 4.15 0 0 0 6.6 18h.8'/%3E%3Cpath d='M12 18v-7'/%3E%3Cpath d='m9.15 13.85 2.85-2.85 2.85 2.85'/%3E%3C/svg%3E") center / 62% 62% no-repeat,
    rgba(255, 196, 89, 0.12) !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload-field.needs-reselect span b {
  color: rgba(255, 215, 144, 0.92) !important;
  font-weight: 780 !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload-field.needs-reselect strong {
  color: rgba(255, 246, 226, 0.98) !important;
}

html[data-active-module="nav-generate"] .generate-reference-upload-field.needs-reselect small {
  color: rgba(255, 218, 156, 0.72) !important;
}

/* ai-generate-upload-state-unstack-final-20260612-2: keep editable upload states in one clean form layout. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-card-upload .generate-upload-inline-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-card-upload.has-upload-state .generate-upload-inline-state {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-card-upload {
  z-index: 1 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-options {
  z-index: 18 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
  grid-template-rows:
    minmax(clamp(2.56rem, 3.16vw, 3rem), auto)
    minmax(clamp(2.64rem, 3.18vw, 3.06rem), auto)
    minmax(clamp(4.2rem, 5.1vw, 4.82rem), auto)
    minmax(clamp(3.92rem, 4.8vw, 4.52rem), auto)
    auto !important;
  align-content: start !important;
  gap: clamp(0.48rem, 0.64vw, 0.64rem) clamp(0.58rem, 0.78vw, 0.78rem) !important;
  padding: clamp(0.78rem, 1vw, 0.98rem) clamp(0.82rem, 1.08vw, 1.05rem) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-field.is-title {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-field.is-bpm {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-field.is-composer {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-upload-field {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  align-self: stretch !important;
  min-height: 0 !important;
  padding: clamp(0.58rem, 0.74vw, 0.74rem) clamp(0.82rem, 1.04vw, 1rem) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-field.is-message {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-score-note {
  grid-column: 1 / -1 !important;
  grid-row: 5 !important;
  align-self: start !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-upload-clear-button {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  align-self: start !important;
  justify-self: end !important;
  z-index: 22 !important;
  margin: clamp(0.34rem, 0.42vw, 0.42rem) clamp(0.48rem, 0.62vw, 0.62rem) 0 0 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-upload-field span {
  order: 1 !important;
  align-self: stretch !important;
  justify-content: flex-start !important;
  padding-right: clamp(3.25rem, 4.3vw, 4.15rem) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-upload-field::before {
  order: 2 !important;
  width: clamp(1.34rem, 1.72vw, 1.62rem) !important;
  height: clamp(1.34rem, 1.72vw, 1.62rem) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-upload-field strong {
  order: 3 !important;
  max-width: min(100%, 24rem) !important;
  font-size: clamp(0.96rem, 1.08vw, 1.08rem) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-upload-field small {
  order: 4 !important;
  max-width: min(100%, 26rem) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.84rem) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-submit-status-button {
  z-index: 19 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-submit-status-button.is-flow-select,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-submit-status-button.is-flow-generate {
  grid-template-rows: 1fr !important;
  place-items: center !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-submit-status-button.is-flow-select > span,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-submit-status-button.is-flow-select > small,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-submit-status-button.is-flow-generate > span,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-submit-status-button.is-flow-generate > small {
  display: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-submit-status-button > strong {
  display: block !important;
  width: 100% !important;
  line-height: 1.08 !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-options {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-field.is-bpm,
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-field.is-composer {
    grid-column: 1 !important;
  }

  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-field.is-composer {
    grid-row: 3 !important;
  }

  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-upload-field {
    grid-row: 4 !important;
  }

  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-upload-clear-button {
    grid-row: 4 !important;
  }

  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-field.is-message {
    grid-row: 5 !important;
  }

  html[data-active-module="nav-generate"] .nav-workbench-generate-reference:not(.is-upload-locked) .generate-reference-score-note {
    grid-row: 6 !important;
  }
}

/* feature-intro-left-nav-layout-lock-20260612-1: keep guide group headers horizontal; only step numbers use the small badge width. */
html[data-active-module="featureIntro"] .feature-tour-nav {
  min-width: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list {
  display: grid !important;
  align-content: start !important;
  min-width: 0 !important;
  gap: clamp(0.42rem, 0.6vw, 0.62rem) !important;
  overflow-x: hidden !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-group {
  display: grid !important;
  min-width: 0 !important;
  gap: clamp(0.24rem, 0.34vw, 0.38rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-group-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.16rem !important;
  min-width: 0 !important;
  padding: clamp(0.06rem, 0.16vw, 0.14rem) clamp(0.34rem, 0.48vw, 0.52rem) 0.04rem !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-group-title span {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
  place-items: unset !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255, 224, 158, 0.92) !important;
  font-size: clamp(0.7rem, 0.82vw, 0.86rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-group-title small {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(232, 226, 214, 0.6) !important;
  font-size: clamp(0.62rem, 0.72vw, 0.76rem) !important;
  font-weight: 560 !important;
  line-height: 1.22 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button {
  display: grid !important;
  grid-template-columns: clamp(1.64rem, 1.92vw, 1.92rem) minmax(0, 1fr) !important;
  align-items: center !important;
  min-width: 0 !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button > span {
  display: grid !important;
  width: clamp(1.42rem, 1.68vw, 1.64rem) !important;
  height: clamp(1.42rem, 1.68vw, 1.64rem) !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button > strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* feature-intro-hide-preview-toolbar-20260612-1: remove the floating preview label box from the practice mockup. */
html[data-active-module="featureIntro"] .feature-player-preview-toolbar {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* feature-intro-practice-ratio-lock-20260612-1: align the tour overlays with
   the measured real 16:9 follow-practice stage proportions. */
html[data-active-module="featureIntro"] .feature-player-preview[data-focus="waterfall"] .feature-player-focus-outline {
  left: 5.86% !important;
  top: 0 !important;
  width: 31.25% !important;
  height: 100% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="judgement"] .feature-player-focus-outline {
  left: 5.86% !important;
  bottom: 0.8% !important;
  width: 31.25% !important;
  height: 11.2% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="fingerboard"] .feature-player-focus-outline {
  left: 41.2% !important;
  top: 5.9% !important;
  width: 31.6% !important;
  height: 94.1% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="score"] .feature-player-focus-outline {
  left: 38.18% !important;
  top: 1.22% !important;
  width: 60.45% !important;
  height: 17.45% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="mode-switch"] .feature-player-focus-outline {
  left: 5.86% !important;
  top: 0 !important;
  width: 92.74% !important;
  height: 100% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="mode-switch"] .feature-player-secondary-focus-outline {
  left: 75.1% !important;
  top: 24.6% !important;
  width: 23.4% !important;
  height: 9.8% !important;
  opacity: 0.96 !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="intonation"] .feature-player-focus-outline {
  right: 0.94% !important;
  top: 28% !important;
  width: 24.49% !important;
  height: 23.8% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="controls"] .feature-player-focus-outline {
  left: 75.3% !important;
  top: 49.3% !important;
  width: 15% !important;
  height: 7.7% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="speed-switch"] .feature-player-focus-outline {
  left: 74.8% !important;
  top: 69.6% !important;
  width: 23.8% !important;
  height: 6.8% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="position"] .feature-player-focus-outline {
  left: 37.8% !important;
  top: 17.6% !important;
  width: 16.8% !important;
  height: 68.2% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="bowing"] .feature-player-focus-outline {
  right: 0.94% !important;
  top: 78.8% !important;
  width: 24.49% !important;
  height: 21% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="ai"] .feature-player-focus-outline {
  right: 0.94% !important;
  top: 82% !important;
  width: 24.49% !important;
  height: 17.8% !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="loop"] .feature-player-focus-outline {
  left: 88.9% !important;
  top: 50.8% !important;
  width: 9.4% !important;
  height: 7.7% !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="waterfall"] .feature-player-preview::before,
html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="judgement"] .feature-player-preview::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0 5.86%, transparent 5.86% 37.11%, rgba(0, 0, 0, 0.48) 43% 100%),
    radial-gradient(ellipse at 21.5% 50%, rgba(255, 219, 150, 0.12), transparent 34%) !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="fingerboard"] .feature-player-preview::before,
html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="position"] .feature-player-preview::before {
  background:
    radial-gradient(ellipse at 57% 53%, transparent 0 28%, rgba(0, 0, 0, 0.42) 44% 100%),
    radial-gradient(ellipse at 57% 53%, rgba(255, 219, 150, 0.11), transparent 33%) !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="position"] .feature-player-preview::before {
  background:
    radial-gradient(ellipse at 52% 52%, transparent 0 31%, rgba(0, 0, 0, 0.42) 49% 100%),
    radial-gradient(ellipse at 52% 52%, rgba(255, 219, 150, 0.11), transparent 37%) !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="score"] .feature-player-preview::before {
  background:
    linear-gradient(180deg, transparent 0 19%, rgba(0, 0, 0, 0.46) 31% 100%),
    radial-gradient(ellipse at 68.4% 10%, rgba(255, 219, 150, 0.14), transparent 31%) !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="mode-switch"] .feature-player-preview::before {
  background:
    radial-gradient(ellipse at 86.8% 30.6%, transparent 0 13%, rgba(0, 0, 0, 0.44) 27% 100%),
    radial-gradient(ellipse at 86.8% 30.6%, rgba(255, 219, 150, 0.12), transparent 19%) !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="controls"] .feature-player-preview::before {
  background:
    radial-gradient(ellipse at 82.8% 53.1%, transparent 0 12%, rgba(0, 0, 0, 0.44) 26% 100%),
    radial-gradient(ellipse at 82.8% 53.1%, rgba(255, 219, 150, 0.12), transparent 18%) !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="speed-switch"] .feature-player-preview::before {
  background:
    radial-gradient(ellipse at 86.7% 73%, transparent 0 13%, rgba(0, 0, 0, 0.44) 27% 100%),
    radial-gradient(ellipse at 86.7% 73%, rgba(255, 219, 150, 0.12), transparent 19%) !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="loop"] .feature-player-preview::before {
  background:
    radial-gradient(ellipse at 93.6% 54.6%, transparent 0 10%, rgba(0, 0, 0, 0.44) 22% 100%),
    radial-gradient(ellipse at 93.6% 54.6%, rgba(255, 219, 150, 0.12), transparent 16%) !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="intonation"] .feature-player-preview::before {
  background:
    radial-gradient(ellipse at 86.8% 41.2%, transparent 0 19%, rgba(0, 0, 0, 0.44) 36% 100%),
    radial-gradient(ellipse at 86.8% 41.2%, rgba(255, 219, 150, 0.12), transparent 27%) !important;
}

/* feature-intro-intonation-guide-20260612-1: the intonation step now uses the
   real embedded player overlay so the guide frame can move from mode switch to
   waterfall lines without a competing platform-level spotlight. */
html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="intonation"] .feature-player-preview::before {
  background: transparent !important;
  opacity: 0 !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="intonation"] .feature-player-focus-outline {
  opacity: 0 !important;
  box-shadow: none !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="bowing"] .feature-player-preview::before {
  background:
    radial-gradient(ellipse at 86.8% 89.3%, transparent 0 21%, rgba(0, 0, 0, 0.45) 36% 100%),
    radial-gradient(ellipse at 86.8% 89.3%, rgba(255, 219, 150, 0.13), transparent 29%) !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="ai"] .feature-player-preview::before {
  background:
    radial-gradient(ellipse at 86.8% 91%, transparent 0 18%, rgba(0, 0, 0, 0.45) 34% 100%),
    radial-gradient(ellipse at 86.8% 91%, rgba(255, 219, 150, 0.13), transparent 25%) !important;
}

/* feature-intro-direct-step-nav-20260612-1: left tour rail is direct
   step blocks only, no explanatory section copy. */
html[data-active-module="featureIntro"] .feature-tour-nav-list {
  gap: clamp(0.34rem, 0.46vw, 0.5rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-group {
  display: grid !important;
  gap: clamp(0.22rem, 0.3vw, 0.34rem) !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-group + .feature-tour-nav-group {
  padding-top: clamp(0.24rem, 0.34vw, 0.38rem) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.055) !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-group-title {
  display: none !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button {
  min-height: clamp(2.1rem, 3.62vh, 2.48rem) !important;
  padding: 0.24rem 0.44rem !important;
}

html[data-active-module="featureIntro"] .feature-tour-nav-list button > span {
  width: clamp(1.34rem, 1.56vw, 1.5rem) !important;
  height: clamp(1.34rem, 1.56vw, 1.5rem) !important;
}

/* feature-intro-spotlight-mask-20260612-1: every tour step dims everything
   outside the focused frame while leaving the framed area clear. */
html[data-active-module="featureIntro"] .feature-player-preview::before {
  background: transparent !important;
  opacity: 0 !important;
}

html[data-active-module="featureIntro"] .feature-player-preview:not([data-focus="overview"]) .feature-player-focus-outline {
  z-index: 8 !important;
  background: rgba(255, 214, 130, 0.028) !important;
  box-shadow:
    0 0 0 200vmax rgba(0, 0, 0, 0.66),
    inset 0 0 0 1px rgba(255, 250, 232, 0.24),
    inset 0 0 2.2rem rgba(255, 216, 142, 0.045),
    0 0 1.08rem rgba(223, 166, 60, 0.32) !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="overview"] .feature-player-focus-outline {
  box-shadow: none !important;
}

/* feature-intro-waterfall-hand-under-mask-20260612-1: Step 02 keeps the hand
   inside the original dimmed layer; only the waterfall frame stays clear. */
html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="waterfall"] .feature-player-preview::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.5) 0 5.86%,
      transparent 5.86% 37.11%,
      rgba(0, 0, 0, 0.54) 37.11% 100%
    ) !important;
}

html[data-active-module="featureIntro"] .feature-tour[data-feature-focus="waterfall"] .feature-player-focus-outline {
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 232, 0.24),
    inset 0 0 2.2rem rgba(255, 216, 142, 0.045),
    0 0 1.08rem rgba(223, 166, 60, 0.32) !important;
}

/* feature-intro-real-waterfall-lines-20260612-1: legacy platform-side
   waterfall overlay stays disabled; Step 02 uses the real player canvas. */
html[data-active-module="featureIntro"] .feature-tour-waterfall-lite {
  position: absolute !important;
  left: 0.7% !important;
  top: 1.9% !important;
  z-index: 7 !important;
  display: none !important;
  width: 30.2% !important;
  height: 95.6% !important;
  overflow: hidden !important;
  border-radius: 0.58rem !important;
  contain: layout paint style !important;
  pointer-events: none !important;
}

html[data-active-module="featureIntro"] .feature-player-preview[data-focus="waterfall"].is-lite-waterfall-playing .feature-tour-waterfall-lite {
  display: none !important;
}

/* feature-intro-mode-prewarm-cover-20260612-1: hide the silent internal
   notation-mode warmup so Step 07 starts from a fully rendered state. */
html[data-active-module="featureIntro"] .feature-player-preview.is-mode-switch-prewarming::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 7 !important;
  display: block !important;
  border-radius: inherit !important;
  background:
    radial-gradient(ellipse at 87% 30%, rgba(255, 218, 150, 0.12), transparent 24%),
    rgba(0, 0, 0, 0.42) !important;
  pointer-events: none !important;
}

html[data-active-module="featureIntro"] .feature-tour-waterfall-lite-string {
  position: absolute !important;
  top: -3% !important;
  bottom: -3% !important;
  width: 1px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.82) 48%, rgba(255, 255, 255, 0.26)) !important;
  opacity: 0.58 !important;
}

html[data-active-module="featureIntro"] .feature-tour-waterfall-lite-string.is-g { left: 19%; }
html[data-active-module="featureIntro"] .feature-tour-waterfall-lite-string.is-d { left: 43%; }
html[data-active-module="featureIntro"] .feature-tour-waterfall-lite-string.is-a { left: 67%; }
html[data-active-module="featureIntro"] .feature-tour-waterfall-lite-string.is-e { left: 89%; }

html[data-active-module="featureIntro"] .feature-tour-waterfall-lite-note {
  position: absolute !important;
  left: 67% !important;
  top: 0 !important;
  display: block !important;
  width: 2.1rem !important;
  height: 8rem !important;
  margin: 0 !important;
  transform: translate3d(-50%, -78%, 0);
  animation: featureTourWaterfallLiteDrop 3.72s linear infinite !important;
  animation-delay: var(--delay, 0s) !important;
  will-change: transform !important;
}

html[data-active-module="featureIntro"] .feature-tour-waterfall-lite-note::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 0.25rem !important;
  width: 0.42rem !important;
  height: 6.9rem !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(122, 220, 255, 0.1), rgba(88, 202, 242, 0.78), rgba(87, 199, 240, 0.18)) !important;
  box-shadow: 0 0 0.8rem rgba(75, 190, 237, 0.34) !important;
  transform: translateX(-50%) !important;
}

html[data-active-module="featureIntro"] .feature-tour-waterfall-lite-note b {
  position: absolute !important;
  left: 50% !important;
  top: 5.65rem !important;
  display: grid !important;
  width: 1.92rem !important;
  height: 1.92rem !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.86), rgba(102, 215, 250, 0.92) 34%, rgba(36, 142, 188, 0.96) 100%) !important;
  color: rgba(255, 255, 250, 0.96) !important;
  font-size: 1.12rem !important;
  font-weight: 920 !important;
  font-style: normal !important;
  line-height: 1 !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 0.18rem 0.58rem rgba(25, 131, 180, 0.38) !important;
}

@keyframes featureTourWaterfallLiteDrop {
  from { transform: translate3d(-50%, -78%, 0); }
  to { transform: translate3d(-50%, 103%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-active-module="featureIntro"] .feature-tour-waterfall-lite-note {
    animation-duration: 8s !important;
  }
}

/* feature-intro-simple-copy-20260612-1: right-side guide copy should read
   like one plain instruction instead of several explanation blocks. */
html[data-active-module="featureIntro"] .feature-tour-copy {
  align-content: center !important;
  gap: clamp(0.72rem, 0.95vw, 1rem) !important;
  padding: clamp(1.08rem, 1.42vw, 1.46rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy .eyebrow {
  margin: 0 !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy h3 {
  margin: 0 !important;
  font-size: 2.1rem !important;
  line-height: 1.08 !important;
}

html[data-active-module="featureIntro"] .feature-tour-copy > p.feature-tour-simple-main {
  margin: 0 !important;
  max-width: 25rem !important;
  color: rgba(246, 240, 226, 0.78) !important;
  font-size: 1rem !important;
  font-weight: 720 !important;
  line-height: 1.48 !important;
}

html[data-active-module="featureIntro"] .feature-tour-simple-note {
  display: grid !important;
  gap: clamp(0.36rem, 0.48vw, 0.52rem) !important;
  margin: clamp(0.1rem, 0.2vw, 0.18rem) 0 0 !important;
  padding: clamp(0.76rem, 0.98vw, 1rem) !important;
  border: 1px solid rgba(var(--library-study-gold-soft), 0.16) !important;
  border-radius: 0.72rem !important;
  background:
    linear-gradient(180deg, rgba(255, 230, 176, 0.06), rgba(255, 230, 176, 0.014)),
    rgba(0, 0, 0, 0.2) !important;
}

html[data-active-module="featureIntro"] .feature-tour-simple-note p {
  margin: 0 !important;
  color: rgba(245, 238, 223, 0.82) !important;
  font-size: 0.94rem !important;
  font-weight: 780 !important;
  line-height: 1.42 !important;
}

html[data-active-module="featureIntro"] .feature-tour-simple-note strong {
  color: rgba(var(--library-study-gold-soft), 0.94) !important;
  font-weight: 930 !important;
}

html[data-active-module="featureIntro"] .feature-tour-status-grid,
html[data-active-module="featureIntro"] .feature-tour-copy ul,
html[data-active-module="featureIntro"] .feature-tour-tip,
html[data-active-module="featureIntro"] .feature-tour-next-card,
html[data-active-module="featureIntro"] .feature-tour-complete-card {
  display: none !important;
}

html[data-active-module="featureIntro"] .feature-tour-actions {
  margin-top: clamp(0.2rem, 0.42vw, 0.5rem) !important;
  padding-top: clamp(0.58rem, 0.78vw, 0.82rem) !important;
}

html[data-active-module="featureIntro"] .feature-tour-actions .glass-button {
  min-height: clamp(2.24rem, 2.8vw, 2.54rem) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="featureIntro"] .feature-tour-copy {
    align-content: start !important;
  }

  html[data-active-module="featureIntro"] .feature-tour-copy h3 {
    font-size: 1.64rem !important;
  }
}

/* ai-generate-waiting-layout-final-20260612-1: center the waiting/generating state inside the upload card. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered.has-preview {
  position: absolute !important;
  z-index: 24 !important;
  left: calc(48 / 514 * 100%) !important;
  top: calc(126 / 758 * 100%) !important;
  width: calc(418 / 514 * 100%) !important;
  height: calc(470 / 758 * 100%) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  grid-template-areas:
    "piece"
    "progress"
    "label"
    "preview" !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: clamp(0.64rem, 0.98vw, 0.96rem) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  pointer-events: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > strong {
  grid-area: piece !important;
  display: block !important;
  width: min(100%, 20rem) !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 252, 244, 0.98) !important;
  font-size: clamp(1.36rem, 1.92vw, 1.86rem) !important;
  font-weight: 960 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 0.22rem 0.7rem rgba(0, 0, 0, 0.42) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > span {
  grid-area: label !important;
  display: block !important;
  width: min(100%, 18rem) !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 226, 162, 0.96) !important;
  font-size: clamp(0.86rem, 1.05vw, 1.02rem) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 0.16rem 0.5rem rgba(0, 0, 0, 0.34) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-busy-progress.is-compact-status {
  grid-area: progress !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  width: min(100%, 12.8rem) !important;
  min-height: clamp(6.3rem, 8.15vw, 7.35rem) !important;
  margin: 0 !important;
  padding: clamp(0.78rem, 1.02vw, 1rem) clamp(0.86rem, 1.12vw, 1.08rem) !important;
  gap: clamp(0.26rem, 0.42vw, 0.42rem) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 224, 158, 0.2) !important;
  border-radius: clamp(0.62rem, 0.84vw, 0.84rem) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 214, 139, 0.16), transparent 64%),
    linear-gradient(180deg, rgba(31, 24, 16, 0.96), rgba(8, 8, 7, 0.94)),
    rgba(10, 9, 7, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.09),
    0 0.72rem 1.38rem rgba(0, 0, 0, 0.26) !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-stage {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 244, 220, 0.98) !important;
  font-size: clamp(1rem, 1.32vw, 1.26rem) !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-countdown,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-quota {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-countdown {
  color: rgba(255, 226, 174, 0.84) !important;
  font-size: clamp(0.7rem, 0.86vw, 0.84rem) !important;
  font-weight: 820 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-bar {
  display: block !important;
  width: min(100%, 9.5rem) !important;
  height: clamp(0.22rem, 0.32vw, 0.32rem) !important;
  margin: 0.04rem auto 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-busy-progress.is-compact-status > .generate-busy-quota {
  color: rgba(255, 226, 174, 0.62) !important;
  font-size: clamp(0.62rem, 0.74vw, 0.72rem) !important;
  font-weight: 760 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-score-preview {
  grid-area: preview !important;
  justify-self: center !important;
  width: clamp(4rem, 5.4vw, 5.15rem) !important;
  margin: clamp(0.08rem, 0.2vw, 0.18rem) 0 0 !important;
  overflow: hidden !important;
  border-color: rgba(255, 229, 176, 0.28) !important;
  border-radius: clamp(0.42rem, 0.58vw, 0.58rem) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.1),
    0 0.34rem 0.8rem rgba(0, 0, 0, 0.24) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-options,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-upload-clear-button {
  display: none !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered,
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered.has-preview {
    left: calc(42 / 514 * 100%) !important;
    top: calc(118 / 758 * 100%) !important;
    width: calc(430 / 514 * 100%) !important;
    height: calc(488 / 758 * 100%) !important;
    row-gap: clamp(0.5rem, 2.4vw, 0.72rem) !important;
  }
}

/* ai-generate-waiting-layout-final-20260612-2: make the waiting card readable and immune to older busy-state rules. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered.has-preview {
  left: calc(54 / 514 * 100%) !important;
  top: calc(134 / 758 * 100%) !important;
  width: calc(406 / 514 * 100%) !important;
  height: calc(392 / 758 * 100%) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  grid-template-areas:
    "piece"
    "progress"
    "label"
    "preview" !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: clamp(0.68rem, 0.92vw, 0.88rem) !important;
  padding: 0 !important;
  overflow: visible !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > strong {
  grid-area: piece !important;
  position: static !important;
  display: block !important;
  width: min(100%, 19rem) !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  color: rgba(255, 252, 244, 0.98) !important;
  font-size: clamp(1.34rem, 1.78vw, 1.68rem) !important;
  font-weight: 960 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered > span {
  grid-area: label !important;
  position: static !important;
  display: block !important;
  width: min(100%, 17rem) !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  color: rgba(255, 226, 162, 0.96) !important;
  font-size: clamp(0.84rem, 0.98vw, 0.96rem) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered .generate-busy-progress.is-compact-status {
  grid-area: progress !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 13.35rem) !important;
  min-width: 0 !important;
  min-height: clamp(6.95rem, 8.75vw, 7.85rem) !important;
  margin: 0 !important;
  padding: clamp(0.82rem, 1.04vw, 1rem) clamp(0.92rem, 1.15vw, 1.1rem) !important;
  gap: clamp(0.32rem, 0.44vw, 0.42rem) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255, 224, 158, 0.22) !important;
  border-radius: clamp(0.62rem, 0.84vw, 0.84rem) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 214, 139, 0.16), transparent 64%),
    linear-gradient(180deg, rgba(31, 24, 16, 0.96), rgba(8, 8, 7, 0.94)),
    rgba(10, 9, 7, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 218, 0.09),
    0 0.64rem 1.22rem rgba(0, 0, 0, 0.24) !important;
  text-align: center !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered .generate-busy-progress.is-compact-status > .generate-busy-stage,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered .generate-busy-progress.is-compact-status > .generate-busy-countdown,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered .generate-busy-progress.is-compact-status > .generate-busy-quota {
  position: static !important;
  inset: auto !important;
  display: block !important;
  flex: 0 0 auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered .generate-busy-progress.is-compact-status > .generate-busy-stage {
  order: 1 !important;
  color: rgba(255, 244, 220, 0.98) !important;
  font-size: clamp(1.02rem, 1.2vw, 1.16rem) !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered .generate-busy-progress.is-compact-status > .generate-busy-countdown {
  order: 2 !important;
  color: rgba(255, 226, 174, 0.84) !important;
  font-size: clamp(0.7rem, 0.82vw, 0.8rem) !important;
  font-weight: 820 !important;
  line-height: 1.12 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered .generate-busy-progress.is-compact-status > .generate-busy-bar {
  position: relative !important;
  inset: auto !important;
  order: 3 !important;
  display: block !important;
  flex: 0 0 auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: min(100%, 10.35rem) !important;
  min-width: 0 !important;
  height: clamp(0.24rem, 0.32vw, 0.32rem) !important;
  margin: 0.02rem auto 0 !important;
  overflow: hidden !important;
  transform: none !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered .generate-busy-progress.is-compact-status > .generate-busy-bar > b {
  display: block !important;
  height: 100% !important;
  min-width: 8% !important;
  border-radius: inherit !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered .generate-busy-progress.is-compact-status > .generate-busy-quota {
  order: 4 !important;
  color: rgba(255, 226, 174, 0.64) !important;
  font-size: clamp(0.62rem, 0.72vw, 0.7rem) !important;
  font-weight: 760 !important;
  line-height: 1.1 !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered .generate-score-preview {
  grid-area: preview !important;
  position: static !important;
  display: block !important;
  width: clamp(3.8rem, 4.8vw, 4.6rem) !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 760px) {
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered,
  html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state.is-inline-centered.has-preview {
    left: calc(44 / 514 * 100%) !important;
    top: calc(126 / 758 * 100%) !important;
    width: calc(426 / 514 * 100%) !important;
    height: calc(420 / 758 * 100%) !important;
  }
}

/* ai-generate-waiting-outer-frame-20260612-1: keep the main upload card framed while generation is running. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state:active,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state.is-hovered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked.is-hover-upload .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-reference-upload:hover) .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-submit-status-button:hover) .generate-reference-card-upload.has-upload-state {
  overflow: hidden !important;
  pointer-events: auto !important;
  border: 1px solid rgba(255, 224, 166, 0.2) !important;
  border-radius: clamp(1rem, 1.35vw, 1.28rem) !important;
  outline: 1px solid rgba(255, 255, 255, 0.032) !important;
  outline-offset: -2px !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(214, 148, 45, 0.13), transparent 54%),
    radial-gradient(ellipse at 50% 78%, rgba(255, 191, 91, 0.055), transparent 58%),
    linear-gradient(180deg, rgba(16, 14, 12, 0.92), rgba(4, 5, 6, 0.96)),
    rgba(5, 5, 5, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, 0.07),
    inset 0 0 1.4rem rgba(232, 168, 55, 0.045),
    0 1.08rem 2.35rem rgba(0, 0, 0, 0.3) !important;
}

/* ai-generate-waiting-hover-scale-20260612-1: busy upload card keeps the same hover lift as the other cards. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state {
  transform-origin: center center !important;
  transition:
    transform 220ms cubic-bezier(0.2, 0.78, 0.22, 1),
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease !important;
  will-change: transform !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state.is-hovered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked.is-hover-upload .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-reference-card-upload.has-upload-state:hover) .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-upload-inline-state:hover) .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-busy-progress:hover) .generate-reference-card-upload.has-upload-state {
  z-index: 16 !important;
  transform: scale(1.035) !important;
  border-color: rgba(255, 226, 166, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, 0.09),
    inset 0 0 1.55rem rgba(232, 168, 55, 0.06),
    0 1.32rem 2.8rem rgba(0, 0, 0, 0.34),
    0 0 1.25rem rgba(232, 168, 55, 0.12) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-submit-status-button {
  z-index: 30 !important;
}

/* ai-generate-waiting-no-frame-glow-20260612-1: keep frames flat while preserving borders and hover scale. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state:active,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state.is-hovered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked.is-hover-upload .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-reference-card-upload.has-upload-state:hover) .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-upload-inline-state:hover) .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-busy-progress:hover) .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-submit-status-button:hover) .generate-reference-card-upload.has-upload-state {
  border-color: rgba(255, 224, 166, 0.24) !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state.is-hovered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked.is-hover-upload .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-reference-card-upload.has-upload-state:hover) .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-upload-inline-state:hover) .generate-reference-card-upload.has-upload-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked:has(.generate-busy-progress:hover) .generate-reference-card-upload.has-upload-state {
  border-color: rgba(255, 226, 166, 0.34) !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-upload-inline-state,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-busy-progress.is-compact-status,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-score-preview,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-busy-bar,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-reference-card-upload.has-upload-state .generate-busy-bar > b {
  box-shadow: none !important;
  filter: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-submit-status-button,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-submit-status-button:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference.is-upload-locked .generate-submit-status-button:active,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-submitted,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-review,
html[data-active-module="nav-generate"] .generate-submit-status-button.is-working {
  box-shadow: none !important;
  filter: none !important;
}

/* ai-generate-big-card-no-glow-20260612-1: remove outer glow from all smart-generate big cards. */
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card:hover,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card:active,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card.is-hovered,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card-inspiration,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-upload:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-submit-status-button:hover) .generate-reference-card-upload,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-editor:hover) .generate-reference-card-editor,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference:has(.generate-reference-inspiration:hover) .generate-reference-card-inspiration {
  box-shadow: none !important;
  filter: none !important;
}

html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card::before,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card::after,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card-upload::before,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card-upload::after,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card-editor::before,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card-editor::after,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card-inspiration::before,
html[data-active-module="nav-generate"] .nav-workbench-generate-reference .generate-reference-card-inspiration::after {
  box-shadow: none !important;
  filter: none !important;
}

/* learning-tools-whole-card-hover-final-20260612-3: hover scales the full module, not the inner artwork layer. */
html[data-active-module="nav-learningTools"] .tools-entry-card,
html[data-active-module="nav-learningTools"] .tools-material-card,
html[data-active-module="nav-learningTools"] .tools-practice-card,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
  transform-origin: center center !important;
  transition:
    transform 180ms cubic-bezier(0.2, 0.72, 0.24, 1),
    border-color 180ms ease !important;
  will-change: transform !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card > *,
html[data-active-module="nav-learningTools"] .tools-entry-card > *::before,
html[data-active-module="nav-learningTools"] .tools-entry-card > *::after {
  transition: none !important;
  animation: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card,
html[data-active-module="nav-learningTools"] .tools-material-card:hover,
html[data-active-module="nav-learningTools"] .tools-material-card:focus,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card:active,
html[data-active-module="nav-learningTools"] .tools-practice-card,
html[data-active-module="nav-learningTools"] .tools-practice-card:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card:active {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:active,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:active,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:active,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:active,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:active {
  filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:active,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active {
  filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:active,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:active,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:active,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:active,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:active,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:active,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active {
  filter: none !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-entry-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card:hover,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible {
  transform: translate3d(0, -0.08rem, 0) scale(1.018) !important;
  z-index: 8 !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible {
  transform: translate3d(0, -0.08rem, 0) scale(1.014) !important;
  z-index: 8 !important;
}

html[data-active-module="nav-learningTools"] .tools-entry-card:active,
html[data-active-module="nav-learningTools"] .tools-material-card:active,
html[data-active-module="nav-learningTools"] .tools-practice-card:active,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:active,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active {
  transform: translate3d(0, 0.02rem, 0) scale(0.996) !important;
  z-index: 9 !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card:hover > .tools-card-object,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible > .tools-card-object,
html[data-active-module="nav-learningTools"] .tools-material-card:hover > .tools-card-object::before,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible > .tools-card-object::before,
html[data-active-module="nav-learningTools"] .tools-material-card:hover > .tools-card-object::after,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible > .tools-card-object::after,
html[data-active-module="nav-learningTools"] .tools-practice-card:hover > .tools-card-visual,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible > .tools-card-visual {
  transform: none !important;
  filter: none !important;
}

/* learning-tools-practice-height-natural-final-20260612-1: restore natural height and proportional art for practice cards. */
html[data-active-module="nav-learningTools"] .tools-practice-card,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome {
  height: clamp(17.2rem, 17.8vw, 20.6rem) !important;
  min-height: clamp(17.2rem, 17.8vw, 20.6rem) !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card,
html[data-active-module="nav-learningTools"] .tools-practice-card:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card:active,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:active,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active {
  background-size: cover !important;
}

/* learning-tools-material-original-art-final-20260612-1: use the original learning-card art and a lighter readability veil. */
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-feature-intro:active {
  background-image: url("/platform/assets/learning-card-feature.png?v=learning-tools-material-original-art-final-20260612-1") !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-basics,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-basics:active {
  background-image: url("/platform/assets/learning-card-basic.png?v=learning-tools-material-original-art-final-20260612-1") !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-posture,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-posture:active {
  background-image: url("/platform/assets/learning-card-posture.png?v=learning-tools-material-original-art-final-20260612-1") !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-notes,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-notes:active {
  background-image: url("/platform/assets/learning-card-notes.png?v=learning-tools-material-original-art-final-20260612-1") !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.is-theory,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card.is-theory:active {
  background-image: url("/platform/assets/learning-card-theory.png?v=learning-tools-material-original-art-final-20260612-1") !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card,
html[data-active-module="nav-learningTools"] .tools-material-card:hover,
html[data-active-module="nav-learningTools"] .tools-material-card:focus,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible,
html[data-active-module="nav-learningTools"] .tools-material-card:active {
  background-size: cover !important;
  filter: none !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card::after,
html[data-active-module="nav-learningTools"] .tools-material-card:hover::after,
html[data-active-module="nav-learningTools"] .tools-material-card:focus::after,
html[data-active-module="nav-learningTools"] .tools-material-card:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-material-card:active::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.075) 54%, rgba(0, 0, 0, 0.36) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.08) 44%, rgba(0, 0, 0, 0) 76%) !important;
  opacity: 1 !important;
}

/* learning-tools-practice-original-art-final-20260612-1: restore sharper original practice-tool card art. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:active {
  background-image: url("/platform/assets/learning-tool-tuner-no-text.png?v=learning-tools-practice-original-art-final-20260612-1") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active {
  background-image: url("/platform/assets/learning-tool-metronome.png?v=learning-tools-practice-original-art-final-20260612-1") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:active::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-tuner:active::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible::after,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.18) 34%, rgba(0, 0, 0, 0.02) 62%, rgba(0, 0, 0, 0) 78%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18)) !important;
  filter: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* learning-tools-metronome-full-art-compat-20260612-1: compatibility layer also uses the complete metronome artwork. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active {
  overflow: visible !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active::before {
  content: "" !important;
  position: absolute !important;
  top: -13.25% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 113.25% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png?v=learning-tools-metronome-full-art-compat-20260612-1") center top / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

/* profile-one-to-one-image-20260612-2: replace Profile with the supplied desktop design while preserving real actions. */
html[data-active-module="profile"] .content-grid[data-module="profile"] {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-active-module="profile"] .profile-one-to-one-stage {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

html[data-active-module="profile"] .profile-one-to-one-canvas {
  position: relative !important;
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1672 / 941 !important;
  overflow: hidden !important;
  contain: layout paint !important;
}

html[data-active-module="profile"] .profile-one-to-one-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

html[data-active-module="profile"] .profile-one-to-one-actions {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  pointer-events: none !important;
}

html[data-active-module="profile"] .profile-one-to-one-hotspot {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  background: transparent !important;
  color: transparent !important;
  cursor: pointer !important;
  font-size: 0 !important;
  line-height: 0 !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
}

html[data-active-module="profile"] .profile-one-to-one-hotspot:is(:hover, :focus-visible) {
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="profile"] .profile-one-to-one-hotspot.is-benefits-open {
  left: 69.5% !important;
  top: 30.1% !important;
  width: 5.3% !important;
  height: 4.3% !important;
}

html[data-active-module="profile"] .profile-one-to-one-hotspot.is-membership-open {
  left: 18.55% !important;
  top: 54.95% !important;
  width: 4.6% !important;
  height: 4.7% !important;
}

html[data-active-module="profile"] .profile-one-to-one-hotspot.is-support {
  left: 68.1% !important;
  top: 54.95% !important;
  width: 5.5% !important;
  height: 4.7% !important;
}

html[data-active-module="profile"] .profile-one-to-one-hotspot.is-membership-cta {
  left: 3.75% !important;
  top: 86.45% !important;
  width: 19.1% !important;
  height: 5.95% !important;
}

html[data-active-module="profile"] .profile-one-to-one-hotspot.is-generate-cta {
  left: 26.45% !important;
  top: 86.45% !important;
  width: 20.8% !important;
  height: 5.95% !important;
}

html[data-active-module="profile"] .profile-one-to-one-hotspot.is-order-plan {
  left: 51.45% !important;
  top: 86.45% !important;
  width: 21.2% !important;
  height: 5.95% !important;
}

html[data-active-module="profile"] .profile-one-to-one-hotspot.is-generate-new {
  left: 92.45% !important;
  top: 4.45% !important;
  width: 5.2% !important;
  height: 5% !important;
}

html[data-active-module="profile"] .profile-one-to-one-hotspot.is-generate-panel {
  left: 78.9% !important;
  top: 33% !important;
  width: 18.6% !important;
  height: 61.4% !important;
}

/* profile-modules-cutout-20260612-1: use individually cut module images instead of one full-page screenshot. */
html[data-active-module="profile"] .profile-cutout-stage {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

html[data-active-module="profile"] .profile-cutout-canvas {
  position: relative !important;
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1672 / 941 !important;
  overflow: hidden !important;
  contain: layout paint !important;
}

html[data-active-module="profile"] .profile-cutout-module {
  position: absolute !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html[data-active-module="profile"] .profile-cutout-module img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-account {
  left: 1.3158% !important;
  top: 2.1254% !important;
  width: 74.9402% !important;
  height: 26.2487% !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-benefits {
  left: 1.3158% !important;
  top: 28.2678% !important;
  width: 74.9402% !important;
  height: 21.9979% !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-membership {
  left: 2.512% !important;
  top: 52.9224% !important;
  width: 21.5909% !important;
  height: 41.9766% !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-quota {
  left: 25.1196% !important;
  top: 52.9224% !important;
  width: 23.744% !important;
  height: 41.9766% !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-orders {
  left: 49.5813% !important;
  top: 52.9224% !important;
  width: 25.3589% !important;
  height: 41.9766% !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-generated {
  left: 77.6316% !important;
  top: 2.1254% !important;
  width: 21.1124% !important;
  height: 95.643% !important;
}

html[data-active-module="profile"] .profile-cutout-hotspot {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute !important;
  z-index: 2 !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  background: transparent !important;
  color: transparent !important;
  cursor: pointer !important;
  font-size: 0 !important;
  line-height: 0 !important;
  outline: none !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

html[data-active-module="profile"] .profile-cutout-hotspot:is(:hover, :focus-visible) {
  background: transparent !important;
  box-shadow: none !important;
}

html[data-active-module="profile"] .profile-cutout-hotspot.is-benefits-open {
  left: 90.8% !important;
  top: 9.7% !important;
  width: 7% !important;
  height: 18.4% !important;
}

html[data-active-module="profile"] .profile-cutout-hotspot.is-membership-open {
  left: 74.2% !important;
  top: 5.3% !important;
  width: 19.4% !important;
  height: 10.1% !important;
}

html[data-active-module="profile"] .profile-cutout-hotspot.is-membership-cta {
  left: 6.1% !important;
  top: 80.5% !important;
  width: 87.5% !important;
  height: 13.4% !important;
}

html[data-active-module="profile"] .profile-cutout-hotspot.is-generate-cta {
  left: 5.5% !important;
  top: 80.5% !important;
  width: 87.7% !important;
  height: 13.4% !important;
}

html[data-active-module="profile"] .profile-cutout-hotspot.is-support {
  left: 73.1% !important;
  top: 5.3% !important;
  width: 21.2% !important;
  height: 10.1% !important;
}

html[data-active-module="profile"] .profile-cutout-hotspot.is-order-plan {
  left: 8% !important;
  top: 80.5% !important;
  width: 82.1% !important;
  height: 13.4% !important;
}

html[data-active-module="profile"] .profile-cutout-hotspot.is-generate-new {
  left: 72% !important;
  top: 2.7% !important;
  width: 21.2% !important;
  height: 4.4% !important;
}

html[data-active-module="profile"] .profile-cutout-hotspot.is-generate-panel {
  left: 6.2% !important;
  top: 32.3% !important;
  width: 87% !important;
  height: 64.4% !important;
}

/* profile-account-grid-lock-eof-20260612-1: final override after all desktop responsive rules. */
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: stretch !important;
  column-gap: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary > .profile-card-head,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary > .profile-account-panel {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}

/* profile-account-grid-lock-final-20260612-1: keep the Account card on the same card system at every desktop width. */
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: stretch !important;
  column-gap: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary > .profile-card-head,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary > .profile-account-panel {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-panel {
  max-width: none !important;
}

/* score-editor-typewriter-input-20260612-1: show the next score entry slot like a small typing cursor. */
html[data-active-module="scoreEditor"] .score-vexflow-input-cursor {
  position: absolute !important;
  z-index: 3 !important;
  width: clamp(2.05rem, 2.65vw, 2.65rem) !important;
  height: clamp(2.7rem, 4.6vh, 3.65rem) !important;
  display: grid !important;
  place-items: center !important;
  color: #07869c !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-input-cursor i {
  position: absolute !important;
  left: 50% !important;
  top: -0.38rem !important;
  bottom: -0.38rem !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: 0 0 0 3px rgba(7, 134, 156, 0.11), 0 0 0.85rem rgba(7, 134, 156, 0.3) !important;
  transform: translateX(-50%) !important;
  animation: scoreEditorInputCursorBlink 1.05s steps(2, end) infinite !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-input-cursor b {
  position: relative !important;
  z-index: 1 !important;
  min-width: clamp(1.75rem, 2.18vw, 2.22rem) !important;
  min-height: clamp(1.75rem, 2.18vw, 2.22rem) !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid color-mix(in srgb, currentColor 82%, transparent) !important;
  border-radius: 999px !important;
  background: rgba(255, 252, 244, 0.9) !important;
  color: currentColor !important;
  font-family: "JMDT Noto Music", "Noto Music", Bravura, "Academico", Georgia, serif !important;
  font-size: clamp(1.18rem, 1.6vw, 1.55rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 0.45rem 1.05rem rgba(0, 0, 0, 0.14) !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-input-cursor.is-rest {
  color: #b16f1c !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-input-cursor.is-rest b {
  border-radius: 7px !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-input-cursor.is-invalid {
  color: #b83c2f !important;
}

html[data-active-module="scoreEditor"] .score-vexflow-input-cursor.is-invalid b {
  background: rgba(255, 247, 242, 0.92) !important;
}

@keyframes scoreEditorInputCursorBlink {
  0%,
  52% {
    opacity: 1;
  }

  53%,
  100% {
    opacity: 0.36;
  }
}

/* score-editor-palette-notation-font-final-20260612-1: use the note-atlas music font for all score palette notation symbols. */
@font-face {
  font-family: "JMDT Noto Music";
  src: url("/platform/assets/fonts/NotoMusic-Regular.ttf?v=20260612-1") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.has-notation-font {
  position: relative !important;
  display: grid !important;
  width: clamp(1.98rem, 3.1vh, 2.38rem) !important;
  height: clamp(1.98rem, 3.1vh, 2.38rem) !important;
  place-items: center !important;
  overflow: visible !important;
  color: rgba(255, 246, 226, 0.98) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.has-notation-font::before,
html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.has-notation-font::after {
  display: none !important;
  content: none !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.has-notation-font > svg,
html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.has-notation-font > img {
  display: none !important;
}

html[data-active-module="scoreEditor"] .score-toolbar-notation-font {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  color: currentColor !important;
  font-family:
    "JMDT Noto Music",
    "Noto Music",
    "Bravura",
    "Apple Symbols",
    "Segoe UI Symbol",
    "Arial Unicode MS",
    serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0.82 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-indent: 0 !important;
  text-rendering: geometricPrecision !important;
  white-space: nowrap !important;
  transform: translateY(0.02rem) !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.has-notation-font .score-toolbar-notation-font {
  font-size: clamp(2.48rem, 3.92vh, 3rem) !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-duration.is-whole .score-toolbar-notation-font {
  font-size: clamp(3.42rem, 5.2vh, 4.05rem) !important;
  line-height: 0.64 !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-duration.is-eighth .score-toolbar-notation-font,
html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-duration.is-sixteenth .score-toolbar-notation-font {
  font-size: clamp(2.38rem, 3.75vh, 2.9rem) !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-rest .score-toolbar-notation-font {
  font-size: clamp(2.15rem, 3.38vh, 2.62rem) !important;
  line-height: 0.9 !important;
  transform: translateY(0.01rem) !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-rest.is-whole .score-toolbar-notation-font,
html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-rest.is-half .score-toolbar-notation-font {
  font-size: clamp(2.45rem, 3.75vh, 2.92rem) !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-accidental .score-toolbar-notation-font {
  font-size: clamp(2.15rem, 3.35vh, 2.58rem) !important;
  line-height: 0.9 !important;
  transform: translateY(0) !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-accidental.is-flat .score-toolbar-notation-font {
  font-size: clamp(2.28rem, 3.48vh, 2.72rem) !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-repeat.is-dot .score-toolbar-notation-font {
  font-size: clamp(1.72rem, 2.7vh, 2.05rem) !important;
  line-height: 0.94 !important;
  transform: translateY(0.02rem) !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-repeat.is-beam .score-toolbar-notation-font {
  font-size: clamp(2.15rem, 3.36vh, 2.58rem) !important;
  line-height: 0.86 !important;
  transform: translateY(0.02rem) !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-repeat:is(.is-start, .is-end) .score-toolbar-notation-font {
  font-size: clamp(2.22rem, 3.48vh, 2.68rem) !important;
  line-height: 0.9 !important;
}

html[data-active-module="scoreEditor"] .score-palette-button > .score-symbol-icon.is-bowing:is(.is-down, .is-up) .score-toolbar-notation-font {
  font-size: clamp(2rem, 3.12vh, 2.4rem) !important;
  line-height: 0.88 !important;
}

html[data-active-module="scoreEditor"] .score-input-card .score-input-note-symbol {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.02em !important;
  min-width: clamp(2.36rem, 3.65vh, 2.9rem) !important;
  color: rgba(255, 246, 226, 0.98) !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

html[data-active-module="scoreEditor"] .score-input-card .score-input-note-symbol .score-toolbar-notation-font {
  font-size: clamp(2.4rem, 3.76vh, 2.9rem) !important;
  line-height: 0.82 !important;
  transform: translateY(0.02rem) !important;
}

html[data-active-module="scoreEditor"] .score-input-card .score-input-note-symbol .score-input-plus {
  display: inline-block !important;
  margin-left: -0.06em !important;
  color: rgba(255, 246, 226, 0.98) !important;
  font-family: var(--zh-sans-font) !important;
  font-size: clamp(1.28rem, 2vh, 1.56rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  transform: translateY(-0.06rem) !important;
}

/* learning-tools-metronome-finished-art-eof-20260612-3: use the complete finished metronome art, not a rebuilt head layer. */
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active {
  overflow: visible !important;
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active::before {
  content: "" !important;
  position: absolute !important;
  top: -13.25% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 113.25% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png?v=learning-tools-metronome-finished-art-eof-20260612-3") center top / 100% 100% no-repeat !important;
  background-image: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png?v=learning-tools-metronome-finished-art-eof-20260612-3") !important;
  background-position: center top !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

/* learning-tools-metronome-finished-art-eof-20260612-2: final override, use the complete finished metronome image. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active {
  overflow: visible !important;
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active::before {
  content: "" !important;
  position: absolute !important;
  top: -13.25% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 113.25% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png?v=learning-tools-metronome-finished-art-eof-20260612-2") center top / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

/* learning-tools-metronome-finished-art-eof-20260612-1: use the finished popout artwork instead of rebuilding the head. */
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active {
  overflow: visible !important;
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.is-metronome:active::before {
  content: "" !important;
  position: absolute !important;
  top: -13.25% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 113.25% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png?v=learning-tools-metronome-finished-art-eof-20260612-1") center top / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

/* profile-typography-final-20260612-1: tighten account copy, benefits, orders, and generated item text flow. */
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-glass-card {
  overflow: hidden !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(15.5rem, 27%) !important;
  align-items: center !important;
  column-gap: clamp(0.82rem, 1.18vw, 1.25rem) !important;
  padding: clamp(0.84rem, 1.1vw, 1.12rem) clamp(0.95rem, 1.25vw, 1.28rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-avatar-mark {
  width: clamp(3.1rem, 3.65vw, 4rem) !important;
  height: clamp(3.1rem, 3.65vw, 4rem) !important;
  flex: 0 0 auto !important;
  font-size: clamp(1.45rem, 2.2vw, 2.05rem) !important;
  line-height: 1 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: clamp(0.14rem, 0.24vw, 0.24rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-copy .eyebrow,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-head .eyebrow,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card .eyebrow,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card .eyebrow {
  margin: 0 !important;
  font-size: clamp(0.56rem, 0.66vw, 0.68rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-copy h3 {
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(2.05rem, 3vw, 3rem) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-copy > p:not(.eyebrow) {
  margin: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(0.86rem, 0.92vw, 1rem) !important;
  line-height: 1.25 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel {
  min-width: 0 !important;
  align-self: center !important;
  display: grid !important;
  gap: 0.14rem !important;
  padding: clamp(0.58rem, 0.76vw, 0.72rem) clamp(0.66rem, 0.92vw, 0.92rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel span {
  font-size: clamp(0.55rem, 0.62vw, 0.64rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel strong {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(0.9rem, 1vw, 1.08rem) !important;
  line-height: 1.12 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel p {
  display: -webkit-box !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  font-size: clamp(0.65rem, 0.74vw, 0.78rem) !important;
  line-height: 1.24 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-head {
  align-items: flex-start !important;
  gap: 0.55rem !important;
  min-height: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-head > div {
  min-width: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-head h3 {
  max-width: 100% !important;
  margin: clamp(0.12rem, 0.16vw, 0.18rem) 0 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(1rem, 1.18vw, 1.28rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefits-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(0.5rem, 0.74vw, 0.72rem) !important;
  padding: clamp(0.72rem, 0.98vw, 0.98rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(0.46rem, 0.64vw, 0.64rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid > span {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: clamp(2rem, 2.3vw, 2.38rem) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  column-gap: clamp(0.48rem, 0.64vw, 0.68rem) !important;
  row-gap: 0.1rem !important;
  padding: clamp(0.56rem, 0.76vw, 0.78rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid > span b {
  grid-row: 1 / 3 !important;
  align-self: center !important;
  width: clamp(1.85rem, 2.1vw, 2.18rem) !important;
  height: clamp(1.85rem, 2.1vw, 2.18rem) !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: clamp(0.52rem, 0.58vw, 0.62rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid > span strong {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(0.9rem, 1vw, 1.06rem) !important;
  line-height: 1.1 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid > span small {
  display: -webkit-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  font-size: clamp(0.66rem, 0.74vw, 0.78rem) !important;
  line-height: 1.24 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-orders-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card {
  padding: clamp(0.68rem, 0.92vw, 0.92rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card span,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card span {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(0.78rem, 0.88vw, 0.94rem) !important;
  line-height: 1.16 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card strong,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card strong {
  margin: clamp(0.18rem, 0.26vw, 0.3rem) 0 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card small,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card small,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-rule {
  display: -webkit-box !important;
  max-width: 100% !important;
  margin: clamp(0.24rem, 0.34vw, 0.36rem) 0 0 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  font-size: clamp(0.68rem, 0.74vw, 0.78rem) !important;
  line-height: 1.28 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-list,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-list {
  gap: clamp(0.45rem, 0.62vw, 0.62rem) !important;
  min-width: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-item {
  min-width: 0 !important;
  min-height: clamp(4.35rem, 6.3vh, 5.2rem) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "state action"
    "title action"
    "meta action" !important;
  align-items: center !important;
  column-gap: clamp(0.42rem, 0.62vw, 0.62rem) !important;
  row-gap: 0.12rem !important;
  padding: clamp(0.56rem, 0.76vw, 0.8rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-item b {
  grid-area: state !important;
  justify-self: start !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(0.58rem, 0.66vw, 0.7rem) !important;
  line-height: 1.08 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-item strong {
  grid-area: title !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(0.92rem, 1.02vw, 1.08rem) !important;
  line-height: 1.12 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-item small {
  grid-area: meta !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(0.62rem, 0.72vw, 0.76rem) !important;
  line-height: 1.1 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-actions {
  grid-area: action !important;
  justify-self: end !important;
  align-self: center !important;
  min-width: max-content !important;
  max-width: 5.4rem !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.22rem !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-actions a,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-actions button {
  max-width: 100% !important;
  min-height: 1.6rem !important;
  padding: 0.34rem 0.62rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(0.62rem, 0.72vw, 0.76rem) !important;
  line-height: 1 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-empty,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-empty-state {
  min-width: 0 !important;
  display: grid !important;
  place-content: center !important;
  justify-items: start !important;
  text-align: left !important;
  gap: 0.22rem !important;
  padding: clamp(0.8rem, 1vw, 1rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-empty strong,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-empty-state strong {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(0.92rem, 1vw, 1.08rem) !important;
  line-height: 1.15 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-empty p,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-empty-state p {
  display: -webkit-box !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  font-size: clamp(0.68rem, 0.74vw, 0.78rem) !important;
  line-height: 1.28 !important;
}

@media (max-width: 1360px) {
  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary {
    grid-template-columns: auto minmax(0, 1fr) minmax(13.5rem, 25%) !important;
  }

  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid {
    gap: 0.46rem !important;
  }

  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-actions {
    max-width: 4.8rem !important;
  }
}

@media (max-width: 1180px) {
  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel {
    grid-column: 1 / -1 !important;
  }

  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid {
    grid-template-columns: 1fr !important;
  }

  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-item {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "state"
      "title"
      "meta"
      "action" !important;
  }

  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-actions {
    justify-self: start !important;
    align-items: flex-start !important;
  }
}

/* profile-typography-balance-final-20260612-2: keep profile card reading anchors near the top-left. */
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card {
  display: grid !important;
  align-content: start !important;
  justify-items: start !important;
  gap: clamp(0.16rem, 0.24vw, 0.26rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card {
  padding-top: clamp(1.02rem, 1.28vw, 1.32rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card {
  padding-top: clamp(0.88rem, 1.1vw, 1.16rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid {
  align-content: start !important;
  align-items: stretch !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid > span {
  align-content: start !important;
  align-items: start !important;
  padding-top: clamp(0.9rem, 1.12vw, 1.18rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid > span b {
  align-self: start !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-empty p,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-empty-state p,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel p {
  white-space: normal !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card .profile-empty-state {
  justify-items: start !important;
  max-width: 100% !important;
}

/* score-editor-duration-music-font-final-20260612-1: use the note-atlas music font for duration buttons. */
@font-face {
  font-family: "JMDT Noto Music";
  src: url("/platform/assets/fonts/NotoMusic-Regular.ttf?v=20260612-1") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration] > .score-symbol-icon.is-duration {
  position: relative !important;
  display: grid !important;
  width: clamp(1.98rem, 3.1vh, 2.38rem) !important;
  height: clamp(1.98rem, 3.1vh, 2.38rem) !important;
  place-items: center !important;
  overflow: visible !important;
  color: rgba(255, 246, 226, 0.98) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
}

html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration] > .score-symbol-icon.is-duration::before,
html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration] > .score-symbol-icon.is-duration::after {
  display: none !important;
  content: none !important;
}

html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration] > .score-symbol-icon.is-duration > svg,
html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration] > .score-symbol-icon.is-duration > img {
  display: none !important;
}

html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration] .score-toolbar-notation-font {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  color: currentColor !important;
  font-family:
    "JMDT Noto Music",
    "Noto Music",
    "Bravura",
    "Apple Symbols",
    "Segoe UI Symbol",
    "Arial Unicode MS",
    serif !important;
  font-size: clamp(2.48rem, 3.92vh, 3rem) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0.82 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-indent: 0 !important;
  text-rendering: geometricPrecision !important;
  white-space: nowrap !important;
  transform: translateY(0.02rem) !important;
}

html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration="whole"] .score-toolbar-notation-font {
  font-size: clamp(3.42rem, 5.2vh, 4.05rem) !important;
  line-height: 0.64 !important;
  transform: translateY(0.02rem) !important;
}

html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration="eighth"] .score-toolbar-notation-font,
html[data-active-module="scoreEditor"] .score-compose-duration .score-palette-button[data-score-editor-duration="sixteenth"] .score-toolbar-notation-font {
  font-size: clamp(2.38rem, 3.75vh, 2.9rem) !important;
}

html[data-active-module="scoreEditor"] .score-palette-button.is-active > .score-symbol-icon.is-duration,
html[data-active-module="scoreEditor"] .score-palette-button:hover > .score-symbol-icon.is-duration {
  color: rgba(255, 250, 236, 0.99) !important;
}

/* note-atlas-barline-readable-20260612-1: draw barline symbols with fixed spacing instead of font glyph fallbacks. */
html[data-active-module="violinKnowledge"] .knowledge-note-grid.is-category-detail.is-card-detail .knowledge-note-symbol-card.has-drawn-barline {
  grid-template-rows: minmax(3.15rem, 1fr) auto !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-symbol-card-glyph.is-barline-symbol,
html[data-active-module="violinKnowledge"] .knowledge-note-direct-card .knowledge-note-symbol-card-glyph.is-barline-symbol {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: clamp(2.9rem, 4.4vw, 3.75rem) !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html[data-active-module="violinKnowledge"] .knowledge-barline-glyph {
  position: relative !important;
  display: block !important;
  width: clamp(2.45rem, 3.35vw, 3.35rem) !important;
  height: clamp(2.55rem, 3.65vw, 3.45rem) !important;
  color: rgba(255, 226, 174, 0.98) !important;
  filter: drop-shadow(0 0 0.62rem rgba(var(--library-study-gold), 0.28)) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-barline-glyph .barline-thin,
html[data-active-module="violinKnowledge"] .knowledge-barline-glyph .barline-heavy {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  display: block !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

html[data-active-module="violinKnowledge"] .knowledge-barline-glyph .barline-thin {
  width: clamp(0.12rem, 0.2vw, 0.17rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-barline-glyph .barline-heavy {
  width: clamp(0.32rem, 0.48vw, 0.42rem) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-barline-glyph.is-single .barline-thin.is-left {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-barline-glyph.is-single .barline-thin.is-right,
html[data-active-module="violinKnowledge"] .knowledge-barline-glyph.is-single .barline-heavy,
html[data-active-module="violinKnowledge"] .knowledge-barline-glyph.is-double .barline-heavy,
html[data-active-module="violinKnowledge"] .knowledge-barline-glyph.is-final .barline-thin.is-right,
html[data-active-module="violinKnowledge"] .knowledge-barline-glyph.is-dashed .barline-thin.is-right,
html[data-active-module="violinKnowledge"] .knowledge-barline-glyph.is-dashed .barline-heavy,
html[data-active-module="violinKnowledge"] .knowledge-barline-glyph.is-heavy .barline-thin {
  display: none !important;
}

html[data-active-module="violinKnowledge"] .knowledge-barline-glyph.is-double .barline-thin.is-left {
  left: 42% !important;
}

html[data-active-module="violinKnowledge"] .knowledge-barline-glyph.is-double .barline-thin.is-right {
  left: 58% !important;
}

html[data-active-module="violinKnowledge"] .knowledge-barline-glyph.is-final .barline-thin.is-left {
  left: 37% !important;
}

html[data-active-module="violinKnowledge"] .knowledge-barline-glyph.is-final .barline-heavy {
  left: 58% !important;
}

html[data-active-module="violinKnowledge"] .knowledge-barline-glyph.is-dashed .barline-thin.is-left {
  left: 50% !important;
  background: repeating-linear-gradient(
    to bottom,
    currentColor 0 0.32rem,
    transparent 0.32rem 0.52rem
  ) !important;
  transform: translateX(-50%) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-barline-glyph.is-heavy .barline-heavy {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-staff-demo.is-bar .knowledge-staff-barline {
  position: absolute !important;
  left: 55% !important;
  top: 47% !important;
  z-index: 3 !important;
  width: clamp(2.6rem, 4vw, 3.7rem) !important;
  height: 4.45rem !important;
  transform: translate(-50%, -50%) !important;
  animation: knowledgeStaffSymbolDrop 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both !important;
}

html[data-active-module="violinKnowledge"] .knowledge-staff-repeat-mark {
  position: absolute !important;
  left: 55% !important;
  top: 47% !important;
  z-index: 3 !important;
  display: block !important;
  width: 3.55rem !important;
  height: 4.45rem !important;
  color: rgba(255, 226, 174, 0.98) !important;
  filter: drop-shadow(0 0 0.62rem rgba(var(--library-study-gold), 0.26)) !important;
  transform: translate(-50%, -50%) !important;
  animation: knowledgeStaffSymbolDrop 520ms cubic-bezier(0.16, 0.9, 0.22, 1.08) both !important;
}

html[data-active-module="violinKnowledge"] .knowledge-staff-repeat-mark i,
html[data-active-module="violinKnowledge"] .knowledge-staff-repeat-mark b {
  position: absolute !important;
  display: block !important;
}

html[data-active-module="violinKnowledge"] .knowledge-staff-repeat-mark i {
  top: 0 !important;
  bottom: 0 !important;
  width: 0.15rem !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

html[data-active-module="violinKnowledge"] .knowledge-staff-repeat-mark i:first-child {
  left: 38% !important;
  opacity: 0.7 !important;
}

html[data-active-module="violinKnowledge"] .knowledge-staff-repeat-mark i:nth-child(2) {
  left: 54% !important;
  width: 0.34rem !important;
}

html[data-active-module="violinKnowledge"] .knowledge-staff-repeat-mark b {
  width: 0.36rem !important;
  height: 0.36rem !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

html[data-active-module="violinKnowledge"] .knowledge-staff-repeat-mark b:first-of-type {
  top: 36% !important;
}

html[data-active-module="violinKnowledge"] .knowledge-staff-repeat-mark b:last-of-type {
  top: 58% !important;
}

html[data-active-module="violinKnowledge"] .knowledge-staff-repeat-mark.is-start b {
  left: 72% !important;
}

html[data-active-module="violinKnowledge"] .knowledge-staff-repeat-mark.is-end b {
  left: 14% !important;
}

/* profile-action-dashboard-20260612-1: use the full account page area and make the next action obvious. */
html[data-active-module="profile"] .content-grid[data-module="profile"] {
  padding: clamp(0.56rem, 0.82vw, 0.86rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page {
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(19rem, 0.42fr) !important;
  grid-template-rows: minmax(6.4rem, 0.24fr) minmax(7.4rem, 0.24fr) minmax(13.4rem, 0.52fr) !important;
  gap: clamp(0.58rem, 0.82vw, 0.88rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary {
  grid-template-columns: auto minmax(0, 1fr) minmax(19rem, 30%) !important;
  padding: clamp(1rem, 1.3vw, 1.36rem) clamp(1.05rem, 1.48vw, 1.55rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-copy h3 {
  font-size: clamp(2.38rem, 3.38vw, 3.45rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel {
  align-self: stretch !important;
  align-content: center !important;
  min-height: 4.75rem !important;
  padding: clamp(0.84rem, 1vw, 1.08rem) clamp(0.95rem, 1.16vw, 1.2rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefits-card {
  grid-row: 2 !important;
  padding: clamp(0.68rem, 0.9vw, 0.92rem) !important;
  gap: clamp(0.42rem, 0.56vw, 0.6rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-content: stretch !important;
  gap: clamp(0.5rem, 0.68vw, 0.72rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid > span {
  align-content: center !important;
  min-height: 4.1rem !important;
  padding: clamp(0.58rem, 0.76vw, 0.82rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-orders-card {
  grid-row: 3 !important;
  padding: clamp(1rem, 1.18vw, 1.28rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  align-content: start !important;
  gap: clamp(0.34rem, 0.5vw, 0.54rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card strong {
  font-size: clamp(1.9rem, 2.35vw, 2.42rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  gap: clamp(0.34rem, 0.48vw, 0.52rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(var(--library-study-gold), 0.16), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent 52%) !important;
  opacity: 0.9 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card > * {
  position: relative !important;
  z-index: 1 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card span {
  font-size: clamp(0.95rem, 1.08vw, 1.12rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card strong {
  margin-top: 0 !important;
  font-size: clamp(2.7rem, 4vw, 4.05rem) !important;
  line-height: 0.96 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card small,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-rule {
  -webkit-line-clamp: 3 !important;
  font-size: clamp(0.76rem, 0.84vw, 0.9rem) !important;
  line-height: 1.38 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-actions {
  display: grid !important;
  width: 100% !important;
  margin-top: clamp(0.45rem, 0.7vw, 0.76rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-primary {
  width: 100% !important;
  min-height: clamp(3rem, 4.7vw, 3.75rem) !important;
  justify-content: center !important;
  border-radius: 0.62rem !important;
  font-size: clamp(0.98rem, 1.12vw, 1.16rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.22),
    0 0.9rem 1.9rem rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-secondary {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-height: clamp(2.65rem, 3.8vw, 3.2rem) !important;
  justify-content: center !important;
  border: 1px solid rgba(var(--library-study-gold), 0.42) !important;
  border-radius: 0.62rem !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: rgba(255, 238, 204, 0.96) !important;
  font: inherit !important;
  font-size: clamp(0.88rem, 1vw, 1.04rem) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-secondary:hover {
  transform: translateY(-1px) scale(1.01) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-primary:hover {
  transform: translateY(-1px) scale(1.012) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-orders-card {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-empty {
  align-content: center !important;
  justify-items: stretch !important;
  min-height: 100% !important;
  gap: clamp(0.56rem, 0.78vw, 0.84rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card {
  grid-column: 4 !important;
  grid-row: 1 / 4 !important;
  padding: clamp(0.92rem, 1.12vw, 1.18rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card .profile-card-head h3 {
  white-space: normal !important;
  font-size: clamp(1.28rem, 1.55vw, 1.68rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-list {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  gap: clamp(0.62rem, 0.8vw, 0.86rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-list.is-empty {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-content: center !important;
  align-items: stretch !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card .profile-empty-state {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  align-content: center !important;
  justify-items: stretch !important;
  gap: clamp(0.62rem, 0.9vw, 0.94rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card .profile-empty-state strong {
  font-size: clamp(1.08rem, 1.24vw, 1.32rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-empty-action {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-height: 2.85rem !important;
  margin-top: clamp(0.28rem, 0.44vw, 0.48rem) !important;
  border: 1px solid rgba(var(--library-study-gold), 0.54) !important;
  border-radius: 0.62rem !important;
  background:
    linear-gradient(180deg, rgba(var(--library-study-gold), 0.18), rgba(var(--library-study-gold), 0.06)),
    rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 240, 205, 0.98) !important;
  font: inherit !important;
  font-size: clamp(0.9rem, 1vw, 1.04rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-empty-action:hover {
  transform: translateY(-1px) scale(1.01) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-more-card {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-width: 0 !important;
  min-height: clamp(12rem, 32vh, 21rem) !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: clamp(0.42rem, 0.62vw, 0.68rem) !important;
  padding: clamp(0.92rem, 1.1vw, 1.18rem) !important;
  border: 1px dashed rgba(var(--library-study-gold), 0.36) !important;
  border-radius: 0.58rem !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--library-study-gold), 0.12), transparent 54%),
    rgba(255, 255, 255, 0.028) !important;
  color: inherit !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-more-card strong {
  color: rgba(255, 246, 230, 0.98) !important;
  font-size: clamp(1rem, 1.16vw, 1.22rem) !important;
  line-height: 1.15 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-more-card span {
  color: rgba(236, 231, 220, 0.72) !important;
  font-size: clamp(0.72rem, 0.82vw, 0.88rem) !important;
  line-height: 1.38 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-more-card:hover {
  transform: translateY(-1px) scale(1.008) !important;
  border-color: rgba(var(--library-study-gold), 0.58) !important;
}

/* profile-unified-card-panels-20260612-1: make Profile cards share the same header + content panel structure. */
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefits-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-orders-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  gap: clamp(0.62rem, 0.82vw, 0.9rem) !important;
  padding: clamp(0.88rem, 1.08vw, 1.18rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-head {
  display: flex !important;
  align-items: start !important;
  justify-content: space-between !important;
  gap: clamp(0.7rem, 0.9vw, 1rem) !important;
  min-height: clamp(2.25rem, 3.1vw, 2.85rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-head h3 {
  white-space: normal !important;
  font-size: clamp(1.08rem, 1.28vw, 1.4rem) !important;
  line-height: 1.08 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-body-panel,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-list,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-list,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-empty {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  border: 1px solid rgba(255, 255, 255, 0.045) !important;
  border-radius: 0.52rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.016)),
    rgba(255, 255, 255, 0.018) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-membership-panel,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-panel {
  justify-self: stretch !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  justify-items: stretch !important;
  gap: clamp(0.56rem, 0.78vw, 0.88rem) !important;
  padding: clamp(0.96rem, 1.2vw, 1.28rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-membership-panel strong,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-panel strong {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.98) !important;
  font-size: clamp(2.55rem, 4vw, 4rem) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-membership-panel p,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-panel p,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-panel small {
  display: -webkit-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  color: rgba(236, 231, 220, 0.72) !important;
  font-size: clamp(0.78rem, 0.88vw, 0.92rem) !important;
  line-height: 1.38 !important;
  white-space: normal !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-membership-panel p {
  -webkit-line-clamp: 2 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-panel p,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-panel small {
  -webkit-line-clamp: 3 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefits-panel {
  display: grid !important;
  align-items: stretch !important;
  padding: clamp(0.62rem, 0.82vw, 0.9rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefits-panel .profile-benefit-grid {
  height: 100% !important;
  align-content: stretch !important;
  align-items: stretch !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefits-panel .profile-benefit-grid > span {
  min-height: 0 !important;
  height: 100% !important;
  border-radius: 0.42rem !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card .profile-card-secondary,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card .profile-card-primary,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-empty .profile-empty-action,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card .profile-empty-action {
  align-self: end !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card .profile-empty-state,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-empty {
  align-content: center !important;
  justify-items: stretch !important;
  padding: clamp(0.92rem, 1.15vw, 1.22rem) !important;
}

/* profile-system-unified-final-20260612-1: one card system for the whole profile page. */
html[data-active-module="profile"] .content-grid[data-module="profile"] {
  padding: clamp(0.52rem, 0.74vw, 0.78rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(17.6rem, 0.36fr) !important;
  grid-template-rows: minmax(8.4rem, 0.27fr) minmax(7.05rem, 0.23fr) minmax(13.7rem, 0.5fr) !important;
  gap: clamp(0.56rem, 0.76vw, 0.82rem) !important;
  height: 100% !important;
  overflow: hidden !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary {
  grid-column: 1 / 4 !important;
  grid-row: 1 !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  column-gap: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefits-card {
  grid-column: 1 / 4 !important;
  grid-row: 2 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-days-card {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-card {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-orders-card {
  grid-column: 3 !important;
  grid-row: 3 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-card {
  grid-column: 4 !important;
  grid-row: 1 / 4 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-glass-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(0.56rem, 0.74vw, 0.8rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: clamp(0.78rem, 0.98vw, 1rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.078) !important;
  border-radius: 0.58rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012)),
    rgba(8, 9, 8, 0.78) !important;
  box-shadow: none !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-head {
  display: flex !important;
  min-height: clamp(2.05rem, 2.62vw, 2.55rem) !important;
  align-items: start !important;
  justify-content: space-between !important;
  gap: 0.72rem !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-head .eyebrow {
  margin: 0 0 0.12rem !important;
  color: rgba(var(--library-study-gold), 0.98) !important;
  font-size: clamp(0.56rem, 0.66vw, 0.68rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-head h3 {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: clamp(1.12rem, 1.34vw, 1.46rem) !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-body-panel,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-list,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-empty,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-list {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.062) !important;
  border-radius: 0.46rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.018) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-panel {
  justify-self: stretch !important;
  display: grid !important;
  grid-template-columns: auto minmax(18rem, 1fr) minmax(17rem, 30%) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: clamp(0.78rem, 1vw, 1.08rem) !important;
  padding: clamp(0.76rem, 0.96vw, 1.04rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-avatar-mark {
  justify-self: start !important;
  width: clamp(3.05rem, 3.55vw, 3.9rem) !important;
  height: clamp(3.05rem, 3.55vw, 3.9rem) !important;
  font-size: clamp(1.4rem, 2vw, 2rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-copy {
  justify-self: start !important;
  width: auto !important;
  max-width: 31rem !important;
  display: grid !important;
  justify-items: start !important;
  align-content: center !important;
  gap: 0.18rem !important;
  text-align: left !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-copy h3 {
  justify-self: start !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.98) !important;
  font-size: clamp(2.05rem, 2.85vw, 3rem) !important;
  line-height: 0.98 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-copy p {
  justify-self: start !important;
  text-align: left !important;
  margin: 0 !important;
  color: rgba(236, 231, 220, 0.74) !important;
  font-size: clamp(0.86rem, 0.98vw, 1.02rem) !important;
  line-height: 1.2 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel {
  justify-self: end !important;
  width: min(100%, 17.5rem) !important;
  display: grid !important;
  align-content: center !important;
  gap: 0.18rem !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: clamp(0.72rem, 0.9vw, 0.96rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0.42rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel span,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel p {
  margin: 0 !important;
  font-size: clamp(0.66rem, 0.76vw, 0.8rem) !important;
  line-height: 1.28 !important;
  white-space: normal !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-status-panel strong {
  overflow: hidden !important;
  font-size: clamp(0.98rem, 1.12vw, 1.18rem) !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefits-panel {
  display: grid !important;
  padding: clamp(0.52rem, 0.7vw, 0.76rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(0.46rem, 0.62vw, 0.68rem) !important;
  height: 100% !important;
  align-items: stretch !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid > span {
  display: grid !important;
  grid-template-columns: clamp(1.88rem, 2.1vw, 2.2rem) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  min-height: 0 !important;
  height: 100% !important;
  gap: 0.08rem clamp(0.5rem, 0.64vw, 0.7rem) !important;
  padding: clamp(0.42rem, 0.58vw, 0.66rem) !important;
  border: 0 !important;
  border-radius: 0.36rem !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-benefit-grid > span b {
  grid-row: 1 / 3 !important;
  align-self: center !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-membership-panel,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-panel {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  gap: clamp(0.5rem, 0.68vw, 0.74rem) !important;
  padding: clamp(0.9rem, 1.06vw, 1.14rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-membership-panel strong,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-panel strong {
  margin: 0 !important;
  font-size: clamp(2.7rem, 3.75vw, 3.9rem) !important;
  line-height: 0.96 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-membership-panel p,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-panel p,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-quota-panel small {
  margin: 0 !important;
  color: rgba(236, 231, 220, 0.74) !important;
  font-size: clamp(0.78rem, 0.86vw, 0.9rem) !important;
  line-height: 1.35 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-primary,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-secondary,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-empty-action {
  width: 100% !important;
  min-height: clamp(2.65rem, 3.35vw, 3.1rem) !important;
  border-radius: 0.42rem !important;
  font-size: clamp(0.9rem, 0.98vw, 1.04rem) !important;
  font-weight: 900 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-list {
  display: grid !important;
  gap: clamp(0.56rem, 0.72vw, 0.78rem) !important;
  padding: clamp(0.72rem, 0.9vw, 0.96rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-list.is-empty {
  grid-template-rows: 1fr !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-list.is-empty .profile-empty-state {
  min-height: 100% !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 0.42rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.014)),
    rgba(255, 255, 255, 0.026) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-item,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-more-card {
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 0.42rem !important;
  background: rgba(255, 255, 255, 0.032) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-empty,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-empty-state {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  justify-items: stretch !important;
  gap: clamp(0.54rem, 0.72vw, 0.78rem) !important;
  padding: clamp(0.84rem, 1vw, 1.08rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-empty strong,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-empty-state strong {
  align-self: end !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-order-empty .profile-empty-action,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-empty-state .profile-empty-action {
  align-self: end !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-item {
  min-height: clamp(5.05rem, 7.2vh, 6.15rem) !important;
  padding: clamp(0.72rem, 0.96vw, 1rem) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-actions {
  max-width: 6.6rem !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-actions a,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-generated-actions button,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-head .glass-button,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-card-head-actions .glass-button {
  min-height: 2.1rem !important;
  padding: 0.46rem 0.78rem !important;
  border-radius: 999px !important;
}

@media (max-width: 1360px) {
  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-dashboard.profile-account-page {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(17.2rem, 0.38fr) !important;
  }

  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: stretch !important;
    column-gap: 0 !important;
  }

  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary > .profile-card-head,
  html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-account-summary > .profile-account-panel {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* learning-tools-metronome-popout-cover-aligned-eof-20260612-5: align the finished popout to the original cover crop, trimming the left edge artifact. */
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active {
  overflow: visible !important;
  border-color: transparent !important;
  background: url("/platform/assets/learning-tool-metronome.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-5") center center / cover no-repeat !important;
  background-image: url("/platform/assets/learning-tool-metronome.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-5") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active::before {
  content: "" !important;
  position: absolute !important;
  top: -13.245033% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 0 !important;
  display: block !important;
  width: 127.5% !important;
  height: 113.245033% !important;
  aspect-ratio: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-5") center top / 100% 100% no-repeat !important;
  background-image: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-5") !important;
  background-position: center top !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  clip-path: inset(0 10.784314% 0 13.8%) !important;
  transform: translateX(-50%) !important;
}

/* profile-cutout-library-bg-hover-eof-20260612-1: match library page ambience and add subtle module button feedback. */
html[data-active-module="profile"] .content-grid[data-module="profile"] {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 38% -10%, rgba(255, 222, 172, 0.11), transparent 35%),
    radial-gradient(ellipse at 79% 2%, rgba(68, 107, 137, 0.16), transparent 38%),
    radial-gradient(ellipse at 12% 14%, rgba(130, 91, 51, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(14, 15, 17, 0.98), rgba(6, 7, 9, 0.995) 42%, rgba(3, 4, 6, 0.995)) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"]::before,
html[data-active-module="profile"] .content-grid[data-module="profile"]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"]::before {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045) 50%, transparent),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 5px) !important;
  opacity: 0.36 !important;
  mix-blend-mode: screen !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"]::after {
  background:
    radial-gradient(ellipse at 52% 20%, rgba(255, 216, 156, 0.055), transparent 34%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28)) !important;
  opacity: 0.86 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] > * {
  position: relative !important;
  z-index: 1 !important;
}

html[data-active-module="profile"] .profile-cutout-module:has(.profile-cutout-hotspot) {
  cursor: pointer !important;
  will-change: transform, filter !important;
  transition:
    transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 150ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  transform: translateZ(0) scale(1) !important;
  transform-origin: center center !important;
}

html[data-active-module="profile"] .profile-cutout-module[role="button"]:focus {
  outline: none !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-generated:has(.profile-cutout-hotspot) {
  transform-origin: center right !important;
}

html[data-active-module="profile"] .profile-cutout-module:has(.profile-cutout-hotspot):hover,
html[data-active-module="profile"] .profile-cutout-module[role="button"]:focus-visible,
html[data-active-module="profile"] .profile-cutout-module:has(.profile-cutout-hotspot:hover),
html[data-active-module="profile"] .profile-cutout-module:has(.profile-cutout-hotspot:focus-visible) {
  z-index: 5 !important;
  transform: translateZ(0) scale(1.012) !important;
  filter: brightness(1.045) contrast(1.015) !important;
}

html[data-active-module="profile"] .profile-cutout-module:has(.profile-cutout-hotspot):active,
html[data-active-module="profile"] .profile-cutout-module:has(.profile-cutout-hotspot:active) {
  transform: translateZ(0) scale(1.006) !important;
  filter: brightness(1.025) contrast(1.01) !important;
  transition-duration: 80ms !important;
}

/* profile-cutout-clear-button-layers-eof-20260612-1: keep all clickable button layers invisible; only the cutout images render. */
html[data-active-module="profile"] .profile-cutout-module[role="button"],
html[data-active-module="profile"] .profile-cutout-module[role="button"]:hover,
html[data-active-module="profile"] .profile-cutout-module[role="button"]:focus,
html[data-active-module="profile"] .profile-cutout-module[role="button"]:focus-visible,
html[data-active-module="profile"] .profile-cutout-module[role="button"]:active,
html[data-active-module="profile"] .profile-cutout-hotspot,
html[data-active-module="profile"] .profile-cutout-hotspot:hover,
html[data-active-module="profile"] .profile-cutout-hotspot:focus,
html[data-active-module="profile"] .profile-cutout-hotspot:focus-visible,
html[data-active-module="profile"] .profile-cutout-hotspot:active {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html[data-active-module="profile"] .profile-cutout-module:has(.profile-cutout-hotspot):hover,
html[data-active-module="profile"] .profile-cutout-module[role="button"]:focus-visible,
html[data-active-module="profile"] .profile-cutout-module:has(.profile-cutout-hotspot:hover),
html[data-active-module="profile"] .profile-cutout-module:has(.profile-cutout-hotspot:focus-visible) {
  transform: translateZ(0) scale(1.012) !important;
  filter: none !important;
}

html[data-active-module="profile"] .profile-cutout-module:has(.profile-cutout-hotspot):active,
html[data-active-module="profile"] .profile-cutout-module:has(.profile-cutout-hotspot:active) {
  transform: translateZ(0) scale(1.006) !important;
  filter: none !important;
}

/* profile-right-stack-eof-20260612-1: right rail contains queue, quota, and membership only. */
html[data-active-module="profile"] .profile-cutout-module.is-generated-queue {
  left: 77.6316% !important;
  top: 2.1254% !important;
  width: 21.1124% !important;
  height: 26.5675% !important;
  transform-origin: center right !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-quota {
  left: 79.7847% !important;
  top: 31.3496% !important;
  width: 16.7464% !important;
  height: 29.6493% !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-membership {
  left: 79.7847% !important;
  top: 64.8247% !important;
  width: 16.7464% !important;
  height: 32.5186% !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-orders {
  left: 2.512% !important;
  top: 52.9224% !important;
  width: 25.3589% !important;
  height: 41.9766% !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-generated-queue .profile-cutout-hotspot.is-generate-new {
  left: 72% !important;
  top: 2.7% !important;
  width: 21.2% !important;
  height: 16% !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-generated-queue .profile-cutout-hotspot.is-generate-panel {
  left: 6.2% !important;
  top: 31.5% !important;
  width: 87% !important;
  height: 57.5% !important;
}

/* learning-tools-metronome-popout-cover-aligned-eof-20260612-6: remove the tiny left artifact only in the overhanging top band. */
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active {
  overflow: visible !important;
  border-color: transparent !important;
  background: url("/platform/assets/learning-tool-metronome.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-6") center center / cover no-repeat !important;
  background-image: url("/platform/assets/learning-tool-metronome.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-6") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active::before {
  content: "" !important;
  position: absolute !important;
  top: -13.245033% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 0 !important;
  display: block !important;
  width: 127.5% !important;
  height: 113.245033% !important;
  aspect-ratio: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-6") center top / 100% 100% no-repeat !important;
  background-image: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-6") !important;
  background-position: center top !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  clip-path: polygon(61% 0, 89.215686% 0, 89.215686% 100%, 13.8% 100%, 13.8% 11.72%, 61% 11.72%) !important;
  transform: translateX(-50%) !important;
}

/* learning-tools-metronome-popout-cover-aligned-eof-20260612-7: show only the real overhanging head from the finished art; keep the card body on the sharp original cover. */
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active {
  overflow: visible !important;
  border-color: transparent !important;
  background: url("/platform/assets/learning-tool-metronome.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-7") center center / cover no-repeat !important;
  background-image: url("/platform/assets/learning-tool-metronome.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-7") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active::before {
  content: "" !important;
  position: absolute !important;
  top: -13.245033% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 0 !important;
  display: block !important;
  width: 127.5% !important;
  height: 113.245033% !important;
  aspect-ratio: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-7") center top / 100% 100% no-repeat !important;
  background-image: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-7") !important;
  background-position: center top !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  clip-path: polygon(61% 0, 89.215686% 0, 89.215686% 11.18%, 61% 11.18%) !important;
  transform: translateX(-50%) !important;
}

/* learning-tools-metronome-popout-cover-aligned-eof-20260612-8: keep the finished head in its original position, but reveal only the metronome column so the left border residue stays hidden. */
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active {
  overflow: visible !important;
  border-color: transparent !important;
  background: url("/platform/assets/learning-tool-metronome.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-8") center center / cover no-repeat !important;
  background-image: url("/platform/assets/learning-tool-metronome.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-8") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active::before {
  content: "" !important;
  position: absolute !important;
  top: -13.245033% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 0 !important;
  display: block !important;
  width: 127.5% !important;
  height: 113.245033% !important;
  aspect-ratio: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-8") center top / 100% 100% no-repeat !important;
  background-image: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-8") !important;
  background-position: center top !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  clip-path: polygon(61% 0, 89.215686% 0, 89.215686% 100%, 61% 100%) !important;
  transform: translateX(-50%) !important;
}

/* profile-benefits-all-eof-20260612-1: remove the main orders block and turn benefits into a full entitlement map. */
html[data-active-module="profile"] .profile-cutout-module.is-orders {
  display: none !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-benefits {
  left: 1.3158% !important;
  top: 28.2678% !important;
  width: 74.9402% !important;
  height: 66.6312% !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-benefits > img {
  display: none !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-benefits .profile-cutout-hotspot.is-benefits-open {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-real {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(0.46rem, 0.64vw, 0.7rem) !important;
  padding: clamp(0.76rem, 1.05vw, 1.05rem) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.58rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(9, 10, 12, 0.76) !important;
  box-shadow: none !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  min-width: 0 !important;
  padding-bottom: clamp(0.38rem, 0.54vw, 0.58rem) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-head div {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.56rem !important;
  min-width: 0 !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-head strong {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: clamp(0.92rem, 1.45vw, 1.3rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-head span {
  color: rgba(232, 184, 111, 0.82) !important;
  font-size: clamp(0.55rem, 0.78vw, 0.72rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-head em {
  flex: 0 0 auto !important;
  display: inline-grid !important;
  place-items: center !important;
  min-height: 1.86rem !important;
  padding: 0 0.88rem !important;
  border: 1px solid rgba(235, 181, 101, 0.72) !important;
  border-radius: 999px !important;
  color: rgba(255, 214, 156, 0.96) !important;
  background: transparent !important;
  font-style: normal !important;
  font-size: clamp(0.62rem, 0.78vw, 0.76rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: clamp(0.38rem, 0.55vw, 0.58rem) !important;
  min-height: 0 !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: clamp(0.4rem, 0.58vw, 0.62rem) !important;
  row-gap: 0.16rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(0.42rem, 0.62vw, 0.68rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.064) !important;
  border-radius: 0.48rem !important;
  background: rgba(255, 255, 255, 0.028) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span b {
  grid-row: 1 / 3 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: clamp(1.78rem, 2.55vw, 2.36rem) !important;
  aspect-ratio: 1 !important;
  border-radius: 999px !important;
  color: rgba(255, 220, 166, 0.92) !important;
  background: rgba(232, 184, 111, 0.14) !important;
  font-size: clamp(0.5rem, 0.66vw, 0.64rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: clamp(0.58rem, 0.86vw, 0.82rem) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(220, 220, 220, 0.62) !important;
  font-size: clamp(0.5rem, 0.66vw, 0.64rem) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span.is-active {
  border-color: rgba(232, 184, 111, 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255, 221, 166, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.04) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span.is-active b {
  color: rgba(38, 25, 11, 0.96) !important;
  background: linear-gradient(180deg, rgba(255, 221, 166, 0.98), rgba(192, 134, 64, 0.94)) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span.is-active strong {
  color: rgba(255, 255, 255, 0.98) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span.is-active small {
  color: rgba(255, 221, 166, 0.78) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span.is-locked {
  opacity: 0.43 !important;
  filter: grayscale(0.7) !important;
}

/* profile-benefits-readable-eof-20260612-1: give every entitlement enough room to show its name. */
html[data-active-module="profile"] .profile-cutout-benefits-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(0.42rem, 0.62vw, 0.66rem) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span {
  align-items: start !important;
  padding: clamp(0.5rem, 0.72vw, 0.74rem) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  text-overflow: clip !important;
  font-size: clamp(0.58rem, 0.9vw, 0.84rem) !important;
  line-height: 1.18 !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span small {
  align-self: end !important;
  white-space: nowrap !important;
}

/* learning-tools-metronome-popout-cover-aligned-eof-20260612-9: keep the head fixed, but notch out the finished-art top-border residue before the card body begins. */
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active {
  overflow: visible !important;
  border-color: transparent !important;
  background: url("/platform/assets/learning-tool-metronome.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-9") center center / cover no-repeat !important;
  background-image: url("/platform/assets/learning-tool-metronome.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-9") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active::before {
  content: "" !important;
  position: absolute !important;
  top: -13.245033% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 0 !important;
  display: block !important;
  width: 127.5% !important;
  height: 113.245033% !important;
  aspect-ratio: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-9") center top / 100% 100% no-repeat !important;
  background-image: url("/platform/assets/learning-tool-metronome-123-popout-continuous-no-arrow-v21.png?v=learning-tools-metronome-popout-cover-aligned-eof-20260612-9") !important;
  background-position: center top !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  clip-path: polygon(66% 0, 89.215686% 0, 89.215686% 100%, 61% 100%, 61% 12.6%, 66% 12.6%) !important;
  transform: translateX(-50%) !important;
}

/* learning-tools-metronome-head-overlay-original-cover-20260612-10: use the sharp original card as the full cover and overlay only a transparent head cutout. */
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active {
  overflow: visible !important;
  border-color: transparent !important;
  background: url("/platform/assets/learning-tool-metronome.png?v=learning-tools-metronome-head-overlay-original-cover-20260612-10") center center / cover no-repeat !important;
  background-image: url("/platform/assets/learning-tool-metronome.png?v=learning-tools-metronome-head-overlay-original-cover-20260612-10") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active::before {
  content: "" !important;
  position: absolute !important;
  top: -13.245033% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 0 !important;
  display: block !important;
  width: 127.5% !important;
  height: 113.245033% !important;
  aspect-ratio: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: url("/platform/assets/learning-tool-metronome-head-popout-only-v1.png?v=learning-tools-metronome-head-overlay-original-cover-20260612-10") center top / 100% 100% no-repeat !important;
  background-image: url("/platform/assets/learning-tool-metronome-head-popout-only-v1.png?v=learning-tools-metronome-head-overlay-original-cover-20260612-10") !important;
  background-position: center top !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  clip-path: none !important;
  transform: translateX(-50%) !important;
}

/* profile-library-palette-eof-20260612-1: warm library-like palette, less gray while preserving states. */
html[data-active-module="profile"] .profile-cutout-benefits-real {
  background:
    radial-gradient(ellipse at 38% -8%, rgba(255, 222, 172, 0.095), transparent 38%),
    radial-gradient(ellipse at 83% 6%, rgba(68, 107, 137, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(18, 19, 21, 0.92), rgba(8, 9, 12, 0.94)) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span {
  border-color: rgba(255, 255, 255, 0.078) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.014)),
    rgba(10, 12, 15, 0.72) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span b {
  color: rgba(255, 220, 166, 0.74) !important;
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 220, 166, 0.14), transparent 58%),
    rgba(232, 184, 111, 0.09) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span strong {
  color: rgba(236, 236, 232, 0.76) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span small {
  color: rgba(255, 220, 166, 0.46) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span.is-active {
  border-color: rgba(255, 220, 166, 0.56) !important;
  background:
    radial-gradient(ellipse at 12% 20%, rgba(255, 220, 166, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(255, 221, 166, 0.115), rgba(255, 255, 255, 0.035)),
    rgba(18, 17, 15, 0.88) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span.is-locked {
  opacity: 0.68 !important;
  filter: none !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span.is-locked:hover {
  border-color: rgba(255, 220, 166, 0.16) !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-quota::after,
html[data-active-module="profile"] .profile-cutout-module.is-membership::after {
  border-color: rgba(255, 255, 255, 0.13) !important;
  border-bottom-color: rgba(255, 220, 166, 0.2) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 220, 166, 0.07),
    0 0.72rem 1.45rem rgba(0, 0, 0, 0.16) !important;
}

/* learning-tools-metronome-head-overlay-original-cover-20260612-15: preview the transparent head moved 16px left while keeping the original card image untouched. */
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active {
  overflow: visible !important;
  border-color: transparent !important;
  background: url("/platform/assets/learning-tool-metronome.png?v=learning-tools-metronome-head-overlay-original-cover-20260612-15-left16") center center / cover no-repeat !important;
  background-image: url("/platform/assets/learning-tool-metronome.png?v=learning-tools-metronome-head-overlay-original-cover-20260612-15-left16") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:hover::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:focus-visible::before,
html[data-active-module="nav-learningTools"] .tools-practice-card.tools-entry-card.is-metronome:active::before {
  content: "" !important;
  position: absolute !important;
  top: -13.245033% !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(50% - 16px) !important;
  z-index: 0 !important;
  display: block !important;
  width: 127.5% !important;
  height: 113.245033% !important;
  aspect-ratio: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: url("/platform/assets/learning-tool-metronome-head-popout-only-v2.png?v=learning-tools-metronome-head-overlay-original-cover-20260612-15-left16") center top / 100% 100% no-repeat !important;
  background-image: url("/platform/assets/learning-tool-metronome-head-popout-only-v2.png?v=learning-tools-metronome-head-overlay-original-cover-20260612-15-left16") !important;
  background-position: center top !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  clip-path: none !important;
  transform: translateX(-50%) !important;
}

/* profile-black-gold-final-anchor-20260612-5: anchored after the true final learning-tools block. */
html[data-active-module="profile"] body,
html[data-active-module="profile"] .main-stage,
html[data-active-module="profile"] .content-grid[data-module="profile"] {
  background:
    radial-gradient(ellipse at 42% -10%, rgba(255, 220, 166, 0.16), transparent 35%),
    radial-gradient(ellipse at 9% 18%, rgba(135, 82, 30, 0.2), transparent 34%),
    radial-gradient(ellipse at 88% 8%, rgba(232, 184, 111, 0.12), transparent 35%),
    linear-gradient(180deg, rgba(10, 8, 5, 0.99), rgba(3, 3, 3, 0.995) 44%, rgba(0, 0, 0, 1)) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"]::before {
  background:
    linear-gradient(92deg, transparent 12%, rgba(255, 220, 166, 0.08) 48%, transparent 72%),
    repeating-linear-gradient(0deg, rgba(255, 220, 166, 0.014) 0 1px, transparent 1px 7px) !important;
  opacity: 0.44 !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"]::after {
  background:
    radial-gradient(ellipse at 52% 18%, rgba(255, 220, 166, 0.07), transparent 32%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 100%) !important;
  opacity: 0.9 !important;
}

html[data-active-module="profile"] .profile-cutout-module:not(.is-benefits) img {
  filter: sepia(0.32) saturate(1.22) hue-rotate(338deg) brightness(0.8) contrast(1.18) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-real {
  border-color: rgba(255, 220, 166, 0.24) !important;
  background:
    radial-gradient(ellipse at 18% -4%, rgba(255, 220, 166, 0.17), transparent 34%),
    radial-gradient(ellipse at 82% 0%, rgba(232, 184, 111, 0.11), transparent 38%),
    linear-gradient(180deg, rgba(15, 11, 6, 0.98), rgba(4, 4, 3, 0.99)) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span {
  border-color: rgba(255, 220, 166, 0.16) !important;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 220, 166, 0.08), transparent 44%),
    linear-gradient(180deg, rgba(20, 16, 10, 0.86), rgba(3, 3, 3, 0.92)) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span.is-active {
  border-color: rgba(255, 220, 166, 0.74) !important;
  background:
    radial-gradient(ellipse at 14% 18%, rgba(255, 220, 166, 0.24), transparent 46%),
    linear-gradient(180deg, rgba(85, 55, 22, 0.58), rgba(12, 9, 5, 0.94)) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span.is-locked {
  opacity: 0.76 !important;
  filter: none !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span strong {
  color: rgba(249, 244, 232, 0.88) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span small {
  color: rgba(255, 220, 166, 0.58) !important;
}

html[data-active-module="profile"] .profile-cutout-module.is-quota::after,
html[data-active-module="profile"] .profile-cutout-module.is-membership::after {
  border-color: rgba(255, 220, 166, 0.34) !important;
  border-bottom-color: rgba(255, 220, 166, 0.48) !important;
}

/* learning-tools-material-card-hover-scale-20260612-2: make the study
   material cards feel clickable without shifting the grid around them. */
html[data-active-module="nav-learningTools"] .tools-learning-section,
html[data-active-module="nav-learningTools"] .tools-learning-grid,
html[data-active-module="nav-learningTools"] .tools-entry-grid,
html[data-active-module="nav-learningTools"] .nav-workbench-tools,
html[data-active-module="nav-learningTools"] .tools-section-stack {
  overflow: visible !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.tools-entry-card {
  position: relative !important;
  z-index: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transform-origin: center center !important;
  will-change: transform, box-shadow, filter !important;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    filter 180ms ease !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.tools-entry-card:hover,
html[data-active-module="nav-learningTools"] .tools-material-card.tools-entry-card:focus,
html[data-active-module="nav-learningTools"] .tools-material-card.tools-entry-card:focus-visible {
  z-index: 8 !important;
  transform: translate3d(0, -0.28rem, 0) scale(1.035) !important;
  border-color: rgba(255, 220, 156, 0.38) !important;
  box-shadow:
    0 1.15rem 2.3rem rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 224, 170, 0.12),
    0 0 1.5rem rgba(219, 159, 69, 0.22) !important;
  filter: brightness(1.05) saturate(1.06) !important;
}

html[data-active-module="nav-learningTools"] .tools-material-card.tools-entry-card:active {
  z-index: 9 !important;
  transform: translate3d(0, -0.12rem, 0) scale(1.02) !important;
  transition-duration: 90ms !important;
}

/* preferences-standalone-final-layout-20260612-1: clean two-column settings layout. */
html[data-active-module="preferences"] body,
html[data-active-module="preferences"] .main-stage,
html[data-active-module="preferences"] .content-grid[data-module="preferences"] {
  background:
    radial-gradient(ellipse at 42% -10%, rgba(255, 220, 166, 0.14), transparent 35%),
    radial-gradient(ellipse at 9% 18%, rgba(135, 82, 30, 0.16), transparent 34%),
    radial-gradient(ellipse at 88% 8%, rgba(68, 107, 137, 0.12), transparent 35%),
    linear-gradient(180deg, rgba(10, 8, 5, 0.99), rgba(3, 3, 3, 0.995) 44%, rgba(0, 0, 0, 1)) !important;
}

html[data-active-module="preferences"] .content-grid[data-module="preferences"] {
  align-content: stretch !important;
  overflow: auto !important;
}

html[data-active-module="preferences"] .preferences-page {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(18.5rem, 0.74fr) minmax(0, 1.26fr) !important;
  grid-template-rows: auto auto !important;
  gap: clamp(0.84rem, 1.12vw, 1.18rem) !important;
  align-content: start !important;
  min-height: 0 !important;
}

html[data-active-module="preferences"] .preferences-hero-card {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  align-content: space-between !important;
  gap: clamp(1rem, 1.35vw, 1.36rem) !important;
  min-height: clamp(13.5rem, 25vh, 18rem) !important;
  padding: clamp(1.15rem, 1.52vw, 1.55rem) !important;
}

html[data-active-module="preferences"] .preferences-hero-card h2 {
  margin: 0 !important;
  color: rgba(255, 250, 238, 0.99) !important;
  font-size: clamp(2.15rem, 3.1vw, 3.35rem) !important;
  font-weight: 950 !important;
  line-height: 0.98 !important;
}

html[data-active-module="preferences"] .preferences-hero-card p:not(.eyebrow) {
  max-width: 28rem !important;
  margin: 0.52rem 0 0 !important;
  color: rgba(229, 226, 214, 0.7) !important;
  font-size: clamp(0.86rem, 0.98vw, 1.02rem) !important;
  font-weight: 730 !important;
  line-height: 1.5 !important;
}

html[data-active-module="preferences"] .preferences-hero-card .glass-button {
  justify-self: start !important;
  min-height: 2.42rem !important;
  padding: 0 clamp(0.92rem, 1.12vw, 1.1rem) !important;
}

html[data-active-module="preferences"] .preferences-summary-card {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
  align-self: start !important;
  gap: clamp(0.5rem, 0.72vw, 0.72rem) !important;
  padding: clamp(0.82rem, 1vw, 1.08rem) !important;
}

html[data-active-module="preferences"] .preferences-summary-card span {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.2rem !important;
  padding: clamp(0.68rem, 0.86vw, 0.88rem) !important;
  border: 1px solid rgba(232, 197, 126, 0.14) !important;
  border-radius: 0.52rem !important;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 220, 166, 0.1), transparent 52%),
    rgba(232, 197, 126, 0.045) !important;
}

html[data-active-module="preferences"] .preferences-summary-card small,
html[data-active-module="preferences"] .profile-preference-group-head small {
  color: rgba(221, 226, 224, 0.62) !important;
  font-size: clamp(0.66rem, 0.72vw, 0.78rem) !important;
  font-weight: 720 !important;
  line-height: 1.32 !important;
}

html[data-active-module="preferences"] .preferences-summary-card strong {
  overflow: hidden !important;
  color: rgba(255, 250, 238, 0.94) !important;
  font-size: clamp(0.9rem, 1vw, 1.05rem) !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-active-module="preferences"] .preferences-options-card {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  align-content: start !important;
  align-self: start !important;
  min-height: 0 !important;
  padding: clamp(0.92rem, 1.18vw, 1.22rem) !important;
}

html[data-active-module="preferences"] .profile-preference-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(9.1rem, auto) !important;
  gap: clamp(0.72rem, 0.95vw, 0.95rem) !important;
  min-height: 0 !important;
}

html[data-active-module="preferences"] .profile-preference-group {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: start !important;
  gap: clamp(0.7rem, 0.88vw, 0.9rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(0.88rem, 1.05vw, 1.06rem) !important;
  border: 1px solid rgba(232, 197, 126, 0.14) !important;
  border-radius: 0.68rem !important;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 220, 166, 0.09), transparent 45%),
    linear-gradient(180deg, rgba(20, 16, 10, 0.7), rgba(5, 5, 4, 0.82)) !important;
}

html[data-active-module="preferences"] .profile-preference-group-head {
  display: grid !important;
  gap: 0.22rem !important;
  min-width: 0 !important;
}

html[data-active-module="preferences"] .profile-preference-group h4 {
  margin: 0 !important;
  color: rgba(255, 250, 238, 0.96) !important;
  font-size: clamp(1.04rem, 1.16vw, 1.22rem) !important;
  font-weight: 930 !important;
  line-height: 1.16 !important;
}

html[data-active-module="preferences"] .profile-preference-row {
  display: grid !important;
  align-content: end !important;
  gap: 0.46rem !important;
  min-width: 0 !important;
}

html[data-active-module="preferences"] .profile-preference-row > strong {
  color: rgba(246, 238, 218, 0.86) !important;
  font-size: clamp(0.76rem, 0.84vw, 0.88rem) !important;
  font-weight: 840 !important;
  line-height: 1.16 !important;
}

html[data-active-module="preferences"] .profile-preference-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.38rem !important;
  min-width: 0 !important;
}

html[data-active-module="preferences"] .profile-preference-options button {
  min-height: 2.12rem !important;
  min-width: 0 !important;
  padding: 0 0.72rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(226, 230, 226, 0.74) !important;
  cursor: pointer !important;
  font: inherit !important;
  font-size: clamp(0.7rem, 0.76vw, 0.8rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[data-active-module="preferences"] .profile-preference-options button:is(:hover, :focus-visible),
html[data-active-module="preferences"] .profile-preference-options button.is-active {
  border-color: rgba(232, 197, 126, 0.42) !important;
  background:
    radial-gradient(ellipse at 35% 0%, rgba(255, 220, 166, 0.18), transparent 58%),
    rgba(232, 197, 126, 0.15) !important;
  color: rgba(255, 238, 200, 0.98) !important;
  outline: 0 !important;
}

@media (max-width: 1180px) {
  html[data-active-module="preferences"] .preferences-page {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
  }

  html[data-active-module="preferences"] .preferences-hero-card,
  html[data-active-module="preferences"] .preferences-summary-card,
  html[data-active-module="preferences"] .preferences-options-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 760px) {
  html[data-active-module="preferences"] .preferences-hero-card,
  html[data-active-module="preferences"] .preferences-summary-card,
  html[data-active-module="preferences"] .preferences-options-card {
    padding: clamp(0.82rem, 3.6vw, 1rem) !important;
  }

  html[data-active-module="preferences"] .preferences-summary-card,
  html[data-active-module="preferences"] .profile-preference-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-active-module="preferences"] .profile-preference-grid {
    grid-auto-rows: auto !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  html[data-active-module="preferences"] .preferences-page {
    grid-template-columns: minmax(13.8rem, 0.66fr) minmax(0, 1.34fr) !important;
    grid-template-rows: auto auto !important;
    gap: 0.62rem !important;
  }

  html[data-active-module="preferences"] .preferences-hero-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 8.6rem !important;
    padding: 0.86rem 0.9rem !important;
  }

  html[data-active-module="preferences"] .preferences-hero-card h2 {
    font-size: clamp(1.84rem, 4.4vw, 2.36rem) !important;
  }

  html[data-active-module="preferences"] .preferences-hero-card p:not(.eyebrow) {
    max-width: 22rem !important;
    margin-top: 0.34rem !important;
    font-size: 0.76rem !important;
    line-height: 1.38 !important;
  }

  html[data-active-module="preferences"] .preferences-hero-card .glass-button {
    min-height: 2.04rem !important;
    padding: 0 0.82rem !important;
    font-size: 0.76rem !important;
  }

  html[data-active-module="preferences"] .preferences-summary-card {
    display: none !important;
  }

  html[data-active-module="preferences"] .preferences-options-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0.64rem !important;
  }

  html[data-active-module="preferences"] .profile-preference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(7.45rem, auto) !important;
    gap: 0.52rem !important;
  }

  html[data-active-module="preferences"] .profile-preference-group {
    gap: 0.42rem !important;
    padding: 0.68rem !important;
  }

  html[data-active-module="preferences"] .profile-preference-group h4 {
    font-size: 0.98rem !important;
  }

  html[data-active-module="preferences"] .profile-preference-group-head small {
    display: none !important;
  }

  html[data-active-module="preferences"] .profile-preference-row {
    gap: 0.32rem !important;
  }

  html[data-active-module="preferences"] .profile-preference-options button {
    min-height: 1.92rem !important;
    padding: 0 0.62rem !important;
    font-size: 0.68rem !important;
  }
}

/* note-atlas-duration-rest-copy-20260612-1: duration/rest explanations need full readable text, not compact ellipses. */
html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail.is-rest-detail,
html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail.is-duration-detail {
  height: auto !important;
  gap: clamp(0.58rem, 0.9vw, 0.86rem) !important;
  overflow: visible !important;
}

html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo.is-rest-demo,
html[data-active-module="violinKnowledge"] .knowledge-notes-stage.is-category-open .knowledge-note-demo.is-duration-demo {
  align-content: start !important;
  grid-template-rows: auto auto auto max-content !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail.is-rest-detail span,
html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail.is-duration-detail span {
  align-items: start !important;
  min-height: auto !important;
  overflow: visible !important;
}

html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail.is-rest-detail em,
html[data-active-module="violinKnowledge"] .knowledge-note-detail-list.is-dictionary-detail.is-duration-detail em {
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* profile-warm-glass-rollback-20260612-1: roll Profile back from the heavy black-gold image treatment. */
html[data-active-module="profile"],
html[data-active-module="profile"] body,
html[data-active-module="profile"] .app-shell,
html[data-active-module="profile"] .main-stage,
html[data-active-module="profile"] .content-grid[data-module="profile"] {
  background:
    radial-gradient(ellipse at 16% -8%, rgba(232, 197, 126, 0.2), transparent 38%),
    radial-gradient(ellipse at 88% 8%, rgba(92, 126, 158, 0.2), transparent 36%),
    linear-gradient(180deg, #18140f 0%, #11161a 46%, #0d1114 100%) !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(0.72rem, 1vw, 1rem) !important;
  overflow: auto !important;
}

html[data-active-module="profile"] .content-grid[data-module="profile"]::before,
html[data-active-module="profile"] .content-grid[data-module="profile"]::after {
  content: none !important;
  display: none !important;
}

html[data-active-module="profile"] .profile-dashboard.profile-account-page {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(18.5rem, 0.34fr) !important;
  grid-template-rows: minmax(8rem, 0.27fr) minmax(8.4rem, 0.26fr) minmax(12.5rem, 0.47fr) !important;
  gap: clamp(0.72rem, 0.95vw, 1rem) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html[data-active-module="profile"] .profile-account-summary {
  grid-column: 1 / 4 !important;
  grid-row: 1 !important;
}

html[data-active-module="profile"] .profile-benefits-card {
  grid-column: 1 / 4 !important;
  grid-row: 2 !important;
}

html[data-active-module="profile"] .profile-days-card {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

html[data-active-module="profile"] .profile-quota-card {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

html[data-active-module="profile"] .profile-orders-card {
  grid-column: 3 !important;
  grid-row: 3 !important;
}

html[data-active-module="profile"] .profile-generated-card {
  grid-column: 4 !important;
  grid-row: 1 / 4 !important;
}

html[data-active-module="profile"] .profile-account-page .profile-glass-card,
html[data-active-module="profile"] .content-grid[data-module="profile"] .profile-glass-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(0.7rem, 0.9vw, 1rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: clamp(0.9rem, 1.12vw, 1.2rem) !important;
  border: 1px solid rgba(236, 243, 255, 0.12) !important;
  border-radius: 0.82rem !important;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(232, 197, 126, 0.12), transparent 40%),
    radial-gradient(ellipse at 92% 0%, rgba(97, 137, 171, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.024)),
    rgba(28, 32, 36, 0.74) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1.2rem 2.8rem rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(22px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
}

html[data-active-module="profile"] .profile-card-body-panel,
html[data-active-module="profile"] .profile-generated-list,
html[data-active-module="profile"] .profile-order-empty,
html[data-active-module="profile"] .profile-order-list {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid rgba(236, 243, 255, 0.1) !important;
  border-radius: 0.68rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.032)),
    rgba(255, 255, 255, 0.04) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html[data-active-module="profile"] .profile-account-panel {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(14rem, 28%) !important;
  align-items: center !important;
  gap: clamp(0.9rem, 1.16vw, 1.24rem) !important;
  padding: clamp(0.92rem, 1.18vw, 1.28rem) !important;
}

html[data-active-module="profile"] .profile-avatar-mark {
  width: clamp(4.1rem, 5.2vw, 5.2rem) !important;
  height: clamp(4.1rem, 5.2vw, 5.2rem) !important;
  border-color: rgba(232, 197, 126, 0.44) !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 246, 224, 0.36), transparent 36%),
    linear-gradient(145deg, rgba(232, 197, 126, 0.24), rgba(98, 132, 165, 0.18)),
    rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 238, 203, 0.98) !important;
  box-shadow: 0 0 1.4rem rgba(232, 197, 126, 0.16) !important;
  filter: none !important;
}

html[data-active-module="profile"] .profile-account-copy h3,
html[data-active-module="profile"] .profile-card-head h3 {
  color: rgba(255, 253, 246, 0.97) !important;
}

html[data-active-module="profile"] .profile-account-copy h3 {
  font-size: clamp(1.8rem, 2.6vw, 3rem) !important;
  line-height: 1 !important;
}

html[data-active-module="profile"] .profile-account-copy p:not(.eyebrow),
html[data-active-module="profile"] .profile-status-panel p,
html[data-active-module="profile"] .profile-generated-list p,
html[data-active-module="profile"] .profile-order-empty p,
html[data-active-module="profile"] .profile-benefit-grid small {
  color: rgba(235, 231, 220, 0.72) !important;
}

html[data-active-module="profile"] .profile-card-head .eyebrow,
html[data-active-module="profile"] .profile-status-panel span,
html[data-active-module="profile"] .profile-benefit-grid b {
  color: rgba(232, 197, 126, 0.96) !important;
}

html[data-active-module="profile"] .profile-status-panel,
html[data-active-module="profile"] .profile-benefit-grid > span,
html[data-active-module="profile"] .profile-generated-item,
html[data-active-module="profile"] .profile-empty-state {
  border-color: rgba(236, 243, 255, 0.11) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.086), rgba(255, 255, 255, 0.032)),
    rgba(255, 255, 255, 0.046) !important;
}

html[data-active-module="profile"] .profile-benefit-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(0.58rem, 0.78vw, 0.86rem) !important;
  height: 100% !important;
}

html[data-active-module="profile"] .profile-benefit-grid > span {
  min-height: 0 !important;
  height: 100% !important;
  align-content: center !important;
}

html[data-active-module="profile"] .profile-card-primary,
html[data-active-module="profile"] .profile-card-secondary,
html[data-active-module="profile"] .profile-empty-action,
html[data-active-module="profile"] .profile-card-head .glass-button,
html[data-active-module="profile"] .profile-card-head-actions .glass-button {
  border-color: rgba(232, 197, 126, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(232, 197, 126, 0.26), rgba(166, 109, 62, 0.2)),
    rgba(255, 255, 255, 0.045) !important;
  color: rgba(255, 245, 226, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 224, 0.16),
    0 0.7rem 1.5rem rgba(0, 0, 0, 0.22) !important;
}

html[data-active-module="profile"] .profile-cutout-module:not(.is-benefits) img,
html[data-active-module="profile"] .profile-cutout-module img {
  filter: none !important;
  opacity: 1 !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-real {
  border-color: rgba(236, 243, 255, 0.14) !important;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(232, 197, 126, 0.13), transparent 38%),
    linear-gradient(180deg, rgba(24, 28, 31, 0.84), rgba(13, 15, 17, 0.86)) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span {
  border-color: rgba(236, 243, 255, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.024)),
    rgba(255, 255, 255, 0.035) !important;
}

html[data-active-module="profile"] .profile-cutout-benefits-grid > span.is-active {
  border-color: rgba(232, 197, 126, 0.48) !important;
  background:
    radial-gradient(ellipse at 16% 12%, rgba(232, 197, 126, 0.2), transparent 44%),
    rgba(255, 255, 255, 0.05) !important;
}

@media (max-width: 1180px) {
  html[data-active-module="profile"] .profile-dashboard.profile-account-page {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    height: auto !important;
  }

  html[data-active-module="profile"] .profile-account-summary,
  html[data-active-module="profile"] .profile-benefits-card,
  html[data-active-module="profile"] .profile-days-card,
  html[data-active-module="profile"] .profile-quota-card,
  html[data-active-module="profile"] .profile-orders-card,
  html[data-active-module="profile"] .profile-generated-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  html[data-active-module="profile"] .profile-account-panel,
  html[data-active-module="profile"] .profile-benefit-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}