/* ============================================================
   Showroom Tracker Web — Port fidèle de l'app Swift (ShowroomScraper)
   Palette: AppColors.swift
   ============================================================ */

:root {
  --primary: #6b4ed7;
  --primary-light: #9175d6;
  --background: #08080c;
  --surface: #0f101b;
  --surface-variant: #1a1b26;
  --stats-card: #181926;
  --gift-log-bg: #08080c;
  --on-surface: rgba(255,255,255,0.87);
  --on-surface-variant: rgba(255,255,255,0.60);
  --success: #4eb890;
  --warning: #FF9800;
  --error: #F44336;
  --info: #2196F3;
  --gold: #FFD700;
  --star: #FFD700;
  --gachi: #9578d5;
  --yuru: #ad7fb3;
  --user-count: #44a380;
  --daily-count: #715aa6;
  --attention-count: #b69132;
  --rank1: #FFD700;
  --rank2: #C0C0C0;
  --rank3: #CD7F32;
  --divider: #2A2A2A;
  --row-bg: #0A0A0A;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', 'Segoe UI', sans-serif;
  background: var(--background);
  color: var(--on-surface);
  overflow: hidden;
}

button { font-family: inherit; border: none; background: none; color: inherit; cursor: pointer; }
input, select { font-family: inherit; outline: none; }
img { -webkit-user-drag: none; user-select: none; }

/* ---------- App layout ---------- */

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  background: var(--background);
  box-shadow: 0 0 60px rgba(0,0,0,0.8);
}

.view {
  flex: 1;
  display: none;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.view.active { display: flex; }

/* ---------- Splash ---------- */

#splash {
  position: fixed;
  inset: 0;
  background: var(--background);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 1000;
  transition: opacity 0.5s ease;
}
#splash img {
  width: 110px;
  height: 110px;
  border-radius: 26px;
  box-shadow: 0 8px 40px rgba(107,78,215,0.45);
  /* Un tour sur lui-même, une seule fois, à l'ouverture de l'app.
     Doit tenir dans le temps d'affichage du splash (voir ui.js). */
  animation: splash-spin 900ms cubic-bezier(.4, 0, .2, 1) 1;
}
#splash .splash-title { font-size: 26px; font-weight: 800; color: white; letter-spacing: 2px; }
#splash.hidden { opacity: 0; pointer-events: none; }

@keyframes splash-spin {
  from { transform: rotate(0deg) scale(0.9); }
  to   { transform: rotate(360deg) scale(1); }
}

/* Certaines personnes sont gênées par les animations : on respecte leur réglage système */
@media (prefers-reduced-motion: reduce) {
  #splash img { animation: none; }
}

/* ---------- Bottom Tab Bar ---------- */

#tabbar-border {
  height: 2px;
  background: linear-gradient(to right, #0f101b, #181624, #1f1b2a, #201c18, #1f1b2a, #181624, #0f101b);
  flex-shrink: 0;
}

#tabbar {
  display: flex;
  background: #0f101b;
  padding: 6px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-top: 8px;
  color: var(--on-surface-variant);
  font-size: 10px;
}
.tab-item img { width: 30px; height: 30px; object-fit: contain; }
.tab-item.active { color: white; }

/* Onglet à icône emoji (ガイド) : grisé comme les PNG inactifs */
.tab-emoji {
  font-size: 23px;
  line-height: 30px;
  height: 30px;
  filter: grayscale(1);
  opacity: 0.55;
}
.tab-item.active .tab-emoji { filter: none; opacity: 1; }

/* ---------- Floating profile button ---------- */

#profile-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 60;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #9175d6, #6b4ed7);
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.75);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
#profile-btn.guest {
  background: var(--surface-variant);
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.55);
}

/* ---------- Connection view (配信) ---------- */

#conn-header {
  background: var(--surface);
  border-radius: 0 0 18px 18px;
  padding: 14px 16px 16px;
  box-shadow: 0 5px 14px rgba(0,0,0,0.35);
  flex-shrink: 0;
  z-index: 5;
}

.url-input {
  width: 100%;
  background: var(--surface-variant);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 12px;
  color: white;
  font-size: 14px;
  transition: border-color .2s;
}
.url-input:focus { border-color: var(--primary); }
.url-input::placeholder { color: rgba(255,255,255,0.3); }

.url-input:disabled {
  color: var(--on-surface-variant);
  -webkit-text-fill-color: var(--on-surface-variant);
  opacity: 1;
  cursor: default;
}

