/* ============================================================
   APPEND BLOCK — pindahan dari critical.css inline
   Append seluruh isi file ini ke dashboard.css (di mana saja,
   lebih disarankan di paling atas).

   Style ini DIBUTUHKAN tapi TIDAK perlu inline di first paint
   karena hanya tampil setelah dashboard load atau saat user
   interact (token widget, content loader, countdown banner,
   timer card transition).
   ============================================================ */

/* --- Variable tambahan yang sebelumnya ada di critical --- */
:root {
  --surface-2: #1a1a24;
  --border-2: #2a2a3e;
  --accent-soft: #fe2c5533;
  --accent-glow: #fe2c5566;
  --gold: #ffd166;
  --silver: #e5e7eb;
  --bronze: #cd7f32;
}

/* --- Popup default-hidden states (dari critical) --- */
#profileBubble.show { display: block; }
#videoModal.show,
#viralCommand.show,
#compareCommand.show { display: flex; }

/* --- Content loader (muncul setelah dashboard init mulai) --- */
.content-loader[hidden] { display: none; }
.content-loader {
  display: block;
  margin: 4px 0 32px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.content-loader.show {
  opacity: 1;
  transform: translateY(0);
}
.content-loader-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}
.content-loader-head {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.content-loader-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent2);
  box-shadow: 0 0 14px rgba(37,244,238,0.55);
  animation: contentLoaderPulse 1.3s ease-in-out infinite;
}
.content-loader-bars {
  display: grid;
  gap: 10px;
}
.content-loader-bars i {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.content-loader-bars i:nth-child(1) { width: 72%; }
.content-loader-bars i:nth-child(2) { width: 92%; }
.content-loader-bars i:nth-child(3) { width: 58%; }
@keyframes contentLoaderPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* --- Countdown banner (top) --- */
#countdown {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, var(--accent), #ff5577);
  color: white;
  padding: 8px 16px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 500;
  z-index: 500;
  display: none;
  letter-spacing: 0.02em;
}
#countdown.show { display: block; }
#countdown strong {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  margin-left: 6px;
}

