:root {
    --bg: #030713;
    --surface: rgba(8, 15, 31, 0.58);
    --surface-2: rgba(14, 24, 48, 0.66);
    --surface-3: rgba(26, 39, 73, 0.62);
    --border: rgba(126, 171, 255, 0.22);
    --border-strong: rgba(103, 193, 255, 0.62);
    --text: #f5f8ff;
    --muted: #a3b4d4;
    --accent: #ff58b0;
    --accent-2: #55d6ff;
    --accent-3: #a779ff;
    --accent-4: #8ea7ff;
    --good: #75f2bd;
    --danger: #ff7085;
    --glow: 0 0 34px rgba(85, 214, 255, 0.24);
    --glow-pink: 0 0 34px rgba(255, 88, 176, 0.20);
    --glow-purple: 0 0 34px rgba(167, 121, 255, 0.18);
    --shadow: 0 28px 84px rgba(0, 0, 0, 0.44);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", "Apple SD Gothic Neo",
                 "Hiragino Sans", "Yu Gothic UI", "Malgun Gothic", sans-serif; font-size: 14px; }
  a { color: var(--accent-2); text-decoration: none; }
  a:hover { text-decoration: underline; }


  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: .45;
    background:
      linear-gradient(118deg, transparent 0 36%, rgba(82, 128, 255, .05) 47%, transparent 58%),
      linear-gradient(62deg, transparent 0 40%, rgba(255, 82, 177, .035) 52%, transparent 64%);
    mix-blend-mode: screen;
  }

  .site-topbar,
  .hero-header,
  nav,
  main,
  footer,
  .modal-backdrop {
    position: relative;
    z-index: 3;
  }

  body.detail-route .hero-header {
    display: none;
  }

  body.detail-route .site-topbar {
    margin-bottom: 10px;
  }

  body.detail-route nav {
    top: 0;
  }

  body.detail-route main {
    padding-top: 16px;
  }

  body.detail-route .route-breadcrumb {
    margin-top: 2px;
  }

  header { padding: 16px 24px; border-bottom: 1px solid var(--border);
    display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
  header h1 { margin: 0; font-size: 18px; letter-spacing: 0.3px; }
  header .sub { color: var(--muted); font-size: 12px; }
  nav { display: flex; gap: 4px; padding: 8px 24px 0; border-bottom: 1px solid var(--border); }
  nav button { background: transparent; color: var(--muted); border: 1px solid transparent;
    border-bottom: none; padding: 8px 14px; cursor: pointer; font: inherit;
    border-radius: 6px 6px 0 0; }
  nav button:hover { color: var(--text); }
  nav button.active { background: var(--surface); color: var(--text);
    border-color: var(--border); position: relative; top: 1px; }
  main { padding: 20px 24px 60px; max-width: 1200px; margin: 0 auto; }
  main > section { display: none; }
  main > section.active { display: block; }
  .filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
  .filters input, .filters select {
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    border-radius: 6px; padding: 6px 10px; font: inherit; min-width: 0;
  }
  .filters input { width: 180px; }
  .filters .right { margin-left: auto; color: var(--muted); font-size: 12px; }
  button.btn { background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
    border-radius: 6px; padding: 6px 12px; cursor: pointer; font: inherit; }
  button.btn:hover { border-color: var(--accent-2); }
  button.btn:disabled { opacity: 0.5; cursor: default; }
  table { width: 100%; border-collapse: collapse; background: var(--surface);
    border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
  td { color: var(--text); }
  th { background: var(--surface-2); color: var(--muted); font-weight: 500;
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; user-select: none; }
  th.sortable { cursor: pointer; }
  th.sortable:hover { color: var(--text); }
  th .arrow { display: inline-block; width: 0; height: 0; margin-left: 4px;
    border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: 0.6; }
  th.asc  .arrow { border-bottom: 5px solid currentColor; }
  th.desc .arrow { border-top: 5px solid currentColor; }
  th.active { color: var(--text); }
  tr:last-child td { border-bottom: none; }
  tbody tr:hover { background: rgba(88,166,255,0.06); }
  td.num { text-align: right; font-variant-numeric: tabular-nums; }
  .rank { color: var(--muted); width: 1%; }
  .rank.top1 { color: #f1c40f; font-weight: 600; }
  .rank.top2 { color: #c0c0c0; font-weight: 600; }
  .rank.top3 { color: #cd7f32; font-weight: 600; }
  .pp { color: var(--accent); font-weight: 600; }
  .stars { color: var(--good); }
  .muted { color: var(--muted); }
  .pill { display: inline-block; background: var(--surface-2); color: var(--muted);
    padding: 1px 8px; border-radius: 999px; font-size: 11px; border: 1px solid var(--border); }
  .pager { display: flex; gap: 8px; justify-content: center; align-items: center;
    padding: 14px 0; color: var(--muted); }
  .empty { text-align: center; padding: 40px; color: var(--muted); }
  .err { color: #f85149; padding: 12px; }
  td.title-cell { white-space: normal; }
  .title-cell .title { font-weight: 500; }
  .title-cell .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
  td.click { cursor: pointer; }
  td.click:hover .title { color: var(--accent-2); text-decoration: underline; }
  tr.click { cursor: pointer; }
  tr.click:hover td.nick { color: var(--accent-2); text-decoration: underline; }
  td.nick { font-weight: 500; }
  td.avatar-cell { width: 32px; padding-right: 0; }
  td.avatar-cell .lb-avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2);
    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; color: var(--muted); overflow: hidden;
  }
  td.avatar-cell .lb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .player-header { display: flex; gap: 16px; align-items: center; background: var(--surface);
    border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 14px; }
  .player-header .avatar { width: 80px; height: 80px; border-radius: 50%;
    background: var(--surface-2); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: var(--muted); flex-shrink: 0; overflow: hidden; }
  .player-header .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .player-header .info h2 { margin: 0 0 4px; font-size: 22px; }
  .player-header .info .stats { display: flex; gap: 18px; flex-wrap: wrap;
    color: var(--muted); font-size: 13px; margin-top: 6px; }
  .player-header .info .stats b { color: var(--text); font-variant-numeric: tabular-nums; }
  .player-header .info .rank-badge { display: inline-block; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px;
    font-size: 13px; color: var(--accent); font-weight: 600; }
  .chart-header { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 16px; margin-bottom: 14px; }
  .chart-header h2 { margin: 0 0 6px; font-size: 18px; }
  .chart-header .meta { color: var(--muted); font-size: 13px; }
  .chart-header .stats { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; font-size: 12px; }
  .chart-header .stats span b { color: var(--text); font-variant-numeric: tabular-nums; }
  .back { color: var(--muted); cursor: pointer; padding: 4px 0; display: inline-block; margin-bottom: 8px; }
  .back:hover { color: var(--text); }
  footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 20px 24px 28px;
    color: var(--muted); font-size: 12px; }
  footer .row { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap;
    gap: 8px 18px; align-items: center; }
  footer .credit b { color: var(--text); }
  footer .links { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; }
  footer .links a { color: var(--muted); cursor: pointer; }
  footer .links a:hover { color: var(--text); text-decoration: underline; }
  .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
  .modal-backdrop.show { display: flex; }
  .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    max-width: 640px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; }
  .modal header { padding: 14px 18px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .modal header h3 { margin: 0; font-size: 15px; }
  .modal .close { background: transparent; border: none; color: var(--muted);
    font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }
  .modal .close:hover { color: var(--text); }

  .modal .body {
    line-height: 1.78;
  }
  .modal .body h3 {
    margin: 0 0 10px;
    font-size: 21px;
    color: #fff;
  }
  .modal .body h4 {
    margin: 26px 0 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--accent-2);
    border-radius: 0 8px 8px 0;
    background: rgba(101,169,255,.065);
    color: #e7f1ff;
    font-size: 15px;
  }
  .modal .body p {
    margin: 8px 0 12px;
    color: #c4cede;
  }
  .modal .body .legal-effective {
    color: var(--muted);
    font-size: 12px;
  }
  .modal .body ul {
    margin: 8px 0 14px;
    padding-left: 23px;
    color: #c4cede;
  }
  .modal .body li {
    margin: 5px 0;
  }
  .modal .body hr {
    margin: 22px 0;
    border: 0;
    border-top: 1px solid var(--border);
  }

  .modal .body { padding: 16px 18px; overflow-y: auto; line-height: 1.55; color: var(--text); }
  .modal .body h4 { margin: 14px 0 4px; font-size: 13px; color: var(--accent-2); }
  .modal .body h4:first-child { margin-top: 0; }
  .modal .body p { margin: 0 0 8px; color: var(--muted); }
  @media (max-width: 700px) {
    th.optional, td.optional { display: none; }
    .filters input { width: 100%; }
    footer .links { margin-left: 0; }
  }

  body {
    min-height: 100vh;
    background:
      radial-gradient(ellipse at 18% 12%, rgba(73, 125, 255, .20), transparent 34%),
      radial-gradient(ellipse at 82% 8%, rgba(201, 73, 255, .16), transparent 31%),
      radial-gradient(ellipse at 62% 58%, rgba(36, 122, 205, .13), transparent 36%),
      radial-gradient(ellipse at 25% 72%, rgba(117, 52, 191, .12), transparent 34%),
      radial-gradient(ellipse at 50% 120%, rgba(8, 54, 118, .24), transparent 44%),
      linear-gradient(180deg, #02050f 0%, #071126 46%, #040814 100%);
    background-attachment: fixed;
    overflow-x: hidden;
  }
  body::before {
    content: "";
    position: fixed;
    inset: -10%;
    pointer-events: none;
    z-index: 1;
    opacity: .68;
    background:
      radial-gradient(circle at 12% 18%, rgba(255,255,255,.10) 0 1px, transparent 1.5px),
      radial-gradient(circle at 78% 22%, rgba(143,197,255,.12) 0 1px, transparent 1.5px),
      radial-gradient(circle at 46% 66%, rgba(255,143,222,.10) 0 1px, transparent 1.5px),
      radial-gradient(ellipse at 30% 35%, rgba(75, 112, 255, .10), transparent 32%),
      radial-gradient(ellipse at 72% 28%, rgba(181, 76, 255, .09), transparent 28%),
      radial-gradient(ellipse at 52% 78%, rgba(37, 140, 220, .07), transparent 36%);
    background-size:
      180px 180px,
      220px 220px,
      260px 260px,
      100% 100%,
      100% 100%,
      100% 100%;
    filter: blur(.2px);
  }
  header {
    min-height: 118px;
    padding: 26px max(24px, calc((100vw - 1280px) / 2));
    background: linear-gradient(180deg, rgba(7,10,18,.88), rgba(7,10,18,.45));
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    align-items: center;
  }
  header .brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(101,169,255,.95), rgba(143,124,255,.88) 55%, rgba(255,127,174,.92));
    box-shadow: 0 0 34px rgba(101,169,255,.32), inset 0 1px 0 rgba(255,255,255,.45);
    font-weight: 900;
    color: #fff;
    letter-spacing: -1px;
    transform: rotate(-4deg);
  }
  header .brand-copy { display:flex; flex-direction:column; gap:5px; }
  header h1 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: .5px;
    background: linear-gradient(90deg, #ffffff, #b8d6ff 52%, #ffb3cf);
    -webkit-background-clip: text;
    color: transparent;
  }
  header .sub { font-size: 12px; letter-spacing: .5px; }
  nav {
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 10px max(24px, calc((100vw - 1280px) / 2));
    background: rgba(7,10,18,.78);
    backdrop-filter: blur(18px) saturate(1.2);
    border-bottom: 1px solid var(--border);
    gap: 10px;
  }
  nav button {
    position: relative;
    border-radius: 12px;
    padding: 10px 16px;
    border: 1px solid transparent;
    transition: transform .2s ease, color .2s ease, background .2s ease, border-color .2s ease;
  }
  nav button:hover {
    text-decoration: none;
    transform: translateY(-1px);
    color: #fff;
    background: rgba(101,169,255,.08);
  }
  nav button.active {
    top: 0;
    background: linear-gradient(180deg, rgba(101,169,255,.16), rgba(143,124,255,.10));
    border-color: var(--border-strong);
    box-shadow: inset 0 0 20px rgba(101,169,255,.05), 0 8px 30px rgba(0,0,0,.2);
  }
  nav button.active::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -11px;
    height: 2px;
    border-radius: 4px;
    background: linear-gradient(90deg, transparent, var(--accent-2), var(--accent), transparent);
    box-shadow: 0 0 12px var(--accent-2);
  }
  main { max-width: 1280px; padding-top: 26px; position: relative; }
  .view-transition { animation: pageEnter .38s cubic-bezier(.2,.8,.2,1); }
  @keyframes pageEnter {
    from { opacity: 0; transform: translateY(12px) scale(.992); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }
  .filters, .player-header, .chart-header, table, .modal { box-shadow: var(--shadow); }
  .filters {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(19,27,43,.84), rgba(12,17,29,.8));
    backdrop-filter: blur(14px);
    width: fit-content;
    margin: 0 0 16px auto;
  }
  .filters input, .filters select, button.btn {
    border-radius: 10px;
    min-height: 38px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .filters input:focus, .filters select:focus {
    outline: none;
    border-color: var(--border-strong);
    box-shadow: 0 0 0 3px rgba(101,169,255,.11), var(--glow);
  }
  button.btn:hover { transform: translateY(-1px); box-shadow: var(--glow); }
  table {
    background: linear-gradient(180deg, rgba(18,25,40,.84), rgba(10,15,25,.88));
    backdrop-filter: blur(14px);
    border-radius: 18px;
    overflow: hidden;
  }
  th { background: rgba(38,49,73,.62); letter-spacing: .7px; }
  tbody tr { transition: background .18s ease, transform .18s ease; }
  tbody tr:hover { background: linear-gradient(90deg, rgba(101,169,255,.08), rgba(255,127,174,.045)); }
  .player-header, .chart-header {
    border-radius: 22px;
    border-color: var(--border-strong);
    background:
      radial-gradient(circle at 95% 10%, rgba(255,127,174,.13), transparent 28%),
      radial-gradient(circle at 10% 90%, rgba(101,169,255,.14), transparent 32%),
      linear-gradient(145deg, rgba(22,31,50,.94), rgba(12,17,29,.9));
    padding: 22px;
    overflow: hidden;
    position: relative;
  }
  .player-header::after, .chart-header::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(143,124,255,.2), transparent 70%);
    pointer-events: none;
  }
  .player-header .avatar {
    width: 96px;
    height: 96px;
    border: 2px solid rgba(150,190,255,.42);
    box-shadow: 0 0 35px rgba(101,169,255,.2);
  }
  .player-header .info h2, .chart-header h2 { font-size: 26px; letter-spacing: .2px; }
  .player-header .info .stats { margin-top: 13px; gap: 10px; }
  .player-header .info .stats > span, .chart-header .stats > span {
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--border);
  }
  .rank-badge {
    background: linear-gradient(90deg, rgba(255,127,174,.14), rgba(101,169,255,.14)) !important;
    color: #ffc2d8 !important;
    border-color: rgba(255,127,174,.35) !important;
  }
  .pill {
    background: linear-gradient(180deg, rgba(101,169,255,.10), rgba(143,124,255,.08));
    border-color: rgba(101,169,255,.28);
    color: #bcd7ff;
  }
  .pp {
    background: linear-gradient(90deg, #ff8bb5, #ffc2d8);
    -webkit-background-clip: text;
    color: transparent;
  }
  .stars { color: #7ff0b4; text-shadow: 0 0 16px rgba(101,230,166,.18); }
  .back {
    border: 1px solid var(--border);
    background: rgba(255,255,255,.025);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 14px;
    transition: all .2s ease;
  }
  .back:hover {
    text-decoration: none;
    border-color: var(--border-strong);
    background: rgba(101,169,255,.08);
    transform: translateX(-2px);
  }
  .empty, .err {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(15,21,34,.72);
    backdrop-filter: blur(12px);
  }
  .loading-shimmer { position: relative; overflow: hidden; }
  .loading-shimmer::after {
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
    animation: shimmer 1.4s infinite;
  }
  @keyframes shimmer { to { transform:translateX(100%); } }
  .route-breadcrumb {
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:12px;
    color:var(--muted);
    font-size:12px;
  }
  .route-breadcrumb span { opacity:.75; }
  .route-breadcrumb b { color:var(--text); font-weight:600; }


  .site-topbar {
    width: min(1280px, calc(100% - 32px));
    margin: 16px auto 0;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(320px, 560px);
    gap: 24px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(20,28,46,.88), rgba(9,14,26,.86));
    backdrop-filter: blur(18px) saturate(1.15);
    box-shadow: 0 18px 55px rgba(0,0,0,.32), var(--glow);
  }
  .top-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    width: fit-content;
    max-width: 100%;
    padding: 4px 8px 4px 4px;
    margin: -4px 0 -4px -4px;
    border: 0;
    border-radius: 16px;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .top-brand:hover {
    background: rgba(255,255,255,.045);
    box-shadow: 0 0 24px rgba(101,169,255,.08);
    transform: translateY(-1px);
  }
  .top-brand:active {
    transform: translateY(0) scale(.992);
  }
  .top-brand:focus-visible {
    outline: 2px solid rgba(101,169,255,.72);
    outline-offset: 3px;
  }
  .top-brand-mark {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 127, 174, .55);
    background: #070a12;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 0 22px rgba(255,127,174,.22),
      0 0 30px rgba(101,169,255,.16);
    position: relative;
  }
  /* v30.0.234: keep the brand area stable even if the icon asset cannot be decoded. */
  .top-brand-mark::before {
    content: "US";
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    color: #dcecff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
    opacity: 0;
    transition: opacity .15s ease;
  }
  .top-brand-mark--fallback::before { opacity: 1; }

  .top-brand-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 14px rgba(255,255,255,.08);
  }
  .top-brand-mark img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }
  .top-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .top-brand-copy h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: .35px;
    background: linear-gradient(90deg, #fff, #bdd8ff 55%, #ffb5d0);
    -webkit-background-clip: text;
    color: transparent;
  }
  .top-brand-copy .sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 12px;
  }


  /* Keep the global-search dropdown above the hero image and other panels */
  .site-topbar {
    z-index: 120;
    overflow: visible;
  }

  .top-search-wrap {
    z-index: 121;
  }

  .global-search-results {
    z-index: 122;
  }

  .hero-header,
  nav,
  main,
  footer {
    z-index: 3;
  }

  .top-search-wrap {
    position: relative;
    min-width: 0;
  }

  .global-search-results {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    right: 0;
    z-index: 80;
    display: none;
    max-height: min(620px, calc(100vh - 130px));
    overflow: auto;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 16px;
    background:
      linear-gradient(145deg, rgba(5,12,29,.94), rgba(15,25,51,.92))
        padding-box,
      linear-gradient(120deg, rgba(255,88,176,.66),
        rgba(167,121,255,.60), rgba(85,214,255,.70)) border-box;
    backdrop-filter: blur(24px) saturate(1.2);
    box-shadow:
      0 28px 90px rgba(0,0,0,.62),
      0 0 28px rgba(255,88,176,.12),
      0 0 32px rgba(85,214,255,.12);
  }

  .global-search-results.open {
    display: block;
    animation: searchResultsIn .18s ease-out;
  }

  @keyframes searchResultsIn {
    from { opacity: 0; transform: translateY(-5px) scale(.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .search-group + .search-group {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(126,171,255,.12);
  }

  .search-group-title {
    padding: 7px 9px 6px;
    color: #93a9ca;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
  }

  .search-result-item {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    gap: 11px;
    align-items: center;
    min-height: 58px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition:
      background .15s ease,
      border-color .15s ease,
      transform .15s ease;
  }

  .search-result-item:hover,
  .search-result-item.selected {
    border-color: rgba(85,214,255,.22);
    background:
      linear-gradient(90deg, rgba(255,88,176,.11),
        rgba(167,121,255,.075), rgba(85,214,255,.085));
    transform: translateX(2px);
  }

  .search-result-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(126,171,255,.22);
    border-radius: 11px;
    color: #b8d9ff;
    background: rgba(8,16,35,.66);
    font-weight: 900;
  }

  .search-result-icon.player {
    border-radius: 50%;
  }

  .search-result-icon.chart.has-image {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .26);
    box-shadow: 0 0 18px rgba(85,214,255,.08);
  }

  .search-result-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .search-result-copy {
    min-width: 0;
  }

  .search-result-title {
    overflow: hidden;
    color: #fff;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-result-meta {
    margin-top: 4px;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-result-side {
    color: #ff9dcc;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
  }

  .search-result-empty {
    padding: 20px 12px;
    color: var(--muted);
    text-align: center;
    font-size: 12px;
  }

  .top-search {
    min-width: 0;
    height: 46px;
    display: grid;
    grid-template-columns: 28px minmax(0,1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 0 10px 0 12px;
    border: 1px solid rgba(124,166,255,.28);
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(7,12,23,.94), rgba(13,19,33,.86));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 0 0 1px rgba(255,255,255,.015);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .top-search:focus-within {
    border-color: var(--border-strong);
    box-shadow: 0 0 0 3px rgba(101,169,255,.10), var(--glow);
    transform: translateY(-1px);
  }
  .top-search-icon {
    color: #9bbef1;
    font-size: 22px;
    line-height: 1;
    transform: translateY(-1px);
  }
  .top-search input {
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font: inherit;
  }
  .top-search input::placeholder { color: #71809b; }
  .top-search-hint {
    padding: 4px 7px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: #7787a5;
    background: rgba(255,255,255,.025);
    font-size: 10px;
    letter-spacing: .4px;
  }

  .hero-header {
    position: relative;
    display: block;
    min-height: 0;
    width: min(1280px, calc(100% - 32px));
    aspect-ratio: 2.5 / 1;
    margin: 22px auto 0;
    padding: 0;
    overflow: visible;
    isolation: isolate;
    --hero-parallax-x: 0px;
    --hero-parallax-y: 0px;
  }
  .hero-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(117, 170, 255, .34);
    border-radius: 24px;
    background: #070a12;
    box-shadow: 0 24px 80px rgba(0,0,0,.48),
                0 0 42px rgba(101,169,255,.16),
                0 0 36px rgba(255,127,174,.10);
    isolation: isolate;
  }
  .hero-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .hero-image {
    position: absolute;
    inset: -1%;
    width: 102%;
    height: 102%;
    display: block;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    transform: translate3d(calc(var(--hero-parallax-x) * -0.32), calc(var(--hero-parallax-y) * -0.24), 0) scale(1.02);
    transition: transform .22s ease-out;
    will-change: transform;
  }
  .hero-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      linear-gradient(180deg, rgba(2,5,13,0) 0%, rgba(2,5,13,.02) 54%, rgba(3,7,15,.18) 100%),
      radial-gradient(circle at 74% 46%, rgba(255,164,221,.10), transparent 28%),
      radial-gradient(circle at 22% 24%, rgba(109,182,255,.08), transparent 30%);
    pointer-events: none;
  }
  .hero-girl-wrap {
    position: absolute;
    right: clamp(18px, 5vw, 80px);
    bottom: -44px;
    width: min(34vw, 420px);
    min-width: 220px;
    z-index: 5;
    pointer-events: none;
    isolation: isolate;
    transform: translate3d(calc(var(--hero-parallax-x) * 0.9), calc(var(--hero-parallax-y) * 0.95), 0);
    transition: transform .18s ease-out;
    will-change: transform;
  }
  /* v29.35.1: integrated character bloom for the separated hero character */
  .hero-girl-wrap::before {
    content: "";
    position: absolute;
    inset: 11% -4% 4%;
    z-index: -2;
    border-radius: 48% 52% 46% 54% / 42% 45% 55% 58%;
    background:
      radial-gradient(circle at 52% 28%, rgba(255,160,222,.34), rgba(255,160,222,.13) 34%, rgba(255,160,222,0) 68%),
      radial-gradient(circle at 72% 58%, rgba(114,151,255,.16), rgba(114,151,255,0) 58%);
    filter: blur(38px);
    opacity: .86;
  }
  .hero-girl-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('/assets/udon-saber-hero-girl.png') center bottom / contain no-repeat;
    filter: blur(15px) saturate(1.22) brightness(1.04);
    opacity: .20;
    transform: scale(1.018);
    transform-origin: center bottom;
  }
  .hero-girl {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(.985) saturate(1.055) sepia(.025) hue-rotate(-3deg);
    transform: translateZ(0);
    user-select: none;
  }
  .hero-content {
    position: absolute;
    z-index: 3;
    left: 26px;
    bottom: 20px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 13px;
    border: 1px solid rgba(168,196,255,.22);
    border-radius: 12px;
    background: rgba(5,9,19,.58);
    backdrop-filter: blur(12px);
  }
  .hero-kicker {
    color: #fff;
    font-weight: 800;
    letter-spacing: .55px;
    text-shadow: 0 0 16px rgba(101,169,255,.52);
  }
  .hero-content .sub { color: #c7d7f5; }

  footer {
    background: linear-gradient(180deg, rgba(8,12,22,.50), rgba(5,8,15,.92));
    backdrop-filter: blur(12px);
  }
  footer .links { align-items: center; row-gap: 9px; }
  footer .links a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    transition: color .18s ease, background .18s ease,
                border-color .18s ease, transform .18s ease;
  }
  footer .links a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(101,169,255,.08);
    border-color: var(--border-strong);
    transform: translateY(-1px);
  }
  footer .links .footer-action {
    color: #bcd3f7;
    background: rgba(255,255,255,.025);
    border-color: var(--border);
  }
  footer .links .footer-action.discord {
    color: #fff;
    background: linear-gradient(135deg, rgba(88,101,242,.92), rgba(116,82,255,.82));
    border-color: rgba(167,173,255,.48);
    box-shadow: 0 0 24px rgba(88,101,242,.16);
  }
  footer .links .footer-action.discord:hover {
    background: linear-gradient(135deg, rgba(104,117,255,.98), rgba(139,99,255,.92));
    box-shadow: 0 0 30px rgba(88,101,242,.28);
  }

  @media (max-width: 700px) {
    .site-topbar {
      width: calc(100% - 20px);
      margin-top: 10px;
      grid-template-columns: 1fr;
      gap: 11px;
      padding: 12px;
      border-radius: 16px;
    }
    .top-brand-mark {
      width: 41px;
      height: 41px;
      border-radius: 12px;
    }
    .top-brand-copy h1 { font-size: 19px; }
    .top-brand-copy .sub {
      white-space: normal;
      font-size: 11px;
    }
    .top-search { height: 44px; }
    .top-search-hint { display: none; }

    .hero-header {
      width: calc(100% - 20px);
      margin-top: 12px;
      aspect-ratio: 1.7 / 1;
    }
    .hero-stage { border-radius: 16px; }
    .hero-image {
      object-position: 30% center;
      transform: none;
    }
    .hero-girl-wrap {
      right: -8px;
      bottom: -18px;
      width: min(46vw, 250px);
      min-width: 150px;
      transform: none;
    }
    .hero-girl-wrap::before {
      inset: 14% -2% 8%;
      filter: blur(26px);
      opacity: .66;
    }
    .hero-girl-wrap::after {
      filter: blur(11px) saturate(1.16) brightness(1.02);
      opacity: .14;
    }
    .hero-orbit { display: none; }
    .hero-content {
      left: 12px;
      right: 12px;
      bottom: 10px;
      flex-wrap: wrap;
      gap: 4px 9px;
      padding: 7px 9px;
    }
    .hero-kicker { font-size: 13px; }
    .hero-content .sub { font-size: 10px; }
  }


  main,
  .site-topbar,
  .hero-header,
  nav,
  footer {
    background-clip: padding-box;
  }

  body:not(.detail-route) main {
    background:
      radial-gradient(circle at 8% 5%, rgba(255,127,174,.035), transparent 22%),
      radial-gradient(circle at 92% 8%, rgba(101,169,255,.035), transparent 22%);
  }

  body.detail-route main {
    background:
      linear-gradient(180deg, rgba(7,10,18,.18), rgba(7,10,18,.05));
    border-radius: 20px;
  }

  /* Premium UI depth inspired by modern rhythm-game dashboards */
  main::before {
    content: "";
    position: absolute;
    inset: -30px -18px auto;
    height: 220px;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle at 18% 25%, rgba(255,127,174,.10), transparent 34%),
      radial-gradient(circle at 78% 10%, rgba(101,169,255,.09), transparent 32%);
    filter: blur(10px);
  }

  .site-topbar {
    position: relative;
    overflow: hidden;
  }
  .site-topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(105deg, transparent 0 42%, rgba(255,255,255,.026) 50%, transparent 58%),
      radial-gradient(circle at 12% 20%, rgba(255,127,174,.08), transparent 24%);
  }

  .hero-header {
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .hero-header:hover {
    transform: translateY(-2px);
    border-color: rgba(255,127,174,.40);
    box-shadow:
      0 30px 88px rgba(0,0,0,.52),
      0 0 48px rgba(101,169,255,.19),
      0 0 42px rgba(255,127,174,.15);
  }

  table,
  .player-header,
  .chart-header,
  .filters,
  .modal {
    position: relative;
    isolation: isolate;
  }
  table::before,
  .player-header::before,
  .chart-header::before,
  .filters::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background:
      linear-gradient(120deg, rgba(255,255,255,.025), transparent 30% 72%, rgba(101,169,255,.025));
  }

  tbody tr.click {
    position: relative;
  }
  tbody tr.click:hover {
    box-shadow:
      inset 3px 0 0 rgba(255,127,174,.85),
      inset 0 0 28px rgba(101,169,255,.035);
  }

  .player-header,
  .chart-header {
    box-shadow:
      0 28px 80px rgba(0,0,0,.44),
      0 0 30px rgba(101,169,255,.10),
      0 0 28px rgba(255,127,174,.08);
  }

  .pagination button,
  .filters button,
  .filters select,
  .filters input {
    backdrop-filter: blur(10px);
  }

  @media (max-width: 700px) {
    .top-brand-mark {
      width: 45px;
      height: 45px;
    }
  }


  /* Unified cosmic glass surfaces */
  .site-topbar,
  nav,
  .hero-header,
  .filters,
  table,
  .player-header,
  .chart-header,
  .modal,
  footer {
    backdrop-filter: blur(22px) saturate(1.18);
    -webkit-backdrop-filter: blur(22px) saturate(1.18);
  }

  .site-topbar,
  nav,
  .filters,
  table,
  .player-header,
  .chart-header,
  .modal,
  footer {
    background:
      linear-gradient(145deg,
        rgba(7, 15, 34, .62),
        rgba(18, 29, 58, .46) 52%,
        rgba(11, 20, 43, .58)
      ) padding-box,
      linear-gradient(120deg,
        rgba(255,88,176,.74),
        rgba(167,121,255,.68) 34%,
        rgba(85,214,255,.74) 72%,
        rgba(117,242,189,.46)
      ) border-box !important;
  }

  .hero-header {
    background:
      linear-gradient(180deg, rgba(4,8,20,.12), rgba(4,8,20,.26)) padding-box,
      linear-gradient(120deg,
        rgba(255,88,176,.72),
        rgba(167,121,255,.66),
        rgba(85,214,255,.76)
      ) border-box !important;
  }

  .filters input,
  .filters select,
  .top-search,
  button.btn,
  .pagination button,
  .back,
  footer .links .footer-action {
    background:
      linear-gradient(145deg, rgba(5, 12, 28, .56), rgba(16, 27, 53, .46)) padding-box,
      linear-gradient(120deg, rgba(255,88,176,.42), rgba(85,214,255,.48)) border-box !important;
    backdrop-filter: blur(16px) saturate(1.14);
    -webkit-backdrop-filter: blur(16px) saturate(1.14);
  }

  th {
    background:
      linear-gradient(90deg,
        rgba(255,88,176,.09),
        rgba(167,121,255,.075),
        rgba(85,214,255,.09)
      ) !important;
    backdrop-filter: blur(10px);
  }

  tbody tr {
    background: rgba(7, 15, 33, .16);
  }

  tbody tr:nth-child(even) {
    background: rgba(14, 24, 48, .18);
  }

  tbody tr:hover {
    background:
      linear-gradient(90deg,
        rgba(255,88,176,.10),
        rgba(167,121,255,.07) 46%,
        rgba(85,214,255,.09)
      ) !important;
  }

  .player-header,
  .chart-header {
    background:
      radial-gradient(circle at 92% 8%, rgba(255,88,176,.09), transparent 26%),
      radial-gradient(circle at 8% 92%, rgba(85,214,255,.10), transparent 30%),
      linear-gradient(145deg,
        rgba(6, 13, 31, .58),
        rgba(18, 28, 58, .44) 52%,
        rgba(10, 18, 40, .58)
      ) padding-box,
      linear-gradient(120deg,
        rgba(255,88,176,.74),
        rgba(167,121,255,.68),
        rgba(85,214,255,.76)
      ) border-box !important;
  }

  .site-topbar,
  nav,
  table,
  .filters,
  .player-header,
  .chart-header,
  .modal,
  footer {
    box-shadow:
      0 28px 90px rgba(0,0,0,.40),
      0 0 28px rgba(85,214,255,.08),
      0 0 24px rgba(255,88,176,.07),
      inset 0 1px 0 rgba(255,255,255,.055);
  }

  /* Luxury neon treatment */
  .site-topbar,
  nav,
  .hero-header,
  .filters,
  table,
  .player-header,
  .chart-header,
  .modal,
  footer {
    border-color: transparent !important;
    background:
      linear-gradient(var(--surface), var(--surface)) padding-box,
      linear-gradient(120deg,
        rgba(255,79,162,.82),
        rgba(164,107,255,.74) 34%,
        rgba(72,200,255,.82) 68%,
        rgba(109,243,176,.62)
      ) border-box;
    border: 1px solid transparent;
  }

  .site-topbar,
  .hero-header,
  .player-header,
  .chart-header,
  table,
  .filters {
    box-shadow:
      0 28px 90px rgba(0,0,0,.50),
      0 0 22px rgba(255,79,162,.10),
      0 0 30px rgba(72,200,255,.10),
      inset 0 1px 0 rgba(255,255,255,.05);
  }

  .site-topbar::after,
  .hero-header::after,
  .player-header::after,
  .chart-header::after,
  .filters::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
      radial-gradient(circle at 15% 0%, rgba(255,79,162,.10), transparent 28%),
      radial-gradient(circle at 85% 100%, rgba(72,200,255,.09), transparent 30%);
    mix-blend-mode: screen;
  }

  nav {
    box-shadow:
      0 10px 38px rgba(0,0,0,.34),
      0 0 22px rgba(72,200,255,.08);
  }

  nav button {
    border: 1px solid rgba(255,255,255,.025);
  }

  nav button.active {
    color: #fff;
    background:
      linear-gradient(180deg, rgba(255,79,162,.18), rgba(72,200,255,.10));
    border-color: rgba(255,79,162,.42);
    box-shadow:
      0 0 18px rgba(255,79,162,.16),
      inset 0 0 24px rgba(72,200,255,.05);
  }

  nav button.active::after {
    height: 3px;
    left: 10%;
    right: 10%;
    background: linear-gradient(
      90deg,
      transparent,
      var(--accent),
      var(--accent-3),
      var(--accent-2),
      transparent
    );
    box-shadow:
      0 0 10px var(--accent),
      0 0 16px var(--accent-2);
  }

  .top-search {
    background:
      linear-gradient(rgba(8,13,26,.96), rgba(13,18,34,.90)) padding-box,
      linear-gradient(120deg, rgba(255,79,162,.72), rgba(72,200,255,.72)) border-box;
    border: 1px solid transparent;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 0 22px rgba(72,200,255,.08);
  }

  .top-search:focus-within {
    box-shadow:
      0 0 0 3px rgba(72,200,255,.10),
      0 0 26px rgba(72,200,255,.22),
      0 0 24px rgba(255,79,162,.12);
  }

  .top-brand-mark {
    border-color: transparent;
    background:
      linear-gradient(#070a12, #070a12) padding-box,
      linear-gradient(135deg, var(--accent), var(--accent-3), var(--accent-2)) border-box;
    border: 2px solid transparent;
    box-shadow:
      0 0 18px rgba(255,79,162,.28),
      0 0 22px rgba(72,200,255,.22);
  }

  .top-brand-copy h1 {
    background:
      linear-gradient(90deg, #fff 0%, #ff90c2 25%, #a884ff 52%, #66d7ff 78%, #fff 100%);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 26px rgba(72,200,255,.10);
  }

  .hero-header {
    box-shadow:
      0 34px 100px rgba(0,0,0,.56),
      0 0 44px rgba(255,79,162,.16),
      0 0 48px rgba(72,200,255,.14);
  }

  .hero-header:hover {
    box-shadow:
      0 38px 110px rgba(0,0,0,.60),
      0 0 56px rgba(255,79,162,.23),
      0 0 58px rgba(72,200,255,.20);
  }

  th {
    background:
      linear-gradient(90deg, rgba(255,79,162,.10), rgba(164,107,255,.08), rgba(72,200,255,.10));
    color: #eef4ff;
  }

  tbody tr:hover {
    background:
      linear-gradient(90deg,
        rgba(255,79,162,.10),
        rgba(164,107,255,.07) 45%,
        rgba(72,200,255,.08)
      );
  }

  tbody tr.click:hover {
    box-shadow:
      inset 3px 0 0 rgba(255,79,162,.92),
      inset -2px 0 0 rgba(72,200,255,.74),
      inset 0 0 34px rgba(164,107,255,.06);
  }

  .rank-badge {
    background:
      linear-gradient(90deg,
        rgba(255,79,162,.18),
        rgba(164,107,255,.16),
        rgba(72,200,255,.16)
      ) !important;
    color: #ffd6ea !important;
    border-color: rgba(255,79,162,.44) !important;
    box-shadow: 0 0 18px rgba(255,79,162,.12);
  }

  .pill {
    background:
      linear-gradient(180deg, rgba(72,200,255,.12), rgba(164,107,255,.10));
    border-color: rgba(72,200,255,.34);
    color: #d7e8ff;
    box-shadow: inset 0 0 16px rgba(72,200,255,.04);
  }

  .pp {
    background: linear-gradient(90deg, #ff70b8, #d397ff 48%, #62d8ff);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 18px rgba(255,79,162,.10);
  }

  .stars {
    color: #82f5c2;
    text-shadow:
      0 0 10px rgba(109,243,176,.35),
      0 0 18px rgba(72,200,255,.15);
  }

  button.btn,
  .pagination button,
  .back {
    background:
      linear-gradient(rgba(13,19,35,.94), rgba(11,16,30,.94)) padding-box,
      linear-gradient(120deg, rgba(255,79,162,.45), rgba(72,200,255,.45)) border-box;
    border: 1px solid transparent;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 0 14px rgba(72,200,255,.06);
  }

  button.btn:hover,
  .pagination button:hover,
  .back:hover {
    box-shadow:
      0 0 22px rgba(255,79,162,.18),
      0 0 22px rgba(72,200,255,.15);
  }

  footer .links .footer-action {
    background:
      linear-gradient(rgba(13,19,35,.92), rgba(10,15,28,.92)) padding-box,
      linear-gradient(120deg, rgba(255,79,162,.46), rgba(72,200,255,.46)) border-box;
    border: 1px solid transparent;
  }

  footer .links .footer-action.discord {
    background:
      linear-gradient(135deg, rgba(89,102,242,.98), rgba(164,107,255,.92)) padding-box,
      linear-gradient(120deg, rgba(255,255,255,.35), rgba(72,200,255,.45)) border-box;
    border: 1px solid transparent;
  }

  .route-breadcrumb {
    padding: 8px 11px;
    border-radius: 10px;
    background: rgba(8,13,26,.56);
    border: 1px solid rgba(164,107,255,.18);
    box-shadow: 0 0 16px rgba(164,107,255,.06);
    width: fit-content;
  }

  .modal {
    box-shadow:
      0 34px 110px rgba(0,0,0,.65),
      0 0 36px rgba(255,79,162,.18),
      0 0 42px rgba(72,200,255,.15);
  }


  /* Native select menus need explicit colors on Windows/Chrome */
  .filters select {
    color-scheme: dark;
  }

  .filters select option,
  .filters select optgroup {
    background: #101a32;
    color: #f5f8ff;
  }

  .filters select option:disabled {
    color: #7382a3;
  }

  .filters select:focus option:checked,
  .filters select option:checked {
    background: #2459b8;
    color: #ffffff;
  }

  /* Home dashboard */
  .home-dashboard {
    display: grid;
    gap: 18px;
  }

  .home-hero {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    padding: 28px;
    border-radius: 22px;
    border: 1px solid transparent;
    background:
      radial-gradient(circle at 82% 25%, rgba(255,88,176,.16), transparent 28%),
      radial-gradient(circle at 62% 85%, rgba(85,214,255,.14), transparent 32%),
      linear-gradient(135deg, rgba(8,16,36,.58), rgba(23,31,62,.42)) padding-box,
      linear-gradient(120deg, rgba(255,88,176,.72), rgba(167,121,255,.66), rgba(85,214,255,.74)) border-box;
    backdrop-filter: blur(22px) saturate(1.2);
    box-shadow:
      0 30px 92px rgba(0,0,0,.42),
      0 0 34px rgba(255,88,176,.10),
      0 0 38px rgba(85,214,255,.09);
  }

  .home-hero::after {
    content: "";
    position: absolute;
    right: -8%;
    top: -55%;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background:
      conic-gradient(from 180deg, rgba(255,88,176,.13), rgba(85,214,255,.10), rgba(167,121,255,.14), rgba(255,88,176,.13));
    filter: blur(12px);
    opacity: .8;
    pointer-events: none;
  }

  .home-hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(270px, .72fr);
    align-items: center;
    gap: clamp(24px, 4vw, 54px);
    min-height: 154px;
    padding-top: 16px;
  }

  .home-hero-main {
    min-width: 0;
  }

  .home-discord-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 21px;
    border: 1px solid rgba(161, 179, 255, .22);
    border-radius: 18px;
    background:
      radial-gradient(circle at 90% 5%, rgba(122, 141, 255, .18), transparent 40%),
      linear-gradient(145deg, rgba(27, 35, 72, .68), rgba(11, 19, 43, .58));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .035);
    backdrop-filter: blur(16px) saturate(1.12);
  }

  .home-discord-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -54px;
    bottom: -72px;
    border-radius: 50%;
    background: rgba(111, 132, 255, .16);
    filter: blur(4px);
    pointer-events: none;
  }

  .home-discord-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
  }

  .home-discord-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(168, 180, 255, .22);
    border-radius: 13px;
    background: rgba(88, 101, 242, .18);
    box-shadow: 0 0 22px rgba(88, 101, 242, .12);
  }

  .home-discord-icon svg {
    width: 24px;
    height: 24px;
    fill: #dce2ff;
  }

  .home-discord-eyebrow {
    display: block;
    color: #9ba9c7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .85px;
    text-transform: uppercase;
  }

  .home-discord-title {
    display: block;
    margin-top: 2px;
    color: #f5f7ff;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.2;
  }

  .home-discord-copy {
    position: relative;
    z-index: 1;
    margin: 0 0 15px;
    color: #b8c4dc;
    font-size: 13px;
    line-height: 1.65;
  }

  .home-discord-button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid rgba(174, 185, 255, .28);
    border-radius: 11px;
    color: #eef1ff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(88, 101, 242, .76), rgba(122, 103, 235, .68));
    box-shadow: 0 10px 26px rgba(54, 65, 190, .20);
    transition: transform .16s ease, filter .16s ease, border-color .16s ease;
  }

  .home-discord-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    border-color: rgba(207, 214, 255, .45);
  }

  .home-kicker {
    color: #ff9dca;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
  }

  .home-title {
    position: relative;
    z-index: 1;
    margin: 10px 0 8px;
    max-width: 700px;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.08;
    font-weight: 900;
    background: linear-gradient(90deg, #fff, #ff90c5 32%, #b38bff 60%, #6be0ff);
    -webkit-background-clip: text;
    color: transparent;
  }

  .home-title {
    text-wrap: balance;
    overflow-wrap: normal;
    line-break: strict;
    white-space: pre-line;
  }

  .home-options {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .home-language {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border: 1px solid rgba(147, 188, 255, .13);
    border-radius: 12px;
    background: rgba(8, 15, 34, .30);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
    backdrop-filter: blur(12px);
    opacity: .68;
    transition: opacity .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
  }

  .home-language:hover,
  .home-language:focus-within {
    opacity: 1;
    border-color: rgba(147, 188, 255, .26);
    background: rgba(8, 15, 34, .52);
  }

  .home-language-label {
    color: #93a0ba;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .35px;
    white-space: nowrap;
  }

  .home-language select {
    min-width: 96px;
    padding: 5px 24px 5px 8px;
    border-color: rgba(147, 188, 255, .14);
    border-radius: 8px;
    color: #c7d1e5;
    font-size: 11px;
    font-weight: 700;
    background-color: rgba(18, 29, 58, .60);
  }


  .home-copy {
    position: relative;
    z-index: 1;
    max-width: 720px;
    color: #bdc9e1;
    line-height: 1.75;
    white-space: pre-line;
  }

  .home-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
  }

  .home-actions button {
    min-height: 42px;
    padding: 0 17px;
    border-radius: 12px;
    color: var(--text);
    cursor: pointer;
    background:
      linear-gradient(rgba(8,15,32,.72), rgba(16,25,50,.60)) padding-box,
      linear-gradient(120deg, rgba(255,88,176,.66), rgba(85,214,255,.68)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 0 20px rgba(85,214,255,.08);
  }

  .home-actions button.primary {
    background:
      linear-gradient(135deg, rgba(255,66,157,.90), rgba(142,91,255,.88), rgba(58,181,255,.90)) padding-box,
      linear-gradient(120deg, rgba(255,255,255,.40), rgba(85,214,255,.70)) border-box;
  }

  .home-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
  }

  .home-stat {
    position: relative;
    overflow: hidden;
    padding: 17px;
    border-radius: 17px;
    border: 1px solid transparent;
    background:
      linear-gradient(145deg, rgba(8,16,35,.54), rgba(19,29,58,.42)) padding-box,
      linear-gradient(120deg, rgba(255,88,176,.52), rgba(167,121,255,.42), rgba(85,214,255,.52)) border-box;
    backdrop-filter: blur(18px) saturate(1.15);
    box-shadow: 0 20px 55px rgba(0,0,0,.30);
  }

  .home-stat::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -36px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(85,214,255,.12), transparent 68%);
  }

  .home-stat .label {
    color: var(--muted);
    font-size: 12px;
  }

  .home-stat .value {
    display: block;
    margin-top: 7px;
    font-size: 27px;
    font-weight: 850;
    color: #fff;
  }

  .home-panel {
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid transparent;
    background:
      linear-gradient(145deg, rgba(7,15,33,.56), rgba(18,28,56,.44)) padding-box,
      linear-gradient(120deg, rgba(255,88,176,.62), rgba(167,121,255,.56), rgba(85,214,255,.64)) border-box;
    backdrop-filter: blur(22px) saturate(1.17);
    box-shadow: 0 24px 72px rgba(0,0,0,.36);
  }

  .home-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 17px;
    border-bottom: 1px solid rgba(126,171,255,.14);
    background: linear-gradient(90deg, rgba(255,88,176,.07), rgba(85,214,255,.05));
  }

  .home-panel-head h2 {
    margin: 0;
    font-size: 15px;
    letter-spacing: .35px;
  }

  .home-panel-head button {
    border: 0;
    color: #bcd7ff;
    background: transparent;
    cursor: pointer;
  }

  .home-avatar {
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid rgba(85,214,255,.42);
    background: rgba(255,255,255,.04);
  }

  .home-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* v30.0.133: song overview recent-play avatars use avatarSmall(), which
     returns a nested .lb-avatar. Make that nested helper fill the recent-play
     icon frame instead of inheriting leaderboard/table sizing. */
  .home-avatar .lb-avatar {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: inherit !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--muted);
    font-weight: 800;
  }

  .home-avatar .lb-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .song-recent-avatar {
    flex: 0 0 42px;
  }

  @media (max-width: 900px) {
    .home-hero-layout {
      grid-template-columns: 1fr;
      gap: 22px;
      padding-top: 24px;
    }

    .home-discord-card {
      max-width: 560px;
    }

    .home-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .home-hero {
      min-height: 0;
      padding: 21px;
    }

    .home-options {
      top: 13px;
      right: 13px;
      gap: 5px;
    }

    .home-language {
      padding: 4px 5px;
      opacity: .64;
    }

    .home-language-label {
      display: none;
    }

    .home-language select {
      min-width: 82px;
      padding: 4px 21px 4px 7px;
      font-size: 10px;
    }

    .home-hero-layout {
      gap: 18px;
      padding-top: 30px;
    }

    .home-discord-card {
      padding: 17px;
    }

    .home-discord-copy {
      margin-bottom: 13px;
    }

    .home-stats {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .home-stat {
      padding: 14px;
    }

    .home-stat .value {
      font-size: 22px;
    }
  }


  .web-build {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border: 1px solid rgba(85,214,255,.25);
    border-radius: 8px;
    color: #8fcff5;
    background: rgba(5,12,28,.42);
    font-size: 10px;
    white-space: nowrap;
  }

  /* Community activity dashboard */
  .home-activity-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
    gap: 18px;
  }

  .home-stack {
    display: grid;
    gap: 18px;
  }

  .activity-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    min-height: 76px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(126,171,255,.10);
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
  }

  .activity-card:last-child {
    border-bottom: 0;
  }

  .activity-card:hover {
    background:
      linear-gradient(90deg, rgba(255,88,176,.09), rgba(85,214,255,.065));
    transform: translateX(2px);
  }

  .activity-avatar {
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(85,214,255,.38);
    background: rgba(255,255,255,.04);
    box-shadow: 0 0 18px rgba(85,214,255,.08);
  }

  .activity-avatar .lb-avatar {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .activity-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .activity-title {
    overflow: hidden;
    color: #fff;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .activity-meta {
    margin-top: 4px;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .activity-values {
    min-width: 118px;
    text-align: right;
  }

  .activity-values strong {
    display: block;
    color: #fff;
  }

  .activity-values small {
    color: #ff9dcc;
  }

  .chart-activity-list {
    display: grid;
  }

  .chart-activity-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 70px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(126,171,255,.10);
    cursor: pointer;
    transition: background .18s ease;
  }

  .chart-activity-card:last-child {
    border-bottom: 0;
  }

  .chart-activity-card:hover {
    background: linear-gradient(90deg, rgba(167,121,255,.08), rgba(85,214,255,.06));
  }

  .chart-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }

  .chart-count {
    align-self: center;
    padding: 6px 9px;
    border: 1px solid rgba(255,88,176,.25);
    border-radius: 9px;
    color: #ffc0dd;
    background: rgba(255,88,176,.07);
    font-size: 11px;
    white-space: nowrap;
  }

  .community-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
  }

  .community-link-card {
    position: relative;
    overflow: hidden;
    min-height: 102px;
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 17px;
    color: var(--text);
    text-decoration: none;
    background:
      linear-gradient(145deg, rgba(8,16,35,.55), rgba(19,29,58,.42)) padding-box,
      linear-gradient(120deg, rgba(255,88,176,.48), rgba(167,121,255,.43), rgba(85,214,255,.52)) border-box;
    backdrop-filter: blur(18px);
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .community-link-card:hover {
    transform: translateY(-3px);
    text-decoration: none;
    box-shadow: 0 22px 60px rgba(0,0,0,.36), 0 0 24px rgba(85,214,255,.10);
  }

  .community-link-card b {
    display: block;
    margin-bottom: 7px;
    font-size: 15px;
  }

  .community-link-card span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
  }

  /* v30.0.124: home hub refresh + UDON SABER map registration progress */
  .home-hub-grid {
    display: grid;
    grid-template-columns: minmax(320px, .95fr) minmax(0, 1.05fr);
    gap: 18px;
    align-items: stretch;
  }

  .home-progress-panel {
    position: relative;
    overflow: hidden;
    padding: 19px;
    border: 1px solid transparent;
    border-radius: 18px;
    background:
      radial-gradient(circle at 86% 16%, rgba(85,214,255,.14), transparent 34%),
      radial-gradient(circle at 18% 92%, rgba(255,88,176,.10), transparent 34%),
      linear-gradient(145deg, rgba(8,16,35,.58), rgba(12,22,46,.46)) padding-box,
      linear-gradient(120deg, rgba(91,179,255,.55), rgba(167,121,255,.34), rgba(255,88,176,.38)) border-box;
    box-shadow: 0 18px 48px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.03);
  }

  .home-progress-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
  }

  .home-progress-title {
    display: block;
    color: #f5f8ff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .2px;
  }

  .home-progress-copy {
    margin: 5px 0 0;
    color: #aebbd4;
    font-size: 12px;
    line-height: 1.55;
  }

  .home-progress-percent {
    flex: 0 0 auto;
    min-width: 76px;
    padding: 8px 10px;
    border: 1px solid rgba(91,179,255,.28);
    border-radius: 14px;
    color: #ecfbff;
    text-align: center;
    font-size: 19px;
    font-weight: 950;
    letter-spacing: -.02em;
    background: rgba(10,23,47,.62);
    box-shadow: 0 0 20px rgba(85,214,255,.08);
  }

  .home-progress-track {
    position: relative;
    overflow: hidden;
    height: 13px;
    border: 1px solid rgba(126,171,255,.18);
    border-radius: 999px;
    background: rgba(3,8,19,.62);
    box-shadow: inset 0 0 18px rgba(0,0,0,.36);
  }

  .home-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--progress, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, #46c7ff, #9b7dff 62%, #ff78b4);
    box-shadow: 0 0 18px rgba(85,214,255,.24);
  }

  .home-progress-numbers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
  }

  .home-progress-metric {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(126,171,255,.12);
    border-radius: 13px;
    background: rgba(5,10,23,.44);
  }

  .home-progress-metric span {
    display: block;
    overflow: hidden;
    color: #8796b3;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-progress-metric strong {
    display: block;
    margin-top: 5px;
    color: #f4f8ff;
    font-size: 15px;
    font-weight: 950;
    letter-spacing: -.02em;
  }

  .home-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .home-quick-card {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    padding: 15px;
    border: 1px solid rgba(126,171,255,.14);
    border-radius: 16px;
    color: var(--text);
    text-align: left;
    background:
      radial-gradient(circle at 86% 15%, rgba(91,179,255,.10), transparent 32%),
      linear-gradient(145deg, rgba(8,15,32,.54), rgba(14,24,47,.44));
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  }

  .home-quick-card:hover {
    transform: translateY(-2px);
    border-color: rgba(91,179,255,.30);
    background:
      radial-gradient(circle at 86% 15%, rgba(91,179,255,.16), transparent 34%),
      linear-gradient(145deg, rgba(12,23,48,.68), rgba(17,30,60,.52));
    box-shadow: 0 16px 42px rgba(0,0,0,.24), 0 0 20px rgba(85,214,255,.07);
  }

  .home-quick-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    border: 1px solid rgba(91,179,255,.20);
    border-radius: 12px;
    background: rgba(91,179,255,.08);
    font-size: 17px;
  }

  .home-quick-card strong {
    display: block;
    color: #f6f9ff;
    font-size: 14px;
    font-weight: 900;
  }

  .home-quick-card span:not(.home-quick-icon) {
    display: block;
    margin-top: 6px;
    color: #9eadc8;
    font-size: 11px;
    line-height: 1.48;
  }

  @media (max-width: 980px) {
    .home-hub-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 620px) {
    .home-progress-panel {
      padding: 15px;
    }

    .home-progress-head {
      align-items: stretch;
      flex-direction: column;
      gap: 10px;
    }

    .home-progress-percent {
      width: max-content;
      min-width: 70px;
      font-size: 17px;
    }

    .home-progress-numbers {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-quick-grid {
      grid-template-columns: 1fr;
    }

    .home-quick-card {
      min-height: 92px;
    }
  }

  /* Player profile redesign */
  .profile-hero {
    position: relative;
    overflow: hidden;
    min-height: 212px;
    padding: 24px;
    border: 1px solid transparent;
    border-radius: 22px;
    background:
      linear-gradient(145deg, rgba(6,13,31,.55), rgba(18,28,58,.42)) padding-box,
      linear-gradient(120deg, rgba(255,88,176,.74), rgba(167,121,255,.68), rgba(85,214,255,.76)) border-box;
    box-shadow: 0 28px 86px rgba(0,0,0,.42);
    isolation: isolate;
  }

  .profile-hero-bg {
    position: absolute;
    inset: -45px;
    z-index: -2;
    background-position: center;
    background-size: cover;
    filter: blur(42px) saturate(1.35);
    opacity: .24;
    transform: scale(1.12);
  }

  .profile-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle at 78% 18%, rgba(255,88,176,.13), transparent 28%),
      radial-gradient(circle at 55% 92%, rgba(85,214,255,.12), transparent 35%),
      linear-gradient(90deg, rgba(3,8,20,.74), rgba(5,10,24,.36));
  }

  .profile-main {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 20px;
    align-items: center;
  }

  .profile-main .avatar {
    width: 116px;
    height: 116px;
    min-width: 116px;
    border: 2px solid rgba(255,255,255,.28);
    border-radius: 50%;
    overflow: hidden;
    background: rgba(4,10,25,.72);
    box-shadow:
      0 0 28px rgba(255,88,176,.18),
      0 0 28px rgba(85,214,255,.16);
  }

  .profile-main .avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }

  .profile-avatar-wrap {
    position: relative;
    width: 116px;
    height: 116px;
    min-width: 116px;
    overflow: visible;
  }

  .profile-avatar-wrap.neko-avatar::before,
  .profile-avatar-wrap.neko-avatar::after {
    content: "▲";
    position: absolute;
    top: -22px;
    z-index: 3;
    font-size: 36px;
    line-height: 1;
    color: #ff8fc8;
    text-shadow:
      0 0 7px rgba(255, 112, 184, .88),
      0 0 16px rgba(164, 107, 255, .62),
      0 2px 0 rgba(6, 10, 28, .9);
    pointer-events: none;
  }

  .profile-avatar-wrap.neko-avatar::before {
    left: 9px;
    transform: rotate(-13deg);
  }

  .profile-avatar-wrap.neko-avatar::after {
    right: 9px;
    transform: rotate(13deg);
  }

  .profile-rank-line .neko-badge {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.2;
    color: #ffd9ed;
    border: 1px solid rgba(255, 118, 190, .48);
    background: linear-gradient(90deg, rgba(255,79,162,.18), rgba(164,107,255,.16));
    box-shadow: 0 0 16px rgba(255,79,162,.13), inset 0 0 14px rgba(255,255,255,.025);
    white-space: nowrap;
  }

  .profile-rank-line .admin-badge {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.2;
    color: #fff4c8;
    border: 1px solid rgba(255, 210, 92, .58);
    background: linear-gradient(90deg, rgba(255, 193, 7, .22), rgba(255, 112, 67, .16));
    box-shadow: 0 0 18px rgba(255, 193, 7, .17), inset 0 0 14px rgba(255,255,255,.03);
    white-space: nowrap;
  }

  .profile-rank-line .inactive-badge {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.2;
    color: rgba(221, 229, 245, .82);
    border: 1px solid rgba(154, 167, 194, .32);
    background: rgba(91, 104, 132, .14);
    box-shadow: inset 0 0 14px rgba(255, 255, 255, .018);
    white-space: nowrap;
  }


  .profile-name {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.05;
  }

  .profile-rank-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  .profile-rank-line .profile-hmd-pill {
    max-width: min(100%, 320px);
    gap: 6px;
    color: #e9efff;
    border-color: rgba(126,171,255,.22);
    background: linear-gradient(90deg, rgba(126,171,255,.09), rgba(168,121,255,.08));
    box-shadow: inset 0 0 14px rgba(255,255,255,.018);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .profile-hmd-pill-label {
    flex: 0 0 auto;
    color: #9fb0cb;
    font-size: .88em;
    font-weight: 850;
    letter-spacing: .04em;
  }

  .profile-bio-inline {
    position: relative;
    max-width: 760px;
    margin: 12px 0 0;
    padding: 9px 12px 9px 14px;
    border-radius: 0 11px 11px 0;
    border-left: 2px solid rgba(168,121,255,.62);
    background: linear-gradient(90deg, rgba(168,121,255,.075), rgba(85,214,255,.025) 68%, transparent);
    color: #e8edf8;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
  }

  .profile-tabs {
    display: flex;
    gap: 7px;
    margin: 14px 0;
    padding: 7px;
    overflow-x: auto;
    border: 1px solid rgba(126,171,255,.17);
    border-radius: 15px;
    background: rgba(6,13,30,.48);
    backdrop-filter: blur(18px);
    scrollbar-width: none;
  }

  .profile-tabs::-webkit-scrollbar {
    display: none;
  }

  .profile-tab {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
  }

  .profile-tab.active {
    color: #fff;
    border-color: rgba(255,88,176,.32);
    background: linear-gradient(90deg, rgba(255,88,176,.16), rgba(85,214,255,.10));
    box-shadow: 0 0 18px rgba(255,88,176,.08);
  }

  .profile-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
  }

  .profile-section {
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 18px;
    background:
      linear-gradient(145deg, rgba(7,15,33,.55), rgba(18,28,56,.43)) padding-box,
      linear-gradient(120deg, rgba(255,88,176,.52), rgba(167,121,255,.46), rgba(85,214,255,.54)) border-box;
    backdrop-filter: blur(20px);
  }

  .profile-section h3 {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(126,171,255,.12);
    font-size: 14px;
  }

  .mini-play {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 11px 15px;
    border-bottom: 1px solid rgba(126,171,255,.09);
    cursor: pointer;
  }

  .mini-play.no-rank {
    grid-template-columns: minmax(0,1fr) auto;
  }

  .mini-play:last-child {
    border-bottom: 0;
  }

  .mini-play:hover {
    background: rgba(85,214,255,.045);
  }

  .mini-rank {
    color: #ff9dcc;
    font-weight: 850;
    text-align: center;
  }

  .profile-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 12px;
    padding: 11px;
    border: 1px solid rgba(126,171,255,.16);
    border-radius: 14px;
    background: rgba(6,13,30,.45);
  }

  .profile-filterbar input,
  .profile-filterbar select {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(126,171,255,.20);
    border-radius: 10px;
    color: var(--text);
    background: rgba(6,13,30,.62);
  }

  .profile-filterbar input {
    flex: 1 1 220px;
  }

  .profile-table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 18px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .profile-table-scroll table {
    width: max-content;
    min-width: 100%;
    margin: 0;
  }

  #player-detail-view,
  #player-detail-content,
  .profile-tab-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* v29.34.1: contain exceptionally long chart text without compressing numeric columns */
  @media (min-width: 701px) {
    .profile-table-scroll {
      overflow-x: hidden;
    }

    .profile-table-scroll table {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
    }
  }

  .profile-table-scroll .title-cell,
  #tab-songs #song-list-view .title-cell {
    min-width: 0;
  }

  .profile-table-scroll .title-cell .title,
  .profile-table-scroll .title-cell .meta,
  #tab-songs #song-list-view .title-cell .title,
  #tab-songs #song-list-view .title-cell .meta {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }

  .profile-table-scroll th:not(.title-cell),
  .profile-table-scroll td:not(.title-cell),
  #tab-songs #song-list-view th:not(.title-cell),
  #tab-songs #song-list-view td:not(.title-cell) {
    white-space: nowrap;
  }

  #tab-songs,
  #song-list-view,
  #songs-content {
    min-width: 0;
    max-width: 100%;
  }

  #tab-songs #song-list-view table {
    width: 100%;
    max-width: 100%;
  }

  #tab-songs #song-list-view .title-cell {
    width: 42%;
  }

  @media (max-width: 700px) {
    .profile-table-scroll {
      margin-inline: 0;
      border-radius: 15px;
    }

    .profile-table-scroll table {
      width: max-content;
      min-width: 720px;
      max-width: none;
    }
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
  }

  .stat-chart {
    padding: 17px;
    border: 1px solid rgba(126,171,255,.16);
    border-radius: 17px;
    background: rgba(6,13,30,.44);
    backdrop-filter: blur(18px);
  }

  .stat-chart h3 {
    margin: 0 0 15px;
    font-size: 14px;
  }

  .bar-row {
    display: grid;
    grid-template-columns: 90px minmax(0,1fr) 48px;
    gap: 9px;
    align-items: center;
    margin: 10px 0;
    color: var(--muted);
    font-size: 11px;
  }

  .bar-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
  }

  .bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-3), var(--accent-2));
    box-shadow: 0 0 12px rgba(85,214,255,.18);
  }

  @media (max-width: 980px) {
    .home-activity-grid,
    .profile-overview-grid,
    .stats-grid {
      grid-template-columns: 1fr;
    }

    .community-links {
      grid-template-columns: repeat(2, minmax(0,1fr));
    }
  }

  @media (max-width: 620px) {
    .activity-card {
      grid-template-columns: 42px minmax(0,1fr);
    }

    .activity-values {
      grid-column: 2;
      text-align: left;
    }

    .community-links {
      grid-template-columns: 1fr;
    }

    .profile-main {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .profile-avatar-wrap,
    .profile-main .avatar {
      margin: 0 auto;
    }

    .profile-rank-line {
      justify-content: center;
    }
  }


  /* Player screenshot gallery */
  .screenshot-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .screenshot-card {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    border: 1px solid transparent;
    border-radius: 17px;
    cursor: pointer;
    background:
      linear-gradient(145deg, rgba(7,15,33,.54), rgba(18,28,56,.42)) padding-box,
      linear-gradient(120deg, rgba(255,88,176,.54), rgba(167,121,255,.48), rgba(85,214,255,.56)) border-box;
    box-shadow: 0 20px 58px rgba(0,0,0,.32);
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .screenshot-card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 27px 72px rgba(0,0,0,.40),
      0 0 24px rgba(255,88,176,.10),
      0 0 26px rgba(85,214,255,.10);
  }

  .screenshot-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
      radial-gradient(circle at 30% 20%, rgba(167,121,255,.12), transparent 36%),
      rgba(4,10,24,.66);
  }

  .screenshot-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    transition: transform .28s ease, filter .28s ease;
  }

  .screenshot-card:hover .screenshot-thumb img {
    transform: scale(1.035);
    filter: saturate(1.08);
  }

  .screenshot-card-body {
    padding: 12px 13px 14px;
  }

  .screenshot-card-title {
    overflow: hidden;
    color: #fff;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .screenshot-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }

  .screenshot-missing {
    display: none;
  }

  .image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(1,4,12,.78);
    backdrop-filter: blur(18px) saturate(1.1);
  }

  .image-lightbox.open {
    display: flex;
    animation: lightboxIn .2s ease-out;
  }

  @keyframes lightboxIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .image-lightbox-panel {
    width: min(1120px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    border: 1px solid transparent;
    border-radius: 21px;
    background:
      linear-gradient(145deg, rgba(6,13,30,.92), rgba(16,25,50,.88)) padding-box,
      linear-gradient(120deg, rgba(255,88,176,.72), rgba(167,121,255,.66), rgba(85,214,255,.74)) border-box;
    box-shadow:
      0 38px 120px rgba(0,0,0,.72),
      0 0 38px rgba(255,88,176,.14),
      0 0 42px rgba(85,214,255,.13);
  }

  .image-lightbox-head,
  .image-lightbox-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
  }

  .image-lightbox-head {
    border-bottom: 1px solid rgba(126,171,255,.14);
  }

  .image-lightbox-foot {
    border-top: 1px solid rgba(126,171,255,.14);
  }

  .image-lightbox-title {
    min-width: 0;
  }

  .image-lightbox-title strong,
  .image-lightbox-title span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .image-lightbox-title span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
  }

  .image-lightbox-image {
    display: block;
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    background: #02050e;
  }

  .image-lightbox button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(126,171,255,.24);
    border-radius: 10px;
    color: var(--text);
    background: rgba(8,16,34,.66);
    cursor: pointer;
  }

  @media (max-width: 900px) {
    .screenshot-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 580px) {
    .screenshot-grid {
      grid-template-columns: 1fr;
    }

    .image-lightbox {
      padding: 10px;
    }

    .image-lightbox-panel {
      max-height: calc(100vh - 20px);
      border-radius: 16px;
    }
  }


  /* Song detail dashboard */
  .song-hero {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    padding: 24px;
    border: 1px solid transparent;
    border-radius: 22px;
    background:
      radial-gradient(circle at 88% 12%, rgba(255,88,176,.14), transparent 30%),
      radial-gradient(circle at 62% 92%, rgba(85,214,255,.12), transparent 34%),
      linear-gradient(145deg, rgba(6,13,31,.58), rgba(18,28,58,.44)) padding-box,
      linear-gradient(120deg, rgba(255,88,176,.76), rgba(167,121,255,.68), rgba(85,214,255,.78)) border-box;
    box-shadow: 0 30px 92px rgba(0,0,0,.44), 0 0 34px rgba(255,88,176,.10), 0 0 38px rgba(85,214,255,.09);
    isolation: isolate;
  }
  .song-hero::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -1;
    background: conic-gradient(from 210deg, rgba(255,88,176,.10), rgba(167,121,255,.09), rgba(85,214,255,.10), rgba(255,88,176,.10));
    filter: blur(34px);
    opacity: .8;
  }
  .song-hero-title {
    margin: 0;
    max-width: 900px;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.08;
    font-weight: 900;
    background: linear-gradient(90deg, #fff, #ff9ccc 34%, #b893ff 64%, #6cddff);
    -webkit-background-clip: text;
    color: transparent;
  }
  .song-hero-meta { margin-top: 10px; color: #becae2; line-height: 1.7; }
  .song-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
  .song-stat-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:22px; }
  .song-stat { padding:12px; border:1px solid rgba(126,171,255,.17); border-radius:13px; background:rgba(4,10,25,.34); backdrop-filter:blur(12px); }
  .song-stat span { display:block; color:var(--muted); font-size:10px; }
  .song-stat strong { display:block; margin-top:6px; color:#fff; font-size:17px; }
  .song-tabs { display:flex; gap:7px; margin:14px 0; padding:7px; overflow-x:auto; border:1px solid rgba(126,171,255,.17); border-radius:15px; background:rgba(6,13,30,.48); backdrop-filter:blur(18px); scrollbar-width:none; }
  .song-tabs::-webkit-scrollbar { display:none; }
  .song-tab { flex:0 0 auto; min-height:38px; padding:0 14px; border:1px solid transparent; border-radius:10px; color:var(--muted); background:transparent; cursor:pointer; }
  .song-tab.active { color:#fff; border-color:rgba(255,88,176,.32); background:linear-gradient(90deg,rgba(255,88,176,.16),rgba(85,214,255,.10)); box-shadow:0 0 18px rgba(255,88,176,.08); }
  .song-overview-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); gap:16px; }
  .song-panel { overflow:hidden; border:1px solid transparent; border-radius:18px; background:linear-gradient(145deg,rgba(7,15,33,.55),rgba(18,28,56,.43)) padding-box,linear-gradient(120deg,rgba(255,88,176,.52),rgba(167,121,255,.46),rgba(85,214,255,.54)) border-box; backdrop-filter:blur(20px); }
  .song-panel h3 { margin:0; padding:14px 16px; border-bottom:1px solid rgba(126,171,255,.12); font-size:14px; }
  .song-ranking-preview { padding:4px 0 0; }
  .song-ranking-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:11px; align-items:center; padding:11px 14px; border-bottom:1px solid rgba(126,171,255,.09); cursor:pointer; transition:background .16s ease; }
  .song-ranking-row:hover { background:rgba(85,214,255,.045); }
  .song-ranking-position { display:grid; place-items:center; width:26px; height:26px; border:1px solid rgba(255,157,204,.24); border-radius:9px; color:#ffb1d5; background:rgba(255,88,176,.07); font-size:11px; font-weight:900; }
  .song-ranking-row:first-child .song-ranking-position { border-color:rgba(255,214,91,.30); color:#ffe184; background:rgba(255,214,91,.07); }
  .song-ranking-player { min-width:0; }
  .song-ranking-name { overflow:hidden; color:#f7f9ff; font-size:13px; font-weight:760; text-overflow:ellipsis; white-space:nowrap; }
  .song-ranking-sub { margin-top:3px; color:var(--muted); font-size:10px; }
  .song-ranking-score { text-align:right; }
  .song-ranking-score strong { display:block; color:#fff; font-size:14px; font-weight:820; }
  .song-ranking-score small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }
  .song-ranking-footer { display:flex; justify-content:flex-end; padding:11px 14px 13px; }
  .song-ranking-more { min-height:34px; padding:0 12px; border:1px solid rgba(126,171,255,.16); border-radius:10px; color:#c9d7f4; background:rgba(7,15,34,.28); font-size:11px; cursor:pointer; transition:border-color .16s ease,background .16s ease,color .16s ease; }
  .song-ranking-more:hover { border-color:rgba(85,214,255,.34); color:#fff; background:rgba(85,214,255,.06); }
  .song-recent-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:11px; align-items:center; padding:11px 14px; border-bottom:1px solid rgba(126,171,255,.09); cursor:pointer; }
  .song-recent-row:last-child { border-bottom:0; }
  .song-recent-row:hover { background:rgba(85,214,255,.045); }
  .song-related-panel { grid-column:1 / -1; }
  .song-related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:14px; }
  .song-related-card { min-width:0; padding:14px; border:1px solid rgba(126,171,255,.17); border-radius:14px; background:linear-gradient(145deg,rgba(6,14,32,.48),rgba(18,28,56,.32)); cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
  .song-related-card:hover { transform:translateY(-2px); border-color:rgba(85,214,255,.42); box-shadow:0 12px 30px rgba(0,0,0,.24),0 0 22px rgba(85,214,255,.07); }
  .song-related-title { overflow:hidden; color:#fff; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
  .song-related-meta { margin-top:6px; overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
  .song-related-badges { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
  .song-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  .song-statistics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  @media (max-width:980px) {
    .song-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .song-overview-grid,.song-statistics-grid { grid-template-columns:1fr; }
    .song-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
  @media (max-width:680px) {
    .song-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .song-gallery { grid-template-columns:1fr; }
    .song-related-grid { grid-template-columns:1fr; }
  }


  /* Random chart page */
  .random-page { display:grid; gap:18px; }
  .random-hero {
    position:relative; overflow:hidden; padding:28px;
    border:1px solid transparent; border-radius:22px;
    background:
      radial-gradient(circle at 82% 18%,rgba(255,88,176,.16),transparent 30%),
      radial-gradient(circle at 64% 100%,rgba(85,214,255,.14),transparent 34%),
      linear-gradient(145deg,rgba(6,13,31,.58),rgba(18,28,58,.44)) padding-box,
      linear-gradient(120deg,rgba(255,88,176,.76),rgba(167,121,255,.68),rgba(85,214,255,.78)) border-box;
    backdrop-filter:blur(22px) saturate(1.18);
    box-shadow:0 30px 92px rgba(0,0,0,.44),0 0 34px rgba(255,88,176,.10),0 0 38px rgba(85,214,255,.09);
  }
  .random-kicker { color:#ff9dcc; font-size:11px; font-weight:850; letter-spacing:1.25px; }
  .random-title {
    margin:9px 0 8px; font-size:clamp(28px,4vw,46px); line-height:1.08; font-weight:900;
    background:linear-gradient(90deg,#fff,#ff9ccc 34%,#b893ff 64%,#6cddff);
    -webkit-background-clip:text; color:transparent;
  }
  .random-copy { max-width:800px; color:#bcc9e2; line-height:1.75; }
  .random-filter-panel {
    overflow:hidden; border:1px solid rgba(126,171,255,.18); border-radius:19px;
    background:linear-gradient(145deg,rgba(6,13,30,.56),rgba(13,24,49,.42));
    backdrop-filter:blur(19px); box-shadow:0 18px 50px rgba(0,0,0,.22);
  }
  .random-filter-header {
    display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 18px;
    border-bottom:1px solid rgba(126,171,255,.12);
    background:linear-gradient(90deg,rgba(255,88,176,.055),rgba(85,214,255,.045));
  }
  .random-filter-heading { min-width:0; }
  .random-filter-heading strong { display:block; color:#fff; font-size:15px; }
  .random-filter-heading span { display:block; margin-top:4px; color:var(--muted); font-size:11px; line-height:1.55; }
  .random-clear-button {
    flex:0 0 auto; min-height:36px; padding:0 13px; border:1px solid rgba(126,171,255,.20);
    border-radius:10px; color:#c8d6ef; background:rgba(8,16,34,.48); cursor:pointer;
  }
  .random-clear-button:hover { border-color:rgba(85,214,255,.35); color:#fff; }
  .random-filter-grid {
    display:grid; grid-template-columns:minmax(180px,.8fr) minmax(240px,1fr) minmax(240px,1fr);
    gap:14px; padding:18px;
  }
  .random-field { min-width:0; }
  .random-field > label,.random-range-label {
    display:block; margin-bottom:8px; color:#d4def1; font-size:11px; font-weight:750; letter-spacing:.15px;
  }
  .random-field select,.random-field input {
    width:100%; min-width:0; min-height:43px; padding:0 12px;
    border:1px solid rgba(126,171,255,.22); border-radius:11px;
    color:var(--text); background:#101a32; color-scheme:dark; outline:none;
    transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
  }
  .random-field select:focus,.random-field input:focus {
    border-color:rgba(85,214,255,.58); box-shadow:0 0 0 3px rgba(85,214,255,.08); background:#111d38;
  }
  .random-field select option { background:#101a32; color:#f5f8ff; }
  .random-range-inputs { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:9px; align-items:center; }
  .random-range-separator { color:#7183a6; font-size:14px; font-weight:800; }
  .random-filter-message {
    display:none; margin:0 18px 14px; padding:10px 12px; border:1px solid rgba(255,114,152,.30);
    border-radius:11px; color:#ffc5d4; background:rgba(112,19,54,.16); font-size:11px; line-height:1.55;
  }
  .random-filter-message.visible { display:block; }
  .random-filter-footer {
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:15px 18px 17px;
    border-top:1px solid rgba(126,171,255,.11); background:rgba(3,9,23,.20);
  }
  .random-filter-status { min-width:0; }
  .random-candidate-count { color:#fff; font-size:13px; font-weight:850; }
  .random-candidate-count strong {
    color:#8de3ff; font-size:17px; text-shadow:0 0 16px rgba(85,214,255,.25);
  }
  .random-active-filters { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; min-height:24px; }
  .random-filter-chip {
    display:inline-flex; align-items:center; min-height:24px; padding:0 9px;
    border:1px solid rgba(167,121,255,.24); border-radius:999px;
    color:#d9d0ff; background:rgba(118,75,210,.10); font-size:10px; font-weight:750;
  }
  .random-filter-chip.muted { border-color:rgba(126,171,255,.12); color:#8190ad; background:rgba(8,16,34,.24); }
  .random-pick-button {
    min-height:46px; min-width:176px; padding:0 20px; border:1px solid transparent; border-radius:12px;
    color:#fff; font-weight:850; cursor:pointer;
    background:
      linear-gradient(135deg,rgba(255,66,157,.92),rgba(142,91,255,.90),rgba(58,181,255,.92)) padding-box,
      linear-gradient(120deg,rgba(255,255,255,.42),rgba(85,214,255,.72)) border-box;
    box-shadow:0 0 28px rgba(255,88,176,.15); transition:transform .16s ease,filter .16s ease,opacity .16s ease;
  }
  .random-pick-button:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.08); }
  .random-pick-button:disabled { cursor:not-allowed; opacity:.52; }
  .random-result { min-height:280px; }
  .random-card {
    position:relative; overflow:hidden; padding:25px;
    border:1px solid transparent; border-radius:21px;
    background:
      radial-gradient(circle at 90% 12%,rgba(255,88,176,.13),transparent 29%),
      radial-gradient(circle at 12% 95%,rgba(85,214,255,.11),transparent 34%),
      linear-gradient(145deg,rgba(7,15,33,.58),rgba(18,28,56,.44)) padding-box,
      linear-gradient(120deg,rgba(255,88,176,.66),rgba(167,121,255,.60),rgba(85,214,255,.68)) border-box;
    backdrop-filter:blur(22px); box-shadow:0 26px 80px rgba(0,0,0,.38);
    animation:randomCardIn .34s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes randomCardIn {
    from { opacity:0; transform:translateY(10px) scale(.992); }
    to { opacity:1; transform:translateY(0) scale(1); }
  }
  .random-selected-label { color:#8ddfff; font-size:11px; font-weight:850; letter-spacing:.9px; }
  .random-song-title { margin:9px 0 7px; max-width:980px; font-size:clamp(25px,4vw,42px); line-height:1.12; color:#fff; }
  .random-song-meta { color:#b8c6df; line-height:1.65; }
  .random-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
  .random-stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:20px; }
  .random-stat { padding:12px; border:1px solid rgba(126,171,255,.16); border-radius:13px; background:rgba(4,10,25,.34); }
  .random-stat span { display:block; color:var(--muted); font-size:10px; }
  .random-stat strong { display:block; margin-top:6px; color:#fff; font-size:17px; }
  .random-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
  .random-actions button {
    min-height:40px; padding:0 15px; border:1px solid rgba(126,171,255,.24);
    border-radius:10px; color:var(--text); background:rgba(8,16,34,.62); cursor:pointer;
  }
  .random-actions button.primary {
    border-color:rgba(255,88,176,.36);
    background:linear-gradient(90deg,rgba(255,88,176,.19),rgba(85,214,255,.12));
  }
  @media (max-width:980px) {
    .random-filter-grid { grid-template-columns:1fr 1fr; }
    .random-filter-grid .random-field:first-child { grid-column:1 / -1; }
  }
  @media (max-width:760px) {
    .random-hero { padding:22px; }
    .random-filter-header { align-items:flex-start; }
    .random-filter-grid { grid-template-columns:1fr; padding:15px; }
    .random-filter-grid .random-field:first-child { grid-column:auto; }
    .random-filter-footer { grid-template-columns:1fr; }
    .random-pick-button { width:100%; }
    .random-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }


  /* Global statistics page */
  .statistics-page {
    display: grid;
    gap: 18px;
  }

  .statistics-hero {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border: 1px solid transparent;
    border-radius: 22px;
    background:
      radial-gradient(circle at 84% 16%, rgba(255,88,176,.16), transparent 30%),
      radial-gradient(circle at 62% 100%, rgba(85,214,255,.14), transparent 34%),
      linear-gradient(145deg, rgba(6,13,31,.58), rgba(18,28,58,.44)) padding-box,
      linear-gradient(120deg, rgba(255,88,176,.76), rgba(167,121,255,.68), rgba(85,214,255,.78)) border-box;
    backdrop-filter: blur(22px) saturate(1.18);
    box-shadow: 0 30px 92px rgba(0,0,0,.44);
  }

  .statistics-kicker {
    color: #ff9dcc;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1.25px;
  }

  .statistics-title {
    margin: 9px 0 8px;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.08;
    font-weight: 900;
    background: linear-gradient(90deg, #fff, #ff9ccc 34%, #b893ff 64%, #6cddff);
    -webkit-background-clip: text;
    color: transparent;
  }

  .statistics-copy {
    max-width: 760px;
    color: #bcc9e2;
    line-height: 1.75;
    white-space: pre-line;
  }

  .statistics-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
  }

  .statistics-card {
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 17px;
    background:
      linear-gradient(145deg, rgba(8,16,35,.55), rgba(19,29,58,.42)) padding-box,
      linear-gradient(120deg, rgba(255,88,176,.48), rgba(167,121,255,.43), rgba(85,214,255,.52)) border-box;
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 55px rgba(0,0,0,.30);
  }

  .statistics-card span {
    display: block;
    color: var(--muted);
    font-size: 11px;
  }

  .statistics-card strong {
    display: block;
    margin-top: 7px;
    color: #fff;
    font-size: 25px;
  }

  .statistics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
  }

  .statistics-panel {
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 18px;
    background:
      linear-gradient(145deg, rgba(7,15,33,.55), rgba(18,28,56,.43)) padding-box,
      linear-gradient(120deg, rgba(255,88,176,.52), rgba(167,121,255,.46), rgba(85,214,255,.54)) border-box;
    backdrop-filter: blur(20px);
  }

  .statistics-panel h3 {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(126,171,255,.12);
    font-size: 14px;
  }

  .statistics-bars {
    padding: 8px 16px 15px;
  }

  .statistics-list-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 15px;
    border-bottom: 1px solid rgba(126,171,255,.09);
  }

  .statistics-list-row:last-child {
    border-bottom: 0;
  }

  .statistics-list-row b {
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .statistics-list-row span {
    color: #ff9dcc;
    font-weight: 800;
  }

  .statistics-popular {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    padding: 14px;
  }

  .statistics-chart-card {
    padding: 14px;
    border: 1px solid rgba(126,171,255,.16);
    border-radius: 14px;
    background: rgba(5,12,28,.34);
    cursor: pointer;
    transition: transform .18s ease, background .18s ease;
  }

  .statistics-chart-card:hover {
    transform: translateY(-2px);
    background: rgba(85,214,255,.055);
  }

  @media (max-width: 900px) {
    .statistics-summary {
      grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .statistics-grid,
    .statistics-popular {
      grid-template-columns: 1fr;
    }
  }


  .song-hero-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
  }

  .song-hero-info-row .song-badges {
    margin-top: 0;
  }

  .song-hero-actions {
    flex: 0 0 auto;
  }

  .song-hero-actions .favorite-button {
    min-width: 176px;
    min-height: 42px;
    justify-content: center;
  }

  .favorite-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      background .18s ease;
  }

  .favorite-button:hover {
    transform: translateY(-1px);
    border-color: rgba(255,88,176,.48);
    box-shadow:
      0 0 22px rgba(255,88,176,.15),
      0 0 20px rgba(85,214,255,.09);
  }

  .favorite-button .favorite-icon {
    font-size: 17px;
    line-height: 1;
  }

  .random-actions .favorite-button {
    margin-left: auto;
  }

  @media (max-width: 680px) {
    .song-hero-info-row {
      align-items: stretch;
      flex-direction: column;
    }

    .song-hero-actions .favorite-button {
      width: 100%;
    }

    .random-actions .favorite-button {
      width: 100%;
      margin-left: 0;
    }
  }


  .song-hero-info-row .song-badges {
    gap: 10px;
  }

  .song-hero-info-row .song-badges .pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 850;
    letter-spacing: .15px;
    color: #f8fbff;
    background:
      linear-gradient(145deg, rgba(10, 20, 42, .82), rgba(26, 39, 74, .66)) padding-box,
      linear-gradient(120deg, rgba(255, 88, 176, .62), rgba(167, 121, 255, .56), rgba(85, 214, 255, .62)) border-box;
    border: 1px solid transparent;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 0 18px rgba(85,214,255,.08);
  }

  .song-hero-info-row .song-badges .pill.stars {
    color: #a9f6cf;
    text-shadow: 0 0 12px rgba(117,242,189,.20);
  }

  @media (max-width: 680px) {
    .song-hero-info-row .song-badges {
      width: 100%;
    }

    .song-hero-info-row .song-badges .pill {
      flex: 1 1 auto;
      justify-content: center;
    }
  }


  .song-hero-info-row {
    align-items: center;
  }

  .song-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }

  .song-hero-actions .favorite-button {
    min-width: 176px;
    min-height: 42px;
  }

  @media (max-width: 760px) {
    .song-hero-info-row {
      align-items: stretch;
      flex-direction: column;
    }

    .song-hero-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
    }

    .song-hero-actions .favorite-button {
      width: 100%;
      min-width: 0;
    }
  }

  @media (max-width: 460px) {
    .song-hero-actions {
      grid-template-columns: 1fr;
    }
  }

  .song-hero-title,
  .song-hero-meta {
    padding-right: 112px;
  }

  .song-hero-info-row {
    justify-content: space-between;
  }

  .song-hero-actions {
    display: flex;
    align-items: center;
  }

  @media (max-width: 680px) {

    .song-hero-title,
    .song-hero-meta {
      padding-right: 92px;
    }

    .song-hero-info-row {
      flex-direction: column;
      align-items: stretch;
    }

    .song-hero-actions .favorite-button {
      width: 100%;
    }
  }

  @media (max-width: 430px) {

    .song-hero-title,
    .song-hero-meta {
      padding-right: 0;
    }
  }

  /* Share controls */
  .share-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  .share-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border: 1px solid rgba(112, 206, 255, .58);
    border-radius: 11px;
    color: #f5fbff;
    background:
      linear-gradient(180deg, rgba(26, 51, 91, .90), rgba(9, 19, 39, .96)) padding-box;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 800;
    letter-spacing: .01em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .40);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .045),
      0 0 0 1px rgba(83, 184, 255, .12),
      0 8px 22px rgba(0, 0, 0, .22);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }

  .share-button > span:first-child {
    font-size: 1.08em;
    filter: drop-shadow(0 0 5px rgba(117, 213, 255, .32));
  }

  .share-button:hover {
    transform: translateY(-1px);
    border-color: rgba(151, 224, 255, .82);
    background: linear-gradient(180deg, rgba(33, 66, 116, .96), rgba(12, 27, 54, .98));
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .07),
      0 0 26px rgba(85,214,255,.20),
      0 10px 24px rgba(0, 0, 0, .28);
  }


  .discord-song-share-button {
    border-color: rgba(143, 171, 255, .78);
    background:
      linear-gradient(180deg, rgba(91, 107, 236, .92), rgba(45, 58, 151, .96)) padding-box;
    color: #ffffff;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .10),
      0 0 24px rgba(88, 101, 242, .28),
      0 8px 22px rgba(0, 0, 0, .24);
  }

  .discord-song-share-button:hover {
    border-color: rgba(190, 204, 255, .95);
    background: linear-gradient(180deg, rgba(108, 124, 255, .98), rgba(54, 70, 174, .98));
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .15),
      0 0 30px rgba(88, 101, 242, .36),
      0 10px 26px rgba(0, 0, 0, .30);
  }

  .discord-song-share-button:disabled {
    opacity: .70;
    cursor: wait;
    transform: none;
  }

  .song-thumbnail-request-button {
    border-color: rgba(97, 224, 196, .62);
    background:
      linear-gradient(180deg, rgba(20, 81, 90, .92), rgba(8, 35, 44, .97)) padding-box;
    color: #f7ffff;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .08),
      0 0 22px rgba(77, 214, 184, .16),
      0 8px 22px rgba(0, 0, 0, .22);
  }

  .song-thumbnail-request-button:hover {
    border-color: rgba(144, 239, 218, .82);
    background: linear-gradient(180deg, rgba(28, 103, 113, .96), rgba(10, 44, 54, .98));
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .12),
      0 0 28px rgba(77, 214, 184, .22),
      0 10px 26px rgba(0, 0, 0, .28);
  }

  .song-thumbnail-request-form {
    display: grid;
    gap: 12px;
  }

  .song-thumbnail-request-note {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
  }

  .song-thumbnail-request-summary {
    padding: 12px 13px;
    border-radius: 12px;
    border: 1px solid rgba(107, 184, 255, .16);
    background: rgba(8, 16, 34, .52);
  }

  .song-thumbnail-request-summary strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
  }

  .song-thumbnail-request-current {
    color: var(--muted);
    font-size: 12px;
    word-break: break-all;
  }

  .song-thumbnail-request-form label {
    display: grid;
    gap: 7px;
    font-size: 13px;
    color: var(--muted);
  }

  .song-thumbnail-request-form input {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(114, 176, 255, .28);
    background: rgba(4, 10, 24, .78);
    color: var(--text);
    padding: 0 13px;
  }

  .song-thumbnail-request-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 2px;
  }

  .song-thumbnail-request-status {
    min-height: 19px;
    color: var(--muted);
    font-size: 12px;
  }

  .song-thumbnail-request-status.error { color: #ffb3b3; }
  .song-thumbnail-request-status.ok { color: #98f1c3; }

  .song-thumbnail-request-actions .share-button {
    min-width: 132px;
  }

  @media (max-width: 700px) {
    .song-thumbnail-request-actions {
      flex-direction: column-reverse;
      align-items: stretch;
    }
    .song-thumbnail-request-actions .share-button {
      width: 100%;
    }
  }

  .song-hero-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: flex-end;
  }

  .favorite-card-actions,
  .history-card-actions,
  .random-actions {
    align-items: center;
  }

  /* Recently viewed charts */
  .history-page {
    display: grid;
    gap: 18px;
  }

  .history-hero {
    padding: 28px;
    border: 1px solid transparent;
    border-radius: 22px;
    background:
      radial-gradient(circle at 84% 16%, rgba(85,214,255,.15), transparent 30%),
      radial-gradient(circle at 24% 100%, rgba(167,121,255,.13), transparent 34%),
      linear-gradient(145deg, rgba(6,13,31,.58), rgba(18,28,58,.44)) padding-box,
      linear-gradient(120deg, rgba(85,214,255,.70), rgba(167,121,255,.64), rgba(255,88,176,.66)) border-box;
    backdrop-filter: blur(22px);
    box-shadow: 0 30px 92px rgba(0,0,0,.44);
  }

  .history-kicker {
    color: #8fe6ff;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1.25px;
  }

  .history-title {
    margin: 9px 0 8px;
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 900;
    background: linear-gradient(90deg, #fff, #8fe6ff 35%, #b893ff 67%, #ff9ccc);
    -webkit-background-clip: text;
    color: transparent;
  }

  .history-copy {
    max-width: 800px;
    color: #bcc9e2;
    line-height: 1.75;
    white-space: pre-line;
  }

  .history-note {
    margin-top: 12px;
    color: var(--muted);
    font-size: 11px;
  }

  .history-toolbar {
    display: flex;
    justify-content: flex-end;
  }

  .history-toolbar button {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(126,171,255,.24);
    border-radius: 10px;
    color: var(--text);
    background: rgba(8,16,34,.62);
    cursor: pointer;
  }

  .history-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
  }

  .history-card {
    padding: 17px;
    border: 1px solid transparent;
    border-radius: 18px;
    background:
      linear-gradient(145deg, rgba(7,15,33,.56), rgba(18,28,56,.43)) padding-box,
      linear-gradient(120deg, rgba(85,214,255,.56), rgba(167,121,255,.48), rgba(255,88,176,.50)) border-box;
    backdrop-filter: blur(20px);
    box-shadow: 0 22px 62px rgba(0,0,0,.32);
  }

  .history-card-title {
    overflow: hidden;
    color: #fff;
    font-size: 17px;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .history-card-meta {
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
  }

  .history-card-badges,
  .history-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  .history-card-actions button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(126,171,255,.22);
    border-radius: 9px;
    color: var(--text);
    background: rgba(5,12,28,.54);
    cursor: pointer;
  }

  @media (max-width: 760px) {
    .history-page,
    .history-grid,
    .history-card,
    .history-hero {
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    .history-page {
      gap: 14px;
      overflow-x: clip;
    }

    .history-hero {
      padding: 19px 16px;
      border-radius: 18px;
    }

    .history-title {
      margin-top: 7px;
      font-size: clamp(25px, 8.6vw, 35px);
      line-height: 1.15;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .history-copy,
    .history-note {
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .history-toolbar {
      width: 100%;
      justify-content: stretch;
    }

    .history-toolbar button {
      width: 100%;
      min-width: 0;
      min-height: 42px;
      height: auto;
      padding: 10px 12px;
      white-space: normal;
      line-height: 1.35;
    }

    .history-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
    }

    .history-card {
      padding: 15px 14px;
      border-radius: 16px;
      overflow: hidden;
    }

    .history-card-title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      font-size: 16px;
      line-height: 1.35;
    }

    .history-card-meta {
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.6;
    }

    .history-card-badges {
      max-width: 100%;
    }

    .history-card-badges .pill {
      min-width: 0;
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .history-card-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 100%;
      gap: 8px;
    }

    .history-card-actions button,
    .history-card-actions .share-button {
      width: 100%;
      min-width: 0;
      min-height: 42px;
      height: auto;
      padding: 9px 8px;
      white-space: normal;
      line-height: 1.3;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
  }

  @media (max-width: 380px) {
    .history-card-actions {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Favorites */
  .favorites-page { display:grid; gap:18px; }
  .favorites-hero {
    padding:28px; border:1px solid transparent; border-radius:22px;
    background:
      radial-gradient(circle at 84% 16%,rgba(255,88,176,.16),transparent 30%),
      radial-gradient(circle at 62% 100%,rgba(85,214,255,.14),transparent 34%),
      linear-gradient(145deg,rgba(6,13,31,.58),rgba(18,28,58,.44)) padding-box,
      linear-gradient(120deg,rgba(255,88,176,.76),rgba(167,121,255,.68),rgba(85,214,255,.78)) border-box;
    backdrop-filter:blur(22px); box-shadow:0 30px 92px rgba(0,0,0,.44);
  }
  .favorites-kicker { color:#ff9dcc; font-size:11px; font-weight:850; letter-spacing:1.25px; }
  .favorites-title {
    margin:9px 0 8px; font-size:clamp(28px,4vw,46px); font-weight:900;
    background:linear-gradient(90deg,#fff,#ff9ccc 34%,#b893ff 64%,#6cddff);
    -webkit-background-clip:text; color:transparent;
  }
  .favorites-copy { max-width:800px; color:#bcc9e2; line-height:1.75; }
  .favorites-note { margin-top:12px; color:var(--muted); font-size:11px; }
  .favorites-toolbar { display:flex; justify-content:flex-end; }
  .favorites-toolbar button,.favorite-button {
    min-height:40px; padding:0 14px; border:1px solid rgba(126,171,255,.24);
    border-radius:10px; color:var(--text); background:rgba(8,16,34,.62); cursor:pointer;
  }
  .favorite-button.active {
    border-color:rgba(255,88,176,.42);
    background:linear-gradient(90deg,rgba(255,88,176,.20),rgba(167,121,255,.13));
    box-shadow:0 0 20px rgba(255,88,176,.12);
  }
  .favorites-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .favorite-card {
    padding:17px; border:1px solid transparent; border-radius:18px;
    background:
      linear-gradient(145deg,rgba(7,15,33,.56),rgba(18,28,56,.43)) padding-box,
      linear-gradient(120deg,rgba(255,88,176,.54),rgba(167,121,255,.48),rgba(85,214,255,.56)) border-box;
    backdrop-filter:blur(20px); box-shadow:0 22px 62px rgba(0,0,0,.32);
  }
  .favorite-card-title { overflow:hidden; color:#fff; font-size:17px; font-weight:820; text-overflow:ellipsis; white-space:nowrap; }
  .favorite-card-meta { margin-top:6px; color:var(--muted); font-size:11px; line-height:1.55; }
  .favorite-card-badges,.favorite-card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .favorite-card-actions button {
    min-height:38px; padding:0 12px; border:1px solid rgba(126,171,255,.22);
    border-radius:9px; color:var(--text); background:rgba(5,12,28,.54); cursor:pointer;
  }
  .favorite-card-actions button.primary {
    border-color:rgba(85,214,255,.30);
    background:linear-gradient(90deg,rgba(85,214,255,.14),rgba(167,121,255,.10));
  }
  .toast {
    position:fixed; left:50%; bottom:26px; z-index:300; padding:11px 15px;
    border:1px solid rgba(126,171,255,.26); border-radius:11px; color:#fff;
    background:rgba(5,12,28,.94); box-shadow:0 18px 55px rgba(0,0,0,.55);
    transform:translate(-50%,18px); opacity:0; pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
  }
  .toast.show { opacity:1; transform:translate(-50%,0); }
  @media (max-width:760px) { .favorites-grid { grid-template-columns:1fr; } }


  /* Advanced chart discovery filters */
  .chart-filter-panel {
    margin-bottom: 16px;
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 18px;
    background:
      linear-gradient(145deg, rgba(7,15,33,.58), rgba(18,28,56,.45)) padding-box,
      linear-gradient(120deg, rgba(255,88,176,.50), rgba(167,121,255,.45), rgba(85,214,255,.54)) border-box;
    backdrop-filter: blur(20px);
    box-shadow: 0 22px 68px rgba(0,0,0,.32);
  }
  .chart-filter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .chart-filter-heading {
    min-width: 0;
  }
  .chart-filter-title {
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .28px;
  }
  .chart-filter-copy {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
  }
  .chart-filter-toggle {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(85,214,255,.26);
    color: #d9ecff;
    background: linear-gradient(90deg, rgba(85,214,255,.12), rgba(167,121,255,.10));
    box-shadow: 0 0 18px rgba(85,214,255,.08);
  }
  .chart-filter-toggle::after {
    content: "▾";
    display: inline-block;
    margin-left: 7px;
    font-size: 10px;
    transition: transform .22s var(--motion-ease);
  }
  .chart-filter-panel.is-open .chart-filter-toggle::after {
    transform: rotate(180deg);
  }
  .chart-filter-body {
    overflow: hidden;
    max-height: 720px;
    opacity: 1;
    transform: translateY(0);
    transition:
      max-height .32s var(--motion-ease),
      opacity .22s ease,
      transform .24s var(--motion-ease),
      margin-top .24s var(--motion-ease);
    margin-top: 14px;
  }
  .chart-filter-panel:not(.is-open) .chart-filter-body {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    margin-top: 0;
    pointer-events: none;
  }
  .chart-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 11px;
  }
  .chart-filter-field label {
    display: block;
    margin: 0 0 7px 2px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .35px;
  }
  .chart-filter-field input,
  .chart-filter-field select {
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid rgba(126,171,255,.20);
    border-radius: 11px;
    color: var(--text);
    background: rgba(7,15,32,.64);
    color-scheme: dark;
  }
  .chart-filter-field select option {
    color: #f5f8ff;
    background: #101a32;
  }
  .chart-filter-field.range { grid-column: span 2; }
  .chart-range-inputs {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    gap: 8px;
    align-items: center;
  }
  .chart-range-inputs span { color: var(--muted); }
  .chart-filter-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid rgba(126,171,255,.11);
  }
  .active-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
  }
  .filter-chip {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border: 1px solid rgba(85,214,255,.20);
    border-radius: 999px;
    color: #c6d8ef;
    background: rgba(85,214,255,.055);
    font-size: 10px;
    white-space: nowrap;
  }
  .chart-filter-message {
    display: none;
    flex: 1 1 100%;
    min-height: 31px;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid rgba(255,105,140,.28);
    border-radius: 12px;
    color: #ffd7e1;
    background: rgba(255,88,120,.08);
    font-size: 11px;
    line-height: 1.45;
  }
  .chart-filter-message.visible { display: flex; }
  .chart-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
  }
  .chart-filter-actions .chart-count {
    margin-right: 4px;
    color: var(--muted);
    font-size: 11px;
  }
  .chart-filter-actions .btn {
    min-height: 38px;
    border-radius: 10px;
  }
  .chart-filter-actions .btn.primary {
    border-color: rgba(85,214,255,.30);
    background: linear-gradient(90deg, rgba(85,214,255,.14), rgba(167,121,255,.10));
  }
  .chart-filter-actions .btn.secondary {
    color: #b8c5dc;
    background: rgba(5,12,28,.40);
  }
  @media (max-width: 1000px) {
    .chart-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .chart-filter-field.range { grid-column: span 1; }
  }
  @media (max-width: 680px) {
    .chart-filter-summary { align-items: stretch; flex-direction: column; }
    .chart-filter-toggle { width: 100%; }
    .chart-filter-grid { grid-template-columns: 1fr; }
    .chart-filter-footer {
      align-items: stretch;
      flex-direction: column;
    }
    .chart-filter-actions { justify-content: stretch; }
    .chart-filter-actions .chart-count {
      width: 100%;
      margin: 0 0 2px;
    }
    .chart-filter-actions .btn { flex: 1 1 0; }
  }

  /* Layout consistency pass */
  nav {
    width: min(1280px, calc(100% - 32px));
    margin: 12px auto 0;
    padding: 9px 10px;
    border-radius: 16px;
    border: 1px solid transparent;
    overflow: hidden;
    justify-content: flex-start;
    background:
      linear-gradient(145deg,
        rgba(7, 15, 34, .58),
        rgba(18, 29, 58, .42) 52%,
        rgba(11, 20, 43, .56)
      ) padding-box,
      linear-gradient(120deg,
        rgba(255,88,176,.68),
        rgba(167,121,255,.62) 38%,
        rgba(85,214,255,.70)
      ) border-box !important;
    box-shadow:
      0 20px 60px rgba(0,0,0,.34),
      0 0 22px rgba(85,214,255,.07),
      0 0 18px rgba(255,88,176,.06);
  }

  nav button {
    border-radius: 11px;
    border-bottom: 1px solid transparent;
    padding: 9px 15px;
  }

  nav button.active {
    top: 0;
  }

  nav button.active::after {
    bottom: -2px;
  }

  main {
    width: min(1280px, calc(100% - 32px));
    max-width: none;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  footer {
    width: min(1280px, calc(100% - 32px));
    margin: 34px auto 22px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid transparent;
    overflow: hidden;
    background:
      linear-gradient(145deg,
        rgba(7, 15, 34, .60),
        rgba(18, 29, 58, .44) 52%,
        rgba(11, 20, 43, .58)
      ) padding-box,
      linear-gradient(120deg,
        rgba(255,88,176,.64),
        rgba(167,121,255,.58) 38%,
        rgba(85,214,255,.66)
      ) border-box !important;
    box-shadow:
      0 22px 70px rgba(0,0,0,.36),
      0 0 24px rgba(85,214,255,.07),
      0 0 20px rgba(255,88,176,.06);
  }

  footer .row {
    max-width: none;
    margin: 0;
    gap: 12px 18px;
  }

  footer .credit {
    line-height: 1.65;
  }

  footer .links {
    gap: 9px;
    justify-content: flex-end;
  }

  .filters,
  table,
  .player-header,
  .chart-header {
    border-radius: 18px;
  }

  .filters {
    padding: 13px 14px;
  }

  table {
    overflow: hidden;
  }

  .pager {
    margin-top: 10px;
    padding: 12px 0 0;
  }

  body.detail-route nav {
    margin-top: 10px;
  }

  body.detail-route main {
    padding-top: 14px;
  }

  @media (max-width: 700px) {
    nav,
    main,
    footer {
      width: calc(100% - 20px);
    }

    nav {
      margin-top: 9px;
      padding: 8px;
      border-radius: 14px;
      overflow-x: auto;
      scrollbar-width: none;
    }

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

    nav button {
      flex: 0 0 auto;
      padding: 8px 12px;
    }

    footer {
      margin-top: 24px;
      margin-bottom: 10px;
      padding: 14px;
      border-radius: 15px;
    }

    footer .row {
      align-items: flex-start;
    }

    footer .links {
      margin-left: 0;
      justify-content: flex-start;
      width: 100%;
    }

    .filters,
    table,
    .player-header,
    .chart-header {
      border-radius: 15px;
    }
  }


  /* Search results must be allowed to leave the rounded top bar */
  .site-topbar {
    overflow: visible !important;
    isolation: auto !important;
  }

  .site-topbar::before,
  .site-topbar::after {
    border-radius: inherit;
    pointer-events: none;
  }

  .top-search-wrap {
    position: relative !important;
    overflow: visible !important;
    isolation: auto !important;
  }

  .top-search {
    overflow: hidden;
  }

  .global-search-results {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }


  /* v29.36.17: dock the global search beside the sticky navigation on desktop */
  @media (min-width: 901px) {
    nav {
      transition: padding-right .18s ease, box-shadow .18s ease;
    }

    body.search-docked nav {
      padding-right: calc(var(--docked-search-width, 360px) + 20px);
      overflow: visible !important;
    }

    body.search-docked nav > .top-search-wrap {
      position: absolute !important;
      top: 8px;
      right: 10px;
      left: auto !important;
      width: var(--docked-search-width, 360px);
      z-index: 140 !important;
      animation: dockedSearchIn .18s ease-out;
    }

    body.search-docked .top-search {
      height: 42px;
      border-radius: 12px;
      border-color: rgba(126,171,255,.38);
      background:
        linear-gradient(145deg, rgba(7,15,34,.94), rgba(18,29,58,.90)) padding-box,
        linear-gradient(120deg, rgba(255,88,176,.42), rgba(167,121,255,.38), rgba(85,214,255,.48)) border-box;
      box-shadow:
        0 12px 34px rgba(0,0,0,.38),
        0 0 20px rgba(85,214,255,.09),
        inset 0 1px 0 rgba(255,255,255,.04);
    }

    body.search-docked .global-search-results {
      max-height: calc(100vh - 66px);
    }

    @keyframes dockedSearchIn {
      from { opacity: 0; transform: translateY(-6px) scale(.99); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
  }

  .profile-main {
    padding-right: 104px;
  }

  .profile-name {
    overflow-wrap: anywhere;
  }

  .profile-rank-line .rank-badge,
  .profile-rank-line .pill {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.2;
  }

  .profile-tabs {
    position: relative;
    z-index: 1;
    margin-top: 16px;
  }

  .profile-section,
  .stat-chart,
  .screenshot-card {
    min-width: 0;
  }

  @media (max-width: 760px) {

    .profile-main {
      padding-right: 88px;
    }
  }

  @media (max-width: 620px) {
    .profile-main {
      padding-right: 0;
      padding-top: 38px;
    }

    .profile-rank-line {
      justify-content: center;
    }
  }

  @media (max-width: 430px) {

    .profile-main {
      padding-top: 0;
    }

    .profile-rank-line .profile-hmd-pill {
      max-width: 100%;
    }

    .profile-bio-inline {
      margin-top: 11px;
      padding: 9px 10px 9px 12px;
      font-size: 12.5px;
      line-height: 1.6;
    }
  }


  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
    }
  }


  /* Keep the sticky primary navigation above scrolling page content. */
  nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 110 !important;
    isolation: isolate;
    transform: translateZ(0);
  }


  /* v29.11: unified motion and transition system */
  :root {
    --motion-fast: 160ms;
    --motion-normal: 320ms;
    --motion-slow: 520ms;
    --motion-ease: cubic-bezier(.22,.8,.24,1);
  }
  main {
    opacity: 1;
    transform: translateY(0);
  }
  body.route-transitioning main {
    pointer-events: none;
  }
  .content-reveal {
    animation: contentReveal 260ms var(--motion-ease) both;
  }
  @keyframes contentReveal {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .loading-shimmer {
    animation: loadingBreathe 1.45s ease-in-out infinite;
  }
  @keyframes loadingBreathe {
    0%, 100% { opacity: .68; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-1px); }
  }
  .profile-tab, .song-tab, nav button,
  .btn, .compact-ranking-row, .home-discord-card,
  .stat-card, .chart-card, .favorite-card, .history-card {
    transition:
      transform .22s var(--motion-ease),
      opacity .22s ease,
      background-color .22s ease,
      border-color .22s ease,
      box-shadow .22s ease,
      color .22s ease;
  }
  .profile-tab:active, .song-tab:active, nav button:active, .btn:active {
    transform: translateY(1px) scale(.985);
  }
  .profile-tab-panel {
    opacity: 1;
    transform: translateY(0);
    will-change: opacity, transform;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
    }
  }


  /* v29.29: layered hero background / character / parallax refresh */
  @media (min-width: 761px) {
    #tab-leaderboard #lb-list-view table,
    #tab-songs #song-list-view table {
      font-size: 15px;
    }

    #tab-leaderboard #lb-list-view th,
    #tab-songs #song-list-view th {
      padding: 12px 15px;
      font-size: 12.5px;
      font-weight: 760;
      letter-spacing: .55px;
      color: #dce7fb;
    }

    #tab-leaderboard #lb-list-view td,
    #tab-songs #song-list-view td {
      padding: 13px 15px;
      line-height: 1.38;
      transition:
        color 180ms ease,
        background-color 180ms ease,
        box-shadow 220ms var(--motion-ease);
    }

    #tab-leaderboard #lb-list-view td.nick {
      font-size: 16px;
      font-weight: 780;
      color: #f7f9ff;
    }

    #tab-leaderboard #lb-list-view td.pp {
      font-size: 15.5px;
      font-weight: 820;
    }

    #tab-leaderboard #lb-list-view td.avatar-cell {
      width: 42px;
    }

    #tab-leaderboard #lb-list-view .lb-avatar {
      width: 34px;
      height: 34px;
      border-color: rgba(126,171,255,.30);
      box-shadow: 0 0 14px rgba(85,214,255,.07);
    }

    #tab-leaderboard #lb-list-view td.rank {
      width: 54px;
      min-width: 54px;
      text-align: center;
      font-size: 18px;
      font-weight: 900;
      color: #b8c6df;
      font-variant-numeric: tabular-nums;
      letter-spacing: -.25px;
      text-shadow: 0 0 13px rgba(126,171,255,.14);
    }

    #tab-leaderboard #lb-list-view td.rank.top1 {
      color: #ffe176;
      text-shadow: 0 0 16px rgba(255,216,95,.46);
    }

    #tab-leaderboard #lb-list-view td.rank.top2 {
      color: #e1eaff;
      text-shadow: 0 0 14px rgba(201,220,255,.30);
    }

    #tab-leaderboard #lb-list-view td.rank.top3 {
      color: #ffb27e;
      text-shadow: 0 0 14px rgba(255,157,104,.32);
    }

    #tab-songs #song-list-view .title-cell .title {
      font-size: 16px;
      font-weight: 760;
      line-height: 1.28;
      color: #f6f8ff;
    }

    #tab-songs #song-list-view .title-cell .meta {
      margin-top: 4px;
      font-size: 12.5px;
      line-height: 1.35;
    }

    #tab-songs #song-list-view .pill {
      padding: 3px 10px;
      font-size: 12px;
      font-weight: 700;
    }

    #tab-songs #song-list-view td.stars,
    #tab-songs #song-list-view td:nth-child(4) {
      font-size: 15px;
      font-weight: 760;
    }

    #tab-leaderboard #lb-list-view tbody tr,
    #tab-songs #song-list-view tbody tr {
      transition:
        background 220ms ease,
        box-shadow 220ms var(--motion-ease),
        filter 220ms ease;
    }

    #tab-leaderboard #lb-list-view tbody tr:hover,
    #tab-songs #song-list-view tbody tr:hover {
      background:
        linear-gradient(90deg,
          rgba(255,88,176,.13),
          rgba(167,121,255,.085) 46%,
          rgba(85,214,255,.12)
        ) !important;
      box-shadow:
        inset 3px 0 0 rgba(255,88,176,.78),
        inset -2px 0 0 rgba(85,214,255,.66),
        inset 0 0 30px rgba(126,171,255,.045);
      filter: brightness(1.055);
    }

    #tab-leaderboard #lb-list-view tbody tr:hover td.nick,
    #tab-songs #song-list-view tbody tr:hover .title-cell .title {
      color: #ffffff;
      text-shadow: 0 0 14px rgba(126,171,255,.18);
      text-decoration: none;
    }

    #tab-songs #song-list-view th.sortable:hover {
      color: #fff;
      background: rgba(85,214,255,.055) !important;
      text-shadow: 0 0 12px rgba(85,214,255,.15);
    }
  }


  /* v29.34.2: stable desktop table columns across players and pages */
  @media (min-width: 1101px) {
    .profile-table-scroll table {
      table-layout: fixed;
      width: 100%;
      min-width: 100%;
      max-width: 100%;
    }

    .profile-table-scroll th:nth-child(1),
    .profile-table-scroll td:nth-child(1) { width: 4%; }
    .profile-table-scroll th:nth-child(2),
    .profile-table-scroll td:nth-child(2) { width: 32%; }
    .profile-table-scroll th:nth-child(3),
    .profile-table-scroll td:nth-child(3) { width: 9%; }
    .profile-table-scroll th:nth-child(4),
    .profile-table-scroll td:nth-child(4) { width: 7%; }
    .profile-table-scroll th:nth-child(5),
    .profile-table-scroll td:nth-child(5) { width: 14%; }
    .profile-table-scroll th:nth-child(6),
    .profile-table-scroll td:nth-child(6) { width: 10%; }
    .profile-table-scroll th:nth-child(7),
    .profile-table-scroll td:nth-child(7) { width: 8%; }
    .profile-table-scroll th:nth-child(8),
    .profile-table-scroll td:nth-child(8) { width: 6%; }
    .profile-table-scroll th:nth-child(9),
    .profile-table-scroll td:nth-child(9) { width: 10%; }

    #tab-songs #song-list-view table {
      table-layout: fixed;
      width: 100%;
      min-width: 100%;
      max-width: 100%;
    }

    #tab-songs #song-list-view th:nth-child(1),
    #tab-songs #song-list-view td:nth-child(1) { width: 46%; }
    #tab-songs #song-list-view th:nth-child(2),
    #tab-songs #song-list-view td:nth-child(2) { width: 12%; }
    #tab-songs #song-list-view th:nth-child(3),
    #tab-songs #song-list-view td:nth-child(3) { width: 9%; }
    #tab-songs #song-list-view th:nth-child(4),
    #tab-songs #song-list-view td:nth-child(4) { width: 8%; }
    #tab-songs #song-list-view th:nth-child(5),
    #tab-songs #song-list-view td:nth-child(5) { width: 8%; }
    #tab-songs #song-list-view th:nth-child(6),
    #tab-songs #song-list-view td:nth-child(6) { width: 6%; }
    #tab-songs #song-list-view th:nth-child(7),
    #tab-songs #song-list-view td:nth-child(7) { width: 6%; }
    #tab-songs #song-list-view th:nth-child(8),
    #tab-songs #song-list-view td:nth-child(8) { width: 5%; }
  }

  @media (min-width: 701px) and (max-width: 1100px) {
    .profile-table-scroll th.optional,
    .profile-table-scroll td.optional,
    #tab-songs #song-list-view th.optional,
    #tab-songs #song-list-view td.optional {
      display: none;
    }

    .profile-table-scroll table,
    #tab-songs #song-list-view table {
      table-layout: fixed;
      width: 100%;
      min-width: 100%;
      max-width: 100%;
    }

    .profile-table-scroll th:nth-child(1),
    .profile-table-scroll td:nth-child(1) { width: 6%; }
    .profile-table-scroll th:nth-child(2),
    .profile-table-scroll td:nth-child(2) { width: 43%; }
    .profile-table-scroll th:nth-child(3),
    .profile-table-scroll td:nth-child(3) { width: 13%; }
    .profile-table-scroll th:nth-child(4),
    .profile-table-scroll td:nth-child(4) { width: 10%; }
    .profile-table-scroll th:nth-child(5),
    .profile-table-scroll td:nth-child(5) { width: 17%; }
    .profile-table-scroll th:nth-child(6),
    .profile-table-scroll td:nth-child(6) { width: 11%; }

    #tab-songs #song-list-view th:nth-child(1),
    #tab-songs #song-list-view td:nth-child(1) { width: 58%; }
    #tab-songs #song-list-view th:nth-child(2),
    #tab-songs #song-list-view td:nth-child(2) { width: 17%; }
    #tab-songs #song-list-view th:nth-child(3),
    #tab-songs #song-list-view td:nth-child(3) { width: 13%; }
    #tab-songs #song-list-view th:nth-child(4),
    #tab-songs #song-list-view td:nth-child(4) { width: 12%; }
  }

  @media (min-width: 701px) {
    .profile-table-scroll th,
    .profile-table-scroll td,
    #tab-songs #song-list-view th,
    #tab-songs #song-list-view td {
      min-width: 0;
      max-width: none;
      box-sizing: border-box;
    }

    .profile-table-scroll td.pp .muted {
      display: block;
      margin-top: 2px;
      font-size: .82em;
      line-height: 1.15;
      white-space: nowrap;
    }

    .profile-table-scroll .title-cell,
    #tab-songs #song-list-view .title-cell {
      width: auto;
    }

    .profile-table-scroll .title-cell .title,
    .profile-table-scroll .title-cell .meta,
    #tab-songs #song-list-view .title-cell .title,
    #tab-songs #song-list-view .title-cell .meta {
      overflow-wrap: anywhere;
      word-break: break-word;
      white-space: normal;
    }
  }

  /* v29.37.6: selectable PP / accuracy / played-map / score leaderboards */
  #tab-leaderboard .leaderboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 16px;
    gap: 14px;
    padding: 10px 12px;
  }

  .leaderboard-mode-switch {
    display: inline-grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(100%, 540px);
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(126,171,255,.22);
    border-radius: 15px;
    background: rgba(5,10,31,.45);
    box-shadow: inset 0 0 22px rgba(91,123,255,.055);
  }

  .leaderboard-mode-button {
    min-width: 0;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease,
                box-shadow .18s ease, transform .18s ease;
  }

  .leaderboard-mode-button:hover {
    color: #fff;
    border-color: rgba(126,171,255,.20);
    background: rgba(126,171,255,.065);
  }

  .leaderboard-mode-button.active {
    color: #fff;
    border-color: rgba(255,100,190,.48);
    background: linear-gradient(135deg, rgba(255,75,174,.17), rgba(91,137,255,.16));
    box-shadow:
      inset 0 0 18px rgba(255,92,187,.08),
      0 0 16px rgba(111,125,255,.10);
    text-shadow: 0 0 12px rgba(255,255,255,.20);
  }

  .leaderboard-mode-button:focus-visible {
    outline: 2px solid rgba(85,214,255,.85);
    outline-offset: 2px;
  }

  #tab-leaderboard .leaderboard-toolbar #lb-count {
    flex: 0 0 auto;
    margin-left: 0;
    text-align: right;
    white-space: nowrap;
  }

  @media (max-width: 700px) {
    #tab-leaderboard .leaderboard-toolbar {
      align-items: stretch;
      flex-direction: column;
      gap: 8px;
      padding: 9px;
    }

    .leaderboard-mode-switch {
      width: 100%;
    }

    .leaderboard-mode-button {
      min-height: 36px;
      padding: 7px 5px;
      font-size: 11px;
    }

    #tab-leaderboard .leaderboard-toolbar #lb-count {
      align-self: flex-end;
      font-size: 11px;
    }
  }

  /* v29.37.7: mobile leaderboard cards remove horizontal scrolling. */
  .leaderboard-mobile-list {
    display: grid;
    gap: 12px;
  }

  .leaderboard-mobile-card {
    display: grid;
    gap: 10px;
    padding: 14px 14px 12px;
    border: 1px solid rgba(126,171,255,.18);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(31,24,66,.92), rgba(24,40,88,.88));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(5,12,31,.18);
  }

  .leaderboard-mobile-header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .leaderboard-mobile-rank {
    min-width: 52px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
  }

  .leaderboard-mobile-player {
    min-width: 0;
  }

  .leaderboard-mobile-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .leaderboard-mobile-metric {
    min-width: 0;
    padding: 10px 8px;
    border-radius: 14px;
    border: 1px solid rgba(126,171,255,.14);
    background: rgba(255,255,255,.035);
    text-align: center;
    display: grid;
    gap: 5px;
  }

  .leaderboard-mobile-metric-label {
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--muted);
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .leaderboard-mobile-metric-value {
    min-width: 0;
    font-size: 15px;
    line-height: 1.18;
    font-weight: 800;
    color: #f7f9ff;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .leaderboard-mobile-metric-value.muted {
    color: var(--muted);
  }

  @media (max-width: 700px) {
    .leaderboard-table-scroll {
      overflow: visible;
      border-radius: 0;
    }

    .leaderboard-table {
      min-width: 0;
    }

    .leaderboard-mobile-card .leaderboard-player {
      gap: 10px;
      align-items: center;
    }

    .leaderboard-mobile-card .leaderboard-player .leaderboard-avatar,
    .leaderboard-mobile-card .leaderboard-player .lb-avatar {
      width: 38px;
      height: 38px;
      flex-basis: 38px;
    }

    .leaderboard-mobile-card .leaderboard-player .nick {
      font-size: 15px;
      line-height: 1.25;
      white-space: normal;
    }
  }

  @media (max-width: 420px) {
    .leaderboard-mobile-card {
      padding: 13px 12px 11px;
    }

    .leaderboard-mobile-rank {
      min-width: 48px;
      min-height: 36px;
      font-size: 16px;
      padding: 6px 8px;
    }

    .leaderboard-mobile-metrics {
      gap: 6px;
    }

    .leaderboard-mobile-metric {
      padding: 9px 6px;
    }

    .leaderboard-mobile-metric-label {
      font-size: 9.5px;
    }

    .leaderboard-mobile-metric-value {
      font-size: 14px;
    }
  }

  /* v29.36.4: refined compact Top Plays rows */
  .leaderboard-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 18px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .leaderboard-table {
    width: 100%;
    min-width: 880px;
    table-layout: fixed;
    margin: 0;
  }

  .leaderboard-table th:nth-child(1),
  .leaderboard-table td:nth-child(1) { width: 8%; }
  .leaderboard-table th:nth-child(2),
  .leaderboard-table td:nth-child(2) { width: 32%; }
  .leaderboard-table th:nth-child(3),
  .leaderboard-table td:nth-child(3) { width: 15%; }
  .leaderboard-table th:nth-child(4),
  .leaderboard-table td:nth-child(4) { width: 15%; }
  .leaderboard-table th:nth-child(5),
  .leaderboard-table td:nth-child(5) { width: 15%; }
  .leaderboard-table th:nth-child(6),
  .leaderboard-table td:nth-child(6) { width: 15%; }

  /* v29.36.6: ScoreSaber-like centered statistic columns */
  .leaderboard-table th:nth-child(n+3),
  .leaderboard-table td:nth-child(n+3) {
    text-align: center;
  }

  .leaderboard-table th:nth-child(n+3) {
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
  }

  .leaderboard-table td:nth-child(n+3) {
    padding-left: 10px;
    padding-right: 10px;
    font-variant-numeric: tabular-nums;
  }

  .leaderboard-player-cell {
    min-width: 0;
  }

  .leaderboard-player {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .leaderboard-player .leaderboard-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: block;
  }

  .leaderboard-player .lb-avatar {
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid rgba(126,171,255,.30);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 14px rgba(85,214,255,.07);
  }

  .leaderboard-player .lb-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .leaderboard-player .nick {
    min-width: 0;
    font-size: 16px;
    font-weight: 780;
    color: #f7f9ff;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #tab-leaderboard #lb-list-view tbody tr:hover .leaderboard-player .nick {
    color: #ffffff;
    text-shadow: 0 0 14px rgba(126,171,255,.18);
  }

  .leaderboard-average-accuracy {
    font-weight: 780;
    font-variant-numeric: tabular-nums;
  }

  /* v29.36.7: accuracy becomes progressively more luxurious. */
  .leaderboard-accuracy-value {
    position: relative;
    display: inline-block;
    min-width: 5.4ch;
    text-align: center;
    line-height: 1.15;
    color: #b7c2d6;
    white-space: nowrap;
    transition: filter .18s ease, text-shadow .18s ease;
  }

  /* 85%: same visual language as PP. */
  .leaderboard-accuracy-value.acc-85 {
    background: linear-gradient(90deg, #ff70b8, #d397ff 48%, #62d8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 18px rgba(255,79,162,.10);
  }

  /* 90%+: add a crisp outline, then increase glow every two percent. */
  .leaderboard-accuracy-value.acc-90 {
    background: linear-gradient(90deg, #ff82c2, #dca7ff 48%, #74e2ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .32px rgba(238,247,255,.72);
    text-shadow: 0 0 7px rgba(110,216,255,.24), 0 0 15px rgba(217,117,255,.18);
  }

  .leaderboard-accuracy-value.acc-92 {
    background: linear-gradient(90deg, #ff8ac8, #e4b0ff 46%, #72eaff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .38px rgba(245,250,255,.78);
    text-shadow: 0 0 6px rgba(255,112,190,.28), 0 0 15px rgba(111,224,255,.30);
  }

  .leaderboard-accuracy-value.acc-94 {
    background: linear-gradient(90deg, #ff99d0, #f0c2ff 42%, #77efff 78%, #a8fff1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .42px rgba(250,253,255,.84);
    text-shadow: 0 0 6px rgba(255,116,200,.38), 0 0 17px rgba(101,225,255,.40);
  }

  .leaderboard-accuracy-value.acc-96 {
    background: linear-gradient(90deg, #ffd1e7, #e6b4ff 34%, #7cecff 68%, #baffdf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .48px rgba(255,255,255,.90);
    text-shadow: 0 0 5px rgba(255,255,255,.34), 0 0 12px rgba(255,104,195,.48), 0 0 22px rgba(93,225,255,.48);
  }

  /* 97%: a distinct pre-star prestige tier between 96% and 98%. */
  .leaderboard-accuracy-value.acc-97 {
    background: linear-gradient(92deg, #ffe6a3 0%, #ffb6dc 28%, #dcb7ff 53%, #78ecff 78%, #b9ffe4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .52px rgba(255,255,255,.93);
    text-shadow:
      0 0 4px rgba(255,255,255,.42),
      0 0 11px rgba(255,194,91,.40),
      0 0 18px rgba(255,105,196,.54),
      0 0 28px rgba(83,225,255,.56);
    filter: saturate(1.12) brightness(1.04);
  }

  .leaderboard-accuracy-value.acc-98 {
    background: linear-gradient(90deg, #fff3a8, #ffb7df 26%, #d8b1ff 52%, #72edff 76%, #b8ffe1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .55px rgba(255,255,255,.96);
    text-shadow: 0 0 5px rgba(255,255,255,.60), 0 0 13px rgba(255,111,199,.62), 0 0 25px rgba(92,227,255,.65), 0 0 34px rgba(177,116,255,.34);
    filter: saturate(1.16) brightness(1.08);
  }

  .leaderboard-accuracy-value.acc-98::before,
  .leaderboard-accuracy-value.acc-98::after,
  .leaderboard-accuracy-value.acc-99::before,
  .leaderboard-accuracy-value.acc-99::after {
    position: absolute;
    pointer-events: none;
    color: #fff8c9;
    text-shadow: 0 0 8px #fff, 0 0 14px rgba(104,226,255,.9);
    line-height: 1;
  }

  .leaderboard-accuracy-value.acc-98::before { content: '✦'; font-size: 7px; left: -8px; top: -3px; }
  .leaderboard-accuracy-value.acc-98::after  { content: '·'; font-size: 12px; right: -6px; bottom: -5px; }

  /* 99%+: maximum tier without a badge/frame. The glyphs themselves carry the effect. */
  .leaderboard-accuracy-value.acc-99 {
    box-sizing: border-box;
    max-width: 100%;
    padding: .08em .16em .10em;
    border: 0;
    outline: 0;
    border-radius: 0;
    letter-spacing: .035em;
    transform-origin: center;
    background-image:
      linear-gradient(112deg,
        transparent 0%, transparent 37%,
        rgba(255,255,255,0) 43%,
        rgba(255,255,255,.98) 50%,
        rgba(255,255,255,0) 57%,
        transparent 63%, transparent 100%),
      linear-gradient(100deg,
        #fff7a1 0%, #ffd05f 13%, #ff7fc7 29%,
        #d79cff 46%, #55e8ff 64%, #92ffdc 82%, #fff7a1 100%);
    background-size: 320% 100%, 260% 100%;
    background-position: 180% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .54px rgba(255,255,255,.90);
    text-shadow:
      0 0 3px rgba(255,255,255,.42),
      0 0 9px rgba(255,207,84,.70),
      0 0 17px rgba(255,78,183,.78),
      0 0 27px rgba(52,222,255,.82),
      0 0 40px rgba(159,83,255,.56);
    filter:
      saturate(1.34)
      brightness(1.03)
      drop-shadow(0 0 5px rgba(255,199,78,.42))
      drop-shadow(0 0 10px rgba(65,222,255,.32));
    animation:
      leaderboardAccuracyMax 2.45s linear infinite,
      leaderboardAccuracyRoyalAura 1.8s ease-in-out infinite alternate;
    isolation: isolate;
  }

  .leaderboard-accuracy-value.acc-99::before {
    content: '✦';
    font-size: 11px;
    left: -12px;
    top: -8px;
    color: #ffe58e;
    animation: leaderboardAccuracySparkle 1.15s ease-in-out infinite;
  }
  .leaderboard-accuracy-value.acc-99::after {
    content: '✧';
    font-size: 11px;
    right: -12px;
    bottom: -8px;
    color: #8ff4ff;
    animation: leaderboardAccuracySparkle 1.15s ease-in-out .55s infinite;
  }

  @keyframes leaderboardAccuracyMax {
    from { background-position: 180% 0, 0% 0; }
    to   { background-position: -180% 0, -260% 0; }
  }

  @keyframes leaderboardAccuracyRoyalAura {
    from { transform: scale(1); }
    to   { transform: scale(1.035); }
  }

  @keyframes leaderboardAccuracySparkle {
    0%, 100% { opacity: .38; transform: scale(.72) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.18) rotate(18deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .leaderboard-accuracy-value.acc-99,
    .leaderboard-accuracy-value.acc-99::before,
    .leaderboard-accuracy-value.acc-99::after { animation: none; }
  }


  /* v29.37.10: played-map milestones become luxurious much earlier. */
  .leaderboard-plays-value {
    position: relative;
    display: inline-block;
    min-width: 4.2ch;
    text-align: center;
    line-height: 1.15;
    color: #aab5c9;
    white-space: nowrap;
    font-weight: 780;
    font-variant-numeric: tabular-nums;
    isolation: isolate;
  }

  /* 101-200: one step quieter than PP. */
  .leaderboard-plays-value.plays-200 {
    color: #d3c4dd;
    text-shadow: 0 0 10px rgba(185,135,221,.10);
  }

  /* 201-300: same visual language as PP. */
  .leaderboard-plays-value.plays-300 {
    background: linear-gradient(90deg, #ff70b8, #d397ff 48%, #62d8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 18px rgba(255,79,162,.10);
  }

  /* 301-500: PP plus a subtle outline. */
  .leaderboard-plays-value.plays-500 {
    background: linear-gradient(90deg, #ff82c2, #dca7ff 48%, #74e2ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .30px rgba(239,247,255,.68);
    text-shadow: 0 0 7px rgba(110,216,255,.20), 0 0 14px rgba(217,117,255,.16);
  }

  /* 501-700: already a major amount, so begin with multi-layer glow. */
  .leaderboard-plays-value.plays-700 {
    background: linear-gradient(92deg, #ffc2df 0%, #ff86c4 24%, #d9a9ff 52%, #72e9ff 78%, #aaffdf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .40px rgba(248,252,255,.82);
    text-shadow:
      0 0 4px rgba(255,255,255,.20),
      0 0 10px rgba(255,100,190,.40),
      0 0 19px rgba(78,220,255,.42);
    filter: saturate(1.08);
  }

  /* 701-800: richer colours and a deeper aura. */
  .leaderboard-plays-value.plays-800 {
    background: linear-gradient(94deg, #ffe3a8 0%, #ff9dcc 22%, #dcaaff 48%, #6cecff 73%, #a9ffe0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .45px rgba(252,254,255,.88);
    text-shadow:
      0 0 4px rgba(255,255,255,.26),
      0 0 11px rgba(255,197,84,.32),
      0 0 18px rgba(255,91,185,.48),
      0 0 27px rgba(72,224,255,.48);
    filter: saturate(1.13) brightness(1.02);
  }

  /* 801-900: animated prism flow and first sparkle accents. */
  .leaderboard-plays-value.plays-900 {
    background: linear-gradient(100deg, #fff0a6 0%, #ffb069 15%, #ff85c8 34%, #d7a7ff 53%, #68e9ff 73%, #a9ffe0 89%, #fff0a6 100%);
    background-size: 190% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .50px rgba(255,255,255,.91);
    text-shadow:
      0 0 4px rgba(255,255,255,.32),
      0 0 11px rgba(255,190,70,.40),
      0 0 19px rgba(255,76,181,.56),
      0 0 29px rgba(55,220,255,.58),
      0 0 38px rgba(154,86,255,.25);
    filter: saturate(1.18) brightness(1.04);
    animation: leaderboardPlaysFlow 5.2s linear infinite;
  }

  .leaderboard-plays-value.plays-900::before,
  .leaderboard-plays-value.plays-900::after,
  .leaderboard-plays-value.plays-999::before,
  .leaderboard-plays-value.plays-999::after,
  .leaderboard-plays-value.plays-1000::before,
  .leaderboard-plays-value.plays-1000::after,
  .leaderboard-plays-value.plays-1500::before,
  .leaderboard-plays-value.plays-1500::after,
  .leaderboard-plays-value.plays-2000::before,
  .leaderboard-plays-value.plays-2000::after {
    position: absolute;
    pointer-events: none;
    line-height: 1;
    z-index: 1;
  }

  .leaderboard-plays-value.plays-900::before {
    content: '·';
    left: -6px;
    top: -4px;
    font-size: 12px;
    color: #fff0a5;
    text-shadow: 0 0 8px rgba(255,211,103,.82);
    animation: leaderboardPlaysSparkle 2.2s ease-in-out infinite;
  }
  .leaderboard-plays-value.plays-900::after {
    content: '✦';
    right: -8px;
    bottom: -5px;
    font-size: 6px;
    color: #8ff3ff;
    text-shadow: 0 0 9px rgba(80,227,255,.88);
    animation: leaderboardPlaysSparkle 2.2s ease-in-out 1.1s infinite;
  }

  /* 901-999: stronger aura and visible stars before the milestone. */
  .leaderboard-plays-value.plays-999 {
    background: linear-gradient(100deg, #fff6bd 0%, #ffd36d 15%, #ff8ecb 33%, #d8a9ff 52%, #61eaff 72%, #adffe1 88%, #fff6bd 100%);
    background-size: 210% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .54px rgba(255,255,255,.94);
    text-shadow:
      0 0 4px rgba(255,255,255,.38),
      0 0 12px rgba(255,202,80,.50),
      0 0 21px rgba(255,79,185,.64),
      0 0 32px rgba(48,221,255,.66),
      0 0 43px rgba(156,81,255,.34);
    filter: saturate(1.23) brightness(1.06);
    animation: leaderboardPlaysFlow 4.2s linear infinite;
  }

  .leaderboard-plays-value.plays-999::before {
    content: '✦';
    left: -9px;
    top: -5px;
    font-size: 8px;
    color: #ffe98f;
    text-shadow: 0 0 8px rgba(255,218,91,.92), 0 0 14px rgba(255,97,189,.50);
    animation: leaderboardPlaysSparkle 1.7s ease-in-out infinite;
  }
  .leaderboard-plays-value.plays-999::after {
    content: '✧';
    right: -9px;
    bottom: -6px;
    font-size: 9px;
    color: #8ef5ff;
    text-shadow: 0 0 9px rgba(64,226,255,.96), 0 0 15px rgba(158,85,255,.48);
    animation: leaderboardPlaysSparkle 1.7s ease-in-out .85s infinite;
  }

  /* 1000-1499: animated aurora milestone. */
  .leaderboard-plays-value.plays-1000 {
    background:
      linear-gradient(112deg, transparent 32%, rgba(255,255,255,.92) 45%, transparent 57%) 0 0 / 240% 100%,
      linear-gradient(100deg, #fff9c9 0%, #ffc95e 14%, #ff79c4 32%, #cb94ff 50%, #4ce5ff 69%, #8dffd6 86%, #fff9c9 100%) 0 0 / 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .58px rgba(255,255,255,.96);
    text-shadow:
      0 0 4px rgba(255,255,255,.42),
      0 0 12px rgba(255,199,66,.58),
      0 0 22px rgba(255,65,176,.72),
      0 0 34px rgba(35,220,255,.74),
      0 0 47px rgba(145,65,255,.42);
    filter: saturate(1.30) brightness(1.07);
    animation: leaderboardPlaysMilestone 3.7s linear infinite, leaderboardPlaysBreath 2.8s ease-in-out infinite;
  }

  .leaderboard-plays-value.plays-1000::before {
    content: '✦';
    left: -10px;
    top: -6px;
    font-size: 9px;
    color: #ffe77e;
    text-shadow: 0 0 9px rgba(255,218,70,.98), 0 0 16px rgba(255,73,180,.62);
    animation: leaderboardPlaysSparkle 1.45s ease-in-out infinite;
  }
  .leaderboard-plays-value.plays-1000::after {
    content: '✧';
    right: -10px;
    bottom: -7px;
    font-size: 10px;
    color: #7df3ff;
    text-shadow: 0 0 10px rgba(48,224,255,1), 0 0 17px rgba(145,70,255,.65);
    animation: leaderboardPlaysSparkle 1.45s ease-in-out .7s infinite;
  }

  /* 1500-1999: a denser aurora, brighter sweep and wider coloured aura. */
  .leaderboard-plays-value.plays-1500 {
    background:
      linear-gradient(110deg, transparent 27%, rgba(255,255,255,.98) 42%, rgba(255,238,153,.78) 48%, transparent 61%) 0 0 / 255% 100%,
      linear-gradient(100deg, #fffbd5 0%, #ffbf45 13%, #ff64b9 28%, #b77cff 46%, #31ddff 65%, #6fffc7 82%, #fff38e 96%, #fffbd5 100%) 0 0 / 235% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .62px rgba(255,255,255,.98);
    text-shadow:
      0 0 4px rgba(255,255,255,.46),
      0 0 13px rgba(255,184,42,.70),
      0 0 24px rgba(255,48,166,.82),
      0 0 37px rgba(19,215,255,.84),
      0 0 52px rgba(132,48,255,.56),
      0 0 66px rgba(78,255,192,.24);
    filter: saturate(1.40) brightness(1.09)
      drop-shadow(0 0 4px rgba(255,178,42,.30))
      drop-shadow(0 0 10px rgba(41,220,255,.30));
    animation: leaderboardPlaysMilestone 3.0s linear infinite, leaderboardPlaysBreathStrong 2.5s ease-in-out infinite;
  }

  .leaderboard-plays-value.plays-1500::before {
    content: '✦';
    left: -11px;
    top: -7px;
    font-size: 10px;
    color: #ffdc62;
    text-shadow: 0 0 10px rgba(255,206,51,1), 0 0 19px rgba(255,46,168,.75);
    animation: leaderboardPlaysSparkleStrong 1.25s ease-in-out infinite;
  }
  .leaderboard-plays-value.plays-1500::after {
    content: '✧';
    right: -11px;
    bottom: -8px;
    font-size: 11px;
    color: #67f1ff;
    text-shadow: 0 0 11px rgba(25,217,255,1), 0 0 20px rgba(124,45,255,.78);
    animation: leaderboardPlaysSparkleStrong 1.25s ease-in-out .6s infinite;
  }

  /* 2000+: maximum tier, intentionally two visual steps beyond the old version. */
  .leaderboard-plays-value.plays-2000 {
    background:
      linear-gradient(108deg, transparent 21%, rgba(255,255,255,1) 37%, rgba(255,232,119,.95) 45%, rgba(139,250,255,.86) 52%, transparent 65%) 0 0 / 275% 100%,
      linear-gradient(98deg, #fffbdc 0%, #ffad24 11%, #ff45a8 25%, #a95dff 40%, #20d8ff 56%, #51ffb7 72%, #ffe15c 87%, #ff7bc9 96%, #fffbdc 100%) 0 0 / 255% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .66px rgba(255,255,255,.98);
    text-shadow:
      0 0 3px rgba(255,255,255,.50),
      0 0 13px rgba(255,166,20,.82),
      0 0 25px rgba(255,28,151,.94),
      0 0 39px rgba(0,207,255,.98),
      0 0 56px rgba(111,31,255,.72),
      0 0 73px rgba(45,255,178,.42);
    filter: saturate(1.52) brightness(1.10)
      drop-shadow(0 0 5px rgba(255,159,20,.42))
      drop-shadow(0 0 12px rgba(0,214,255,.42))
      drop-shadow(0 0 20px rgba(118,35,255,.28));
    animation: leaderboardPlaysMaximum 2.35s linear infinite, leaderboardPlaysBreathStrong 2.05s ease-in-out infinite;
  }

  .leaderboard-plays-value.plays-2000::before {
    content: '✦';
    left: -12px;
    top: -8px;
    font-size: 12px;
    color: #ffd84a;
    text-shadow: 0 0 11px rgba(255,193,20,1), 0 0 22px rgba(255,24,154,.90), 0 0 31px rgba(109,28,255,.48);
    animation: leaderboardPlaysSparkleMaximum 1.0s ease-in-out infinite;
  }
  .leaderboard-plays-value.plays-2000::after {
    content: '✧';
    right: -12px;
    bottom: -9px;
    font-size: 13px;
    color: #48efff;
    text-shadow: 0 0 12px rgba(0,212,255,1), 0 0 23px rgba(79,255,190,.82), 0 0 32px rgba(106,25,255,.62);
    animation: leaderboardPlaysSparkleMaximum 1.0s ease-in-out .48s infinite;
  }

  @keyframes leaderboardPlaysFlow {
    to { background-position: -190% 0; }
  }

  @keyframes leaderboardPlaysMilestone {
    to { background-position: -255% 0, -235% 0; }
  }

  @keyframes leaderboardPlaysMaximum {
    to { background-position: -275% 0, -255% 0; }
  }

  @keyframes leaderboardPlaysBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.025); }
  }

  @keyframes leaderboardPlaysBreathStrong {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
  }

  @keyframes leaderboardPlaysSparkle {
    0%, 100% { opacity: .34; transform: scale(.70) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.18) rotate(18deg); }
  }

  @keyframes leaderboardPlaysSparkleStrong {
    0%, 100% { opacity: .34; transform: scale(.66) rotate(-8deg); }
    50% { opacity: 1; transform: scale(1.30) rotate(22deg); }
  }

  @keyframes leaderboardPlaysSparkleMaximum {
    0%, 100% { opacity: .30; transform: scale(.62) rotate(-12deg); }
    45% { opacity: 1; transform: scale(1.42) rotate(28deg); }
    62% { opacity: .68; transform: scale(1.08) rotate(38deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .leaderboard-plays-value.plays-900,
    .leaderboard-plays-value.plays-999,
    .leaderboard-plays-value.plays-1000,
    .leaderboard-plays-value.plays-1500,
    .leaderboard-plays-value.plays-2000,
    .leaderboard-plays-value.plays-900::before,
    .leaderboard-plays-value.plays-900::after,
    .leaderboard-plays-value.plays-999::before,
    .leaderboard-plays-value.plays-999::after,
    .leaderboard-plays-value.plays-1000::before,
    .leaderboard-plays-value.plays-1000::after,
    .leaderboard-plays-value.plays-1500::before,
    .leaderboard-plays-value.plays-1500::after,
    .leaderboard-plays-value.plays-2000::before,
    .leaderboard-plays-value.plays-2000::after {
      animation: none;
    }
  }


  /* v29.36.8: charts-played count also gains ScoreSaber-like luxury tiers. */
  .leaderboard-chart-count-value {
    position: relative;
    display: inline-block;
    min-width: 4ch;
    text-align: center;
    line-height: 1.15;
    color: #b4bfd4;
    white-space: nowrap;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: filter .18s ease, text-shadow .18s ease;
  }

  /* 101-200: one step quieter than PP. */
  .leaderboard-chart-count-value.play-200 {
    background: linear-gradient(90deg, #dcb8ff, #9fdfff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 12px rgba(116,207,255,.08);
  }

  /* 201-300: same visual language as PP. */
  .leaderboard-chart-count-value.play-300 {
    background: linear-gradient(90deg, #ff70b8, #d397ff 48%, #62d8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 18px rgba(255,79,162,.10);
  }

  .leaderboard-chart-count-value.play-500 {
    background: linear-gradient(90deg, #ff89c7, #dfabff 44%, #75e7ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .28px rgba(238,247,255,.62);
    text-shadow: 0 0 6px rgba(255,112,190,.22), 0 0 15px rgba(111,224,255,.22);
  }

  .leaderboard-chart-count-value.play-700 {
    background: linear-gradient(90deg, #ff9bd0, #eabbff 42%, #77efff 80%, #a8fff1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .36px rgba(245,250,255,.76);
    text-shadow: 0 0 6px rgba(255,116,200,.32), 0 0 17px rgba(101,225,255,.34);
  }

  .leaderboard-chart-count-value.play-800 {
    background: linear-gradient(90deg, #ffc7e2, #e9b6ff 34%, #7cecff 68%, #baffdf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .43px rgba(255,255,255,.86);
    text-shadow: 0 0 5px rgba(255,255,255,.28), 0 0 12px rgba(255,104,195,.42), 0 0 22px rgba(93,225,255,.42);
  }

  .leaderboard-chart-count-value.play-900 {
    background: linear-gradient(90deg, #ffe5a9, #ffb4dd 26%, #d9afff 52%, #72edff 76%, #b8ffe1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .50px rgba(255,255,255,.94);
    text-shadow: 0 0 5px rgba(255,255,255,.46), 0 0 13px rgba(255,111,199,.54), 0 0 25px rgba(92,227,255,.56);
    filter: saturate(1.12) brightness(1.05);
  }

  .leaderboard-chart-count-value.play-1000 {
    background: linear-gradient(90deg, #fff3a8, #ffd47c 18%, #ff9bd3 38%, #d8b1ff 56%, #72edff 76%, #b8ffe1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .56px rgba(255,255,255,.98);
    text-shadow: 0 0 5px rgba(255,255,255,.62), 0 0 13px rgba(255,205,91,.56), 0 0 25px rgba(255,111,199,.62), 0 0 34px rgba(92,227,255,.62);
    filter: saturate(1.18) brightness(1.10);
  }

  .leaderboard-chart-count-value.play-1000::before,
  .leaderboard-chart-count-value.play-1000::after,
  .leaderboard-chart-count-value.play-2000::before,
  .leaderboard-chart-count-value.play-2000::after {
    position: absolute;
    pointer-events: none;
    color: #fff8c9;
    text-shadow: 0 0 8px #fff, 0 0 14px rgba(104,226,255,.88);
    line-height: 1;
  }

  .leaderboard-chart-count-value.play-1000::before { content: '✦'; font-size: 7px; left: -8px; top: -4px; }
  .leaderboard-chart-count-value.play-1000::after  { content: '·'; font-size: 12px; right: -6px; bottom: -5px; }

  /* 2000+: maximum play-count tier. */
  .leaderboard-chart-count-value.play-2000 {
    background: linear-gradient(100deg, #fffbd5 0%, #ffd36e 16%, #ff9bd3 34%, #ddb3ff 52%, #72ebff 70%, #b7ffe0 86%, #fffbd5 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .66px rgba(255,255,255,1);
    text-shadow: 0 0 4px rgba(255,255,255,.95), 0 0 11px rgba(255,211,103,.72), 0 0 19px rgba(255,101,195,.78), 0 0 29px rgba(78,224,255,.84), 0 0 42px rgba(175,106,255,.50);
    filter: saturate(1.30) brightness(1.16);
    animation: leaderboardPlayCountMax 2.8s linear infinite;
  }

  .leaderboard-chart-count-value.play-2000::before { content: '✦'; font-size: 9px; left: -10px; top: -5px; animation: leaderboardPlayCountSparkle 1.45s ease-in-out infinite; }
  .leaderboard-chart-count-value.play-2000::after  { content: '✧'; font-size: 10px; right: -10px; bottom: -6px; animation: leaderboardPlayCountSparkle 1.45s ease-in-out .7s infinite; }

  @keyframes leaderboardPlayCountMax {
    to { background-position: -220% 0; }
  }

  @keyframes leaderboardPlayCountSparkle {
    0%, 100% { opacity: .38; transform: scale(.72) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.18) rotate(18deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .leaderboard-chart-count-value.play-2000,
    .leaderboard-chart-count-value.play-2000::before,
    .leaderboard-chart-count-value.play-2000::after { animation: none; }
  }


  /* v29.37.4: milestone values grow with each tier while retaining stable table layout. */
  .leaderboard-accuracy-value,
  .leaderboard-plays-value,
  .leaderboard-chart-count-value {
    vertical-align: middle;
  }

  .leaderboard-accuracy-value.acc-85 { font-size: 1.03em; }
  .leaderboard-accuracy-value.acc-90 { font-size: 1.08em; }
  .leaderboard-accuracy-value.acc-92 { font-size: 1.12em; }
  .leaderboard-accuracy-value.acc-94 { font-size: 1.16em; }
  .leaderboard-accuracy-value.acc-96 { font-size: 1.20em; }
  .leaderboard-accuracy-value.acc-97 { font-size: 1.23em; }
  .leaderboard-accuracy-value.acc-98 { font-size: 1.27em; }
  .leaderboard-accuracy-value.acc-99 { font-size: 1.34em; }

  /* Played-map numbers begin growing after 500 and reach 1.5x at 2000+. */
  .leaderboard-plays-value.plays-700 { font-size: 1.10em; }
  .leaderboard-plays-value.plays-800 { font-size: 1.18em; }
  .leaderboard-plays-value.plays-900 { font-size: 1.27em; }
  .leaderboard-plays-value.plays-999 { font-size: 1.34em; }
  .leaderboard-plays-value.plays-1000 { font-size: 1.40em; }
  .leaderboard-plays-value.plays-1500 { font-size: 1.46em; }
  .leaderboard-plays-value.plays-2000 { font-size: 1.50em; }

  /* Keep the alternate count renderer visually consistent if it is reused later. */
  .leaderboard-chart-count-value.play-500 { font-size: 1.08em; }
  .leaderboard-chart-count-value.play-700 { font-size: 1.16em; }
  .leaderboard-chart-count-value.play-800 { font-size: 1.24em; }
  .leaderboard-chart-count-value.play-900 { font-size: 1.32em; }
  .leaderboard-chart-count-value.play-1000 { font-size: 1.40em; }
  .leaderboard-chart-count-value.play-2000 { font-size: 1.50em; }

  /* Keep the unframed maximum tier comfortably inside narrow mobile cards. */
  @media (max-width: 700px) {
    .leaderboard-mobile-metric .leaderboard-accuracy-value.acc-99 {
      padding-left: .10em;
      padding-right: .10em;
      letter-spacing: .02em;
    }

    .leaderboard-mobile-metric .leaderboard-plays-value.plays-1500,
    .leaderboard-mobile-metric .leaderboard-plays-value.plays-2000 {
      padding-left: .08em;
      padding-right: .08em;
      letter-spacing: .01em;
    }

    .leaderboard-mobile-metric .leaderboard-plays-value.plays-2000::before { left: -9px; }
    .leaderboard-mobile-metric .leaderboard-plays-value.plays-2000::after { right: -9px; }
  }

  /* Desktop LCDs made the former white core bloom too strongly. Keep the colour
     and outer aura, but reduce white stroke/brightness only on desktop. */
  @media (min-width: 901px) {
    .leaderboard-accuracy-value.acc-96 {
      -webkit-text-stroke: .40px rgba(255,255,255,.76);
      text-shadow: 0 0 4px rgba(255,255,255,.18), 0 0 10px rgba(255,104,195,.34), 0 0 18px rgba(93,225,255,.34);
    }

    .leaderboard-accuracy-value.acc-97 {
      -webkit-text-stroke: .41px rgba(255,255,255,.78);
      text-shadow: 0 0 3px rgba(255,255,255,.18), 0 0 9px rgba(255,194,91,.30), 0 0 15px rgba(255,105,196,.40), 0 0 23px rgba(83,225,255,.42);
      filter: saturate(1.13) brightness(.99);
    }

    .leaderboard-accuracy-value.acc-98 {
      -webkit-text-stroke: .43px rgba(255,255,255,.80);
      text-shadow: 0 0 4px rgba(255,255,255,.24), 0 0 10px rgba(255,111,199,.42), 0 0 19px rgba(92,227,255,.46), 0 0 28px rgba(177,116,255,.22);
      filter: saturate(1.14) brightness(.99);
    }

    .leaderboard-accuracy-value.acc-99 {
      -webkit-text-stroke: .43px rgba(255,255,255,.80);
      text-shadow:
        0 0 2px rgba(255,255,255,.20),
        0 0 8px rgba(255,207,84,.52),
        0 0 15px rgba(255,78,183,.60),
        0 0 24px rgba(52,222,255,.65),
        0 0 36px rgba(159,83,255,.36);
      filter:
        saturate(1.28)
        brightness(.99)
        drop-shadow(0 0 4px rgba(255,199,78,.30))
        drop-shadow(0 0 9px rgba(65,222,255,.25));
    }

    .leaderboard-accuracy-value.acc-98::before,
    .leaderboard-accuracy-value.acc-98::after,
    .leaderboard-accuracy-value.acc-99::before,
    .leaderboard-accuracy-value.acc-99::after {
      text-shadow: 0 0 5px rgba(255,255,255,.70), 0 0 10px rgba(104,226,255,.58);
    }

    .leaderboard-plays-value.plays-700 {
      -webkit-text-stroke: .34px rgba(255,255,255,.72);
      text-shadow: 0 0 3px rgba(255,255,255,.12), 0 0 9px rgba(255,100,190,.31), 0 0 17px rgba(78,220,255,.33);
      filter: saturate(1.07) brightness(.99);
    }

    .leaderboard-plays-value.plays-800 {
      -webkit-text-stroke: .38px rgba(255,255,255,.76);
      text-shadow: 0 0 3px rgba(255,255,255,.15), 0 0 9px rgba(255,197,84,.25), 0 0 15px rgba(255,91,185,.36), 0 0 23px rgba(72,224,255,.38);
      filter: saturate(1.10) brightness(.99);
    }

    .leaderboard-plays-value.plays-900 {
      -webkit-text-stroke: .40px rgba(255,255,255,.78);
      text-shadow: 0 0 3px rgba(255,255,255,.16), 0 0 9px rgba(255,190,70,.28), 0 0 16px rgba(255,76,181,.42), 0 0 25px rgba(55,220,255,.44), 0 0 33px rgba(154,86,255,.18);
      filter: saturate(1.13) brightness(.98);
    }

    .leaderboard-plays-value.plays-999 {
      -webkit-text-stroke: .42px rgba(255,255,255,.80);
      text-shadow: 0 0 3px rgba(255,255,255,.18), 0 0 9px rgba(255,202,80,.34), 0 0 17px rgba(255,79,185,.48), 0 0 27px rgba(48,221,255,.50), 0 0 36px rgba(156,81,255,.23);
      filter: saturate(1.16) brightness(.98);
    }

    .leaderboard-plays-value.plays-1000 {
      -webkit-text-stroke: .44px rgba(255,255,255,.82);
      text-shadow: 0 0 3px rgba(255,255,255,.20), 0 0 9px rgba(255,199,66,.40), 0 0 17px rgba(255,65,176,.54), 0 0 28px rgba(35,220,255,.56), 0 0 39px rgba(145,65,255,.29);
      filter: saturate(1.20) brightness(.98) drop-shadow(0 0 4px rgba(255,199,66,.20)) drop-shadow(0 0 8px rgba(35,220,255,.18));
    }

    .leaderboard-plays-value.plays-1500 {
      -webkit-text-stroke: .46px rgba(255,255,255,.84);
      text-shadow: 0 0 3px rgba(255,255,255,.22), 0 0 9px rgba(255,184,42,.48), 0 0 18px rgba(255,48,166,.62), 0 0 29px rgba(19,215,255,.64), 0 0 42px rgba(132,48,255,.38), 0 0 54px rgba(78,255,192,.16);
      filter: saturate(1.27) brightness(.98) drop-shadow(0 0 4px rgba(255,178,42,.24)) drop-shadow(0 0 9px rgba(41,220,255,.23));
    }

    .leaderboard-plays-value.plays-2000 {
      -webkit-text-stroke: .48px rgba(255,255,255,.86);
      text-shadow: 0 0 2px rgba(255,255,255,.24), 0 0 9px rgba(255,166,20,.58), 0 0 19px rgba(255,28,151,.72), 0 0 31px rgba(0,207,255,.76), 0 0 46px rgba(111,31,255,.50), 0 0 60px rgba(45,255,178,.24);
      filter: saturate(1.34) brightness(.98) drop-shadow(0 0 5px rgba(255,159,20,.28)) drop-shadow(0 0 11px rgba(0,214,255,.28)) drop-shadow(0 0 17px rgba(118,35,255,.18));
    }

    .leaderboard-plays-value.plays-900::before,
    .leaderboard-plays-value.plays-900::after,
    .leaderboard-plays-value.plays-999::before,
    .leaderboard-plays-value.plays-999::after,
    .leaderboard-plays-value.plays-1000::before,
    .leaderboard-plays-value.plays-1000::after,
    .leaderboard-plays-value.plays-1500::before,
    .leaderboard-plays-value.plays-1500::after,
    .leaderboard-plays-value.plays-2000::before,
    .leaderboard-plays-value.plays-2000::after,
    .leaderboard-chart-count-value.play-1000::before,
    .leaderboard-chart-count-value.play-1000::after,
    .leaderboard-chart-count-value.play-2000::before,
    .leaderboard-chart-count-value.play-2000::after {
      text-shadow: 0 0 5px rgba(255,255,255,.70), 0 0 10px rgba(104,226,255,.58);
    }

    .leaderboard-chart-count-value.play-900 {
      -webkit-text-stroke: .42px rgba(255,255,255,.78);
      text-shadow: 0 0 4px rgba(255,255,255,.20), 0 0 10px rgba(255,111,199,.38), 0 0 19px rgba(92,227,255,.42);
      filter: saturate(1.10) brightness(.99);
    }

    .leaderboard-chart-count-value.play-1000 {
      -webkit-text-stroke: .45px rgba(255,255,255,.82);
      text-shadow: 0 0 4px rgba(255,255,255,.24), 0 0 9px rgba(255,205,91,.36), 0 0 16px rgba(255,111,199,.42), 0 0 25px rgba(92,227,255,.44);
      filter: saturate(1.14) brightness(.98);
    }

    .leaderboard-chart-count-value.play-2000 {
      -webkit-text-stroke: .48px rgba(255,255,255,.86);
      text-shadow: 0 0 3px rgba(255,255,255,.30), 0 0 8px rgba(255,211,103,.40), 0 0 14px rgba(255,101,195,.48), 0 0 22px rgba(78,224,255,.52), 0 0 31px rgba(175,106,255,.26);
      filter: saturate(1.18) brightness(.97);
    }
  }

  .leaderboard-average-accuracy.is-loading,
  .top-play-chart-rank.is-loading {
    color: #95a6c5;
    animation: dataValuePulse 1.25s ease-in-out infinite;
  }

  @keyframes dataValuePulse {
    0%, 100% { opacity: .42; }
    50% { opacity: 1; }
  }

  .top-plays-table th,
  .top-plays-table td {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .top-plays-table .top-play-song-cell {
    min-width: 0;
  }

  .top-plays-table .top-play-song-main,
  .top-plays-table .top-play-song-sub {
    display: grid;
    grid-template-columns: 48px 82px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
  }

  .top-plays-table .top-play-song-main {
    min-height: 24px;
    line-height: 1.25;
  }

  .top-plays-table .top-play-song-sub {
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
  }

  .top-plays-table .top-play-chart-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-width: 34px;
    height: 22px;
    padding: 0 7px;
    border: 1px solid rgba(220,128,255,.20);
    border-radius: 8px;
    background: rgba(220,128,255,.055);
    color: #f0c8ff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-shadow: 0 0 13px rgba(220,128,255,.20);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .top-plays-table .top-play-difficulty {
    min-width: 0;
    color: #dceaff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
  }

  .top-plays-table .top-play-song-title,
  .top-plays-table .top-play-song-meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-plays-table .top-play-song-title {
    color: #f7f9ff;
    font-size: 14px;
    font-weight: 780;
  }

  .top-plays-table .top-play-stars {
    grid-column: 2;
    min-width: 0;
    color: var(--good);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .top-plays-table .top-play-song-meta {
    grid-column: 3;
    color: var(--muted);
  }

  /* v29.36.9: center and enlarge Top Plays numeric columns for readability. */
  .top-plays-table th:nth-child(2),
  .top-plays-table th:nth-child(3),
  .top-plays-table th:nth-child(4),
  .top-plays-table .top-play-accuracy,
  .top-plays-table td.pp,
  .top-plays-table .top-play-score {
    text-align: center;
  }

  .top-plays-table .top-play-accuracy,
  .top-plays-table td.pp,
  .top-plays-table .top-play-score {
    font-size: 15.5px;
    font-weight: 850;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .top-plays-table .top-play-weighted-pp {
    display: inline-block;
    margin-left: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
    vertical-align: .08em;
  }

  .top-plays-table tbody tr:hover .top-play-song-title {
    color: #ffffff;
    text-shadow: 0 0 14px rgba(126,171,255,.18);
  }

  @media (min-width: 701px) {
    .profile-table-scroll .top-plays-table {
      table-layout: fixed;
      width: 100%;
      min-width: 100%;
      max-width: 100%;
    }

    .profile-table-scroll .top-plays-table th:nth-child(1),
    .profile-table-scroll .top-plays-table td:nth-child(1) { width: 61%; }
    .profile-table-scroll .top-plays-table th:nth-child(2),
    .profile-table-scroll .top-plays-table td:nth-child(2) { width: 14%; }
    .profile-table-scroll .top-plays-table th:nth-child(3),
    .profile-table-scroll .top-plays-table td:nth-child(3) { width: 11%; }
    .profile-table-scroll .top-plays-table th:nth-child(4),
    .profile-table-scroll .top-plays-table td:nth-child(4) { width: 14%; }
  }

  @media (max-width: 700px) {
    .leaderboard-table { min-width: 650px; }
    .top-plays-scroll {
      overflow-x: auto;
      overscroll-behavior-inline: contain;
    }
    .profile-table-scroll .top-plays-table {
      min-width: 700px;
    }
  }

  /* v29.31: dynamic home stats, holographic surfaces, and branded loading */
  .loading-shimmer {
    min-height: 148px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    font-size: 0 !important;
    color: transparent !important;
    background:
      radial-gradient(circle at 50% 44%, rgba(255,130,201,.12), transparent 25%),
      radial-gradient(circle at 50% 56%, rgba(86,205,255,.10), transparent 34%),
      linear-gradient(145deg, rgba(8,14,31,.82), rgba(14,22,45,.72));
    border-color: rgba(126,171,255,.20);
    animation: none !important;
  }
  .loading-shimmer::before {
    content: "";
    position: absolute;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 1px solid rgba(169,194,255,.18);
    border-top-color: rgba(255,151,211,.88);
    border-right-color: rgba(101,210,255,.68);
    box-shadow:
      0 0 26px rgba(255,123,199,.15),
      inset 0 0 24px rgba(101,190,255,.08);
    animation: hubLoaderOrbit 1.7s cubic-bezier(.55,.16,.45,.84) infinite;
  }
  .loading-shimmer::after {
    content: "UDON SABER";
    position: absolute;
    inset: auto;
    width: auto;
    height: auto;
    transform: none;
    background: none;
    color: rgba(235,244,255,.92);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 2.1px;
    text-shadow:
      0 0 10px rgba(255,137,207,.58),
      0 0 18px rgba(91,201,255,.32);
    animation: hubLoaderText 1.7s ease-in-out infinite;
  }
  @keyframes hubLoaderOrbit {
    0% { transform: rotate(0deg) scale(.96); opacity: .72; }
    50% { transform: rotate(180deg) scale(1.04); opacity: 1; }
    100% { transform: rotate(360deg) scale(.96); opacity: .72; }
  }
  @keyframes hubLoaderText {
    0%, 100% { opacity: .55; filter: blur(0); }
    50% { opacity: 1; filter: drop-shadow(0 0 5px rgba(255,255,255,.25)); }
  }

  .home-stat .value[data-count-target] {
    font-variant-numeric: tabular-nums;
    min-width: 3ch;
  }
  .home-stat.counting .value {
    text-shadow:
      0 0 18px rgba(255,143,205,.24),
      0 0 28px rgba(79,198,255,.14);
  }
  .home-stat.count-complete {
    animation: homeStatSettle 420ms cubic-bezier(.18,.8,.25,1) both;
  }
  @keyframes homeStatSettle {
    0% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-2px) scale(1.018); }
    100% { transform: translateY(0) scale(1); }
  }

  .hologram-card {
    position: relative !important;
    isolation: isolate;
    --holo-x: 50%;
    --holo-y: 50%;
  }
  .hologram-card > .hologram-glint {
    position: absolute;
    inset: -1px;
    z-index: 20;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    background:
      radial-gradient(circle at var(--holo-x) var(--holo-y), rgba(255,255,255,.20) 0, rgba(255,171,220,.11) 12%, rgba(92,204,255,.07) 25%, transparent 48%),
      linear-gradient(115deg, transparent 24%, rgba(255,158,216,.045) 42%, rgba(111,202,255,.055) 54%, transparent 72%);
    mix-blend-mode: screen;
    transition: opacity 240ms ease;
  }
  .hologram-card > .hologram-glint::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    background: linear-gradient(120deg, rgba(255,144,208,.25), transparent 32%, transparent 66%, rgba(91,203,255,.24)) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: .5;
  }
  @media (hover:hover) and (pointer:fine) {
    .hologram-card:hover > .hologram-glint { opacity: .86; }
  }
  @media (prefers-reduced-motion: reduce) {
    .loading-shimmer::before,
    .loading-shimmer::after,
    .home-stat.count-complete { animation: none !important; }
    .hologram-card > .hologram-glint { display:none; }
  }


  /* v29.37.3: persistent Discord avatar cache + prioritized visible avatar loading. */
  /* v29.37.2: Web random chart filters and redesigned random chart UI. */
  .play-tag-list {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    margin-left: 7px;
    vertical-align: middle;
    overflow: hidden;
  }

  .play-tag {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 18px;
    padding: 0 6px;
    border: 1px solid rgba(126,171,255,.22);
    border-radius: 999px;
    background: rgba(86,118,185,.10);
    color: #cbdcff;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
  }

  .play-tag.tag-no-arrow {
    border-color: rgba(255,171,92,.34);
    background: linear-gradient(120deg, rgba(255,161,70,.16), rgba(255,104,168,.10));
    color: #ffd7a5;
    box-shadow: 0 0 12px rgba(255,151,80,.10);
  }

  .pp-cell-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    line-height: 1.12;
    white-space: nowrap;
  }

  .pp-cell-main { white-space: nowrap; }

  .pp-base-adjustment {
    margin-top: 3px;
    color: #9fb2d3;
    font-size: 10px;
    font-weight: 720;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .song-ranking-table td.nick .play-tag-list {
    display: flex;
    margin: 4px 0 0;
  }

  @media (max-width: 700px) {
    .play-tag { font-size: 9px; padding-inline: 5px; }
    .pp-base-adjustment { font-size: 9.5px; }
  }

  /* v29.36.5: stable player rows and contained mobile song rankings */
  .profile-table-scroll .all-plays-table,
  .profile-table-scroll .top-plays-table {
    table-layout: var(--profile-ui-table-layout, fixed);
  }

  .profile-table-scroll .all-plays-table tbody tr,
  .profile-table-scroll .top-plays-table tbody tr {
    height: var(--profile-ui-table-row-height, 52px);
  }

  .profile-table-scroll .all-plays-table th,
  .profile-table-scroll .all-plays-table td,
  .profile-table-scroll .top-plays-table th,
  .profile-table-scroll .top-plays-table td {
    box-sizing: border-box;
    font-size: 13px;
  }

  .profile-table-scroll .all-plays-table .title-cell .title,
  .profile-table-scroll .all-plays-table .title-cell .meta {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-table-scroll .all-plays-table .title-cell .title {
    font-size: 13px;
    line-height: 1.25;
  }

  .profile-table-scroll .all-plays-table .title-cell .meta {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.2;
  }

  .top-plays-table .top-play-song-main,
  .top-plays-table .top-play-song-sub {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .song-ranking-table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 18px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .song-ranking-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    table-layout: fixed;
  }

  .song-ranking-table .nick {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* v29.37.0: keep song-ranking player names visually attached to avatars. */
  .song-ranking-table col.song-ranking-col-rank { width: 58px; }
  .song-ranking-table col.song-ranking-col-avatar { width: 44px; }
  .song-ranking-table col.song-ranking-col-player { width: 190px; }

  .song-ranking-table td.avatar-cell {
    width: 44px;
    padding-left: 10px;
    padding-right: 3px;
  }

  .song-ranking-table td.nick {
    padding-left: 3px;
    text-align: left;
  }

  .song-ranking-table tbody tr:hover td.nick {
    color: var(--accent-2);
    text-decoration: underline;
  }

  .song-ranking-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .song-ranking-player,
  .song-ranking-score {
    min-width: 0;
  }

  @media (max-width: 700px) {
    .profile-table-scroll .all-plays-table {
      width: 720px;
      min-width: 720px;
      max-width: 720px;
    }

    .profile-table-scroll .top-plays-table {
      width: 700px;
      min-width: 700px;
      max-width: 700px;
    }

    .profile-table-scroll .all-plays-table tbody tr,
    .profile-table-scroll .top-plays-table tbody tr {
      height: var(--profile-ui-table-row-height, 50px);
    }

    .song-ranking-table-scroll {
      margin-inline: 0;
      border-radius: 15px;
    }

    .song-ranking-table {
      width: 720px;
      min-width: 720px;
      max-width: 720px;
    }

    .song-ranking-row {
      grid-template-columns: 30px minmax(0, 1fr) minmax(72px, auto);
      gap: 8px;
      padding: 10px 11px;
    }

    .song-ranking-position {
      width: 26px;
      max-width: 26px;
      padding: 0;
    }

    .song-ranking-score {
      max-width: 96px;
      overflow: hidden;
    }
  }


  /* v29.37.5: true mobile layouts for Top Plays and per-song rankings. */
  @media (max-width: 700px) {
    /* Top Plays becomes a vertical card list instead of a clipped desktop table. */
    .profile-table-scroll.top-plays-scroll {
      width: 100%;
      max-width: 100%;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .profile-table-scroll .top-plays-table {
      display: block;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      table-layout: auto;
      border-collapse: separate;
    }

    .top-plays-table thead {
      display: none;
    }

    .top-plays-table tbody {
      display: grid;
      gap: 10px;
      width: 100%;
    }

    .profile-table-scroll .top-plays-table tbody tr {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      width: 100%;
      height: auto !important;
      min-height: 0;
      overflow: hidden;
      border: 1px solid rgba(126,171,255,.17);
      border-radius: 15px;
      background:
        linear-gradient(115deg, rgba(255,93,178,.075), rgba(90,126,255,.055) 50%, rgba(76,211,255,.055)),
        rgba(13,21,43,.72);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    }

    .top-plays-table tbody tr:hover {
      background:
        linear-gradient(115deg, rgba(255,93,178,.095), rgba(90,126,255,.070) 50%, rgba(76,211,255,.070)),
        rgba(13,21,43,.78);
    }

    .profile-table-scroll .top-plays-table tbody td {
      display: flex;
      min-width: 0;
      box-sizing: border-box;
      border: 0;
      padding: 9px 7px 10px;
    }

    .profile-table-scroll .top-plays-table td.top-play-song-cell {
      grid-column: 1 / -1;
      display: block;
      padding: 12px 12px 11px;
      border-bottom: 1px solid rgba(126,171,255,.13);
    }

    .top-plays-table .top-play-song-main {
      grid-template-columns: 42px 74px minmax(0, 1fr);
      column-gap: 10px;
      min-height: 24px;
      overflow: visible;
      white-space: normal;
    }

    .top-plays-table .top-play-song-sub {
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: 10px;
      margin-top: 7px;
      padding-left: 0;
      overflow: visible;
      white-space: normal;
    }

    .top-plays-table .top-play-chart-rank {
      min-width: 32px;
      height: 23px;
      padding-inline: 7px;
      font-size: 12.5px;
    }

    .top-plays-table .top-play-difficulty {
      font-size: 12.5px;
    }

    .top-plays-table .top-play-song-title {
      display: block;
      overflow: visible;
      font-size: 14px;
      line-height: 1.32;
      overflow-wrap: anywhere;
      text-overflow: clip;
      white-space: normal;
    }

    .top-plays-table .top-play-stars {
      grid-column: 1;
      align-self: start;
      font-size: 12.5px;
    }

    .top-plays-table .top-play-song-meta {
      grid-column: 2;
      display: block;
      overflow: visible;
      line-height: 1.35;
      overflow-wrap: anywhere;
      text-overflow: clip;
      white-space: normal;
    }

    .top-plays-table .top-play-accuracy,
    .top-plays-table td.pp,
    .top-plays-table .top-play-score {
      position: relative;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 58px;
      padding-inline: 5px;
      font-size: 14.5px;
      line-height: 1.18;
      text-align: center;
      white-space: normal;
    }

    .top-plays-table .top-play-accuracy,
    .top-plays-table td.pp {
      border-right: 1px solid rgba(126,171,255,.10);
    }

    .top-plays-table .top-play-accuracy::before,
    .top-plays-table td.pp::before,
    .top-plays-table .top-play-score::before {
      content: attr(data-label);
      display: block;
      color: #9eafd0;
      font-size: 9.5px;
      font-weight: 720;
      letter-spacing: .02em;
      line-height: 1;
    }

    .top-plays-table .pp-cell-stack {
      width: 100%;
      white-space: normal;
    }

    .top-plays-table .pp-cell-main {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      white-space: normal;
    }

    .top-plays-table .top-play-weighted-pp {
      display: block;
      margin: 2px 0 0;
      font-size: 10.5px;
    }

    .top-plays-table .pp-base-adjustment {
      margin-top: 3px;
      font-size: 9px;
      line-height: 1.15;
      white-space: normal;
    }

    /* Per-song leaderboard becomes a two-line responsive row with no horizontal scroll. */
    .song-ranking-table-scroll {
      width: 100%;
      max-width: 100%;
      overflow: visible;
      border-radius: 0;
    }

    .song-ranking-table {
      display: block;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      table-layout: auto;
      border-collapse: separate;
    }

    .song-ranking-table colgroup,
    .song-ranking-table thead {
      display: none;
    }

    .song-ranking-table tbody {
      display: grid;
      gap: 9px;
      width: 100%;
    }

    .song-ranking-table tbody tr {
      display: grid;
      grid-template-columns: 38px 34px minmax(0, 1fr) minmax(70px, auto);
      grid-template-rows: minmax(30px, auto) minmax(28px, auto);
      grid-template-areas:
        "rank avatar player pp"
        "rank avatar score accuracy";
      column-gap: 8px;
      row-gap: 2px;
      align-items: center;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      padding: 10px 10px;
      overflow: hidden;
      border: 1px solid rgba(126,171,255,.16);
      border-radius: 14px;
      background:
        linear-gradient(115deg, rgba(255,93,178,.06), rgba(82,132,255,.045) 52%, rgba(75,215,255,.045)),
        rgba(12,20,41,.70);
    }

    .song-ranking-table tbody tr:hover {
      background:
        linear-gradient(115deg, rgba(255,93,178,.085), rgba(82,132,255,.065) 52%, rgba(75,215,255,.065)),
        rgba(12,20,41,.76);
    }

    .song-ranking-table tbody td {
      display: flex;
      min-width: 0;
      box-sizing: border-box;
      border: 0;
      padding: 2px 0;
    }

    .song-ranking-table tbody td:nth-child(1) {
      grid-area: rank;
      align-self: stretch;
      align-items: center;
      justify-content: center;
      width: auto;
      font-size: 13px;
      font-weight: 850;
      text-align: center;
    }

    .song-ranking-table tbody td.avatar-cell {
      grid-area: avatar;
      align-self: center;
      justify-content: center;
      width: auto;
      padding: 0;
    }

    .song-ranking-table td.avatar-cell .lb-avatar {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
    }

    .song-ranking-table tbody td.nick {
      grid-area: player;
      display: block;
      overflow: visible;
      padding: 0;
      color: #f4f7ff;
      font-size: 13.5px;
      font-weight: 780;
      line-height: 1.24;
      overflow-wrap: anywhere;
      text-align: left;
      text-overflow: clip;
      white-space: normal;
    }

    .song-ranking-table tbody td.nick > div:first-child {
      overflow: visible;
      overflow-wrap: anywhere;
      text-overflow: clip;
      white-space: normal;
    }

    .song-ranking-table tbody td:nth-child(4) {
      grid-area: pp;
    }

    .song-ranking-table tbody td:nth-child(5) {
      grid-area: score;
    }

    .song-ranking-table tbody td:nth-child(6) {
      grid-area: accuracy;
    }

    .song-ranking-table tbody td:nth-child(4),
    .song-ranking-table tbody td:nth-child(5),
    .song-ranking-table tbody td:nth-child(6) {
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      overflow: hidden;
      color: #f4f7ff;
      font-size: 12.5px;
      font-weight: 780;
      line-height: 1.16;
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .song-ranking-table tbody td:nth-child(4)::before,
    .song-ranking-table tbody td:nth-child(5)::before,
    .song-ranking-table tbody td:nth-child(6)::before {
      content: attr(data-label);
      display: block;
      margin-bottom: 3px;
      color: #91a5c8;
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: .02em;
      line-height: 1;
    }

    .song-ranking-table tbody td:nth-child(4) .pp-cell-stack {
      align-items: flex-end;
      max-width: 100%;
    }

    .song-ranking-table tbody td:nth-child(4) .pp-base-adjustment {
      max-width: 88px;
      overflow: hidden;
      font-size: 8.5px;
      text-overflow: ellipsis;
    }

    .song-ranking-table tbody td:nth-child(n+7) {
      display: none;
    }

    .song-ranking-table td.nick .play-tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      max-height: none;
      margin: 4px 0 0;
      overflow: visible;
    }
  }



  /* Achievement profile-effect visuals, reused from the former automatic prestige decorations. */
  .profile-hero .profile-prestige-accuracy,
  .profile-hero .profile-prestige-plays {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
  }

  .profile-hero.achievement-profile-effect-accuracy-98 .profile-prestige-accuracy,
  .profile-hero.achievement-profile-effect-accuracy-99 .profile-prestige-accuracy,
  .profile-hero.achievement-profile-effect-plays-1000 .profile-prestige-plays,
  .profile-hero.achievement-profile-effect-plays-1500 .profile-prestige-plays,
  .profile-hero.achievement-profile-effect-plays-2000 .profile-prestige-plays {
    display: block;
  }

  .profile-hero .profile-main {
    position: relative;
    z-index: 2;
  }

  /* 98%: a clearly prestigious aurora frame with restrained sparkles. */
  .profile-hero.achievement-profile-effect-accuracy-98 {
    background:
      linear-gradient(145deg, rgba(6,13,31,.72), rgba(18,28,58,.58)) padding-box,
      linear-gradient(118deg, #fff0b5 0%, #ff9bcf 28%, #c99dff 55%, #68e9ff 78%, #c5ffe6 100%) border-box;
    background-size: 100% 100%, 220% 220%;
    box-shadow:
      0 28px 86px rgba(0,0,0,.44),
      0 0 24px rgba(255,120,195,.19),
      0 0 38px rgba(76,224,255,.17),
      inset 0 0 28px rgba(193,145,255,.055);
    animation: profileAccuracyBorderFlow 8s ease-in-out infinite alternate;
  }

  /* 99%+: maximum accuracy tier, intentionally much more ornate than 98%. */
  .profile-hero.achievement-profile-effect-accuracy-99 {
    background:
      linear-gradient(145deg, rgba(5,11,29,.78), rgba(17,25,55,.62)) padding-box,
      linear-gradient(108deg, #fffbd4 0%, #ffd55a 13%, #ff6abb 29%, #b978ff 47%, #39e2ff 65%, #78ffd1 82%, #fff39a 100%) border-box;
    background-size: 100% 100%, 300% 300%;
    box-shadow:
      0 30px 92px rgba(0,0,0,.48),
      0 0 22px rgba(255,202,76,.24),
      0 0 40px rgba(255,74,176,.27),
      0 0 58px rgba(31,219,255,.25),
      0 0 78px rgba(135,63,255,.16),
      inset 0 0 34px rgba(255,255,255,.045);
    animation:
      profileAccuracyBorderMax 5.2s linear infinite,
      profileAccuracyHeroPulse 2.8s ease-in-out infinite alternate;
  }

  .profile-prestige-accuracy::before {
    content: "";
    position: absolute;
    inset: -30%;
    opacity: .32;
    background:
      conic-gradient(from 20deg at 50% 50%, transparent 0 14%, rgba(255,255,255,.08) 17%, transparent 20% 46%, rgba(104,236,255,.10) 49%, transparent 53% 76%, rgba(255,130,206,.09) 80%, transparent 84%);
    animation: profileAccuracyHaloRotate 16s linear infinite;
  }

  .profile-prestige-star {
    position: absolute;
    display: block;
    color: #fff5b2;
    line-height: 1;
    text-shadow:
      0 0 5px rgba(255,255,255,.96),
      0 0 12px rgba(255,202,91,.78),
      0 0 20px rgba(93,229,255,.68);
    opacity: .76;
    animation: profileAccuracySparkle 2.4s ease-in-out infinite;
  }

  .profile-prestige-star.star-1 { left: 4.5%; top: 13%; font-size: 12px; animation-delay: -.2s; }
  .profile-prestige-star.star-2 { left: 20%; bottom: 11%; font-size: 8px; animation-delay: -.9s; }
  .profile-prestige-star.star-3 { right: 19%; top: 18%; font-size: 9px; animation-delay: -1.4s; }
  .profile-prestige-star.star-4 { right: 5%; bottom: 14%; font-size: 13px; animation-delay: -.6s; }
  .profile-prestige-star.star-5 { left: 36%; top: 8%; font-size: 7px; animation-delay: -1.8s; }
  .profile-prestige-star.star-6 { left: 51%; bottom: 7%; font-size: 10px; animation-delay: -1.1s; }
  .profile-prestige-star.star-7 { right: 32%; bottom: 22%; font-size: 7px; animation-delay: -.35s; }
  .profile-prestige-star.star-8 { right: 10%; top: 38%; font-size: 8px; animation-delay: -2s; }

  .profile-hero.achievement-profile-effect-accuracy-98 .profile-prestige-star:nth-child(n+5) {
    display: none;
  }

  .profile-hero.achievement-profile-effect-accuracy-99 .profile-prestige-star {
    opacity: .98;
    text-shadow:
      0 0 6px rgba(255,255,255,1),
      0 0 14px rgba(255,199,69,.92),
      0 0 24px rgba(255,76,182,.72),
      0 0 32px rgba(53,224,255,.76);
    animation-duration: 1.8s;
  }

  .profile-hero.achievement-profile-effect-accuracy-98 .profile-main .avatar {
    border-color: rgba(255,244,187,.62);
    box-shadow:
      0 0 0 3px rgba(206,143,255,.09),
      0 0 24px rgba(255,105,190,.34),
      0 0 38px rgba(72,225,255,.28);
  }

  .profile-hero.achievement-profile-effect-accuracy-99 .profile-main .avatar {
    border-color: rgba(255,248,194,.82);
    box-shadow:
      0 0 0 3px rgba(255,201,70,.12),
      0 0 18px rgba(255,205,71,.48),
      0 0 34px rgba(255,62,173,.44),
      0 0 52px rgba(32,220,255,.40);
    animation: profileAccuracyAvatarPulse 2.4s ease-in-out infinite alternate;
  }

  .profile-hero.achievement-profile-effect-accuracy-98 .profile-name {
    color: #fff;
    text-shadow: 0 0 14px rgba(255,129,199,.18), 0 0 24px rgba(83,224,255,.14);
  }

  .profile-hero.achievement-profile-effect-accuracy-99 .profile-name {
    background: linear-gradient(100deg, #fffbd5 0%, #ffd767 17%, #ff91ca 35%, #d6adff 53%, #74efff 72%, #a7ffdf 88%, #fffbd5 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .35px rgba(255,255,255,.72);
    text-shadow: 0 0 20px rgba(255,105,190,.18), 0 0 30px rgba(73,224,255,.16);
    animation: profileAccuracyNameFlow 5s linear infinite;
  }

  /* Played-chart milestones use soft clouds and floating hearts, independent from accuracy. */
  .profile-prestige-plays::before,
  .profile-prestige-plays::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(18px);
  }

  .profile-prestige-plays::before {
    width: 360px;
    height: 170px;
    left: -110px;
    bottom: -92px;
    background:
      radial-gradient(circle at 24% 40%, rgba(255,170,220,.28), transparent 38%),
      radial-gradient(circle at 54% 34%, rgba(222,177,255,.24), transparent 42%),
      radial-gradient(circle at 80% 56%, rgba(146,228,255,.18), transparent 40%);
  }

  .profile-prestige-plays::after {
    width: 420px;
    height: 190px;
    right: -150px;
    top: -105px;
    background:
      radial-gradient(circle at 28% 62%, rgba(255,185,224,.22), transparent 39%),
      radial-gradient(circle at 56% 52%, rgba(215,174,255,.20), transparent 42%),
      radial-gradient(circle at 82% 42%, rgba(157,231,255,.16), transparent 38%);
  }

  .profile-prestige-heart {
    position: absolute;
    display: block;
    color: rgba(255,197,229,.72);
    font-family: Arial, sans-serif;
    line-height: 1;
    text-shadow:
      0 0 7px rgba(255,184,222,.72),
      0 0 15px rgba(194,144,255,.40);
    opacity: .68;
    animation: profileHeartFloat 4.8s ease-in-out infinite;
  }

  .profile-prestige-heart.heart-1 { left: 3%; bottom: 13%; font-size: 22px; animation-delay: -.4s; }
  .profile-prestige-heart.heart-2 { left: 14%; top: 11%; font-size: 15px; animation-delay: -1.6s; }
  .profile-prestige-heart.heart-3 { left: 31%; bottom: 7%; font-size: 13px; animation-delay: -2.8s; }
  .profile-prestige-heart.heart-4 { right: 30%; top: 9%; font-size: 16px; animation-delay: -.9s; }
  .profile-prestige-heart.heart-5 { right: 15%; bottom: 9%; font-size: 21px; animation-delay: -2.1s; }
  .profile-prestige-heart.heart-6 { right: 3%; top: 31%; font-size: 16px; animation-delay: -3.2s; }
  .profile-prestige-heart.heart-7 { left: 46%; top: 5%; font-size: 12px; animation-delay: -1.25s; }
  .profile-prestige-heart.heart-8 { right: 42%; bottom: 5%; font-size: 14px; animation-delay: -3.7s; }

  .profile-hero.achievement-profile-effect-plays-1000 .profile-prestige-heart:nth-child(n+5) {
    display: none;
  }

  .profile-hero.achievement-profile-effect-plays-1500 .profile-prestige-heart:nth-child(n+7) {
    display: none;
  }

  .profile-hero.achievement-profile-effect-plays-1000 {
    box-shadow:
      0 28px 86px rgba(0,0,0,.42),
      0 0 26px rgba(255,145,207,.13),
      0 0 42px rgba(199,151,255,.09);
  }

  .profile-hero.achievement-profile-effect-plays-1500 {
    box-shadow:
      0 28px 88px rgba(0,0,0,.44),
      0 0 30px rgba(255,133,203,.19),
      0 0 50px rgba(195,139,255,.14),
      0 0 65px rgba(116,220,255,.08);
  }

  .profile-hero.achievement-profile-effect-plays-2000 {
    box-shadow:
      0 30px 92px rgba(0,0,0,.46),
      0 0 34px rgba(255,117,198,.25),
      0 0 58px rgba(190,124,255,.19),
      0 0 80px rgba(103,222,255,.12);
  }

  /* Preserve the stronger accuracy aura when both achievement families are active. */
  .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-1000,
  .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-1500,
  .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-2000 {
    box-shadow:
      0 30px 92px rgba(0,0,0,.46),
      0 0 26px rgba(255,197,80,.16),
      0 0 38px rgba(255,91,188,.24),
      0 0 58px rgba(64,224,255,.21),
      0 0 74px rgba(189,130,255,.11);
  }

  .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-1000,
  .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-1500,
  .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-2000 {
    box-shadow:
      0 32px 96px rgba(0,0,0,.50),
      0 0 24px rgba(255,207,74,.28),
      0 0 44px rgba(255,62,174,.32),
      0 0 66px rgba(31,220,255,.29),
      0 0 88px rgba(140,55,255,.19);
  }

  .profile-hero.achievement-profile-effect-plays-1000 .profile-prestige-plays {
    background:
      radial-gradient(ellipse at 8% 92%, rgba(255,170,221,.10), transparent 24%),
      radial-gradient(ellipse at 88% 4%, rgba(207,166,255,.08), transparent 26%);
  }

  .profile-hero.achievement-profile-effect-plays-1500 .profile-prestige-plays {
    background:
      radial-gradient(ellipse at 6% 92%, rgba(255,156,215,.15), transparent 27%),
      radial-gradient(ellipse at 92% 5%, rgba(204,148,255,.13), transparent 29%),
      radial-gradient(ellipse at 54% 106%, rgba(129,225,255,.08), transparent 30%);
  }

  .profile-hero.achievement-profile-effect-plays-2000 .profile-prestige-plays {
    background:
      radial-gradient(ellipse at 5% 94%, rgba(255,143,210,.20), transparent 29%),
      radial-gradient(ellipse at 94% 3%, rgba(198,132,255,.18), transparent 31%),
      radial-gradient(ellipse at 52% 108%, rgba(116,226,255,.12), transparent 34%),
      radial-gradient(circle at 76% 52%, rgba(255,192,226,.055), transparent 18%);
    animation: profileCloudDrift 6.5s ease-in-out infinite alternate;
  }

  .profile-hero.achievement-profile-effect-plays-1000 .profile-prestige-heart {
    opacity: .72;
  }

  .profile-hero.achievement-profile-effect-plays-1500 .profile-prestige-heart {
    opacity: .82;
    text-shadow: 0 0 8px rgba(255,181,222,.82), 0 0 18px rgba(190,132,255,.52);
    animation-duration: 4.2s;
  }

  .profile-hero.achievement-profile-effect-plays-2000 .profile-prestige-heart {
    color: rgba(255,218,238,.94);
    opacity: .96;
    text-shadow:
      0 0 7px rgba(255,255,255,.80),
      0 0 15px rgba(255,151,210,.92),
      0 0 27px rgba(188,115,255,.66),
      0 0 36px rgba(99,222,255,.36);
    animation-duration: 3.4s;
  }

  .profile-hero.achievement-profile-effect-plays-1000 .profile-main .avatar {
    box-shadow:
      0 0 0 4px rgba(255,180,220,.055),
      0 0 27px rgba(255,137,203,.25),
      0 0 42px rgba(197,146,255,.18);
  }

  .profile-hero.achievement-profile-effect-plays-1500 .profile-main .avatar {
    box-shadow:
      0 0 0 5px rgba(255,178,221,.075),
      0 0 30px rgba(255,122,197,.32),
      0 0 50px rgba(190,129,255,.24);
  }

  .profile-hero.achievement-profile-effect-plays-2000 .profile-main .avatar {
    box-shadow:
      0 0 0 6px rgba(255,196,228,.09),
      0 0 34px rgba(255,107,190,.40),
      0 0 58px rgba(181,109,255,.31),
      0 0 72px rgba(91,218,255,.16);
    animation: profilePlaysAvatarFloat 3.2s ease-in-out infinite alternate;
  }

  /* If accuracy is present, its avatar ring remains the top visual language. */
  .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-1000 .profile-main .avatar,
  .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-1500 .profile-main .avatar,
  .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-2000 .profile-main .avatar {
    border-color: rgba(255,244,187,.66);
    box-shadow:
      0 0 0 4px rgba(255,178,222,.075),
      0 0 24px rgba(255,101,188,.38),
      0 0 43px rgba(91,225,255,.31),
      0 0 58px rgba(192,125,255,.18);
  }

  .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-1000 .profile-main .avatar,
  .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-1500 .profile-main .avatar,
  .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-2000 .profile-main .avatar {
    border-color: rgba(255,248,194,.86);
    box-shadow:
      0 0 0 4px rgba(255,206,75,.12),
      0 0 20px rgba(255,205,71,.50),
      0 0 38px rgba(255,54,170,.48),
      0 0 58px rgba(28,218,255,.44),
      0 0 72px rgba(178,93,255,.19);
    animation: profileAccuracyAvatarPulse 2.4s ease-in-out infinite alternate;
  }

  .profile-play-count-pill {
    gap: 5px;
  }

  .profile-play-count-value,
  .profile-accuracy-value {
    position: relative;
    display: inline-block;
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    isolation: isolate;
  }

  .profile-play-count-value.plays-1000 {
    color: #ffd5eb;
    text-shadow: 0 0 9px rgba(255,132,199,.40), 0 0 16px rgba(189,132,255,.24);
  }

  .profile-play-count-value.plays-1000::before,
  .profile-play-count-value.plays-1500::before,
  .profile-play-count-value.plays-2000::before {
    content: '♡';
    position: absolute;
    left: -11px;
    top: -7px;
    font-size: 8px;
    color: #ffc5e3;
    text-shadow: 0 0 8px rgba(255,125,196,.72);
  }

  .profile-play-count-value.plays-1500 {
    color: #ffe0f0;
    text-shadow: 0 0 10px rgba(255,113,190,.54), 0 0 20px rgba(184,116,255,.35);
  }

  .profile-play-count-value.plays-2000 {
    background: linear-gradient(96deg, #fff0f7 0%, #ff9dce 28%, #d9a6ff 58%, #8ceaff 82%, #fff0f7 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .25px rgba(255,255,255,.70);
    text-shadow: 0 0 10px rgba(255,105,187,.60), 0 0 21px rgba(179,99,255,.44), 0 0 30px rgba(94,222,255,.24);
    animation: profilePlayCountFlow 4s linear infinite;
  }

  .profile-accuracy-stat strong {
    overflow: visible;
  }

  .profile-accuracy-value.acc-98 {
    background: linear-gradient(94deg, #fff0a9 0%, #ff9fd1 30%, #d1a5ff 58%, #76ebff 82%, #c5ffe4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .38px rgba(255,255,255,.84);
    text-shadow: 0 0 6px rgba(255,255,255,.34), 0 0 13px rgba(255,102,188,.50), 0 0 23px rgba(76,223,255,.48);
  }

  .profile-accuracy-value.acc-98::before,
  .profile-accuracy-value.acc-99::before,
  .profile-accuracy-value.acc-99::after {
    position: absolute;
    pointer-events: none;
    line-height: 1;
  }

  .profile-accuracy-value.acc-98::before {
    content: '✦';
    left: -10px;
    top: -6px;
    font-size: 7px;
    color: #fff1a3;
    text-shadow: 0 0 8px rgba(255,255,255,.95), 0 0 13px rgba(79,225,255,.70);
    animation: profileAccuracySparkle 1.8s ease-in-out infinite;
  }

  .profile-accuracy-value.acc-99 {
    padding: 0 .12em;
    background:
      linear-gradient(110deg, transparent 0 36%, rgba(255,255,255,.98) 49%, transparent 62% 100%) 0 0 / 270% 100%,
      linear-gradient(96deg, #fff8b7 0%, #ffd163 14%, #ff78c2 31%, #c88fff 50%, #57e8ff 69%, #91ffdc 86%, #fff8b7 100%) 0 0 / 230% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .43px rgba(255,255,255,.91);
    text-shadow:
      0 0 4px rgba(255,255,255,.46),
      0 0 11px rgba(255,199,69,.66),
      0 0 19px rgba(255,69,177,.72),
      0 0 29px rgba(50,222,255,.72);
    animation: profileAccuracyValueMax 2.8s linear infinite;
  }

  .profile-accuracy-value.acc-99::before {
    content: '✦';
    left: -12px;
    top: -8px;
    font-size: 9px;
    color: #ffe57e;
    text-shadow: 0 0 8px #fff, 0 0 15px rgba(255,186,63,.92), 0 0 22px rgba(255,74,181,.58);
    animation: profileAccuracySparkle 1.25s ease-in-out infinite;
  }

  .profile-accuracy-value.acc-99::after {
    content: '✧';
    right: -12px;
    bottom: -8px;
    font-size: 10px;
    color: #7df2ff;
    text-shadow: 0 0 8px #fff, 0 0 15px rgba(48,220,255,.96), 0 0 22px rgba(151,76,255,.58);
    animation: profileAccuracySparkle 1.25s ease-in-out .6s infinite;
  }

  @keyframes profileAccuracyBorderFlow {
    from { background-position: 0 0, 0% 50%; }
    to { background-position: 0 0, 100% 50%; }
  }

  @keyframes profileAccuracyBorderMax {
    to { background-position: 0 0, -300% -300%; }
  }

  @keyframes profileAccuracyHeroPulse {
    from { filter: saturate(1.03) brightness(1); }
    to { filter: saturate(1.12) brightness(1.025); }
  }

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

  @keyframes profileAccuracySparkle {
    0%, 100% { opacity: .34; transform: scale(.70) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.18) rotate(18deg); }
  }

  @keyframes profileAccuracyAvatarPulse {
    from { transform: scale(1); }
    to { transform: scale(1.018); }
  }

  @keyframes profileAccuracyNameFlow {
    to { background-position: -250% 0; }
  }

  @keyframes profileHeartFloat {
    0%, 100% { transform: translateY(3px) rotate(-4deg) scale(.92); opacity: .48; }
    50% { transform: translateY(-7px) rotate(5deg) scale(1.08); opacity: .94; }
  }

  @keyframes profileCloudDrift {
    from { transform: translate3d(-3px, 2px, 0) scale(1); }
    to { transform: translate3d(4px, -3px, 0) scale(1.018); }
  }

  @keyframes profilePlaysAvatarFloat {
    from { transform: translateY(1px) scale(1); }
    to { transform: translateY(-2px) scale(1.012); }
  }

  @keyframes profilePlayCountFlow {
    to { background-position: -220% 0; }
  }

  @keyframes profileAccuracyValueMax {
    to { background-position: -270% 0, -230% 0; }
  }

  @media (max-width: 620px) {
    .profile-prestige-star.star-5,
    .profile-prestige-star.star-6,
    .profile-prestige-heart.heart-3,
    .profile-prestige-heart.heart-7,
    .profile-prestige-heart.heart-8 {
      display: none;
    }

    .profile-prestige-heart.heart-1 { left: 3%; bottom: 7%; }
    .profile-prestige-heart.heart-5 { right: 6%; bottom: 7%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .profile-hero.achievement-profile-effect-accuracy-98,
    .profile-hero.achievement-profile-effect-accuracy-99,
    .profile-hero.achievement-profile-effect-accuracy-99 .profile-name,
    .profile-hero.achievement-profile-effect-accuracy-99 .profile-main .avatar,
    .profile-hero.achievement-profile-effect-plays-2000 .profile-main .avatar,
    .profile-prestige-accuracy::before,
    .profile-prestige-star,
    .profile-prestige-heart,
    .profile-hero.achievement-profile-effect-plays-2000 .profile-prestige-plays,
    .profile-play-count-value.plays-2000,
    .profile-accuracy-value.acc-98::before,
    .profile-accuracy-value.acc-99,
    .profile-accuracy-value.acc-99::before,
    .profile-accuracy-value.acc-99::after {
      animation: none !important;
    }
  }


  /* PP explanation and simulator page */
  .pp-page {
    display: grid;
    gap: 18px;
  }

  .pp-hero,
  .pp-card,
  .pp-simulator {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(126,171,255,.18);
    border-radius: 24px;
    background:
      radial-gradient(circle at 8% 0%, rgba(255,91,188,.16), transparent 34%),
      radial-gradient(circle at 92% 10%, rgba(61,221,255,.14), transparent 34%),
      linear-gradient(145deg, rgba(10,18,42,.82), rgba(6,10,24,.74));
    box-shadow: 0 24px 78px rgba(0,0,0,.36), inset 0 0 30px rgba(255,255,255,.035);
    backdrop-filter: blur(18px);
  }

  .pp-hero {
    padding: 28px;
  }

  .pp-kicker {
    color: #8ef3ff;
    font-size: 12px;
    letter-spacing: .18em;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(44,220,255,.42);
  }

  .pp-title {
    margin: 10px 0 8px;
    font-size: clamp(28px, 5vw, 54px);
    line-height: 1.02;
    letter-spacing: -.04em;
    background: linear-gradient(102deg, #fff 0%, #ffe58a 18%, #ff8ed0 42%, #7fefff 70%, #d8b4ff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 30px rgba(255,110,206,.13);
  }

  .pp-copy {
    max-width: 880px;
    color: #cfe0ff;
    line-height: 1.85;
    white-space: pre-line;
  }

  .pp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: 18px;
    align-items: start;
  }

  .pp-card,
  .pp-simulator {
    padding: 22px;
  }

  .pp-card h3,
  .pp-simulator h3 {
    margin: 0 0 12px;
    font-size: 20px;
  }

  .pp-card p,
  .pp-card li,
  .pp-simulator p {
    color: #cbd9f6;
    line-height: 1.75;
  }

  .pp-card ul,
  .pp-card ol {
    margin: 10px 0 0 1.25em;
    padding: 0;
  }

  .pp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
  }

  .pp-field {
    display: grid;
    gap: 7px;
  }

  .pp-field label,
  .pp-check-label {
    color: #dce7ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
  }

  .pp-field input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(139,180,255,.22);
    border-radius: 14px;
    background: rgba(2,8,23,.62);
    color: #f7fbff;
    padding: 12px 13px;
    font: inherit;
    outline: none;
    box-shadow: inset 0 0 16px rgba(0,0,0,.16);
  }

  .pp-field input:focus {
    border-color: rgba(96,231,255,.58);
    box-shadow: 0 0 0 3px rgba(48,220,255,.13), inset 0 0 16px rgba(0,0,0,.16);
  }

  .pp-check {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid rgba(139,180,255,.16);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
  }

  .pp-check input {
    width: 18px;
    height: 18px;
    accent-color: #42dfff;
  }

  .pp-result-card {
    margin-top: 16px;
    padding: 18px;
    border-radius: 20px;
    background:
      radial-gradient(circle at 15% 0%, rgba(255,220,97,.19), transparent 40%),
      radial-gradient(circle at 90% 0%, rgba(64,229,255,.16), transparent 38%),
      rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.12);
  }

  .pp-result-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }

  .pp-result-main strong {
    font-size: clamp(34px, 7vw, 58px);
    line-height: 1;
    background: linear-gradient(96deg, #fff7c5, #ff8ccc, #72ebff, #caa4ff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 28px rgba(62,225,255,.16);
  }

  .pp-result-main span {
    color: #8ef3ff;
    font-weight: 900;
  }

  .pp-result-breakdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
  }

  .pp-breakdown-item {
    border-radius: 14px;
    padding: 10px 11px;
    background: rgba(3,9,24,.46);
    border: 1px solid rgba(126,171,255,.12);
  }

  .pp-breakdown-label {
    display: block;
    color: #8ea8d5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .pp-breakdown-value {
    display: block;
    margin-top: 4px;
    color: #f7fbff;
    font-weight: 900;
  }

  .pp-form-note {
    margin-top: 12px;
    color: #93a7cc;
    font-size: 12px;
    line-height: 1.6;
  }

  .pp-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 18px;
  }

  .pp-table th,
  .pp-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(126,171,255,.11);
    text-align: left;
  }

  .pp-table th {
    color: #9fb6e4;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .pp-table td {
    color: #e7efff;
  }

  .pp-pill-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
  }

  .pp-pill {
    border: 1px solid rgba(126,171,255,.18);
    background: rgba(255,255,255,.055);
    border-radius: 999px;
    padding: 7px 10px;
    color: #dce7ff;
    font-size: 12px;
    font-weight: 800;
  }

  @media (max-width: 900px) {
    .pp-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 560px) {
    .pp-hero, .pp-card, .pp-simulator { padding: 18px; }
    .pp-form-grid, .pp-result-breakdown { grid-template-columns: 1fr; }
    .pp-check { grid-column: auto; }
  }


  /* v30.0: Classic Dark UI phase 1.
     Keeps the existing layout and special prestige effects, but moves the shared UI language
     from rounded neon glass to a harder black / deep navy competition-site style. */
  :root {
    --bg: #02040a;
    --surface: rgba(8, 12, 22, .96);
    --surface-2: rgba(12, 18, 32, .98);
    --surface-3: rgba(17, 25, 43, .98);
    --border: rgba(118, 142, 185, .20);
    --border-strong: rgba(105, 178, 255, .56);
    --text: #eef4ff;
    --muted: #8fa1bf;
    --accent: #7bb7ff;
    --accent-2: #55d6ff;
    --accent-3: #8d7cff;
    --accent-4: #6f8dca;
    --good: #7ee2b8;
    --danger: #ff6f82;
    --glow: 0 0 0 rgba(0,0,0,0);
    --glow-pink: 0 0 0 rgba(0,0,0,0);
    --glow-purple: 0 0 0 rgba(0,0,0,0);
    --shadow: 0 18px 54px rgba(0, 0, 0, .48);
    --classic-panel: linear-gradient(180deg, rgba(12, 18, 32, .98), rgba(6, 10, 20, .98));
    --classic-panel-soft: linear-gradient(180deg, rgba(14, 21, 38, .94), rgba(8, 13, 25, .96));
    --classic-line: rgba(107, 132, 176, .22);
    --classic-line-strong: rgba(92, 168, 255, .50);
  }

  html,
  body {
    background:
      radial-gradient(ellipse at 18% 0%, rgba(40, 72, 130, .16), transparent 34%),
      radial-gradient(ellipse at 82% 6%, rgba(57, 44, 112, .11), transparent 30%),
      linear-gradient(180deg, #02040a 0%, #050912 42%, #03050b 100%) !important;
    color: var(--text);
  }

  body::before {
    opacity: .28 !important;
    background:
      linear-gradient(rgba(120, 150, 210, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(120, 150, 210, .028) 1px, transparent 1px),
      radial-gradient(ellipse at 20% 12%, rgba(82, 154, 255, .08), transparent 32%),
      radial-gradient(ellipse at 78% 8%, rgba(116, 92, 210, .06), transparent 28%) !important;
    background-size: 42px 42px, 42px 42px, 100% 100%, 100% 100% !important;
    filter: none !important;
  }

  body::after {
    opacity: .14 !important;
    background:
      linear-gradient(180deg, transparent, rgba(77, 123, 190, .05) 46%, transparent),
      linear-gradient(90deg, rgba(0,0,0,.18), transparent 22%, transparent 78%, rgba(0,0,0,.20)) !important;
    mix-blend-mode: screen;
  }

  .site-topbar,
nav,
.hero-header,
.filters,
table,
.player-header,
.chart-header,
.modal,
footer,
.global-search-results,
.home-hero,
.home-discord-card,
.home-panel,
.activity-card,
.chart-activity-card,
.community-link-card,
.profile-hero,
.profile-section,
.screenshot-card,
.song-hero,
.song-related-card,
.random-hero,
.random-card,
.statistics-hero,
.statistics-card,
.statistics-chart-card,
.history-hero,
.history-card,
.favorites-hero,
.favorite-card,
.leaderboard-mobile-card,
.compact-ranking-row,
.stat-card,
.chart-card,
.hologram-card,
.pp-hero,
.pp-card,
.pp-simulator,
.pp-breakdown-item {
    background: var(--classic-panel) padding-box !important;
    border: 1px solid var(--classic-line) !important;
    border-radius: 8px !important;
    box-shadow:
      0 16px 44px rgba(0, 0, 0, .42),
      inset 0 1px 0 rgba(255, 255, 255, .025) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .home-hero,
  .profile-hero,
  .song-hero,
  .statistics-hero,
  .random-hero,
  .history-hero,
  .favorites-hero,
  .pp-hero {
    background:
      radial-gradient(ellipse at 88% 10%, rgba(69, 133, 220, .12), transparent 34%),
      radial-gradient(ellipse at 8% 98%, rgba(96, 78, 172, .09), transparent 38%),
      var(--classic-panel-soft) padding-box !important;
    border-color: rgba(116, 145, 196, .26) !important;
  }

  .site-topbar::before,
  .site-topbar::after,
  .hero-header::after,
  .player-header::after,
  .chart-header::after,
  .filters::after,
  .home-hero::after,
  .home-discord-card::after,
  .profile-hero::after,
  .song-hero::before,
  .hologram-card > .hologram-glint {
    opacity: .10 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .hero-stage {
    border-radius: 8px !important;
    border: 1px solid rgba(116, 145, 196, .22) !important;
    background: #060a13 !important;
    box-shadow: 0 18px 56px rgba(0,0,0,.46) !important;
  }

  .hero-image,
  .hero-girl-wrap {
    opacity: .72 !important;
  }

  .top-brand,
.top-brand-mark,
.player-header .info .rank-badge,
.pill,
.play-tag,
.pp-pill,
.admin-badge,
.neko-badge {
    border-radius: 5px !important;
  }

  .top-brand:hover {
    background: rgba(112, 154, 220, .08) !important;
    box-shadow: none !important;
  }

  .top-brand-mark {
    border-color: rgba(116, 145, 196, .28) !important;
    background: #050914 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  .top-brand-copy h1,
.hero-content h1,
.profile-name,
.song-hero-title,
.random-hero h2,
.statistics-hero h2,
.pp-hero h2 {
    background: linear-gradient(90deg, #f4f7ff 0%, #a9c7f5 62%, #7fb6ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: none !important;
  }

  nav {
    background: rgba(4, 7, 14, .96) !important;
    border-top: 1px solid rgba(116, 145, 196, .10) !important;
    border-bottom: 1px solid rgba(116, 145, 196, .22) !important;
    gap: 6px !important;
  }

  nav button {
    border-radius: 5px 5px 0 0 !important;
    color: #899ab8 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
  }

  nav button:hover {
    color: #e5efff !important;
    background: rgba(115, 151, 210, .08) !important;
    text-decoration: none !important;
  }

  nav button.active {
    color: #f4f8ff !important;
    background: #0d1526 !important;
    border-color: rgba(103, 170, 255, .34) !important;
    border-bottom-color: #0d1526 !important;
    box-shadow: inset 0 2px 0 rgba(91, 179, 255, .68) !important;
  }

  nav button.active::after {
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: rgba(91, 179, 255, .82) !important;
    box-shadow: none !important;
  }

  .filters input,
  .filters select,
  .top-search,
  input,
  select,
  textarea,
  button.btn,
  .pagination button,
  .share-button,
  .favorite-button,
  .favorite-card-actions button,
  .history-card-actions button,
  footer .links .footer-action {
    background: #070c17 !important;
    border: 1px solid rgba(116, 145, 196, .25) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  .filters input:focus,
  .filters select:focus,
  .top-search:focus-within,
  input:focus,
  select:focus,
  textarea:focus {
    border-color: rgba(91, 179, 255, .62) !important;
    box-shadow: 0 0 0 2px rgba(91, 179, 255, .12) !important;
    outline: none !important;
  }

  button.btn:hover,
  .pagination button:hover,
  .share-button:hover,
  .favorite-button:hover,
  .favorite-card-actions button:hover,
  .history-card-actions button:hover {
    color: #ffffff !important;
    background: #10192b !important;
    border-color: rgba(91, 179, 255, .50) !important;
    transform: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
  }

  th {
    background: #0e1728 !important;
    color: #8da0bf !important;
    border-bottom: 1px solid rgba(116, 145, 196, .22) !important;
    text-shadow: none !important;
  }

  td {
    border-bottom: 1px solid rgba(116, 145, 196, .12) !important;
  }

  tbody tr,
  tbody tr:nth-child(even) {
    background: #080d18 !important;
  }

  tbody tr:hover,
  tbody tr.click:hover {
    background: #101827 !important;
    box-shadow: inset 2px 0 0 rgba(91, 179, 255, .62) !important;
  }

  .home-panel-head,
  .modal header,
  .profile-section h3,
  .pp-card h3,
  .pp-simulator h3 {
    background: #0d1524 !important;
    border-bottom-color: rgba(116, 145, 196, .18) !important;
  }

  .pill,
.play-tag,
.pp-pill,
.player-header .info .rank-badge,
.admin-badge,
.neko-badge {
    background: #0b1220 !important;
    border: 1px solid rgba(116, 145, 196, .24) !important;
    box-shadow: none !important;
  }

  .pp,
.pp-result-main span,
.pp-cell-main,
.home-stat .value,
.statistics-card strong {
    color: #8ec8ff !important;
    text-shadow: none !important;
  }

  .stars,
  .good,
  .pp-breakdown-value {
    color: #b9d8ff !important;
  }

  .global-search-results,
  .modal {
    background: #060a13 !important;
  }

  .search-result-item:hover,
.activity-card:hover,
.chart-activity-card:hover,
.community-link-card:hover,
.song-related-card:hover,
.screenshot-card:hover,
.statistics-chart-card:hover,
.history-card:hover,
.favorite-card:hover,
.random-card:hover {
    background: #101827 !important;
    border-color: rgba(91, 179, 255, .40) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.42) !important;
    transform: translateY(-1px) !important;
  }

  .modal-backdrop {
    background: rgba(0, 0, 0, .76) !important;
  }

  @media (max-width: 760px) {
    .site-topbar,
    .home-hero,
    .profile-hero,
    .song-hero,
    .statistics-hero,
    .random-hero,
    .history-hero,
    .favorites-hero,
    .pp-hero {
      border-radius: 7px !important;
    }
    nav button {
      border-radius: 5px !important;
    }
  }


  /* v30.0.1: Classic Dark UI phase 1.1.
     Sharper competition-site silhouette: keep the phase 1 palette,
reduce rounded corners one step. */
  .site-topbar,
nav,
.hero-header,
.filters,
table,
.player-header,
.chart-header,
.modal,
footer,
.global-search-results,
.home-hero,
.home-discord-card,
.home-panel,
.activity-card,
.chart-activity-card,
.community-link-card,
.profile-hero,
.profile-section,
.screenshot-card,
.song-hero,
.song-related-card,
.random-hero,
.random-card,
.statistics-hero,
.statistics-card,
.statistics-chart-card,
.history-hero,
.history-card,
.favorites-hero,
.favorite-card,
.leaderboard-mobile-card,
.compact-ranking-row,
.stat-card,
.chart-card,
.hologram-card,
.pp-hero,
.pp-card,
.pp-simulator,
.pp-breakdown-item {
    border-radius: 4px !important;
  }

  .hero-stage,
  .top-search,
  .global-search-results,
  .modal,
  .chart-filter-panel,
  .chart-filter-body,
  .chart-filter-summary,
  .home-panel-head,
  .modal header,
  .profile-section h3,
  .pp-card h3,
  .pp-simulator h3 {
    border-radius: 4px !important;
  }

  .filters input,
  .filters select,
  .top-search,
  input,
  select,
  textarea,
  button.btn,
  .pagination button,
  .share-button,
  .favorite-button,
  .favorite-card-actions button,
  .history-card-actions button,
  footer .links .footer-action,
  .leaderboard-mode-button,
  .chart-filter-toggle {
    border-radius: 3px !important;
  }

  .top-brand,
.top-brand-mark,
.player-header .info .rank-badge,
.pill,
.play-tag,
.pp-pill,
.admin-badge,
.neko-badge {
    border-radius: 3px !important;
  }

  nav button {
    border-radius: 3px 3px 0 0 !important;
  }

  @media (max-width: 760px) {
    .site-topbar,
    .home-hero,
    .profile-hero,
    .song-hero,
    .statistics-hero,
    .random-hero,
    .history-hero,
    .favorites-hero,
    .pp-hero {
      border-radius: 4px !important;
    }
    nav button {
      border-radius: 3px !important;
    }
  }


  /* v30.0.2: Classic Dark UI phase 2.
     Competition-page polish: denser ranking rows, harder headers, flatter panels,
     and ScoreSaber-inspired table/list readability without changing the DOM or JS. */
  .site-topbar {
    min-height: 66px !important;
    background: linear-gradient(180deg, #070b14, #03050b) !important;
    border-bottom: 1px solid rgba(116, 145, 196, .22) !important;
  }

  .top-brand {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .top-brand:hover {
    background: rgba(91, 179, 255, .055) !important;
    border-color: rgba(116, 145, 196, .18) !important;
  }

  .top-brand h1,
  .home-title,
  .profile-name,
  .song-hero-title,
  .pp-title {
    letter-spacing: -.035em !important;
  }

  nav {
    padding: 0 10px !important;
    gap: 0 !important;
    background: #050812 !important;
    border-top: 1px solid rgba(116, 145, 196, .14) !important;
    border-bottom: 1px solid rgba(116, 145, 196, .24) !important;
  }

  nav button {
    min-height: 44px !important;
    padding: 0 15px !important;
    border: 0 !important;
    border-left: 1px solid rgba(116, 145, 196, .10) !important;
    border-right: 1px solid rgba(0, 0, 0, .28) !important;
    background: transparent !important;
    color: #99a9c3 !important;
    box-shadow: inset 0 -2px 0 transparent !important;
    text-transform: none !important;
  }

  nav button:hover {
    color: #e9f3ff !important;
    background: rgba(91, 179, 255, .06) !important;
  }

  nav button.active {
    color: #ffffff !important;
    background: linear-gradient(180deg, rgba(20, 31, 54, .86), rgba(9, 15, 29, .96)) !important;
    box-shadow: inset 0 -2px 0 #5bb3ff !important;
  }

  table,
  .leaderboard-table,
  .top-plays-table,
  .pp-table {
    background: #070b14 !important;
    border: 1px solid rgba(116, 145, 196, .18) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    box-shadow: none !important;
  }

  thead,
  .leaderboard-table thead,
  .top-plays-table thead,
  .pp-table thead {
    background: #0b1220 !important;
  }

  th,
  .leaderboard-table th,
  .top-plays-table th,
  .pp-table th {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(116, 145, 196, .22) !important;
    color: #9fb0ca !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
    background: #0b1220 !important;
  }

  td,
  .leaderboard-table td,
  .top-plays-table td,
  .pp-table td {
    border-bottom: 1px solid rgba(116, 145, 196, .105) !important;
    background: #080d18 !important;
  }

  tbody tr:nth-child(even) td,
  .leaderboard-table tbody tr:nth-child(even) td,
  .top-plays-table tbody tr:nth-child(even) td {
    background: #0a101d !important;
  }

  tbody tr:hover td,
  .leaderboard-table tbody tr:hover td,
  .top-plays-table tbody tr:hover td {
    background: #101a2c !important;
    border-bottom-color: rgba(91, 179, 255, .24) !important;
  }

  .leaderboard-table-scroll,
  .profile-table-scroll {
    border: 1px solid rgba(116, 145, 196, .18) !important;
    background: #050812 !important;
    border-radius: 3px !important;
  }

  .leaderboard-table-scroll table,
  .profile-table-scroll table {
    border: 0 !important;
  }

  .rank,
  .mini-rank,
  .leaderboard-mobile-rank {
    color: #6db7ff !important;
    text-shadow: none !important;
    font-variant-numeric: tabular-nums !important;
  }

  .pp,
  .leaderboard-pp-value,
  .leaderboard-average-accuracy,
  .leaderboard-plays-value,
  .top-play-chart-rank,
  .num,
  .value,
  .pp-breakdown-value {
    font-variant-numeric: tabular-nums !important;
  }

  .leaderboard-player,
  .leaderboard-player-cell,
  .leaderboard-mobile-player {
    color: #edf4ff !important;
  }

  .leaderboard-avatar,
.lb-avatar,
.activity-avatar,
.player-avatar,
.search-result-icon {
    border-radius: 4px !important;
    border: 1px solid rgba(116, 145, 196, .28) !important;
    background: #050812 !important;
    box-shadow: none !important;
  }

  .leaderboard-mobile-card {
    padding: 12px 13px !important;
    gap: 9px !important;
    background: #080d18 !important;
    border-color: rgba(116, 145, 196, .20) !important;
    box-shadow: none !important;
  }

  .leaderboard-mobile-metric {
    background: #0b1220 !important;
    border: 1px solid rgba(116, 145, 196, .14) !important;
    border-radius: 3px !important;
  }

  .home-panel,
  .profile-section,
  .song-panel,
  .statistics-card,
  .statistics-chart-card,
  .random-card,
  .favorite-card,
  .history-card,
  .chart-card,
  .song-related-card,
  .screenshot-card,
  .activity-card,
  .chart-activity-card,
  .community-link-card,
  .pp-card,
  .pp-simulator {
    background: #080d18 !important;
    border: 1px solid rgba(116, 145, 196, .18) !important;
    box-shadow: none !important;
  }

  .home-panel-head,
  .profile-section h3,
  .song-panel h3,
  .statistics-card h3,
  .statistics-chart-card h3,
  .pp-card h3,
  .pp-simulator h3 {
    background: #0b1220 !important;
    border-bottom: 1px solid rgba(116, 145, 196, .20) !important;
    color: #e7f0ff !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
  }

  .song-stat,
.home-stat,
.random-stat,
.stat-card,
.pp-breakdown-item,
.chart-filter-summary,
.chart-filter-body,
.profile-filterbar {
    background: #0b1220 !important;
    border: 1px solid rgba(116, 145, 196, .16) !important;
    box-shadow: none !important;
  }

  .song-stat strong,
.home-stat strong,
.random-stat strong,
.stat-card .value,
.activity-values strong {
    color: #f3f7ff !important;
    text-shadow: none !important;
  }

  .mini-play,
  .song-ranking-row,
  .compact-ranking-row,
  .search-result-item {
    background: #080d18 !important;
    border-bottom: 1px solid rgba(116, 145, 196, .12) !important;
    transition: background-color .14s ease, border-color .14s ease !important;
  }

  .mini-play:hover,
  .song-ranking-row:hover,
  .compact-ranking-row:hover,
  .search-result-item:hover {
    background: #101a2c !important;
    border-bottom-color: rgba(91, 179, 255, .26) !important;
    transform: none !important;
  }

  .chart-card,
  .favorite-card,
  .history-card,
  .random-card,
  .song-related-card {
    border-left: 2px solid rgba(91, 179, 255, .28) !important;
  }

  .chart-card:hover,
  .favorite-card:hover,
  .history-card:hover,
  .random-card:hover,
  .song-related-card:hover {
    border-color: rgba(116, 145, 196, .26) !important;
    border-left-color: rgba(91, 179, 255, .68) !important;
    background: #0c1424 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .filters,
  .chart-filter-panel,
  .top-search,
  .global-search-results,
  .modal,
  .toast {
    background: #070b14 !important;
    border: 1px solid rgba(116, 145, 196, .20) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .45) !important;
  }

  input,
  select,
  textarea,
  .filters input,
  .filters select,
  .profile-filterbar input,
  .profile-filterbar select {
    background: #050812 !important;
    border: 1px solid rgba(116, 145, 196, .22) !important;
    color: #edf4ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: rgba(91, 179, 255, .58) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(91, 179, 255, .10) !important;
  }

  button.btn,
  .share-button,
  .favorite-button,
  .pagination button,
  .leaderboard-mode-button,
  .chart-filter-toggle,
  .home-discord-button,
  footer .links .footer-action {
    background: #0b1220 !important;
    border: 1px solid rgba(116, 145, 196, .24) !important;
    box-shadow: none !important;
    color: #dfeaff !important;
  }

  button.btn:hover,
  .share-button:hover,
  .favorite-button:hover,
  .pagination button:hover,
  .leaderboard-mode-button:hover,
  .chart-filter-toggle:hover,
  .home-discord-button:hover,
  footer .links .footer-action:hover {
    background: #101a2c !important;
    border-color: rgba(91, 179, 255, .50) !important;
    transform: none !important;
  }

  .leaderboard-mode-button.active,
  .profile-tab.active,
  .song-tab.active,
  .random-filter-chip.active {
    background: #111d31 !important;
    border-color: rgba(91, 179, 255, .58) !important;
    color: #ffffff !important;
    box-shadow: inset 2px 0 0 #5bb3ff !important;
  }

  .pill,
.play-tag,
.pp-pill,
.admin-badge,
.neko-badge,
.song-hero-info-row .song-badges .pill {
    background: #0b1220 !important;
    border: 1px solid rgba(116, 145, 196, .22) !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .admin-badge {
    border-color: rgba(255, 198, 93, .52) !important;
    color: #ffd27b !important;
  }

  .home-hero,
  .profile-hero,
  .song-hero,
  .statistics-hero,
  .random-hero,
  .history-hero,
  .favorites-hero,
  .pp-hero {
    background:
      linear-gradient(180deg, rgba(12, 18, 32, .98), rgba(5, 8, 18, .98)) padding-box,
      linear-gradient(90deg, rgba(91, 179, 255, .42), rgba(116, 145, 196, .16)) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
  }

  .home-hero::before,
  .profile-hero::before,
  .song-hero::before,
  .statistics-hero::before,
  .random-hero::before,
  .history-hero::before,
  .favorites-hero::before,
  .pp-hero::before {
    opacity: .18 !important;
  }

  @media (max-width: 700px) {
    nav {
      gap: 6px !important;
      padding: 8px !important;
    }

    nav button {
      border: 1px solid rgba(116, 145, 196, .14) !important;
      min-height: 39px !important;
      padding: 0 11px !important;
    }

    .leaderboard-table-scroll,
    .profile-table-scroll {
      border: 0 !important;
      background: transparent !important;
    }
  }


  /* v30.0.3: Classic Dark UI phase 3.
     Profile and song-detail hardening: flatter heroes, blockier avatars/tabs,
     clearer stat modules, and more competition-site styled Top Plays / chart rows. */
  .profile-hero,
  .song-hero {
    min-height: 0 !important;
    padding: 22px 24px !important;
    background:
      linear-gradient(180deg, #090f1c, #050812) padding-box,
      linear-gradient(90deg, rgba(91, 179, 255, .48), rgba(116, 145, 196, .12)) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  .profile-hero::after,
  .song-hero::before {
    opacity: .10 !important;
    filter: none !important;
  }

  .profile-hero-bg {
    opacity: .12 !important;
    filter: blur(24px) saturate(1.05) !important;
  }

  .profile-main {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .profile-avatar-wrap,
  .profile-main .avatar {
    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
  }

  .profile-main .avatar {
    border-radius: 4px !important;
    border: 1px solid rgba(116, 145, 196, .34) !important;
    background: #050812 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;
  }

  .profile-name,
  .song-hero-title {
    color: #f5f8ff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-shadow: none !important;
  }

  .profile-rank-line {
    gap: 6px !important;
    margin-top: 9px !important;
  }

  .profile-rank-line .rank-badge,
  .profile-rank-line .profile-hmd-pill,
  .profile-rank-line .neko-badge,
  .profile-rank-line .admin-badge,
  .profile-rank-line .inactive-badge,
  .song-badges .pill,
  .song-hero-info-row .song-badges .pill {
    min-height: 28px !important;
    padding: 0 9px !important;
    border-radius: 3px !important;
    background: #0b1220 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    letter-spacing: .045em !important;
  }

  .profile-bio-inline {
    margin-top: 10px !important;
    padding: 8px 11px !important;
    border-radius: 3px !important;
    border-left: 2px solid rgba(91, 179, 255, .56) !important;
    background: #070b14 !important;
    color: #cbd7ea !important;
  }

  .song-stat-grid {
    gap: 8px !important;
    margin-top: 18px !important;
  }

  .song-stat,
.home-stat,
.random-stat,
.stat-card {
    padding: 11px 12px !important;
    border-radius: 3px !important;
    background: #070b14 !important;
    border: 1px solid rgba(116, 145, 196, .18) !important;
    border-left: 2px solid rgba(91, 179, 255, .34) !important;
    box-shadow: none !important;
  }

  .song-stat span,
.home-stat span,
.random-stat span,
.stat-card .label {
    color: #8f9eb8 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
  }

  .song-stat strong,
.home-stat strong,
.random-stat strong,
.stat-card .value {
    margin-top: 5px !important;
    color: #f4f7ff !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: -.015em !important;
  }

  .profile-tabs,
  .song-tabs {
    gap: 0 !important;
    padding: 0 !important;
    margin: 12px 0 16px !important;
    border-radius: 3px !important;
    background: #050812 !important;
    border: 1px solid rgba(116, 145, 196, .18) !important;
    backdrop-filter: none !important;
  }

  .profile-tab,
  .song-tab {
    min-height: 40px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-right: 1px solid rgba(116, 145, 196, .12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #9aa9c2 !important;
    box-shadow: inset 0 -2px 0 transparent !important;
    font-weight: 850 !important;
  }

  .profile-tab:hover,
  .song-tab:hover {
    background: #0b1220 !important;
    color: #e7f0ff !important;
  }

  .profile-tab.active,
  .song-tab.active {
    background: #0e1728 !important;
    color: #ffffff !important;
    box-shadow: inset 0 -2px 0 #5bb3ff !important;
  }

  .profile-section,
  .song-panel,
  .statistics-card,
  .statistics-chart-card,
  .pp-card,
  .pp-simulator {
    border-radius: 3px !important;
    background: #070b14 !important;
    border-color: rgba(116, 145, 196, .18) !important;
  }

  .profile-section h3,
  .song-panel h3,
  .statistics-card h3,
  .statistics-chart-card h3,
  .pp-card h3,
  .pp-simulator h3 {
    padding: 12px 14px !important;
    border-radius: 0 !important;
    background: #0b1220 !important;
    border-bottom: 1px solid rgba(116, 145, 196, .20) !important;
    color: #dfe9ff !important;
    font-size: 12px !important;
  }

  .profile-table-scroll,
  .leaderboard-table-scroll {
    border-radius: 3px !important;
    background: #050812 !important;
  }

  .top-plays-table th,
  .top-plays-table td,
  .leaderboard-table th,
  .leaderboard-table td,
  .pp-table th,
  .pp-table td {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  .top-plays-table .top-play-song-main,
  .top-plays-table .top-play-song-sub {
    grid-template-columns: 42px 74px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }

  .top-plays-table .top-play-chart-rank,
  .song-ranking-position,
  .mini-rank,
  .rank-badge {
    border-radius: 3px !important;
    background: #0b1220 !important;
    border: 1px solid rgba(116, 145, 196, .24) !important;
    color: #74bdff !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .top-plays-table .top-play-song-title,
  .song-ranking-name,
  .song-related-title,
  .chart-card .title,
  .favorite-card-title,
  .history-card-title {
    color: #f3f7ff !important;
    font-weight: 900 !important;
  }

  .top-plays-table .top-play-song-meta,
  .top-plays-table .top-play-difficulty,
  .top-plays-table .top-play-stars,
  .song-ranking-sub,
  .song-related-meta {
    color: #9aa9c2 !important;
    text-shadow: none !important;
  }

  .top-plays-table .top-play-accuracy,
  .top-plays-table td.pp,
  .top-plays-table .top-play-score,
  .song-ranking-score strong {
    color: #eef5ff !important;
    font-weight: 900 !important;
  }

  .top-plays-table .top-play-weighted-pp {
    color: #7f8da7 !important;
    font-size: 11px !important;
  }

  .song-overview-grid,
  .song-statistics-grid,
  .profile-overview-grid {
    gap: 14px !important;
  }

  .song-ranking-row,
  .song-recent-row,
  .mini-play,
  .compact-ranking-row,
  .search-result-item {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    background: #080d18 !important;
    border-bottom: 1px solid rgba(116, 145, 196, .12) !important;
  }

  .song-ranking-row:hover,
  .song-recent-row:hover,
  .mini-play:hover,
  .compact-ranking-row:hover,
  .search-result-item:hover,
  .top-plays-table tbody tr:hover td,
  .leaderboard-table tbody tr:hover td {
    background: #101a2c !important;
    box-shadow: inset 2px 0 0 #5bb3ff !important;
  }

  .song-related-grid {
    gap: 10px !important;
    padding: 12px !important;
  }

  .song-related-card,
  .chart-card,
  .favorite-card,
  .history-card,
  .random-card {
    border-radius: 3px !important;
    background: #080d18 !important;
    border-left: 2px solid rgba(91, 179, 255, .34) !important;
  }

  .song-ranking-footer {
    background: #070b14 !important;
    border-top: 1px solid rgba(116, 145, 196, .12) !important;
  }

  .song-ranking-more,
  .chart-filter-toggle,
  .share-button,
  .favorite-button,
  .home-discord-button,
  button.btn,
  .pagination button {
    border-radius: 3px !important;
    background: #0b1220 !important;
    border-color: rgba(116, 145, 196, .24) !important;
  }

  .pp-result-card {
    border-radius: 3px !important;
    background: #070b14 !important;
    border: 1px solid rgba(116, 145, 196, .18) !important;
  }

  .pp-result-main strong {
    color: #f5f8ff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-shadow: none !important;
  }

  @media (max-width: 700px) {
    .profile-main {
      grid-template-columns: 72px minmax(0, 1fr) !important;
      gap: 12px !important;
      align-items: start !important;
    }

    .profile-avatar-wrap,
    .profile-main .avatar {
      width: 72px !important;
      height: 72px !important;
      min-width: 72px !important;
    }

    .profile-hero,
    .song-hero {
      padding: 16px !important;
    }

    .profile-tabs,
    .song-tabs {
      gap: 4px !important;
      padding: 5px !important;
    }

    .profile-tab,
    .song-tab {
      border: 1px solid rgba(116, 145, 196, .12) !important;
      border-radius: 3px !important;
      min-height: 36px !important;
    }
  }


  /* v30.0.4: Home overview stat readability fix.
     Phase 3 tightened generic stat spans too much; home overview values are span.value,
     so restore them as prominent dashboard numbers while keeping the classic dark panel style. */
  .home-stats .home-stat {
    min-height: 88px !important;
    padding: 15px 16px !important;
  }

  .home-stats .home-stat .label {
    display: block !important;
    color: #9cacC6 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
  }

  .home-stats .home-stat .value {
    display: block !important;
    margin-top: 8px !important;
    color: #f4f8ff !important;
    font-size: clamp(24px, 2.55vw, 34px) !important;
    line-height: 1.02 !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    font-variant-numeric: tabular-nums !important;
    text-shadow: none !important;
  }

  .home-stats .home-stat .value[data-count-target] {
    min-width: 3ch !important;
  }

  @media (max-width: 560px) {
    .home-stats .home-stat {
      min-height: 78px !important;
      padding: 13px 12px !important;
    }
    .home-stats .home-stat .label {
      font-size: 10px !important;
      letter-spacing: .045em !important;
    }
    .home-stats .home-stat .value {
      font-size: 25px !important;
    }
  }

  /* v30.0.5: Leaderboard mode switch unified segmented control.
     The PP / accuracy / played-chart / score selector reads as one control. */
  #tab-leaderboard .leaderboard-toolbar {
    padding: 8px 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #tab-leaderboard .leaderboard-mode-switch {
    display: inline-grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: min(100%, 540px) !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #070b14 !important;
    border: 1px solid rgba(105, 133, 184, .24) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
  }

  #tab-leaderboard .leaderboard-mode-button {
    position: relative !important;
    min-height: 34px !important;
    padding: 7px 14px !important;
    border: 0 !important;
    border-right: 1px solid rgba(105, 133, 184, .14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #9eacc5 !important;
    text-shadow: none !important;
    transform: none !important;
  }

  #tab-leaderboard .leaderboard-mode-button:last-child {
    border-right: 0 !important;
  }

  #tab-leaderboard .leaderboard-mode-button:hover {
    background: #0b1220 !important;
    color: #e9f2ff !important;
    border-color: rgba(105, 133, 184, .14) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #tab-leaderboard .leaderboard-mode-button.active {
    background: #101a2c !important;
    color: #ffffff !important;
    border-color: rgba(105, 133, 184, .14) !important;
    box-shadow: inset 0 -2px 0 #5bb3ff !important;
    text-shadow: none !important;
  }

  #tab-leaderboard .leaderboard-mode-button.active::before {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(91,179,255,.45), transparent);
    pointer-events: none;
  }

  #tab-leaderboard .leaderboard-mode-button:focus-visible {
    outline: 1px solid rgba(91, 179, 255, .72) !important;
    outline-offset: -2px !important;
  }

  @media (max-width: 700px) {
    #tab-leaderboard .leaderboard-toolbar {
      padding: 6px 0 !important;
      gap: 8px !important;
    }

    #tab-leaderboard .leaderboard-mode-switch {
      width: 100% !important;
    }

    #tab-leaderboard .leaderboard-mode-button {
      min-height: 32px !important;
      padding: 7px 5px !important;
    }
  }


  /* v30.0.6: Classic Dark UI phase 4.
     Unify page toolbars, filters, tabs, search dropdowns, and utility panels so they read
     as one dark competition interface instead of many separately framed mini cards. */
  :root {
    --classic-panel: #070b14;
    --classic-panel-2: #0a101d;
    --classic-panel-3: #0e1727;
    --classic-line: rgba(105, 133, 184, .22);
    --classic-line-soft: rgba(105, 133, 184, .12);
    --classic-blue: #5bb3ff;
  }

  .site-topbar {
    background: linear-gradient(180deg, #070b14 0%, #050811 100%) !important;
    border-bottom: 1px solid var(--classic-line) !important;
    box-shadow: none !important;
  }

  nav {
    padding-top: 0 !important;
    background: #050811 !important;
    border-top: 1px solid rgba(105, 133, 184, .08) !important;
    border-bottom: 1px solid var(--classic-line) !important;
    box-shadow: none !important;
  }

  nav button {
    min-height: 36px !important;
    border: 0 !important;
    border-right: 1px solid rgba(105, 133, 184, .10) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #9aa9c4 !important;
  }

  nav button:first-child {
    border-left: 1px solid rgba(105, 133, 184, .10) !important;
  }

  nav button:hover {
    background: #0a101d !important;
    color: #edf5ff !important;
    text-decoration: none !important;
  }

  nav button.active {
    top: 0 !important;
    color: #ffffff !important;
    background: #101a2c !important;
    box-shadow: inset 0 -2px 0 var(--classic-blue) !important;
  }

  .filters:not(.leaderboard-toolbar),
  .profile-tabs,
  .song-tabs,
  .random-filter-panel,
  .pp-simulator,
  .pp-card,
  .modal,
  .global-search-results {
    background: var(--classic-panel) !important;
    border: 1px solid var(--classic-line) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .filters:not(.leaderboard-toolbar) {
    width: fit-content !important;
    max-width: 100% !important;
    padding: 8px !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  .filters:not(.leaderboard-toolbar) input,
  .filters:not(.leaderboard-toolbar) select,
  .filters:not(.leaderboard-toolbar) .btn,
  .filters:not(.leaderboard-toolbar) button.btn {
    min-height: 34px !important;
    border: 1px solid rgba(105, 133, 184, .13) !important;
    border-radius: 2px !important;
    background: var(--classic-panel-2) !important;
    color: #dce8fa !important;
    box-shadow: none !important;
  }

  .filters:not(.leaderboard-toolbar) input:focus,
  .filters:not(.leaderboard-toolbar) select:focus,
  .top-search-input:focus,
  input:focus,
  select:focus {
    outline: 1px solid rgba(91, 179, 255, .52) !important;
    outline-offset: 0 !important;
    border-color: rgba(91, 179, 255, .42) !important;
  }

  .filters .right {
    align-self: center !important;
    padding: 0 4px !important;
  }

  .profile-tabs,
  .song-tabs {
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .profile-tab,
  .song-tab {
    min-height: 36px !important;
    border: 0 !important;
    border-right: 1px solid rgba(105, 133, 184, .12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #9aa9c4 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .profile-tab:last-child,
  .song-tab:last-child {
    border-right: 0 !important;
  }

  .profile-tab:hover,
  .song-tab:hover {
    background: #0a101d !important;
    color: #edf5ff !important;
  }

  .profile-tab.active,
  .song-tab.active {
    color: #ffffff !important;
    background: #101a2c !important;
    box-shadow: inset 0 -2px 0 var(--classic-blue) !important;
  }

  .global-search-results {
    padding: 6px !important;
    background: #050811 !important;
  }

  .global-search-results::before,
  .global-search-results::after,
  .pp-card::before,
  .pp-simulator::before,
  .random-filter-panel::before,
  .profile-tabs::before,
  .song-tabs::before {
    display: none !important;
  }

  .global-search-results button {
    border-radius: 2px !important;
    border-color: rgba(105, 133, 184, .10) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .global-search-results button:hover {
    background: #0d1626 !important;
    border-color: rgba(91, 179, 255, .25) !important;
  }

  .home-stat,
.stat-card,
.chart-card,
.favorite-card,
.history-card,
.compact-ranking-row,
.screenshot-card {
    background: linear-gradient(180deg, #0a101d 0%, #070b14 100%) !important;
    border-color: var(--classic-line-soft) !important;
    box-shadow: none !important;
  }

  .home-stat::before,
.home-stat::after,
.stat-card::before,
.chart-card::before,
.favorite-card::before,
.history-card::before,
.compact-ranking-row::before {
    opacity: .18 !important;
  }

  .random-filter-header,
.pp-simulator,
.pp-card,
.pp-form-grid {
    border-color: var(--classic-line-soft) !important;
  }

  .pp-simulator input,
.pp-simulator select,
.random-filter-panel input,
.random-filter-panel select {
    border-radius: 2px !important;
    background: #0a101d !important;
    border-color: rgba(105, 133, 184, .16) !important;
    box-shadow: none !important;
  }

  .btn,
button.btn,
.share-button,
.footer-action {
    border-radius: 2px !important;
    box-shadow: none !important;
  }

  .section-eyebrow {
    letter-spacing: .11em !important;
  }

  @media (max-width: 720px) {
    nav {
      overflow-x: auto !important;
      scrollbar-width: none;
    }

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

    .filters:not(.leaderboard-toolbar) {
      width: 100% !important;
    }

    .filters:not(.leaderboard-toolbar) input,
    .filters:not(.leaderboard-toolbar) select,
    .filters:not(.leaderboard-toolbar) .btn,
    .filters:not(.leaderboard-toolbar) button.btn {
      flex: 1 1 150px !important;
    }

    .profile-tabs,
    .song-tabs {
      overflow-x: auto !important;
      scrollbar-width: none;
    }

    .profile-tabs::-webkit-scrollbar,
    .song-tabs::-webkit-scrollbar {
      display: none;
    }
  }


  /* v30.0.7 Classic Dark UI Phase 4.1: route back buttons */
  #player-detail-view > .route-breadcrumb,
  #song-detail-view > .route-breadcrumb {
    margin-bottom: 8px;
  }

  button.route-back-button,
  .route-back-button,
  #player-back.back,
  #song-back.back {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    margin: 0 0 14px;
    padding: 0 13px;
    border: 1px solid rgba(92, 122, 174, .30) !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, rgba(12, 18, 32, .98), rgba(7, 11, 21, .98)) !important;
    color: #aebbd0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    user-select: none;
    vertical-align: top;
    transform: none !important;
    transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  }

  #player-back.back::before,
  #song-back.back::before {
    content: "";
    width: 3px;
    align-self: stretch;
    margin: 0 4px 0 -13px;
    background: rgba(87, 144, 232, .70);
    box-shadow: none;
  }

  button.route-back-button:hover,
  .route-back-button:hover,
  #player-back.back:hover,
  #song-back.back:hover {
    color: #f2f6ff !important;
    border-color: rgba(103, 153, 232, .55) !important;
    background: linear-gradient(180deg, rgba(15, 24, 43, .98), rgba(9, 15, 28, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(87,144,232,.08) !important;
    transform: none !important;
  }

  button.route-back-button:focus-visible,
  #player-back.back:focus-visible,
  #song-back.back:focus-visible {
    outline: 2px solid rgba(87, 144, 232, .65);
    outline-offset: 2px;
  }

  /* v30.0.8 Classic Dark UI Phase 5: overlays, galleries, toasts and scroll polish */
  :root {
    --classic-overlay: rgba(0, 3, 10, .86);
    --classic-panel-deep: #050914;
    --classic-panel-strong: #070c16;
    --classic-panel-mid: #0a101d;
    --classic-line: rgba(92, 122, 174, .30);
    --classic-line-faint: rgba(92, 122, 174, .16);
    --classic-text-dim: #8793a8;
  }

  html {
    scrollbar-color: rgba(92, 122, 174, .48) #050914;
    scrollbar-width: thin;
  }

  ::-webkit-scrollbar {
    width: 11px;
    height: 11px;
  }

  ::-webkit-scrollbar-track {
    background: #050914;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(92,122,174,.58), rgba(54,76,118,.54));
    border: 3px solid #050914;
    border-radius: 0;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(111,148,214,.72), rgba(67,96,149,.66));
  }

  .modal-backdrop,
  .image-lightbox {
    background:
      radial-gradient(circle at 50% 0%, rgba(40, 70, 120, .13), transparent 42%),
      rgba(0, 3, 10, .88) !important;
    backdrop-filter: blur(10px) saturate(.92) !important;
  }

  .modal,
  .image-lightbox-panel {
    border: 1px solid rgba(92, 122, 174, .32) !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #070c16 0%, #050914 100%) !important;
    box-shadow: 0 34px 110px rgba(0,0,0,.74), inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  .modal header,
  .image-lightbox-head {
    min-height: 48px;
    border-bottom: 1px solid rgba(92, 122, 174, .22) !important;
    background: linear-gradient(180deg, rgba(12, 18, 32, .96), rgba(7, 12, 23, .96)) !important;
  }

  .modal header h3,
  .image-lightbox-title strong {
    color: #f2f6ff !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
  }

  .modal .body,
  .image-lightbox-panel {
    scrollbar-color: rgba(92, 122, 174, .46) #050914;
    scrollbar-width: thin;
  }

  .modal .body {
    background: #050914 !important;
    color: #c8d2e4 !important;
  }

  .modal .body h3,
  .modal .body h4 {
    color: #e8efff !important;
    text-shadow: none !important;
  }

  .modal .body p,
  .modal .body li {
    color: #aebbd0 !important;
  }

  .modal .body hr {
    border-color: rgba(92, 122, 174, .18) !important;
  }

  .modal .close,
  .image-lightbox button,
  #lightbox-close,
  #lightbox-open-song {
    min-height: 34px !important;
    border: 1px solid rgba(92, 122, 174, .30) !important;
    border-radius: 2px !important;
    background: linear-gradient(180deg, #0c1322, #070c16) !important;
    color: #aebbd0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
    font-weight: 750 !important;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
  }

  .modal .close {
    width: 34px;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .modal .close:hover,
  .image-lightbox button:hover,
  #lightbox-close:hover,
  #lightbox-open-song:hover {
    color: #f2f6ff !important;
    border-color: rgba(103, 153, 232, .55) !important;
    background: linear-gradient(180deg, #101a2e, #09101e) !important;
  }

  .image-lightbox {
    padding: 22px !important;
  }

  .image-lightbox-foot {
    min-height: 46px;
    border-top: 1px solid rgba(92, 122, 174, .22) !important;
    background: linear-gradient(180deg, rgba(7, 12, 23, .96), rgba(5, 9, 18, .96)) !important;
  }

  .image-lightbox-title span,
  .image-lightbox-foot .muted,
  #lightbox-score {
    color: #8793a8 !important;
  }

  .image-lightbox-image {
    background:
      linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.018) 75%),
      linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.018) 75%),
      #02050e !important;
    background-position: 0 0, 8px 8px, 0 0 !important;
    background-size: 16px 16px, 16px 16px, auto !important;
  }

  .screenshot-grid {
    gap: 10px !important;
  }

  .screenshot-card {
    border: 1px solid rgba(92, 122, 174, .22) !important;
    border-radius: 3px !important;
    background: #070c16 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .screenshot-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: rgba(87, 144, 232, .0);
    transition: background .16s ease;
    z-index: 2;
    pointer-events: none;
  }

  .screenshot-card:hover {
    border-color: rgba(103, 153, 232, .48) !important;
    background: #091120 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
    transform: none !important;
  }

  .screenshot-card:hover::before {
    background: rgba(87, 144, 232, .76);
  }

  .screenshot-thumb {
    background: #040812 !important;
    border-bottom: 1px solid rgba(92, 122, 174, .18) !important;
  }

  .screenshot-card:hover .screenshot-thumb img {
    transform: none !important;
    filter: brightness(1.06) saturate(1.02) !important;
  }

  .screenshot-card-body {
    background: linear-gradient(180deg, rgba(10,16,29,.98), rgba(7,12,22,.98)) !important;
    padding: 10px 12px 12px !important;
  }

  .screenshot-card-title {
    color: #e8efff !important;
    font-size: 13px !important;
  }

  .screenshot-card-meta .badge,
  .screenshot-card-meta span {
    border-radius: 2px !important;
  }

  .toast {
    bottom: 22px !important;
    max-width: min(520px, calc(100vw - 28px));
    border: 1px solid rgba(92, 122, 174, .34) !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #0b1322, #060b15) !important;
    color: #f2f6ff !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.66), inset 3px 0 0 rgba(87, 144, 232, .75) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .loading-shimmer,
  .empty.loading-shimmer {
    border: 1px solid rgba(92, 122, 174, .18) !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #090f1b, #060b15) !important;
    color: #8793a8 !important;
    box-shadow: none !important;
  }

  .loading-shimmer::before,
  .loading-shimmer::after {
    opacity: .18 !important;
  }

  .global-search-results {
    border-radius: 2px !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.60) !important;
  }

  .global-search-results button,
.search-result-item {
    border-radius: 0 !important;
  }

  .global-search-results button + button {
    border-top: 1px solid rgba(92, 122, 174, .12) !important;
  }

  .favorite-card-actions button,
.history-card button,
.chart-card button:not(.favorite-button) {
    border-radius: 2px !important;
    box-shadow: none !important;
  }

  @media (max-width: 580px) {
    .image-lightbox {
      padding: 8px !important;
    }

    .image-lightbox-panel {
      border-radius: 2px !important;
      max-height: calc(100vh - 16px) !important;
    }

    .image-lightbox-head,
    .image-lightbox-foot {
      padding: 10px 11px !important;
    }
  }


  /* v30.0.9: Classic Dark UI Phase 6.
     Leaderboard competition layout pass.  Make the ranking table feel like one
     ScoreSaber-style data surface: stronger rank gutter, compact rows, clearer
     primary metric, flatter square avatars, and matching mobile cards. */
  #tab-leaderboard #lb-content {
    margin-top: 8px !important;
  }

  #tab-leaderboard .leaderboard-toolbar {
    margin-bottom: 10px !important;
    align-items: center !important;
  }

  #tab-leaderboard .leaderboard-table-scroll {
    position: relative !important;
    overflow: hidden auto !important;
    border: 1px solid rgba(92, 122, 174, .26) !important;
    border-radius: 2px !important;
    background: #050914 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 16px 48px rgba(0,0,0,.24) !important;
  }

  #tab-leaderboard .leaderboard-table-scroll::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(91,179,255,.32), transparent);
    pointer-events: none;
    z-index: 2;
  }

  #tab-leaderboard .leaderboard-table {
    min-width: 900px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #050914 !important;
  }

  #tab-leaderboard .leaderboard-table th,
  #tab-leaderboard .leaderboard-table td {
    border-right: 0 !important;
    vertical-align: middle !important;
  }

  #tab-leaderboard .leaderboard-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 38px !important;
    padding: 0 14px !important;
    background: #080e1a !important;
    border-bottom: 1px solid rgba(92, 122, 174, .28) !important;
    color: #7f8da5 !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  #tab-leaderboard .leaderboard-table thead th.rank,
  #tab-leaderboard .leaderboard-table th:first-child {
    width: 74px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    color: #6d7b92 !important;
    background: #060a13 !important;
  }

  #tab-leaderboard .leaderboard-table th:nth-child(2),
  #tab-leaderboard .leaderboard-table td:nth-child(2) {
    width: 32% !important;
  }

  #tab-leaderboard .leaderboard-table th:nth-child(n+3),
  #tab-leaderboard .leaderboard-table td:nth-child(n+3) {
    width: 16% !important;
  }

  #tab-leaderboard .leaderboard-table tbody tr {
    position: relative !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  #tab-leaderboard .leaderboard-table tbody td {
    height: 54px !important;
    padding: 8px 14px !important;
    background: #070c16 !important;
    border-bottom: 1px solid rgba(92, 122, 174, .115) !important;
    color: #c7d2e6 !important;
  }

  #tab-leaderboard .leaderboard-table tbody tr:nth-child(even) td {
    background: #080e19 !important;
  }

  #tab-leaderboard .leaderboard-table tbody tr:hover td {
    background: #0d1728 !important;
    border-bottom-color: rgba(91, 179, 255, .34) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
  }

  #tab-leaderboard .leaderboard-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 #5bb3ff !important;
  }

  #tab-leaderboard .leaderboard-table tbody td:first-child {
    padding: 0 !important;
    background: #050914 !important;
    color: #6f7d94 !important;
    border-right: 1px solid rgba(92, 122, 174, .14) !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
  }

  #tab-leaderboard .leaderboard-table tbody tr:nth-child(even) td:first-child {
    background: #060b14 !important;
  }

  #tab-leaderboard .leaderboard-table .rank.top1,
  #tab-leaderboard .leaderboard-table .rank.top2,
  #tab-leaderboard .leaderboard-table .rank.top3 {
    color: #f5f8ff !important;
    text-shadow: none !important;
  }

  #tab-leaderboard .leaderboard-table .rank.top1 {
    color: #ffd979 !important;
    box-shadow: inset 3px 0 0 #d9a93a !important;
    background: linear-gradient(90deg, rgba(217,169,58,.12), #050914 52%) !important;
  }

  #tab-leaderboard .leaderboard-table .rank.top2 {
    color: #dce7fa !important;
    box-shadow: inset 3px 0 0 #9fb0ca !important;
    background: linear-gradient(90deg, rgba(159,176,202,.10), #050914 52%) !important;
  }

  #tab-leaderboard .leaderboard-table .rank.top3 {
    color: #e6aa7a !important;
    box-shadow: inset 3px 0 0 #bf7541 !important;
    background: linear-gradient(90deg, rgba(191,117,65,.11), #050914 52%) !important;
  }

  #tab-leaderboard .leaderboard-player {
    gap: 11px !important;
    align-items: center !important;
  }

  #tab-leaderboard .leaderboard-player .leaderboard-avatar,
  #tab-leaderboard .leaderboard-player .lb-avatar {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 2px !important;
    border: 1px solid rgba(92,122,174,.30) !important;
    background: #030711 !important;
    box-shadow: none !important;
  }

  #tab-leaderboard .leaderboard-player .nick {
    color: #edf3ff !important;
    font-size: 15px !important;
    font-weight: 820 !important;
    letter-spacing: -.015em !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
  }

  #tab-leaderboard .leaderboard-table tbody tr:hover .leaderboard-player .nick {
    color: #ffffff !important;
    text-shadow: none !important;
  }

  #tab-leaderboard .leaderboard-metric-cell {
    text-align: right !important;
    font-size: 14px !important;
    color: #aab7ca !important;
    font-weight: 760 !important;
    letter-spacing: -.01em !important;
  }

  #tab-leaderboard .leaderboard-primary-metric {
    color: #eef5ff !important;
    font-size: 15.5px !important;
    font-weight: 900 !important;
  }

  #tab-leaderboard .leaderboard-primary-metric .leaderboard-pp-value,
  #tab-leaderboard .leaderboard-primary-metric .leaderboard-accuracy-value,
  #tab-leaderboard .leaderboard-primary-metric .leaderboard-plays-value,
  #tab-leaderboard .leaderboard-primary-metric .leaderboard-score-value {
    font-size: 1.05em !important;
  }

  #tab-leaderboard .leaderboard-pp-value {
    color: #f0f6ff !important;
    font-weight: 900 !important;
    text-shadow: none !important;
  }

  #tab-leaderboard .leaderboard-score-value {
    color: #dce9ff !important;
    font-weight: 850 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
  }

  #tab-leaderboard .leaderboard-metric-charts:not(.leaderboard-primary-metric) .leaderboard-plays-value,
  #tab-leaderboard .leaderboard-metric-accuracy:not(.leaderboard-primary-metric) .leaderboard-accuracy-value,
  #tab-leaderboard .leaderboard-metric-score:not(.leaderboard-primary-metric) .leaderboard-score-value {
    filter: saturate(.82) brightness(.92) !important;
  }

  #tab-leaderboard .leaderboard-table tbody tr:hover .leaderboard-primary-metric {
    color: #ffffff !important;
  }

  #tab-leaderboard #lb-count {
    padding: 0 2px !important;
    color: #7f8da5 !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    letter-spacing: .02em !important;
  }

  #tab-leaderboard .leaderboard-mobile-list {
    gap: 8px !important;
  }

  #tab-leaderboard .leaderboard-mobile-card {
    position: relative !important;
    padding: 10px 11px !important;
    gap: 8px !important;
    border-radius: 2px !important;
    background: #070c16 !important;
    border: 1px solid rgba(92, 122, 174, .22) !important;
    box-shadow: none !important;
  }

  #tab-leaderboard .leaderboard-mobile-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgba(91,179,255,.0);
    transition: background .16s ease;
  }

  #tab-leaderboard .leaderboard-mobile-card:hover {
    background: #0d1728 !important;
    border-color: rgba(91,179,255,.36) !important;
  }

  #tab-leaderboard .leaderboard-mobile-card:hover::before {
    background: #5bb3ff;
  }

  #tab-leaderboard .leaderboard-mobile-header {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #tab-leaderboard .leaderboard-mobile-rank {
    min-width: 48px !important;
    min-height: 36px !important;
    border-radius: 2px !important;
    background: #050914 !important;
    border: 1px solid rgba(92,122,174,.18) !important;
    color: #7f8da5 !important;
    font-size: 15px !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  #tab-leaderboard .leaderboard-mobile-rank.top1 { color: #ffd979 !important; border-left: 3px solid #d9a93a !important; }
  #tab-leaderboard .leaderboard-mobile-rank.top2 { color: #dce7fa !important; border-left: 3px solid #9fb0ca !important; }
  #tab-leaderboard .leaderboard-mobile-rank.top3 { color: #e6aa7a !important; border-left: 3px solid #bf7541 !important; }

  #tab-leaderboard .leaderboard-mobile-card .leaderboard-player .leaderboard-avatar,
  #tab-leaderboard .leaderboard-mobile-card .leaderboard-player .lb-avatar {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    border-radius: 2px !important;
  }

  #tab-leaderboard .leaderboard-mobile-card .leaderboard-player .nick {
    font-size: 14.5px !important;
    font-weight: 820 !important;
    color: #edf3ff !important;
  }

  #tab-leaderboard .leaderboard-mobile-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border: 1px solid rgba(92,122,174,.14) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    background: #050914 !important;
  }

  #tab-leaderboard .leaderboard-mobile-metric {
    padding: 8px 6px !important;
    border: 0 !important;
    border-right: 1px solid rgba(92,122,174,.12) !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #tab-leaderboard .leaderboard-mobile-metric:nth-child(2n) {
    border-right: 0 !important;
  }

  #tab-leaderboard .leaderboard-mobile-metric:nth-child(-n+2) {
    border-bottom: 1px solid rgba(92,122,174,.12) !important;
  }

  #tab-leaderboard .leaderboard-mobile-metric-label {
    color: #7f8da5 !important;
    font-size: 9.5px !important;
    letter-spacing: .065em !important;
    text-transform: uppercase !important;
  }

  #tab-leaderboard .leaderboard-mobile-metric-value {
    color: #edf3ff !important;
    font-size: 13.5px !important;
    font-weight: 850 !important;
  }

  #tab-leaderboard .leaderboard-mobile-metric:first-child .leaderboard-mobile-metric-value {
    font-size: 15px !important;
    font-weight: 920 !important;
  }

  @media (max-width: 700px) {
    #tab-leaderboard #lb-content {
      margin-top: 6px !important;
    }

    #tab-leaderboard .leaderboard-toolbar {
      margin-bottom: 8px !important;
    }
  }


  /* v30.0.10: Leaderboard metric alignment fix.
     Keep ScoreSaber-like statistic columns centered instead of right-aligned,
     including the primary metric column introduced in Phase 6. */
  #tab-leaderboard .leaderboard-table th.num,
  #tab-leaderboard .leaderboard-table th:nth-child(n+3),
  #tab-leaderboard .leaderboard-table td.leaderboard-metric-cell,
  #tab-leaderboard .leaderboard-table td:nth-child(n+3),
  #tab-leaderboard .leaderboard-table .leaderboard-primary-metric {
    text-align: center !important;
  }

  #tab-leaderboard .leaderboard-table td.leaderboard-metric-cell {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #tab-leaderboard .leaderboard-mobile-metric,
  #tab-leaderboard .leaderboard-mobile-metric-label,
  #tab-leaderboard .leaderboard-mobile-metric-value {
    text-align: center !important;
  }


  /* v30.0.11: Classic Dark UI Phase 7.
     Profile page competition layout pass.  The profile header now reads like a
     compact ranking service card: identity block on the left, dashboard metrics
     on the right, flatter panels, clearer hierarchy, and tighter Top Plays /
     overview rows without changing the data or behavior. */
  #player-detail-view {
    --profile-row-bg: #070c16;
    --profile-row-bg-alt: #080f1b;
    --profile-panel-bg: #050914;
  }

  #player-detail-view .profile-hero {
    display: grid !important;
    grid-template-columns: minmax(310px, .92fr) minmax(380px, 1.08fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
    padding: 14px !important;
    min-height: 0 !important;
    background:
      linear-gradient(180deg, #070c16, #040711) padding-box,
      linear-gradient(90deg, rgba(91,179,255,.48), rgba(116,145,196,.10) 62%, rgba(116,145,196,.18)) border-box !important;
    border: 1px solid transparent !important;
    border-radius: 2px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.022) !important;
  }

  #player-detail-view .profile-hero::after {
    opacity: .05 !important;
  }

  #player-detail-view .profile-hero-bg {
    opacity: .07 !important;
    filter: blur(18px) saturate(.85) !important;
  }

  #player-detail-view .profile-main {
    min-width: 0 !important;
    height: 100% !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 14px 92px 14px 14px !important;
    background: var(--profile-panel-bg) !important;
    border: 1px solid rgba(116,145,196,.18) !important;
    border-left: 3px solid rgba(91,179,255,.62) !important;
    border-radius: 2px !important;
  }

  #player-detail-view .profile-avatar-wrap,
  #player-detail-view .profile-main .avatar {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
  }

  #player-detail-view .profile-main .avatar {
    border-radius: 2px !important;
    border: 1px solid rgba(116,145,196,.38) !important;
    box-shadow: none !important;
    background: #02050c !important;
  }

  #player-detail-view .profile-avatar-wrap.neko-avatar::before,
  #player-detail-view .profile-avatar-wrap.neko-avatar::after {
    top: -19px !important;
    font-size: 31px !important;
  }

  #player-detail-view .profile-identity {
    min-width: 0 !important;
  }

  #player-detail-view .profile-name {
    max-width: 100% !important;
    margin: 0 !important;
    color: #f4f7ff !important;
    font-size: clamp(25px, 3.2vw, 36px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
  }

  #player-detail-view .profile-rank-line {
    margin-top: 9px !important;
    gap: 5px !important;
  }

  #player-detail-view .profile-rank-line .rank-badge,
  #player-detail-view .profile-rank-line .pill,
  #player-detail-view .profile-rank-line .profile-hmd-pill,
  #player-detail-view .profile-rank-line .neko-badge,
  #player-detail-view .profile-rank-line .admin-badge,
  #player-detail-view .profile-rank-line .inactive-badge {
    min-height: 25px !important;
    padding: 0 8px !important;
    border-radius: 2px !important;
    background: #0b1220 !important;
    border-color: rgba(116,145,196,.22) !important;
    color: #c6d2e8 !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
  }

  #player-detail-view .profile-rank-line .admin-badge {
    color: #ffd27b !important;
    border-color: rgba(255,198,93,.48) !important;
    background: linear-gradient(90deg, rgba(255,198,93,.10), #0b1220) !important;
  }

  #player-detail-view .profile-rank-line .neko-badge {
    color: #ffb3d7 !important;
    border-color: rgba(255,118,190,.34) !important;
    background: linear-gradient(90deg, rgba(255,118,190,.09), #0b1220) !important;
  }

  #player-detail-view .profile-bio-inline {
    max-width: 100% !important;
    margin-top: 9px !important;
    padding: 8px 10px !important;
    border-radius: 2px !important;
    border-left: 2px solid rgba(91,179,255,.48) !important;
    background: #080f1b !important;
    color: #b8c5dc !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  #player-detail-view .profile-tabs {
    margin: 10px 0 12px !important;
    border-radius: 2px !important;
    background: #050914 !important;
    border: 1px solid rgba(116,145,196,.18) !important;
  }

  #player-detail-view .profile-tab {
    min-height: 38px !important;
    padding: 0 13px !important;
    font-size: 11px !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
  }

  #player-detail-view .profile-overview-grid {
    gap: 10px !important;
  }

  #player-detail-view .profile-section {
    border-radius: 2px !important;
    background: #050914 !important;
    border-color: rgba(116,145,196,.18) !important;
    box-shadow: none !important;
  }

  #player-detail-view .profile-section h3 {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 13px !important;
    background: #080f1b !important;
    color: #dfe9ff !important;
    font-size: 11px !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
  }

  #player-detail-view .mini-play {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    min-height: 52px !important;
    padding: 9px 12px !important;
    background: var(--profile-row-bg) !important;
    border-bottom: 1px solid rgba(116,145,196,.11) !important;
  }

  #player-detail-view .mini-play.no-rank {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  #player-detail-view .mini-play:nth-child(even) {
    background: var(--profile-row-bg-alt) !important;
  }

  #player-detail-view .mini-play:hover {
    background: #101a2c !important;
    box-shadow: inset 3px 0 0 #5bb3ff !important;
  }

  #player-detail-view .mini-rank {
    min-width: 34px !important;
    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 2px !important;
    background: #0b1220 !important;
    border: 1px solid rgba(116,145,196,.22) !important;
    color: #7fc1ff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  #player-detail-view .profile-table-scroll {
    border: 1px solid rgba(116,145,196,.18) !important;
    border-radius: 2px !important;
    background: #050914 !important;
  }

  #player-detail-view .top-plays-table,
  #player-detail-view .all-plays-table {
    background: #050914 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  #player-detail-view .top-plays-table thead th,
  #player-detail-view .all-plays-table thead th {
    height: var(--profile-ui-table-header-height, 36px) !important;
    padding: 0 12px !important;
    background: #080f1b !important;
    border-bottom: 1px solid rgba(116,145,196,.22) !important;
    color: #7f8da5 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .105em !important;
    text-transform: uppercase !important;
  }

  #player-detail-view .top-plays-table tbody td,
  #player-detail-view .all-plays-table tbody td {
    background: var(--profile-row-bg) !important;
    border-bottom: 1px solid rgba(116,145,196,.105) !important;
  }

  #player-detail-view .top-plays-table tbody tr:nth-child(even) td,
  #player-detail-view .all-plays-table tbody tr:nth-child(even) td {
    background: var(--profile-row-bg-alt) !important;
  }

  #player-detail-view .top-plays-table tbody tr:hover td,
  #player-detail-view .all-plays-table tbody tr:hover td {
    background: #101a2c !important;
    box-shadow: none !important;
  }

  #player-detail-view .top-plays-table tbody tr:hover td:first-child,
  #player-detail-view .all-plays-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 #5bb3ff !important;
  }

  #player-detail-view .top-plays-table .top-play-chart-rank,
  #player-detail-view .top-plays-table .top-play-difficulty,
  #player-detail-view .all-plays-table .pill {
    border-radius: 2px !important;
    background: #0b1220 !important;
    border: 1px solid rgba(116,145,196,.20) !important;
    color: #b7c6de !important;
    box-shadow: none !important;
  }

  #player-detail-view .top-plays-table .top-play-song-title,
  #player-detail-view .all-plays-table .title-cell .title {
    color: #f1f5ff !important;
    font-weight: 900 !important;
  }

  #player-detail-view .top-plays-table .top-play-song-meta,
  #player-detail-view .all-plays-table .title-cell .meta {
    color: #8796ae !important;
  }

  #player-detail-view .profile-filterbar {
    margin-bottom: 10px !important;
    padding: 8px !important;
    border-radius: 2px !important;
    background: #050914 !important;
    border-color: rgba(116,145,196,.18) !important;
  }

  #player-detail-view .profile-filterbar input,
  #player-detail-view .profile-filterbar select {
    min-height: var(--profile-ui-filter-input-min-height, 34px) !important;
    border-radius: 2px !important;
    background: #070c16 !important;
  }

  @media (max-width: 980px) {
    #player-detail-view .profile-hero {
      grid-template-columns: 1fr !important;
    }

    #player-detail-view .profile-main {
      padding-right: 92px !important;
    }
  }

  @media (max-width: 700px) {
    #player-detail-view .profile-hero {
      padding: 10px !important;
      gap: 10px !important;
    }

    #player-detail-view .profile-main {
      grid-template-columns: 74px minmax(0, 1fr) !important;
      gap: 10px !important;
      padding: 12px !important;
    }

    #player-detail-view .profile-avatar-wrap,
    #player-detail-view .profile-main .avatar {
      width: 74px !important;
      height: 74px !important;
      min-width: 74px !important;
    }

    #player-detail-view .profile-name {
      font-size: clamp(22px, 7vw, 30px) !important;
    }

    #player-detail-view .profile-tabs {
      overflow-x: auto !important;
    }

    #player-detail-view .profile-overview-grid {
      grid-template-columns: 1fr !important;
    }
  }


  /* v30.0.12: Classic Dark UI Phase 8.
     Reduce the assembled-card feeling across the Web UI.  The page now uses
     fewer hard outlines, softer separators, and background-blended profile
     surfaces so the layout reads like one classic dark ranking site instead of
     many separate bordered widgets. */
  :root {
    --classic-line: rgba(104, 128, 171, .135);
    --classic-line-strong: rgba(91, 179, 255, .38);
    --classic-panel: linear-gradient(180deg, rgba(7, 11, 20, .98), rgba(4, 7, 13, .99));
    --classic-panel-soft: linear-gradient(180deg, rgba(9, 14, 25, .96), rgba(4, 7, 14, .98));
    --classic-flat: #050914;
    --classic-flat-2: #070c16;
    --classic-flat-3: #0a1120;
  }

  main {
    position: relative;
  }

  main::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255,255,255,.018), transparent 180px),
      linear-gradient(90deg, rgba(0,0,0,.26), transparent 18%, transparent 82%, rgba(0,0,0,.28));
  }

  .site-topbar,
nav,
.hero-header,
.filters,
table,
.player-header,
.chart-header,
.modal,
footer,
.home-hero,
.home-discord-card,
.home-panel,
.activity-card,
.chart-activity-card,
.community-link-card,
.song-hero,
.song-related-card,
.random-hero,
.random-card,
.statistics-hero,
.statistics-card,
.statistics-chart-card,
.history-hero,
.history-card,
.favorites-hero,
.favorite-card,
.leaderboard-mobile-card,
.compact-ranking-row,
.stat-card,
.chart-card,
.hologram-card,
.pp-hero,
.pp-card,
.pp-simulator,
.pp-breakdown-item {
    border-color: rgba(104, 128, 171, .12) !important;
    box-shadow: none !important;
  }

  .home-hero,
  .profile-hero,
  .song-hero,
  .statistics-hero,
  .random-hero,
  .history-hero,
  .favorites-hero,
  .pp-hero {
    background:
      linear-gradient(180deg, rgba(11,17,30,.82), rgba(5,8,15,.92)) padding-box !important;
    border-color: rgba(104,128,171,.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
  }

  .filters,
  .profile-filterbar,
  .random-filter-panel,
  .profile-tabs,
  .song-tabs,
  .leaderboard-mode-switch,
  .pp-form-grid {
    background: rgba(4, 7, 13, .72) !important;
    border-color: rgba(104,128,171,.105) !important;
    box-shadow: none !important;
  }

  .filters input,
  .filters select,
  .top-search,
  input,
  select,
  textarea,
  button.btn,
  .pagination button,
  .share-button,
  .favorite-button,
  .favorite-card-actions button,
  .history-card-actions button,
  footer .links .footer-action {
    border-color: rgba(104,128,171,.16) !important;
    background: rgba(5, 9, 16, .88) !important;
  }

  .home-panel-head,
.modal header,
.profile-section h3,
.pp-card h3,
.pp-simulator h3,
.statistics-card h3,
.statistics-chart-card h3 {
    background: transparent !important;
    border-bottom-color: rgba(104,128,171,.11) !important;
  }

  table,
.profile-table-scroll,
.pp-table {
    border-color: rgba(104,128,171,.11) !important;
    background: rgba(4, 7, 13, .64) !important;
    box-shadow: none !important;
  }

  th {
    background: rgba(8, 14, 25, .82) !important;
    border-bottom-color: rgba(104,128,171,.14) !important;
  }

  td,
  .mini-play,
  .compact-ranking-row,
  .search-result-item,
  .activity-card,
  .chart-activity-card {
    border-bottom-color: rgba(104,128,171,.075) !important;
  }

  .pill,
.play-tag,
.pp-pill,
.rank-badge,
.admin-badge,
.neko-badge {
    border-color: rgba(104,128,171,.16) !important;
    background: rgba(8, 14, 25, .66) !important;
  }

  /* Profile: background-blended ScoreSaber-like profile surface. */
  #player-detail-view {
    --profile-ink: #f1f5ff;
    --profile-subtle: #7f8da5;
    --profile-sheet: rgba(5, 9, 16, .72);
    --profile-sheet-2: rgba(7, 12, 22, .78);
    --profile-line: rgba(104,128,171,.11);
    --profile-line-strong: rgba(91,179,255,.35);
  }

  #player-detail-view .profile-hero {
    display: grid !important;
    grid-template-columns: minmax(320px, .95fr) minmax(380px, 1.05fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, rgba(8,13,23,.82), rgba(4,7,13,.95)) padding-box !important;
    border: 0 !important;
    border-top: 1px solid rgba(104,128,171,.14) !important;
    border-bottom: 1px solid rgba(104,128,171,.12) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #player-detail-view .profile-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(91,179,255,.15), transparent 2px),
      radial-gradient(ellipse at 6% 14%, rgba(91,179,255,.09), transparent 28%),
      radial-gradient(ellipse at 96% 0%, rgba(141,124,255,.055), transparent 34%);
    opacity: 1 !important;
  }

  #player-detail-view .profile-hero::after {
    opacity: .025 !important;
  }

  #player-detail-view .profile-hero-bg {
    inset: -34px !important;
    opacity: .045 !important;
    filter: blur(22px) saturate(.72) !important;
  }

  #player-detail-view .profile-main {
    position: relative !important;
    z-index: 1 !important;
    height: auto !important;
    min-height: 154px !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 24px 104px 24px 24px !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid var(--profile-line) !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #player-detail-view .profile-main::after {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(91,179,255,.55), transparent);
    pointer-events: none;
  }

  #player-detail-view .profile-avatar-wrap,
  #player-detail-view .profile-main .avatar {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
  }

  #player-detail-view .profile-main .avatar {
    border-radius: 0 !important;
    border: 1px solid rgba(104,128,171,.22) !important;
    background: #02050c !important;
    box-shadow: none !important;
  }

  #player-detail-view .profile-name {
    color: var(--profile-ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-shadow: none !important;
    font-size: clamp(28px, 3.6vw, 42px) !important;
    letter-spacing: -.045em !important;
  }

  #player-detail-view .profile-rank-line {
    margin-top: 10px !important;
    gap: 6px !important;
  }

  #player-detail-view .profile-rank-line .rank-badge,
  #player-detail-view .profile-rank-line .pill,
  #player-detail-view .profile-rank-line .profile-hmd-pill,
  #player-detail-view .profile-rank-line .neko-badge,
  #player-detail-view .profile-rank-line .admin-badge,
  #player-detail-view .profile-rank-line .inactive-badge {
    min-height: 23px !important;
    padding: 0 7px !important;
    border: 0 !important;
    border-left: 1px solid rgba(104,128,171,.20) !important;
    border-radius: 0 !important;
    background: rgba(7, 12, 22, .34) !important;
    color: #aebbd1 !important;
  }

  #player-detail-view .profile-rank-line .rank-badge:first-child,
  #player-detail-view .profile-rank-line .pill:first-child {
    border-left-color: rgba(91,179,255,.32) !important;
  }

  #player-detail-view .profile-rank-line .admin-badge {
    color: #ffd27b !important;
    border-left-color: rgba(255,198,93,.45) !important;
    background: rgba(255,198,93,.055) !important;
  }

  #player-detail-view .profile-rank-line .neko-badge {
    color: #ffb3d7 !important;
    border-left-color: rgba(255,118,190,.34) !important;
    background: rgba(255,118,190,.045) !important;
  }

  #player-detail-view .profile-bio-inline {
    margin-top: 11px !important;
    padding: 0 0 0 11px !important;
    border: 0 !important;
    border-left: 1px solid rgba(91,179,255,.32) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #aab8cf !important;
  }

  #player-detail-view .profile-tabs {
    margin: 14px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(104,128,171,.13) !important;
    border-radius: 0 !important;
    gap: 0 !important;
  }

  #player-detail-view .profile-tab {
    min-height: 40px !important;
    padding: 0 15px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #7f8da5 !important;
  }

  #player-detail-view .profile-tab:hover {
    color: #dce7fb !important;
    background: rgba(91,179,255,.045) !important;
  }

  #player-detail-view .profile-tab.active {
    color: #f5f8ff !important;
    background: linear-gradient(180deg, rgba(91,179,255,.06), rgba(91,179,255,.018)) !important;
    box-shadow: inset 0 -2px 0 rgba(91,179,255,.72) !important;
  }

  #player-detail-view .profile-overview-grid {
    gap: var(--profile-ui-overview-gap, 0) !important;
    border-top: 1px solid rgba(104,128,171,.10) !important;
    border-bottom: 1px solid rgba(104,128,171,.10) !important;
    background: rgba(4,7,13,.54) !important;
  }

  #player-detail-view .profile-section {
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid rgba(104,128,171,.10) !important;
    border-radius: var(--profile-ui-section-radius, 0) !important;
    box-shadow: none !important;
  }

  #player-detail-view .profile-section:last-child {
    border-right: 0 !important;
  }

  #player-detail-view .profile-section h3 {
    min-height: var(--profile-ui-section-heading-min-height, 40px) !important;
    padding: 0 var(--profile-ui-section-heading-padding-x, 14px) !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(104,128,171,.10) !important;
    color: #99a8c0 !important;
  }

  #player-detail-view .mini-play {
    background: transparent !important;
    border-bottom-color: rgba(104,128,171,.075) !important;
  }

  #player-detail-view .mini-play:nth-child(even) {
    background: rgba(255,255,255,.012) !important;
  }

  #player-detail-view .mini-play:hover {
    background: rgba(91,179,255,.045) !important;
    box-shadow: inset 2px 0 0 rgba(91,179,255,.55) !important;
  }

  #player-detail-view .mini-rank {
    min-width: 30px !important;
    min-height: 24px !important;
    border: 0 !important;
    border-left: 1px solid rgba(91,179,255,.38) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #player-detail-view .profile-table-scroll {
    border: 0 !important;
    border-top: 1px solid rgba(104,128,171,.11) !important;
    border-bottom: 1px solid rgba(104,128,171,.11) !important;
    border-radius: var(--profile-ui-table-scroll-radius, 0) !important;
    background: rgba(4,7,13,.54) !important;
  }

  #player-detail-view .top-plays-table,
  #player-detail-view .all-plays-table {
    background: transparent !important;
  }

  #player-detail-view .top-plays-table thead th,
  #player-detail-view .all-plays-table thead th {
    background: rgba(8,14,25,.62) !important;
    border-bottom-color: rgba(104,128,171,.12) !important;
  }

  #player-detail-view .top-plays-table tbody td,
  #player-detail-view .all-plays-table tbody td {
    background: transparent !important;
    border-bottom-color: rgba(104,128,171,.07) !important;
  }

  #player-detail-view .top-plays-table tbody tr:nth-child(even) td,
  #player-detail-view .all-plays-table tbody tr:nth-child(even) td {
    background: rgba(255,255,255,.012) !important;
  }

  #player-detail-view .top-plays-table tbody tr:hover td,
  #player-detail-view .all-plays-table tbody tr:hover td {
    background: rgba(91,179,255,.045) !important;
  }

  #player-detail-view .top-plays-table .top-play-chart-rank,
  #player-detail-view .top-plays-table .top-play-difficulty,
  #player-detail-view .all-plays-table .pill {
    border: 0 !important;
    border-left: 1px solid rgba(104,128,171,.24) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #player-detail-view .profile-filterbar {
    margin: 0 0 var(--profile-ui-filter-margin-bottom, 10px) !important;
    padding: 0 0 var(--profile-ui-filter-padding-bottom, 10px) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(104,128,171,.10) !important;
    border-radius: 0 !important;
  }

  #player-detail-view .profile-filterbar input,
  #player-detail-view .profile-filterbar select {
    border-radius: var(--profile-ui-filter-input-radius, 0) !important;
  }

  #player-detail-view .screenshot-grid {
    gap: 1px !important;
    background: rgba(104,128,171,.10) !important;
  }

  #player-detail-view .screenshot-card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Make common page blocks feel less like stacked independent cards. */
  .home-activity-grid,
.profile-overview-grid,
.stats-grid,
.community-links,
.song-related-grid,
.favorites-grid,
.history-grid,
.pp-grid {
    gap: 10px !important;
  }

  .home-panel,
  .statistics-card,
  .statistics-chart-card,
  .pp-card,
  .pp-simulator,
  .song-related-card,
  .favorite-card,
  .history-card,
  .random-card {
    background: rgba(5, 9, 16, .68) !important;
    border-color: rgba(104,128,171,.10) !important;
  }

  .home-panel:hover,
  .statistics-card:hover,
  .pp-card:hover,
  .song-related-card:hover,
  .favorite-card:hover,
  .history-card:hover,
  .random-card:hover {
    border-color: rgba(91,179,255,.18) !important;
    box-shadow: inset 2px 0 0 rgba(91,179,255,.20) !important;
    transform: none !important;
  }

  @media (max-width: 980px) {
    #player-detail-view .profile-hero {
      grid-template-columns: 1fr !important;
    }

    #player-detail-view .profile-main {
      border-right: 0 !important;
      border-bottom: 1px solid var(--profile-line) !important;
      padding-right: 104px !important;
    }
  }

  @media (max-width: 700px) {
    #player-detail-view .profile-hero {
      padding: 0 !important;
    }

    #player-detail-view .profile-main {
      min-height: 0 !important;
      grid-template-columns: 74px minmax(0, 1fr) !important;
      gap: 11px !important;
      padding: 16px !important;
    }

    #player-detail-view .profile-avatar-wrap,
    #player-detail-view .profile-main .avatar {
      width: 74px !important;
      height: 74px !important;
      min-width: 74px !important;
    }

    #player-detail-view .profile-overview-grid {
      display: block !important;
    }

    #player-detail-view .profile-section {
      border-right: 0 !important;
      border-bottom: 1px solid rgba(104,128,171,.10) !important;
    }
  }


  /* v30.0.14 Classic Dark UI Phase 8.2: natural detail route header order */
  #player-detail-view > .route-header,
  #song-detail-view > .route-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
    padding: 2px 0 10px;
    border-bottom: 1px solid rgba(92, 122, 174, .13);
    background: transparent;
  }

  #player-detail-view .route-header-left,
  #song-detail-view .route-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  #player-detail-view .route-header-left .route-back-button,
  #song-detail-view .route-header-left .route-back-button {
    flex: 0 0 auto;
  }

  #player-detail-view .route-header-actions,
  #song-detail-view .route-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    min-width: max-content;
  }

  #player-detail-view .route-header .route-breadcrumb,
  #song-detail-view .route-header .route-breadcrumb {
    width: auto !important;
    max-width: min(52vw, 640px);
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: 0;
    color: #7f8ba0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #player-detail-view .route-header .route-breadcrumb span,
  #song-detail-view .route-header .route-breadcrumb span {
    opacity: .72;
  }

  #player-detail-view .route-header .route-breadcrumb b,
  #song-detail-view .route-header .route-breadcrumb b {
    color: #d5deed;
    font-weight: 700;
  }

  #player-detail-view .route-header .route-back-button,
  #song-detail-view .route-header .route-back-button {
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-color: rgba(92, 122, 174, .18) !important;
    background: rgba(7, 12, 22, .56) !important;
    color: #93a0b4 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    letter-spacing: .015em;
  }

  #player-detail-view .route-header .route-back-button::before,
  #song-detail-view .route-header .route-back-button::before {
    width: 2px;
    margin-left: -10px;
    margin-right: 3px;
    background: rgba(87, 144, 232, .48);
  }

  #player-detail-view .route-header .route-back-button:hover,
  #song-detail-view .route-header .route-back-button:hover {
    color: #eef4ff !important;
    border-color: rgba(103, 153, 232, .34) !important;
    background: rgba(11, 18, 32, .82) !important;
  }

  #player-detail-view .route-header .share-actions,
  #song-detail-view .route-header .share-actions {
    display: inline-flex;
  }

  #player-detail-view .route-header .share-button,
  #song-detail-view .route-header .share-button {
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 2px !important;
    border-color: rgba(92, 122, 174, .18) !important;
    background: rgba(7, 12, 22, .56) !important;
    color: #93a0b4 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    transform: none !important;
  }

  #player-detail-view .route-header .share-button:hover,
  #song-detail-view .route-header .share-button:hover {
    color: #eef4ff !important;
    border-color: rgba(103, 153, 232, .34) !important;
    background: rgba(11, 18, 32, .82) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #player-detail-view .route-header .profile-edit-button {
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 2px !important;
    border-color: rgba(91, 179, 255, .40) !important;
    background: linear-gradient(180deg, rgba(14, 31, 54, .90), rgba(6, 12, 22, .88)) !important;
    color: #dcecff !important;
    box-shadow: none !important;
    font-size: 11px !important;
    letter-spacing: .015em;
    text-transform: none;
  }

  #player-detail-view .route-header .profile-edit-button:hover,
  #player-detail-view .route-header .profile-edit-button:focus-visible {
    color: #fff !important;
    border-color: rgba(91, 179, 255, .72) !important;
    background: rgba(13, 29, 52, .96) !important;
    box-shadow: 0 0 14px rgba(56, 142, 255, .14) !important;
  }

  #player-detail-view .profile-hero,
  #song-detail-view .song-hero {
    margin-top: 0 !important;
  }

  #player-detail-view .profile-main {
    padding-right: 0 !important;
  }

  @media (max-width: 720px) {
    #player-detail-view > .route-header,
    #song-detail-view > .route-header {
      align-items: stretch;
      flex-direction: column;
      gap: 8px;
    }

    #player-detail-view .route-header-left,
    #song-detail-view .route-header-left {
      flex-wrap: nowrap;
      width: 100%;
    }

    #player-detail-view .route-header .route-breadcrumb,
    #song-detail-view .route-header .route-breadcrumb {
      max-width: 100%;
      flex: 1 1 auto;
    }

    #player-detail-view .route-header-actions,
    #song-detail-view .route-header-actions {
      justify-content: flex-end;
      width: 100%;
    }
  }

  @media (max-width: 430px) {
    #player-detail-view .route-header-actions .share-button,
    #song-detail-view .route-header-actions .share-button,
    #player-detail-view .route-header .route-back-button,
    #song-detail-view .route-header .route-back-button {
      min-height: 30px !important;
    }
  }


  /* v30.0.136: mobile-safe action rows for song/profile pages.
     Route-header actions can contain several Web actions (Discord share,
     thumbnail request, page share, upload/profile edit).  On phones the
     previous max-content row could overflow and clip the buttons, so only
     the detail-page action strip is allowed to wrap into a compact grid. */
  @media (max-width: 720px) {
    #player-detail-view > .route-header,
    #song-detail-view > .route-header {
      min-width: 0 !important;
      max-width: 100% !important;
      overflow: visible !important;
    }

    #player-detail-view .route-header-actions,
    #song-detail-view .route-header-actions {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch !important;
      justify-content: stretch !important;
      gap: 7px !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      overflow: visible !important;
    }

    #player-detail-view .route-header-actions .share-actions,
    #song-detail-view .route-header-actions .share-actions {
      display: contents !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }

    #player-detail-view .route-header-actions > button,
    #song-detail-view .route-header-actions > button,
    #player-detail-view .route-header-actions .share-button,
    #song-detail-view .route-header-actions .share-button,
    #player-detail-view .route-header-actions .profile-edit-button,
    #song-detail-view .route-header-actions .profile-edit-button {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      min-height: 36px !important;
      height: auto !important;
      box-sizing: border-box !important;
      justify-content: center !important;
      padding: 8px 9px !important;
      white-space: normal !important;
      line-height: 1.22 !important;
      overflow: visible !important;
    }

    #player-detail-view .route-header-actions .share-button span,
    #song-detail-view .route-header-actions .share-button span,
    #player-detail-view .route-header-actions .profile-edit-button,
    #song-detail-view .route-header-actions .profile-edit-button {
      min-width: 0 !important;
      overflow-wrap: anywhere;
    }

    #player-detail-view .route-header-actions .share-button span:last-child,
    #song-detail-view .route-header-actions .share-button span:last-child {
      overflow: visible !important;
      text-overflow: clip !important;
      white-space: normal !important;
    }
  }

  @media (max-width: 430px) {
    #player-detail-view .route-header-actions,
    #song-detail-view .route-header-actions {
      grid-template-columns: 1fr !important;
      gap: 6px !important;
    }

    #player-detail-view .route-header-actions > button,
    #song-detail-view .route-header-actions > button,
    #player-detail-view .route-header-actions .share-button,
    #song-detail-view .route-header-actions .share-button,
    #player-detail-view .route-header-actions .profile-edit-button,
    #song-detail-view .route-header-actions .profile-edit-button {
      min-height: 38px !important;
      padding: 9px 10px !important;
    }
  }


  /* v30.0.15 Classic Dark UI Phase 9: integrated song detail page.
     Make chart pages feel less like stacked bordered widgets and more like one
     continuous dark ranking surface. */
  #song-detail-view {
    --song-line: rgba(104,128,171,.105);
    --song-line-strong: rgba(91,179,255,.34);
    --song-muted: #7f8da5;
    --song-text: #eef4ff;
  }

  #song-detail-view #song-detail-content {
    background:
      linear-gradient(180deg, rgba(5,9,16,.58), rgba(3,6,12,.70));
    border-top: 1px solid rgba(104,128,171,.10);
    border-bottom: 1px solid rgba(104,128,171,.08);
  }

  #song-detail-view .song-hero {
    margin: 0 !important;
    padding: 22px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #song-detail-view .song-hero::before,
  #song-detail-view .song-hero::after {
    opacity: .035 !important;
  }

  #song-detail-view .song-hero-title {
    margin: 0 !important;
    padding: 0 22px !important;
    color: var(--song-text) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-shadow: none !important;
    letter-spacing: -.04em !important;
    font-size: clamp(30px, 4.6vw, 50px) !important;
    line-height: 1.02 !important;
  }

  #song-detail-view .song-hero-meta {
    margin: 9px 0 0 !important;
    padding: 0 22px !important;
    color: #98a7bd !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  #song-detail-view .song-hero-info-row {
    margin-top: 15px !important;
    padding: 0 22px 16px !important;
    border-bottom: 1px solid var(--song-line) !important;
    background: transparent !important;
  }

  #song-detail-view .song-hero-info-row .song-badges {
    gap: 0 !important;
    margin: 0 !important;
  }

  #song-detail-view .song-hero-info-row .song-badges .pill,
  #song-detail-view .song-hero-info-row .song-badges .pill.stars {
    min-height: 24px !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-left: 1px solid rgba(104,128,171,.18) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #aebbd1 !important;
    box-shadow: none !important;
  }

  #song-detail-view .song-hero-info-row .song-badges .pill:first-child {
    border-left-color: rgba(91,179,255,.42) !important;
    color: #dce8fb !important;
  }

  #song-detail-view .song-hero-info-row .song-badges .pill.stars {
    color: #ffd979 !important;
    border-left-color: rgba(255,211,105,.38) !important;
    text-shadow: none !important;
  }


  /* v30.0.119: local chart thumbnails shared by song/artist/mapper group. */
  #song-detail-view .song-hero-top {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 0 22px !important;
  }
  #song-detail-view .song-hero-cover {
    width: 132px;
    height: 132px;
    border-radius: 18px;
    border: 1px solid rgba(137, 171, 255, .18);
    background:
      linear-gradient(135deg, rgba(80, 105, 255, .18), rgba(30, 206, 255, .08)),
      radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .16), transparent 20%),
      rgba(7, 12, 26, .92);
    display: grid;
    place-items: center;
    color: rgba(216, 232, 255, .74);
    font-size: 34px;
    font-weight: 900;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }
  #song-detail-view .song-hero-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  #song-detail-view .song-hero-cover.has-image {
    background: rgba(4, 8, 18, .94);
  }
  #song-detail-view .song-hero-title-block {
    min-width: 0;
  }
  #song-detail-view .song-hero-top .song-hero-title,
  #song-detail-view .song-hero-top .song-hero-meta {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  @media (max-width: 720px) {
    #song-detail-view .song-hero-top {
      grid-template-columns: 86px minmax(0, 1fr);
      gap: 12px;
    }
    #song-detail-view .song-hero-cover {
      width: 86px;
      height: 86px;
      border-radius: 14px;
      font-size: 24px;
    }
  }

  /* v30.0.115: Same song/artist/mapper chart pages share one difficulty switcher. */
  #song-detail-view .song-hero-info-row .song-badges.song-difficulty-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  #song-detail-view .song-difficulty-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }
  #song-detail-view .song-difficulty-label {
    color: #8f9db4;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .02em;
    margin-right: 2px;
  }
  #song-detail-view .song-diff-chip {
    min-height: 27px;
    padding: 5px 9px;
    font-size: 10.5px;
    letter-spacing: .01em;
    opacity: .58;
    filter: saturate(.56) brightness(.76);
    transform: scale(.96);
    transform-origin: center;
    transition:
      opacity .14s ease,
      filter .14s ease,
      transform .14s ease,
      border-color .14s ease,
      box-shadow .14s ease,
      background .14s ease;
  }
  #song-detail-view .song-diff-chip:not(.active):hover,
  #song-detail-view .song-diff-chip:not(.active):focus-visible {
    opacity: .82;
    filter: saturate(.80) brightness(.92);
    transform: scale(.99);
  }
  #song-detail-view .song-diff-chip.active {
    cursor: default;
    opacity: 1;
    min-height: 32px;
    padding: 7px 12px;
    font-size: 11.5px;
    filter: saturate(1.18) brightness(1.08);
    transform: scale(1.04);
    border-color: rgba(248, 252, 255, .84);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .18),
      0 0 0 1px rgba(255, 255, 255, .12),
      0 0 18px rgba(118, 189, 255, .16);
  }
  #song-detail-view .song-diff-chip small {
    opacity: .78;
    font-size: 10px;
    font-weight: 850;
  }
  #song-detail-view .song-diff-chip.active small {
    opacity: .94;
  }
  @media (max-width: 720px) {
    #song-detail-view .song-hero-info-row {
      align-items: flex-start !important;
      flex-direction: column !important;
    }
    #song-detail-view .song-hero-actions {
      align-self: flex-end;
    }
  }

  #song-detail-view .song-hero-actions .favorite-button {
    min-height: 28px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-left: 1px solid rgba(104,128,171,.22) !important;
    background: transparent !important;
    color: #93a0b4 !important;
    box-shadow: none !important;
  }

  #song-detail-view .song-hero-actions .favorite-button:hover {
    color: #eef4ff !important;
    background: rgba(91,179,255,.04) !important;
  }

  #song-detail-view .song-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 22px !important;
    border-bottom: 1px solid var(--song-line) !important;
    background: rgba(3,6,12,.24) !important;
  }

  #song-detail-view .song-stat {
    min-height: 72px !important;
    padding: 14px 13px !important;
    border: 0 !important;
    border-left: 1px solid var(--song-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #song-detail-view .song-stat:first-child {
    border-left: 0 !important;
  }

  #song-detail-view .song-stat span {
    color: var(--song-muted) !important;
    font-size: 9.5px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }

  #song-detail-view .song-stat strong {
    margin-top: 7px !important;
    color: #e3ecfb !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -.015em !important;
  }

  #song-detail-view .song-tabs {
    margin: 0 !important;
    padding: 0 22px !important;
    gap: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--song-line) !important;
    border-radius: 0 !important;
    background: rgba(4,7,13,.30) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #song-detail-view .song-tab {
    min-height: 42px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #7f8da5 !important;
    box-shadow: none !important;
    font-size: 12px !important;
  }

  #song-detail-view .song-tab:hover {
    color: #dce7fb !important;
    background: rgba(91,179,255,.045) !important;
  }

  #song-detail-view .song-tab.active {
    color: #f5f8ff !important;
    background: linear-gradient(180deg, rgba(91,179,255,.058), rgba(91,179,255,.015)) !important;
    box-shadow: inset 0 -2px 0 rgba(91,179,255,.72) !important;
  }

  #song-detail-view .song-overview-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr) !important;
    gap: 0 !important;
    border-bottom: 1px solid var(--song-line) !important;
    background: rgba(4,7,13,.28) !important;
  }

  #song-detail-view .song-panel {
    border: 0 !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--song-line) !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #song-detail-view .song-panel:nth-child(2),
  #song-detail-view .song-related-panel {
    border-right: 0 !important;
  }

  #song-detail-view .song-related-panel {
    border-top: 1px solid var(--song-line) !important;
  }

  #song-detail-view .song-panel h3 {
    margin: 0 !important;
    padding: 13px 18px !important;
    border-bottom: 1px solid var(--song-line) !important;
    background: transparent !important;
    color: #dce6f6 !important;
    font-size: 12px !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
  }

  #song-detail-view .song-ranking-row,
  #song-detail-view .song-recent-row {
    position: relative !important;
    padding: 11px 18px !important;
    border-bottom-color: rgba(104,128,171,.075) !important;
    background: transparent !important;
  }

  #song-detail-view .song-ranking-row::before,
  #song-detail-view .song-recent-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: transparent;
  }

  #song-detail-view .song-ranking-row:hover,
  #song-detail-view .song-recent-row:hover,
  #song-detail-view .song-ranking-table tr.click:hover {
    background: rgba(91,179,255,.038) !important;
  }

  #song-detail-view .song-ranking-row:hover::before,
  #song-detail-view .song-recent-row:hover::before {
    background: rgba(91,179,255,.58);
  }

  #song-detail-view .song-ranking-position {
    width: 28px !important;
    height: 22px !important;
    border: 0 !important;
    border-left: 1px solid rgba(91,179,255,.36) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #b8c8e4 !important;
    font-size: 11px !important;
    box-shadow: none !important;
  }

  #song-detail-view .song-ranking-row:first-child .song-ranking-position {
    border-left-color: rgba(255,211,105,.48) !important;
    color: #ffe08a !important;
    background: transparent !important;
  }

  #song-detail-view .song-ranking-name,
  #song-detail-view .activity-title {
    color: #eef4ff !important;
  }

  #song-detail-view .song-ranking-sub,
  #song-detail-view .activity-meta,
  #song-detail-view .song-ranking-score small,
  #song-detail-view .activity-values small {
    color: #7f8da5 !important;
  }

  #song-detail-view .song-ranking-score strong,
  #song-detail-view .activity-values strong {
    color: #e6efff !important;
    font-variant-numeric: tabular-nums !important;
  }

  #song-detail-view .song-ranking-footer {
    padding: 10px 18px 14px !important;
    border-top: 1px solid rgba(104,128,171,.075) !important;
  }

  #song-detail-view .song-ranking-more {
    min-height: 30px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-left: 1px solid rgba(91,179,255,.34) !important;
    background: transparent !important;
    color: #9eabc1 !important;
    box-shadow: none !important;
  }

  #song-detail-view .song-ranking-more:hover {
    color: #eef4ff !important;
    background: rgba(91,179,255,.045) !important;
  }

  #song-detail-view .song-related-grid,
  #song-detail-view .song-gallery,
  #song-detail-view .song-statistics-grid {
    padding: 18px 22px !important;
  }

  #song-detail-view .song-related-card,
  #song-detail-view .screenshot-card,
  #song-detail-view .statistics-chart-card,
  #song-detail-view .stat-chart {
    border: 0 !important;
    border-left: 1px solid rgba(104,128,171,.14) !important;
    border-radius: 0 !important;
    background: rgba(5,9,16,.40) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #song-detail-view .song-related-card:hover,
  #song-detail-view .screenshot-card:hover {
    border-left-color: rgba(91,179,255,.58) !important;
    background: rgba(91,179,255,.035) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #song-detail-view .song-ranking-table-scroll {
    border: 0 !important;
    border-bottom: 1px solid var(--song-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #song-detail-view .song-ranking-table {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #song-detail-view .song-ranking-table th {
    background: rgba(7,12,22,.64) !important;
    border-bottom-color: var(--song-line) !important;
    color: #8f9db3 !important;
    text-align: center !important;
  }

  #song-detail-view .song-ranking-table td {
    border-bottom-color: rgba(104,128,171,.075) !important;
    background: transparent !important;
  }

  #song-detail-view .song-ranking-table .num,
  #song-detail-view .song-ranking-table th.num {
    text-align: center !important;
  }

  #song-detail-view .song-ranking-table .nick {
    text-align: left !important;
  }

  #song-detail-view .home-stats {
    margin: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--song-line) !important;
    background: rgba(4,7,13,.28) !important;
  }

  #song-detail-view .home-stats .home-stat {
    border-color: rgba(104,128,171,.09) !important;
    background: transparent !important;
  }

  @media (max-width: 900px) {
    #song-detail-view .song-stat-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #song-detail-view .song-stat:nth-child(3n + 1) {
      border-left: 0 !important;
    }

    #song-detail-view .song-overview-grid,
    #song-detail-view .song-statistics-grid {
      grid-template-columns: 1fr !important;
    }

    #song-detail-view .song-panel {
      border-right: 0 !important;
      border-bottom: 1px solid var(--song-line) !important;
    }

    #song-detail-view .song-panel:last-child {
      border-bottom: 0 !important;
    }
  }

  @media (max-width: 640px) {
    #song-detail-view .song-hero-title,
    #song-detail-view .song-hero-meta,
    #song-detail-view .song-hero-info-row,
    #song-detail-view .song-stat-grid,
    #song-detail-view .song-tabs {
      padding-left: 14px !important;
      padding-right: 14px !important;
    }

    #song-detail-view .song-stat-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #song-detail-view .song-stat:nth-child(odd) {
      border-left: 0 !important;
    }

    #song-detail-view .song-stat:nth-child(3n + 1):not(:nth-child(odd)) {
      border-left: 1px solid var(--song-line) !important;
    }

    #song-detail-view .song-tab {
      min-height: 40px !important;
      padding: 0 12px !important;
    }

    #song-detail-view .song-related-grid,
    #song-detail-view .song-gallery,
    #song-detail-view .song-statistics-grid {
      padding: 14px !important;
    }
  }


  /* v30.0.16 Classic Dark UI Phase 9.1: song-detail interaction fix.
     Phase 9 flattened the chart page, but some decorative layers could sit in
     the pointer path on certain layouts. Keep the visual style, but make all
     decoration transparent to clicks and force real controls above the surface. */
  #song-detail-view .song-hero::before,
  #song-detail-view .song-hero::after,
  #song-detail-view .song-ranking-row::before,
  #song-detail-view .song-ranking-row::after,
  #song-detail-view .song-recent-row::before,
  #song-detail-view .song-recent-row::after,
  #song-detail-view .song-panel::before,
  #song-detail-view .song-panel::after,
  #song-detail-view .song-related-card::before,
  #song-detail-view .song-related-card::after,
  #song-detail-view .screenshot-card::before,
  #song-detail-view .screenshot-card::after,
  #song-detail-view .song-tabs::before,
  #song-detail-view .song-tabs::after,
  #song-detail-view .song-overview-grid::before,
  #song-detail-view .song-overview-grid::after,
  #song-detail-view .song-ranking-table-scroll::before,
  #song-detail-view .song-ranking-table-scroll::after,
  #song-detail-view #song-detail-content::before,
  #song-detail-view #song-detail-content::after {
    pointer-events: none !important;
  }

  #song-detail-view .route-back-button,
  #song-detail-view .share-button,
  #song-detail-view .favorite-button,
  #song-detail-view .song-tab,
  #song-detail-view .song-ranking-more,
  #song-detail-view .song-ranking-row,
  #song-detail-view .song-recent-row,
  #song-detail-view .song-related-card,
  #song-detail-view .screenshot-card,
  #song-detail-view .song-ranking-table tr.click {
    position: relative !important;
    z-index: 6 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  #song-detail-view .song-hero,
  #song-detail-view .song-hero-info-row,
  #song-detail-view .song-hero-actions,
  #song-detail-view .song-tabs,
  #song-detail-view .song-panel,
  #song-detail-view .song-ranking-preview,
  #song-detail-view .song-related-grid,
  #song-detail-view .song-gallery,
  #song-detail-view .song-ranking-table,
  #song-detail-view .song-ranking-table tbody {
    pointer-events: auto !important;
  }

  #song-detail-view .song-tab:focus-visible,
  #song-detail-view .song-ranking-more:focus-visible,
  #song-detail-view .favorite-button:focus-visible,
  #song-detail-view .song-related-card:focus-visible,
  #song-detail-view .screenshot-card:focus-visible,
  #song-detail-view .song-ranking-row:focus-visible,
  #song-detail-view .song-recent-row:focus-visible,
  #song-detail-view .song-ranking-table tr.click:focus-visible {
    outline: 1px solid rgba(91,179,255,.62) !important;
    outline-offset: 2px !important;
  }


  /* v30.0.17 Classic Dark UI Phase 9.2: song difficulty / stars badge readability.
     Keep the integrated chart-page look, but make the key chart badges readable at a glance. */
  #song-detail-view .song-hero-info-row {
    align-items: center !important;
    gap: 16px !important;
  }

  #song-detail-view .song-hero-info-row .song-badges {
    gap: 8px !important;
    align-items: center !important;
  }

  #song-detail-view .song-hero-info-row .song-badges .pill,
  #song-detail-view .song-hero-info-row .song-badges .pill.stars {
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(104,128,171,.22) !important;
    border-left: 2px solid rgba(91,179,255,.46) !important;
    border-radius: 2px !important;
    background:
      linear-gradient(180deg, rgba(13,20,34,.70), rgba(6,10,18,.52)) !important;
    color: #e5edf8 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .025em !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
    text-shadow: none !important;
  }

  #song-detail-view .song-hero-info-row .song-badges .pill:first-child {
    color: #f3f8ff !important;
    border-left-color: rgba(91,179,255,.70) !important;
    background:
      linear-gradient(180deg, rgba(16,28,48,.76), rgba(7,12,22,.58)) !important;
  }

  #song-detail-view .song-hero-info-row .song-badges .pill.stars {
    color: #ffe08a !important;
    border-left-color: rgba(255,211,105,.70) !important;
    font-size: 16px !important;
    font-variant-numeric: tabular-nums !important;
  }

  @media (max-width: 680px) {
    #song-detail-view .song-hero-info-row .song-badges {
      gap: 6px !important;
    }

    #song-detail-view .song-hero-info-row .song-badges .pill,
    #song-detail-view .song-hero-info-row .song-badges .pill.stars {
      min-height: 32px !important;
      padding: 0 11px !important;
      font-size: 14px !important;
    }

    #song-detail-view .song-hero-info-row .song-badges .pill.stars {
      font-size: 15px !important;
    }
  }


  /* v30.0.18 Classic Dark UI Phase 10: registered chart catalog integration.
     Make the chart list feel like one continuous dark catalog instead of separated cards. */
  #tab-songs #song-list-view {
    --catalog-line: rgba(116, 145, 196, .14);
    --catalog-line-strong: rgba(116, 145, 196, .22);
    --catalog-blue: rgba(91, 179, 255, .72);
  }

  #tab-songs #songs-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #tab-songs #song-list-view .chart-filter-panel {
    padding: 0 !important;
    margin: 0 0 16px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #tab-songs #song-list-view .chart-filter-summary {
    min-height: 48px !important;
    padding: 0 0 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--catalog-line-strong) !important;
    box-shadow: none !important;
  }

  #tab-songs #song-list-view .chart-filter-title {
    color: #edf4ff !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
  }

  #tab-songs #song-list-view .chart-filter-copy {
    color: rgba(184, 197, 220, .76) !important;
    font-size: 11px !important;
  }

  #tab-songs #song-list-view .chart-filter-toggle {
    min-height: 34px !important;
    padding: 0 12px !important;
    background: #080d18 !important;
    border: 1px solid rgba(116, 145, 196, .24) !important;
    border-left: 2px solid rgba(91, 179, 255, .46) !important;
    color: #dfeaff !important;
    box-shadow: none !important;
  }

  #tab-songs #song-list-view .chart-filter-toggle:hover {
    background: #101a2c !important;
    border-color: rgba(91, 179, 255, .46) !important;
    border-left-color: rgba(91, 179, 255, .82) !important;
    transform: none !important;
  }

  #tab-songs #song-list-view .chart-filter-body {
    margin-top: 0 !important;
    padding: 14px 0 4px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--catalog-line) !important;
    box-shadow: none !important;
  }

  #tab-songs #song-list-view .chart-filter-field label {
    margin-left: 0 !important;
    color: rgba(184, 197, 220, .74) !important;
    font-size: 10px !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
  }

  #tab-songs #song-list-view .chart-filter-field input,
  #tab-songs #song-list-view .chart-filter-field select,
  #tab-songs #song-list-view .chart-range-inputs input {
    min-height: 38px !important;
    background: #050812 !important;
    border: 1px solid rgba(116, 145, 196, .18) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
  }

  #tab-songs #song-list-view .chart-filter-field input:focus,
  #tab-songs #song-list-view .chart-filter-field select:focus,
  #tab-songs #song-list-view .chart-range-inputs input:focus {
    border-color: rgba(91, 179, 255, .56) !important;
    box-shadow: inset 2px 0 0 rgba(91, 179, 255, .74) !important;
  }

  #tab-songs #song-list-view .chart-filter-footer {
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(116, 145, 196, .12) !important;
  }

  #tab-songs #song-list-view .filter-chip {
    min-height: 24px !important;
    padding: 0 8px !important;
    border-radius: 2px !important;
    background: rgba(91, 179, 255, .055) !important;
    border: 1px solid rgba(91, 179, 255, .18) !important;
    color: #cbd9ee !important;
  }

  #tab-songs #songs-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: #070b14 !important;
    border: 0 !important;
    border-top: 1px solid var(--catalog-line-strong) !important;
    border-bottom: 1px solid var(--catalog-line-strong) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #tab-songs #song-list-view thead tr {
    background: #080d18 !important;
  }

  #tab-songs #song-list-view th {
    height: 38px !important;
    padding: 0 13px !important;
    background: #080d18 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(116, 145, 196, .24) !important;
    color: rgba(184, 197, 220, .86) !important;
    font-size: 11px !important;
    font-weight: 820 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  #tab-songs #song-list-view th.title-cell {
    text-align: left !important;
  }

  #tab-songs #song-list-view th.sortable {
    cursor: pointer;
  }

  #tab-songs #song-list-view th.sortable:hover,
  #tab-songs #song-list-view th.sortable.active {
    color: #ffffff !important;
    background: #0b1220 !important;
    box-shadow: inset 0 -2px 0 rgba(91, 179, 255, .72) !important;
  }

  #tab-songs #song-list-view tbody tr {
    position: relative !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color .14s ease, box-shadow .14s ease !important;
  }

  #tab-songs #song-list-view tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, .012) !important;
  }

  #tab-songs #song-list-view tbody tr:hover {
    background: #0c1424 !important;
    box-shadow: inset 2px 0 0 var(--catalog-blue) !important;
    filter: none !important;
  }

  #tab-songs #song-list-view tbody tr::before,
  #tab-songs #song-list-view tbody tr::after {
    pointer-events: none !important;
  }

  #tab-songs #song-list-view td {
    padding: 12px 13px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(116, 145, 196, .105) !important;
    color: #d8e3f5 !important;
    vertical-align: middle !important;
  }

  #tab-songs #song-list-view tbody tr:last-child td {
    border-bottom: 0 !important;
  }

  #tab-songs #song-list-view td:not(.title-cell),
  #tab-songs #song-list-view th:not(.title-cell) {
    text-align: center !important;
  }

  #tab-songs #song-list-view .title-cell {
    cursor: pointer;
  }

  #tab-songs #song-list-view .title-cell .title {
    color: #f3f7ff !important;
    font-size: 15px !important;
    font-weight: 780 !important;
    letter-spacing: .005em !important;
    text-shadow: none !important;
  }

  #tab-songs #song-list-view tbody tr:hover .title-cell .title {
    color: #ffffff !important;
    text-shadow: none !important;
  }

  #tab-songs #song-list-view .title-cell .meta {
    margin-top: 4px !important;
    color: rgba(184, 197, 220, .70) !important;
    font-size: 12px !important;
  }

  #tab-songs #song-list-view .pill {
    min-width: 74px !important;
    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    background: #0b1220 !important;
    border: 1px solid rgba(116, 145, 196, .22) !important;
    border-left: 2px solid rgba(91, 179, 255, .50) !important;
    border-radius: 2px !important;
    color: #e8f1ff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  #tab-songs #song-list-view td.stars,
  #tab-songs #song-list-view td:nth-child(3) {
    color: #ffdf86 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    font-variant-numeric: tabular-nums !important;
  }

  #tab-songs #song-list-view td:nth-child(4) {
    color: #edf4ff !important;
    font-weight: 780 !important;
    font-variant-numeric: tabular-nums !important;
  }

  #tab-songs #song-list-view td.optional {
    color: rgba(184, 197, 220, .62) !important;
    font-size: 12px !important;
  }

  #tab-songs #songs-pager {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(116, 145, 196, .14) !important;
    color: rgba(184, 197, 220, .82) !important;
  }

  #tab-songs #songs-pager .btn,
  #tab-songs #songs-pager button {
    min-height: 34px !important;
    background: #080d18 !important;
    border: 1px solid rgba(116, 145, 196, .22) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
  }

  #tab-songs #songs-pager .btn:not(:disabled):hover,
  #tab-songs #songs-pager button:not(:disabled):hover {
    background: #101a2c !important;
    border-color: rgba(91, 179, 255, .44) !important;
  }

  @media (max-width: 760px) {
    #tab-songs #song-list-view .chart-filter-summary {
      gap: 8px !important;
    }

    #tab-songs #song-list-view .chart-filter-body {
      padding-top: 12px !important;
    }

    #tab-songs #songs-content {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
    }

    #tab-songs #songs-content table {
      min-width: 720px !important;
    }

    #tab-songs #song-list-view th,
    #tab-songs #song-list-view td {
      padding-left: 10px !important;
      padding-right: 10px !important;
    }

    #tab-songs #song-list-view .title-cell .title {
      font-size: 14px !important;
    }
  }


  /* v30.0.19 Classic Dark UI Phase 11: Home as a classic ranking dashboard.
     Keep the existing data/API flow, but make the landing page read less like
     separate cards and more like one integrated competitive service front page. */
  .home-dashboard {
    gap: 16px;
  }

  .home-hero {
    min-height: 188px !important;
    padding: 24px 26px !important;
    border-radius: 3px !important;
    background:
      linear-gradient(180deg, rgba(8, 13, 24, .92), rgba(4, 7, 13, .98)) padding-box !important;
    border-color: rgba(89, 114, 154, .12) !important;
  }

  .home-hero::after {
    opacity: .18 !important;
    filter: blur(24px) !important;
  }

  .home-hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
    gap: 24px;
    min-height: 132px;
  }

  .home-kicker {
    color: #7f9bc9 !important;
    letter-spacing: 1.8px;
  }

  .home-title {
    max-width: 760px;
    color: #f3f6ff !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    font-size: clamp(30px, 4vw, 50px);
    letter-spacing: -.035em;
  }

  .home-copy {
    max-width: 760px;
    color: #9faec9 !important;
  }

  .home-actions {
    margin-top: 18px;
  }

  .home-actions button,
  .home-discord-button,
  .home-pp-entry-body button {
    border-radius: 3px !important;
    background: rgba(4, 8, 15, .78) !important;
    border-color: rgba(98, 126, 172, .20) !important;
    box-shadow: none !important;
  }

  .home-actions button.primary,
  .home-discord-button,
  .home-pp-entry-body button {
    border-color: rgba(86, 163, 255, .34) !important;
    background: linear-gradient(180deg, rgba(13, 28, 52, .88), rgba(5, 10, 18, .94)) !important;
  }

  .home-discord-card {
    border-radius: 3px !important;
    background: rgba(3, 7, 13, .55) !important;
    border-color: rgba(98, 126, 172, .12) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .home-discord-card::after {
    display: none !important;
  }

  .home-discord-icon {
    border-radius: 3px !important;
    box-shadow: none !important;
  }

  .home-command-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 14px;
    align-items: stretch;
  }

  .home-stat-rail {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 !important;
    padding: 0;
    border-top: 1px solid rgba(97, 119, 158, .13);
    border-bottom: 1px solid rgba(97, 119, 158, .13);
    background: rgba(3, 7, 13, .45);
  }

  .home-stat-rail .home-stat {
    min-height: 78px;
    padding: 14px 18px !important;
    border: 0 !important;
    border-right: 1px solid rgba(97, 119, 158, .12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .home-stat-rail .home-stat:last-child {
    border-right: 0 !important;
  }

  .home-stat-rail .home-stat::after {
    display: none !important;
  }

  .home-stat-rail .home-stat .label {
    display: block;
    color: #70809d !important;
    font-size: 11px !important;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .home-stat-rail .home-stat .value {
    margin-top: 8px !important;
    color: #f3f7ff !important;
    font-size: clamp(24px, 3vw, 35px) !important;
    font-weight: 850 !important;
    letter-spacing: -.035em;
  }

  .home-top-players-panel,
  .home-pp-entry-panel,
  .home-activity-grid .home-panel,
  .home-stack .home-panel {
    border-radius: 3px !important;
    border-color: rgba(97, 119, 158, .12) !important;
    background: rgba(3, 7, 13, .48) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .home-panel-head {
    min-height: 43px;
    padding: 0 15px !important;
    background: rgba(2, 5, 10, .42) !important;
    border-bottom: 1px solid rgba(97, 119, 158, .12) !important;
  }

  .home-panel-head h2 {
    color: #dbe6fa;
    font-size: 12px !important;
    font-weight: 820;
    letter-spacing: .14em !important;
    text-transform: uppercase;
  }

  .home-panel-head button {
    min-height: 28px;
    padding: 0 8px;
    border-left: 1px solid rgba(97, 119, 158, .14) !important;
    color: #8fb2e7 !important;
  }

  .home-top-players-list {
    display: grid;
  }

  .home-top-player-row {
    position: relative;
    display: grid;
    grid-template-columns: 46px 42px minmax(0, 1fr) minmax(92px, auto);
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(97, 119, 158, .105);
    cursor: pointer;
  }

  .home-top-player-row:last-child {
    border-bottom: 0;
  }

  .home-top-player-row::before,
  .activity-card::before,
  .chart-activity-card::before,
  .community-link-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: rgba(78, 157, 255, 0);
    transition: background .16s ease;
    pointer-events: none;
  }

  .home-top-player-row:hover,
  .activity-card:hover,
  .chart-activity-card:hover {
    transform: none !important;
    background: rgba(29, 47, 78, .18) !important;
  }

  .home-top-player-row:hover::before,
  .activity-card:hover::before,
  .chart-activity-card:hover::before,
  .community-link-card:hover::before {
    background: rgba(79, 159, 255, .74);
  }

  .home-top-player-rank {
    color: #7d8ba6;
    font-size: 13px;
    font-weight: 850;
    text-align: center;
  }

  .home-top-player-rank.top1 { color: #f2c86d; }
  .home-top-player-rank.top2 { color: #c9d6e8; }
  .home-top-player-rank.top3 { color: #d79a75; }

  .home-top-player-avatar,
  .home-top-player-avatar .lb-avatar,
  .home-top-player-avatar img {
    width: 40px;
    height: 40px;
  }

  .home-top-player-avatar {
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid rgba(97, 119, 158, .24);
    background: #050914;
  }

  .home-top-player-avatar .lb-avatar {
    border-radius: 0;
  }

  .home-top-player-main {
    min-width: 0;
  }

  .home-top-player-name {
    overflow: hidden;
    color: #edf3ff;
    font-size: 14px;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-top-player-meta {
    margin-top: 4px;
    overflow: hidden;
    color: #6f7f9b;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-top-player-pp {
    color: #e8f2ff;
    font-size: 18px;
    font-weight: 860;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .home-top-player-pp small {
    color: #7889a5;
    font-size: 11px;
    font-weight: 650;
  }

  .home-pp-entry-panel {
    display: grid;
  }

  .home-pp-entry-body {
    display: grid;
    align-content: center;
    gap: 10px;
    min-height: 210px;
    padding: 18px;
  }

  .home-pp-entry-kicker {
    color: #70809d;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .16em;
  }

  .home-pp-entry-body strong {
    color: #f0f6ff;
    font-size: 22px;
    line-height: 1.15;
  }

  .home-pp-entry-body p {
    margin: 0;
    color: #93a3bd;
    font-size: 12px;
    line-height: 1.6;
  }

  .home-pp-entry-body button {
    justify-self: start;
    min-height: 36px;
    padding: 0 12px;
    color: #d6e8ff;
    cursor: pointer;
  }

  .home-competition-feed {
    grid-template-columns: minmax(0, 1.22fr) minmax(320px, .78fr) !important;
    gap: 14px !important;
  }

  .home-stack {
    gap: 14px !important;
  }

  .activity-card,
  .chart-activity-card {
    position: relative;
    border-bottom-color: rgba(97, 119, 158, .105) !important;
  }

  .activity-avatar {
    border-radius: 3px !important;
    border-color: rgba(97,119,158,.24) !important;
    box-shadow: none !important;
  }

  .activity-title {
    color: #e7edf8 !important;
  }

  .activity-meta {
    color: #71809b !important;
  }

  .activity-values small,
  .chart-count {
    color: #94b6e9 !important;
  }

  .chart-count {
    border: 0 !important;
    border-left: 1px solid rgba(97,119,158,.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .chart-badges .pill {
    border-radius: 3px !important;
    background: rgba(5, 10, 18, .78) !important;
    border-color: rgba(97,119,158,.16) !important;
  }

  .community-links {
    gap: 0 !important;
    border-top: 1px solid rgba(97, 119, 158, .12);
    border-bottom: 1px solid rgba(97, 119, 158, .12);
    background: rgba(3, 7, 13, .42);
  }

  .community-link-card {
    min-height: 86px !important;
    border: 0 !important;
    border-right: 1px solid rgba(97,119,158,.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .community-link-card:last-child {
    border-right: 0 !important;
  }

  .community-link-card:hover {
    background: rgba(29, 47, 78, .18) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  @media (max-width: 940px) {
    .home-command-grid,
    .home-competition-feed {
      grid-template-columns: 1fr !important;
    }

    .home-stat-rail {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-stat-rail .home-stat:nth-child(2n) {
      border-right: 0 !important;
    }

    .home-stat-rail .home-stat:nth-child(n+3) {
      border-top: 1px solid rgba(97,119,158,.12) !important;
    }
  }

  @media (max-width: 640px) {
    .home-hero {
      padding: 18px !important;
    }

    .home-hero-layout {
      grid-template-columns: 1fr;
      padding-top: 48px;
    }

    .home-title {
      font-size: 30px;
    }

    .home-stat-rail {
      grid-template-columns: 1fr 1fr;
    }

    .home-top-player-row {
      grid-template-columns: 34px 38px minmax(0, 1fr);
    }

    .home-top-player-pp {
      grid-column: 2 / 4;
      text-align: left;
      font-size: 15px;
    }

    .activity-card {
      grid-template-columns: 42px minmax(0, 1fr);
    }

    .activity-values {
      grid-column: 2;
      min-width: 0;
      text-align: left;
    }

    .community-links {
      grid-template-columns: 1fr !important;
    }

    .community-link-card {
      border-right: 0 !important;
      border-bottom: 1px solid rgba(97,119,158,.12) !important;
    }

    .community-link-card:last-child {
      border-bottom: 0 !important;
    }
  }


  /* v30.0.20 Classic Dark UI Phase 12: integrated statistics dashboard.
     Reduce boxed-card feeling and make statistics read like one dark analysis surface. */
  #tab-statistics #statistics-content {
    max-width: 1180px;
    margin: 0 auto;
  }

  #tab-statistics .statistics-page {
    gap: 18px;
  }

  #tab-statistics .statistics-hero {
    padding: 8px 0 19px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(104,128,171,.18) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #tab-statistics .statistics-kicker {
    color: #7f8da7 !important;
    font-size: 10px !important;
    letter-spacing: 1.55px !important;
  }

  #tab-statistics .statistics-title {
    margin: 8px 0 6px !important;
    color: #f4f7ff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    font-size: clamp(27px, 3.5vw, 42px) !important;
    letter-spacing: -.035em;
  }

  #tab-statistics .statistics-copy {
    max-width: 820px;
    color: #93a1b8 !important;
    line-height: 1.7;
  }

  #tab-statistics .statistics-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(104,128,171,.14);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(7,11,20,.78), rgba(4,7,13,.82));
    box-shadow: none;
  }

  #tab-statistics .statistics-card {
    position: relative;
    min-height: 82px;
    padding: 15px 17px 14px !important;
    border: 0 !important;
    border-right: 1px solid rgba(104,128,171,.11) !important;
    border-bottom: 1px solid rgba(104,128,171,.10) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #tab-statistics .statistics-card:nth-child(4n) {
    border-right: 0 !important;
  }

  #tab-statistics .statistics-card:nth-last-child(-n + 4) {
    border-bottom: 0 !important;
  }

  #tab-statistics .statistics-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    bottom: 13px;
    width: 2px;
    background: rgba(91,179,255,.16);
    opacity: 0;
    transition: opacity .16s ease;
    pointer-events: none;
  }

  #tab-statistics .statistics-card:hover::before {
    opacity: 1;
  }

  #tab-statistics .statistics-card:hover {
    background: rgba(91,179,255,.035) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #tab-statistics .statistics-card span {
    color: #77849c !important;
    font-size: 10px !important;
    font-weight: 750;
    letter-spacing: .62px;
    text-transform: uppercase;
  }

  #tab-statistics .statistics-card strong {
    margin-top: 8px !important;
    color: #f6f8ff !important;
    font-size: clamp(22px, 2.5vw, 31px) !important;
    font-weight: 850;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
  }

  #tab-statistics .statistics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(104,128,171,.13);
    border-radius: 0;
    background: rgba(4,7,13,.74);
  }

  #tab-statistics .statistics-panel {
    overflow: hidden;
    min-width: 0;
    border: 0 !important;
    border-right: 1px solid rgba(104,128,171,.10) !important;
    border-bottom: 1px solid rgba(104,128,171,.10) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #tab-statistics .statistics-grid .statistics-panel:nth-child(2n),
  #tab-statistics .statistics-grid .statistics-panel:last-child {
    border-right: 0 !important;
  }

  #tab-statistics .statistics-grid .statistics-panel:nth-last-child(-n + 2) {
    border-bottom: 0 !important;
  }

  #tab-statistics .statistics-panel h3 {
    padding: 13px 16px 11px !important;
    border-bottom: 1px solid rgba(104,128,171,.10) !important;
    color: #d7deef;
    font-size: 12px !important;
    font-weight: 850;
    letter-spacing: .85px;
    text-transform: uppercase;
  }

  #tab-statistics .statistics-bars {
    padding: 10px 16px 15px !important;
  }

  #tab-statistics .bar-row {
    grid-template-columns: 96px minmax(0, 1fr) 54px;
    gap: 12px;
    margin: 11px 0;
    color: #8f9cb3;
    font-size: 11px;
  }

  #tab-statistics .bar-row > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #tab-statistics .bar-track {
    height: 6px !important;
    border-radius: 0 !important;
    background: rgba(104,128,171,.13) !important;
  }

  #tab-statistics .bar-fill {
    border-radius: 0 !important;
    background: linear-gradient(90deg, rgba(91,179,255,.82), rgba(151,123,255,.72)) !important;
    box-shadow: none !important;
  }

  #tab-statistics .bar-row b {
    color: #dce4f6;
    text-align: right;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  #tab-statistics .statistics-list-row {
    padding: 11px 16px !important;
    border-bottom: 1px solid rgba(104,128,171,.08) !important;
    background: transparent !important;
  }

  #tab-statistics .statistics-list-row:hover {
    background: rgba(91,179,255,.035) !important;
    box-shadow: inset 2px 0 0 rgba(91,179,255,.20);
  }

  #tab-statistics .statistics-list-row b {
    color: #dce4f6 !important;
    font-weight: 760;
  }

  #tab-statistics .statistics-list-row span {
    color: #dce4f6 !important;
    font-size: 11px;
    font-weight: 820;
    font-variant-numeric: tabular-nums;
  }

  #tab-statistics .statistics-page > .statistics-panel {
    border: 1px solid rgba(104,128,171,.13) !important;
    background: rgba(4,7,13,.74) !important;
  }

  #tab-statistics .statistics-popular {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 !important;
    padding: 0 !important;
  }

  #tab-statistics .statistics-chart-card {
    position: relative;
    min-height: 116px;
    padding: 15px 16px !important;
    border: 0 !important;
    border-right: 1px solid rgba(104,128,171,.10) !important;
    border-bottom: 1px solid rgba(104,128,171,.10) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background .16s ease, box-shadow .16s ease;
  }

  #tab-statistics .statistics-chart-card:nth-child(2n) {
    border-right: 0 !important;
  }

  #tab-statistics .statistics-chart-card:hover {
    background: rgba(91,179,255,.04) !important;
    box-shadow: inset 2px 0 0 rgba(91,179,255,.24) !important;
    transform: none !important;
  }

  #tab-statistics .statistics-chart-card .activity-title {
    color: #f4f7ff;
    font-size: 14px;
    font-weight: 820;
  }

  #tab-statistics .statistics-chart-card .activity-meta {
    color: #8f9cb3;
    font-size: 11px;
  }

  #tab-statistics .statistics-chart-card .chart-badges {
    margin-top: 12px;
  }

  #tab-statistics .statistics-chart-card .pill {
    border-radius: 0 !important;
    background: rgba(104,128,171,.10) !important;
    border-color: rgba(104,128,171,.14) !important;
  }

  @media (max-width: 900px) {
    #tab-statistics .statistics-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #tab-statistics .statistics-card:nth-child(4n) {
      border-right: 1px solid rgba(104,128,171,.11) !important;
    }

    #tab-statistics .statistics-card:nth-child(2n) {
      border-right: 0 !important;
    }

    #tab-statistics .statistics-card:nth-last-child(-n + 4) {
      border-bottom: 1px solid rgba(104,128,171,.10) !important;
    }

    #tab-statistics .statistics-card:nth-last-child(-n + 2) {
      border-bottom: 0 !important;
    }

    #tab-statistics .statistics-grid,
    #tab-statistics .statistics-popular {
      grid-template-columns: 1fr;
    }

    #tab-statistics .statistics-grid .statistics-panel,
    #tab-statistics .statistics-chart-card {
      border-right: 0 !important;
    }

    #tab-statistics .statistics-grid .statistics-panel:nth-last-child(-n + 2) {
      border-bottom: 1px solid rgba(104,128,171,.10) !important;
    }

    #tab-statistics .statistics-grid .statistics-panel:last-child,
    #tab-statistics .statistics-chart-card:last-child {
      border-bottom: 0 !important;
    }
  }

  @media (max-width: 560px) {
    #tab-statistics .statistics-summary {
      grid-template-columns: 1fr;
    }

    #tab-statistics .statistics-card {
      border-right: 0 !important;
    }

    #tab-statistics .statistics-card:nth-last-child(-n + 2) {
      border-bottom: 1px solid rgba(104,128,171,.10) !important;
    }

    #tab-statistics .statistics-card:last-child {
      border-bottom: 0 !important;
    }

    #tab-statistics .bar-row {
      grid-template-columns: 82px minmax(0, 1fr) 44px;
      gap: 8px;
    }
  }

  .pp-compare-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
  }

  .pp-compare-head h4 {
    margin: 0 0 4px;
    color: #eef5ff;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .pp-compare-head p {
    margin: 0;
    color: #8fa2c3;
    font-size: 12px;
    line-height: 1.55;
  }

  .pp-compare-stars {
    flex: 0 0 auto;
    border-left: 2px solid rgba(87, 176, 255, .7);
    padding: 3px 0 3px 10px;
    color: #dce8ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    white-space: nowrap;
  }

  .pp-table-scroll {
    width: 100%;
    overflow-x: auto;
  }

  .pp-compare-table {
    min-width: 420px;
  }

  .pp-compare-table th,
  .pp-compare-table td {
    text-align: center;
  }

  .pp-compare-table th:first-child,
  .pp-compare-table td:first-child {
    text-align: left;
  }

  .pp-compare-table td:nth-child(2) {
    color: #f5f8ff;
    font-weight: 900;
  }

  .pp-compare-table td:nth-child(3) {
    color: #9edcff;
    font-weight: 850;
  }

  .pp-compare-table .pp-compare-max td {
    background: rgba(95, 170, 255, .07);
    color: #ffffff;
  }

  @media (max-width: 560px) {
    .pp-compare-head {
      display: grid;
      gap: 8px;
    }
    .pp-compare-stars {
      justify-self: start;
    }
  }


  /* v30.0.22 Classic Dark UI Phase 14: mobile polish.
     Make the classic dark layout feel intentional on narrow screens without changing data or routes. */
  @media (max-width: 820px) {
    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

    body::after {
      opacity: .20;
    }

    .site-topbar {
      width: 100% !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 10px 10px 9px !important;
      border-left: 0 !important;
      border-right: 0 !important;
      border-radius: 0 !important;
      grid-template-columns: 1fr !important;
      gap: 9px !important;
    }

    .top-brand {
      min-width: 0 !important;
      width: 100%;
      padding: 0 !important;
      justify-content: flex-start;
    }

    .top-brand-mark {
      width: 34px !important;
      height: 34px !important;
      border-radius: 3px !important;
    }

    .top-brand-copy {
      min-width: 0;
    }

    .top-brand-copy h1 {
      font-size: 16px !important;
      letter-spacing: .02em !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .top-brand-copy .sub {
      max-width: 100%;
      font-size: 10px !important;
      line-height: 1.25;
      white-space: nowrap !important;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .top-search-wrap,
    .top-search {
      width: 100% !important;
      min-width: 0 !important;
    }

    .top-search {
      height: 40px !important;
      border-radius: 3px !important;
    }

    .global-search-results {
      left: 10px !important;
      right: 10px !important;
      width: auto !important;
      max-height: min(68vh, 520px) !important;
    }

    .hero-header {
      width: 100% !important;
      margin: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
      border-radius: 0 !important;
    }

    nav {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 8px !important;
      border-left: 0 !important;
      border-right: 0 !important;
      border-radius: 0 !important;
      gap: 0 !important;
      overflow-x: auto;
      overflow-y: hidden;
      justify-content: flex-start !important;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

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

    nav button {
      flex: 0 0 auto;
      min-height: 40px;
      padding: 0 12px !important;
      border-radius: 0 !important;
      font-size: 12px !important;
      white-space: nowrap;
    }

    main {
      width: 100%;
      max-width: none !important;
      padding: 13px 10px 52px !important;
    }

    main > section {
      min-width: 0;
    }

    .filters,
    .chart-filter-panel,
    .leaderboard-toolbar,
    .profile-filterbar,
    .random-filter-panel,
    .pp-hero,
    .pp-card,
    .pp-simulator,
    .statistics-hero,
    .home-hero,
    .song-hero,
    .profile-hero {
      border-left: 0 !important;
      border-right: 0 !important;
      border-radius: 0 !important;
    }

    .filters,
    .profile-filterbar {
      display: grid !important;
      grid-template-columns: 1fr;
      gap: 8px !important;
    }

    .filters input,
    .filters select,
    .profile-filterbar input,
    .profile-filterbar select,
    .chart-filter-field input,
    .chart-filter-field select,
    .pp-field input {
      width: 100% !important;
      min-height: 42px;
      font-size: 16px !important;
    }

    .filters .right {
      margin-left: 0 !important;
      text-align: left;
    }

    .route-header {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px !important;
      align-items: center !important;
      padding: 0 0 10px !important;
      margin: 0 0 12px !important;
    }

    .route-header-left {
      display: flex !important;
      align-items: center !important;
      min-width: 0;
      gap: 8px !important;
    }

    .route-back-button,
    .route-header .share-button,
    .route-header-actions .share-button {
      min-height: 34px !important;
      padding: 0 9px !important;
      flex: 0 0 auto;
      font-size: 11px !important;
      white-space: nowrap;
    }

    .route-breadcrumb {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px !important;
    }

    .route-header-actions {
      justify-self: end;
      min-width: 0;
    }

    .leaderboard-toolbar {
      display: grid !important;
      grid-template-columns: 1fr;
      gap: 9px !important;
      padding: 0 0 12px !important;
    }

    .leaderboard-mode-switch {
      width: 100% !important;
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0 !important;
    }

    .leaderboard-mode-button {
      min-width: 0 !important;
      min-height: 40px !important;
      padding: 0 6px !important;
      text-align: center;
      justify-content: center;
      font-size: 11px !important;
    }

    #tab-leaderboard .leaderboard-toolbar #lb-count {
      justify-self: start;
      margin-left: 0 !important;
      font-size: 11px !important;
    }

    .leaderboard-mobile-list {
      gap: 8px !important;
    }

    .leaderboard-mobile-card {
      padding: 11px 10px !important;
      border-left: 0 !important;
      border-right: 0 !important;
      border-radius: 0 !important;
    }

    .leaderboard-mobile-metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 0 !important;
      overflow: hidden;
      border: 1px solid rgba(104,128,171,.12);
      background: rgba(3, 6, 12, .34);
    }

    .leaderboard-mobile-metric {
      border-right: 1px solid rgba(104,128,171,.10);
      border-radius: 0 !important;
      background: transparent !important;
      min-width: 0;
    }

    .leaderboard-mobile-metric:nth-child(2n) {
      border-right: 0;
    }

    .leaderboard-mobile-metric:nth-child(-n+2) {
      border-bottom: 1px solid rgba(104,128,171,.10);
    }

    .leaderboard-mobile-metric-label,
    .leaderboard-mobile-metric-value {
      text-align: center !important;
    }

    .home-title,
    .profile-name,
    .song-hero-title,
    .statistics-title,
    .pp-title {
      letter-spacing: -.035em !important;
    }

    .home-hero-layout,
    .home-command-grid,
    .home-competition-feed,
    .profile-main,
    .profile-overview-grid,
    .song-overview-grid,
    .pp-grid,
    #tab-statistics .statistics-grid,
    #tab-statistics .statistics-popular {
      grid-template-columns: 1fr !important;
    }

    .home-hero {
      padding: 16px 10px !important;
    }

    .home-title {
      font-size: clamp(28px, 10vw, 36px) !important;
      line-height: 1.02 !important;
    }

    .home-stat-rail {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .home-stat-rail .home-stat {
      min-height: 76px !important;
      padding: 12px 10px !important;
    }

    .home-stat-rail .home-stat .value {
      font-size: clamp(23px, 8vw, 30px) !important;
    }

    .profile-hero {
      padding: 0 0 14px !important;
    }

    .profile-main {
      gap: 12px !important;
      align-items: start !important;
    }

    .profile-avatar-wrap,
    .profile-main .avatar {
      width: 72px !important;
      height: 72px !important;
    }

    .profile-name {
      font-size: clamp(24px, 8vw, 32px) !important;
      line-height: 1.06 !important;
    }

    .profile-rank-line {
      gap: 6px !important;
      row-gap: 6px !important;
    }

    .profile-tabs,
    .song-tabs {
      width: 100%;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding: 0 !important;
      gap: 0 !important;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .profile-tab,
    .song-tab {
      flex: 0 0 auto;
      min-height: 42px !important;
      padding: 0 13px !important;
      border-radius: 0 !important;
      font-size: 11px !important;
      white-space: nowrap;
    }

    #song-detail-view .song-hero {
      padding: 0 0 14px !important;
    }

    #song-detail-view .song-hero-title {
      font-size: clamp(25px, 8vw, 34px) !important;
      line-height: 1.08 !important;
    }

    #song-detail-view .song-hero-info-row {
      display: grid !important;
      grid-template-columns: 1fr;
      gap: 10px !important;
      align-items: start !important;
    }

    #song-detail-view .song-hero-info-row .song-badges {
      width: 100%;
      display: flex !important;
      flex-wrap: wrap;
      gap: 7px !important;
    }

    #song-detail-view .song-hero-info-row .song-badges .pill,
    #song-detail-view .song-hero-info-row .song-badges .pill.stars {
      min-height: 32px !important;
      padding: 0 12px !important;
      font-size: 13px !important;
    }

    #song-detail-view .song-hero-actions,
    #song-detail-view .song-hero-actions .favorite-button {
      width: 100%;
    }

    #song-detail-view .song-stat-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 0 !important;
      border-top: 1px solid rgba(104,128,171,.12);
      border-left: 1px solid rgba(104,128,171,.10);
    }

    #song-detail-view .song-stat {
      min-height: 70px !important;
      padding: 12px 10px !important;
      border-right: 1px solid rgba(104,128,171,.10) !important;
      border-bottom: 1px solid rgba(104,128,171,.10) !important;
    }

    .chart-filter-summary,
    .chart-filter-footer,
    .chart-filter-actions {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 9px !important;
      align-items: stretch !important;
    }

    .chart-filter-toggle,
    .chart-filter-actions .btn {
      width: 100% !important;
      min-height: 42px !important;
    }

    .chart-filter-grid,
    .pp-form-grid,
    .pp-result-breakdown {
      grid-template-columns: 1fr !important;
    }

    .pp-hero,
    .pp-card,
    .pp-simulator {
      padding: 15px 10px !important;
    }

    .pp-title {
      font-size: clamp(26px, 9vw, 34px) !important;
    }

    .pp-result-main strong {
      font-size: clamp(31px, 12vw, 44px) !important;
    }

    .pp-table-scroll,
    .profile-table-scroll,
    .leaderboard-table-scroll,
    #tab-songs #songs-content {
      margin-left: -10px;
      margin-right: -10px;
      padding-left: 10px;
      padding-right: 10px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    footer .row {
      display: grid !important;
      grid-template-columns: 1fr;
      gap: 9px !important;
      text-align: left;
    }

    footer .links {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 2px;
      -webkit-overflow-scrolling: touch;
    }

    footer .links a {
      flex: 0 0 auto;
      min-height: 32px;
      border-radius: 0 !important;
      white-space: nowrap;
    }
  }

  @media (max-width: 460px) {
    main {
      padding-left: 8px !important;
      padding-right: 8px !important;
    }

    nav button {
      min-height: 38px;
      padding: 0 10px !important;
      font-size: 11px !important;
    }

    .route-header {
      grid-template-columns: 1fr;
    }

    .route-header-actions {
      justify-self: stretch;
    }

    .route-header-actions .share-actions,
    .route-header-actions .share-button {
      width: 100%;
    }

    .home-stat-rail,
#song-detail-view .song-stat-grid,
#tab-statistics .statistics-summary {
      grid-template-columns: 1fr !important;
    }

    .leaderboard-mobile-header {
      grid-template-columns: 34px minmax(0, 1fr) !important;
      gap: 8px !important;
    }

    .leaderboard-mobile-rank {
      width: 34px !important;
      height: 34px !important;
    }

    #tab-leaderboard .leaderboard-mobile-metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #tab-leaderboard .leaderboard-mobile-metric {
      border-right: 1px solid rgba(104,128,171,.10) !important;
      border-bottom: 0 !important;
    }

    #tab-leaderboard .leaderboard-mobile-metric:nth-child(2n) {
      border-right: 0 !important;
    }

    #tab-leaderboard .leaderboard-mobile-metric:nth-child(-n+2) {
      border-bottom: 1px solid rgba(104,128,171,.10) !important;
    }

    #song-detail-view .song-hero-info-row .song-badges .pill,
    #song-detail-view .song-hero-info-row .song-badges .pill.stars {
      flex: 1 1 auto;
      justify-content: center;
      text-align: center;
    }

    .pp-compare-table {
      min-width: 360px !important;
    }
  }


  /* v30.0.23 Classic Dark UI maintenance.
     This block consolidates the final dark-ui interaction layer after the phased
     redesign. It intentionally keeps the current look, but centralizes click
     safety and shared surface behavior so future CSS additions are less likely
     to break buttons, tabs, cards or route controls. */
  :root {
    --classic-bg-0: #05070d;
    --classic-bg-1: #080d18;
    --classic-surface-0: #0a101d;
    --classic-surface-1: #0c1424;
    --classic-line: rgba(118, 148, 198, .16);
    --classic-line-soft: rgba(118, 148, 198, .09);
    --classic-accent: rgba(91, 179, 255, .74);
    --classic-accent-soft: rgba(91, 179, 255, .18);
  }

  :where(button, [role="button"], a, .song-ranking-row, .song-recent-row, .song-related-card, .screenshot-card, tr.click) {
    touch-action: manipulation;
  }

  :where(button, [role="button"], a, input, select, textarea, summary, .profile-tab, .song-tab, .route-back-button, .share-button, .favorite-button):focus-visible {
    outline: 1px solid var(--classic-accent) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px var(--classic-accent-soft) !important;
  }

  :where(.route-header, .profile-tabs, .song-tabs, .leaderboard-mode-switch, .chart-filter-panel, .random-filter-panel) {
    border-color: var(--classic-line-soft) !important;
    box-shadow: none !important;
  }


  /* v30.0.24: Classic Dark CSS consolidation + Private Score visibility guard.
     This block is the canonical final surface/interaction layer for the dark UI.
     It avoids removing legacy rules in-place, but centralizes the shared look so
     future tweaks can happen here without adding another scattered override set. */
  :root {
    --classic-bg-0: #030713;
    --classic-bg-1: #07101d;
    --classic-surface: rgba(7, 12, 22, 0.82);
    --classic-surface-soft: rgba(10, 17, 30, 0.64);
    --classic-divider: rgba(123, 151, 195, 0.16);
    --classic-divider-strong: rgba(129, 164, 222, 0.24);
    --classic-text: #e8eefb;
    --classic-muted: #8190a9;
    --classic-accent: #70a7ff;
    --classic-accent-soft: rgba(112, 167, 255, 0.14);
    --classic-radius: 2px;
    --classic-radius-soft: 4px;
  }

  :where(.profile-tabs, .song-tabs, .leaderboard-mode-switch, .tabs, .nav-tabs) {
    background: rgba(5, 10, 18, 0.66);
    border-color: var(--classic-divider);
    border-radius: var(--classic-radius);
    box-shadow: none;
  }

  :where(.profile-tab, .song-tab, [data-leaderboard-mode], .tab, .btn, button, input, select) {
    border-radius: var(--classic-radius);
  }

  :where(button, a, input, select, textarea, [role=button], .click, .mini-play,
    .song-ranking-row, .song-recent-row, .song-related-card, .screenshot-card,
    .home-top-player-row, .activity-card, .chart-activity-card, .community-link-card,
    .route-back-button, .share-button, .favorite-button, .profile-tab, .song-tab,
    [data-leaderboard-mode]) {
    position: relative;
    z-index: 3;
  }

  .private-score-guard,
[data-private-score="true"] .score-value,
[data-private-score="true"] .accuracy-value {
    color: var(--classic-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
  }


  /* v30.0.29 PP guide readability: clearer simulator, flatter classic panels, fewer competing boxes. */
  .pp-guide-v2 {
    gap: 16px !important;
  }

  .pp-guide-v2 .pp-hero,
  .pp-guide-v2 .pp-card,
  .pp-guide-v2 .pp-simulator,
  .pp-guide-v2 .pp-lab-shell {
    border-radius: 0 !important;
    border-color: rgba(105, 132, 176, .14) !important;
    background: rgba(5, 8, 15, .72) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .pp-hero-v2 {
    padding: 24px 0 18px !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
  }

  .pp-hero-v2 .pp-title {
    margin-top: 8px;
    color: #f5f7ff !important;
    background: none !important;
    -webkit-text-fill-color: currentColor;
    text-shadow: none !important;
    font-size: clamp(30px, 4vw, 46px);
    letter-spacing: -.035em;
  }

  .pp-hero-v2 .pp-copy {
    max-width: 980px;
    color: #9eacc5;
    font-size: 14px;
    line-height: 1.8;
  }

  .pp-quick-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 18px;
    border-top: 1px solid rgba(105, 132, 176, .14);
    border-bottom: 1px solid rgba(105, 132, 176, .14);
    background: rgba(6, 10, 18, .58);
  }

  .pp-quick-step {
    min-width: 0;
    padding: 13px 14px;
    border-right: 1px solid rgba(105, 132, 176, .10);
  }

  .pp-quick-step:last-child {
    border-right: 0;
  }

  .pp-quick-step b {
    display: block;
    color: #5d90cf;
    font-size: 10px;
    letter-spacing: .12em;
  }

  .pp-quick-step span {
    display: block;
    margin-top: 4px;
    color: #eef4ff;
    font-size: 13px;
    font-weight: 820;
  }

  .pp-quick-step small {
    display: block;
    margin-top: 4px;
    color: #7f8ca5;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pp-lab-shell {
    display: grid;
    grid-template-columns: minmax(320px, .86fr) minmax(360px, 1.14fr);
    gap: 0;
    overflow: hidden;
  }

  .pp-lab-left,
  .pp-result-card-v2 {
    padding: 20px;
  }

  .pp-lab-left {
    border-right: 1px solid rgba(105, 132, 176, .12);
  }

  .pp-section-heading {
    margin-bottom: 14px;
  }

  .pp-section-heading > span {
    display: block;
    color: #6d85aa;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .pp-section-heading h3 {
    margin: 5px 0 0 !important;
    color: #f2f6ff;
    font-size: 20px !important;
    line-height: 1.2;
  }

  .pp-section-heading p {
    margin: 8px 0 0 !important;
    color: #9aa8c1 !important;
    line-height: 1.65 !important;
  }

  .pp-form-grid-v2 {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .pp-guide-v2 .pp-field input {
    border-radius: 0 !important;
    height: 44px;
    background: rgba(2, 5, 11, .86) !important;
    border-color: rgba(105, 132, 176, .18) !important;
    box-shadow: none !important;
    font-size: 15px;
    font-weight: 760;
  }

  .pp-guide-v2 .pp-field input:focus {
    border-color: rgba(105, 178, 255, .58) !important;
    box-shadow: inset 2px 0 0 rgba(105, 178, 255, .58) !important;
  }

  .pp-check-v2 {
    border-radius: 0 !important;
    background: rgba(6, 10, 18, .62) !important;
    border-color: rgba(105, 132, 176, .14) !important;
  }

  .pp-current-strip {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 14px;
    border-top: 1px solid rgba(105, 132, 176, .12);
    border-bottom: 1px solid rgba(105, 132, 176, .12);
  }

  .pp-current-strip div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(105, 132, 176, .08);
  }

  .pp-current-strip div:last-child {
    border-bottom: 0;
  }

  .pp-current-strip span {
    color: #7d8da8;
    font-size: 12px;
    font-weight: 780;
  }

  .pp-current-strip strong {
    color: #eaf3ff;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
  }

  .pp-result-card-v2 {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(70, 130, 210, .10), transparent 46%),
      rgba(4, 7, 13, .74) !important;
  }

  .pp-result-main-v2 {
    display: grid !important;
    gap: 8px;
    justify-content: stretch !important;
    align-items: start !important;
  }

  .pp-result-main-v2 span {
    color: #6f86aa !important;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .pp-result-main-v2 strong {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: currentColor;
    text-shadow: none !important;
    font-size: clamp(38px, 7vw, 64px) !important;
    font-variant-numeric: tabular-nums;
  }

  .pp-result-subline {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    padding: 10px 0 12px;
    border-top: 1px solid rgba(105, 132, 176, .11);
    border-bottom: 1px solid rgba(105, 132, 176, .11);
  }

  .pp-result-subline span {
    color: #7d8da8;
    font-size: 12px;
    font-weight: 780;
  }

  .pp-result-subline b {
    color: #b7d8ff;
    font-size: 12px;
    font-weight: 900;
  }

  .pp-result-breakdown-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin-top: 0 !important;
    border-bottom: 1px solid rgba(105, 132, 176, .10);
  }

  .pp-result-breakdown-v2 .pp-breakdown-item {
    border: 0 !important;
    border-right: 1px solid rgba(105, 132, 176, .08) !important;
    border-bottom: 1px solid rgba(105, 132, 176, .08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 12px 0 12px 12px !important;
  }

  .pp-result-breakdown-v2 .pp-breakdown-item:nth-child(2n) {
    border-right: 0 !important;
    padding-left: 16px !important;
  }

  .pp-result-breakdown-v2 .pp-breakdown-wide {
    grid-column: 1 / -1;
    border-right: 0 !important;
  }

  .pp-result-breakdown-v2 .pp-breakdown-label {
    color: #6e7f9c !important;
    font-size: 10px !important;
  }

  .pp-result-breakdown-v2 .pp-breakdown-value {
    color: #edf5ff !important;
    font-size: 13px;
  }

  .pp-flow-card-v2,
  .pp-compare-card-v2,
  .pp-noarrow-card-v2,
  .pp-curve-grid-v2 .pp-card {
    padding: 20px !important;
    border-radius: 0 !important;
  }

  .pp-flow-list-v2 {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(105, 132, 176, .12);
  }

  .pp-flow-row-v2 {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(105, 132, 176, .10);
  }

  .pp-flow-row-v2 b {
    color: #5f8dcc;
    font-size: 11px;
    letter-spacing: .12em;
    font-weight: 900;
  }

  .pp-flow-row-v2 strong {
    display: block;
    color: #ecf2ff;
    font-size: 14px;
  }

  .pp-flow-row-v2 span {
    display: block;
    margin-top: 3px;
    color: #8d9bb5;
    font-size: 12px;
    line-height: 1.55;
  }

  .pp-guide-v2 .pp-table {
    border-radius: 0 !important;
    border-top: 1px solid rgba(105, 132, 176, .12);
  }

  .pp-guide-v2 .pp-table th {
    background: rgba(105, 132, 176, .055);
    color: #7f91ad;
    font-size: 10px;
  }

  .pp-guide-v2 .pp-table td {
    color: #dce7f8;
    font-size: 13px;
  }

  .pp-curve-table-v2 td:nth-child(2) {
    color: #eef5ff;
    font-weight: 900;
  }

  .pp-curve-table-v2 td:nth-child(2) em {
    margin: 0 8px;
    color: #536276;
    font-style: normal;
  }

  .pp-compare-card-v2 {
    margin-top: 0 !important;
  }

  .pp-compare-card-v2 .pp-compare-head h4 {
    font-size: 15px;
  }

  .pp-compare-table .pp-compare-max td {
    background: rgba(105, 178, 255, .08) !important;
    box-shadow: inset 2px 0 0 rgba(105, 178, 255, .34);
  }

  .pp-noarrow-anchors .pp-pill {
    border-radius: 0 !important;
    background: rgba(105, 132, 176, .07) !important;
    border-color: rgba(105, 132, 176, .14) !important;
  }

  @media (max-width: 900px) {
    .pp-quick-flow,
    .pp-lab-shell {
      grid-template-columns: 1fr !important;
    }

    .pp-lab-left {
      border-right: 0;
      border-bottom: 1px solid rgba(105, 132, 176, .12);
    }

    .pp-quick-step {
      border-right: 0;
      border-bottom: 1px solid rgba(105, 132, 176, .10);
    }

    .pp-quick-step:last-child {
      border-bottom: 0;
    }
  }

  @media (max-width: 560px) {
    .pp-hero-v2 {
      padding-top: 18px !important;
    }

    .pp-lab-left,
    .pp-result-card-v2,
    .pp-flow-card-v2,
    .pp-compare-card-v2,
    .pp-noarrow-card-v2,
    .pp-curve-grid-v2 .pp-card {
      padding: 16px !important;
    }

    .pp-form-grid-v2,
    .pp-result-breakdown-v2 {
      grid-template-columns: 1fr !important;
    }

    .pp-result-breakdown-v2 .pp-breakdown-item,
    .pp-result-breakdown-v2 .pp-breakdown-item:nth-child(2n) {
      border-right: 0 !important;
      padding-left: 0 !important;
    }

    .pp-flow-row-v2 {
      grid-template-columns: 34px minmax(0, 1fr);
    }
  }


  /* v30.0.30: Primary navigation polish.
     Make the global tab bar feel like one classic ScoreSaber-style control,
     with larger readable labels, less boxed-button noise, and clearer active state. */
  nav {
    width: min(1280px, calc(100% - 32px)) !important;
    min-height: 48px !important;
    margin: 12px auto 0 !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(112, 167, 255, .32) transparent;
    background:
      linear-gradient(180deg, rgba(8, 14, 25, .98), rgba(4, 8, 16, .98)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(128, 161, 214, .14) !important;
    border-bottom: 1px solid rgba(128, 161, 214, .24) !important;
    border-radius: 0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 14px 34px rgba(0,0,0,.22) !important;
    backdrop-filter: none !important;
  }

  nav::-webkit-scrollbar {
    height: 3px;
  }

  nav::-webkit-scrollbar-track {
    background: transparent;
  }

  nav::-webkit-scrollbar-thumb {
    background: rgba(112, 167, 255, .26);
    border-radius: 999px;
  }

  nav button {
    position: relative !important;
    flex: 0 0 auto !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-right: 1px solid rgba(128, 161, 214, .09) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #a4b0c6 !important;
    box-shadow: none !important;
    font-size: 14.5px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: .015em !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition:
      color .14s ease,
      background-color .14s ease,
      border-color .14s ease,
      transform .14s ease !important;
  }

  nav button:first-child {
    border-left: 1px solid rgba(128, 161, 214, .09) !important;
  }

  nav button::before {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    top: 0;
    height: 1px;
    background: transparent;
    pointer-events: none;
  }

  nav button::after {
    content: '';
    position: absolute;
    left: 14px !important;
    right: 14px !important;
    bottom: 0 !important;
    height: 2px !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
    transform: none !important;
    opacity: 1 !important;
  }

  nav button:hover {
    color: #f0f5ff !important;
    background: rgba(112, 167, 255, .075) !important;
    transform: none !important;
  }

  nav button.active {
    top: 0 !important;
    color: #ffffff !important;
    background:
      linear-gradient(180deg, rgba(19, 31, 52, .92), rgba(10, 17, 30, .86)) !important;
    border-color: rgba(128, 161, 214, .13) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 -1px 0 rgba(112, 167, 255, .12) !important;
  }

  nav button.active::before {
    background: rgba(112, 167, 255, .56);
  }

  nav button.active::after {
    background: #70a7ff !important;
    box-shadow: 0 0 10px rgba(112, 167, 255, .30) !important;
  }

  nav button:focus-visible {
    outline: 1px solid rgba(112, 167, 255, .74) !important;
    outline-offset: -4px !important;
    box-shadow: inset 0 0 0 1px rgba(112, 167, 255, .22) !important;
  }

  body.detail-route nav {
    margin-top: 0 !important;
  }

  @media (max-width: 900px) {
    nav {
      width: 100% !important;
      margin-top: 8px !important;
      padding: 0 8px !important;
      min-height: 44px !important;
    }

    nav button {
      min-height: 44px !important;
      padding: 0 14px !important;
      font-size: 13.5px !important;
      font-weight: 760 !important;
      letter-spacing: .005em !important;
    }

    nav button::before,
    nav button::after {
      left: 10px !important;
      right: 10px !important;
    }
  }

  @media (max-width: 520px) {
    nav {
      padding: 0 6px !important;
      min-height: 42px !important;
      border-top-color: rgba(128, 161, 214, .10) !important;
      border-bottom-color: rgba(128, 161, 214, .20) !important;
    }

    nav button {
      min-height: 42px !important;
      padding: 0 12px !important;
      font-size: 13px !important;
    }
  }


  /* v30.0.35: Player profile tab usability polish.
     Make the profile tabs easier to press while keeping the integrated classic dark rail. */
  #player-detail-view .profile-tabs {
    min-height: var(--profile-ui-tabs-min-height, 50px) !important;
    margin: var(--profile-ui-tabs-margin-top, 18px) 0 var(--profile-ui-tabs-margin-bottom, 6px) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: linear-gradient(180deg, rgba(7, 12, 22, .78), rgba(4, 7, 13, .70)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(104, 128, 171, .16) !important;
    border-bottom: 1px solid rgba(104, 128, 171, .18) !important;
    border-radius: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  #player-detail-view .profile-tabs::-webkit-scrollbar {
    display: none !important;
  }

  #player-detail-view .profile-tab {
    position: relative !important;
    min-height: var(--profile-ui-tab-min-height, 50px) !important;
    padding: 0 var(--profile-ui-tab-padding-x, 20px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    border: 0 !important;
    border-right: 1px solid rgba(104, 128, 171, .10) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #9eabc0 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    letter-spacing: .015em !important;
    text-transform: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: none !important;
    touch-action: manipulation !important;
  }

  #player-detail-view .profile-tab:last-child {
    border-right: 0 !important;
  }

  #player-detail-view .profile-tab::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    background: transparent;
    pointer-events: none;
  }

  #player-detail-view .profile-tab:hover {
    color: #edf5ff !important;
    background: rgba(91, 179, 255, .055) !important;
  }

  #player-detail-view .profile-tab:active {
    background: rgba(91, 179, 255, .10) !important;
  }

  #player-detail-view .profile-tab.active {
    color: #ffffff !important;
    background: linear-gradient(180deg, rgba(91, 179, 255, .09), rgba(91, 179, 255, .025)) !important;
    box-shadow: inset 0 1px 0 rgba(91, 179, 255, .24) !important;
  }

  #player-detail-view .profile-tab.active::after {
    background: rgba(91, 179, 255, .86);
  }

  @media (max-width: 760px) {
    #player-detail-view .profile-tabs {
      min-height: var(--profile-ui-tabs-min-height, 48px) !important;
      margin-top: var(--profile-ui-tabs-margin-top, 14px) !important;
      margin-bottom: var(--profile-ui-tabs-margin-bottom, 4px) !important;
      -webkit-overflow-scrolling: touch;
    }

    #player-detail-view .profile-tab {
      min-height: var(--profile-ui-tab-min-height, 48px) !important;
      padding: 0 var(--profile-ui-tab-padding-x, 17px) !important;
      font-size: 12px !important;
      letter-spacing: .01em !important;
    }
  }


  /* v30.0.36: Classic Dark profile prestige restoration.
     The prestige class logic was still alive, but later Classic Dark rules were suppressing
     the aurora frame, name glow, avatar aura, and milestone effects. Keep normal profiles
     flat and only re-enable the special visuals for eligible public profiles. */
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99,
  #player-detail-view .profile-hero.achievement-profile-effect-plays-1000,
  #player-detail-view .profile-hero.achievement-profile-effect-plays-1500,
  #player-detail-view .profile-hero.achievement-profile-effect-plays-2000 {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    isolation: isolate !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98 {
    background:
      linear-gradient(180deg, rgba(8, 13, 23, .88), rgba(4, 7, 13, .96)) padding-box,
      linear-gradient(115deg, rgba(255, 240, 181, .58), rgba(255, 111, 190, .46), rgba(119, 229, 255, .40), rgba(134, 255, 215, .34)) border-box !important;
    background-size: 100% 100%, 220% 220% !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      inset 0 -1px 0 rgba(119,229,255,.13),
      0 0 0 1px rgba(255,255,255,.018),
      0 0 28px rgba(255, 111, 190, .13),
      0 0 44px rgba(91, 218, 255, .11) !important;
    animation: profileAccuracyBorderFlow 8s ease-in-out infinite alternate !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99 {
    background:
      linear-gradient(180deg, rgba(8, 13, 23, .90), rgba(4, 7, 13, .97)) padding-box,
      linear-gradient(108deg, rgba(255, 251, 212, .74), rgba(255, 210, 78, .68), rgba(255, 94, 183, .62), rgba(178, 119, 255, .58), rgba(58, 225, 255, .58), rgba(125, 255, 212, .48), rgba(255, 239, 140, .68)) border-box !important;
    background-size: 100% 100%, 300% 300% !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      inset 0 -1px 0 rgba(87,232,255,.18),
      0 0 0 1px rgba(255,255,255,.025),
      0 0 26px rgba(255, 205, 78, .14),
      0 0 46px rgba(255, 78, 176, .18),
      0 0 66px rgba(57, 225, 255, .15) !important;
    animation:
      profileAccuracyBorderMax 5.4s linear infinite,
      profileAccuracyHeroPulse 2.8s ease-in-out infinite alternate !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-plays-1000:not(.achievement-profile-effect-accuracy-97):not(.achievement-profile-effect-accuracy-98):not(.achievement-profile-effect-accuracy-99) {
    background:
      linear-gradient(180deg, rgba(8, 13, 23, .87), rgba(4, 7, 13, .96)) padding-box,
      linear-gradient(120deg, rgba(255, 160, 213, .28), rgba(195, 139, 255, .22), rgba(114, 215, 255, .18)) border-box !important;
    box-shadow: 0 0 26px rgba(255, 130, 202, .10), 0 0 42px rgba(190, 126, 255, .07) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-plays-1500:not(.achievement-profile-effect-accuracy-97):not(.achievement-profile-effect-accuracy-98):not(.achievement-profile-effect-accuracy-99) {
    background:
      linear-gradient(180deg, rgba(8, 13, 23, .88), rgba(4, 7, 13, .96)) padding-box,
      linear-gradient(120deg, rgba(255, 146, 207, .36), rgba(194, 130, 255, .30), rgba(113, 219, 255, .24)) border-box !important;
    box-shadow: 0 0 30px rgba(255, 127, 199, .14), 0 0 50px rgba(188, 119, 255, .10), 0 0 64px rgba(91, 218, 255, .06) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-plays-2000:not(.achievement-profile-effect-accuracy-97):not(.achievement-profile-effect-accuracy-98):not(.achievement-profile-effect-accuracy-99) {
    background:
      linear-gradient(180deg, rgba(8, 13, 23, .89), rgba(4, 7, 13, .97)) padding-box,
      linear-gradient(115deg, rgba(255, 139, 205, .45), rgba(200, 126, 255, .42), rgba(111, 228, 255, .36), rgba(255, 214, 237, .34)) border-box !important;
    box-shadow: 0 0 34px rgba(255, 115, 197, .18), 0 0 58px rgba(187, 108, 255, .14), 0 0 76px rgba(91, 220, 255, .10) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-1000,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-1500,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-2000 {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 -1px 0 rgba(119,229,255,.15),
      0 0 28px rgba(255, 199, 80, .11),
      0 0 42px rgba(255, 91, 188, .17),
      0 0 60px rgba(64, 224, 255, .14) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-1000,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-1500,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-2000 {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 -1px 0 rgba(87,232,255,.20),
      0 0 28px rgba(255, 207, 74, .18),
      0 0 50px rgba(255, 62, 174, .22),
      0 0 70px rgba(31, 220, 255, .18),
      0 0 92px rgba(140, 55, 255, .10) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98::before,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99::before,
  #player-detail-view .profile-hero.achievement-profile-effect-plays-1000::before,
  #player-detail-view .profile-hero.achievement-profile-effect-plays-1500::before,
  #player-detail-view .profile-hero.achievement-profile-effect-plays-2000::before {
    z-index: 0 !important;
    opacity: .82 !important;
    background:
      linear-gradient(90deg, rgba(91,179,255,.30), transparent 2px),
      radial-gradient(ellipse at 6% 14%, rgba(91,179,255,.14), transparent 31%),
      radial-gradient(ellipse at 92% 3%, rgba(255,118,196,.11), transparent 35%),
      radial-gradient(ellipse at 62% 110%, rgba(141,124,255,.085), transparent 36%) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99::before {
    opacity: .94 !important;
    background:
      linear-gradient(90deg, rgba(255,211,86,.42), transparent 2px),
      radial-gradient(ellipse at 7% 13%, rgba(255,211,86,.16), transparent 28%),
      radial-gradient(ellipse at 93% 2%, rgba(255,92,183,.16), transparent 32%),
      radial-gradient(ellipse at 58% 110%, rgba(54,225,255,.13), transparent 36%) !important;
  }

  #player-detail-view .profile-hero .profile-prestige-accuracy,
  #player-detail-view .profile-hero .profile-prestige-plays {
    z-index: 1 !important;
    mix-blend-mode: screen;
  }

  #player-detail-view .profile-hero .profile-main {
    z-index: 3 !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98 .profile-main .avatar,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-1000 .profile-main .avatar,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-1500 .profile-main .avatar,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-2000 .profile-main .avatar {
    border-color: rgba(255, 244, 187, .66) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06),
      0 0 18px rgba(255, 105, 190, .30),
      0 0 34px rgba(72, 225, 255, .24) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99 .profile-main .avatar,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-1000 .profile-main .avatar,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-1500 .profile-main .avatar,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-2000 .profile-main .avatar {
    border-color: rgba(255, 248, 194, .84) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08),
      0 0 16px rgba(255, 205, 71, .34),
      0 0 30px rgba(255, 62, 173, .32),
      0 0 46px rgba(32, 220, 255, .30) !important;
    animation: profileAccuracyAvatarPulse 2.6s ease-in-out infinite alternate !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-plays-1000:not(.achievement-profile-effect-accuracy-97):not(.achievement-profile-effect-accuracy-98):not(.achievement-profile-effect-accuracy-99) .profile-main .avatar {
    border-color: rgba(255, 181, 222, .46) !important;
    box-shadow: 0 0 20px rgba(255, 137, 203, .20), 0 0 34px rgba(197, 146, 255, .13) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-plays-1500:not(.achievement-profile-effect-accuracy-97):not(.achievement-profile-effect-accuracy-98):not(.achievement-profile-effect-accuracy-99) .profile-main .avatar {
    border-color: rgba(255, 181, 222, .54) !important;
    box-shadow: 0 0 23px rgba(255, 122, 197, .26), 0 0 42px rgba(190, 129, 255, .18) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-plays-2000:not(.achievement-profile-effect-accuracy-97):not(.achievement-profile-effect-accuracy-98):not(.achievement-profile-effect-accuracy-99) .profile-main .avatar {
    border-color: rgba(255, 210, 236, .64) !important;
    box-shadow: 0 0 25px rgba(255, 107, 190, .32), 0 0 48px rgba(181, 109, 255, .24), 0 0 62px rgba(91, 218, 255, .12) !important;
    animation: profilePlaysAvatarFloat 3.4s ease-in-out infinite alternate !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98 .profile-name {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: 0 0 12px rgba(255, 129, 199, .18), 0 0 22px rgba(83, 224, 255, .13) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99 .profile-name {
    background: linear-gradient(100deg, #fffbd5 0%, #ffd767 17%, #ff91ca 35%, #d6adff 53%, #74efff 72%, #a7ffdf 88%, #fffbd5 100%) !important;
    background-size: 250% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .35px rgba(255,255,255,.72) !important;
    text-shadow: 0 0 14px rgba(255, 105, 190, .18), 0 0 24px rgba(73, 224, 255, .16) !important;
    animation: profileAccuracyNameFlow 5s linear infinite !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-plays-1000:not(.achievement-profile-effect-accuracy-97):not(.achievement-profile-effect-accuracy-98):not(.achievement-profile-effect-accuracy-99) .profile-name,
  #player-detail-view .profile-hero.achievement-profile-effect-plays-1500:not(.achievement-profile-effect-accuracy-97):not(.achievement-profile-effect-accuracy-98):not(.achievement-profile-effect-accuracy-99) .profile-name,
  #player-detail-view .profile-hero.achievement-profile-effect-plays-2000:not(.achievement-profile-effect-accuracy-97):not(.achievement-profile-effect-accuracy-98):not(.achievement-profile-effect-accuracy-99) .profile-name {
    color: #fff4fb !important;
    -webkit-text-fill-color: #fff4fb !important;
    text-shadow: 0 0 12px rgba(255, 151, 210, .15), 0 0 22px rgba(178, 115, 255, .12) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-plays-2000:not(.achievement-profile-effect-accuracy-97):not(.achievement-profile-effect-accuracy-98):not(.achievement-profile-effect-accuracy-99) .profile-name {
    background: linear-gradient(96deg, #fff0f7 0%, #ff9dce 28%, #d9a6ff 58%, #8ceaff 82%, #fff0f7 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 13px rgba(255, 105, 187, .22), 0 0 23px rgba(179, 99, 255, .18) !important;
    animation: profilePlayCountFlow 5.5s linear infinite !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98 .profile-accuracy-value.acc-98,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99 .profile-accuracy-value.acc-99,
  #player-detail-view .profile-hero .profile-play-count-value.plays-1000,
  #player-detail-view .profile-hero .profile-play-count-value.plays-1500,
  #player-detail-view .profile-hero .profile-play-count-value.plays-2000 {
    filter: drop-shadow(0 0 8px rgba(255,255,255,.10));
  }

  #player-detail-view .profile-hero.achievement-profile-effect-plays-1000 .profile-play-count-pill,
  #player-detail-view .profile-hero.achievement-profile-effect-plays-1500 .profile-play-count-pill,
  #player-detail-view .profile-hero.achievement-profile-effect-plays-2000 .profile-play-count-pill {
    border-left-color: rgba(255, 146, 207, .36) !important;
    background: rgba(255, 146, 207, .045) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98 .profile-prestige-star:nth-child(n+5),
  #player-detail-view .profile-hero.achievement-profile-effect-plays-1000 .profile-prestige-heart:nth-child(n+5),
  #player-detail-view .profile-hero.achievement-profile-effect-plays-1500 .profile-prestige-heart:nth-child(n+7) {
    display: none !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99 .profile-prestige-star,
  #player-detail-view .profile-hero.achievement-profile-effect-plays-2000 .profile-prestige-heart {
    opacity: .95 !important;
  }

  @media (max-width: 760px) {
    #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98,
    #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99,
    #player-detail-view .profile-hero.achievement-profile-effect-plays-1000,
    #player-detail-view .profile-hero.achievement-profile-effect-plays-1500,
    #player-detail-view .profile-hero.achievement-profile-effect-plays-2000 {
      box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 24px rgba(91, 179, 255, .08) !important;
    }

    #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99 .profile-name,
    #player-detail-view .profile-hero.achievement-profile-effect-plays-2000:not(.achievement-profile-effect-accuracy-97):not(.achievement-profile-effect-accuracy-98):not(.achievement-profile-effect-accuracy-99) .profile-name {
      text-shadow: 0 0 12px rgba(255, 105, 190, .14), 0 0 20px rgba(73, 224, 255, .12) !important;
    }
  }


  /* v30.0.37 Profile URL link */
  #player-detail-view .profile-url-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 3px 9px;
    border: 1px solid rgba(118, 154, 214, 0.38);
    background: linear-gradient(180deg, rgba(13, 20, 34, 0.96), rgba(7, 12, 22, 0.96));
    color: #dce9ff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    cursor: pointer;
  }

  #player-detail-view .profile-url-button:hover,
  #player-detail-view .profile-url-button:focus-visible {
    color: #ffffff;
    border-color: rgba(118, 190, 255, 0.72);
    background: linear-gradient(180deg, rgba(18, 33, 55, 0.98), rgba(8, 15, 28, 0.98));
    box-shadow: inset 2px 0 0 rgba(91, 178, 255, 0.9), 0 0 14px rgba(56, 142, 255, 0.16);
    outline: none;
  }

  #player-detail-view .profile-url-button span[aria-hidden="true"] {
    font-size: 0.82rem;
    transform: translateY(-1px);
  }

  @media (max-width: 640px) {
    #player-detail-view .profile-url-button {
      min-height: 30px;
      padding: 5px 10px;
      font-size: 0.74rem;
    }
  }


  /* v30.0.44: Web login foundation */
  .auth-widget {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
    min-width: 150px;
  }
  .auth-widget button {
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid rgba(118, 154, 214, .34);
    background: linear-gradient(180deg, rgba(12, 18, 31, .94), rgba(5, 9, 18, .94));
    color: #dce9ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .auth-widget button:hover,
  .auth-widget button:focus-visible {
    color: #fff;
    border-color: rgba(91, 179, 255, .7);
    box-shadow: inset 2px 0 0 rgba(91, 179, 255, .85), 0 0 14px rgba(56, 142, 255, .16);
    outline: none;
  }
  .auth-widget .auth-user {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .auth-widget .auth-logout {
    color: var(--muted);
    border-color: rgba(118, 154, 214, .20);
    background: rgba(5, 9, 18, .70);
  }
  .auth-login-help,
  .auth-login-fallback,
  .auth-login-oauth-unavailable {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
  }
  .auth-login-fallback {
    padding-top: 13px;
    border-top: 1px solid rgba(118, 154, 214, .16);
    font-size: .9rem;
  }
  .auth-login-help code,
  .auth-login-fallback code {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(91, 179, 255, .08);
    border: 1px solid rgba(91, 179, 255, .18);
    color: #e8f2ff;
    font-weight: 800;
  }
  .auth-login-modal-content {
    display: grid;
    gap: 14px;
  }
  .auth-discord-oauth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid rgba(193, 200, 255, .36);
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, #5865f2, #6f62e8);
    box-shadow: 0 12px 28px rgba(54, 65, 190, .24);
    font-size: .95rem;
    font-weight: 850;
    text-decoration: none;
    transition: transform .16s ease, filter .16s ease, border-color .16s ease;
  }
  .auth-discord-oauth-button:hover,
  .auth-discord-oauth-button:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.08);
    border-color: rgba(224, 228, 255, .66);
    outline: none;
  }
  .auth-discord-oauth-icon {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 21px;
  }
  .auth-discord-oauth-icon svg {
    width: 25px;
    height: 20px;
    fill: currentColor;
  }
  .auth-login-oauth-unavailable {
    padding: 11px 12px;
    border: 1px solid rgba(255, 190, 91, .24);
    border-radius: 9px;
    background: rgba(255, 166, 61, .07);
    color: #e8d6b8;
  }
  .auth-login-discord-card {
    width: 100%;
    margin-top: 2px;
    padding: 16px;
    border-radius: 14px;
  }
  .auth-login-discord-card .home-discord-head {
    margin-bottom: 9px;
  }
  .auth-login-discord-card .home-discord-copy {
    margin-bottom: 12px;
  }
  .auth-login-discord-card .home-discord-button {
    min-height: 38px;
  }
  @media (max-width: 760px) {
    .site-topbar { gap: 8px; }
    .auth-widget { width: 100%; min-width: 0; justify-content: flex-start; order: 5; }
    .auth-widget button { min-height: 34px; }
  }


  /* v30.0.46: logged-in private self view */
  .profile-private-self-notice {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(125, 211, 252, .28);
    background: rgba(8, 18, 32, .72);
    color: var(--muted);
    font-size: .92rem;
  }

  #player-detail-view .profile-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid rgba(118, 154, 214, 0.34);
    background: linear-gradient(180deg, rgba(12, 18, 31, 0.94), rgba(5, 9, 18, 0.94));
    color: #dce9ff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }
  #player-detail-view .profile-edit-button:hover,
  #player-detail-view .profile-edit-button:focus-visible {
    color: #fff;
    border-color: rgba(91, 179, 255, 0.72);
    box-shadow: inset 2px 0 0 rgba(91, 179, 255, 0.85), 0 0 14px rgba(56, 142, 255, 0.16);
    outline: none;
  }
  .profile-edit-form {
    display: grid;
    gap: 12px;
  }
  .profile-edit-form label {
    display: grid;
    gap: 5px;
    color: #dce9ff;
    font-size: 0.86rem;
    font-weight: 800;
  }
  .profile-edit-form input,
  .profile-edit-form textarea,
  .profile-edit-form select {
    width: 100%;
    min-height: 36px;
    border: 1px solid rgba(118, 154, 214, 0.28);
    background: rgba(4, 8, 16, 0.86);
    color: #eef6ff;
    padding: 8px 10px;
    font: inherit;
  }
  .profile-edit-form textarea {
    min-height: 96px;
    resize: vertical;
  }
  .profile-edit-note {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
  }
  .profile-edit-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
  }
  .profile-edit-actions button {
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid rgba(118, 154, 214, 0.34);
    background: rgba(5, 9, 18, 0.82);
    color: #dce9ff;
    font-weight: 800;
    cursor: pointer;
  }
  .profile-edit-actions button[type="submit"] {
    border-color: rgba(91, 179, 255, 0.55);
    background: linear-gradient(180deg, rgba(14, 32, 55, 0.96), rgba(5, 10, 19, 0.96));
    color: #fff;
  }
  .profile-edit-error {
    display: none;
    border: 1px solid rgba(255, 100, 135, 0.34);
    background: rgba(80, 10, 26, 0.22);
    color: #ffd5df;
    padding: 8px 10px;
    font-size: 0.84rem;
    font-weight: 700;
  }


  /* v30.0.59: Players search IME fix - keep composition input stable */
  /* v30.0.60: Showcase guided Discord command text */
  /* v30.0.61: Players page typography/readability polish */
  .players-hero {
    margin: 0 0 18px;
    padding: 22px 24px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .98));
    box-shadow: 0 18px 48px rgba(0,0,0,.28);
  }
  .players-hero h2 {
    margin: 4px 0 8px;
    font-size: clamp(1.45rem, 2vw, 2.2rem);
    letter-spacing: .02em;
  }
  .players-hero p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
    white-space: pre-line;
  }
  .players-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(2, 6, 23, .58);
  }
  .players-toolbar input {
    flex: 1 1 280px;
    min-width: 0;
    min-height: 38px;
    border: 1px solid rgba(118, 154, 214, 0.30);
    background: rgba(4, 8, 16, 0.88);
    color: #eef6ff;
    padding: 8px 11px;
    font: inherit;
  }
  .players-toolbar-count {
    color: var(--muted-2);
    font-size: .82rem;
    white-space: nowrap;
  }
  .players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(326px, 1fr));
    gap: 16px;
  }
  .player-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
    min-height: 194px;
    padding: 17px;
    border: 1px solid rgba(148, 163, 184, .20);
    background: linear-gradient(180deg, rgba(15, 23, 42, .92), rgba(2, 6, 23, .96));
    box-shadow: 0 14px 36px rgba(0,0,0,.22);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
  }
  .player-card::after {
    content: '›';
    position: absolute;
    top: 18px;
    right: 17px;
    color: rgba(155, 178, 214, .52);
    font-size: 1.35rem;
    line-height: 1;
    transition: color .16s ease, transform .16s ease;
    pointer-events: none;
  }
  .player-card:hover,
  .player-card:focus-visible {
    border-color: rgba(91, 179, 255, .52);
    background: linear-gradient(180deg, rgba(18, 29, 52, .96), rgba(3, 8, 18, .98));
    box-shadow: 0 18px 46px rgba(0,0,0,.28), 0 0 0 1px rgba(91, 179, 255, .08);
    transform: translateY(-1px);
    outline: none;
  }
  .player-card:hover::after,
  .player-card:focus-visible::after {
    color: rgba(210, 230, 255, .88);
    transform: translateX(2px);
  }
  .player-card-head {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding-right: 22px;
    min-width: 0;
  }
  .player-card-avatar {
    width: 56px;
    height: 56px;
    border: 1px solid rgba(148, 163, 184, .36);
    background: rgba(15, 23, 42, .9);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.24);
  }
  .player-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .player-card-title {
    display: grid;
    gap: 7px;
    min-width: 0;
  }
  .player-card-name {
    margin: 0;
    overflow: hidden;
    color: #f8fbff;
    font-size: clamp(1.12rem, 1.4vw, 1.24rem);
    font-weight: 860;
    line-height: 1.18;
    letter-spacing: .005em;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .player-card-badges,
  .player-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
  }
  .player-card-badge,
  .player-card-meta .pill {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    min-height: 24px;
    border: 1px solid rgba(118, 154, 214, .30);
    background: rgba(10, 19, 38, .72);
    color: #d4e0f4;
    padding: 4px 8px;
    font-size: .74rem;
    font-weight: 780;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .player-card-badge {
    min-width: max-content;
  }
  .player-card-badge.badge-private { color: #d8c5ff; border-color: rgba(167, 139, 250, .34); background: rgba(41, 28, 78, .28); }
  .player-card-badge.badge-showcase { color: #bae6fd; border-color: rgba(56, 189, 248, .30); background: rgba(10, 48, 72, .26); }
  .player-card-badge.badge-admin { color: #ffbfd8; border-color: rgba(255, 88, 176, .32); background: rgba(84, 20, 52, .26); }
  .player-card-bio {
    min-height: 3.15em;
    margin: 0;
    color: #b9c9e6;
    font-size: .94rem;
    line-height: 1.58;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .player-card-meta {
    margin-top: auto;
    padding-top: 2px;
  }
  .player-card-meta:empty { display: none; }
  @media (max-width: 700px) {
    .players-toolbar { align-items: stretch; flex-direction: column; }
    .players-toolbar input { flex-basis: auto; width: 100%; }
    .players-toolbar-count { align-self: flex-end; }
    .players-grid { grid-template-columns: 1fr; gap: 12px; }
    .player-card { min-height: 0; padding: 15px; }
    .player-card-head { grid-template-columns: 52px minmax(0, 1fr); }
    .player-card-avatar { width: 52px; height: 52px; }
    .player-card-name { font-size: 1.12rem; }
    .player-card-bio { min-height: 0; }
  }
  @media (max-width: 380px) {
    .player-card-head { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
    .player-card-avatar { width: 48px; height: 48px; }
    .player-card-badge,
    .player-card-meta .pill { font-size: .69rem; padding: 3px 6px; min-height: 22px; }
  }

  /* v30.0.64: Play Style Showcase timeline preview */
  .showcase-hero {
    max-width: 820px;
    margin: 0 auto 16px;
    padding: 22px 24px;
    border: 1px solid rgba(148, 163, 184, .22);
    background:
      radial-gradient(circle at 12% 0%, rgba(56, 189, 248, .12), transparent 34%),
      linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .98));
    box-shadow: 0 18px 48px rgba(0,0,0,.28);
  }
  .showcase-hero h2 {
    margin: 4px 0 8px;
    font-size: clamp(1.45rem, 2vw, 2.2rem);
    letter-spacing: .02em;
  }
  .showcase-hero p {
    margin: 0 0 8px;
    color: var(--muted);
    line-height: 1.7;
    white-space: pre-line;
  }
  .showcase-hero small { color: var(--muted-2); }
  .showcase-composer {
    max-width: 820px;
    margin: 0 auto 16px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 18px;
    background:
      radial-gradient(circle at 10% 0%, rgba(56, 189, 248, .10), transparent 32%),
      linear-gradient(180deg, rgba(15, 23, 42, .90), rgba(2, 6, 23, .94));
    box-shadow: 0 16px 38px rgba(0,0,0,.22);
  }
  .showcase-composer-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .32);
    background: rgba(15, 23, 42, .9);
  }
  .showcase-composer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .showcase-composer-main { min-width: 0; display: grid; gap: 10px; }
  .showcase-composer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .86rem;
  }
  .showcase-composer-head strong { color: var(--text); font-size: .98rem; }
  .showcase-composer-form { display: grid; gap: 9px; min-width: 0; }
  .showcase-composer-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 8px; }
  .showcase-composer input,
  .showcase-composer textarea,
  .showcase-composer select {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, .22);
    background: rgba(2, 6, 23, .62);
    color: var(--text);
    border-radius: 12px;
    padding: 10px 12px;
    outline: none;
    font: inherit;
  }
  .showcase-composer textarea { min-height: 78px; resize: vertical; line-height: 1.55; }
  .showcase-composer input:focus,
  .showcase-composer textarea:focus,
  .showcase-composer select:focus {
    border-color: rgba(125, 211, 252, .50);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .10);
  }
  .showcase-composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .showcase-composer-note { color: var(--muted-2); font-size: .80rem; line-height: 1.45; }
  .showcase-composer-error {
    display: none;
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, .28);
    background: rgba(127, 29, 29, .22);
    border-radius: 12px;
    padding: 9px 10px;
    font-size: .84rem;
  }
  .showcase-composer-preview { display: none; }
  .showcase-composer-preview.has-preview { display: block; }
  .showcase-login-card {
    max-width: 820px;
    margin: 0 auto 16px;
    padding: 14px 16px;
    border: 1px dashed rgba(148, 163, 184, .25);
    border-radius: 16px;
    background: rgba(15, 23, 42, .50);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  @media (max-width: 760px) {
    .showcase-composer { grid-template-columns: 42px minmax(0, 1fr); padding: 14px 12px; gap: 10px; }
    .showcase-composer-avatar { width: 42px; height: 42px; }
    .showcase-composer-row { grid-template-columns: 1fr; }
    .showcase-composer-actions, .showcase-login-card { align-items: stretch; flex-direction: column; }
    .showcase-composer-actions .btn, .showcase-login-card .btn { width: 100%; justify-content: center; }
  }
  .showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 820px);
    justify-content: center;
    gap: 0;
  }
  .showcase-grid.compact {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    justify-content: stretch;
  }
  .showcase-card {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-bottom: 0;
    background:
      radial-gradient(circle at 12% 0%, rgba(56, 189, 248, .08), transparent 30%),
      linear-gradient(180deg, rgba(15, 23, 42, .92), rgba(2, 6, 23, .96));
    box-shadow: 0 14px 36px rgba(0,0,0,.18);
    padding: 16px 18px;
    min-width: 0;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
  }
  .showcase-grid:not(.compact) .showcase-card:first-child { border-radius: 18px 18px 0 0; }
  .showcase-grid:not(.compact) .showcase-card:last-child { border-bottom: 1px solid rgba(148, 163, 184, .18); border-radius: 0 0 18px 18px; }
  .showcase-grid:not(.compact) .showcase-card:only-child { border-radius: 18px; }
  .showcase-card:hover {
    border-color: rgba(125, 211, 252, .34);
    background:
      radial-gradient(circle at 12% 0%, rgba(56, 189, 248, .13), transparent 32%),
      linear-gradient(180deg, rgba(18, 28, 48, .95), rgba(2, 6, 23, .98));
  }
  .showcase-grid.compact .showcase-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
    border-radius: 16px;
    padding: 13px;
  }
  .showcase-avatar-button,
  .showcase-author-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }
  .showcase-avatar-button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
  }
  .showcase-grid.compact .showcase-avatar-button { width: 38px; height: 38px; }
  .showcase-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, .32);
    background: rgba(15, 23, 42, .9);
    overflow: hidden;
    display: block;
  }
  .showcase-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .showcase-post-main { min-width: 0; display: grid; gap: 8px; }
  .showcase-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
  }
  .showcase-author-button {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
    max-width: 100%;
    font-weight: 850;
    font-size: .98rem;
    line-height: 1.25;
  }
  .showcase-author-button:hover { color: #e0f2fe; }
  .showcase-author-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(360px, 52vw);
  }
  .showcase-card-meta {
    color: var(--muted-2);
    font-size: .78rem;
    white-space: nowrap;
  }
  .showcase-tag {
    margin-left: auto;
    flex: 0 0 auto;
    border: 1px solid rgba(56, 189, 248, .28);
    background: rgba(8, 47, 73, .34);
    color: #bae6fd;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: .74rem;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  .showcase-card-body { min-width: 0; }
  .showcase-card-body h3 {
    margin: 0 0 6px;
    font-size: clamp(1.02rem, 1.2vw, 1.14rem);
    line-height: 1.38;
    letter-spacing: .01em;
  }
  .showcase-card-body p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
    white-space: pre-line;
    overflow-wrap: anywhere;
  }
  .showcase-media {
    position: relative;
    width: 100%;
    margin-top: 6px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 16px;
    background: rgba(2, 6, 23, .72);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .showcase-media iframe,
  .showcase-media img,
  .showcase-media video {
    display: block;
    width: 100%;
    border: 0;
  }
  .showcase-media.video iframe { aspect-ratio: 16 / 9; height: auto; min-height: 260px; background: #000; }
  .showcase-media.video video { max-height: 560px; object-fit: contain; background: #000; }
  .showcase-media.image img { max-height: 520px; object-fit: contain; background: rgba(0,0,0,.30); }
  .showcase-media.tweet {
    padding: 12px;
    background:
      radial-gradient(circle at 16% 0%, rgba(29, 155, 240, .12), transparent 32%),
      rgba(2, 6, 23, .72);
  }
  .showcase-media.tweet .twitter-tweet,
  .showcase-media.tweet iframe {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .showcase-x-fallback {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #93c5fd;
    font-size: .82rem;
    text-decoration: none;
  }
  .showcase-x-fallback:hover { color: #e0f2fe; }
  .showcase-grid.compact .showcase-media.video iframe { min-height: 170px; }
  .showcase-grid.compact .showcase-media.video video { max-height: 320px; }
  .showcase-grid.compact .showcase-media.image img { max-height: 280px; }
  .showcase-grid.compact .showcase-media.tweet { padding: 10px; }
  .showcase-link-card {
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    color: inherit;
    text-decoration: none;
  }
  .showcase-link-card:hover { background: rgba(56, 189, 248, .08); }
  .showcase-link-domain {
    color: #93c5fd;
    font-size: .80rem;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .showcase-link-title {
    color: var(--text);
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .showcase-link-hint { color: var(--muted-2); font-size: .82rem; }
  .showcase-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 2px;
  }
  .showcase-open {
    padding: 7px 11px;
    font-size: .82rem;
  }
  .profile-showcase-section { grid-column: 1 / -1; }
  @media (max-width: 760px) {
    .showcase-hero { margin: 0 0 12px; padding: 18px 16px; }
    .showcase-grid { grid-template-columns: 1fr; }
    .showcase-card { grid-template-columns: 42px minmax(0, 1fr); padding: 14px 12px; gap: 10px; }
    .showcase-avatar-button { width: 42px; height: 42px; }
    .showcase-tag { margin-left: 0; font-size: .70rem; padding: 3px 7px; }
    .showcase-author-name { max-width: 54vw; }
    .showcase-media.video iframe { min-height: 190px; }
    .showcase-media.video video { max-height: 420px; }
    .showcase-media.image img { max-height: 420px; }
    .showcase-media.tweet { padding: 10px; }
    .showcase-card-footer { justify-content: flex-start; }
  }
  @media (max-width: 420px) {
    .showcase-card { grid-template-columns: 38px minmax(0, 1fr); padding: 13px 10px; }
    .showcase-avatar-button { width: 38px; height: 38px; }
    .showcase-author-name { max-width: 50vw; }
    .showcase-media.video iframe { min-height: 165px; }
    .showcase-media.video video { max-height: 320px; }
  }


  /* v30.0.49: BeatLeader-style fixed top header.
     Keep search permanently in the top bar and remove the old scroll-docked search behavior. */
  :root {
    --fixed-topbar-height: 58px;
  }

  body {
    padding-top: var(--fixed-topbar-height) !important;
  }

  .site-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    min-height: var(--fixed-topbar-height) !important;
    margin: 0 !important;
    padding: 7px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(116, 145, 196, .24) !important;
    border-radius: 0 !important;
    background:
      linear-gradient(180deg, rgba(35, 35, 35, .98), rgba(19, 20, 22, .98)) !important;
    box-shadow:
      0 10px 26px rgba(0, 0, 0, .48),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  .site-topbar::before,
  .site-topbar::after {
    display: none !important;
  }

  .top-brand {
    flex: 0 0 auto !important;
    min-width: auto !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    gap: 8px !important;
    border-radius: 4px !important;
    color: #f2f4f8 !important;
  }

  .top-brand-mark {
    width: 31px !important;
    height: 31px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: #070910 !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.30) !important;
  }

  .top-brand-copy {
    display: block !important;
  }

  .top-brand-copy h1 {
    color: #f7f7f7 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    font-size: 17px !important;
    line-height: 1 !important;
    letter-spacing: .17em !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .top-brand-copy .sub {
    display: none !important;
  }

  .auth-widget {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .auth-widget button {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: #e7e9ee !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    box-shadow: none !important;
  }

  .auth-widget button:hover,
  .auth-widget button:focus-visible {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .auth-widget .auth-user::before {
    content: "◉";
    margin-right: 7px;
    color: #ff9cc5;
    font-size: 11px;
  }

  .auth-widget .auth-logout {
    color: #aeb5c4 !important;
    padding-inline: 8px !important;
  }

  .top-search-wrap {
    order: 3 !important;
    flex: 0 1 420px !important;
    min-width: 260px !important;
    max-width: 460px !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 1002 !important;
  }

  .top-search {
    height: 40px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(210, 216, 226, .18) !important;
    background: rgba(67, 67, 67, .92) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 1px 0 rgba(0,0,0,.24) !important;
  }

  .top-search:focus-within {
    border-color: rgba(220, 228, 242, .36) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.08) !important;
    transform: none !important;
  }

  .top-search-icon {
    color: #d5d8df !important;
    font-size: 19px !important;
  }

  .top-search input {
    color: #fff !important;
  }

  .top-search input::placeholder {
    color: #eceff5 !important;
    opacity: .95 !important;
  }

  .top-search-hint {
    border-color: rgba(255,255,255,.30) !important;
    border-radius: 3px !important;
    color: #d5d8df !important;
    background: rgba(0,0,0,.18) !important;
  }

  .global-search-results {
    top: calc(100% + 7px) !important;
    z-index: 1005 !important;
    border-radius: 4px !important;
  }

  nav.top-primary-nav,
  .site-topbar > nav {
    order: 4 !important;
    position: static !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    isolation: auto !important;
    transform: none !important;
  }

  nav.top-primary-nav::-webkit-scrollbar,
  .site-topbar > nav::-webkit-scrollbar {
    display: none !important;
  }

  nav.top-primary-nav button,
  .site-topbar > nav button {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: #e3e5eb !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .005em !important;
    text-transform: none !important;
    box-shadow: none !important;
  }

  nav.top-primary-nav button:hover,
  .site-topbar > nav button:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    transform: none !important;
  }

  nav.top-primary-nav button.active,
  .site-topbar > nav button.active {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: inset 0 -2px 0 #76b7ff !important;
  }

  nav.top-primary-nav button.active::after,
  .site-topbar > nav button.active::after {
    display: none !important;
  }

  body.search-docked nav,
  body.search-docked nav > .top-search-wrap,
  body.search-docked .top-search,
  body.search-docked .global-search-results {
    position: static !important;
    width: auto !important;
    animation: none !important;
  }

  .hero-header {
    margin-top: 16px !important;
  }

  body.detail-route .site-topbar {
    margin-bottom: 0 !important;
  }

  body.detail-route main {
    padding-top: 16px !important;
  }

  @media (max-width: 1120px) {
    .top-brand-copy h1 {
      font-size: 15px !important;
      letter-spacing: .12em !important;
    }
    .top-search-wrap {
      flex-basis: 340px !important;
      min-width: 220px !important;
    }
    nav.top-primary-nav button,
    .site-topbar > nav button {
      padding-inline: 8px !important;
      font-size: 12px !important;
    }
  }

  @media (max-width: 760px) {
    :root {
      --fixed-topbar-height: 128px;
    }
    .site-topbar {
      flex-wrap: wrap !important;
      align-content: flex-start !important;
      gap: 6px 8px !important;
      padding: 7px 10px !important;
    }
    .top-brand {
      order: 1 !important;
      height: 34px !important;
      max-width: calc(100% - 112px) !important;
    }
    .top-brand-mark {
      width: 26px !important;
      height: 26px !important;
    }
    .top-brand-copy h1 {
      font-size: 13px !important;
      letter-spacing: .10em !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    .auth-widget {
      order: 2 !important;
      margin-left: auto !important;
    }
    .auth-widget button {
      height: 32px !important;
      min-height: 32px !important;
      padding-inline: 8px !important;
      font-size: 12px !important;
    }
    .auth-widget .auth-logout {
      display: none !important;
    }
    .top-search-wrap {
      order: 3 !important;
      flex: 1 0 100% !important;
      min-width: 0 !important;
      max-width: none !important;
    }
    .top-search {
      height: 36px !important;
    }
    .top-search-hint {
      display: none !important;
    }
    nav.top-primary-nav,
    .site-topbar > nav {
      order: 4 !important;
      flex: 1 0 100% !important;
      height: 34px !important;
    }
    nav.top-primary-nav button,
    .site-topbar > nav button {
      height: 32px !important;
      min-height: 32px !important;
      padding-inline: 10px !important;
      font-size: 12px !important;
    }
    .hero-header {
      margin-top: 10px !important;
    }
  }


  /* v30.0.51: top header menu behavior and navigation i18n fix. */
  :root {
    --fixed-topbar-height: 56px;
  }

  .site-topbar {
    min-height: var(--fixed-topbar-height) !important;
    padding: 6px 16px !important;
    gap: 8px !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) minmax(260px, 400px) !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .top-brand {
    order: 1 !important;
    height: 40px !important;
    padding: 0 8px 0 4px !important;
    gap: 8px !important;
  }

  .top-brand-mark {
    width: 30px !important;
    height: 30px !important;
  }

  .top-brand-copy h1 {
    font-size: 16px !important;
    letter-spacing: .16em !important;
  }

  .auth-widget {
    order: 2 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    width: auto !important;
    overflow: visible !important;
  }

  .auth-menu-root {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .auth-widget .auth-user {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 9px !important;
    border-radius: 5px !important;
    color: #f0f2f7 !important;
  }

  .auth-widget .auth-user::before {
    display: none !important;
    content: none !important;
  }

  .auth-avatar {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(8, 12, 22, .92);
    box-shadow: 0 0 0 1px rgba(0,0,0,.35);
  }

  .auth-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .auth-avatar-fallback {
    color: #fff;
    font-size: 12px;
    font-weight: 900;
  }

  .auth-me-label {
    font-size: 13px;
    font-weight: 850;
  }

  .auth-menu {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    z-index: 1100;
    display: none;
    min-width: 150px;
    padding: 6px;
    border: 1px solid rgba(132, 157, 202, .30);
    border-radius: 8px;
    background: rgba(22, 24, 29, .98);
    box-shadow: 0 20px 48px rgba(0,0,0,.55);
  }

  .auth-menu-root:hover .auth-menu {
    display: block;
  }

  .auth-widget .auth-logout {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
    color: #d9deea !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    background: transparent !important;
    border-radius: 5px !important;
  }

  .auth-widget .auth-logout:hover,
  .auth-widget .auth-logout:focus-visible {
    color: #fff !important;
    background: rgba(255,255,255,.09) !important;
  }

  nav.top-primary-nav,
  .site-topbar > nav {
    order: 3 !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
  }

  nav.top-primary-nav button,
  .site-topbar > nav button {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 9px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .top-more {
    position: relative;
    flex: 0 0 auto;
  }

  .top-more-button::after {
    content: "▾";
    margin-left: 6px;
    font-size: 10px;
    opacity: .78;
  }

  .top-more-menu {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 1090;
    display: none;
    min-width: 180px;
    padding: 6px;
    border: 1px solid rgba(132, 157, 202, .30);
    border-radius: 8px;
    background: rgba(22, 24, 29, .98);
    box-shadow: 0 20px 48px rgba(0,0,0,.55);
  }

  .top-more:hover .top-more-menu {
    display: grid;
    gap: 2px;
  }

  .top-more-menu button {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .top-more-button.active {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    box-shadow: inset 0 -2px 0 #76b7ff !important;
  }

  .auth-widget .auth-user.active {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    box-shadow: inset 0 -2px 0 #76b7ff !important;
  }

  .top-search-wrap {
    order: 4 !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .top-search {
    height: 40px !important;
  }

  @media (max-width: 1180px) {
    .site-topbar {
      grid-template-columns: auto auto minmax(0, 1fr) minmax(220px, 320px) !important;
      padding-inline: 10px !important;
    }
    .top-brand-copy h1 {
      font-size: 14px !important;
      letter-spacing: .12em !important;
    }
    nav.top-primary-nav button,
    .site-topbar > nav button {
      padding-inline: 7px !important;
      font-size: 12px !important;
    }
  }

  @media (max-width: 940px) {
    :root {
      --fixed-topbar-height: 102px;
    }
    .site-topbar {
      grid-template-columns: auto auto minmax(0, 1fr) !important;
      grid-template-rows: 42px 42px !important;
    }
    nav.top-primary-nav,
    .site-topbar > nav {
      grid-column: 1 / 4 !important;
      order: 3 !important;
    }
    .top-search-wrap {
      grid-column: 3 / 4 !important;
      grid-row: 1 !important;
      order: 4 !important;
    }
  }

  @media (max-width: 760px) {
    :root {
      --fixed-topbar-height: 132px;
    }
    .site-topbar {
      display: flex !important;
      flex-wrap: wrap !important;
    }
    .top-search-wrap {
      flex: 1 0 100% !important;
      order: 3 !important;
    }
    nav.top-primary-nav,
    .site-topbar > nav {
      flex: 1 0 100% !important;
      order: 4 !important;
      overflow-x: auto !important;
      overflow-y: visible !important;
    }
  }


  /* v30.0.52: dropdown bridge fix and hero visibility by route.
     Keep hover menus selectable by removing the dead hover gap, and hide the large hero image
     on list-heavy pages where the fixed top header is enough. */
  .auth-menu,
  .top-more-menu {
    top: 100% !important;
    margin-top: 0 !important;
  }

  .auth-menu-root:hover .auth-menu,
  .top-more:hover .top-more-menu {
    pointer-events: auto;
  }

  body.no-hero-route .hero-header {
    display: none !important;
  }

  body.no-hero-route main {
    padding-top: 16px !important;
  }

  body.no-hero-route .site-topbar {
    margin-bottom: 0 !important;
  }

  /* v30.0.53: mobile header fix.
     Remove internal top-bar scrolling on phones, make More/Auth menus real overlays,
     and keep the mobile navigation compact without hiding items inside a scroll area. */
  .mobile-more-only {
    display: none !important;
  }

  .top-more.menu-open .top-more-menu,
  .auth-menu-root.menu-open .auth-menu {
    display: grid !important;
    gap: 2px !important;
    pointer-events: auto !important;
  }

  .auth-menu-profile {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
    color: #d9deea !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    background: transparent !important;
    border-radius: 5px !important;
  }

  .auth-menu-profile:hover,
  .auth-menu-profile:focus-visible {
    color: #fff !important;
    background: rgba(255,255,255,.09) !important;
  }

  @media (max-width: 760px) {
    :root {
      --fixed-topbar-height: 126px;
    }

    body {
      overflow-x: hidden !important;
    }

    .site-topbar,
    .site-topbar * {
      box-sizing: border-box !important;
    }

    .site-topbar {
      width: 100% !important;
      min-height: var(--fixed-topbar-height) !important;
      max-height: none !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      grid-template-rows: 34px 38px 34px !important;
      grid-template-areas:
        "brand auth"
        "search search"
        "nav nav" !important;
      align-items: center !important;
      gap: 5px 8px !important;
      padding: 6px 8px 7px !important;
      overflow: visible !important;
    }

    .top-brand {
      grid-area: brand !important;
      order: 0 !important;
      width: auto !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: 32px !important;
      padding: 0 5px 0 0 !important;
      gap: 6px !important;
    }

    .top-brand-mark {
      width: 25px !important;
      height: 25px !important;
    }

    .top-brand-copy {
      min-width: 0 !important;
      max-width: 100% !important;
    }

    .top-brand-copy h1 {
      max-width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      font-size: 12px !important;
      letter-spacing: .08em !important;
    }

    .auth-widget {
      grid-area: auth !important;
      order: 0 !important;
      justify-self: end !important;
      align-self: center !important;
      width: auto !important;
      max-width: 116px !important;
      min-width: 0 !important;
      margin: 0 !important;
      overflow: visible !important;
    }

    .auth-menu-root {
      position: static !important;
    }

    .auth-widget .auth-user,
    .auth-widget button {
      height: 32px !important;
      min-height: 32px !important;
      padding: 0 7px !important;
      font-size: 12px !important;
    }

    .auth-avatar {
      width: 24px !important;
      height: 24px !important;
    }

    .auth-me-label {
      font-size: 12px !important;
    }

    .auth-menu {
      position: fixed !important;
      top: 38px !important;
      right: 8px !important;
      left: auto !important;
      width: min(210px, calc(100vw - 16px)) !important;
      min-width: 0 !important;
      z-index: 2200 !important;
      max-height: calc(100vh - 46px) !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
    }

    .top-search-wrap {
      grid-area: search !important;
      order: 0 !important;
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      flex: none !important;
      overflow: visible !important;
    }

    .top-search {
      height: 36px !important;
      grid-template-columns: 24px minmax(0, 1fr) auto !important;
    }

    .top-search-hint {
      display: none !important;
    }

    .global-search-results {
      position: fixed !important;
      top: calc(var(--fixed-topbar-height) - 1px) !important;
      left: 8px !important;
      right: 8px !important;
      width: auto !important;
      max-height: calc(100vh - var(--fixed-topbar-height) - 10px) !important;
      z-index: 2100 !important;
      overscroll-behavior: contain !important;
    }

    nav.top-primary-nav,
    .site-topbar > nav {
      grid-area: nav !important;
      order: 0 !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      height: 34px !important;
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      align-items: center !important;
      gap: 4px !important;
      overflow: visible !important;
      overflow-x: visible !important;
      overflow-y: visible !important;
      scrollbar-width: none !important;
    }

    .site-topbar > nav > button[data-tab="showcase"],
    .site-topbar > nav > button[data-tab="statistics"] {
      display: none !important;
    }

    .mobile-more-only {
      display: flex !important;
    }

    nav.top-primary-nav > button,
    .site-topbar > nav > button,
    .top-more-button {
      width: 100% !important;
      min-width: 0 !important;
      height: 32px !important;
      min-height: 32px !important;
      justify-content: center !important;
      padding: 0 4px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      font-size: 11px !important;
      line-height: 1 !important;
    }

    .top-more {
      position: static !important;
      min-width: 0 !important;
      width: 100% !important;
      flex: none !important;
    }

    .top-more-menu {
      position: fixed !important;
      top: calc(var(--fixed-topbar-height) - 1px) !important;
      left: 8px !important;
      right: 8px !important;
      width: auto !important;
      min-width: 0 !important;
      max-height: calc(100vh - var(--fixed-topbar-height) - 10px) !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      z-index: 2200 !important;
      border-radius: 10px !important;
    }

    .top-more-menu button {
      height: 38px !important;
      min-height: 38px !important;
      justify-content: flex-start !important;
      padding: 0 12px !important;
      font-size: 13px !important;
      overflow: visible !important;
      text-overflow: clip !important;
    }

    .hero-header {
      margin-top: 10px !important;
    }

    body.no-hero-route main,
    body.detail-route main {
      padding-top: 14px !important;
    }
  }

  @media (max-width: 420px) {
    :root {
      --fixed-topbar-height: 124px;
    }

    .top-brand-copy h1 {
      font-size: 11px !important;
      letter-spacing: .055em !important;
    }

    nav.top-primary-nav > button,
    .site-topbar > nav > button,
    .top-more-button {
      font-size: 10.5px !important;
      padding-inline: 3px !important;
    }
  }


  /* v30.0.54: mobile menu close fix.
     On touch devices, browser sticky :hover can keep dropdowns visible even after
     menu-open is removed. Disable hover-open there and rely only on JS toggles. */
  @media (hover: none), (pointer: coarse) {
    .auth-menu-root:hover .auth-menu,
    .top-more:hover .top-more-menu {
      display: none !important;
    }

    .top-more.menu-open .top-more-menu,
    .auth-menu-root.menu-open .auth-menu {
      display: grid !important;
      gap: 2px !important;
      pointer-events: auto !important;
    }
  }


  /* v30.0.62: top header visual alignment with the Hub dark-glass theme.
     Keep the fixed one-line desktop layout and mobile behavior, but remove the flat gray bar look. */
  .site-topbar {
    border-bottom: 1px solid rgba(126, 171, 255, .24) !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(85, 214, 255, .13), transparent 34%),
      radial-gradient(circle at 72% 0%, rgba(255, 88, 176, .09), transparent 30%),
      linear-gradient(180deg, rgba(9, 15, 31, .96), rgba(5, 9, 20, .985)) !important;
    box-shadow:
      0 16px 42px rgba(0, 0, 0, .56),
      0 1px 0 rgba(126, 171, 255, .10),
      inset 0 1px 0 rgba(255, 255, 255, .045) !important;
    backdrop-filter: blur(18px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
  }

  .site-topbar::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    background:
      linear-gradient(90deg, transparent, rgba(85, 214, 255, .07), transparent 45%, rgba(255, 88, 176, .055), transparent),
      linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 58%) !important;
    opacity: .9 !important;
  }

  .top-brand {
    border: 1px solid rgba(126, 171, 255, .13) !important;
    background: rgba(8, 15, 31, .32) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  }

  .top-brand:hover,
  .top-brand:focus-visible {
    border-color: rgba(85, 214, 255, .34) !important;
    background: rgba(14, 24, 48, .56) !important;
    box-shadow: 0 0 18px rgba(85, 214, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  }

  .top-brand-mark,
  .auth-avatar {
    border-color: rgba(126, 171, 255, .32) !important;
    background:
      radial-gradient(circle at 35% 20%, rgba(85, 214, 255, .16), transparent 45%),
      rgba(5, 9, 20, .92) !important;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, .36),
      0 0 16px rgba(85, 214, 255, .11) !important;
  }

  .top-brand-copy h1 {
    color: var(--text) !important;
    text-shadow: 0 0 18px rgba(85, 214, 255, .12) !important;
  }

  .auth-widget .auth-user,
  nav.top-primary-nav button,
  .site-topbar > nav button,
  .top-more-button,
  .auth-menu-profile,
  .auth-widget .auth-logout,
  .top-more-menu button {
    border: 1px solid transparent !important;
    color: rgba(245, 248, 255, .82) !important;
    background: transparent !important;
  }

  .auth-widget .auth-user:hover,
  .auth-widget .auth-user:focus-visible,
  nav.top-primary-nav button:hover,
  .site-topbar > nav button:hover,
  .top-more-button:hover,
  .top-more-button:focus-visible,
  .auth-menu-profile:hover,
  .auth-menu-profile:focus-visible,
  .auth-widget .auth-logout:hover,
  .auth-widget .auth-logout:focus-visible,
  .top-more-menu button:hover,
  .top-more-menu button:focus-visible {
    border-color: rgba(126, 171, 255, .22) !important;
    background: rgba(14, 24, 48, .62) !important;
    color: var(--text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  }

  nav.top-primary-nav button.active,
  .site-topbar > nav button.active,
  .top-more-button.active,
  .auth-widget .auth-user.active {
    border-color: rgba(85, 214, 255, .34) !important;
    background:
      linear-gradient(180deg, rgba(85, 214, 255, .13), rgba(14, 24, 48, .52)) !important;
    color: #ffffff !important;
    box-shadow:
      inset 0 -2px 0 rgba(85, 214, 255, .86),
      0 0 18px rgba(85, 214, 255, .11) !important;
  }

  .top-search {
    border: 1px solid rgba(126, 171, 255, .24) !important;
    background:
      linear-gradient(180deg, rgba(14, 24, 48, .72), rgba(8, 15, 31, .78)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .045),
      0 0 0 1px rgba(0, 0, 0, .18) !important;
  }

  .top-search:focus-within {
    border-color: rgba(85, 214, 255, .58) !important;
    background:
      linear-gradient(180deg, rgba(15, 29, 58, .86), rgba(8, 15, 31, .90)) !important;
    box-shadow:
      0 0 0 2px rgba(85, 214, 255, .13),
      0 0 24px rgba(85, 214, 255, .13),
      inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  }

  .top-search-icon {
    color: rgba(85, 214, 255, .88) !important;
  }

  .top-search input::placeholder {
    color: rgba(163, 180, 212, .88) !important;
    opacity: 1 !important;
  }

  .top-search-hint {
    border-color: rgba(126, 171, 255, .24) !important;
    color: rgba(163, 180, 212, .9) !important;
    background: rgba(3, 7, 19, .42) !important;
  }

  .auth-menu,
  .top-more-menu,
  .global-search-results {
    border: 1px solid rgba(126, 171, 255, .28) !important;
    background:
      radial-gradient(circle at 15% 0%, rgba(85, 214, 255, .10), transparent 42%),
      linear-gradient(180deg, rgba(9, 15, 31, .985), rgba(5, 9, 20, .99)) !important;
    box-shadow:
      0 22px 56px rgba(0, 0, 0, .62),
      inset 0 1px 0 rgba(255, 255, 255, .045) !important;
    backdrop-filter: blur(16px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
  }

  @media (max-width: 760px) {
    .site-topbar {
      border-bottom-color: rgba(126, 171, 255, .22) !important;
      background:
        radial-gradient(circle at 12% 0%, rgba(85, 214, 255, .12), transparent 38%),
        radial-gradient(circle at 92% 0%, rgba(255, 88, 176, .075), transparent 34%),
        linear-gradient(180deg, rgba(9, 15, 31, .98), rgba(4, 8, 18, .99)) !important;
    }

    .top-brand {
      border-color: transparent !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    nav.top-primary-nav > button,
    .site-topbar > nav > button,
    .top-more-button {
      border-color: rgba(126, 171, 255, .16) !important;
      background: rgba(8, 15, 31, .36) !important;
    }

    nav.top-primary-nav > button.active,
    .site-topbar > nav > button.active,
    .top-more-button.active {
      border-color: rgba(85, 214, 255, .36) !important;
      background: rgba(14, 24, 48, .72) !important;
    }
  }


  /* v30.0.69 Web Score Upload Preview */
  .score-upload-page {
    display: grid;
    gap: 18px;
  }
  .score-upload-hero,
  .score-upload-panel,
  .score-preview-result {
    border: 1px solid rgba(126, 171, 255, .18);
    border-radius: 22px;
    background:
      radial-gradient(circle at 12% 0%, rgba(85, 214, 255, .10), transparent 38%),
      linear-gradient(180deg, rgba(12, 20, 42, .86), rgba(5, 9, 20, .92));
    box-shadow: 0 20px 56px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .045);
  }
  .score-upload-hero { padding: 24px; }
  .score-upload-hero h2 { margin: 4px 0 8px; font-size: clamp(28px, 4vw, 44px); }
  .score-upload-hero p { margin: 0; color: var(--muted); max-width: 780px; line-height: 1.7; }
  .score-upload-panel { padding: 20px; display: grid; gap: 14px; }
  .score-upload-form { display: grid; gap: 14px; }
  .score-upload-field { display: grid; gap: 7px; }
  .score-upload-field label { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .03em; }
  .score-upload-field input,
  .score-upload-field select {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(126, 171, 255, .22);
    border-radius: 14px;
    background: rgba(4, 8, 18, .56);
    color: var(--text);
    padding: 10px 12px;
  }
  .score-upload-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .score-upload-note { color: var(--muted); font-size: 13px; line-height: 1.6; }
  .score-upload-status { display: none; border-radius: 14px; padding: 10px 12px; background: rgba(255, 185, 90, .10); border: 1px solid rgba(255, 185, 90, .22); color: #ffe0ad; }
  .score-upload-status.show { display: block; }
  .score-preview-result { padding: 18px; display: grid; gap: 14px; }
  .score-preview-result h3 { margin: 0; font-size: 22px; }
  .score-preview-item { border: 1px solid rgba(126, 171, 255, .14); border-radius: 14px; background: rgba(0,0,0,.18); padding: 10px 12px; min-width: 0; }
  .score-preview-item span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
  .score-preview-item strong { display: block; margin-top: 4px; font-size: 16px; overflow-wrap: anywhere; }
  .score-preview-warnings { display: grid; gap: 8px; }
  .score-preview-warning { border: 1px solid rgba(255, 200, 91, .24); background: rgba(255, 200, 91, .08); color: #ffe4b0; border-radius: 12px; padding: 9px 11px; font-size: 13px; line-height: 1.55; }
  /* v30.0.157: upload assist overlay notifications */
  .score-upload-xp-timeline {
    position: relative;
    display: grid;
    gap: 8px;
    border: 1px solid rgba(85, 214, 255, .20);
    background:
      radial-gradient(circle at 8% 0%, rgba(85, 214, 255, .14), transparent 34%),
      linear-gradient(135deg, rgba(8, 18, 42, .70), rgba(2, 8, 20, .58));
    border-radius: 15px;
    padding: 10px;
    overflow: hidden;
  }
  .score-upload-xp-timeline::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    transform: translateX(-120%);
    animation: scoreUploadXpSweep 1.6s cubic-bezier(.22, 1, .36, 1) .18s both;
  }
  .score-upload-xp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; z-index: 1; }
  .score-upload-xp-head strong { font-size: 13px; letter-spacing: .03em; }
  .score-upload-xp-head span { color: var(--muted); font-size: 11.5px; line-height: 1.35; text-align: right; }
  .score-upload-xp-rail {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    position: relative;
    z-index: 1;
    scrollbar-width: thin;
  }
  .score-upload-xp-toast {
    flex: 0 0 min(248px, 82vw);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    border: 1px solid rgba(126, 171, 255, .16);
    background: rgba(2, 9, 24, .64);
    border-radius: 13px;
    padding: 9px 10px;
    transform: translateX(18px);
    opacity: 0;
    animation: scoreUploadXpToastIn .42s cubic-bezier(.22, 1, .36, 1) both;
  }
  .score-upload-xp-toast:nth-child(2) { animation-delay: .06s; }
  .score-upload-xp-toast:nth-child(3) { animation-delay: .12s; }
  .score-upload-xp-toast:nth-child(4) { animation-delay: .18s; }
  .score-upload-xp-toast:nth-child(5) { animation-delay: .24s; }
  .score-upload-xp-icon {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    background: rgba(85, 214, 255, .12);
    border: 1px solid rgba(85, 214, 255, .26);
    color: #bff3ff;
  }
  .score-upload-xp-copy { min-width: 0; display: grid; gap: 2px; }
  .score-upload-xp-copy strong { font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; }
  .score-upload-xp-copy span { color: var(--muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
  .score-upload-xp-toast.ok { border-color: rgba(109, 242, 194, .24); background: rgba(29, 255, 184, .075); }
  .score-upload-xp-toast.ok .score-upload-xp-icon { color: #d9fff4; border-color: rgba(109, 242, 194, .32); background: rgba(109, 242, 194, .12); }
  .score-upload-xp-toast.warn { border-color: rgba(255, 200, 91, .28); background: rgba(255, 200, 91, .085); }
  .score-upload-xp-toast.warn .score-upload-xp-icon { color: #ffe4b0; border-color: rgba(255, 200, 91, .34); background: rgba(255, 200, 91, .12); }
  .score-upload-complete-stream {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }
  .score-upload-complete-stream span {
    border: 1px solid rgba(109, 242, 194, .24);
    background: rgba(109, 242, 194, .08);
    color: #dcfff6;
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 11.5px;
    font-weight: 900;
    animation: scoreUploadXpToastIn .34s cubic-bezier(.22, 1, .36, 1) both;
  }
  .score-upload-complete-stream span:nth-child(2) { animation-delay: .06s; }
  .score-upload-complete-stream span:nth-child(3) { animation-delay: .12s; }
  @keyframes scoreUploadXpToastIn {
    from { opacity: 0; transform: translateX(18px) scale(.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
  }
  @keyframes scoreUploadXpSweep {
    from { transform: translateX(-120%); }
    to { transform: translateX(120%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .score-upload-xp-timeline::before,
    .score-upload-xp-toast,
    .score-upload-complete-stream span { animation: none !important; opacity: 1 !important; transform: none !important; }
  }


  /* v30.0.158: upload assist side dock notifications (single, less intrusive) */
  .upload-assist-host {
    position: fixed;
    top: calc(var(--topbar-height, 72px) + 12px);
    right: max(16px, env(safe-area-inset-right, 0px));
    width: min(380px, calc(100vw - 32px));
    z-index: 1700;
    display: grid;
    gap: 8px;
    pointer-events: none;
    justify-items: stretch;
  }
  .upload-assist-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: 42px;
    padding: 7px 11px;
    border: 1px solid rgba(85, 214, 255, .30);
    border-radius: 18px;
    background:
      radial-gradient(circle at 8% 0%, rgba(255,255,255,.13), transparent 34%),
      linear-gradient(135deg, rgba(5, 13, 31, .90), rgba(15, 26, 58, .82));
    color: #f2fbff;
    box-shadow: 0 12px 34px rgba(0,0,0,.36), 0 0 22px rgba(85,214,255,.12), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    opacity: 0;
    transform: translateX(20px) scale(.97);
    filter: blur(3px);
    overflow: hidden;
  }
  .upload-assist-toast::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
    transform: translateX(-125%);
  }
  .upload-assist-toast.show {
    animation: uploadAssistPop .46s cubic-bezier(.18, 1.18, .28, 1) both;
  }
  .upload-assist-toast.show::after {
    animation: uploadAssistSweep .78s cubic-bezier(.18, 1, .28, 1) .08s both;
  }
  .upload-assist-toast.leaving {
    animation: uploadAssistLeave .28s ease forwards;
  }
  .upload-assist-dot {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(85, 214, 255, .38);
    background: rgba(85, 214, 255, .13);
    color: #d9f8ff;
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 0 20px rgba(85,214,255,.16);
  }
  .upload-assist-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: grid;
    gap: 1px;
  }
  .upload-assist-copy strong {
    font-size: 12.5px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .upload-assist-copy span {
    color: rgba(224, 238, 255, .74);
    font-size: 11.5px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .upload-assist-toast.ok {
    border-color: rgba(109, 242, 194, .42);
    background: linear-gradient(135deg, rgba(6, 31, 28, .94), rgba(15, 41, 52, .88));
    box-shadow: 0 18px 48px rgba(0,0,0,.46), 0 0 32px rgba(109,242,194,.15), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .upload-assist-toast.ok .upload-assist-dot { color: #e3fff8; border-color: rgba(109,242,194,.46); background: rgba(109,242,194,.14); box-shadow: 0 0 22px rgba(109,242,194,.18); }
  .upload-assist-toast.warn {
    border-color: rgba(255, 200, 91, .48);
    background: linear-gradient(135deg, rgba(38, 24, 8, .95), rgba(52, 35, 18, .88));
    box-shadow: 0 18px 48px rgba(0,0,0,.46), 0 0 30px rgba(255,200,91,.14), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .upload-assist-toast.warn .upload-assist-dot { color: #fff1c8; border-color: rgba(255,200,91,.50); background: rgba(255,200,91,.16); box-shadow: 0 0 22px rgba(255,200,91,.16); }
  .upload-assist-toast.error {
    border-color: rgba(255, 99, 132, .52);
    background: linear-gradient(135deg, rgba(45, 10, 21, .96), rgba(50, 19, 33, .90));
    box-shadow: 0 18px 48px rgba(0,0,0,.46), 0 0 30px rgba(255,99,132,.14), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .upload-assist-toast.error .upload-assist-dot { color: #ffe5eb; border-color: rgba(255,99,132,.54); background: rgba(255,99,132,.16); box-shadow: 0 0 22px rgba(255,99,132,.16); }
  @keyframes uploadAssistPop {
    0% { opacity: 0; transform: translateX(22px) scale(.96); filter: blur(5px); }
    62% { opacity: 1; transform: translateX(-2px) scale(1.012); filter: blur(0); }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  }
  @keyframes uploadAssistLeave {
    from { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
    to { opacity: 0; transform: translateX(16px) scale(.98); filter: blur(3px); }
  }
  @keyframes uploadAssistSweep {
    from { transform: translateX(-125%); }
    to { transform: translateX(125%); }
  }
  @media (max-width: 760px) {
    .upload-assist-host {
      top: auto;
      right: max(10px, env(safe-area-inset-right, 0px));
      bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
      width: min(360px, calc(100vw - 20px));
    }
    .upload-assist-toast { border-radius: 16px; min-height: 40px; padding: 7px 9px; }
    .upload-assist-dot { width: 24px; height: 24px; }
    .upload-assist-copy strong { font-size: 12px; }
    .upload-assist-copy span { font-size: 10.5px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .upload-assist-toast.show,
    .upload-assist-toast.show::after,
    .upload-assist-toast.leaving { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  }

  /* v30.0.160: screenshot extraction overlay that never blocks manual review */
  .score-upload-dropzone.is-reading::before,
  .score-upload-image-review-frame.has-extraction::before {
    content: '';
    position: absolute;
    left: -18%;
    right: -18%;
    top: 0;
    height: 3px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(85, 214, 255, .95), rgba(255, 255, 255, .92), transparent);
    box-shadow: 0 0 18px rgba(85,214,255,.65), 0 0 34px rgba(255,105,180,.22);
    opacity: .95;
    animation: uploadExtractionScan 1.18s cubic-bezier(.18, .72, .2, 1) .08s both;
  }
  .score-upload-dropzone.is-reading::after,
  .score-upload-image-review-frame.has-extraction::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(85,214,255,.08), transparent 28%, transparent 66%, rgba(255,105,180,.08)),
      repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 1px, transparent 1px 7px);
    opacity: 0;
    animation: uploadExtractionGrid 1.15s ease-out .08s both;
  }
  .upload-extraction-stack {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 4;
    display: grid;
    gap: 7px;
    width: min(260px, calc(100% - 24px));
    pointer-events: none;
  }
  .upload-extract-chip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid rgba(85,214,255,.26);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(5, 12, 28, .82), rgba(15, 28, 58, .70));
    color: #ecfbff;
    box-shadow: 0 12px 26px rgba(0,0,0,.24), 0 0 18px rgba(85,214,255,.10), inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    opacity: 0;
    transform: translateX(-16px) scale(.98);
    animation: uploadExtractChipPeek 2.25s cubic-bezier(.18, 1.18, .28, 1) both;
  }
  .upload-extract-chip:nth-child(2) { animation-delay: .14s; }
  .upload-extract-chip:nth-child(3) { animation-delay: .28s; }
  .upload-extract-chip:nth-child(4) { animation-delay: .42s; }
  .upload-extract-chip b {
    color: rgba(191,239,255,.86);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .upload-extract-chip em {
    min-width: 0;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .upload-extract-chip.ok { border-color: rgba(109,242,194,.34); background: linear-gradient(135deg, rgba(6, 31, 28, .82), rgba(15, 41, 52, .70)); }
  .upload-extract-chip.warn { border-color: rgba(255,200,91,.40); background: linear-gradient(135deg, rgba(38, 24, 8, .84), rgba(52, 35, 18, .72)); }
  .upload-extract-chip.skip { border-color: rgba(126,171,255,.34); background: linear-gradient(135deg, rgba(14, 20, 50, .84), rgba(33, 20, 58, .72)); }
  /* v30.0.161: keep image zoom controls above extraction effects and always clickable */
  .score-upload-image-tools {
    z-index: 10;
    pointer-events: auto;
  }
  .score-upload-image-tools .btn,
  .score-upload-image-tools .score-upload-image-zoom-readout {
    position: relative;
    z-index: 11;
  }
  .score-upload-result-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 18px;
    gap: 14px;
    border-color: rgba(109,242,194,.34);
    background:
      radial-gradient(circle at 8% 0%, rgba(109,242,194,.24), transparent 34%),
      radial-gradient(circle at 90% 12%, rgba(85,214,255,.15), transparent 35%),
      linear-gradient(135deg, rgba(6, 26, 30, .92), rgba(7, 12, 30, .96));
    box-shadow: 0 22px 58px rgba(0,0,0,.38), 0 0 34px rgba(109,242,194,.10), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .score-upload-result-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0 24%, rgba(255,255,255,.10) 46%, transparent 68% 100%);
    transform: translateX(-115%);
    animation: uploadResultSweep .9s cubic-bezier(.18, 1, .28, 1) .12s both;
  }
  .upload-result-head,
  .upload-result-main,
  .upload-result-metrics,
  .upload-result-flow,
  .score-upload-result-card .score-upload-saved-actions {
    position: relative;
    z-index: 1;
  }
  .upload-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .upload-result-head strong { font-size: clamp(20px, 3vw, 30px); line-height: 1.15; }
  .upload-result-pill {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    border: 1px solid rgba(109,242,194,.34);
    border-radius: 999px;
    background: rgba(109,242,194,.11);
    color: #dffff7;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
  }
  .upload-result-main {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(0,0,0,.18);
  }
  .upload-result-main .score-upload-saved-title { font-size: clamp(20px, 2.6vw, 30px); line-height: 1.15; }
  .upload-result-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .upload-result-metric {
    border: 1px solid rgba(126,171,255,.16);
    border-radius: 14px;
    background: rgba(0,0,0,.18);
    padding: 9px 10px;
    min-width: 0;
  }
  .upload-result-metric span { display: block; color: rgba(224,238,255,.68); font-size: 10px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
  .upload-result-metric strong { display: block; margin-top: 3px; color: #fff; font-size: 16px; overflow-wrap: anywhere; }
  .upload-result-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }
  .upload-result-flow span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(109,242,194,.23);
    border-radius: 999px;
    background: rgba(109,242,194,.08);
    color: #dcfff6;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 900;
    opacity: 0;
    transform: translateY(6px);
    animation: uploadResultStepIn .36s ease-out both;
  }
  .upload-result-flow span:nth-child(2) { animation-delay: .08s; }
  .upload-result-flow span:nth-child(3) { animation-delay: .16s; }
  .upload-result-flow span:nth-child(4) { animation-delay: .24s; }
  @keyframes uploadExtractionScan {
    0% { transform: translateY(0); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translateY(calc(var(--upload-scan-height, 420px))); opacity: 0; }
  }
  @keyframes uploadExtractionGrid {
    0% { opacity: 0; }
    22% { opacity: .75; }
    100% { opacity: 0; }
  }
  @keyframes uploadExtractChipPeek {
    0% { opacity: 0; transform: translateX(-18px) scale(.96); filter: blur(4px); }
    16% { opacity: 1; transform: translateX(2px) scale(1.01); filter: blur(0); }
    58% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translateX(18px) scale(.985); filter: blur(3px); }
  }
  @keyframes uploadResultSweep {
    from { transform: translateX(-115%); }
    to { transform: translateX(115%); }
  }
  @keyframes uploadResultStepIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (max-width: 760px) {
    .upload-extraction-stack { left: 8px; top: 8px; width: min(230px, calc(100% - 16px)); gap: 5px; }
    .upload-extract-chip { min-height: 27px; padding: 5px 7px; }
    .upload-extract-chip b { font-size: 9px; }
    .upload-extract-chip em { font-size: 10.5px; }
    .upload-result-head { display: grid; }
    .upload-result-metrics { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .score-upload-dropzone.is-reading::before,
    .score-upload-dropzone.is-reading::after,
    .score-upload-image-review-frame.has-extraction::before,
    .score-upload-image-review-frame.has-extraction::after { animation: none !important; opacity: 0 !important; transform: none !important; filter: none !important; }
    .upload-extraction-stack { display: none !important; }
    .score-upload-result-card::before { animation: none !important; opacity: 0 !important; transform: none !important; filter: none !important; }
    .upload-result-flow span { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  }

  .score-preview-save-disabled { border: 1px solid rgba(85, 214, 255, .22); background: rgba(85, 214, 255, .07); color: var(--muted); border-radius: 12px; padding: 10px 12px; line-height: 1.55; }

  .score-preview-save-panel {
    border: 1px solid rgba(87, 255, 190, .24);
    background: linear-gradient(135deg, rgba(34, 255, 188, .10), rgba(78, 167, 255, .07));
    border-radius: 16px;
    padding: 14px;
    display: grid;
    gap: 12px;
  }
  .score-preview-save-panel h4 { margin: 0; font-size: 18px; }
  .score-preview-save-panel p { margin: 0; color: var(--muted); line-height: 1.6; }
  .score-upload-tag-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .score-upload-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(126, 171, 255, .20);
    background: rgba(6, 13, 31, .68);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--text);
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
  }
  .score-upload-tag-chip input { accent-color: #55d6ff; }
  .score-upload-confirm-row { display: flex; align-items: flex-start; gap: 9px; color: var(--text); line-height: 1.55; }
  .score-upload-confirm-row input { margin-top: 3px; accent-color: #55d6ff; }
  .score-upload-save-status { color: var(--muted); font-size: 13px; line-height: 1.5; min-height: 18px; }
  .score-upload-save-status.warn { color: #ffe4b0; border: 1px solid rgba(255, 200, 91, .24); background: rgba(255, 200, 91, .08); border-radius: 12px; padding: 8px 10px; display: inline-block; max-width: 620px; }
  .score-upload-saved-card {
    border: 1px solid rgba(87, 255, 190, .26);
    background: rgba(43, 255, 184, .09);
    color: #d9fff4;
    border-radius: 16px;
    padding: 14px;
    display: grid;
    gap: 8px;
  }

  /* v30.0.77: clearer Web score save completion actions */
  .score-upload-saved-card {
    background:
      radial-gradient(circle at 12% 8%, rgba(109, 242, 194, .20), transparent 32%),
      linear-gradient(135deg, rgba(43, 255, 184, .12), rgba(85, 214, 255, .07));
    padding: 18px;
    gap: 12px;
  }
  .score-upload-saved-card strong { font-size: clamp(20px, 3vw, 28px); line-height: 1.2; }
  .score-upload-saved-card span { line-height: 1.55; }
  .score-upload-saved-title { font-weight: 900; color: #ffffff; overflow-wrap: anywhere; }
  .score-upload-saved-meta { color: var(--muted); }
  .score-upload-saved-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
  .score-upload-saved-actions .btn { min-height: 38px; }

  /* Web onboarding uses the shared dialog and remains readable on narrow screens. */
  .registration-setup { display: grid; gap: 16px; min-width: 0; }
  .registration-setup p { margin: 0; line-height: 1.75; overflow-wrap: anywhere; }
  .registration-form { display: grid; gap: 14px; min-width: 0; }
  .registration-form > label { font-weight: 700; }
  .registration-form > input {
    box-sizing: border-box; width: 100%; min-width: 0; padding: 12px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
    color: var(--text); font: inherit; font-size: 16px;
  }
  .registration-confirm { display: flex; align-items: flex-start; gap: 10px; line-height: 1.65; cursor: pointer; }
  .registration-confirm input { flex: 0 0 20px; width: 20px; height: 20px; margin: 3px 0 0; }
  .registration-confirm span { min-width: 0; overflow-wrap: anywhere; font-weight: 400; }
  .registration-note { color: var(--muted); font-size: 13px; }
  .registration-link { color: #80d9ff; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
  .registration-setup > .registration-link { padding: 10px 0; }
  .registration-submit {
    width: 100%; min-height: 46px; padding: 12px; font: inherit; font-weight: 700;
    border: 1px solid #4688a3; border-radius: 10px; background: #173e51; color: #e5f7ff; cursor: pointer;
  }
  .registration-submit:hover { background: #20506a; }
  .registration-submit:disabled { cursor: wait; opacity: .65; }
  .registration-result { color: #ffb1b1; }
  .registration-result:empty { display: none; }
  .registration-setup :is(a, button, input):focus-visible { outline: 2px solid #80d9ff; outline-offset: 3px; }

  /* FANBOX support stays below the completed score and its next actions. */
  .fanbox-support-card {
    min-width: 0;
    margin-top: 20px;
    padding: 18px;
    border: 1px solid rgba(221, 181, 92, .25);
    border-radius: 14px;
    background: rgba(221, 181, 92, .035);
    color: var(--text);
  }
  .fanbox-support-content { min-width: 0; }
  .fanbox-support-content h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: normal;
    overflow-wrap: anywhere;
  }
  .fanbox-support-content p {
    margin: 8px 0 10px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.75;
    overflow-wrap: anywhere;
  }
  .fanbox-support-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    max-width: 100%;
    color: #e7ca85;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.65;
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
  }
  .fanbox-support-link:hover { color: #ffe1a0; }
  .fanbox-support-link:focus-visible,
  footer .links .fanbox:focus-visible { outline: 2px solid #e7ca85; outline-offset: 4px; }
  @media (max-width: 760px) {
    .fanbox-support-card { padding: 14px; }
  }
  @media (max-width: 760px) {
    .score-upload-hero, .score-upload-panel, .score-preview-result { border-radius: 18px; }
  }

  @media (max-width: 760px) {
    .score-upload-xp-head { align-items: flex-start; flex-direction: column; }
    .score-upload-xp-head span { text-align: left; }
    .score-upload-xp-toast { flex-basis: min(230px, 86vw); }
  }


  /* v30.0.74: manual chart match for Web score upload */
  .score-upload-manual-panel { display: grid; gap: 12px; border: 1px solid rgba(85, 214, 255, .22); background: linear-gradient(135deg, rgba(85, 214, 255, .10), rgba(255, 105, 180, .06)); border-radius: 18px; padding: 14px; }
  .score-upload-manual-panel h4 { margin: 0; font-size: 18px; }
  .score-upload-manual-panel p { margin: 0; color: var(--muted); line-height: 1.6; }
  .score-upload-manual-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .score-upload-manual-search input { min-width: 0; border: 1px solid rgba(126, 171, 255, .22); background: rgba(1, 6, 18, .68); color: var(--text); border-radius: 13px; padding: 10px 12px; outline: none; }
  .score-upload-manual-search input:focus { border-color: rgba(85, 214, 255, .58); box-shadow: 0 0 0 3px rgba(85, 214, 255, .12); }
  .score-upload-manual-results { display: grid; gap: 8px; }
  .score-upload-suggested-block {
    display: grid;
    gap: 3px;
    border: 1px solid rgba(255, 200, 91, .20);
    background: rgba(255, 200, 91, .075);
    border-radius: 12px;
    padding: 9px 10px;
  }
  .score-upload-suggested-block strong {
    color: #ffe2a6;
    font-size: 13px;
  }
  .score-upload-suggested-block span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
  }
  .score-upload-manual-candidate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid rgba(126, 171, 255, .16); border-radius: 14px; background: rgba(0,0,0,.20); padding: 10px 11px; }
  .score-upload-manual-candidate strong { display:block; overflow-wrap:anywhere; }
  .score-upload-manual-candidate span { color: var(--muted); font-size: 12px; line-height: 1.45; }
  .score-upload-manual-candidate.selected { border-color: rgba(85, 214, 255, .62); background: rgba(85, 214, 255, .11); }
  .score-upload-selected-chart { border: 1px solid rgba(109, 242, 194, .28); background: rgba(109, 242, 194, .08); color: #d8fff3; border-radius: 12px; padding: 9px 11px; line-height: 1.5; }
  .score-upload-existing-new-difficulty {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(109, 242, 194, .24);
    background: linear-gradient(135deg, rgba(109, 242, 194, .10), rgba(85, 214, 255, .06));
    border-radius: 15px;
    padding: 12px;
  }
  .score-upload-existing-new-difficulty h4 { margin: 0; font-size: 16px; }
  .score-upload-existing-new-difficulty p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 13px; }
  .score-upload-existing-new-difficulty-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
  }
  .score-upload-existing-new-difficulty-controls .score-upload-correction-field { margin: 0; }
  @media (max-width: 640px) {
    .score-upload-existing-new-difficulty-controls {
      grid-template-columns: 1fr;
      align-items: stretch;
    }
    .score-upload-existing-new-difficulty-controls .btn {
      width: 100%;
      min-width: 0;
    }
  }
  .score-upload-new-chart-panel { display: grid; gap: 10px; margin-top: 10px; border: 1px solid rgba(255, 200, 91, .24); background: linear-gradient(135deg, rgba(255, 200, 91, .10), rgba(85, 214, 255, .06)); border-radius: 16px; padding: 12px; }
  .score-upload-new-chart-panel h4 { margin: 0; font-size: 17px; }
  .score-upload-new-chart-panel p { margin: 0; color: var(--muted); line-height: 1.6; }
  .score-upload-correction-panel { display: grid; gap: 10px; margin: 12px 0; border: 1px solid rgba(126, 171, 255, .18); background: rgba(2, 10, 28, .45); border-radius: 16px; padding: 12px; }
  .score-upload-correction-panel h4 { margin: 0; font-size: 16px; }
  .score-upload-correction-panel p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 13px; }
  .score-upload-correction-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .score-upload-correction-field { display: grid; gap: 6px; }
  .score-upload-correction-field label { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .03em; }
  .score-upload-correction-field input,
  .score-upload-correction-field select { min-width: 0; border: 1px solid rgba(126, 171, 255, .22); background: rgba(1, 6, 18, .72); color: var(--text); border-radius: 12px; padding: 9px 10px; outline: none; }
  .score-upload-correction-field input:focus,
  .score-upload-correction-field select:focus { border-color: rgba(85, 214, 255, .58); box-shadow: 0 0 0 3px rgba(85, 214, 255, .12); }
  .score-upload-new-chart-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .score-upload-new-chart-warning { border: 1px solid rgba(255, 200, 91, .26); background: rgba(255, 200, 91, .08); color: #ffe4b0; border-radius: 12px; padding: 9px 10px; line-height: 1.5; font-size: 13px; }
  @media (max-width: 720px) { .score-upload-correction-grid, .score-upload-new-chart-fields { grid-template-columns: 1fr; } }
  @media (max-width: 620px) { .score-upload-manual-search, .score-upload-manual-candidate { grid-template-columns: 1fr; } }

  /* v30.0.70: score upload UX polish */
  /* v30.0.71: web score save foundation */
  /* v30.0.73: web score nickname apply fix */
  .auth-menu {
    min-width: max-content !important;
    width: max-content !important;
  }
  .auth-menu button,
  .auth-menu-profile,
  .auth-menu-upload,
  .auth-widget .auth-logout {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: 0 !important;
    line-height: 1.15 !important;
  }

  .floating-score-upload {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 1050;
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    max-width: min(240px, calc(100vw - 44px));
    padding: 0 18px 0 13px;
    border: 1px solid rgba(85, 214, 255, .42);
    border-radius: 999px;
    background:
      radial-gradient(circle at 24% 18%, rgba(255,255,255,.16), transparent 34%),
      linear-gradient(135deg, rgba(85, 214, 255, .24), rgba(255, 88, 176, .15) 46%, rgba(7, 12, 25, .96));
    color: #fff;
    font-weight: 900;
    letter-spacing: .02em;
    box-shadow: 0 18px 46px rgba(0,0,0,.52), 0 0 26px rgba(85,214,255,.18), inset 0 1px 0 rgba(255,255,255,.10);
    cursor: pointer;
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
  }
  .floating-score-upload.show { display: inline-flex; }
  .floating-score-upload:hover,
  .floating-score-upload:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(85, 214, 255, .70);
    box-shadow: 0 24px 56px rgba(0,0,0,.58), 0 0 34px rgba(85,214,255,.26), inset 0 1px 0 rgba(255,255,255,.14);
    outline: none;
  }
  .floating-score-upload-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.20);
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
  }
  .floating-score-upload-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
  }

  .score-upload-page.upload-polished {
    max-width: 1080px;
    margin: 0 auto;
    gap: 20px;
  }
  .score-upload-hero.upload-polished-hero {
    padding: clamp(20px, 3vw, 30px);
  }
  .score-upload-hero.upload-polished-hero h2 {
    font-size: clamp(30px, 4vw, 48px);
    letter-spacing: -.03em;
  }
  .score-upload-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(240px, .55fr);
    gap: 16px;
    align-items: start;
  }
  .score-upload-panel.upload-polished-panel {
    padding: clamp(16px, 2.4vw, 24px);
    gap: 18px;
  }
  .score-upload-dropzone {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 300px;
    padding: 22px;
    border: 1.5px dashed rgba(85, 214, 255, .36);
    border-radius: 22px;
    background:
      radial-gradient(circle at 50% 0%, rgba(85, 214, 255, .12), transparent 44%),
      rgba(0,0,0,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
    text-align: center;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
    overflow: hidden;
  }
  .score-upload-dropzone:hover,
  .score-upload-dropzone:focus-visible,
  .score-upload-dropzone.drag-over {
    border-color: rgba(85, 214, 255, .72);
    background:
      radial-gradient(circle at 50% 0%, rgba(85, 214, 255, .18), transparent 46%),
      rgba(7, 18, 34, .46);
    outline: none;
  }
  .score-upload-dropzone.drag-over { transform: translateY(-1px); }
  .score-upload-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .score-upload-drop-empty,
  .score-upload-drop-preview {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: 100%;
  }
  .score-upload-drop-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(85, 214, 255, .10);
    border: 1px solid rgba(85, 214, 255, .25);
    color: #bfefff;
    font-size: 30px;
    box-shadow: 0 0 28px rgba(85, 214, 255, .11);
  }
  .score-upload-drop-title {
    margin: 0;
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 950;
    letter-spacing: -.02em;
  }
  .score-upload-file-name {
    color: #eaf8ff;
    font-size: 13px;
    font-weight: 850;
    overflow-wrap: anywhere;
  }
  .score-upload-thumb {
    display: none;
    width: min(100%, 520px);
    max-height: 320px;
    object-fit: contain;
    border-radius: 16px;
    border: 1px solid rgba(126, 171, 255, .20);
    background: rgba(0,0,0,.25);
    box-shadow: 0 18px 36px rgba(0,0,0,.28);
  }
  .score-upload-dropzone.has-file .score-upload-thumb { display: block; }
  .score-upload-side {
    display: grid;
    gap: 12px;
  }
  .score-upload-side-card {
    border: 1px solid rgba(126, 171, 255, .18);
    border-radius: 18px;
    background: rgba(0,0,0,.18);
    padding: 14px;
  }
  .score-upload-side-card h3 {
    margin: 0 0 10px;
    font-size: 15px;
  }
  .score-upload-actions .btn.primary.score-upload-submit-main {
    min-height: 48px;
    padding-inline: 20px;
    font-size: 15px;
    border-radius: 999px;
    box-shadow: 0 14px 34px rgba(85, 214, 255, .14);
  }
  .score-upload-actions .btn.primary.score-upload-submit-main:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
  }
  .score-preview-result.upload-polished-result {
    padding: clamp(16px, 2.4vw, 24px);
  }
  .score-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }
  .score-preview-header h3 { font-size: 26px; }
  .score-preview-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 180px) minmax(130px, 180px);
    gap: 12px;
  }
  .score-preview-main-card,
  .score-preview-big-stat,
  .score-preview-section {
    border: 1px solid rgba(126, 171, 255, .17);
    border-radius: 18px;
    background: rgba(0,0,0,.18);
    padding: 14px;
    min-width: 0;
  }
  .score-preview-main-card strong {
    display: block;
    font-size: clamp(20px, 2.6vw, 30px);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .score-preview-main-card span,
  .score-preview-big-stat span,
  .score-preview-section-title {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .score-preview-big-stat strong {
    display: block;
    margin-top: 6px;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1;
  }
  .score-preview-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .score-preview-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
  }
  .score-preview-item {
    border-radius: 12px;
    padding: 9px 10px;
  }
  .score-preview-item strong { font-size: 15px; }

  @media (max-width: 760px) {
    .auth-menu {
      width: min(260px, calc(100vw - 16px)) !important;
      min-width: 0 !important;
    }
    .auth-menu button,
    .auth-menu-profile,
    .auth-menu-upload,
    .auth-widget .auth-logout {
      white-space: nowrap !important;
    }
    .floating-score-upload {
      left: 14px;
      bottom: 14px;
      min-height: 52px;
      padding-right: 15px;
    }
    .floating-score-upload-label { max-width: 130px; }
    .score-upload-layout,
    .score-preview-summary,
    .score-preview-sections {
      grid-template-columns: 1fr;
    }
    .score-upload-dropzone { min-height: 250px; }
    .score-preview-section-grid { grid-template-columns: 1fr; }
  }


  /* v30.0.80: Web Score Upload Studio UI */
  .score-upload-page.upload-studio {
    max-width: min(1320px, calc(100vw - 28px));
  }
  .score-upload-stage-shell {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
  }
  .score-upload-stage-track {
    display: grid;
    grid-template-columns: 100% 100%;
    transition: transform .42s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }
  .score-upload-page.has-result .score-upload-stage-track { transform: translateX(-100%); }
  .score-upload-stage {
    min-width: 0;
    opacity: 1;
    transition: opacity .24s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
  }
  .score-upload-page.has-result .score-upload-stage-upload { opacity: .35; transform: scale(.985); pointer-events: none; }
  .score-upload-stage-review { transform: translateX(18px); }
  .score-upload-page.has-result .score-upload-stage-review { transform: translateX(0); }
  .score-upload-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
  }
  .score-upload-step {
    border: 1px solid rgba(126, 171, 255, .17);
    border-radius: 999px;
    background: rgba(0, 0, 0, .18);
    padding: 8px 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .03em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .score-upload-step.active {
    color: #eaffff;
    border-color: rgba(85, 214, 255, .48);
    background: linear-gradient(135deg, rgba(85, 214, 255, .18), rgba(255, 105, 180, .08));
    box-shadow: 0 0 26px rgba(85, 214, 255, .12);
  }
  .score-upload-review-layout {
    display: grid;
    grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
    gap: 18px;
    align-items: start;
  }
  .score-upload-image-review-card {
    position: sticky;
    top: calc(var(--topbar-height, 72px) + 14px);
    display: grid;
    gap: 12px;
    border: 1px solid rgba(126, 171, 255, .20);
    border-radius: 24px;
    background:
      radial-gradient(circle at 12% 0%, rgba(85, 214, 255, .12), transparent 38%),
      linear-gradient(180deg, rgba(12, 20, 42, .88), rgba(5, 9, 20, .94));
    padding: 14px;
    box-shadow: 0 20px 56px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .045);
  }
  .score-upload-image-review-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
  }
  .score-upload-image-review-head h3 { margin: 0; font-size: 18px; }
  .score-upload-image-review-head p { margin: 4px 0 0; color: var(--muted); line-height: 1.55; font-size: 13px; }
  .score-upload-image-review-name {
    flex: 0 1 auto;
    max-width: 180px;
    border: 1px solid rgba(85, 214, 255, .22);
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(85, 214, 255, .08);
    color: #dff8ff;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .score-upload-image-review-frame {
    position: relative;
    display: grid;
    place-items: center;
    min-height: min(62vh, 620px);
    border: 1px solid rgba(126, 171, 255, .16);
    border-radius: 18px;
    background: rgba(0, 0, 0, .28);
    overflow: hidden;
  }
  .score-upload-image-review-frame img {
    width: 100%;
    max-height: min(62vh, 620px);
    object-fit: contain;
    display: block;
  }
  .score-upload-image-review-placeholder {
    color: var(--muted);
    padding: 24px;
    text-align: center;
    line-height: 1.6;
  }
  .score-upload-review-main {
    min-width: 0;
    display: grid;
    gap: 14px;
  }
  .score-preview-result.upload-polished-result {
    animation: scoreUploadReviewIn .46s cubic-bezier(.22, 1, .36, 1) both;
  }
  @keyframes scoreUploadReviewIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .score-preview-summary {
    grid-template-columns: minmax(0, 1.18fr) minmax(120px, .42fr) minmax(120px, .42fr);
  }
  .score-preview-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .score-preview-item span { font-size: 11px; }
  .score-preview-item strong { font-size: 16px; line-height: 1.25; }
  .score-upload-correction-grid,
  .score-upload-new-chart-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  @media (max-width: 980px) {
    .score-upload-review-layout { grid-template-columns: 1fr; }
    .score-upload-image-review-card { position: relative; top: auto; }
    .score-upload-image-review-frame { min-height: 280px; }
    .score-upload-image-review-frame img { max-height: 420px; }
  }
  @media (max-width: 760px) {
    .score-upload-page.upload-studio { max-width: calc(100vw - 18px); }
    .score-upload-stage-shell { overflow: visible; }
    .score-upload-stage-track { display: block; transform: none !important; }
    .score-upload-page.has-result .score-upload-stage-upload { display: none; }
    .score-upload-stage-review { transform: none; }
    .score-upload-progress { grid-template-columns: 1fr; }
    .score-upload-image-review-head { display: grid; }
    .score-upload-image-review-name { max-width: 100%; }
    .score-upload-correction-grid,
    .score-upload-new-chart-fields { grid-template-columns: 1fr; }
  }


  /* v30.0.81: Compact upload studio + review gate */
  .score-upload-page.upload-studio {
    max-width: min(1120px, calc(100vw - 24px));
    gap: 10px;
  }
  .score-upload-page.upload-studio .score-upload-hero.upload-polished-hero {
    padding: 10px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
    gap: 14px;
    align-items: center;
    border-radius: 18px;
  }
  .score-upload-page.upload-studio .score-upload-hero.upload-polished-hero h2 {
    margin: 1px 0 2px;
    font-size: clamp(20px, 2.2vw, 28px);
    letter-spacing: -.02em;
  }
  .score-upload-page.upload-studio .score-upload-hero.upload-polished-hero p {
    max-width: none;
    line-height: 1.35;
    font-size: 12px;
  }
  .score-upload-page.upload-studio .section-kicker {
    font-size: 10px;
    letter-spacing: .08em;
  }
  .score-upload-page.upload-studio .score-upload-progress {
    margin-top: 0;
    gap: 6px;
  }
  .score-upload-page.upload-studio .score-upload-step {
    padding: 7px 9px;
    font-size: 11px;
  }
  .score-upload-stage-shell {
    min-height: min(660px, calc(100vh - var(--topbar-height, 72px) - 126px));
    border-radius: 22px;
    transform-origin: center top;
  }
  .score-upload-page.score-upload-stage-animating .score-upload-stage-shell {
    animation: uploadShellLiftSlide .62s cubic-bezier(.18, 1, .26, 1) both;
  }
  @keyframes uploadShellLiftSlide {
    0% { transform: translateY(0) scale(1); filter: brightness(1); }
    32% { transform: translateY(-10px) scale(1.012); filter: brightness(1.12); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
  }
  .score-upload-page.score-upload-result-ready:not(.has-result) .score-upload-stage-track { transform: translateX(0); }
  .score-upload-page.score-upload-result-ready:not(.has-result) .score-upload-stage-review { opacity: 0; }
  .score-upload-page.upload-studio .score-upload-layout {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: 12px;
  }
  .score-upload-page.upload-studio .score-upload-panel.upload-polished-panel,
  .score-upload-page.upload-studio .score-upload-side-card,
  .score-upload-page.upload-studio .score-preview-result.upload-polished-result,
  .score-upload-page.upload-studio .score-upload-image-review-card {
    border-radius: 18px;
    padding: 12px;
  }
  .score-upload-page.upload-studio .score-upload-dropzone {
    min-height: min(520px, calc(100vh - var(--topbar-height, 72px) - 190px));
    padding: 16px;
    border-radius: 18px;
  }
  .score-upload-page.upload-studio .score-upload-drop-icon {
    width: 54px;
    height: 54px;
    font-size: 24px;
  }
  .score-upload-page.upload-studio .score-upload-drop-title {
    font-size: clamp(18px, 2vw, 24px);
  }
  .score-upload-page.upload-studio .score-upload-thumb {
    max-height: min(420px, calc(100vh - var(--topbar-height, 72px) - 245px));
  }
  .score-upload-review-layout {
    grid-template-columns: minmax(320px, .86fr) minmax(0, 1.14fr);
    gap: 12px;
    min-height: min(660px, calc(100vh - var(--topbar-height, 72px) - 126px));
    height: min(660px, calc(100vh - var(--topbar-height, 72px) - 126px));
  }
  .score-upload-image-review-card {
    position: relative;
    top: auto;
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .score-upload-image-review-head h3 { font-size: 15px; }
  .score-upload-image-review-head p { font-size: 12px; line-height: 1.35; }
  .score-upload-image-review-frame {
    min-height: 0;
    height: 100%;
    border-radius: 14px;
  }
  .score-upload-image-review-frame img {
    max-height: 100%;
    height: 100%;
    object-fit: contain;
  }
  .score-upload-review-main {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .score-preview-result.upload-polished-result {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto minmax(0, auto) auto auto minmax(0, 1fr);
    gap: 9px;
  }
  .score-preview-header h3 { font-size: 18px; margin: 0; }
  .score-preview-summary {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 130px) minmax(110px, 150px);
    gap: 8px;
  }
  .score-preview-main-card,
  .score-preview-big-stat,
  .score-preview-section {
    border-radius: 13px;
    padding: 9px 10px;
  }
  .score-preview-main-card strong { font-size: clamp(16px, 1.7vw, 22px); }
  .score-preview-main-card p { margin: 4px 0 0; font-size: 12px; line-height: 1.35; }
  .score-preview-big-stat strong { font-size: clamp(20px, 2.1vw, 28px); }
  .score-preview-sections { gap: 8px; }
  .score-preview-section-grid { gap: 6px; }
  .score-preview-item { padding: 7px 8px; border-radius: 10px; }
  .score-preview-item span { font-size: 10px; }
  .score-preview-item strong { font-size: 13px; line-height: 1.2; }
  .score-preview-warnings { gap: 6px; }
  .score-preview-warning { padding: 7px 9px; font-size: 12px; line-height: 1.35; }
  .score-upload-review-decision {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(85, 214, 255, .22);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(85, 214, 255, .10), rgba(255, 105, 180, .055));
    padding: 10px;
  }
  .score-upload-review-decision-copy { display: grid; gap: 2px; min-width: 0; }
  .score-upload-review-decision-copy strong { font-size: 14px; }
  .score-upload-review-decision-copy span { color: var(--muted); font-size: 12px; line-height: 1.35; }
  .score-upload-review-decision-actions { display: flex; flex-wrap: nowrap; gap: 8px; flex: 0 0 auto; }
  .score-upload-review-decision-actions .btn { min-height: 34px; padding: 0 12px; border-radius: 999px; white-space: nowrap; }
  .score-upload-next-panel {
    min-height: 0;
    overflow: auto;
    border-radius: 14px;
    animation: scoreUploadPanelRise .28s cubic-bezier(.22, 1, .36, 1) both;
    scrollbar-width: thin;
  }
  .score-upload-next-panel[hidden] { display: none !important; }
  @keyframes scoreUploadPanelRise {
    from { opacity: 0; transform: translateY(10px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .score-upload-page.upload-studio .score-preview-save-panel,
  .score-upload-page.upload-studio .score-upload-manual-panel,
  .score-upload-page.upload-studio .score-upload-new-chart-panel,
  .score-upload-page.upload-studio .score-upload-correction-panel {
    padding: 10px;
    border-radius: 13px;
    gap: 8px;
  }
  .score-upload-page.upload-studio .score-preview-save-panel h4,
  .score-upload-page.upload-studio .score-upload-manual-panel h4,
  .score-upload-page.upload-studio .score-upload-new-chart-panel h4,
  .score-upload-page.upload-studio .score-upload-correction-panel h4 { font-size: 14px; }
  .score-upload-page.upload-studio .score-preview-save-panel p,
  .score-upload-page.upload-studio .score-upload-manual-panel p,
  .score-upload-page.upload-studio .score-upload-new-chart-panel p,
  .score-upload-page.upload-studio .score-upload-correction-panel p { font-size: 12px; line-height: 1.35; }
  .score-upload-page.upload-studio .score-upload-correction-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .score-upload-page.upload-studio .score-upload-new-chart-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .score-upload-page.upload-studio .score-upload-correction-field { gap: 4px; }
  .score-upload-page.upload-studio .score-upload-correction-field label { font-size: 10px; }
  .score-upload-page.upload-studio .score-upload-correction-field input,
  .score-upload-page.upload-studio .score-upload-correction-field select,
  .score-upload-page.upload-studio .score-upload-manual-search input { min-height: 34px; padding: 7px 9px; border-radius: 10px; }
  .score-upload-page.upload-studio .score-upload-tag-chip { padding: 5px 8px; font-size: 11px; }
  .score-upload-page.upload-studio .score-upload-confirm-row { font-size: 12px; line-height: 1.35; }
  .score-upload-page.upload-studio .score-upload-actions .btn.primary.score-upload-submit-main,
  .score-upload-page.upload-studio .score-upload-actions .btn.danger.score-upload-submit-main { min-height: 38px; font-size: 13px; }
  .score-upload-page.upload-studio .score-upload-manual-candidate { padding: 8px; border-radius: 11px; }
  .score-upload-page.upload-studio .score-upload-manual-candidate span { font-size: 11px; }
  @media (max-width: 860px) {
    .score-upload-page.upload-studio .score-upload-hero.upload-polished-hero { grid-template-columns: 1fr; }
    .score-upload-page.upload-studio .score-upload-hero.upload-polished-hero p { display: none; }
    .score-upload-stage-shell { min-height: 0; }
    .score-upload-review-layout { height: auto; min-height: 0; grid-template-columns: 1fr; }
    .score-upload-review-main { height: auto; overflow: visible; }
    .score-preview-result.upload-polished-result { height: auto; overflow: visible; }
    .score-upload-image-review-card { height: auto; }
    .score-upload-image-review-frame { height: auto; min-height: 220px; }
    .score-upload-image-review-frame img { height: auto; max-height: 340px; }
  }
  @media (max-width: 760px) {
    .score-upload-stage-shell { overflow: hidden; }
    .score-upload-stage-track { display: grid; transform: translateX(0); }
    .score-upload-page.has-result .score-upload-stage-track { transform: translateX(-100%) !important; }
    .score-upload-page.has-result .score-upload-stage-upload { display: block; }
    .score-upload-review-decision { align-items: stretch; flex-direction: column; }
    .score-upload-review-decision-actions { width: 100%; }
    .score-upload-review-decision-actions .btn { flex: 1 1 auto; }
    .score-upload-page.upload-studio .score-preview-summary,
    .score-upload-page.upload-studio .score-preview-sections,
    .score-upload-page.upload-studio .score-upload-correction-grid,
    .score-upload-page.upload-studio .score-upload-new-chart-fields { grid-template-columns: 1fr; }
  }


  /* v30.0.82: upload result carousel + reliable save controls */
  .score-preview-result.upload-flow-result {
    padding: 0 !important;
    overflow: hidden !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
  .score-upload-result-carousel {
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
  }
  .score-upload-result-track {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 100% 100%;
    transform: translateX(0);
    transition: transform .44s cubic-bezier(.18, 1, .26, 1);
    will-change: transform;
  }
  .score-upload-result-pane {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    padding: 11px;
  }
  .score-upload-compare-pane {
    display: grid;
    grid-template-rows: auto auto minmax(0, auto) auto auto;
    gap: 8px;
  }
  .score-upload-action-pane {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    background:
      radial-gradient(circle at 20% 0%, rgba(85, 214, 255, .12), transparent 34%),
      rgba(4, 9, 22, .48);
  }
  .score-upload-action-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    border: 1px solid rgba(126, 171, 255, .14);
    background: rgba(7, 13, 28, .72);
    border-radius: 13px;
    padding: 8px;
  }
  .score-upload-action-bar .btn.small {
    min-width: 36px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
  }
  .score-upload-action-bar strong {
    display: block;
    font-size: 14px;
    line-height: 1.25;
  }
  .score-upload-action-bar span {
    display: block;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .score-upload-action-scroll {
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    border-radius: 14px;
  }
  .score-upload-compare-pane { grid-template-rows: auto auto auto minmax(0, auto) auto auto; }
  .score-upload-result-carousel.mode-save .score-upload-performance-correction {
    display: none;
  }
  .score-upload-result-carousel.mode-edit .score-upload-action-pane,
  .score-upload-result-carousel.mode-save .score-upload-action-pane {
    animation: uploadActionPaneEnter .38s cubic-bezier(.18, 1, .26, 1) both;
  }
  @keyframes uploadActionPaneEnter {
    from { transform: translateX(18px) scale(.992); filter: brightness(.96); }
    42% { transform: translateX(-2px) scale(1.004); filter: brightness(1.08); }
    to { transform: translateX(0) scale(1); filter: brightness(1); }
  }
  .score-upload-review-decision-actions .btn.primary,
  .score-upload-review-decision-actions .btn {
    min-width: max-content;
  }
  .score-upload-page.upload-studio .score-preview-save-panel,
  .score-upload-page.upload-studio .score-upload-manual-panel,
  .score-upload-page.upload-studio .score-upload-new-chart-panel {
    margin: 0;
  }
  @media (max-width: 860px) {
    .score-upload-result-carousel,
    .score-upload-result-track,
    .score-upload-result-pane { height: auto; min-height: 0; }
    .score-upload-result-track { display: grid; }
      .score-upload-action-scroll { max-height: none; overflow: visible; }
    .score-upload-action-bar span { white-space: normal; }
  }


  /* v30.0.83: compact review panes, image zoom/pan, and accuracy lock */
  .score-upload-stage-shell {
    min-height: min(600px, calc(100vh - var(--topbar-height, 72px) - 132px));
  }
  .score-upload-review-layout {
    min-height: min(600px, calc(100vh - var(--topbar-height, 72px) - 132px));
    height: min(600px, calc(100vh - var(--topbar-height, 72px) - 132px));
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  }
  .score-upload-result-track {
    grid-template-columns: 100% 100% 100% 100% !important;
  }
  .score-upload-result-carousel.mode-edit .score-upload-result-track { transform: translateX(-100%) !important; }
  .score-upload-result-carousel.mode-save .score-upload-result-track { transform: translateX(-200%) !important; }
  .score-upload-result-carousel.mode-new .score-upload-result-track { transform: translateX(-300%) !important; }
  .score-upload-action-pane {
    min-height: 0;
    overflow: hidden;
  }
  .score-upload-action-scroll {
    overflow: hidden !important;
    display: grid;
    align-content: start;
    gap: 8px;
  }
  .score-upload-action-scroll .score-upload-correction-panel,
  .score-upload-action-scroll .score-preview-save-panel,
  .score-upload-action-scroll .score-upload-manual-panel,
  .score-upload-action-scroll .score-upload-new-chart-panel {
    max-height: none;
  }
  .score-upload-image-review-frame {
    position: relative;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    user-select: none;
  }
  .score-upload-image-review-frame.is-dragging { cursor: grabbing; }
  .score-upload-image-review-frame img.score-upload-review-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: none;
    transform: translate3d(var(--upload-img-x, 0px), var(--upload-img-y, 0px), 0) scale(var(--upload-img-zoom, 1));
    transform-origin: center center;
    transition: transform .12s ease-out;
    will-change: transform;
    pointer-events: none;
  }
  .score-upload-image-tools {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
  }
  .score-upload-image-tools .btn {
    pointer-events: auto;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(3, 8, 20, .78);
    border-color: rgba(126, 171, 255, .28);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    backdrop-filter: blur(14px);
  }
  .score-upload-image-zoom-readout {
    pointer-events: none;
    min-width: 48px;
    text-align: center;
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    background: rgba(3, 8, 20, .72);
    border: 1px solid rgba(126, 171, 255, .20);
    border-radius: 999px;
    padding: 7px 9px;
    backdrop-filter: blur(14px);
  }
  .score-upload-edit-actions,
  .score-upload-new-chart-launch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .score-upload-new-chart-launch {
    border: 1px solid rgba(255, 200, 91, .22);
    background: rgba(255, 200, 91, .07);
    border-radius: 13px;
    padding: 8px 10px;
  }
  .score-upload-new-chart-launch span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    flex: 1 1 220px;
  }
  .score-upload-page.upload-studio .score-upload-manual-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .score-upload-page.upload-studio .score-upload-manual-candidate {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .score-upload-page.upload-studio .score-upload-correction-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .score-upload-page.upload-studio .score-upload-new-chart-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (max-width: 860px) {
    .score-upload-review-layout { height: auto; }
    .score-upload-action-scroll { overflow: visible !important; }
    .score-upload-image-review-frame img.score-upload-review-image { height: auto; max-height: 420px; }
    .score-upload-result-track { grid-template-columns: 100% 100% 100% 100% !important; }
  }
  @media (max-width: 760px) {
    .score-upload-page.upload-studio .score-upload-manual-results,
    .score-upload-page.upload-studio .score-upload-correction-grid,
    .score-upload-page.upload-studio .score-upload-new-chart-fields { grid-template-columns: 1fr; }
    .score-upload-image-tools { justify-content: flex-start; overflow-x: auto; }
  }


  /* v30.0.84: smart upload entry and cleaner reading wording */
  .score-upload-page.upload-studio .score-upload-hero.upload-polished-hero {
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
    padding: 8px 12px !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .score-upload-page.upload-studio .score-upload-hero.upload-polished-hero p,
  .score-upload-page.upload-studio .score-upload-progress {
    display: none !important;
  }
  .score-upload-page.upload-studio .score-upload-hero.upload-polished-hero h2 {
    font-size: clamp(19px, 2vw, 26px) !important;
    margin: 0 !important;
  }
  .score-upload-page.upload-studio .score-upload-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 760px;
    margin: 0 auto;
    position: relative;
  }
  .score-upload-page.upload-studio .score-upload-panel.upload-polished-panel {
    padding: 0 !important;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .score-upload-page.upload-studio .score-upload-dropzone {
    min-height: min(430px, calc(100vh - var(--topbar-height, 72px) - 154px)) !important;
    border-radius: 28px !important;
    border-width: 1px;
    background:
      radial-gradient(circle at 50% 0%, rgba(85, 214, 255, .13), transparent 38%),
      radial-gradient(circle at 20% 100%, rgba(255, 105, 180, .10), transparent 40%),
      linear-gradient(180deg, rgba(8, 15, 34, .80), rgba(3, 7, 18, .92));
    box-shadow:
      0 22px 70px rgba(0, 0, 0, .34),
      inset 0 1px 0 rgba(255, 255, 255, .055);
  }
  .score-upload-page.upload-studio .score-upload-drop-title {
    margin: 0;
    font-size: clamp(22px, 3.2vw, 38px) !important;
    letter-spacing: -.03em;
  }
  .score-upload-page.upload-studio .score-upload-drop-icon {
    width: 68px !important;
    height: 68px !important;
    font-size: 29px !important;
    margin-bottom: 8px;
  }
  .score-upload-page.upload-studio .score-upload-file-name {
    margin-top: 10px;
    max-width: min(520px, 86vw);
    font-size: 12px;
  }
  .score-upload-page.upload-studio .score-upload-dropzone.has-file {
    min-height: min(340px, calc(100vh - var(--topbar-height, 72px) - 238px)) !important;
    transform: translateY(-4px) scale(.985);
    transition: transform .38s cubic-bezier(.18, 1, .26, 1), min-height .38s cubic-bezier(.18, 1, .26, 1), border-color .22s ease, box-shadow .22s ease;
    border-color: rgba(109, 242, 194, .38);
    box-shadow:
      0 18px 62px rgba(0, 0, 0, .34),
      0 0 42px rgba(85, 214, 255, .08),
      inset 0 1px 0 rgba(255, 255, 255, .055);
  }
  .score-upload-page.upload-studio .score-upload-dropzone.has-file .score-upload-drop-icon,
  .score-upload-page.upload-studio .score-upload-dropzone.has-file .score-upload-drop-title {
    display: none;
  }
  .score-upload-page.upload-studio .score-upload-dropzone.has-file .score-upload-thumb {
    max-height: min(300px, calc(100vh - var(--topbar-height, 72px) - 282px)) !important;
  }
  .score-upload-page.upload-studio .score-upload-side {
    max-width: 720px;
    margin: 12px auto 0;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
    gap: 10px;
    opacity: 0;
    transform: translateY(18px) scale(.975);
    pointer-events: none;
    filter: blur(5px);
    transition: opacity .34s ease, transform .38s cubic-bezier(.18, 1, .26, 1), filter .34s ease;
  }
  .score-upload-page.score-upload-file-ready .score-upload-side {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    filter: blur(0);
  }
  .score-upload-page.score-upload-file-pop .score-upload-side {
    animation: uploadControlsFloatIn .56s cubic-bezier(.18, 1, .26, 1) both;
  }
  @keyframes uploadControlsFloatIn {
    0% { opacity: 0; transform: translateY(22px) scale(.96); filter: blur(8px); }
    46% { opacity: 1; transform: translateY(-7px) scale(1.012); filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }
  .score-upload-page.upload-studio .score-upload-side-card {
    min-height: 62px;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 20% 0%, rgba(85, 214, 255, .10), transparent 38%),
      rgba(5, 10, 24, .84);
    backdrop-filter: blur(14px) saturate(1.08);
  }
  .score-upload-page.upload-studio .score-upload-side-card h3 {
    font-size: 12px;
    margin-bottom: 6px;
    color: rgba(224, 238, 255, .88);
  }
  .score-upload-page.upload-studio .score-upload-note {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.35;
  }
  .score-upload-page.upload-studio .score-upload-actions .btn.primary.score-upload-submit-main {
    width: 100%;
    min-height: 46px !important;
    border-radius: 16px;
    font-size: 14px;
  }
  @media (max-width: 760px) {
    .score-upload-page.upload-studio .score-upload-side {
      grid-template-columns: 1fr;
    }
    .score-upload-page.upload-studio .score-upload-dropzone {
      min-height: 300px !important;
    }
    .score-upload-page.upload-studio .score-upload-dropzone.has-file {
      min-height: 270px !important;
    }
  }


  /* v30.0.85: upload reading overlay and primary action polish */
  .score-upload-page.upload-studio .score-upload-panel.upload-polished-panel {
    position: relative;
  }
  .score-upload-page.upload-studio .score-upload-status {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 8;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    max-width: min(560px, calc(100% - 32px));
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(85, 214, 255, .34);
    background:
      radial-gradient(circle at 12% 0%, rgba(85, 214, 255, .20), transparent 44%),
      rgba(4, 10, 24, .86);
    color: #ecfbff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .34), 0 0 24px rgba(85, 214, 255, .12);
    backdrop-filter: blur(16px) saturate(1.12);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 14px) scale(.96);
    transition: opacity .22s ease, transform .28s cubic-bezier(.18, 1, .26, 1);
  }
  .score-upload-page.upload-studio .score-upload-status.show {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  .score-upload-page.upload-studio .score-upload-status.show::before {
    content: '';
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
    background: #55d6ff;
    box-shadow: 0 0 16px rgba(85, 214, 255, .72);
    flex: 0 0 auto;
  }
  .score-upload-page.upload-studio .score-upload-status.show.is-reading::before {
    animation: uploadReadingPulse .9s ease-in-out infinite alternate;
  }
  .score-upload-page.upload-studio .score-upload-status.show.is-error {
    border-color: rgba(255, 99, 132, .54);
    background: radial-gradient(circle at 12% 0%, rgba(255, 99, 132, .18), transparent 44%), rgba(24, 5, 15, .90);
    color: #ffe7ed;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .34), 0 0 24px rgba(255, 99, 132, .12);
  }
  .score-upload-page.upload-studio .score-upload-status.show.is-error::before {
    background: #ff6384;
    box-shadow: 0 0 14px rgba(255, 99, 132, .72);
  }
  .score-upload-page.upload-studio .score-upload-status.show.is-waiting {
    border-color: rgba(255, 200, 91, .48);
    background: radial-gradient(circle at 12% 0%, rgba(255, 200, 91, .17), transparent 44%), rgba(28, 17, 5, .90);
    color: #fff0c8;
  }
  .score-upload-page.upload-studio .score-upload-status.show.is-waiting::before {
    background: #ffc85b;
    box-shadow: 0 0 14px rgba(255, 200, 91, .68);
  }
  .score-upload-page.upload-studio .score-upload-dropzone:has(+ .score-upload-status.show.is-error) {
    border-color: rgba(255, 99, 132, .52);
  }
  .score-upload-page.upload-studio .score-upload-dropzone:has(+ .score-upload-status.show.is-waiting) {
    border-color: rgba(255, 200, 91, .50);
  }
  @keyframes uploadReadingPulse {
    from { transform: scale(.76); opacity: .62; }
    to { transform: scale(1.08); opacity: 1; }
  }
  .score-upload-page.upload-studio .score-upload-dropzone.is-reading,
  .score-upload-page.upload-studio .score-upload-dropzone:has(+ .score-upload-status.show) {
    border-color: rgba(85, 214, 255, .62);
  }
  .score-upload-page.upload-studio .score-upload-review-decision-actions,
  .score-upload-page.upload-studio .score-upload-edit-actions,
  .score-upload-page.upload-studio .score-upload-actions {
    justify-content: flex-end;
  }
  .score-upload-page.upload-studio .score-upload-edit-actions {
    width: 100%;
    margin-top: 2px;
  }
  .score-upload-page.upload-studio .score-upload-edit-actions .btn.primary,
  .score-upload-page.upload-studio .score-upload-review-decision-actions .btn.primary,
  .score-upload-page.upload-studio .score-upload-actions .btn.primary.score-upload-submit-main {
    border: 1px solid rgba(85, 214, 255, .72);
    background:
      radial-gradient(circle at 20% 0%, rgba(255,255,255,.20), transparent 32%),
      linear-gradient(135deg, rgba(55, 196, 255, .92), rgba(86, 105, 255, .78));
    color: #ffffff;
    font-weight: 950;
    text-shadow: 0 1px 0 rgba(0,0,0,.22);
    box-shadow: 0 12px 32px rgba(85, 214, 255, .22), inset 0 1px 0 rgba(255,255,255,.22);
  }
  .score-upload-page.upload-studio .score-upload-edit-actions .btn.primary:hover,
  .score-upload-page.upload-studio .score-upload-review-decision-actions .btn.primary:hover,
  .score-upload-page.upload-studio .score-upload-actions .btn.primary.score-upload-submit-main:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(85, 214, 255, .30), inset 0 1px 0 rgba(255,255,255,.25);
  }
  .score-upload-page.upload-studio .score-upload-actions .btn.primary.score-upload-submit-main:disabled,
  .score-upload-page.upload-studio .score-upload-actions .btn.danger.score-upload-submit-main:disabled {
    opacity: .46;
    filter: grayscale(.25);
    transform: none;
    box-shadow: none;
  }
  .score-upload-page.upload-studio .score-upload-actions .btn.danger.score-upload-submit-main,
  .score-upload-page.upload-studio #score-upload-open-new-chart {
    border: 1px solid rgba(255, 200, 91, .66);
    background:
      radial-gradient(circle at 18% 0%, rgba(255,255,255,.16), transparent 34%),
      linear-gradient(135deg, rgba(255, 185, 90, .96), rgba(255, 102, 164, .80));
    color: #14050b;
    font-weight: 950;
    box-shadow: 0 12px 34px rgba(255, 155, 91, .20), inset 0 1px 0 rgba(255,255,255,.22);
  }
  .score-upload-page.upload-studio .score-upload-new-chart-launch {
    position: relative;
    margin-top: 4px;
    padding: 12px 13px;
    border-radius: 16px;
    border: 1px solid rgba(255, 200, 91, .38);
    background:
      radial-gradient(circle at 0% 0%, rgba(255, 200, 91, .20), transparent 42%),
      linear-gradient(135deg, rgba(255, 200, 91, .12), rgba(255, 105, 180, .08));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }
  .score-upload-page.upload-studio .score-upload-new-chart-launch::before {
    content: '＋';
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 200, 91, .18);
    color: #ffe0a6;
    font-weight: 950;
    flex: 0 0 auto;
  }
  .score-upload-page.upload-studio .score-upload-new-chart-launch span {
    color: #ffe8c0;
    font-size: 12px;
    font-weight: 850;
  }
  .score-upload-page.upload-studio #score-upload-open-new-chart {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .score-upload-page.upload-studio .score-upload-action-bar {
    border-color: rgba(85, 214, 255, .20);
  }
  .score-upload-page.upload-studio .score-upload-action-bar .btn.small {
    background: rgba(126, 171, 255, .10);
  }
  @media (max-width: 760px) {
    .score-upload-page.upload-studio .score-upload-status {
      bottom: 12px;
      max-width: calc(100% - 24px);
      min-height: 38px;
      font-size: 12px;
    }
    .score-upload-page.upload-studio .score-upload-edit-actions,
    .score-upload-page.upload-studio .score-upload-actions,
    .score-upload-page.upload-studio .score-upload-review-decision-actions {
      justify-content: stretch;
    }
    .score-upload-page.upload-studio .score-upload-edit-actions .btn,
    .score-upload-page.upload-studio .score-upload-actions .btn,
    .score-upload-page.upload-studio .score-upload-review-decision-actions .btn {
      flex: 1 1 auto;
    }
    .score-upload-page.upload-studio .score-upload-new-chart-launch {
      align-items: stretch;
    }
    .score-upload-page.upload-studio #score-upload-open-new-chart {
      width: 100%;
    }
  }


  /* v30.0.88: new-chart identity edit fix; chart metrics remain locked */

  /* v30.0.89: upload edit flow actually exposes new-chart identity correction and direct existing-chart candidates */
  .score-upload-page.upload-studio input[type="checkbox"] {
    width: 19px;
    height: 19px;
    min-width: 19px;
    min-height: 19px;
    accent-color: #55d6ff;
    cursor: pointer;
  }
  .score-upload-page.upload-studio .score-upload-confirm-row {
    align-items: center !important;
    gap: 11px !important;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid rgba(126, 171, 255, .16);
    border-radius: 13px;
    background: rgba(5, 12, 28, .50);
    color: rgba(236, 246, 255, .94);
    cursor: pointer;
    user-select: none;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  .score-upload-page.upload-studio .score-upload-confirm-row:hover,
  .score-upload-page.upload-studio .score-upload-confirm-row:focus-within {
    border-color: rgba(85, 214, 255, .34);
    background: rgba(85, 214, 255, .075);
  }
  .score-upload-page.upload-studio .score-upload-confirm-row:has(input:checked) {
    border-color: rgba(109, 242, 194, .46);
    background: linear-gradient(135deg, rgba(109, 242, 194, .13), rgba(85, 214, 255, .07));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 22px rgba(109,242,194,.08);
  }
  .score-upload-page.upload-studio .score-upload-confirm-row input {
    margin: 0 !important;
  }
  .score-upload-page.upload-studio .score-upload-confirm-row span {
    min-width: 0;
    line-height: 1.34;
  }
  .score-upload-page.upload-studio .score-upload-tag-grid {
    gap: 7px;
  }
  .score-upload-page.upload-studio .score-upload-tag-chip {
    min-height: 36px;
    padding: 7px 10px !important;
    gap: 8px;
    border-color: rgba(126, 171, 255, .18);
    background: rgba(5, 12, 28, .50);
    font-size: 12px !important;
    line-height: 1;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  .score-upload-page.upload-studio .score-upload-tag-chip:hover,
  .score-upload-page.upload-studio .score-upload-tag-chip:focus-within {
    transform: translateY(-1px);
    border-color: rgba(85, 214, 255, .34);
    background: rgba(85, 214, 255, .075);
  }
  .score-upload-page.upload-studio .score-upload-tag-chip:has(input:checked) {
    border-color: rgba(85, 214, 255, .52);
    background: linear-gradient(135deg, rgba(85, 214, 255, .15), rgba(109, 242, 194, .07));
    box-shadow: 0 0 18px rgba(85,214,255,.08), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .score-upload-page.upload-studio .score-upload-tag-chip input {
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
    margin: 0;
  }
  .score-upload-page.upload-studio .score-preview-save-panel,
  .score-upload-page.upload-studio .score-upload-manual-panel,
  .score-upload-page.upload-studio .score-upload-new-chart-panel,
  .score-upload-page.upload-studio .score-upload-correction-panel {
    border-color: rgba(126, 171, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .score-upload-page.upload-studio .score-preview-save-panel {
    border-color: rgba(109, 242, 194, .28);
    background:
      radial-gradient(circle at 12% 0%, rgba(109, 242, 194, .13), transparent 36%),
      linear-gradient(135deg, rgba(34, 255, 188, .08), rgba(78, 167, 255, .055));
  }
  .score-upload-page.upload-studio .score-upload-new-chart-panel {
    border-color: rgba(255, 200, 91, .34);
    background:
      radial-gradient(circle at 10% 0%, rgba(255, 200, 91, .14), transparent 36%),
      linear-gradient(135deg, rgba(255, 200, 91, .10), rgba(255, 105, 180, .055));
  }
  .score-upload-page.upload-studio .score-upload-actions {
    align-items: center;
    gap: 8px;
  }
  .score-upload-page.upload-studio .score-upload-save-status {
    flex: 1 1 180px;
    min-width: 0;
    font-size: 12px;
  }
  .score-upload-page.upload-studio .score-upload-actions .btn.primary.score-upload-submit-main,
  .score-upload-page.upload-studio .score-upload-actions .btn.danger.score-upload-submit-main {
    min-height: 42px !important;
    padding: 0 16px;
    border-radius: 999px;
  }
  .score-upload-page.upload-studio .score-upload-action-bar {
    position: sticky;
    top: 0;
    z-index: 3;
    backdrop-filter: blur(14px) saturate(1.08);
  }
  .score-upload-page.upload-studio .score-upload-action-scroll {
    gap: 8px;
  }
  .score-upload-page.upload-studio .score-upload-manual-results:empty {
    display: none;
  }
  .score-upload-page.upload-studio .score-upload-new-chart-launch {
    gap: 10px;
  }
  .score-upload-page.upload-studio .score-upload-new-chart-launch #score-upload-open-new-chart {
    flex: 0 0 auto;
  }
  @media (max-width: 760px) {
    .score-upload-page.upload-studio input[type="checkbox"] {
      width: 21px;
      height: 21px;
      min-width: 21px;
      min-height: 21px;
    }
    .score-upload-page.upload-studio .score-upload-confirm-row {
      min-height: 48px;
      padding: 11px 12px;
      font-size: 13px;
    }
    .score-upload-page.upload-studio .score-upload-tag-chip {
      min-height: 42px;
      padding: 9px 11px !important;
      font-size: 12px !important;
    }
    .score-upload-page.upload-studio .score-upload-tag-chip input {
      width: 19px;
      height: 19px;
      min-width: 19px;
      min-height: 19px;
    }
    .score-upload-page.upload-studio .score-upload-actions .btn.primary.score-upload-submit-main,
    .score-upload-page.upload-studio .score-upload-actions .btn.danger.score-upload-submit-main {
      min-height: 46px !important;
      width: 100%;
    }
    .score-upload-page.upload-studio .score-upload-save-status {
      flex-basis: 100%;
      text-align: center;
    }
  }


  /* v30.0.91: simpler stable upload edit flow */
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-action-scroll,
  .score-upload-page.upload-studio .score-upload-save-pane .score-upload-action-scroll,
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-action-scroll {
    overflow: auto !important;
    padding-right: 2px;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-correction-panel {
    padding: 8px 9px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-correction-panel h4 {
    font-size: 12px !important;
    margin: 0 0 5px;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-correction-panel p {
    display: none !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-difficulty-correction .score-upload-correction-grid {
    grid-template-columns: minmax(160px, 240px) !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-performance-correction .score-upload-correction-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-correction-field input,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-correction-field select {
    min-height: 32px !important;
    padding: 6px 8px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
    position: sticky;
    bottom: 0;
    padding-top: 7px;
    background: linear-gradient(180deg, transparent, rgba(4, 9, 22, .90) 35%);
  }
  .score-upload-page.upload-studio .score-upload-edit-actions .btn.primary {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
  }
  .score-upload-page.upload-studio .score-upload-new-chart-flow {
    display: grid !important;
    grid-template-rows: auto auto;
    gap: 8px;
  }
  .score-upload-page.upload-studio .score-upload-new-chart-flow .score-upload-new-chart-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .score-upload-page.upload-studio .score-upload-new-chart-flow .score-upload-correction-panel p,
  .score-upload-page.upload-studio .score-upload-new-chart-flow .score-upload-new-chart-panel p {
    font-size: 11.5px !important;
    line-height: 1.32;
  }
  @media (max-width: 980px) {
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-performance-correction .score-upload-correction-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }
  @media (max-width: 760px) {
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-performance-correction .score-upload-correction-grid,
    .score-upload-page.upload-studio .score-upload-new-chart-flow .score-upload-new-chart-fields {
      grid-template-columns: 1fr !important;
    }
    .score-upload-page.upload-studio .score-upload-edit-actions {
      position: static;
      padding-top: 4px;
      background: transparent;
    }
    .score-upload-page.upload-studio .score-upload-edit-actions .btn.primary {
      width: 100%;
    }
  }


  /* v30.0.92: rebuild broken upload edit pane into a compact single-screen form */
  /* v30.0.93: restore new-chart identity editing inside the edit step without metadata editing */
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-action-scroll.score-upload-edit-flat {
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-card {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    border: 1px solid rgba(126, 171, 255, .18);
    border-radius: 16px;
    background:
      radial-gradient(circle at 10% 0%, rgba(85, 214, 255, .10), transparent 34%),
      rgba(3, 9, 23, .58);
    padding: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .score-upload-page.upload-studio .score-upload-edit-card-head {
    display: grid;
    gap: 3px;
    min-width: 0;
  }
  .score-upload-page.upload-studio .score-upload-edit-card-head strong {
    color: var(--text);
    font-size: 14px;
    line-height: 1.25;
  }
  .score-upload-page.upload-studio .score-upload-edit-card-head span {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.35;
    white-space: normal;
  }
  .score-upload-page.upload-studio .score-upload-edit-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(74px, auto);
    gap: 10px;
    align-content: start;
  }
  .score-upload-page.upload-studio .score-upload-edit-field {
    min-width: 0;
    display: grid;
    gap: 6px;
    align-content: start;
    border: 1px solid rgba(126, 171, 255, .12);
    border-radius: 13px;
    background: rgba(2, 8, 20, .48);
    padding: 9px;
  }
  .score-upload-page.upload-studio .score-upload-edit-field span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .03em;
    line-height: 1.15;
  }
  .score-upload-page.upload-studio .score-upload-edit-field input,
  .score-upload-page.upload-studio .score-upload-edit-field select {
    width: 100%;
    min-width: 0;
    min-height: 40px !important;
    border: 1px solid rgba(126, 171, 255, .22);
    border-radius: 11px;
    background: rgba(1, 6, 18, .76);
    color: var(--text);
    padding: 8px 10px !important;
    font-size: 14px;
    font-weight: 850;
    outline: none;
  }
  .score-upload-page.upload-studio .score-upload-edit-field input:focus,
  .score-upload-page.upload-studio .score-upload-edit-field select:focus {
    border-color: rgba(85, 214, 255, .58);
    box-shadow: 0 0 0 3px rgba(85, 214, 255, .12);
  }
  .score-upload-page.upload-studio .score-upload-edit-flat-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-flat-actions .btn.primary {
    min-height: 42px !important;
    min-width: 170px;
    padding: 0 20px;
    border-radius: 999px;
  }
  .score-upload-page.upload-studio .score-upload-action-bar {
    min-height: 52px;
  }
  .score-upload-page.upload-studio .score-upload-action-bar span {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-action-scroll.score-upload-edit-flat.has-new-chart-identity {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact {
    border: 1px solid rgba(85, 214, 255, .22);
    border-radius: 16px;
    background:
      radial-gradient(circle at 12% 0%, rgba(255, 97, 216, .10), transparent 34%),
      rgba(3, 9, 23, .58);
    padding: 11px 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact h4 {
    margin: 0 0 8px !important;
    color: var(--text);
    font-size: 13px !important;
    line-height: 1.25;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact p {
    display: none !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field {
    gap: 5px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field label {
    font-size: 10.5px !important;
    line-height: 1.15;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field input,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field select {
    min-height: 36px !important;
    padding: 7px 9px !important;
    font-size: 13px !important;
    font-weight: 850;
  }
  @media (max-width: 980px) {
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
  @media (max-width: 760px) {
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields {
      grid-template-columns: 1fr !important;
    }
  }

  @media (max-width: 980px) {
    .score-upload-page.upload-studio .score-upload-edit-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 760px) {
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-action-scroll.score-upload-edit-flat {
      overflow: visible !important;
    }
    .score-upload-page.upload-studio .score-upload-edit-card {
      height: auto;
    }
    .score-upload-page.upload-studio .score-upload-edit-grid {
      grid-template-columns: 1fr;
      grid-auto-rows: auto;
    }
    .score-upload-page.upload-studio .score-upload-edit-flat-actions .btn.primary {
      width: 100%;
      min-width: 0;
    }
  }


  /* v30.0.94: make new-chart identity fields wide and score correction fields compact */
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: end;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields .score-upload-correction-field:nth-child(1) {
    grid-column: span 12;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields .score-upload-correction-field:nth-child(2),
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields .score-upload-correction-field:nth-child(3) {
    grid-column: span 5;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields .score-upload-correction-field:nth-child(4) {
    grid-column: span 2;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field input,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field select {
    min-height: 38px !important;
    font-size: 13.5px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact {
    padding: 10px 12px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-grid {
    grid-template-columns: 1.15fr 1fr .78fr .78fr .78fr .88fr !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-field {
    padding: 8px !important;
    gap: 5px !important;
    border-radius: 12px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-field input,
  .score-upload-page.upload-studio .score-upload-edit-field select {
    min-height: 36px !important;
    padding: 7px 9px !important;
    font-size: 13.5px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-card {
    padding: 11px !important;
    gap: 9px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-card-head span {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  @media (max-width: 1100px) {
    .score-upload-page.upload-studio .score-upload-edit-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }
  @media (max-width: 760px) {
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields .score-upload-correction-field:nth-child(n) {
      grid-column: span 12;
    }
    .score-upload-page.upload-studio .score-upload-edit-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
  @media (max-width: 520px) {
    .score-upload-page.upload-studio .score-upload-edit-grid {
      grid-template-columns: 1fr !important;
    }
  }


  /* v30.0.97: Web score upload review/edit UI balance + restrained difficulty selectors */
  .score-upload-page.upload-studio .score-upload-result-carousel.mode-edit .score-upload-action-pane,
  .score-upload-page.upload-studio .score-upload-result-carousel.mode-edit .score-upload-edit-pane {
    align-content: start !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-action-scroll.score-upload-edit-flat,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-action-scroll.score-upload-edit-flat.has-new-chart-identity {
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    gap: 10px !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  .score-upload-page.upload-studio .score-upload-new-chart-identity-correction.compact {
    padding: 10px 12px !important;
    border: 1px solid rgba(126, 171, 255, .20) !important;
    border-radius: 16px !important;
    background: rgba(3, 9, 23, .62) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  }
  .score-upload-page.upload-studio .score-upload-new-chart-identity-correction.compact h4 {
    margin: 0 0 8px !important;
    color: var(--text) !important;
    font-size: 13.5px !important;
    line-height: 1.25 !important;
  }
  .score-upload-page.upload-studio .score-upload-new-chart-identity-correction.compact p {
    display: none !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(146px, .48fr) !important;
    gap: 8px !important;
    align-items: end !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field:first-child {
    grid-column: 1 / -1 !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field {
    gap: 5px !important;
    min-width: 0 !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field label,
  .score-upload-page.upload-studio .score-upload-edit-field span {
    color: rgba(189, 208, 236, .84) !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    letter-spacing: .03em !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field input,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field select {
    min-height: 36px !important;
    padding: 7px 9px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    box-sizing: border-box !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-difficulty-field {
    min-width: 146px !important;
  }

  .score-upload-page.upload-studio .score-upload-edit-card {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    padding: 10px 11px !important;
    border-color: rgba(126, 171, 255, .20) !important;
    background: rgba(2, 8, 20, .58) !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-card-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-card-head strong {
    font-size: 13.5px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-card-head span {
    font-size: 11px !important;
    line-height: 1.28 !important;
    -webkit-line-clamp: 2;
  }
  .score-upload-page.upload-studio .score-upload-edit-grid {
    grid-template-columns: minmax(118px, .92fr) minmax(88px, .68fr) minmax(80px, .58fr) minmax(82px, .58fr) minmax(82px, .58fr) minmax(96px, .68fr) !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    align-content: start !important;
    gap: 7px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-field {
    min-height: 70px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    background: rgba(2, 8, 20, .54) !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-field input,
  .score-upload-page.upload-studio .score-upload-edit-field select {
    min-height: 34px !important;
    padding: 6px 9px !important;
    font-size: 13.5px !important;
    box-sizing: border-box !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-field:not(.score-upload-difficulty-field) input,
  .score-upload-page.upload-studio .score-upload-edit-field:not(.score-upload-difficulty-field) select {
    text-align: center !important;
    font-weight: 900 !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-field:not(.score-upload-difficulty-field) input {
    color: #f2f7ff !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-field:has(#score-upload-correct-score) input {
    color: #7cecff !important;
    font-size: 15px !important;
  }

  .score-upload-page.upload-studio .score-upload-difficulty-field,
  .score-upload-page.upload-studio .score-upload-new-chart-identity-correction.compact .score-upload-difficulty-field {
    border-color: rgba(85, 214, 255, .26) !important;
    background: rgba(3, 12, 28, .58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  }
  .score-upload-page.upload-studio .score-upload-correction-field.score-upload-difficulty-field {
    padding: 7px !important;
    border-radius: 12px !important;
  }
  .score-upload-page.upload-studio #score-upload-correct-difficulty,
  .score-upload-page.upload-studio #score-upload-new-difficulty {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    padding: 0 30px 0 10px !important;
    border: 1px solid rgba(85, 214, 255, .46) !important;
    border-radius: 10px !important;
    background-color: rgba(3, 12, 28, .88) !important;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238bdced' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9l5 5 5-5'/%3E%3C/svg%3E"),
      linear-gradient(180deg, rgba(11, 22, 43, .94), rgba(3, 12, 28, .94)) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: calc(100% - 10px) 50%, 0 0 !important;
    background-size: 13px 13px, 100% 100% !important;
    color: #eaf7ff !important;
    font-weight: 850 !important;
    line-height: 36px !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-align-last: left !important;
    text-shadow: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    cursor: pointer !important;
  }
  .score-upload-page.upload-studio #score-upload-correct-difficulty:hover,
  .score-upload-page.upload-studio #score-upload-new-difficulty:hover {
    border-color: rgba(111, 220, 255, .62) !important;
    background-color: rgba(5, 16, 34, .92) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(85, 214, 255, .06) !important;
  }
  .score-upload-page.upload-studio #score-upload-correct-difficulty:focus,
  .score-upload-page.upload-studio #score-upload-new-difficulty:focus {
    border-color: rgba(111, 220, 255, .78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 2px rgba(85, 214, 255, .13) !important;
  }
  .score-upload-page.upload-studio #score-upload-correct-difficulty option,
  .score-upload-page.upload-studio #score-upload-new-difficulty option {
    color: #eaf7ff !important;
    background: #061126 !important;
  }

  .score-upload-page.upload-studio .score-upload-edit-flat-actions {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-flat-actions .btn.primary {
    min-height: 39px !important;
    min-width: 160px !important;
  }

  @media (max-width: 1100px) {
    .score-upload-page.upload-studio .score-upload-edit-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }
  @media (max-width: 760px) {
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field:first-child {
      grid-column: 1 / -1 !important;
    }
    .score-upload-page.upload-studio .score-upload-edit-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .score-upload-page.upload-studio .score-upload-edit-field {
      min-height: 68px !important;
    }
  }
  @media (max-width: 520px) {
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields,
    .score-upload-page.upload-studio .score-upload-edit-grid {
      grid-template-columns: 1fr !important;
    }
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field:first-child {
      grid-column: auto !important;
    }
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-difficulty-field {
      min-width: 0 !important;
    }
  }


  .score-upload-new-chart-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 0;
  }
  .score-upload-new-chart-summary-item {
    border: 1px solid rgba(126, 171, 255, .16);
    border-radius: 12px;
    background: rgba(0, 0, 0, .22);
    padding: 8px 10px;
    min-width: 0;
  }
  .score-upload-new-chart-summary-item span {
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .score-upload-new-chart-summary-item strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .score-upload-new-chart-summary-item:first-child { grid-column: 1 / -1; }
  .score-upload-new-chart-edit-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(85, 214, 255, .16);
    border-radius: 12px;
    background: rgba(85, 214, 255, .06);
    padding: 9px 10px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
  }
  @media (max-width: 760px) {
    .score-upload-new-chart-summary { grid-template-columns: 1fr; }
    .score-upload-new-chart-edit-hint { align-items: stretch; flex-direction: column; }
  }


  /* v30.0.98: simplify upload review/edit form and prevent overflow */
  .score-upload-page.upload-studio .score-upload-edit-pane {
    background: rgba(4, 9, 22, .36) !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-action-bar {
    min-height: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(126, 171, 255, .14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 2px 2px 10px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-action-bar .btn.small {
    border-radius: 10px !important;
    border-color: rgba(126, 171, 255, .20) !important;
    background: rgba(3, 10, 24, .58) !important;
    box-shadow: none !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-action-bar strong {
    font-size: 15px !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-action-bar span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.25 !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-action-scroll.score-upload-edit-flat,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-action-scroll.score-upload-edit-flat.has-new-chart-identity {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    gap: 14px !important;
    padding: 0 2px 2px !important;
  }

  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-card {
    border: 0 !important;
    border-top: 1px solid rgba(126, 171, 255, .14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 12px 2px 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact h4,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-card-head strong {
    margin: 0 0 8px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    color: #eef7ff !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-card-head {
    display: block !important;
    margin: 0 !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-card-head span,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact p {
    display: none !important;
  }

  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(150px, .55fr) !important;
    gap: 9px 10px !important;
    align-items: end !important;
    min-width: 0 !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields .score-upload-correction-field:nth-child(n) {
    grid-column: auto !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields .score-upload-correction-field:first-child {
    grid-column: 1 / -1 !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-difficulty-field {
    min-width: 0 !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-field {
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    gap: 5px !important;
    align-content: start !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field label,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-field span {
    display: block !important;
    color: rgba(189, 208, 236, .86) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field input,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field select,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-field input,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-field select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(126, 171, 255, .20) !important;
    border-radius: 9px !important;
    background-color: rgba(1, 6, 18, .70) !important;
    color: #eef7ff !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    font-weight: 850 !important;
    line-height: 36px !important;
    padding: 0 10px !important;
    text-shadow: none !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field input:focus,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-correction-field select:focus,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-field input:focus,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-field select:focus {
    border-color: rgba(85, 214, 255, .52) !important;
    box-shadow: 0 0 0 2px rgba(85, 214, 255, .10) !important;
    outline: none !important;
  }

  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-grid {
    display: grid !important;
    grid-template-columns: minmax(150px, 1.15fr) minmax(0, .9fr) minmax(0, .9fr) !important;
    grid-auto-rows: auto !important;
    gap: 9px 10px !important;
    align-items: start !important;
    align-content: start !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-field:not(.score-upload-difficulty-field) input,
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-field:not(.score-upload-difficulty-field) select {
    text-align: center !important;
    text-align-last: center !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-field:has(#score-upload-correct-score) input {
    color: #7cecff !important;
    font-size: 14.5px !important;
  }

  .score-upload-page.upload-studio #score-upload-correct-difficulty,
  .score-upload-page.upload-studio #score-upload-new-difficulty {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0 30px 0 10px !important;
    border-color: rgba(85, 214, 255, .28) !important;
    background-color: rgba(1, 7, 19, .76) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%237bbfd0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 10px) 50% !important;
    background-size: 13px 13px !important;
    color: #eaf7ff !important;
    text-align: left !important;
    text-align-last: left !important;
    cursor: pointer !important;
  }
  .score-upload-page.upload-studio #score-upload-correct-difficulty:hover,
  .score-upload-page.upload-studio #score-upload-new-difficulty:hover {
    border-color: rgba(85, 214, 255, .42) !important;
    background-color: rgba(3, 11, 25, .82) !important;
    box-shadow: none !important;
  }
  .score-upload-page.upload-studio #score-upload-correct-difficulty:focus,
  .score-upload-page.upload-studio #score-upload-new-difficulty:focus {
    border-color: rgba(85, 214, 255, .56) !important;
    box-shadow: 0 0 0 2px rgba(85, 214, 255, .10) !important;
  }
  .score-upload-page.upload-studio #score-upload-correct-difficulty option,
  .score-upload-page.upload-studio #score-upload-new-difficulty option {
    color: #eaf7ff !important;
    background: #061126 !important;
  }

  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-flat-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 2px 2px !important;
    background: transparent !important;
    position: static !important;
  }
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-flat-actions .btn.primary {
    min-width: 164px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
  }

  @media (max-width: 980px) {
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields,
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields .score-upload-correction-field:first-child {
      grid-column: 1 / -1 !important;
    }
  }
  @media (max-width: 560px) {
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields,
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-grid {
      grid-template-columns: 1fr !important;
    }
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-new-chart-identity-correction.compact .score-upload-new-chart-fields .score-upload-correction-field:first-child {
      grid-column: auto !important;
    }
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-flat-actions .btn.primary {
      width: 100% !important;
      min-width: 0 !important;
    }
  }


  /* v30.0.99: keep new-chart flow responsive and make feedback visible */
  .score-upload-page.upload-studio .score-upload-result-carousel.mode-new .score-upload-new-pane {
    animation: uploadActionPaneEnter .30s cubic-bezier(.18, 1, .26, 1) both;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-save-status,
  .score-upload-page.upload-studio .score-upload-save-pane .score-upload-save-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    color: rgba(189, 208, 236, .9);
    line-height: 1.35;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-save-status.warn,
  .score-upload-page.upload-studio .score-upload-save-pane .score-upload-save-status.warn {
    color: #ffb4c8;
  }


  /* v30.0.100: fit the new-chart confirmation UI without nested scrolling */
  .score-upload-page.upload-studio .score-upload-result-carousel.mode-new .score-upload-new-pane {
    gap: 8px !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-action-scroll.score-upload-new-chart-flow {
    overflow: hidden !important;
    display: block !important;
    padding: 0 2px 0 !important;
    min-height: 0 !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-panel {
    margin: 0 !important;
    padding: 10px !important;
    gap: 7px !important;
    border-radius: 13px !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-panel h4 {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-panel > p {
    display: none !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr) minmax(0, .85fr) minmax(82px, .55fr) !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-summary-item,
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-summary-item:first-child {
    grid-column: auto !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-summary-item {
    min-height: 0 !important;
    padding: 6px 7px !important;
    border-radius: 9px !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-summary-item span {
    font-size: 9.5px !important;
    line-height: 1.1 !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-summary-item strong {
    margin-top: 2px !important;
    font-size: 12px !important;
    line-height: 1.18 !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-edit-hint {
    min-height: 0 !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    gap: 8px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-edit-hint .btn.small {
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-warning {
    display: none !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-confirm-row {
    min-height: 34px !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    gap: 8px !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-actions {
    gap: 7px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-actions .btn.danger.score-upload-submit-main {
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane #score-upload-new-chart-status {
    min-height: 18px !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
  }
  @media (max-width: 760px) {
    .score-upload-page.upload-studio .score-upload-new-pane .score-upload-action-scroll.score-upload-new-chart-flow {
      overflow: visible !important;
    }
    .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-summary-item:first-child {
      grid-column: 1 / -1 !important;
    }
    .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-edit-hint {
      align-items: stretch !important;
      flex-direction: column !important;
    }
  }

  /* v30.0.102: when new-chart identity editing is visible, difficulty lives only in that section */
  /* v30.0.103: new-chart confirmation validates required identity fields before save */
  .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-grid.no-result-difficulty {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  @media (max-width: 980px) {
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-grid.no-result-difficulty {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
  @media (max-width: 560px) {
    .score-upload-page.upload-studio .score-upload-edit-pane .score-upload-edit-grid.no-result-difficulty {
      grid-template-columns: 1fr !important;
    }
  }

  /* v30.0.101: slightly improve upload-page explanatory text readability */
  .score-upload-page.upload-studio .score-upload-hero.upload-polished-hero p,
  .score-upload-page.upload-studio .score-upload-note,
  .score-upload-page.upload-studio .score-upload-status,
  .score-upload-page.upload-studio .score-upload-save-status,
  .score-upload-page.upload-studio .score-upload-image-review-head p,
  .score-upload-page.upload-studio .score-upload-review-decision-copy span,
  .score-upload-page.upload-studio .score-upload-action-bar span,
  .score-upload-page.upload-studio .score-preview-main-card p,
  .score-upload-page.upload-studio .score-preview-warning,
  .score-upload-page.upload-studio .score-preview-save-disabled,
  .score-upload-page.upload-studio .score-upload-manual-panel p,
  .score-upload-page.upload-studio .score-upload-new-chart-panel p,
  .score-upload-page.upload-studio .score-upload-correction-panel p,
  .score-upload-page.upload-studio .score-upload-new-chart-edit-hint,
  .score-upload-page.upload-studio .score-upload-confirm-row,
  .score-upload-page.upload-studio .score-upload-selected-chart {
    font-size: 12.5px !important;
    line-height: 1.42 !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-edit-hint,
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-confirm-row,
  .score-upload-page.upload-studio .score-upload-new-pane #score-upload-new-chart-status {
    font-size: 12px !important;
    line-height: 1.32 !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-summary-item span {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }
  .score-upload-page.upload-studio .score-upload-new-pane .score-upload-new-chart-summary-item strong {
    font-size: 12.5px !important;
    line-height: 1.18 !important;
  }


  /* v30.0.107: keep the upload review layout consistent for portrait/tall screenshots */
  .score-upload-page.upload-studio.has-result .score-upload-stage-shell,
  .score-upload-page.upload-studio.has-result .score-upload-review-layout {
    height: auto !important;
    min-height: 0 !important;
  }
  .score-upload-page.upload-studio.has-result .score-upload-review-layout {
    align-items: start !important;
  }
  .score-upload-page.upload-studio.has-result .score-upload-image-review-card {
    height: auto !important;
    align-self: start !important;
    grid-template-rows: auto auto !important;
  }
  .score-upload-page.upload-studio.has-result .score-upload-image-review-frame {
    height: clamp(360px, 42vw, 500px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .score-upload-page.upload-studio.has-result .score-upload-image-review-frame img.score-upload-review-image {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
  }
  .score-upload-page.upload-studio.has-result .score-upload-review-main,
  .score-upload-page.upload-studio.has-result .score-preview-result.upload-polished-result,
  .score-upload-page.upload-studio.has-result .score-preview-result.upload-flow-result,
  .score-upload-page.upload-studio.has-result .score-upload-result-carousel,
  .score-upload-page.upload-studio.has-result .score-upload-result-track,
  .score-upload-page.upload-studio.has-result .score-upload-result-pane {
    height: auto !important;
    min-height: 0 !important;
  }
  .score-upload-page.upload-studio.has-result .score-preview-result.upload-polished-result {
    overflow: visible !important;
    grid-template-rows: auto !important;
  }
  .score-upload-page.upload-studio.has-result .score-preview-result.upload-flow-result,
  .score-upload-page.upload-studio.has-result .score-upload-result-carousel {
    overflow: hidden !important;
  }
  .score-upload-page.upload-studio.has-result .score-upload-result-track {
    align-items: start !important;
  }
  .score-upload-page.upload-studio.has-result .score-upload-result-pane {
    overflow: visible !important;
  }
  .score-upload-page.upload-studio.has-result .score-upload-compare-pane,
  .score-upload-page.upload-studio.has-result .score-upload-action-pane {
    grid-template-rows: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  @media (max-width: 860px) {
    /* Restore the single column after the later desktop review rules. */
    .score-upload-page.upload-studio.has-result .score-upload-review-layout {
      grid-template-columns: minmax(0, 1fr);
    }
    .score-upload-page.upload-studio.has-result .score-upload-image-review-frame {
      height: min(340px, 62vw) !important;
      min-height: 220px !important;
    }
  }


  /* v30.0.108: keep the selected-file preview frame stable before OCR too */
  .score-upload-page.upload-studio .score-upload-dropzone.has-file .score-upload-drop-preview {
    width: 100% !important;
    height: min(300px, calc(100vh - var(--topbar-height, 72px) - 282px)) !important;
    min-height: 220px !important;
    display: grid !important;
    place-items: center !important;
  }
  .score-upload-page.upload-studio .score-upload-dropzone.has-file .score-upload-thumb {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
  @media (max-width: 760px) {
    .score-upload-page.upload-studio .score-upload-dropzone.has-file .score-upload-drop-preview {
      height: min(260px, 58vw) !important;
      min-height: 180px !important;
    }
  }


  /* v30.0.206: upload photo guide — scoped helper button and example modal */
  .score-upload-photo-guide-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 2px;
  }
  .score-upload-photo-guide-button {
    min-height: 36px;
    padding: 7px 14px;
    border: 1px solid rgba(116, 176, 255, .34);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(64, 128, 255, .13), rgba(143, 93, 255, .08));
    color: #dceaff;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .035em;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .score-upload-photo-guide-button:hover,
  .score-upload-photo-guide-button:focus-visible {
    border-color: rgba(102, 210, 255, .72);
    background: linear-gradient(135deg, rgba(55, 177, 255, .20), rgba(157, 95, 255, .13));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .25), 0 0 22px rgba(78, 187, 255, .10);
    outline: none;
  }
  .modal-backdrop.upload-photo-guide-open {
    padding: 14px;
    background: rgba(0, 3, 12, .84) !important;
    backdrop-filter: blur(8px);
  }
  .modal-backdrop.upload-photo-guide-open .modal {
    width: min(1040px, calc(100vw - 28px));
    max-width: 1040px;
    max-height: min(92vh, 880px);
    overflow: hidden;
    border-color: rgba(102, 180, 255, .34);
    background:
      radial-gradient(circle at 10% 0%, rgba(47, 163, 255, .09), transparent 32%),
      radial-gradient(circle at 100% 0%, rgba(172, 89, 255, .08), transparent 34%),
      #060a13 !important;
    box-shadow: 0 34px 100px rgba(0, 0, 0, .62), 0 0 34px rgba(68, 153, 255, .10);
  }
  .modal-backdrop.upload-photo-guide-open .modal header {
    padding: 15px 18px;
    border-bottom-color: rgba(112, 162, 255, .18);
  }
  .modal-backdrop.upload-photo-guide-open .modal header h3 {
    font-size: 18px;
    letter-spacing: -.015em;
  }
  .modal-backdrop.upload-photo-guide-open .modal .body {
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .upload-photo-guide {
    display: grid;
    gap: 16px;
  }
  .upload-photo-guide-intro {
    margin: 0 !important;
    color: #c9d5e8 !important;
    font-size: 13px;
    line-height: 1.65 !important;
  }
  .upload-photo-guide-ng-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .upload-photo-guide-card {
    position: relative;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(132, 167, 224, .18);
    border-radius: 15px;
    background: rgba(4, 9, 20, .78);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .26);
  }
  .upload-photo-guide-card.is-ng {
    border-color: rgba(255, 102, 126, .25);
  }
  .upload-photo-guide-card.is-ok {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(230px, .55fr);
    align-items: stretch;
    border-color: rgba(84, 235, 180, .30);
    background: linear-gradient(135deg, rgba(21, 92, 76, .14), rgba(5, 13, 26, .88));
  }
  .upload-photo-guide-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #02050b;
  }
  .upload-photo-guide-card.is-ok .upload-photo-guide-media {
    aspect-ratio: auto;
    min-height: 252px;
  }
  .upload-photo-guide-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .upload-photo-guide-image-fallback {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    padding: 22px;
    color: #aebdd2;
    background:
      linear-gradient(135deg, rgba(30, 52, 82, .42), rgba(5, 10, 19, .92)),
      repeating-linear-gradient(-45deg, transparent 0 12px, rgba(255, 255, 255, .025) 12px 24px);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
  }
  .upload-photo-guide-media.is-image-error .upload-photo-guide-image-fallback {
    display: grid;
  }
  .upload-photo-guide-media.is-image-error img {
    display: none;
  }
  .upload-photo-guide-card.is-ng .upload-photo-guide-media img {
    filter: saturate(.87) brightness(.86);
  }
  .upload-photo-guide-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
  }
  .upload-photo-guide-badge {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 1;
    min-width: 42px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    letter-spacing: .08em;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .32);
  }
  .upload-photo-guide-card.is-ng .upload-photo-guide-badge {
    background: linear-gradient(135deg, #ff4f6e, #c92d52);
  }
  .upload-photo-guide-card.is-ok .upload-photo-guide-badge {
    background: linear-gradient(135deg, #2fd99a, #148d6b);
  }
  .upload-photo-guide-card figcaption {
    display: grid;
    gap: 4px;
    padding: 11px 12px 13px;
  }
  .upload-photo-guide-card figcaption strong {
    color: #f4f8ff;
    font-size: 13px;
    line-height: 1.35;
  }
  .upload-photo-guide-card figcaption span {
    color: #9eacc2;
    font-size: 11.5px;
    line-height: 1.5;
  }
  .upload-photo-guide-card.is-ok figcaption {
    align-content: center;
    padding: 20px;
  }
  .upload-photo-guide-card.is-ok figcaption strong {
    font-size: 18px;
  }
  .upload-photo-guide-tips {
    display: grid;
    gap: 8px;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    list-style: none;
  }
  .upload-photo-guide-tips li {
    position: relative;
    padding-left: 21px;
    color: #c7d4e8;
    font-size: 12px;
    line-height: 1.5;
  }
  .upload-photo-guide-tips li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #62e8b7;
    font-weight: 950;
  }
  .upload-photo-guide-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
  }
  .upload-photo-guide-actions .btn {
    min-width: 108px;
  }
  @media (max-width: 760px) {
    .modal-backdrop.upload-photo-guide-open {
      align-items: flex-start;
      padding: 8px;
    }
    .modal-backdrop.upload-photo-guide-open .modal {
      width: calc(100vw - 16px);
      max-height: calc(100dvh - 16px);
      border-radius: 14px !important;
    }
    .modal-backdrop.upload-photo-guide-open .modal header {
      padding: 13px 14px;
    }
    .modal-backdrop.upload-photo-guide-open .modal .body {
      padding: 12px;
    }
    .upload-photo-guide {
      gap: 12px;
    }
    .upload-photo-guide-ng-grid {
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .upload-photo-guide-card.is-ok {
      grid-template-columns: 1fr;
    }
    .upload-photo-guide-card.is-ok .upload-photo-guide-media {
      aspect-ratio: 16 / 9;
      min-height: 0;
    }
    .upload-photo-guide-card.is-ok figcaption {
      padding: 14px;
    }
    .upload-photo-guide-card.is-ok figcaption strong {
      font-size: 16px;
    }
    .upload-photo-guide-actions .btn {
      width: 100%;
    }
  }


  /* v30.0.114: Simplified two-column search cards with fixed-height colored difficulty chips */
  .top-search-hint {
    border: 1px solid rgba(125, 169, 255, .26);
    background: rgba(91, 118, 255, .12);
    color: #dbe7ff;
    border-radius: 999px;
    padding: 5px 10px;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
    white-space: nowrap;
  }
  .top-search-hint:hover,
  .top-search-hint:focus-visible {
    background: rgba(94, 144, 255, .22);
    border-color: rgba(128, 185, 255, .58);
    color: #ffffff;
    outline: none;
  }
  .search-page-shell {
    display: grid;
    gap: 16px;
  }
  .search-page-hero {
    border: 1px solid rgba(106, 144, 255, .16);
    background: linear-gradient(135deg, rgba(18, 25, 46, .78), rgba(8, 13, 27, .84));
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
  }
  .search-page-title {
    margin: 0 0 12px;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -.035em;
  }
  .search-page-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    max-width: 820px;
  }
  .search-page-form input {
    min-height: 48px;
    border-radius: 16px;
    border: 1px solid rgba(125, 166, 255, .25);
    background: rgba(3, 8, 22, .62);
    color: var(--text);
    padding: 0 16px;
    font-size: 15px;
    outline: none;
  }
  .search-page-form input:focus {
    border-color: rgba(118, 189, 255, .66);
    box-shadow: 0 0 0 3px rgba(94, 144, 255, .16);
  }
  .search-page-form .btn {
    min-height: 48px;
    padding-inline: 18px;
    font-weight: 900;
  }
  .search-page-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
  }
  .search-page-stat {
    border: 1px solid rgba(134, 162, 255, .20);
    background: rgba(255, 255, 255, .045);
    border-radius: 999px;
    padding: 7px 11px;
    color: #dbe8ff;
    font-size: 12px;
    font-weight: 800;
  }
  .search-result-section {
    display: grid;
    gap: 12px;
  }
  .search-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px;
  }
  .search-section-head h3 {
    margin: 0;
    font-size: 18px;
  }
  .search-section-head span {
    color: var(--muted);
    font-size: 12px;
  }
  .search-map-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .search-map-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    min-height: 146px;
    height: 146px;
    border: 1px solid rgba(117, 146, 232, .18);
    background: linear-gradient(145deg, rgba(20, 28, 52, .84), rgba(8, 13, 28, .88));
    border-radius: 18px;
    padding: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
  }
  .search-map-card:hover,
  .search-map-card:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(122, 188, 255, .48);
    background: linear-gradient(145deg, rgba(25, 36, 68, .90), rgba(10, 17, 36, .92));
    outline: none;
  }
  .search-map-cover {
    width: 112px;
    height: 112px;
    aspect-ratio: 1 / 1;
    align-self: center;
    border-radius: 14px;
    border: 1px solid rgba(137, 171, 255, .16);
    background:
      linear-gradient(135deg, rgba(80, 105, 255, .18), rgba(30, 206, 255, .08)),
      radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .16), transparent 20%),
      rgba(7, 12, 26, .92);
    display: grid;
    place-items: center;
    color: rgba(216, 232, 255, .76);
    font-size: 26px;
    font-weight: 900;
    overflow: hidden;
  }
  .search-map-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  .search-map-cover.has-image {
    background: rgba(4, 8, 18, .94);
  }
  .search-map-body {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 5px;
    overflow: hidden;
  }
  .search-map-title {
    grid-column: 1;
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: -.02em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
  }
  .search-map-meta {
    grid-column: 1;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .search-map-diffs {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 5px 6px;
    min-height: 48px;
    max-height: 50px;
    overflow: hidden;
    margin-top: 1px;
  }
  .search-diff-chip {
    --diff-bg: rgba(255, 255, 255, .06);
    --diff-border: rgba(151, 176, 235, .26);
    --diff-text: #edf5ff;
    border: 1px solid var(--diff-border);
    background: var(--diff-bg);
    color: var(--diff-text);
    border-radius: 999px;
    padding: 3px 8px;
    min-height: 20px;
    font-size: 10.5px;
    line-height: 1.05;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  }
  .search-diff-chip.diff-easy {
    --diff-bg: rgba(57, 169, 255, .20);
    --diff-border: rgba(80, 190, 255, .58);
    --diff-text: #dff5ff;
  }
  .search-diff-chip.diff-normal {
    --diff-bg: rgba(54, 199, 111, .18);
    --diff-border: rgba(78, 219, 130, .56);
    --diff-text: #e2ffe9;
  }
  .search-diff-chip.diff-hard {
    --diff-bg: rgba(255, 169, 47, .18);
    --diff-border: rgba(255, 191, 77, .58);
    --diff-text: #fff1d8;
  }
  .search-diff-chip.diff-expert {
    --diff-bg: rgba(255, 73, 101, .18);
    --diff-border: rgba(255, 104, 130, .58);
    --diff-text: #ffe5eb;
  }
  .search-diff-chip.diff-expertplus {
    --diff-bg: rgba(171, 105, 255, .20);
    --diff-border: rgba(190, 137, 255, .62);
    --diff-text: #f2e7ff;
  }
  .search-diff-chip:hover,
  .search-diff-chip:focus-visible {
    filter: brightness(1.18);
    outline: none;
  }
  .search-map-footer {
    grid-column: 2;
    grid-row: 1 / 4;
    justify-self: end;
    align-self: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: flex-end;
    text-align: right;
    color: #aebce0;
    font-size: 11.5px;
    min-width: 94px;
    max-width: 116px;
    overflow: hidden;
  }
  .search-map-footer span {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .search-player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
  }
  .search-player-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(117, 146, 232, .18);
    background: rgba(14, 22, 42, .82);
    border-radius: 18px;
    padding: 12px;
    cursor: pointer;
  }
  .search-player-card:hover,
  .search-player-card:focus-visible {
    border-color: rgba(122, 188, 255, .48);
    outline: none;
  }
  .search-player-avatar {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(91, 118, 255, .18);
    color: #fff;
    font-weight: 900;
    overflow: hidden;
  }
  .search-player-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .search-player-name {
    font-weight: 900;
    overflow-wrap: anywhere;
  }
  .search-player-meta {
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
  }
  .search-empty-panel {
    border: 1px dashed rgba(138, 164, 232, .24);
    border-radius: 18px;
    padding: 28px;
    color: var(--muted);
    text-align: center;
    background: rgba(255, 255, 255, .03);
  }
  @media (max-width: 980px) {
    .search-map-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 680px) {
    .search-page-form { grid-template-columns: 1fr; }
    .search-map-card {
      grid-template-columns: 84px minmax(0, 1fr);
      min-height: 132px;
      height: 132px;
      gap: 10px;
    }
    .search-map-cover { width: 84px; height: 84px; align-self: center; }
    .search-map-body {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      row-gap: 4px;
    }
    .search-map-title,
    .search-map-meta,
    .search-map-diffs,
    .search-map-footer { grid-column: 1; }
    .search-map-title { -webkit-line-clamp: 1; }
    .search-map-footer {
      grid-row: auto;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      text-align: left;
      min-width: 0;
      max-width: 100%;
      font-size: 10.5px;
      gap: 6px;
    }
    .search-map-diffs {
      min-height: 43px;
      max-height: 45px;
      gap: 4px 5px;
      overflow: hidden;
    }
    .search-diff-chip { padding: 3px 7px; min-height: 19px; font-size: 10px; }
  }


  /* v30.0.194: song detail CSS cleanup removed the obsolete v30.0.132
     cover override block; the active song detail layout is consolidated below. */


  /* v30.0.167: playlist share command alias removal */
  /* v30.0.171: guard Web uploads against silent difficulty fallback after manual difficulty correction. */
  /* v30.0.172: keep drag-and-drop uploads from being blocked by native file-input validation. */
  /* v30.0.195: upload UI CSS cleanup removed obsolete selectors from earlier upload iterations without changing the active upload studio layout. */
  /* v30.0.196: general legacy CSS cleanup removed unused old home/profile/search/random/PP shell selectors after confirming they are no longer emitted by HTML/JS. */
  /* v30.1.31: Playlist-only design-token boundary. Keep every fallback equal to
     the reviewed v30.1.30 value so shared profile cards retain their old look. */
  /* v30.1.32: only the unique Playlist token declarations enter a named layer.
     Component and shared Profile rules stay unlayered to preserve legacy priority. */
  @layer udon-playlist-tokens {
    .playlist-page {
      --playlist-page-gap:18px;
      --playlist-surface-padding:22px;
      --playlist-surface-border-color:rgba(126,171,255,.16);
      --playlist-surface-radius:22px;
      --playlist-surface-background:linear-gradient(135deg,rgba(12,21,45,.82),rgba(8,15,34,.64));
      --playlist-surface-shadow:0 20px 48px rgba(0,0,0,.24);
      --playlist-accent-color:#8ddfff;
      --playlist-title-color:#fff;
      --playlist-copy-color:#b9c7e3;
      --playlist-muted-color:#9fafcf;
      --playlist-tab-gap:4px;
      --playlist-tab-padding:4px;
      --playlist-tab-radius:14px;
      --playlist-tab-active-background:linear-gradient(135deg,rgba(85,214,255,.2),rgba(125,111,255,.2));
      --playlist-form-columns:minmax(0,1fr) minmax(0,1fr);
      --playlist-list-columns:repeat(2,minmax(0,1fr));
      --playlist-list-gap:14px;
      --playlist-card-cover-size:92px;
      --playlist-card-gap:14px;
      --playlist-card-padding:14px;
      --playlist-card-border-color:rgba(126,171,255,.15);
      --playlist-card-radius:18px;
      --playlist-card-background:rgba(8,15,34,.68);
      --playlist-card-cover-radius:16px;
      --playlist-detail-columns:150px minmax(0,1fr);
      --playlist-detail-gap:18px;
      --playlist-stat-columns:repeat(3,minmax(0,1fr));
      --playlist-tool-columns:minmax(220px,1fr) minmax(210px,280px);
      --playlist-item-columns:minmax(0,1fr);
      --playlist-component-gap:12px;
      --playlist-component-border-color:rgba(126,171,255,.13);
      --playlist-component-radius:16px;
      --playlist-item-gap:10px;
      --playlist-item-padding:12px;
      --playlist-item-radius:15px;
      --playlist-item-background:rgba(5,11,26,.48);
    }

    @media (min-width:981px) {
      .playlist-page {
        --playlist-item-columns:repeat(2,minmax(0,1fr));
      }
    }

    @media (max-width:760px) {
      .playlist-page {
        --playlist-form-columns:1fr;
        --playlist-list-columns:1fr;
        --playlist-card-cover-size:74px;
        --playlist-detail-columns:1fr;
        --playlist-stat-columns:1fr;
        --playlist-tool-columns:1fr;
      }
    }
  }

  .playlist-page {
    display:grid;
    gap:var(--playlist-page-gap,18px);
  }
  .playlist-hero,.playlist-panel,.playlist-detail-hero { position:relative; overflow:hidden; padding:var(--playlist-surface-padding,22px); border:1px solid var(--playlist-surface-border-color,rgba(126,171,255,.16)); border-radius:var(--playlist-surface-radius,22px); background:var(--playlist-surface-background,linear-gradient(135deg,rgba(12,21,45,.82),rgba(8,15,34,.64))); box-shadow:var(--playlist-surface-shadow,0 20px 48px rgba(0,0,0,.24)); }
  .playlist-kicker { color:var(--playlist-accent-color,#8ddfff); font-size:11px; font-weight:900; letter-spacing:1.25px; text-transform:uppercase; }
  .playlist-title { margin:7px 0 8px; color:var(--playlist-title-color,#fff); font-size:clamp(24px,4vw,40px); line-height:1.1; }
  .playlist-copy { color:var(--playlist-copy-color,#b9c7e3); line-height:1.7; max-width:820px; }
  .playlist-actions,.playlist-form-actions,.playlist-card-actions,.playlist-item-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
  .playlist-actions { margin-top:16px; }
  .playlist-list-tabs { display:inline-flex; gap:var(--playlist-tab-gap,4px); padding:var(--playlist-tab-padding,4px); margin:4px 0 16px; border:1px solid rgba(126,171,255,.14); border-radius:var(--playlist-tab-radius,14px); background:rgba(4,10,25,.5); }
  .playlist-list-tab { min-height:38px; padding:8px 14px; border:0; border-radius:10px; color:var(--playlist-muted-color,#9fafcf); background:transparent; font:inherit; font-size:12px; font-weight:900; cursor:pointer; transition:color .16s ease,background .16s ease,box-shadow .16s ease; }
  .playlist-list-tab:hover { color:#eef6ff; background:rgba(126,171,255,.08); }
  .playlist-list-tab.active { color:var(--playlist-title-color,#fff); background:var(--playlist-tab-active-background,linear-gradient(135deg,rgba(85,214,255,.2),rgba(125,111,255,.2))); box-shadow:inset 0 0 0 1px rgba(111,211,255,.22); }
  .playlist-list-tab span { margin-left:5px; opacity:.72; }
  .playlist-form { display:grid; gap:12px; }
  .playlist-form-grid { display:grid; grid-template-columns:var(--playlist-form-columns,minmax(0,1fr) minmax(0,1fr)); gap:12px; }
  .playlist-field { display:grid; gap:6px; color:#cbd8f2; font-size:11px; font-weight:850; }
  .playlist-field input,.playlist-field textarea,.playlist-field select { width:100%; min-height:42px; border:1px solid rgba(126,171,255,.18); border-radius:12px; background:rgba(6,13,30,.64); color:#f6f9ff; padding:10px 12px; outline:none; }
  .playlist-field textarea { min-height:82px; resize:vertical; }
  .playlist-grid { display:grid; grid-template-columns:var(--playlist-list-columns,repeat(2,minmax(0,1fr))); gap:var(--playlist-list-gap,14px); }
  .playlist-card { display:grid; grid-template-columns:var(--playlist-card-cover-size,92px) minmax(0,1fr); gap:var(--playlist-card-gap,14px); padding:var(--playlist-card-padding,14px); border:1px solid var(--playlist-card-border-color,rgba(126,171,255,.15)); border-radius:var(--playlist-card-radius,18px); background:var(--playlist-card-background,rgba(8,15,34,.68)); cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease; }
  .playlist-card:hover { transform:translateY(-2px); border-color:rgba(85,214,255,.35); background:rgba(12,24,52,.82); }
  .playlist-cover { width:var(--playlist-card-cover-size,92px); aspect-ratio:1; display:grid; place-items:center; border-radius:var(--playlist-card-cover-radius,16px); overflow:hidden; color:var(--playlist-accent-color,#8ddfff); font-size:28px; font-weight:900; background:radial-gradient(circle at 30% 20%,rgba(255,126,211,.22),rgba(85,214,255,.12) 45%,rgba(6,11,25,.9)); border:1px solid rgba(126,171,255,.14); }
  .playlist-cover img { width:100%; height:100%; object-fit:cover; display:block; }
  .playlist-card-title { color:var(--playlist-title-color,#fff); font-weight:900; font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .playlist-card-meta,.playlist-card-copy { margin-top:6px; color:var(--playlist-muted-color,#9fafcf); font-size:12px; line-height:1.5; }
  .playlist-card-copy { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .playlist-detail-hero { display:grid; grid-template-columns:var(--playlist-detail-columns,150px minmax(0,1fr)); gap:var(--playlist-detail-gap,18px); align-items:center; }
  .playlist-detail-cover { width:150px; aspect-ratio:1; border-radius:var(--playlist-surface-radius,22px); overflow:hidden; display:grid; place-items:center; background:radial-gradient(circle at 30% 20%,rgba(255,126,211,.22),rgba(85,214,255,.13) 50%,rgba(6,11,25,.9)); border:1px solid var(--playlist-surface-border-color,rgba(126,171,255,.16)); color:var(--playlist-accent-color,#8ddfff); font-size:42px; font-weight:900; }
  .playlist-detail-cover img { width:100%; height:100%; object-fit:cover; display:block; }
  .playlist-detail-stats { display:grid; grid-template-columns:var(--playlist-stat-columns,repeat(3,minmax(0,1fr))); gap:var(--playlist-component-gap,12px); }
  .playlist-stat { min-width:0; padding:14px 16px; border:1px solid var(--playlist-component-border-color,rgba(126,171,255,.13)); border-radius:var(--playlist-component-radius,16px); background:rgba(6,13,30,.5); }
  .playlist-stat-label { display:block; color:#91a5ca; font-size:11px; font-weight:850; }
  .playlist-stat-value { display:block; margin-top:5px; color:#f5f9ff; font-size:20px; font-weight:950; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .playlist-browse-tools { display:grid; grid-template-columns:var(--playlist-tool-columns,minmax(220px,1fr) minmax(210px,280px)); gap:var(--playlist-component-gap,12px); margin:14px 0 10px; padding:14px; border:1px solid var(--playlist-component-border-color,rgba(126,171,255,.13)); border-radius:var(--playlist-component-radius,16px); background:rgba(5,11,26,.42); }
  .playlist-difficulty-filter { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
  .playlist-filter-label { width:100%; color:#91a5ca; font-size:11px; font-weight:850; }
  .playlist-filter-chip { min-height:32px; padding:6px 11px; border:1px solid rgba(126,171,255,.16); border-radius:999px; color:#aebddd; background:rgba(7,15,34,.7); font:inherit; font-size:11px; font-weight:850; cursor:pointer; transition:color .16s ease,border-color .16s ease,background .16s ease; }
  .playlist-filter-chip:hover { color:#fff; border-color:rgba(85,214,255,.35); }
  .playlist-filter-chip.active { color:#fff; border-color:rgba(85,214,255,.42); background:rgba(85,214,255,.14); box-shadow:0 0 0 1px rgba(85,214,255,.08); }
  .playlist-items-count { margin:0 0 10px; color:#9fb1d2; font-size:12px; font-weight:800; }
  .playlist-items { display:grid; grid-template-columns:var(--playlist-item-columns,minmax(0,1fr)); gap:var(--playlist-component-gap,12px); }
  .playlist-items > .empty { grid-column:1 / -1; }
  .playlist-item { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--playlist-item-gap,10px); align-content:start; padding:var(--playlist-item-padding,12px); border:1px solid var(--playlist-component-border-color,rgba(126,171,255,.13)); border-radius:var(--playlist-item-radius,15px); background:var(--playlist-item-background,rgba(5,11,26,.48)); min-width:0; }
  .playlist-item .search-map-card { margin:0; }
  .playlist-item-actions { justify-content:flex-end; }
  .playlist-owner-tools { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .playlist-share-tools { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; align-items:center; }
  .playlist-share-tools .share-actions { display:flex; flex-wrap:wrap; gap:10px; }
  .playlist-status { color:#9fb1d2; font-size:12px; }
  .playlist-status.error { color:#ff9cab; }
  .playlist-status.ok { color:#95f0ca; }
  .playlist-add-modal-list { display:grid; gap:8px; margin-top:12px; max-height:310px; overflow:auto; }
  .playlist-add-option { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px; border:1px solid rgba(126,171,255,.14); border-radius:12px; background:rgba(8,15,34,.72); }
  .playlist-edit-add-panel { display:grid; gap:12px; margin-top:14px; }
  .playlist-add-search-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
  .playlist-add-search-results { display:grid; gap:12px; }
  .playlist-add-search-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,auto); gap:12px; align-items:center; padding:10px; border:1px solid rgba(126,171,255,.14); border-radius:16px; background:rgba(5,11,26,.42); }
  .playlist-add-difficulty-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
  .playlist-add-difficulty-actions .btn[disabled] { opacity:.52; cursor:not-allowed; }
  .playlist-section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
  .profile-playlist-section { grid-column:1 / -1; }
  .profile-playlist-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .profile-playlist-grid .playlist-card { grid-template-columns:68px minmax(0,1fr); padding:12px; }
  .profile-playlist-grid .playlist-cover { width:68px; border-radius:14px; font-size:22px; }
  .profile-playlist-grid .playlist-card-title { font-size:15px; }
  @media (max-width:760px) { .playlist-add-search-form,.playlist-add-search-card { grid-template-columns:1fr; } .playlist-add-difficulty-actions { justify-content:flex-start; } }
  @media (max-width:760px) { .profile-playlist-grid { grid-template-columns:1fr; } .playlist-difficulty-filter { grid-column:1; } .playlist-list-tabs { width:100%; } .playlist-list-tab { flex:1; } }


  .modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); }
  .modal-head strong { color:#fff; }
  .modal-close { background:transparent; border:0; color:var(--muted); font-size:22px; cursor:pointer; }
  .modal-body { padding:16px 18px; }


.playlist-thumb-options{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:-4px;margin-bottom:4px;color:var(--muted);font-size:.86rem}
.playlist-thumb-clear{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.04);cursor:pointer;color:var(--text)}
.playlist-thumb-clear input{accent-color:#7dd3fc}
.playlist-thumb-hint{opacity:.9}


  /* v30.0.178: BeatLeader-style balance radar base styles. */
  .balance-radar {
    position: relative;
    width: min(232px, 100%);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    isolation: isolate;
  }
  .balance-radar-stage {
    position: relative;
    width: 232px;
    max-width: 100%;
    height: 188px;
    margin: 0 auto;
  }
  .balance-triangle-wrap {
    position: absolute;
    inset: 14px 11px 18px;
    touch-action: none;
  }
  .balance-triangle-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.34));
  }
  .balance-outer {
    fill: none;
    stroke: rgba(246, 250, 255, .88);
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 5.5 6.5;
  }
  .balance-radial {
    stroke: rgba(246, 250, 255, .13);
    stroke-width: 1.1;
  }
  .balance-fill {
    fill: rgba(112, 224, 165, .20);
    stroke: rgba(178, 116, 255, .90);
    stroke-width: 2.25;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 12px rgba(162, 106, 255, .35));
  }
  .balance-fill-glow {
    fill: rgba(106, 255, 181, .08);
    stroke: rgba(121, 236, 181, .34);
    stroke-width: 7;
    stroke-linejoin: round;
    filter: blur(.55px);
  }
  .balance-point {
    cursor: default;
    filter: drop-shadow(0 0 9px rgba(255,236,72,.92)) drop-shadow(0 0 14px rgba(151,101,255,.48));
  }
  .balance-triangle-wrap.editable .balance-point { cursor: grab; }
  .balance-triangle-wrap.editable .balance-point:active { cursor: grabbing; }
  .balance-center-label {
    position: absolute;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%) rotate(-8deg);
    z-index: 3;
    min-width: 54px;
    text-align: center;
    color: #f5eb36;
    font-size: .88rem;
    font-weight: 1000;
    letter-spacing: -.03em;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(14,18,35,.90), 0 0 9px rgba(255,235,54,.46);
    pointer-events: none;
    user-select: none;
    font-variant-numeric: tabular-nums;
  }
  .balance-corner {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: rgba(247, 250, 255, .95);
    font-size: .76rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -.01em;
    text-shadow: 0 2px 7px rgba(0,0,0,.75), 0 0 10px rgba(73, 113, 255, .28);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .balance-corner strong {
    color: #ffffff;
    font-size: 1.02em;
    font-weight: 950;
  }
  .balance-corner-tech {
    left: 2px;
    top: 4px;
  }
  .balance-corner-acc {
    right: 2px;
    top: 4px;
  }
  .balance-corner-pass {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }
  .balance-admin-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
  }
  .balance-admin-actions button {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(8,14,30,.54);
    color: var(--text);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
    backdrop-filter: blur(10px);
  }
  .balance-admin-actions button.primary {
    color: #07101f;
    background: linear-gradient(135deg, rgba(255,235,84,.96), rgba(118,226,178,.90));
    border-color: rgba(255,255,255,.42);
  }
  .balance-admin-actions button:disabled { opacity: .45; cursor: not-allowed; }
  .balance-status {
    min-height: 16px;
    color: rgba(205,216,236,.78);
    font-size: .70rem;
    line-height: 1.2;
  }
  .balance-status.ok { color: #9df6c8; }
  .balance-status.error { color: #ff9da8; }
  .balance-request-button {
    position: absolute;
    right: -4px;
    bottom: 8px;
    z-index: 8;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.26);
    background: rgba(8, 14, 30, .68);
    color: #fff;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,.32), 0 0 0 1px rgba(128,172,255,.10) inset;
    backdrop-filter: blur(10px);
  }
  .balance-request-button:hover,
  .balance-request-button.active {
    color: #07101f;
    background: linear-gradient(135deg, rgba(255,235,84,.96), rgba(118,226,178,.92));
    border-color: rgba(255,255,255,.50);
  }
  .balance-request-button:disabled { opacity: .55; cursor: wait; }
  .balance-radar.request-mode .balance-triangle-wrap { cursor: crosshair; }

  #song-detail-view .song-hero-top.song-hero-top-expanded {
    grid-template-columns: 132px minmax(0, 1fr) minmax(198px, 232px) !important;
    align-items: center !important;
    gap: 18px !important;
  }
  #song-detail-view .song-hero-balance {
    justify-self: end;
    align-self: center;
  }
  #song-detail-view .song-hero-title-block { min-width: 0; }
  #song-detail-view .song-hero-title { overflow-wrap: anywhere; }

  /* v30.0.193: old generic player profile rules from v178 removed; current profile uses v182 scoped classes. */

  @media (max-width: 980px) {
    #song-detail-view .song-hero-top.song-hero-top-expanded {
      grid-template-columns: 108px minmax(0, 1fr) !important;
    }
    #song-detail-view .song-hero-balance {
      grid-column: 1 / -1;
      justify-self: end;
      width: min(232px, 100%);
    }
  }
  @media (max-width: 520px) {
    .balance-radar-stage { width: 208px; height: 174px; }
    .balance-corner { font-size: .70rem; }
    .balance-center-label { font-size: .82rem; }
    #song-detail-view .song-hero-top.song-hero-top-expanded {
      grid-template-columns: 86px minmax(0, 1fr) !important;
    }
    #song-detail-view .song-hero-balance { justify-self: center; }
  }


  /* v30.0.193: Removed obsolete profile layout override blocks from v30.0.179-v30.0.181.
     The active player profile layout is now the dedicated v182 structure plus
     the v189/v190 mobile hardening below, which avoids old generic profile
     selectors leaking into the current UI. */

  /* v30.0.182: Profile page UI balance rebuild.
     Use new classes so the stat block cannot fall back to the legacy stacked
     cards, keep the hero stable across long names/bios, and preserve the
     existing average-accuracy effects without clipping them. */
  /* v30.1.38: Profile-only design-token boundary.
     Keep the reviewed v30.1.37 geometry scoped to the player detail view.
     Existing --profile182-* / --profile199-* variables remain compatibility-owned
     by the active profile layout and are intentionally not renamed in this slice. */
  /* v30.1.39: Move only the reviewed Profile UI token declarations into one named
     cascade layer. Component, shared Playlist, legacy compatibility, color,
     animation and !important rules remain unlayered. */
  @layer udon-profile-tokens {
    body #player-detail-view {
      --profile-ui-hero-padding: 24px 28px;
      --profile-ui-hero-radius: 10px;
      --profile-ui-main-row-gap: 30px;
      --profile-ui-main-column-gap: 30px;
      --profile-ui-avatar-radius: 12px;
      --profile-ui-rank-gap: 7px;
      --profile-ui-bio-font-size: 13.5px;
      --profile-ui-radar-stage-width: 248px;
      --profile-ui-radar-stage-height: 200px;
      --profile-ui-stats-row-height: 84px;
      --profile-ui-stats-gap: 10px;
      --profile-ui-stats-margin-top: 14px;
      --profile-ui-stats-margin-bottom: 18px;
      --profile-ui-stat-card-height: 84px;
      --profile-ui-stat-card-padding-y: 13px;
      --profile-ui-stat-card-padding-x: 16px;
      --profile-ui-stat-card-radius: 8px;
      --profile-ui-tabs-min-height: 50px;
      --profile-ui-tabs-margin-top: 18px;
      --profile-ui-tabs-margin-bottom: 6px;
      --profile-ui-tab-min-height: 50px;
      --profile-ui-tab-padding-x: 20px;
      --profile-ui-overview-gap: 0;
      --profile-ui-section-radius: 0;
      --profile-ui-section-heading-min-height: 40px;
      --profile-ui-section-heading-padding-x: 14px;
      --profile-ui-filter-margin-bottom: 10px;
      --profile-ui-filter-padding-bottom: 10px;
      --profile-ui-filter-input-min-height: 34px;
      --profile-ui-filter-input-radius: 0;
      --profile-ui-table-scroll-radius: 0;
      --profile-ui-table-layout: fixed;
      --profile-ui-table-row-height: 52px;
      --profile-ui-table-header-height: 36px;
    }

    @media (max-width: 1180px) {
      body #player-detail-view {
        --profile-ui-main-row-gap: 22px;
        --profile-ui-main-column-gap: 22px;
        --profile-ui-radar-stage-width: 226px;
        --profile-ui-radar-stage-height: 186px;
        --profile-ui-stats-row-height: 80px;
        --profile-ui-stats-gap: 8px;
        --profile-ui-stat-card-height: 80px;
        --profile-ui-stat-card-padding-y: 12px;
        --profile-ui-stat-card-padding-x: 13px;
      }
    }

    @media (max-width: 700px) {
      body #player-detail-view {
        --profile-ui-table-row-height: 50px;
      }
    }

    @media (max-width: 760px) {
      body #player-detail-view {
        --profile-ui-hero-padding: 17px;
        --profile-ui-hero-radius: 14px;
        --profile-ui-main-row-gap: 13px;
        --profile-ui-main-column-gap: var(--profile199-gap);
        --profile-ui-avatar-radius: 14px;
        --profile-ui-rank-gap: 6px;
        --profile-ui-bio-font-size: 12.6px;
        --profile-ui-radar-stage-width: var(--profile182-radar);
        --profile-ui-radar-stage-height: 144px;
        --profile-ui-stats-row-height: 76px;
        --profile-ui-stats-gap: 7px;
        --profile-ui-stats-margin-top: 12px;
        --profile-ui-stat-card-height: 76px;
        --profile-ui-stat-card-padding-y: 10px;
        --profile-ui-stat-card-padding-x: 8px;
        --profile-ui-tabs-min-height: 48px;
        --profile-ui-tabs-margin-top: 14px;
        --profile-ui-tabs-margin-bottom: 4px;
        --profile-ui-tab-min-height: 48px;
        --profile-ui-tab-padding-x: 17px;
      }
    }

    @media (max-width: 560px) {
      body #player-detail-view {
        --profile-ui-hero-padding: 16px;
        --profile-ui-main-row-gap: 12px;
        --profile-ui-rank-gap: 5px;
        --profile-ui-bio-font-size: 11.8px;
        --profile-ui-radar-stage-height: 140px;
      }
    }

    @media (max-width: 430px) {
      body #player-detail-view {
        --profile-ui-hero-padding: 14px;
        --profile-ui-main-row-gap: 11px;
        --profile-ui-bio-font-size: 11.2px;
        --profile-ui-radar-stage-height: 136px;
        --profile-ui-stats-row-height: 74px;
        --profile-ui-stats-gap: 6px;
        --profile-ui-stat-card-height: 74px;
        --profile-ui-stat-card-padding-y: 9px;
        --profile-ui-stat-card-padding-x: 7px;
      }
    }

    @media (max-width: 360px) {
      body #player-detail-view {
        --profile-ui-main-row-gap: 10px;
        --profile-ui-bio-font-size: 10.7px;
        --profile-ui-radar-stage-height: 128px;
      }
    }
  }

  body #player-detail-view {
    --profile182-avatar: 172px;
    --profile182-radar: 252px;
    --profile182-hero-h: 232px;
  }

  body #player-detail-view .profile-hero.profile-hero-v182 {
    display: block !important;
    position: relative !important;
    height: var(--profile182-hero-h) !important;
    min-height: var(--profile182-hero-h) !important;
    padding: var(--profile-ui-hero-padding, 24px 28px) !important;
    overflow: hidden !important;
    border-radius: var(--profile-ui-hero-radius, 10px) !important;
    border: 1px solid rgba(118,154,216,.20) !important;
    background:
      radial-gradient(circle at 14% 14%, rgba(94,174,255,.17), transparent 34%),
      radial-gradient(circle at 88% 22%, rgba(162,93,255,.10), transparent 34%),
      linear-gradient(180deg, rgba(8,14,26,.96), rgba(4,7,14,.98)) !important;
    box-shadow: 0 18px 56px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-bg {
    opacity: .075 !important;
    filter: blur(22px) saturate(.9) !important;
  }

  body #player-detail-view .profile-hero.profile-hero-v182 .profile-main.profile-main-v182 {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: var(--profile182-avatar) minmax(360px, 1fr) var(--profile182-radar) !important;
    gap: var(--profile-ui-main-row-gap, 30px) var(--profile-ui-main-column-gap, 30px) !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body #player-detail-view .profile-hero.profile-hero-v182.profile-no-tendency .profile-main.profile-main-v182 {
    grid-template-columns: var(--profile182-avatar) minmax(0, 1fr) !important;
  }

  body #player-detail-view .profile-hero.profile-hero-v182 .profile-avatar-wrap,
  body #player-detail-view .profile-hero.profile-hero-v182 .profile-main.profile-main-v182 .avatar {
    width: var(--profile182-avatar) !important;
    height: var(--profile182-avatar) !important;
    min-width: var(--profile182-avatar) !important;
    max-width: var(--profile182-avatar) !important;
    max-height: var(--profile182-avatar) !important;
    margin: 0 !important;
  }

  body #player-detail-view .profile-hero.profile-hero-v182 .profile-main.profile-main-v182 .avatar {
    border-radius: var(--profile-ui-avatar-radius, 12px) !important;
    border: 1px solid rgba(126,171,255,.38) !important;
    background: #02050c !important;
    box-shadow: 0 20px 54px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.03) !important;
  }

  body #player-detail-view .profile-hero.profile-hero-v182 .profile-avatar-wrap.neko-avatar::before,
  body #player-detail-view .profile-hero.profile-hero-v182 .profile-avatar-wrap.neko-avatar::after {
    top: -28px !important;
    font-size: 46px !important;
  }

  body #player-detail-view .profile-hero.profile-hero-v182 .profile-identity.profile-identity-v182 {
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    align-self: center !important;
  }

  body #player-detail-view .profile-hero.profile-hero-v182 .profile-name {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    max-width: 100% !important;
    max-height: 2.12em !important;
    margin: 0 !important;
    overflow: hidden !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    text-overflow: ellipsis !important;
    color: #f5f9ff !important;
    font-size: clamp(42px, 4.1vw, 60px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.052em !important;
  }

  body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--profile-ui-rank-gap, 7px) !important;
    max-width: 100% !important;
    max-height: 62px !important;
    margin-top: 12px !important;
    overflow: hidden !important;
  }

  body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .rank-badge,
  body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .pill,
  body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .profile-hmd-pill,
  body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .neko-badge,
  body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .admin-badge,
  body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .inactive-badge,
  body #player-detail-view .profile-hero.profile-hero-v182 .profile-url-button {
    min-height: 28px !important;
    max-width: 100% !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: .045em !important;
    white-space: nowrap !important;
  }

  body #player-detail-view .profile-hero.profile-hero-v182 .profile-hmd-pill span:last-child {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body #player-detail-view .profile-hero.profile-hero-v182 .profile-bio-inline {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    max-width: min(100%, 900px) !important;
    max-height: 3.1em !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    color: #b8c7df !important;
    font-size: var(--profile-ui-bio-font-size, 13.5px) !important;
    line-height: 1.55 !important;
  }

  body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency {
    justify-self: end !important;
    align-self: center !important;
    width: var(--profile182-radar) !important;
    max-width: var(--profile182-radar) !important;
    min-width: var(--profile182-radar) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-radar-stage {
    width: var(--profile-ui-radar-stage-width, 248px) !important;
    height: var(--profile-ui-radar-stage-height, 200px) !important;
  }

  body #player-detail-view .profile-stats-v182 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: var(--profile-ui-stats-row-height, 84px) !important;
    gap: var(--profile-ui-stats-gap, 10px) !important;
    margin: var(--profile-ui-stats-margin-top, 14px) 0 var(--profile-ui-stats-margin-bottom, 18px) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body #player-detail-view .profile-stats-v182 .profile-stat-v182 {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    min-height: var(--profile-ui-stat-card-height, 84px) !important;
    height: var(--profile-ui-stat-card-height, 84px) !important;
    padding: var(--profile-ui-stat-card-padding-y, 13px) var(--profile-ui-stat-card-padding-x, 16px) !important;
    border: 1px solid rgba(116,145,196,.16) !important;
    border-radius: var(--profile-ui-stat-card-radius, 8px) !important;
    background: linear-gradient(180deg, rgba(8,14,26,.82), rgba(5,9,17,.82)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
    overflow: visible !important;
  }

  body #player-detail-view .profile-stats-v182 .profile-stat-v182 > span {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #a3b0c4 !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
  }

  body #player-detail-view .profile-stats-v182 .profile-stat-v182 strong {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #eef5ff !important;
    font-size: clamp(20px, 1.75vw, 28px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
  }

  body #player-detail-view .profile-stats-v182 .profile-stat-total-pp strong,
  body #player-detail-view .profile-stats-v182 .profile-stat-top-pp strong,
  body #player-detail-view .profile-stats-v182 .profile-stat-total-score strong {
    color: #f4fbff !important;
  }

  body #player-detail-view .profile-stats-v182 .profile-stat-total-score strong {
    font-size: clamp(17px, 1.55vw, 25px) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -.04em !important;
  }

  body #player-detail-view .profile-stats-v182 .profile-accuracy-stat,
  body #player-detail-view .profile-stats-v182 .profile-accuracy-stat strong {
    overflow: visible !important;
    z-index: 2 !important;
  }

  body #player-detail-view .profile-stats-v182 .profile-accuracy-stat strong {
    font-size: clamp(20px, 1.75vw, 28px) !important;
  }

  body #player-detail-view .profile-stats-v182 .profile-accuracy-value {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    font-size: 1em !important;
    line-height: 1 !important;
    vertical-align: baseline !important;
  }

  @media (max-width: 1180px) {
    body #player-detail-view {
      --profile182-avatar: 152px;
      --profile182-radar: 230px;
      --profile182-hero-h: 214px;
    }
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-main.profile-main-v182 {
      grid-template-columns: var(--profile182-avatar) minmax(300px, 1fr) var(--profile182-radar) !important;
      gap: var(--profile-ui-main-row-gap, 22px) var(--profile-ui-main-column-gap, 22px) !important;
    }
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-name {
      font-size: clamp(36px, 4.1vw, 52px) !important;
    }
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-radar-stage {
      width: var(--profile-ui-radar-stage-width, 226px) !important;
      height: var(--profile-ui-radar-stage-height, 186px) !important;
    }
    body #player-detail-view .profile-stats-v182 {
      grid-auto-rows: var(--profile-ui-stats-row-height, 80px) !important;
      gap: var(--profile-ui-stats-gap, 8px) !important;
    }
    body #player-detail-view .profile-stats-v182 .profile-stat-v182 {
      min-height: var(--profile-ui-stat-card-height, 80px) !important;
      height: var(--profile-ui-stat-card-height, 80px) !important;
      padding: var(--profile-ui-stat-card-padding-y, 12px) var(--profile-ui-stat-card-padding-x, 13px) !important;
    }
  }




  /* v30.0.194: consolidated song detail hero layout.
     Keeps the effective v30.0.184 thumbnail sizing and the v30.0.183 stable
     grid/difficulty fixes in one block, so older song-detail overrides cannot
     unexpectedly fight the active layout. */
  #song-detail-view .song-hero {
    overflow: visible !important;
  }

  #song-detail-view .song-hero-top.song-hero-top-expanded {
    display: grid !important;
    grid-template-columns: 188px minmax(0, 1fr) minmax(206px, 236px) !important;
    grid-template-areas: "cover info balance" !important;
    align-items: center !important;
    column-gap: 22px !important;
    row-gap: 16px !important;
    padding: 0 24px 20px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-cover {
    grid-area: cover !important;
    width: 188px !important;
    height: 188px !important;
    min-width: 188px !important;
    max-width: 188px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 22px !important;
    align-self: center !important;
    justify-self: start !important;
    box-sizing: border-box !important;
    font-size: 42px !important;
  }

  #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-title-block {
    grid-area: info !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-size: clamp(31px, 3.4vw, 48px) !important;
    line-height: 1.05 !important;
  }

  #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-meta {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-top: 10px !important;
    overflow-wrap: anywhere !important;
  }

  #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-inline-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 12px 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: 17px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }

  #song-detail-view .song-hero-top.song-hero-top-expanded .song-difficulty-badges {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
  }

  #song-detail-view .song-difficulty-switcher {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #song-detail-view .song-difficulty-label {
    flex: 0 0 100% !important;
    margin: 0 0 2px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  #song-detail-view .song-diff-chip,
  #song-detail-view .song-hero-top.song-hero-top-expanded .song-diff-chip {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 38px !important;
    min-width: 82px !important;
    max-width: 100% !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #song-detail-view .song-diff-chip small,
  #song-detail-view .song-hero-top.song-hero-top-expanded .song-diff-chip small {
    display: inline-block !important;
    opacity: .94 !important;
    font-size: 14.5px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -.01em !important;
    font-variant-numeric: tabular-nums !important;
  }

  #song-detail-view .song-diff-chip.active,
  #song-detail-view .song-hero-top.song-hero-top-expanded .song-diff-chip.active {
    min-height: 44px !important;
    min-width: 94px !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
    transform: none !important;
  }

  #song-detail-view .song-diff-chip.active small,
  #song-detail-view .song-hero-top.song-hero-top-expanded .song-diff-chip.active small {
    font-size: 17px !important;
    opacity: 1 !important;
  }

  #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-actions {
    min-width: 0 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-actions .favorite-button {
    min-width: 142px !important;
    max-width: 100% !important;
  }

  #song-detail-view .song-hero-balance {
    grid-area: balance !important;
    width: 100% !important;
    max-width: 236px !important;
    justify-self: end !important;
    align-self: center !important;
  }

  @media (max-width: 1120px) {
    #song-detail-view .song-hero-top.song-hero-top-expanded {
      grid-template-columns: 176px minmax(0, 1fr) minmax(202px, 230px) !important;
      column-gap: 20px !important;
    }
    #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-cover {
      width: 176px !important;
      height: 176px !important;
      min-width: 176px !important;
      max-width: 176px !important;
      border-radius: 21px !important;
      font-size: 40px !important;
    }
    #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-title {
      font-size: clamp(28px, 3.6vw, 42px) !important;
    }
    #song-detail-view .song-diff-chip,
    #song-detail-view .song-hero-top.song-hero-top-expanded .song-diff-chip {
      min-width: 78px !important;
      padding-left: 11px !important;
      padding-right: 11px !important;
    }
  }

  @media (max-width: 1010px) {
    #song-detail-view .song-hero-top.song-hero-top-expanded {
      grid-template-columns: 176px minmax(0, 1fr) !important;
      grid-template-areas:
        "cover info"
        "balance balance" !important;
      row-gap: 18px !important;
    }
    #song-detail-view .song-hero-balance {
      justify-self: end !important;
      width: min(236px, 100%) !important;
    }
  }

  @media (max-width: 820px) {
    #song-detail-view .song-hero-top.song-hero-top-expanded {
      grid-template-columns: 144px minmax(0, 1fr) !important;
      column-gap: 16px !important;
    }
    #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-cover {
      width: 144px !important;
      height: 144px !important;
      min-width: 144px !important;
      max-width: 144px !important;
      border-radius: 18px !important;
      font-size: 34px !important;
    }
  }

  /* v30.0.201: mobile song detail hero rebalance.
     Match the mobile player profile rhythm: cover and radar on the top row,
     title/meta/difficulty/actions below.  This replaces the older stepped
     mobile overrides so the cover no longer shrinks independently or falls
     into a separate one-column layout at narrow widths. */
  @media (max-width: 760px) {
    #song-detail-view .song-hero-top.song-hero-top-expanded {
      --song201-cover: clamp(118px, 34vw, 152px);
      --song201-radar: clamp(160px, 46vw, 202px);
      --song201-gap: clamp(8px, 3.1vw, 14px);
      --song201-top-width: min(100%, calc(var(--song201-cover) + var(--song201-gap) + var(--song201-radar)));
      grid-template-columns: var(--song201-cover) var(--song201-radar) !important;
      grid-template-areas:
        "cover balance"
        "info info" !important;
      justify-content: center !important;
      align-items: center !important;
      justify-items: stretch !important;
      column-gap: var(--song201-gap) !important;
      row-gap: 13px !important;
      padding: 0 14px 16px !important;
      overflow: visible !important;
    }

    #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-cover {
      width: var(--song201-cover) !important;
      height: var(--song201-cover) !important;
      min-width: var(--song201-cover) !important;
      max-width: var(--song201-cover) !important;
      border-radius: 16px !important;
      justify-self: start !important;
      align-self: center !important;
      font-size: clamp(27px, 7vw, 36px) !important;
    }

    #song-detail-view .song-hero-balance {
      width: var(--song201-radar) !important;
      min-width: var(--song201-radar) !important;
      max-width: var(--song201-radar) !important;
      justify-self: end !important;
      align-self: center !important;
      margin: 0 !important;
      overflow: visible !important;
    }

    #song-detail-view .song-hero-balance .balance-radar-stage {
      width: var(--song201-radar) !important;
      height: clamp(142px, 38vw, 176px) !important;
      overflow: visible !important;
    }

    #song-detail-view .song-hero-balance .balance-triangle-wrap {
      inset: 19px 12px 22px !important;
    }

    #song-detail-view .song-hero-balance .balance-corner {
      font-size: clamp(.60rem, 2.25vw, .70rem) !important;
      letter-spacing: -.02em !important;
    }

    #song-detail-view .song-hero-balance .balance-corner-tech {
      left: 4px !important;
      top: 4px !important;
    }

    #song-detail-view .song-hero-balance .balance-corner-acc {
      right: 4px !important;
      top: 4px !important;
    }

    #song-detail-view .song-hero-balance .balance-corner-pass {
      bottom: 1px !important;
    }

    #song-detail-view .song-hero-balance .balance-center-label {
      font-size: clamp(.72rem, 2.5vw, .82rem) !important;
    }

    #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-title-block {
      width: var(--song201-top-width) !important;
      max-width: 100% !important;
      justify-self: center !important;
      align-self: start !important;
      justify-content: flex-start !important;
      text-align: left !important;
      overflow: visible !important;
    }

    #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-title {
      display: -webkit-box !important;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 2 !important;
      max-height: 2.18em !important;
      overflow: hidden !important;
      font-size: clamp(23px, 7.1vw, 32px) !important;
      line-height: 1.09 !important;
      letter-spacing: -.035em !important;
    }

    #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-meta {
      margin-top: 7px !important;
      font-size: 12.2px !important;
      line-height: 1.42 !important;
      display: -webkit-box !important;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 2 !important;
      max-height: 2.84em !important;
      overflow: hidden !important;
    }

    #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-inline-info {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
      margin-top: 12px !important;
      width: 100% !important;
      overflow: visible !important;
    }

    #song-detail-view .song-difficulty-switcher {
      gap: 7px !important;
    }

    #song-detail-view .song-diff-chip,
    #song-detail-view .song-hero-top.song-hero-top-expanded .song-diff-chip {
      min-width: 74px !important;
      min-height: 36px !important;
      padding: 7px 9px !important;
      border-radius: 8px !important;
      font-size: 12px !important;
      gap: 5px !important;
    }

    #song-detail-view .song-diff-chip small,
    #song-detail-view .song-hero-top.song-hero-top-expanded .song-diff-chip small {
      font-size: 13.5px !important;
    }

    #song-detail-view .song-diff-chip.active,
    #song-detail-view .song-hero-top.song-hero-top-expanded .song-diff-chip.active {
      min-height: 40px !important;
      min-width: 84px !important;
      padding: 8px 10px !important;
    }

    #song-detail-view .song-diff-chip.active small,
    #song-detail-view .song-hero-top.song-hero-top-expanded .song-diff-chip.active small {
      font-size: 15.5px !important;
    }

    #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-actions {
      justify-self: start !important;
      align-self: start !important;
      min-width: 0 !important;
    }

    #song-detail-view .song-hero-top.song-hero-top-expanded .song-hero-actions .favorite-button {
      min-width: 0 !important;
      width: auto !important;
      max-width: 100% !important;
    }
  }

  @media (max-width: 360px) {
    #song-detail-view .song-hero-top.song-hero-top-expanded {
      --song201-cover: 112px;
      --song201-radar: 154px;
      --song201-gap: 8px;
      padding-left: 12px !important;
      padding-right: 12px !important;
    }

    #song-detail-view .song-hero-balance .balance-corner {
      font-size: .59rem !important;
    }
  }



  /* v30.0.202: mobile song fingerprint/meta stats rebalance.
     Keep desktop song stats unchanged, but make the six chart metadata cards
     match the player profile rhythm on phones: 3 columns x 2 rows with real
     cards instead of the older 2-column/1-column line table overrides. */
  @media (max-width: 760px) {
    #song-detail-view .song-stat-grid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 8px !important;
      margin: 10px 0 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      overflow: visible !important;
    }

    #song-detail-view .song-stat,
    #song-detail-view .song-stat:first-child,
    #song-detail-view .song-stat:nth-child(odd),
    #song-detail-view .song-stat:nth-child(3n + 1),
    #song-detail-view .song-stat:nth-child(3n + 1):not(:nth-child(odd)) {
      min-height: 82px !important;
      height: 82px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      padding: 11px 9px !important;
      border: 1px solid rgba(118,154,216,.18) !important;
      border-radius: 12px !important;
      background:
        radial-gradient(circle at 84% 18%, rgba(91,179,255,.055), transparent 40%),
        linear-gradient(180deg, rgba(7,12,24,.78), rgba(4,7,14,.92)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
      backdrop-filter: none !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }

    #song-detail-view .song-stat span {
      min-width: 0 !important;
      color: rgba(194,205,225,.78) !important;
      font-size: 10px !important;
      line-height: 1.2 !important;
      letter-spacing: .06em !important;
      text-transform: none !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    #song-detail-view .song-stat strong {
      min-width: 0 !important;
      margin-top: 7px !important;
      color: #f4f8ff !important;
      font-size: clamp(18px, 5.2vw, 24px) !important;
      line-height: 1.04 !important;
      font-weight: 900 !important;
      letter-spacing: -.035em !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      font-variant-numeric: tabular-nums !important;
    }
  }

  @media (max-width: 360px) {
    #song-detail-view .song-stat-grid {
      gap: 6px !important;
    }

    #song-detail-view .song-stat,
    #song-detail-view .song-stat:first-child,
    #song-detail-view .song-stat:nth-child(odd),
    #song-detail-view .song-stat:nth-child(3n + 1),
    #song-detail-view .song-stat:nth-child(3n + 1):not(:nth-child(odd)) {
      min-height: 76px !important;
      height: 76px !important;
      padding: 9px 7px !important;
      border-radius: 10px !important;
    }

    #song-detail-view .song-stat span {
      font-size: 9px !important;
      letter-spacing: .035em !important;
    }

    #song-detail-view .song-stat strong {
      font-size: clamp(16px, 5vw, 20px) !important;
      letter-spacing: -.04em !important;
    }
  }




  /* v30.0.200: mobile player profile radar label spacing polish.
     Keep the v197/v198 mobile structure, but make the left accent a real
     card-edge accent instead of a full-surface gradient, align the identity
     block with the avatar's left edge, and give the radar labels enough room
     so Tech/Acc stay readable without spilling into the avatar column. */
  @media (max-width: 760px) {
    body #player-detail-view {
      --profile182-avatar: 148px;
      --profile182-radar: 174px;
      --profile199-gap: 14px;
      --profile199-top-width: min(100%, calc(var(--profile182-avatar) + var(--profile199-gap) + var(--profile182-radar)));
      --profile182-hero-h: auto;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 {
      position: relative !important;
      isolation: isolate !important;
      height: auto !important;
      min-height: 0 !important;
      padding: var(--profile-ui-hero-padding, 17px) !important;
      overflow: hidden !important;
      border-radius: var(--profile-ui-hero-radius, 14px) !important;
      border: 1px solid rgba(116,145,196,.18) !important;
      background:
        radial-gradient(circle at 18% 10%, rgba(91,179,255,.10), transparent 34%),
        radial-gradient(circle at 92% 0%, rgba(141,124,255,.075), transparent 38%),
        linear-gradient(180deg, rgba(8,13,23,.82), rgba(4,7,13,.95)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182::before {
      content: "" !important;
      display: block !important;
      position: absolute !important;
      left: 0 !important;
      top: 0 !important;
      bottom: 0 !important;
      width: 2px !important;
      z-index: 1 !important;
      pointer-events: none !important;
      border-top-left-radius: inherit !important;
      border-bottom-left-radius: inherit !important;
      background: linear-gradient(180deg,
        rgba(91,179,255,.08),
        rgba(91,179,255,.52) 18%,
        rgba(91,179,255,.34) 58%,
        rgba(91,179,255,.10)) !important;
      box-shadow: 0 0 14px rgba(91,179,255,.24) !important;
      opacity: .92 !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182::after {
      content: "" !important;
      display: block !important;
      position: absolute !important;
      inset: 0 !important;
      z-index: 0 !important;
      pointer-events: none !important;
      background:
        radial-gradient(ellipse at 8% 14%, rgba(91,179,255,.12), transparent 30%),
        radial-gradient(ellipse at 94% 0%, rgba(141,124,255,.09), transparent 38%),
        linear-gradient(90deg, rgba(3,8,20,.12), rgba(3,8,20,.02) 42%, rgba(3,8,20,.12)) !important;
      opacity: .72 !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-prestige-accuracy,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-prestige-plays {
      display: none !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-prestige-accuracy::before,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-prestige-plays::before,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-prestige-plays::after {
      display: none !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-main.profile-main-v182::after {
      content: none !important;
      display: none !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-main.profile-main-v182 {
      display: grid !important;
      grid-template-columns: var(--profile182-avatar) var(--profile182-radar) !important;
      grid-template-rows: auto auto !important;
      grid-template-areas:
        "avatar tendency"
        "identity identity" !important;
      justify-content: center !important;
      align-items: center !important;
      justify-items: stretch !important;
      gap: var(--profile-ui-main-row-gap, 13px) var(--profile-ui-main-column-gap, var(--profile199-gap)) !important;
      position: relative !important;
      z-index: 2 !important;
      height: auto !important;
      min-height: 0 !important;
      width: 100% !important;
      overflow: visible !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182.profile-no-tendency .profile-main.profile-main-v182 {
      grid-template-columns: var(--profile182-avatar) !important;
      grid-template-areas:
        "avatar"
        "identity" !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-avatar-wrap {
      grid-area: avatar !important;
      align-self: center !important;
      justify-self: start !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-avatar-wrap,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-main.profile-main-v182 .avatar {
      width: var(--profile182-avatar) !important;
      height: var(--profile182-avatar) !important;
      min-width: var(--profile182-avatar) !important;
      max-width: var(--profile182-avatar) !important;
      max-height: var(--profile182-avatar) !important;
      border-radius: var(--profile-ui-avatar-radius, 14px) !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-avatar-wrap.neko-avatar::before,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-avatar-wrap.neko-avatar::after {
      top: -21px !important;
      font-size: 34px !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency {
      grid-area: tendency !important;
      grid-column: auto !important;
      justify-self: stretch !important;
      align-self: center !important;
      width: var(--profile182-radar) !important;
      min-width: var(--profile182-radar) !important;
      max-width: var(--profile182-radar) !important;
      margin: 0 !important;
      overflow: visible !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-radar-stage {
      width: var(--profile-ui-radar-stage-width, var(--profile182-radar)) !important;
      height: var(--profile-ui-radar-stage-height, 144px) !important;
      overflow: visible !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-corner {
      font-size: .64rem !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-corner-tech {
      left: 4px !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-corner-acc {
      right: 4px !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-center-label {
      font-size: .78rem !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-identity.profile-identity-v182 {
      grid-area: identity !important;
      align-self: start !important;
      justify-self: center !important;
      width: var(--profile199-top-width) !important;
      min-width: 0 !important;
      max-width: 100% !important;
      max-height: none !important;
      overflow: hidden !important;
      padding-top: 1px !important;
      text-align: left !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182.profile-no-tendency .profile-identity.profile-identity-v182 {
      width: 100% !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-name {
      display: -webkit-box !important;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 2 !important;
      width: 100% !important;
      max-width: 100% !important;
      max-height: 2.16em !important;
      margin: 0 !important;
      overflow: hidden !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
      text-overflow: ellipsis !important;
      font-size: clamp(27px, 6.1vw, 36px) !important;
      line-height: 1.08 !important;
      letter-spacing: -.045em !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: flex-start !important;
      align-items: center !important;
      gap: var(--profile-ui-rank-gap, 6px) !important;
      width: 100% !important;
      max-width: 100% !important;
      max-height: 56px !important;
      margin-top: 9px !important;
      overflow: hidden !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .rank-badge,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .pill,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .profile-hmd-pill,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .neko-badge,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .admin-badge,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .inactive-badge,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-url-button {
      min-height: 25px !important;
      max-height: 25px !important;
      padding: 0 8px !important;
      border-radius: 8px !important;
      font-size: 9.8px !important;
      line-height: 1 !important;
      letter-spacing: .04em !important;
      white-space: nowrap !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-bio-inline {
      display: -webkit-box !important;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 2 !important;
      width: 100% !important;
      max-width: 100% !important;
      max-height: 2.76em !important;
      margin: 9px 0 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
      border: 0 !important;
      border-left: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #b8c7df !important;
      font-size: var(--profile-ui-bio-font-size, 12.6px) !important;
      line-height: 1.38 !important;
    }

    body #player-detail-view .profile-stats-v182 {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      grid-auto-rows: var(--profile-ui-stats-row-height, 76px) !important;
      gap: var(--profile-ui-stats-gap, 7px) !important;
      margin-top: var(--profile-ui-stats-margin-top, 12px) !important;
    }

    body #player-detail-view .profile-stats-v182 .profile-stat-v182,
    body #player-detail-view .profile-stats-v182 .profile-stat-total-pp,
    body #player-detail-view .profile-stats-v182 .profile-stat-top-pp,
    body #player-detail-view .profile-stats-v182 .profile-accuracy-stat {
      grid-column: auto !important;
    }

    body #player-detail-view .profile-stats-v182 .profile-stat-v182 {
      min-height: var(--profile-ui-stat-card-height, 76px) !important;
      height: var(--profile-ui-stat-card-height, 76px) !important;
      padding: var(--profile-ui-stat-card-padding-y, 10px) var(--profile-ui-stat-card-padding-x, 8px) !important;
      border-radius: var(--profile-ui-stat-card-radius, 8px) !important;
    }

    body #player-detail-view .profile-stats-v182 .profile-stat-v182 > span {
      font-size: 8.8px !important;
      line-height: 1.12 !important;
      letter-spacing: .02em !important;
    }

    body #player-detail-view .profile-stats-v182 .profile-stat-v182 strong,
    body #player-detail-view .profile-stats-v182 .profile-accuracy-stat strong {
      font-size: clamp(15px, 4.25vw, 20px) !important;
      margin-top: 7px !important;
    }

    body #player-detail-view .profile-stats-v182 .profile-stat-total-score strong {
      font-size: clamp(13px, 3.45vw, 17px) !important;
    }
  }

  @media (max-width: 560px) {
    body #player-detail-view {
      --profile182-avatar: 140px;
      --profile182-radar: 170px;
      --profile199-gap: 13px;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 {
      padding: var(--profile-ui-hero-padding, 16px) !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-main.profile-main-v182 {
      gap: var(--profile-ui-main-row-gap, 12px) var(--profile-ui-main-column-gap, var(--profile199-gap)) !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-radar-stage {
      height: var(--profile-ui-radar-stage-height, 140px) !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-name {
      font-size: clamp(24px, 6.25vw, 31px) !important;
      line-height: 1.08 !important;
      letter-spacing: -.04em !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line {
      margin-top: 8px !important;
      max-height: 54px !important;
      gap: var(--profile-ui-rank-gap, 5px) !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .rank-badge,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .pill,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .profile-hmd-pill,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .neko-badge,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .admin-badge,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .inactive-badge,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-url-button {
      min-height: 24px !important;
      max-height: 24px !important;
      padding: 0 7px !important;
      font-size: 9.3px !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-bio-inline {
      margin-top: 8px !important;
      font-size: var(--profile-ui-bio-font-size, 11.8px) !important;
      line-height: 1.34 !important;
      max-height: 2.68em !important;
    }
  }

  @media (max-width: 430px) {
    body #player-detail-view {
      --profile182-avatar: 132px;
      --profile182-radar: 166px;
      --profile199-gap: 12px;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 {
      padding: var(--profile-ui-hero-padding, 14px) !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-main.profile-main-v182 {
      gap: var(--profile-ui-main-row-gap, 11px) var(--profile-ui-main-column-gap, var(--profile199-gap)) !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-radar-stage {
      height: var(--profile-ui-radar-stage-height, 136px) !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-corner {
      font-size: .60rem !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-corner-tech {
      left: 3px !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-corner-acc {
      right: 3px !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-name {
      font-size: clamp(22px, 6.35vw, 28px) !important;
      line-height: 1.09 !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-bio-inline {
      font-size: var(--profile-ui-bio-font-size, 11.2px) !important;
    }

    body #player-detail-view .profile-stats-v182 {
      grid-auto-rows: var(--profile-ui-stats-row-height, 74px) !important;
      gap: var(--profile-ui-stats-gap, 6px) !important;
    }

    body #player-detail-view .profile-stats-v182 .profile-stat-v182 {
      min-height: var(--profile-ui-stat-card-height, 74px) !important;
      height: var(--profile-ui-stat-card-height, 74px) !important;
      padding: var(--profile-ui-stat-card-padding-y, 9px) var(--profile-ui-stat-card-padding-x, 7px) !important;
    }

    body #player-detail-view .profile-stats-v182 .profile-stat-v182 strong,
    body #player-detail-view .profile-stats-v182 .profile-accuracy-stat strong {
      font-size: clamp(14px, 4.05vw, 18px) !important;
    }
  }

  @media (max-width: 360px) {
    body #player-detail-view {
      --profile182-avatar: 118px;
      --profile182-radar: 154px;
      --profile199-gap: 10px;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-main.profile-main-v182 {
      gap: var(--profile-ui-main-row-gap, 10px) var(--profile-ui-main-column-gap, var(--profile199-gap)) !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-radar-stage {
      height: var(--profile-ui-radar-stage-height, 128px) !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-corner {
      font-size: .55rem !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-corner-tech {
      left: 2px !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-hero-tendency .balance-corner-acc {
      right: 2px !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-name {
      font-size: 20px !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .rank-badge,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .pill,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .profile-hmd-pill,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .neko-badge,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .admin-badge,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-rank-line .inactive-badge,
    body #player-detail-view .profile-hero.profile-hero-v182 .profile-url-button {
      min-height: 23px !important;
      max-height: 23px !important;
      padding: 0 6px !important;
      font-size: 8.7px !important;
    }

    body #player-detail-view .profile-hero.profile-hero-v182 .profile-bio-inline {
      font-size: var(--profile-ui-bio-font-size, 10.7px) !important;
      line-height: 1.3 !important;
    }

    body #player-detail-view .profile-stats-v182 .profile-stat-v182 strong,
    body #player-detail-view .profile-stats-v182 .profile-accuracy-stat strong {
      font-size: 13px !important;
    }
  }



  /* v30.0.203: average-accuracy prestige retune.
     97% now receives the previous 98% prestige, 98% receives the previous
     99% prestige, and 99% gains a maximum tier comparable to the 2000+ played
     chart milestone. The selectors are appended as a narrow override so the
     existing leaderboard/profile layout geometry stays unchanged. */
  .leaderboard-accuracy-value.acc-97 {
    background: linear-gradient(90deg, #fff3a8, #ffb7df 26%, #d8b1ff 52%, #72edff 76%, #b8ffe1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .55px rgba(255,255,255,.96);
    text-shadow: 0 0 5px rgba(255,255,255,.60), 0 0 13px rgba(255,111,199,.62), 0 0 25px rgba(92,227,255,.65), 0 0 34px rgba(177,116,255,.34);
    filter: saturate(1.16) brightness(1.08);
  }

  .leaderboard-accuracy-value.acc-97::before,
  .leaderboard-accuracy-value.acc-97::after,
  .leaderboard-accuracy-value.acc-98::before,
  .leaderboard-accuracy-value.acc-98::after,
  .leaderboard-accuracy-value.acc-99::before,
  .leaderboard-accuracy-value.acc-99::after {
    position: absolute;
    pointer-events: none;
    color: #fff8c9;
    text-shadow: 0 0 8px #fff, 0 0 14px rgba(104,226,255,.9);
    line-height: 1;
  }

  .leaderboard-accuracy-value.acc-97::before { content: '✦'; font-size: 7px; left: -8px; top: -3px; }
  .leaderboard-accuracy-value.acc-97::after  { content: '·'; font-size: 12px; right: -6px; bottom: -5px; }

  .leaderboard-accuracy-value.acc-98 {
    box-sizing: border-box;
    max-width: 100%;
    padding: .08em .16em .10em;
    border: 0;
    outline: 0;
    border-radius: 0;
    letter-spacing: .035em;
    transform-origin: center;
    background-image:
      linear-gradient(112deg,
        transparent 0%, transparent 37%,
        rgba(255,255,255,0) 43%,
        rgba(255,255,255,.98) 50%,
        rgba(255,255,255,0) 57%,
        transparent 63%, transparent 100%),
      linear-gradient(100deg,
        #fff7a1 0%, #ffd05f 13%, #ff7fc7 29%,
        #d79cff 46%, #55e8ff 64%, #92ffdc 82%, #fff7a1 100%);
    background-size: 320% 100%, 260% 100%;
    background-position: 180% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .54px rgba(255,255,255,.90);
    text-shadow:
      0 0 3px rgba(255,255,255,.42),
      0 0 9px rgba(255,207,84,.70),
      0 0 17px rgba(255,78,183,.78),
      0 0 27px rgba(52,222,255,.82),
      0 0 40px rgba(159,83,255,.56);
    filter:
      saturate(1.34)
      brightness(1.03)
      drop-shadow(0 0 5px rgba(255,199,78,.42))
      drop-shadow(0 0 10px rgba(65,222,255,.32));
    animation:
      leaderboardAccuracyMax 2.45s linear infinite,
      leaderboardAccuracyRoyalAura 1.8s ease-in-out infinite alternate;
    isolation: isolate;
  }

  .leaderboard-accuracy-value.acc-98::before {
    content: '✦';
    font-size: 11px;
    left: -12px;
    top: -8px;
    color: #ffe58e;
    animation: leaderboardAccuracySparkle 1.15s ease-in-out infinite;
  }
  .leaderboard-accuracy-value.acc-98::after {
    content: '✧';
    font-size: 11px;
    right: -12px;
    bottom: -8px;
    color: #8ff4ff;
    animation: leaderboardAccuracySparkle 1.15s ease-in-out .55s infinite;
  }

  .leaderboard-accuracy-value.acc-99 {
    box-sizing: border-box;
    max-width: 100%;
    padding: .07em .18em .11em;
    letter-spacing: .04em;
    transform-origin: center;
    background-image:
      linear-gradient(105deg, transparent 0%, transparent 34%, rgba(255,255,255,.98) 48%, transparent 62%, transparent 100%),
      linear-gradient(100deg, #fffbd5 0%, #ffd36e 16%, #ff9bd3 34%, #ddb3ff 52%, #72ebff 70%, #b7ffe0 86%, #fffbd5 100%);
    background-size: 300% 100%, 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .66px rgba(255,255,255,1);
    text-shadow:
      0 0 4px rgba(255,255,255,.88),
      0 0 11px rgba(255,211,103,.72),
      0 0 19px rgba(255,101,195,.78),
      0 0 29px rgba(78,224,255,.84),
      0 0 42px rgba(175,106,255,.50);
    filter:
      saturate(1.36)
      brightness(1.14)
      drop-shadow(0 0 5px rgba(255,211,103,.42))
      drop-shadow(0 0 11px rgba(78,224,255,.36));
    animation:
      leaderboardAccuracyMax 2.15s linear infinite,
      leaderboardAccuracyRoyalAura 1.55s ease-in-out infinite alternate;
    isolation: isolate;
  }

  .leaderboard-accuracy-value.acc-99::before {
    content: '✦';
    font-size: 12px;
    left: -13px;
    top: -9px;
    color: #ffe77f;
    animation: leaderboardAccuracySparkle 1.05s ease-in-out infinite;
  }
  .leaderboard-accuracy-value.acc-99::after {
    content: '✧';
    font-size: 12px;
    right: -13px;
    bottom: -9px;
    color: #83f5ff;
    animation: leaderboardAccuracySparkle 1.05s ease-in-out .5s infinite;
  }

  .leaderboard-accuracy-value.acc-97 { font-size: 1.27em; }
  .leaderboard-accuracy-value.acc-98 { font-size: 1.34em; }
  .leaderboard-accuracy-value.acc-99 { font-size: 1.42em; }

  @media (max-width: 700px) {
    .leaderboard-mobile-metric .leaderboard-accuracy-value.acc-98,
    .leaderboard-mobile-metric .leaderboard-accuracy-value.acc-99 {
      padding-left: .10em;
      padding-right: .10em;
      letter-spacing: .02em;
    }
    .leaderboard-mobile-metric .leaderboard-accuracy-value.acc-98::before,
    .leaderboard-mobile-metric .leaderboard-accuracy-value.acc-99::before { left: -9px; }
    .leaderboard-mobile-metric .leaderboard-accuracy-value.acc-98::after,
    .leaderboard-mobile-metric .leaderboard-accuracy-value.acc-99::after { right: -9px; }
  }

  @media (min-width: 901px) {
    .leaderboard-accuracy-value.acc-97 {
      -webkit-text-stroke: .43px rgba(255,255,255,.80);
      text-shadow: 0 0 4px rgba(255,255,255,.24), 0 0 10px rgba(255,111,199,.42), 0 0 19px rgba(92,227,255,.46), 0 0 28px rgba(177,116,255,.22);
      filter: saturate(1.14) brightness(.99);
    }
    .leaderboard-accuracy-value.acc-98 {
      -webkit-text-stroke: .43px rgba(255,255,255,.80);
      text-shadow:
        0 0 2px rgba(255,255,255,.20),
        0 0 8px rgba(255,207,84,.52),
        0 0 15px rgba(255,78,183,.60),
        0 0 24px rgba(52,222,255,.65),
        0 0 36px rgba(159,83,255,.36);
      filter:
        saturate(1.28)
        brightness(.99)
        drop-shadow(0 0 4px rgba(255,199,78,.30))
        drop-shadow(0 0 9px rgba(65,222,255,.25));
    }
    .leaderboard-accuracy-value.acc-99 {
      -webkit-text-stroke: .50px rgba(255,255,255,.88);
      text-shadow:
        0 0 3px rgba(255,255,255,.38),
        0 0 9px rgba(255,211,103,.58),
        0 0 17px rgba(255,101,195,.64),
        0 0 26px rgba(78,224,255,.68),
        0 0 38px rgba(175,106,255,.40);
      filter:
        saturate(1.30)
        brightness(1.01)
        drop-shadow(0 0 4px rgba(255,211,103,.30))
        drop-shadow(0 0 9px rgba(78,224,255,.27));
    }
  }

  .profile-accuracy-value.acc-97 {
    background: linear-gradient(94deg, #fff0a9 0%, #ff9fd1 30%, #d1a5ff 58%, #76ebff 82%, #c5ffe4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .38px rgba(255,255,255,.84);
    text-shadow: 0 0 6px rgba(255,255,255,.34), 0 0 13px rgba(255,102,188,.50), 0 0 23px rgba(76,223,255,.48);
  }

  .profile-accuracy-value.acc-97::before,
  .profile-accuracy-value.acc-98::before,
  .profile-accuracy-value.acc-98::after,
  .profile-accuracy-value.acc-99::before,
  .profile-accuracy-value.acc-99::after {
    position: absolute;
    pointer-events: none;
    line-height: 1;
  }

  .profile-accuracy-value.acc-97::before {
    content: '✦';
    left: -10px;
    top: -6px;
    font-size: 7px;
    color: #fff1a3;
    text-shadow: 0 0 8px rgba(255,255,255,.95), 0 0 13px rgba(79,225,255,.70);
    animation: profileAccuracySparkle 1.8s ease-in-out infinite;
  }

  .profile-accuracy-value.acc-98 {
    padding: 0 .12em;
    background:
      linear-gradient(110deg, transparent 0 36%, rgba(255,255,255,.98) 49%, transparent 62% 100%) 0 0 / 270% 100%,
      linear-gradient(96deg, #fff8b7 0%, #ffd163 14%, #ff78c2 31%, #c88fff 50%, #57e8ff 69%, #91ffdc 86%, #fff8b7 100%) 0 0 / 230% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .43px rgba(255,255,255,.91);
    text-shadow:
      0 0 4px rgba(255,255,255,.46),
      0 0 11px rgba(255,199,69,.66),
      0 0 19px rgba(255,69,177,.72),
      0 0 29px rgba(50,222,255,.72);
    animation: profileAccuracyValueMax 2.8s linear infinite;
  }

  .profile-accuracy-value.acc-98::before {
    content: '✦';
    left: -12px;
    top: -8px;
    font-size: 9px;
    color: #ffe57e;
    text-shadow: 0 0 8px #fff, 0 0 15px rgba(255,186,63,.92), 0 0 22px rgba(255,74,181,.58);
    animation: profileAccuracySparkle 1.25s ease-in-out infinite;
  }
  .profile-accuracy-value.acc-98::after {
    content: '✧';
    right: -12px;
    bottom: -8px;
    font-size: 10px;
    color: #7df2ff;
    text-shadow: 0 0 8px #fff, 0 0 15px rgba(48,220,255,.96), 0 0 22px rgba(151,76,255,.58);
    animation: profileAccuracySparkle 1.25s ease-in-out .6s infinite;
  }

  .profile-accuracy-value.acc-99 {
    padding: 0 .14em;
    background:
      linear-gradient(105deg, transparent 0 34%, rgba(255,255,255,.98) 48%, transparent 62% 100%) 0 0 / 300% 100%,
      linear-gradient(96deg, #fffbd5 0%, #ffd36e 16%, #ff9bd3 34%, #ddb3ff 52%, #72ebff 70%, #b7ffe0 86%, #fffbd5 100%) 0 0 / 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .52px rgba(255,255,255,.98);
    text-shadow: 0 0 5px rgba(255,255,255,.72), 0 0 13px rgba(255,211,103,.76), 0 0 23px rgba(255,101,195,.80), 0 0 34px rgba(78,224,255,.78), 0 0 46px rgba(175,106,255,.42);
    animation: profileAccuracyValueMax 2.25s linear infinite;
    filter: saturate(1.24) brightness(1.08);
  }

  .profile-accuracy-value.acc-99::before {
    content: '✦';
    left: -13px;
    top: -9px;
    font-size: 10px;
    color: #ffe57e;
    text-shadow: 0 0 8px #fff, 0 0 16px rgba(255,196,64,.96), 0 0 24px rgba(255,74,181,.64);
    animation: profileAccuracySparkle 1.05s ease-in-out infinite;
  }
  .profile-accuracy-value.acc-99::after {
    content: '✧';
    right: -13px;
    bottom: -9px;
    font-size: 11px;
    color: #7df2ff;
    text-shadow: 0 0 8px #fff, 0 0 16px rgba(48,220,255,.98), 0 0 24px rgba(151,76,255,.64);
    animation: profileAccuracySparkle 1.05s ease-in-out .52s infinite;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-97,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99 {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    isolation: isolate !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-97 {
    background:
      linear-gradient(180deg, rgba(8, 13, 23, .88), rgba(4, 7, 13, .96)) padding-box,
      linear-gradient(115deg, rgba(255, 240, 181, .58), rgba(255, 111, 190, .46), rgba(119, 229, 255, .40), rgba(134, 255, 215, .34)) border-box !important;
    background-size: 100% 100%, 220% 220% !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      inset 0 -1px 0 rgba(119,229,255,.13),
      0 0 0 1px rgba(255,255,255,.018),
      0 0 28px rgba(255, 111, 190, .13),
      0 0 44px rgba(91, 218, 255, .11) !important;
    animation: profileAccuracyBorderFlow 8s ease-in-out infinite alternate !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98 {
    background:
      linear-gradient(180deg, rgba(8, 13, 23, .90), rgba(4, 7, 13, .97)) padding-box,
      linear-gradient(108deg, rgba(255, 251, 212, .74), rgba(255, 210, 78, .68), rgba(255, 94, 183, .62), rgba(178, 119, 255, .58), rgba(58, 225, 255, .58), rgba(125, 255, 212, .48), rgba(255, 239, 140, .68)) border-box !important;
    background-size: 100% 100%, 300% 300% !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      inset 0 -1px 0 rgba(87,232,255,.18),
      0 0 0 1px rgba(255,255,255,.025),
      0 0 26px rgba(255, 205, 78, .14),
      0 0 46px rgba(255, 78, 176, .18),
      0 0 66px rgba(57, 225, 255, .15) !important;
    animation:
      profileAccuracyBorderMax 5.4s linear infinite,
      profileAccuracyHeroPulse 2.8s ease-in-out infinite alternate !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99 {
    background:
      linear-gradient(180deg, rgba(8, 13, 23, .91), rgba(4, 7, 13, .98)) padding-box,
      linear-gradient(105deg, rgba(255, 251, 212, .86), rgba(255, 211, 86, .78), rgba(255, 92, 183, .72), rgba(190, 126, 255, .68), rgba(72, 231, 255, .70), rgba(139, 255, 218, .56), rgba(255, 239, 140, .78)) border-box !important;
    background-size: 100% 100%, 340% 340% !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.085),
      inset 0 -1px 0 rgba(87,232,255,.23),
      0 0 0 1px rgba(255,255,255,.035),
      0 0 30px rgba(255, 207, 74, .20),
      0 0 54px rgba(255, 62, 174, .25),
      0 0 76px rgba(31, 220, 255, .20),
      0 0 96px rgba(140, 55, 255, .12) !important;
    animation:
      profileAccuracyBorderMax 4.8s linear infinite,
      profileAccuracyHeroPulse 2.4s ease-in-out infinite alternate !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-97.achievement-profile-effect-plays-1000,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-97.achievement-profile-effect-plays-1500,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-97.achievement-profile-effect-plays-2000 {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 -1px 0 rgba(119,229,255,.15),
      0 0 28px rgba(255, 199, 80, .11),
      0 0 42px rgba(255, 91, 188, .17),
      0 0 60px rgba(64, 224, 255, .14) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-1000,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-1500,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-2000 {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 -1px 0 rgba(87,232,255,.20),
      0 0 28px rgba(255, 207, 74, .18),
      0 0 50px rgba(255, 62, 174, .22),
      0 0 70px rgba(31, 220, 255, .18),
      0 0 92px rgba(140, 55, 255, .10) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-1000,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-1500,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-2000 {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      inset 0 -1px 0 rgba(87,232,255,.24),
      0 0 32px rgba(255, 211, 84, .22),
      0 0 56px rgba(255, 62, 174, .27),
      0 0 80px rgba(31, 220, 255, .22),
      0 0 104px rgba(140, 55, 255, .14) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-97::before,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98::before,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99::before {
    z-index: 0 !important;
    opacity: .86 !important;
    background:
      linear-gradient(90deg, rgba(91,179,255,.30), transparent 2px),
      radial-gradient(ellipse at 6% 14%, rgba(91,179,255,.14), transparent 31%),
      radial-gradient(ellipse at 92% 3%, rgba(255,118,196,.11), transparent 35%),
      radial-gradient(ellipse at 62% 110%, rgba(141,124,255,.085), transparent 36%) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98::before {
    opacity: .94 !important;
    background:
      linear-gradient(90deg, rgba(255,211,86,.42), transparent 2px),
      radial-gradient(ellipse at 7% 13%, rgba(255,211,86,.16), transparent 28%),
      radial-gradient(ellipse at 93% 2%, rgba(255,92,183,.16), transparent 32%),
      radial-gradient(ellipse at 58% 110%, rgba(54,225,255,.13), transparent 36%) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99::before {
    opacity: .98 !important;
    background:
      linear-gradient(90deg, rgba(255,211,86,.48), transparent 2px),
      radial-gradient(ellipse at 7% 13%, rgba(255,211,86,.19), transparent 28%),
      radial-gradient(ellipse at 93% 2%, rgba(255,92,183,.18), transparent 32%),
      radial-gradient(ellipse at 58% 110%, rgba(54,225,255,.16), transparent 36%) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-97 .profile-main .avatar,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-97.achievement-profile-effect-plays-1000 .profile-main .avatar,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-97.achievement-profile-effect-plays-1500 .profile-main .avatar,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-97.achievement-profile-effect-plays-2000 .profile-main .avatar {
    border-color: rgba(255, 244, 187, .66) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 18px rgba(255, 105, 190, .30), 0 0 34px rgba(72, 225, 255, .24) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98 .profile-main .avatar,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-1000 .profile-main .avatar,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-1500 .profile-main .avatar,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98.achievement-profile-effect-plays-2000 .profile-main .avatar {
    border-color: rgba(255, 248, 194, .84) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 16px rgba(255, 205, 71, .34), 0 0 30px rgba(255, 62, 173, .32), 0 0 46px rgba(32, 220, 255, .30) !important;
    animation: profileAccuracyAvatarPulse 2.6s ease-in-out infinite alternate !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99 .profile-main .avatar,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-1000 .profile-main .avatar,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-1500 .profile-main .avatar,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99.achievement-profile-effect-plays-2000 .profile-main .avatar {
    border-color: rgba(255, 249, 201, .92) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 0 18px rgba(255, 211, 83, .38), 0 0 34px rgba(255, 62, 173, .36), 0 0 52px rgba(32, 220, 255, .34), 0 0 68px rgba(169, 78, 255, .18) !important;
    animation: profileAccuracyAvatarPulse 2.2s ease-in-out infinite alternate !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-97 .profile-name {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: 0 0 12px rgba(255, 129, 199, .18), 0 0 22px rgba(83, 224, 255, .13) !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98 .profile-name {
    background: linear-gradient(100deg, #fffbd5 0%, #ffd767 17%, #ff91ca 35%, #d6adff 53%, #74efff 72%, #a7ffdf 88%, #fffbd5 100%) !important;
    background-size: 250% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .35px rgba(255,255,255,.72) !important;
    text-shadow: 0 0 14px rgba(255, 105, 190, .18), 0 0 24px rgba(73, 224, 255, .16) !important;
    animation: profileAccuracyNameFlow 5s linear infinite !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99 .profile-name {
    background: linear-gradient(96deg, #fffbd5 0%, #ffd36e 16%, #ff9bd3 34%, #ddb3ff 52%, #72ebff 70%, #b7ffe0 86%, #fffbd5 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .40px rgba(255,255,255,.80) !important;
    text-shadow: 0 0 13px rgba(255, 105, 187, .24), 0 0 23px rgba(179, 99, 255, .20), 0 0 33px rgba(94,222,255,.14) !important;
    animation: profilePlayCountFlow 4.8s linear infinite !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-97 .profile-accuracy-value.acc-97,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98 .profile-accuracy-value.acc-98,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99 .profile-accuracy-value.acc-99 {
    filter: drop-shadow(0 0 8px rgba(255,255,255,.10));
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-97 .profile-prestige-star:nth-child(n+5) {
    display: none !important;
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98 .profile-prestige-star,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99 .profile-prestige-star {
    opacity: .95 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .leaderboard-accuracy-value.acc-98,
    .leaderboard-accuracy-value.acc-99,
    .leaderboard-accuracy-value.acc-97::before,
    .leaderboard-accuracy-value.acc-98::before,
    .leaderboard-accuracy-value.acc-98::after,
    .leaderboard-accuracy-value.acc-99::before,
    .leaderboard-accuracy-value.acc-99::after,
    .profile-accuracy-value.acc-97::before,
    .profile-accuracy-value.acc-98,
    .profile-accuracy-value.acc-98::before,
    .profile-accuracy-value.acc-98::after,
    .profile-accuracy-value.acc-99,
    .profile-accuracy-value.acc-99::before,
    .profile-accuracy-value.acc-99::after,
    #player-detail-view .profile-hero.achievement-profile-effect-accuracy-97,
    #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98,
    #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99,
    #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98 .profile-main .avatar,
    #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99 .profile-main .avatar,
    #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98 .profile-name,
    #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99 .profile-name {
      animation: none !important;
    }
  }



  /* Keep leaderboard metric scaling independent from the equipable profile-effect slot.
     Equipped accuracy effects reuse these profile layers on desktop and mobile. */
  #tab-leaderboard .leaderboard-accuracy-value.acc-97,
  #tab-leaderboard .leaderboard-primary-metric .leaderboard-accuracy-value.acc-97,
  #tab-leaderboard .leaderboard-metric-accuracy .leaderboard-accuracy-value.acc-97,
  #tab-leaderboard .leaderboard-mobile-metric .leaderboard-accuracy-value.acc-97 {
    font-size: 1.27em !important;
  }

  #tab-leaderboard .leaderboard-accuracy-value.acc-98,
  #tab-leaderboard .leaderboard-primary-metric .leaderboard-accuracy-value.acc-98,
  #tab-leaderboard .leaderboard-metric-accuracy .leaderboard-accuracy-value.acc-98,
  #tab-leaderboard .leaderboard-mobile-metric .leaderboard-accuracy-value.acc-98 {
    font-size: 1.34em !important;
  }

  #tab-leaderboard .leaderboard-accuracy-value.acc-99,
  #tab-leaderboard .leaderboard-primary-metric .leaderboard-accuracy-value.acc-99,
  #tab-leaderboard .leaderboard-metric-accuracy .leaderboard-accuracy-value.acc-99,
  #tab-leaderboard .leaderboard-mobile-metric .leaderboard-accuracy-value.acc-99 {
    font-size: 1.42em !important;
  }

  #tab-leaderboard .leaderboard-primary-metric .leaderboard-accuracy-value.acc-97,
  #tab-leaderboard .leaderboard-primary-metric .leaderboard-accuracy-value.acc-98,
  #tab-leaderboard .leaderboard-primary-metric .leaderboard-accuracy-value.acc-99 {
    transform-origin: center !important;
  }

  @media (max-width: 700px) {
    #tab-leaderboard .leaderboard-mobile-metric .leaderboard-accuracy-value.acc-97 {
      font-size: 1.22em !important;
    }
    #tab-leaderboard .leaderboard-mobile-metric .leaderboard-accuracy-value.acc-98 {
      font-size: 1.28em !important;
    }
    #tab-leaderboard .leaderboard-mobile-metric .leaderboard-accuracy-value.acc-99 {
      font-size: 1.34em !important;
      letter-spacing: .018em !important;
      padding-left: .08em !important;
      padding-right: .08em !important;
    }
  }

  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-97 .profile-prestige-accuracy,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-98 .profile-prestige-accuracy,
  #player-detail-view .profile-hero.achievement-profile-effect-accuracy-99 .profile-prestige-accuracy {
    display: block !important;
  }

  #player-detail-view .profile-stats-v182 .profile-accuracy-stat,
  #player-detail-view .profile-stats-v182 .profile-accuracy-stat strong,
  #player-detail-view .profile-stats-v182 .profile-accuracy-value {
    overflow: visible !important;
  }

  #player-detail-view .profile-stats-v182 .profile-accuracy-value.acc-97 {
    background: linear-gradient(94deg, #fff0a9 0%, #ff9fd1 30%, #d1a5ff 58%, #76ebff 82%, #c5ffe4 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-stroke: .38px rgba(255,255,255,.84) !important;
    text-shadow: 0 0 6px rgba(255,255,255,.34), 0 0 13px rgba(255,102,188,.50), 0 0 23px rgba(76,223,255,.48) !important;
  }

  #player-detail-view .profile-stats-v182 .profile-accuracy-value.acc-98 {
    padding: 0 .12em !important;
    background:
      linear-gradient(110deg, transparent 0 36%, rgba(255,255,255,.98) 49%, transparent 62% 100%) 0 0 / 270% 100%,
      linear-gradient(96deg, #fff8b7 0%, #ffd163 14%, #ff78c2 31%, #c88fff 50%, #57e8ff 69%, #91ffdc 86%, #fff8b7 100%) 0 0 / 230% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-stroke: .43px rgba(255,255,255,.91) !important;
    text-shadow:
      0 0 4px rgba(255,255,255,.46),
      0 0 11px rgba(255,199,69,.66),
      0 0 19px rgba(255,69,177,.72),
      0 0 29px rgba(50,222,255,.72) !important;
    animation: profileAccuracyValueMax 2.8s linear infinite !important;
  }

  #player-detail-view .profile-stats-v182 .profile-accuracy-value.acc-99 {
    padding: 0 .14em !important;
    background:
      linear-gradient(105deg, transparent 0 34%, rgba(255,255,255,.98) 48%, transparent 62% 100%) 0 0 / 300% 100%,
      linear-gradient(96deg, #fffbd5 0%, #ffd36e 16%, #ff9bd3 34%, #ddb3ff 52%, #72ebff 70%, #b7ffe0 86%, #fffbd5 100%) 0 0 / 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-stroke: .52px rgba(255,255,255,.98) !important;
    text-shadow:
      0 0 5px rgba(255,255,255,.72),
      0 0 13px rgba(255,211,103,.76),
      0 0 23px rgba(255,101,195,.80),
      0 0 34px rgba(78,224,255,.78),
      0 0 46px rgba(175,106,255,.42) !important;
    filter: saturate(1.24) brightness(1.08) !important;
    animation: profileAccuracyValueMax 2.25s linear infinite !important;
  }

  @media (max-width: 700px) {
    #player-detail-view .profile-stats-v182 .profile-accuracy-value.acc-98,
    #player-detail-view .profile-stats-v182 .profile-accuracy-value.acc-99 {
      letter-spacing: .005em !important;
      padding-left: .06em !important;
      padding-right: .06em !important;
    }
    #player-detail-view .profile-stats-v182 .profile-accuracy-value.acc-98::before,
    #player-detail-view .profile-stats-v182 .profile-accuracy-value.acc-99::before { left: -9px !important; }
    #player-detail-view .profile-stats-v182 .profile-accuracy-value.acc-98::after,
    #player-detail-view .profile-stats-v182 .profile-accuracy-value.acc-99::after { right: -9px !important; }
  }

  /* v30.0.251: keep the final high-accuracy override below its motion rule so
     the operating-system accessibility preference remains authoritative. */
  @media (prefers-reduced-motion: reduce) {
    #player-detail-view .profile-stats-v182 .profile-accuracy-value.acc-98,
    #player-detail-view .profile-stats-v182 .profile-accuracy-value.acc-99 {
      animation: none !important;
    }
  }

/* v30.1.54 Phase 37.5: Profile / Song ranking alignment and overflow audit.
   This is a bounded presentation repair: preserve row density and data semantics while
   explicitly centering rank/result columns, containing long profile song titles, and making
   Top Plays metadata deterministic across desktop and mobile. */
#player-detail-view .all-plays-table th.profile-position-column,
#player-detail-view .all-plays-table td.profile-position-cell,
#player-detail-view .all-plays-table th.profile-rank-letter-column,
#player-detail-view .all-plays-table td.profile-rank-letter-cell,
#song-detail-view .song-ranking-table th.song-ranking-position-head,
#song-detail-view .song-ranking-table td.song-ranking-position-cell,
#song-detail-view .song-ranking-table th.song-ranking-rank-letter-head,
#song-detail-view .song-ranking-table td.song-ranking-rank-letter-cell {
  text-align: center !important;
  vertical-align: middle !important;
}

#player-detail-view .all-plays-table th.profile-position-column,
#player-detail-view .all-plays-table td.profile-position-cell {
  width: 54px !important;
  min-width: 54px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  font-variant-numeric: tabular-nums !important;
}

#player-detail-view .all-plays-table th.profile-rank-letter-column,
#player-detail-view .all-plays-table td.profile-rank-letter-cell,
#song-detail-view .song-ranking-table th.song-ranking-rank-letter-head,
#song-detail-view .song-ranking-table td.song-ranking-rank-letter-cell {
  min-width: 62px !important;
  font-variant-numeric: tabular-nums !important;
}

#song-detail-view .song-ranking-table col.song-ranking-col-history {
  width: 48px;
}

@media (min-width: 701px) {
  /* Preserve the reviewed data-column room after adding the dedicated history action column. */
  #song-detail-view .song-ranking-table {
    min-width: 808px !important;
  }
}

#song-detail-view .song-ranking-table th.song-ranking-history-head,
#song-detail-view .song-ranking-table td.song-ranking-history-cell {
  width: 48px !important;
  min-width: 48px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Long player-page titles stay one reviewed row high. The mask only affects text that reaches
   the right edge, so short titles remain visually unchanged. */
#player-detail-view .profile-song-title-fade {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}

/* Top Plays second line no longer reserves a phantom chart-rank column. */
#player-detail-view .top-plays-table .top-play-song-sub {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#player-detail-view .top-plays-table .top-play-stars {
  grid-column: auto !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

#player-detail-view .top-plays-table .top-play-song-meta {
  grid-column: auto !important;
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  white-space: nowrap !important;
}

#player-detail-view .top-plays-table .top-play-song-artist,
#player-detail-view .top-plays-table .top-play-song-mapper {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#player-detail-view .top-plays-table .top-play-song-artist {
  flex: 0 1 auto !important;
}

#player-detail-view .top-plays-table .top-play-song-mapper {
  flex: 1 1 auto !important;
}

#player-detail-view .top-plays-table .top-play-song-mapper::before {
  content: "·";
  display: inline-block;
  margin: 0 7px;
  color: rgba(151, 168, 196, .58);
}

/* Song overview rows use a real action slot instead of positioning history relative to
   nickname/score text, so every button shares the same x-coordinate. */
#song-detail-view .song-ranking-row {
  grid-template-columns: 30px minmax(0, 1fr) minmax(72px, auto) 30px !important;
  gap: 8px !important;
}

#song-detail-view .song-ranking-history-action,
#song-detail-view .song-recent-history-action {
  justify-self: end !important;
  align-self: center !important;
}

#song-detail-view .song-recent-row {
  grid-template-columns: 42px minmax(0, 1fr) auto 30px !important;
}

@media (max-width: 700px) {
  /* Keep mobile Top Plays compact: title stays one line; metadata is intentionally two lines
     (artist then mapper) rather than wrapping at arbitrary punctuation. */
  #player-detail-view .top-plays-table .top-play-song-main {
    grid-template-columns: 42px 74px minmax(0, 1fr) auto !important;
    column-gap: 9px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  #player-detail-view .top-plays-table .top-play-song-title {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  #player-detail-view .top-plays-table .top-play-song-sub {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 9px !important;
    margin-top: 6px !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  #player-detail-view .top-plays-table .top-play-song-meta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: minmax(0, auto) !important;
    align-items: start !important;
    gap: 2px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  #player-detail-view .top-plays-table .top-play-song-artist,
  #player-detail-view .top-plays-table .top-play-song-mapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #player-detail-view .top-plays-table .top-play-song-mapper::before {
    content: none !important;
  }

  #song-detail-view .song-ranking-table tbody tr {
    grid-template-columns: 38px 34px minmax(0, 1fr) minmax(64px, auto) 32px !important;
    grid-template-areas:
      "rank avatar player pp history"
      "rank avatar score accuracy history" !important;
  }

  #song-detail-view .song-ranking-table tbody td.song-ranking-history-cell {
    grid-area: history !important;
    display: flex !important;
    align-self: stretch !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  #song-detail-view .song-ranking-table tbody td.song-ranking-position-cell {
    text-align: center !important;
  }

  #song-detail-view .song-ranking-row {
    grid-template-columns: 28px minmax(0, 1fr) minmax(68px, auto) 28px !important;
    gap: 7px !important;
  }

  #song-detail-view .song-recent-row {
    grid-template-columns: 38px minmax(0, 1fr) minmax(68px, auto) 28px !important;
    gap: 7px !important;
  }
}



/* v30.1.54 Phase 37.5 Fix2: contain the legacy Song Hero decoration.
   The hero's ::before uses inset:-20% for a faint background effect. The old
   overflow:visible contract let that decorative pseudo-element enlarge the
   document/body scroll width (1440px viewport -> 1616px document) even though
   every real hero child stayed inside its reviewed bounds. Clip only at the
   outer hero boundary; inner cover/title/difficulty/radar layout remains unchanged. */
#song-detail-view .song-hero {
  overflow: clip !important;
}

/* v30.1.56 Phase 37.7 Fix1: Top Plays uses one shared two-row grid.
   Rank occupies the left slot across both rows; difficulty/stars and
   title/artist+mapper are true vertical column pairs rather than two
   independently aligned row containers. */
#player-detail-view .top-plays-table .top-play-song-layout {
  display: grid !important;
  grid-template-columns: 42px 74px minmax(0, 1fr) auto !important;
  grid-template-rows: minmax(22px, auto) minmax(18px, auto) !important;
  column-gap: 10px !important;
  row-gap: 5px !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

#player-detail-view .top-plays-table .top-play-song-layout .top-play-chart-rank {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}

#player-detail-view .top-plays-table .top-play-song-layout .top-play-difficulty {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

#player-detail-view .top-plays-table .top-play-song-layout .top-play-stars {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: start !important;
  align-self: center !important;
  min-width: 0 !important;
}

#player-detail-view .top-plays-table .top-play-song-layout .top-play-song-title {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

#player-detail-view .top-plays-table .top-play-song-layout .top-play-song-meta {
  grid-column: 3 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  white-space: nowrap !important;
}

#player-detail-view .top-plays-table .top-play-song-layout .top-play-history-action {
  grid-column: 4 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: end !important;
}

@media (max-width: 700px) {
  #player-detail-view .top-plays-table .top-play-song-layout {
    grid-template-columns: 42px 74px minmax(0, 1fr) auto !important;
    column-gap: 9px !important;
    row-gap: 5px !important;
  }

  #player-detail-view .top-plays-table .top-play-song-layout .top-play-song-meta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: minmax(0, auto) !important;
    align-items: start !important;
    gap: 2px !important;
    white-space: normal !important;
  }

  #player-detail-view .top-plays-table .top-play-song-layout .top-play-song-artist,
  #player-detail-view .top-plays-table .top-play-song-layout .top-play-song-mapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #player-detail-view .top-plays-table .top-play-song-layout .top-play-song-mapper::before {
    content: none !important;
  }
}

/* Phase 40: account connections and Google branding. */
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/google-sans.ttf') format('truetype'); }
.auth-google-oauth-button {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 46px; box-sizing: border-box; padding: 12px;
  border: 1px solid #747775; border-radius: 11px; background: #fff; color: #1f1f1f;
  font: 500 14px/20px 'Google Sans', Arial, sans-serif; text-decoration: none;
}
.auth-google-oauth-button img { width: 20px; height: 20px; flex: 0 0 20px; }
.auth-google-oauth-button:hover { background: #f2f2f2; }
.auth-google-oauth-button:focus-visible { outline: 3px solid #4285f4; outline-offset: 3px; }
.modal-backdrop.account-settings-open { z-index: 2400; }
.account-settings { display: grid; gap: 16px; overflow-wrap: anywhere; }
.account-provider, .account-confirm { border: 1px solid rgba(160,180,220,.35); border-radius: 12px; padding: 16px; }
.account-provider p, .account-confirm p { margin: 10px 0; }
.account-status { margin-left: 12px; font-size: .85rem; opacity: .85; }
.account-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.account-settings button {
  min-height: 44px; padding: 8px 14px; border: 1px solid #465474; border-radius: 8px;
  background: #162137; color: #f4f6ff; font: inherit; font-weight: 600; cursor: pointer;
}
.account-settings button:hover { background: #233451; }
.account-settings button:focus-visible { outline: 3px solid #55d6ff; outline-offset: 3px; }
.account-settings #account-confirm-google { background: #4559b8; border-color: #7f92ea; }
.account-settings #account-confirm-google:hover { background: #5269cd; }
.account-settings #account-unlink-google { color: #ffc3c3; border-color: #92595d; }
.account-settings button:disabled { opacity: .5; cursor: wait; }
.account-result { margin: 0; color: #ffcf98; }
.account-policy-links { font-size: .85rem; }