.stats-grid {
  display: flex;
  gap: 14px;
  padding: 14px 0 10px;
}
.stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: default;
}
.stat-card.clickable { cursor: pointer; }
.stat-card img { width: 30px; height: 30px; object-fit: contain; }
.stat-card .stat-value { font-size: 22px; font-weight: 700; }
.stat-card .stat-label { font-size: 10px; color: var(--on-surface-variant); }

.control-row { display: flex; justify-content: center; padding: 4px 0 6px; }

.big-btn {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  color: white;
  font-size: 21px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform .15s ease, opacity .2s;
  user-select: none;
}
.big-btn:active { transform: scale(0.95); }
.big-btn.start {
  background: linear-gradient(to bottom, #9175d6, #6b4ed7);
  box-shadow: 0 5px 22px rgba(107,78,215,0.45);
}
.big-btn.start:disabled { opacity: 0.5; }
.big-btn.stop {
  background: var(--error);
  animation: pulse-btn 2s ease-in-out infinite;
}
.big-btn.stop .sub { font-size: 10px; font-weight: 500; }
.big-btn.reconnecting { background: var(--warning); font-size: 13px; }

@keyframes pulse-btn {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Lignes de stats avec les icônes de l'app (時間帯データ, sessions d'un event) :
   les emoji 👤/⭐/👁 ne disaient pas de quelle métrique il s'agissait. */
.hourly-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  padding: 5px 0;
  color: var(--on-surface-variant);
}
.hourly-row .h-time { width: 44px; color: white; font-weight: 700; }
.h-stat { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.h-stat img { width: 16px; height: 16px; object-fit: contain; }
.session-stats { display: inline-flex; align-items: center; gap: 12px; }

/* Bouton de repli du panneau (bas à droite), affiché pendant le live */
#conn-collapse {
  display: none;
  position: absolute;
  right: 12px;
  bottom: 10px;
  background: var(--surface-variant);
  border: none;
  border-radius: 8px;
  color: var(--on-surface-variant);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
}
#conn-collapse:hover { background: #2a2c3d; color: white; }
#conn-header { position: relative; }

/* Minimized header */
#conn-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-radius: 0 0 18px 18px;
  padding: 12px 56px 12px 16px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  flex-shrink: 0;
  cursor: pointer;
  z-index: 5;
}
.type-badge {
  font-size: 11px;
  font-weight: 700;
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
}
.type-badge.gachi { background: var(--gachi); }
.type-badge.yuru { background: var(--yuru); }

.mini-stats { display: flex; gap: 14px; flex: 1; justify-content: center; }
.mini-stat { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; }
.mini-stat img { width: 17px; height: 17px; object-fit: contain; }

.status-pill {
  font-size: 12px;
  font-weight: 700;
  color: white;
  padding: 6px 13px;
  border-radius: 99px;
  background: var(--success);
  white-space: nowrap;
}
.status-pill.waiting { background: var(--warning); }

/* ---------- Gift feed ---------- */

#gift-feed-wrap { flex: 1; position: relative; overflow: hidden; background: var(--gift-log-bg); }

#gift-feed {
  height: 100%;
  overflow-y: auto;
  padding-bottom: 40px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-variant) transparent;
}
#gift-feed::-webkit-scrollbar { width: 4px; }
#gift-feed::-webkit-scrollbar-thumb { background: var(--surface-variant); border-radius: 4px; }

.feed-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 70px 40px;
  color: rgba(255,255,255,0.3);
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
}
.feed-empty .icon { font-size: 40px; opacity: 0.5; }

/* Regular gift row (Android-like) */
.gift-row {
  display: flex;
  align-items: center;
  padding: 6px 16px;
  background: var(--row-bg);
  border-bottom: 1px solid rgba(42,42,42,0.6);
  cursor: pointer;
  animation: row-in 0.25s ease;
}
@keyframes row-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mission-slot {
  width: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mission-slot img { width: 24px; height: 24px; object-fit: contain; }

/* Mode discret pendant le live : pas d'étoile daily mission dans le feed
   (la liste reste accessible en tapant la carte ⭐ du header).
   Les vues 前回 / 履歴 gardent leurs étoiles. */
#gift-feed .mission-slot { display: none; }
#gift-feed .notif-icon img[src*="ic_daily_mission"] { display: none; }

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-variant);
  flex-shrink: 0;
}

.gift-row .avatar { margin-right: 12px; }