/* --- Token widget --- */
.token-widget {
  display: block;
  margin-top: 28px;
  width: 100%;
  max-width: 320px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.token-widget.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.token-widget-label {
  color: #6b6b80;
  font-size: 0.72rem;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.token-widget-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.token-widget-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #f0f0f5;
  padding: 9px 12px;
  border-radius: 8px;
  font-family: 'DM Sans', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  transition: border-color 0.2s, background 0.2s;
  min-width: 0;
}
.token-widget-input:focus {
  outline: none;
  border-color: rgba(254,44,85,0.6);
  background: rgba(255,255,255,0.06);
}
.token-widget-input::placeholder {
  color: rgba(255,255,255,0.3);
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0;
}
.token-widget-submit {
  background: #fe2c55;
  color: white;
  border: none;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.1s;
  flex-shrink: 0;
}
.token-widget-submit:hover { background: #ff4068; }
.token-widget-submit:active { transform: scale(0.95); }
.token-widget-submit:disabled {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.3);
  cursor: not-allowed;
}
.token-widget-submit svg { width: 14px; height: 14px; }
.token-widget-msg {
  color: #fe2c55;
  font-size: 0.7rem;
  text-align: center;
  margin-top: 8px;
  min-height: 1em;
  line-height: 1.4;
}
.token-widget-msg.info { color: rgba(255,255,255,0.4); font-style: italic; }
.token-widget-msg.success { color: #4ade80; }

.token-widget-lockout {
  text-align: center;
  padding: 4px 8px;
  border: 1px solid rgba(254,44,85,0.25);
  border-radius: 10px;
  background: rgba(254,44,85,0.05);
}
.token-widget-lockout .lockout-title {
  color: #fe2c55;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 8px 0 4px;
}
.token-widget-lockout .lockout-sub {
  color: rgba(255,255,255,0.4);
  font-size: 0.7rem;
  line-height: 1.4;
  margin-bottom: 8px;
}
.token-widget-lockout .lockout-countdown {
  font-family: 'Syne', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fe2c55;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

/* --- Checking meeting badge --- */
.timer-card.checking-meeting {
  border-color: rgba(37, 244, 238, 0.4) !important;
  background: linear-gradient(135deg, rgba(37,244,238,0.06), rgba(254,44,85,0.03)) !important;
}
.timer-card.checking-meeting .timer-pulse {
  background: #25f4ee !important;
  box-shadow: 0 0 8px rgba(37, 244, 238, 0.6) !important;
}
.timer-card.checking-meeting .value {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.timer-card.checking-meeting .value.transitioning {
  font-size: 0.9rem !important;
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #25f4ee;
  line-height: 1.3;
}
.timer-card.checking-meeting.fading-out {
  animation: cardFadeOut 0.6s ease forwards;
}
@keyframes cardFadeOut {
  to {
    opacity: 0;
    transform: scale(0.92) translateY(-6px);
  }
}

@media (max-width: 480px) {
  .token-widget { max-width: 280px; margin-top: 22px; }
  .token-widget-input { font-size: 0.75rem; padding: 8px 10px; }
}
  /* ===== HEADER ===== */
  header {
    padding: 24px 32px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
  }
  body.period-picker-open header { z-index: 3000; }
  header.with-countdown { padding-top: 56px; }
  header h1 {
    font-family: 'Syne', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  header h1 span { color: var(--accent); }
  .brand-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .brand-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    color: rgba(240, 240, 245, 0.7);
    font-weight: 400;
    letter-spacing: 0.06em;
  }

  .dropdowns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  .dropdown-label {
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 4px;
  }
  select.month-select {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 28px 8px 12px;
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%236b6b80' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.2s;
  }
  select.month-select:hover, select.month-select:focus {
    border-color: var(--accent);
    outline: none;
  }
  .picker-wrapper {
    position: relative;
    display: inline-block;
  }
  .period-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 132px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
  }
  .period-trigger::after {
    content: '';
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%236b6b80' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  }
  .period-trigger:hover,
  .period-trigger.active {
    border-color: var(--accent);
    background: var(--surface-2);
  }
  .period-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 2500;
    display: none;
    min-width: 268px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  }
  .period-popover.open {
    display: block;
    animation: pickerPopIn 0.15s ease-out;
  }
  .picker-wrapper:last-child .period-popover {
    left: auto;
    right: 0;
  }
  @keyframes pickerPopIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .period-section-label {
    margin-bottom: 8px;
    font-size: 0.65rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .period-month-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 14px;
  }
  .period-year-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    gap: 6px;
    margin-bottom: 16px;
  }
  .period-month-cell,
  .period-year-cell {
    width: 100%;
    min-height: 36px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 6px;
    border-radius: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    text-align: center;
  }
  .period-year-cell {
    min-height: 40px;
    font-size: 0.78rem;
  }
  .period-month-cell:hover:not(.disabled):not(.selected),
  .period-year-cell:hover:not(.disabled):not(.selected) {
    border-color: var(--accent);
    color: var(--accent);
  }
  .period-month-cell.selected,
  .period-year-cell.selected {
    background: rgba(254,44,85,0.12);
    border-color: var(--accent);
    color: var(--accent);
  }
  .period-month-cell.selected:hover,
  .period-year-cell.selected:hover {
    background: rgba(254,44,85,0.12);
    border-color: var(--accent);
    color: var(--accent);
  }
  .period-month-cell.disabled,
  .period-year-cell.disabled {
    color: rgba(240,240,245,0.28);
    border-color: transparent;
    cursor: not-allowed;
    background: rgba(255,255,255,0.02);
  }
  .vs-text {
    font-family: 'Syne', sans-serif;
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  /* ===== MAIN ===== */
  main {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  .empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--muted);
  }
  .empty-state h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.2rem;
    color: var(--text);
    margin-bottom: 8px;
  }

  .dashboard-content {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.38s ease, transform 0.38s ease;
    will-change: opacity, transform;
  }
  .dashboard-content.is-ready {
    opacity: 1;
    transform: translateY(0);
  }
  .dashboard-content.is-loading {
    visibility: hidden;
    pointer-events: none;
  }

  .content-loader {
    margin: 4px 0 32px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.24s ease, transform 0.24s ease;
  }
  .content-loader.show {
    opacity: 1;
    transform: translateY(0);
  }
  .content-loader[hidden] {
    display: none;
  }
  .content-loader-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    overflow: hidden;
    position: relative;
  }
  .content-loader-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.045), transparent);
    transform: translateX(-100%);
    animation: contentLoaderSweep 1.4s ease-in-out infinite;
    pointer-events: none;
  }
  .content-loader-head {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .content-loader-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent2);
    box-shadow: 0 0 14px rgba(37,244,238,0.55);
    animation: contentLoaderPulse 1.3s ease-in-out infinite;
  }
  .content-loader-bars {
    display: grid;
    gap: 10px;
  }
  .content-loader-bars i {
    display: block;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035));
  }
  .content-loader-bars i:nth-child(1) { width: 72%; }
  .content-loader-bars i:nth-child(2) { width: 92%; }
  .content-loader-bars i:nth-child(3) { width: 58%; }
  @keyframes contentLoaderSweep {
    to { transform: translateX(100%); }
  }
  @keyframes contentLoaderPulse {
    0%, 100% { opacity: 0.45; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1.15); }
  }

  /* ===== SUMMARY CARDS ===== */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 32px;
  }
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 16px;
    cursor: pointer;
    transition: border-color 0.25s, transform 0.25s, background 0.25s;
    position: relative;
    overflow: hidden;
  }
  .card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-soft), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  .card:hover { transform: translateY(-3px); border-color: var(--border-2); }
  .card.active { border-color: var(--accent); background: var(--surface-2); }
  .card.active::before { opacity: 1; }

  .card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    position: relative;
  }
  .card-icon {
    width: 16px;
    height: 16px;
    color: var(--muted);
    flex-shrink: 0;
    transition: color 0.25s ease;
  }
  .card-icon svg { width: 100%; height: 100%; display: block; }
  .card.active .card-icon { color: var(--accent); }

  .card .label {
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    transition: color 0.25s ease;
  }
  .card.active .label { color: var(--text); }
  .card .value {
    font-family: 'Syne', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    position: relative;
  }
  .card .delta {
    font-size: 0.72rem;
    margin-top: 6px;
    position: relative;
    font-weight: 500;
  }
  .delta.up { color: var(--accent2); }
  .delta.down { color: var(--accent); }
  .delta.flat { color: var(--muted); }

  /* Timer card (non-clickable, special styling) */
  .card.timer-card {
    cursor: default;
    background: linear-gradient(135deg, var(--surface), rgba(254,44,85,0.08));
    border-color: var(--accent);
    grid-column: span 1;
    animation: timerCardEntry 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
  }
  .card.timer-card:hover { transform: none; }
  .card.timer-card::before { opacity: 1; }
  .card.timer-card .card-icon { color: var(--accent); }
  .card.timer-card .label { color: var(--accent); }
  .card.timer-card .value {
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  .card.timer-card .delta {
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .timer-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: timerPulse 1.5s ease-in-out infinite;
  }
  @keyframes timerPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.2); }
  }
  @keyframes timerCardEntry {
    0% { opacity: 0; transform: scale(0.8) translateY(8px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }

  /* ===== CHART SECTION ===== */
  .chart-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
  }
  .chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 1;
  }
  .chart-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .legend {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: var(--muted);
  }
  .legend span { display: flex; align-items: center; gap: 6px; }
  .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
  .dot.prev { background: #2a2a3e; border: 1px solid #444; }
  .dot.curr { background: var(--accent); }
  .chart-wrapper {
    position: relative;
    height: 320px;
    z-index: 1;
  }
  @media (max-width: 600px) {
    .chart-wrapper { height: 260px; }
  }

  /* ===== SECTION TITLE ===== */
  .section-title {
    font-family: 'Syne', sans-serif;
    font-size: 0.85rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .section-title .sub-note {
    font-size: 0.7rem;
    font-family: 'DM Sans', sans-serif;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted);
    font-weight: 400;
    margin-left: 8px;
    opacity: 0.7;
  }

  /* ===== VIDEOS GRID ===== */
  .videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 60px;
  }
  .video-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.25s, border-color 0.25s;
    cursor: pointer;
    color: inherit;
    display: block;
    position: relative;
  }
  .video-card:hover { transform: translateY(-3px); border-color: var(--border-2); }

  /* Peak video (when no viral) - bigger and highlighted */
  .video-card.peak {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--surface), rgba(254,44,85,0.05));
  }

  .video-thumb {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    aspect-ratio: 16 / 9;
    min-height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    position: relative;
    overflow: hidden;
  }
  .video-thumb-inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
  }
  .video-thumb.cat-edukasi .video-thumb-inner {
    background: linear-gradient(135deg, #133b3a, #1d5c54);
  }
  .video-thumb.cat-produk .video-thumb-inner {
    background: linear-gradient(135deg, #3d1f3f, #6a2d59);
  }
  .video-thumb.cat-news .video-thumb-inner {
    background: linear-gradient(135deg, #2f3340, #575f72);
  }
  .video-thumb.cat-gaming .video-thumb-inner {
    background: linear-gradient(135deg, #1f2b52, #3f4d9a);
  }
  .video-thumb.cat-entertainment .video-thumb-inner {
    background: linear-gradient(135deg, #46222b, #8b3347);
  }
  .video-thumb.cat-default .video-thumb-inner {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
  }
  .video-thumb-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.4));
  }
  .video-thumb-emoji { position: relative; z-index: 1; }

  .views-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: var(--accent);
    color: white;
    font-size: 0.68rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 99px;
    z-index: 3;
    letter-spacing: 0.02em;
  }
  .peak-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, var(--accent), #ff5577);
    color: white;
    font-size: 0.65rem;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
    z-index: 4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(254,44,85,0.4);
  }

  .rank-medal {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    z-index: 5;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  }
  .rank-medal::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: inherit;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.25), inset 0 3px 6px rgba(255,255,255,0.4);
  }
  .rank-medal::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.25);
  }
  .rank-medal span {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
  .rank-medal.custom {
    background: transparent;
    box-shadow: none;
    top: 8px;
    left: 8px;
  }
  .rank-medal.custom::before,
  .rank-medal.custom::after {
    display: none;
  }
  .rank-medal.custom img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }
  .rank-medal.custom.top-1 {
    width: 50px;
    height: 50px;
  }
  .rank-medal.custom.top-2 {
    width: 44px;
    height: 44px;
  }
  .rank-medal.custom.top-3 {
    width: 44px;
    height: 44px;
  }
  .rank-medal.gold {
    background: radial-gradient(circle at 30% 30%, #fff3a8, #ffd166 40%, #d4a017 100%);
    color: #5a3e00;
    box-shadow: 0 0 20px rgba(255,209,102,0.4);
  }
  .rank-medal.silver {
    background: radial-gradient(circle at 30% 30%, #ffffff, #d8dde5 40%, #8b95a4 100%);
    color: #2d3340;
  }
  .rank-medal.bronze {
    background: radial-gradient(circle at 30% 30%, #f5b88c, #cd7f32 40%, #7a4a1a 100%);
    color: #fff;
  }

  .video-info { padding: 14px; }
  .video-info .vtitle {
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .video-info .vmeta {
    font-size: 0.7rem;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .video-info .vtag {
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.65rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* ===== VIDEO POPUP MODAL ===== */
  #videoModal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  #videoModal.show { display: flex; opacity: 1; }
  .modal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    max-width: 600px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s ease;
  }
  #videoModal.show .modal-card { transform: translateY(0) scale(1); }
  .modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0,0,0,0.6);
    border: 1px solid var(--border-2);
    color: var(--text);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s, border-color 0.2s;
    font-size: 1.1rem;
    line-height: 1;
  }
  .modal-close:hover { background: var(--accent); border-color: var(--accent); }
  .modal-thumb {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    border-radius: 18px 18px 0 0;
    position: relative;
    overflow: hidden;
  }
  .modal-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.5));
  }
  .modal-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
  }
  .play-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 8px 32px rgba(254,44,85,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
  }
  .modal-play-overlay:hover .play-btn { transform: scale(1.08); }
  .play-btn::after {
    content: '';
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent white;
    margin-left: 4px;
  }
  .modal-embed {
    width: 100%;
    background: #000;
    min-height: 500px;
    display: none;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    position: relative;
  }
  .modal-embed.show { display: block; }
  .modal-embed iframe {
    width: 100%;
    min-height: 740px;
    border: none;
    display: block;
  }
  .embed-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 0.85rem;
    background: #000;
  }
  .modal-body { padding: 20px 22px 22px; }
  .modal-rank {
    display: inline-block;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 99px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .modal-rank.gold { background: linear-gradient(90deg, #ffd166, #f4a142); color: #5a3e00; }
  .modal-rank.silver { background: linear-gradient(90deg, #e5e7eb, #a8b3c4); color: #2d3340; }
  .modal-rank.bronze { background: linear-gradient(90deg, #cd7f32, #a06030); color: white; }
  .modal-rank.peak { background: linear-gradient(90deg, var(--accent), #ff5577); color: white; }
  .modal-rank.normal { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
  .modal-rank.rank-image {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 5px 12px 5px 7px;
    border: 1px solid transparent;
    line-height: 1;
    vertical-align: middle;
  }
  .modal-rank.rank-image img {
    width: 26px;
    height: 26px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.35));
    flex: 0 0 auto;
  }
  .modal-rank.rank-image.top-1 img {
    width: 30px;
    height: 30px;
  }
  .modal-rank.rank-image.top-1 img { transform: translateY(-4px); }
  .modal-rank.rank-image.top-2 img { transform: translateY(-4px); }
  .modal-rank.rank-image.top-3 img { transform: translateY(-4px); }
  .modal-rank.rank-image .rank-text {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    line-height: 1;
  }
  .modal-rank.rank-image.top-1 {
    background: linear-gradient(90deg, rgba(255,209,102,0.24), rgba(254,44,85,0.16));
    border-color: rgba(255,209,102,0.42);
    color: #ffe6a0;
  }
  .modal-rank.rank-image.top-2 {
    background: linear-gradient(90deg, rgba(229,231,235,0.2), rgba(37,244,238,0.12));
    border-color: rgba(229,231,235,0.34);
    color: #f0f4ff;
  }
  .modal-rank.rank-image.top-3 {
    background: linear-gradient(90deg, rgba(205,127,50,0.23), rgba(254,44,85,0.11));
    border-color: rgba(205,127,50,0.38);
    color: #ffd2a8;
  }
  .modal-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 8px;
    line-height: 1.35;
  }
  .modal-meta {
    color: var(--muted);
    font-size: 0.8rem;
    margin-bottom: 18px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
  }
  .modal-meta .vtag {
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .modal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
    margin-bottom: 18px;
  }
  .modal-stat {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
  }
  .modal-stat .ms-label {
    font-size: 0.65rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
  .modal-stat .ms-value {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1rem;
  }
  .modal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .btn-modal {
    flex: 1;
    min-width: 120px;
    padding: 12px 16px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .btn-modal:hover { border-color: var(--accent); color: var(--accent); }

  /* ===== VIRAL COMMAND ===== */
  .viral-command-hint {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    background: rgba(19,19,26,0.92);
    color: var(--text);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
  }
  .viral-command-hint:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
  }
  .viral-command-hint.compare-command-hint {
    bottom: 68px;
  }
  .viral-command-hint kbd {
    min-width: 24px;
    padding: 3px 6px;
    border: 1px solid var(--border-2);
    border-bottom-color: #44445a;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--accent);
    font-family: 'Syne', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
  }
  #viralCommand,
  #compareCommand {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: none;
    padding: 26px;
    background: rgba(5,5,10,0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  #viralCommand.show,
  #compareCommand.show {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .viral-command-panel {
    width: min(1040px, 100%);
    max-height: calc(100vh - 52px);
    overflow-y: auto;
    border: 1px solid var(--border-2);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 24px 80px rgba(0,0,0,0.62);
    isolation: isolate;
  }
  .viral-command-head {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .viral-command-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
  }
  .viral-command-sub {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.78rem;
  }
  .viral-command-close {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 1px solid var(--border-2);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
  }
  .viral-command-close:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .viral-command-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    padding: 16px 22px 0;
  }
  .viral-command-stat {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    background: var(--surface-2);
    text-align: center;
  }
  .viral-command-stat span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .viral-command-stat strong {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
  }
  .viral-command-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    padding: 18px 22px 22px;
  }
  .viral-command-grid .video-card {
    border-radius: 12px;
  }
  .viral-command-empty {
    padding: 34px 22px 38px;
    color: var(--muted);
    text-align: center;
    font-size: 0.86rem;
  }
  .compare-command-groups {
    margin: 18px 22px 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-2);
  }
  .compare-table-head,
  .compare-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  }
  .compare-table-head {
    position: relative;
    z-index: 10;
    background: var(--surface);
    border-bottom: 2px solid var(--accent);
    min-height: 86px;
  }
  .compare-table-head .compare-month-head {
    align-items: center;
    margin: 0;
    padding: 20px 16px 18px;
    border-bottom: 0;
  }
  .compare-table-head-spacer {
    position: relative;
    background: var(--surface-2);
  }
  .compare-table-head-spacer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--accent);
    transform: translateX(-50%);
  }
  .compare-row {
    align-items: stretch;
    border-bottom: 1px solid var(--border);
  }
  .compare-row:last-child {
    border-bottom: 0;
  }
  .compare-cell {
    min-width: 0;
    padding: 12px 16px;
    background: var(--surface);
  }
  .compare-cell-empty {
    min-height: 100%;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,0.015);
  }
  .compare-row-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(254,44,85,0.08), rgba(254,44,85,0.02));
  }
  .compare-row-divider::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--accent);
    transform: translateX(-50%);
  }
  .compare-month-group {
    min-width: 0;
    padding: 16px;
    background: var(--surface);
  }
  .compare-month-group:first-child {
    border-right: 2px solid var(--accent);
  }
  .compare-month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .compare-month-title {
    font-family: 'Syne', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
  }
  .compare-month-meta {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
  }
  .compare-month-total {
    flex: 0 0 auto;
    color: var(--accent);
    font-family: 'Syne', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
  }
  .compare-month-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .compare-month-grid .video-card {
    overflow: visible;
  }
  .compare-spacer {
    min-height: 1px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    cursor: default;
    pointer-events: none;
  }
  .compare-index-badge {
    position: relative;
    z-index: 8;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    border: 2px solid var(--surface);
    box-shadow: 0 4px 14px rgba(254,44,85,0.45);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
  }
  .compare-row-divider .compare-index-badge {
    display: flex;
  }

  /* ===== FOOTER ===== */
  footer {
    text-align: center;
    padding: 24px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 2;
  }
  .credit-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    display: inline-block;
    transition: opacity 0.2s;
  }
  .credit-link:hover { opacity: 0.85; }

  /* ===== PROFILE BUBBLE ===== */
  #profileBubble {
    position: fixed;
    z-index: 1500;
    display: block;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 18px;
    padding: 18px 18px 16px;
    width: 260px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(254,44,85,0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px) scale(0.95);
    transform-origin: bottom center;
    contain: layout paint;
    will-change: opacity, transform;
    transition: opacity 0.2s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }
  #profileBubble.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
  }
  #profileBubble::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: var(--surface);
    border-right: 1px solid var(--border-2);
    border-bottom: 1px solid var(--border-2);
  }
  .bubble-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }
  .bubble-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--surface-2);
    overflow: hidden;
    border: 2px solid var(--accent);
    flex-shrink: 0;
  }
  .bubble-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .bubble-info { flex: 1; min-width: 0; }
  .bubble-name {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 2px;
    letter-spacing: -0.01em;
  }
  .bubble-tagline {
    font-size: 0.72rem;
    color: var(--muted);
  }
  .bubble-socials {
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
  }
  .bubble-social {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 6px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.2s;
    text-align: center;
    font-size: 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .bubble-social:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
  }
  .bubble-social .bs-platform {
    font-size: 0.6rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .bubble-social:hover .bs-platform { color: var(--accent); }
  .bubble-social .bs-handle {
    font-weight: 600;
    font-size: 0.72rem;
  }

  .live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent2);
    margin-right: 6px;
    animation: livePulse 2s ease-in-out infinite;
  }
  @keyframes livePulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
  }

  @media (max-width: 600px) {
    main { padding: 20px 16px; }
    header { padding: 18px 16px; }
    header h1 { font-size: 1.05rem; }
    .brand-sub { font-size: 0.65rem; }
    .cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .card { padding: 16px 12px; }
    .card .value { font-size: 1.3rem; }
    .videos-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .video-thumb { min-height: 118px; }
    .chart-section { padding: 18px 14px; }
    .dropdowns { width: 100%; justify-content: space-between; }
    select.month-select { font-size: 0.75rem; padding: 7px 26px 7px 10px; }
    .picker-wrapper { flex: 1; }
    .period-trigger { width: 100%; min-width: 0; font-size: 0.75rem; padding: 7px 10px; }
    .period-popover {
      position: fixed;
      top: 0;
      right: 0;
      bottom: auto;
      left: 0;
      width: 100%;
      min-width: 0;
      max-height: 100dvh;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: max(20px, env(safe-area-inset-top)) 16px 24px;
      border-top: 0;
      border-radius: 0 0 16px 16px;
      box-shadow: 0 10px 32px rgba(0,0,0,0.65);
    }
    .viral-command-hint { display: none; }
    #viralCommand,
    #compareCommand {
      padding: 12px;
    }
    #viralCommand.show,
    #compareCommand.show {
      align-items: stretch;
    }
    .viral-command-panel {
      max-height: calc(100vh - 24px);
      border-radius: 14px;
    }
    .viral-command-head {
      padding: 16px;
    }
    .viral-command-stats {
      grid-template-columns: 1fr;
      padding: 14px 16px 0;
    }
    .viral-command-grid {
      grid-template-columns: 1fr;
      padding: 16px;
    }
    .compare-command-groups {
      margin: 16px;
    }
    .compare-table-head,
    .compare-row {
      grid-template-columns: 1fr;
    }
    .compare-table-head {
      position: static;
    }
    .compare-table-head-spacer {
      display: none;
    }
    .compare-row-divider {
      min-height: 38px;
      border-top: 2px solid var(--accent);
      border-bottom: 2px solid var(--accent);
    }
    .compare-row-divider::before {
      display: none;
    }
    .compare-cell {
      padding: 12px;
    }
    .rank-medal { width: 36px; height: 36px; font-size: 0.85rem; top: -6px; left: -6px; }

    /* Mobile base: peak badge & views badge — compact size */
    .peak-badge {
      top: 8px;
      right: 16px;
      font-size: 0.55rem;
      padding: 3px 7px;
      letter-spacing: 0.05em;
      max-width: calc(100% - 24px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .views-badge {
      bottom: 8px;
      right: 16px;
      font-size: 0.55rem;
      padding: 3px 7px;
      letter-spacing: 0.02em;
      max-width: calc(100% - 24px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Mobile fix: custom rank medals (top 1/2/3) on video cards — proportional & precise */
    .rank-medal.custom {
      top: 6px;
      left: 6px;
    }
    .rank-medal.custom.top-1 {
      width: 38px;
      height: 38px;
    }
    .rank-medal.custom.top-2 {
      width: 34px;
      height: 34px;
    }
    .rank-medal.custom.top-3 {
      width: 34px;
      height: 34px;
    }

    /* Mobile fix: rank badge inside viral/compare modal (ALT+SHIFT+V / ALT+SHIFT+C) */
    .modal-rank.rank-image {
      min-height: 30px;
      padding: 4px 10px 4px 6px;
      gap: 6px;
      font-size: 0.65rem;
    }
    .modal-rank.rank-image img {
      width: 22px;
      height: 22px;
      transform: translateY(-3px);
    }
    .modal-rank.rank-image.top-1 img {
      width: 24px;
      height: 24px;
      transform: translateY(-3px);
    }
    .modal-rank.rank-image.top-2 img,
    .modal-rank.rank-image.top-3 img {
      transform: translateY(-3px);
    }
    .modal-rank.rank-image .rank-text {
      min-height: 22px;
    }

    .modal-thumb { height: 160px; font-size: 3rem; }
    .modal-embed iframe { min-height: 580px; }
    #profileBubble { width: 240px; }
  }

  /* Mobile PORTRAIT only: cards are narrowest here (2 columns ~165px wide)
     Push badges further from the right edge so they don't visually hug the corner.
     Landscape mobile keeps the base mobile values above (wider cards = looks fine). */
  @media (max-width: 600px) and (orientation: portrait) {
    .peak-badge {
      right: 22px;
      font-size: 0.52rem;
      padding: 2px 6px;
    }
    .views-badge {
      right: 22px;
      font-size: 0.52rem;
      padding: 2px 6px;
    }
  }