.gift-row .g-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gift-row .g-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.gift-row .g-time { font-size: 10px; color: #888; }
.gift-row .g-gift { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gift-row .g-gift img { width: 36px; height: 36px; object-fit: contain; }
.gift-row .g-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(0,0,0,0.85);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Total de ce gift envoyé par cette personne depuis le début de la session.
   Volontairement discret : plus petit et gris, sous le ×N du gift. */
.g-total {
  font-size: 9px;
  font-weight: 600;
  color: var(--on-surface-variant);
  line-height: 1;
  letter-spacing: .2px;
}
.milestone-row .g-total { color: rgba(255,255,255,0.75); }

/* Milestone (tower) row */
.milestone-row {
  display: flex;
  align-items: center;
  margin: 6px 16px;
  padding: 8px 12px;
  border-radius: 16px;
  border: 2px solid;
  cursor: pointer;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.milestone-row.full {
  border-image: linear-gradient(135deg, #FFD700, #FFA500, #FFD700) 1;
  border-color: #FFD700;
  background: radial-gradient(circle at center, rgba(255,215,0,0.28), rgba(42,26,0,0.95) 75%), #2A1A00;
}
.milestone-row.half {
  border-color: #C0C0C0;
  background: radial-gradient(circle at center, rgba(192,192,192,0.18), rgba(26,26,26,0.95) 75%), #1A1A1A;
}
.milestone-row .avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.milestone-row .avatar-wrap .avatar { width: 38px; height: 38px; }
.milestone-row.full .avatar-wrap { border: 2px solid #FFD700; border-radius: 50%; }
.milestone-row.half .avatar-wrap { border: 2px solid #C0C0C0; border-radius: 50%; }
.milestone-row .sparkle-top { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 10px; }
.milestone-row .sparkle-bottom { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-size: 10px; }

.milestone-row .m-info { flex: 1; min-width: 0; }
.milestone-row .m-user { font-size: 15px; font-weight: 700; color: white; }
.milestone-row .m-tower {
  font-size: 19px;
  font-weight: 900;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.milestone-row.full .m-tower { color: #FFD700; }
.milestone-row.half .m-tower { color: #E0E0E0; }
.milestone-row .m-time { font-size: 10px; color: #888; }

.milestone-row .m-gift { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.milestone-row .m-gift .img-glow {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.milestone-row.full .m-gift .img-glow { background: radial-gradient(circle, rgba(255,215,0,0.4), transparent 70%); }
.milestone-row.half .m-gift .img-glow { background: radial-gradient(circle, rgba(192,192,192,0.4), transparent 70%); }
.milestone-row .m-gift img.gift-img { width: 46px; height: 46px; object-fit: contain; }
.milestone-row .m-count {
  font-size: 12px;
  font-weight: 900;
  color: black;
  padding: 1px 7px;
  border-radius: 6px;
}
.milestone-row.full .m-count { background: #FFD700; }
.milestone-row.half .m-count { background: #C0C0C0; }

/* System notification rows */
.sysnotif-row {
  display: flex;
  align-items: center;
  margin: 8px 16px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: rgba(128,128,128,0.9);
}
.sysnotif-row .notif-icon { width: 26px; text-align: center; font-size: 18px; margin-right: 10px; flex-shrink: 0; }
.sysnotif-row .notif-icon img { width: 22px; height: 22px; object-fit: contain; }
.sysnotif-row .n-msg { flex: 1; line-height: 1.4; }
.sysnotif-row .n-user { font-weight: 700; font-size: 14px; display: block; }
.sysnotif-row .n-time { font-size: 10px; color: #777; margin-left: 8px; }
.sysnotif-row .avatar { width: 40px; height: 40px; margin-right: 12px; }

.sysnotif-row.tier1 { border: 1.2px solid #CD7F32; color: #CD7F32; background: black; padding: 8px 12px; }
.sysnotif-row.tier2 { border: 1.2px solid #C0C0C0; color: #C0C0C0; background: black; padding: 8px 12px; }
.sysnotif-row.tier3 { border: 1.5px solid #FFD700; color: #FFD700; background: black; padding: 8px 12px; }
.sysnotif-row.tier37 { border: 1.5px solid #E67E22; color: #E67E22; background: black; padding: 8px 12px; }
.sysnotif-row.tier4 {
  border: 2px solid white;
  color: white;
  background: linear-gradient(135deg, #FF00FF, #00FFFF, #FFFF00);
  padding: 12px;
  font-weight: 700;
}
.sysnotif-row.tier1 .avatar { border: 1.5px solid #CD7F32; }
.sysnotif-row.tier2 .avatar { border: 1.5px solid #C0C0C0; }
.sysnotif-row.tier3 .avatar { border: 1.5px solid #FFD700; }
.sysnotif-row.tier37 .avatar { border: 1.5px solid #E67E22; }
.sysnotif-row.tier4 .avatar { border: 1.5px solid white; }

/* Unread banner */
#unread-banner {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--primary);
  color: white;
  font-size: 15px;
  font-weight: 700;
  padding: 11px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  animation: row-in 0.25s ease;
}
#unread-banner.visible { display: flex; }

/* Barre récap des gifts de la session (bas du feed, tous users confondus) */
#session-gifts-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 15;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(10,11,18,0.92);
  backdrop-filter: blur(6px);
  color: var(--on-surface-variant);
  font-size: 11px;
  font-family: inherit;
  padding: 7px 12px;
  cursor: pointer;
  text-align: center;
}
#session-gifts-bar b { color: var(--gold); font-weight: 700; }
#session-gifts-bar .chev { opacity: .5; margin-left: 4px; }
#session-gifts-bar:hover { background: rgba(20,22,34,0.96); }

/* Lignes du dialog de récap */
.sg-row { display: flex; align-items: center; gap: 10px; padding: 8px 18px; }
.sg-row img { width: 30px; height: 30px; object-fit: contain; }
.sg-row .sg-name { flex: 1; font-size: 13px; color: white; }
.sg-row .sg-count { font-size: 13px; font-weight: 700; color: var(--gold); }

/* Reconnecting banner */
#reconnect-banner {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(255,152,0,0.95);
  color: white;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 99px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
#reconnect-banner.visible { display: flex; }

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Common: view headers ---------- */

.view-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 56px 8px 16px;
  flex-shrink: 0;
}
.view-header img { width: 30px; height: 30px; object-fit: contain; }
.view-header .header-emoji { font-size: 24px; width: 30px; text-align: center; }
.view-header .title { font-size: 20px; font-weight: 700; color: white; flex: 1; }
.view-header .header-action { color: var(--on-surface-variant); font-size: 17px; padding: 4px 8px; }
.view-header .header-action.text { font-size: 13px; color: var(--primary); font-weight: 600; }

.scroll-content { flex: 1; overflow-y: auto; padding-bottom: 20px; }

/* Toggle capsule (gachi/yuru) */
.toggle-capsule {
  display: flex;
  background: var(--surface-variant);
  border-radius: 99px;
  padding: 3px;
  margin: 4px 16px 8px;
}
.toggle-capsule button {
  flex: 1;
  padding: 8px;
  border-radius: 99px;
  color: white;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.2s;
}
.toggle-capsule button.sel-gachi { background: var(--gachi); }
.toggle-capsule button.sel-yuru { background: var(--yuru); }

/* Filter chips */
.chips-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 16px;
  scrollbar-width: none;
  flex-shrink: 0;
}
.chips-row::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 99px;
  background: var(--surface-variant);
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.chip.active { background: var(--primary); color: white; }
.chip.active.gold { background: var(--rank1); color: black; }

/* Selection bar */
#selection-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
}
#selection-bar.visible { display: flex; }
#selection-bar .sel-all { color: var(--primary); font-size: 13px; font-weight: 600; }
#selection-bar .sel-delete {
  display: flex;
  align-items: center;
  gap: 6px;
  color: white;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--error);
}
#selection-bar .sel-delete:disabled { background: var(--surface-variant); opacity: 0.6; }

/* ---------- Record cards (history) ---------- */

.record-card {
  background: var(--stats-card);
  border-radius: 14px;
  margin: 0 16px 12px;
  padding: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  transition: border-color .2s;
}
.record-card.top-ranked { border-color: var(--rank1); }
.record-card .rc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.record-card .rc-date { font-size: 14px; font-weight: 700; color: white; flex: 1; }
.record-card .rc-time { font-size: 12px; color: var(--on-surface-variant); }
.record-card .rc-duration { font-size: 11px; color: var(--on-surface-variant); }
.rc-stats { display: flex; gap: 12px; }
.rc-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rc-stat img { width: 22px; height: 22px; object-fit: contain; }
.rc-stat .v { font-size: 16px; font-weight: 700; }
.rc-stat .l { font-size: 9px; color: var(--on-surface-variant); }
.record-card .rc-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--on-surface-variant);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
}
.record-card.selection .rc-check { display: flex; }
.record-card.selected .rc-check { background: var(--primary); border-color: var(--primary); }
.record-card .rc-event-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--warning);
  margin-top: 8px;
}
.top-badge {
  font-size: 10px;
  color: black;
  background: var(--rank1);
  font-weight: 800;
  border-radius: 6px;
  padding: 2px 8px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 70px 40px;
  color: rgba(255,255,255,0.3);
  text-align: center;
  font-size: 13px;
}
.empty-state .icon { font-size: 42px; opacity: 0.6; }

/* ---------- Event cards ---------- */

.event-card {
  background: var(--stats-card);
  border-radius: 16px;
  margin: 0 16px 14px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.05);
}
.event-card .ev-img { width: 100%; height: 110px; object-fit: cover; display: block; background: var(--surface-variant); }
.event-card .ev-body { padding: 12px 14px; }
.event-card .ev-name { font-size: 14px; font-weight: 700; color: white; margin-bottom: 4px; }
.event-card .ev-dates { font-size: 11px; color: var(--on-surface-variant); margin-bottom: 8px; display:flex; align-items:center; gap:8px; }
.event-card .ev-active {
  font-size: 10px;
  font-weight: 700;
  color: white;
  background: var(--error);
  padding: 2px 8px;
  border-radius: 6px;
}
.event-card .ev-stats { display: flex; gap: 10px; font-size: 11px; color: var(--on-surface-variant); flex-wrap: wrap; }
.event-card .ev-stats b { color: white; }

/* ---------- Stats view (分析) ---------- */

.stats-cards-row { display: flex; gap: 12px; padding: 8px 16px; }
.stat-big-card {
  flex: 1;
  background: var(--stats-card);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-big-card .t { font-size: 11px; color: var(--on-surface-variant); }
.stat-big-card .v { font-size: 24px; font-weight: 800; color: white; }
.stat-big-card .s { font-size: 10px; color: var(--on-surface-variant); }

.best-time-card {
  margin: 8px 16px;
  background: linear-gradient(135deg, rgba(107,78,215,0.25), rgba(24,25,38,0.9));
  border: 1px solid rgba(107,78,215,0.4);
  border-radius: 14px;
  padding: 14px;
}
.best-time-card .t { font-size: 12px; color: var(--on-surface-variant); margin-bottom: 4px; }
.best-time-card .v { font-size: 20px; font-weight: 800; color: white; }

.metric-tabs { display: flex; gap: 8px; padding: 8px 16px; }
.metric-tabs button {
  flex: 1;
  padding: 8px;
  border-radius: 10px;
  background: var(--surface-variant);
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 700;
}
.metric-tabs button.active { color: white; }
.metric-tabs button.active[data-metric="viewers"] { background: var(--user-count); }
.metric-tabs button.active[data-metric="daily"] { background: var(--daily-count); }
.metric-tabs button.active[data-metric="chuumokudo"] { background: var(--attention-count); }

.chart-card {
  margin: 4px 16px 12px;
  background: var(--stats-card);
  border-radius: 14px;
  padding: 14px 10px 8px;
}
.chart-card canvas { width: 100%; height: 190px; display: block; }
.chart-card .chart-title { font-size: 12px; color: var(--on-surface-variant); padding: 0 6px 8px; }

.heatmap-grid {
  display: grid;
  grid-template-columns: 44px repeat(3, 1fr);
  gap: 5px;
  padding: 4px 6px 8px;
}
.heatmap-grid .hm-label { font-size: 10px; color: var(--on-surface-variant); display: flex; align-items: center; justify-content: center; }
.heatmap-grid .hm-cell {
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: white;
  background: var(--surface-variant);
}

.data-mgmt { padding: 8px 16px 20px; display: flex; gap: 10px; }
.data-mgmt button {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-variant);
  color: white;
  font-size: 13px;
  font-weight: 600;
}
.data-mgmt button:active { background: var(--primary); }

/* ---------- Dialogs / overlays ---------- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}
.overlay.visible { display: flex; }

.dialog {
  background: var(--surface-variant);
  border-radius: 18px;
  width: 100%;
  max-width: 340px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 50px rgba(0,0,0,0.6);
  animation: dialog-in 0.2s ease;
}
@keyframes dialog-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

.dialog .dlg-title { font-size: 16px; font-weight: 700; color: white; text-align: center; padding: 18px 18px 6px; }
.dialog .dlg-sub { font-size: 13px; color: var(--on-surface-variant); text-align: center; padding-bottom: 12px; }
.dialog .dlg-body { overflow-y: auto; }
.dialog .dlg-close {
  padding: 14px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Type select dialog */
#type-dialog .type-row { display: flex; gap: 4px; background: var(--surface); border-radius: 99px; padding: 4px; margin: 8px 18px; }
#type-dialog .type-row button {
  flex: 1;
  padding: 12px;
  border-radius: 99px;
  color: white;
  font-size: 14px;
  font-weight: 700;
}
#type-dialog .type-gachi { background: var(--gachi); }
#type-dialog .type-yuru { background: var(--yuru); }
#type-dialog .dlg-cancel { padding: 12px 0 16px; color: var(--on-surface-variant); font-size: 13px; width: 100%; }

/* Gift detail dialog */
#gift-detail .gd-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 6px;
}
#gift-detail .gd-glow {
  width: 116px; height: 116px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
#gift-detail .gd-glow.paid { background: radial-gradient(circle, rgba(255,165,0,0.3), transparent 70%); }
#gift-detail .gd-glow.free { background: radial-gradient(circle, rgba(33,150,243,0.3), transparent 70%); }
#gift-detail .gd-glow img { width: 80px; height: 80px; object-fit: contain; }
#gift-detail .gd-rows { margin: 10px 18px 16px; background: var(--surface); border-radius: 12px; padding: 4px 14px; }
#gift-detail .gd-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#gift-detail .gd-row:last-child { border-bottom: none; }
#gift-detail .gd-row .k { color: gray; }
#gift-detail .gd-row .v { font-weight: 700; color: white; }
#gift-detail .gd-row .v.gold { color: var(--gold); }
#gift-detail .gd-user { display: flex; align-items: center; gap: 10px; margin: 0 18px 8px; padding: 10px 14px; background: var(--surface); border-radius: 12px; }
#gift-detail .gd-user .avatar { width: 36px; height: 36px; }
#gift-detail .gd-user .name { font-size: 14px; font-weight: 700; color: white; }

/* List rows in dialogs (daily mission, stage) */
.dlg-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
}
.dlg-list-row .avatar { width: 32px; height: 32px; }
.dlg-list-row .name { flex: 1; font-size: 13px; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-list-row .pts { font-size: 12px; color: var(--gold); font-weight: 700; }
.dlg-list-row .rank { width: 24px; text-align: center; font-weight: 700; font-size: 14px; }

.dlg-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.dlg-section-head img { width: 18px; height: 18px; object-fit: contain; }
.dlg-section-head .chev { margin-left: auto; color: var(--on-surface-variant); font-size: 11px; transition: transform .2s; }
.dlg-section-head.open .chev { transform: rotate(180deg); }
.dlg-section-body { display: none; background: rgba(15,16,27,0.5); }
.dlg-section-body.open { display: block; }
.dlg-stats-row { display: flex; justify-content: center; gap: 30px; padding: 4px 0 14px; }
.dlg-stats-row .ds { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dlg-stats-row .ds img { width: 24px; height: 24px; object-fit: contain; }
.dlg-stats-row .ds .v { font-size: 15px; font-weight: 700; }

.dlg-empty { padding: 14px 18px; font-size: 12px; color: var(--on-surface-variant); }

/* Profile sheet */
#profile-sheet .dialog { max-width: 360px; }
.profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
}
.profile-row:hover { background: rgba(255,255,255,0.04); }
.profile-row .p-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #9175d6, #6b4ed7);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.profile-row .p-name { flex: 1; font-size: 14px; color: white; font-weight: 600; }
.profile-row .p-check { color: var(--success); font-size: 16px; }
.profile-row .p-action { color: var(--on-surface-variant); font-size: 14px; padding: 6px; }
.profile-row .p-action:hover { color: var(--error); }
.profile-new {
  margin: 8px 18px 14px;
  display: flex;
  gap: 8px;
}
.profile-new input {
  flex: 1;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px 12px;
  color: white;
  font-size: 13px;
}
.profile-new button {
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--primary);
  color: white;
  font-size: 13px;
  font-weight: 700;
}
.profile-guest-note { font-size: 11px; color: var(--on-surface-variant); text-align: center; padding: 0 18px 8px; line-height: 1.5; }

/* Dialogs de détail (配信データ / イベント) : plus larges que les dialogs simples */
#stream-detail .dialog { max-width: 560px; }
#event-detail .dialog { max-width: 560px; }
#event-detail .ev-img { width: 100%; height: 130px; object-fit: cover; background: var(--surface); }
#event-detail .agg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 18px; }
#event-detail .agg-cell { background: var(--surface); border-radius: 10px; padding: 10px; text-align: center; }
#event-detail .agg-cell .v { font-size: 16px; font-weight: 700; color: white; }
#event-detail .agg-cell .l { font-size: 9px; color: var(--on-surface-variant); margin-top: 2px; }

/* Last stream view (前回) */
.last-summary {
  margin: 4px 16px 12px;
  background: var(--stats-card);
  border-radius: 16px;
  padding: 16px;
}
.last-summary .ls-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.last-summary .ls-date { font-size: 16px; font-weight: 700; color: white; flex: 1; }
.last-summary .ls-sub { font-size: 12px; color: var(--on-surface-variant); margin-bottom: 12px; }
.last-summary .rc-stats { display: flex; gap: 12px; }

.section-card {
  margin: 0 16px 12px;
  background: var(--stats-card);
  border-radius: 14px;
  overflow: hidden;
}
.section-card .sc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.section-card .sc-head img { width: 20px; height: 20px; object-fit: contain; }
.section-card .sc-head .chev { margin-left: auto; color: var(--on-surface-variant); font-size: 11px; transition: transform .2s; }
.section-card .sc-head.open .chev { transform: rotate(180deg); }
.section-card .sc-body { display: none; }
.section-card .sc-body.open { display: block; }

/* ---------- Guide (ガイド) ---------- */

.guide-intro {
  margin: 4px 16px 12px;
  background: linear-gradient(135deg, rgba(107,78,215,0.25), rgba(24,25,38,0.9));
  border: 1px solid rgba(107,78,215,0.4);
  border-radius: 14px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--on-surface);
}
.guide-text {
  padding: 0 14px 14px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--on-surface-variant);
}
.guide-text b { color: var(--on-surface); }

/* Toast */
#toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-variant);
  color: white;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 99px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  max-width: 90%;
  text-align: center;
}
#toast.visible { opacity: 1; }

/* Confirm dialog */
#confirm-dialog .dlg-actions { display: flex; border-top: 1px solid rgba(255,255,255,0.1); }
#confirm-dialog .dlg-actions button { flex: 1; padding: 14px; font-size: 14px; font-weight: 600; }
#confirm-dialog .dlg-actions .cancel { color: var(--on-surface-variant); border-right: 1px solid rgba(255,255,255,0.1); }
#confirm-dialog .dlg-actions .ok { color: var(--error); }

/* Desktop tweak */
@media (min-width: 700px) {
  #app { border-left: 1px solid #1a1b26; border-right: 1px solid #1a1b26; }
}

/* ============================================================
   Layout desktop (≥ 900px) — mêmes couleurs / icônes, mais :
   - barre d'onglets = rail vertical à gauche
   - 配信 : header + stats en colonne gauche, feed de gifts à droite
   - 履歴 / イベント : cartes en grille multi-colonnes
   - 前回 / 分析 : colonne centrée large
   En dessous de 900px : layout mobile d'origine, inchangé.
   ============================================================ */
@media (min-width: 900px) {
  #app { max-width: none; flex-direction: row; }

  /* --- Rail de navigation vertical --- */
  #tabbar-border { display: none; }
  #tabbar {
    order: -1;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    width: 92px;
    padding: 20px 10px;
    border-right: 2px solid #1a1b26;
    flex-shrink: 0;
  }
  .tab-item { flex: 0 0 auto; padding: 10px 4px 8px; border-radius: 14px; transition: background .15s; }
  .tab-item:hover { background: rgba(255,255,255,0.05); }
  .tab-item.active { background: rgba(107,78,215,0.18); }

  /* Bouton profil : en bas du rail de navigation (plus au-dessus du feed) */
  #profile-btn {
    top: auto;
    bottom: 22px;
    left: 26px;
    right: auto;
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
  #profile-btn:hover { transform: scale(1.08); }

  .view { min-width: 0; }

  /* --- 配信 : deux colonnes --- */
  #view-live.active {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px 18px;
    padding: 18px;
  }
  #conn-header, #conn-mini {
    grid-area: 1 / 1;
    align-self: start;
    border-radius: 18px;
    border: 1px solid #1a1b26;
  }

  /* Récap des gifts sous le panneau de connexion : la colonne est libre, autant
     y montrer la liste en permanence plutôt que de la cacher derrière un clic.
     ~5 gifts visibles, le reste au scroll. */
  #session-gifts-panel {
    grid-area: 2 / 1;
    align-self: start;
    flex-direction: column;
    min-height: 0;
    background: var(--stats-card);
    border: 1px solid #1a1b26;
    border-radius: 18px;
    overflow: hidden;
  }
  #session-gifts-panel .sgp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  #session-gifts-panel .sgp-summary { font-size: 12px; font-weight: 700; color: var(--gold); }
  #session-gifts-panel .sgp-list {
    max-height: 250px;   /* ~5 lignes, le reste au scroll */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-variant) transparent;
  }
  #session-gifts-panel .sg-row { padding: 7px 16px; }
  #conn-mini { padding: 12px 16px; }

  /* --- Panneau de connexion en grand écran ---
     Le panneau garde ses couleurs et ses icônes, mais tout est agrandi : sur un
     grand écran, les chiffres qui comptent (ユーザー / デイリー / 注目度) doivent
     se lire d'un coup d'œil depuis la pièce, pas se deviner. Le panneau ne se
     replie plus (voir renderLive), donc le bouton 停止 reste toujours accessible. */
  #conn-header { padding: 22px 22px 18px; }
  #conn-header .url-input { font-size: 16px; padding: 14px 14px; border-radius: 12px; }

  #conn-live-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 16px;
  }
  #conn-live-info .type-badge { font-size: 14px; padding: 6px 14px; }
  #conn-live-info .status-pill { font-size: 14px; padding: 6px 14px; }

  #conn-header .stats-grid { gap: 10px; padding: 20px 0 16px; }
  #conn-header .stat-card {
    gap: 6px;
    padding: 16px 6px;
    background: var(--surface);
    border-radius: 14px;
  }
  #conn-header .stat-card.clickable:hover { background: var(--surface-variant); }
  #conn-header .stat-card img { width: 42px; height: 42px; }
  #conn-header .stat-card .stat-value { font-size: 36px; line-height: 1.1; }
  #conn-header .stat-card .stat-label { font-size: 13px; }

  #conn-header .control-row { padding: 8px 0 4px; }
  #conn-header .big-btn { width: 128px; height: 128px; font-size: 26px; }
  #conn-header .big-btn.stop .sub { font-size: 12px; }

  #gift-feed-wrap {
    grid-column: 2;
    grid-row: 1 / span 2;   /* pleine hauteur, à côté de connexion + récap gifts */
    border-radius: 18px;
    border: 1px solid #1a1b26;
    overflow: hidden;
  }
  #unread-banner { left: 24px; right: 24px; }

  /* --- Feed en grand écran ---
     Les lignes sont conçues pour un écran de téléphone : étirées sur toute la
     largeur d'un feed desktop, le pseudo et le gift se retrouvent séparés par un
     vide énorme et les visuels paraissent minuscules. On borne donc la largeur
     d'une ligne et on agrandit gift, ×N et 計N. */
  #gift-feed .gift-row,
  #gift-feed .milestone-row,
  #gift-feed .sysnotif-row {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }
  #gift-feed .gift-row { padding: 12px 18px; }
  #gift-feed .gift-row .avatar,
  #gift-feed .sysnotif-row .avatar { width: 52px; height: 52px; }
  #gift-feed .gift-row .g-name { font-size: 17px; }
  #gift-feed .gift-row .g-time { font-size: 12px; }
  #gift-feed .gift-row .g-gift img { width: 56px; height: 56px; }
  #gift-feed .gift-row .g-count { font-size: 15px; padding: 2px 8px; }
  #gift-feed .g-total { font-size: 13px; }
  #gift-feed .milestone-row .gift-img { width: 64px; height: 64px; }
  #gift-feed .milestone-row .m-user { font-size: 16px; }
  #gift-feed .milestone-row .m-count { font-size: 15px; padding: 2px 9px; }
  #gift-feed .sysnotif-row .n-msg { font-size: 15px; }
  #session-gifts-bar { font-size: 13px; padding: 9px 12px; }

  /* --- 前回 / 分析 / ガイド : contenu centré --- */
  #view-last .scroll-content,
  #view-stats .scroll-content,
  #view-guide .scroll-content { max-width: 880px; width: 100%; margin: 0 auto; }
  #stats-toggle { max-width: 430px; }

  /* --- 履歴 / イベント : grilles de cartes --- */
  #hist-toggle { max-width: 430px; }
  #history-content, #events-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    align-content: start;
    padding: 4px 18px 20px;
  }
  #history-content .record-card,
  #events-content .event-card { margin: 0; }
  #history-content .empty-state,
  #events-content .empty-state { grid-column: 1 / -1; }

  /* Dialogs de détail encore plus confortables sur grand écran */
  #stream-detail .dialog, #event-detail .dialog { max-width: 720px; }
}