:root {
  --bg: #0b0b0f;
  --card: #17171d;
  --card-2: #1f1f28;
  --yellow: #ffd400;
  --text: #f5f5f7;
  --muted: #9a9aa5;
  --green: #35c46a;
  --orange: #ff9f43;
  --red: #ff5a5f;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  height: 100%;
}
#app { max-width: 560px; margin: 0 auto; padding-bottom: 24px; min-height: 100%; }
a { color: var(--yellow); }

header.top {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 18px 16px 10px; position: sticky; top: 0; background: var(--bg); z-index: 10;
}
header.top .brand { display: flex; align-items: center; gap: 10px; }
header.top .logo {
  width: 34px; height: 34px; border-radius: 9px; background: var(--yellow);
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: #111; font-size: 18px;
}
header.top h1 { font-size: 18px; margin: 0; font-weight: 700; }
.header-actions { display: flex; align-items: center; gap: 8px; }
header.top .icon-btn {
  background: var(--card); border: 1px solid #2a2a35; color: var(--text); border-radius: 10px;
  width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
}

.profile-card {
  margin: 8px 16px 18px; background: linear-gradient(135deg, var(--card-2), var(--card));
  border-radius: 18px; padding: 18px; border: 1px solid #2a2a35;
}
.profile-card .name { font-size: 20px; font-weight: 800; }
.profile-card .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.stat-grid.stat-grid-2 { grid-template-columns: repeat(2, 1fr); }
.stat-box { background: rgba(255,255,255,0.04); border-radius: 12px; padding: 10px; text-align: center; }
.stat-box .num { font-size: 18px; font-weight: 800; color: var(--yellow); }
.stat-box .lbl { font-size: 10px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }

nav.tabs {
  display: flex; gap: 6px; padding: 4px 12px 12px; position: sticky; top: 66px; background: var(--bg); z-index: 9;
}
nav.tabs button {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 13px 4px; border-radius: 14px; border: 1px solid #2a2a35; background: var(--card);
  color: var(--muted); cursor: pointer; text-align: center;
}
nav.tabs button.active { background: var(--yellow); color: #111; border-color: var(--yellow); }
nav.tabs button svg { display: block; }

.subnav { display: flex; gap: 8px; margin-bottom: 14px; }
.subnav button {
  flex: 1; padding: 9px; border-radius: 10px; border: 1px solid #2a2a35; background: var(--card);
  color: var(--muted); font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.subnav button.active { background: var(--yellow); color: #111; border-color: var(--yellow); }

.sub-panel { display: none; }
.sub-panel.active { display: block; }

.search-input-full {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid #2a2a35;
  background: var(--card); color: var(--text); font-size: 14px; outline: none; margin-bottom: 14px;
}

section.tab { padding: 0 16px; display: none; }
section.tab.active { display: block; }

.search-row { display: flex; gap: 8px; margin-bottom: 14px; }
.search-row input, .search-row select {
  background: var(--card); border: 1px solid #2a2a35; color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none;
}
.search-row input { flex: 1; }

.show-card {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--card); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid #22222c; gap: 10px;
}
.show-card img.poster { width: 40px; height: 56px; object-fit: cover; border-radius: 6px; background: #222; flex: none; }
.show-card .left { min-width: 0; flex: 1; display:flex; align-items:center; gap:10px; }
.show-card .title { font-weight: 700; font-size: 14.5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 200px; }
.show-card .details { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.show-card .right { text-align: right; flex: none; padding-left: 6px; }
.show-card .eps { font-size: 16px; font-weight: 800; color: var(--yellow); }
.show-card .eps-lbl { font-size: 9.5px; color: var(--muted); text-transform: uppercase; }
.badge-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; flex:none; }

.section-title { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 10px; }

.bar-row { margin-bottom: 10px; }
.bar-row .bar-label { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.bar-row .bar-bg { background: var(--card); border-radius: 6px; height: 10px; overflow: hidden; }
.bar-row .bar-fill { height: 100%; background: linear-gradient(90deg, var(--yellow), var(--orange)); border-radius: 6px; }

.badge-item, .friend-item, .list-item {
  background: var(--card); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center; border: 1px solid #22222c;
}
.badge-item .b-name { font-size: 13.5px; font-weight: 700; }
.badge-item .b-show { font-size: 11.5px; color: var(--muted); }
.badge-item .b-date, .friend-item .f-date { font-size: 11px; color: var(--muted); }

.btn { background: var(--yellow); color:#111; border:none; border-radius:10px; padding:10px 16px; font-weight:700; font-size:13px; cursor:pointer; }
.btn.secondary { background: var(--card); color: var(--text); border: 1px solid #2a2a35; }
.btn.danger { background: var(--red); color: #fff; }
.btn:disabled { opacity: .5; }

.empty { text-align: center; color: var(--muted); padding: 40px 10px; font-size: 13px; }

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

/* Auth screen */
.auth-wrap { max-width: 360px; margin: 60px auto; padding: 0 20px; }
.auth-wrap .logo-big { width: 64px; height: 64px; border-radius: 16px; background: var(--yellow); display:flex; align-items:center; justify-content:center; font-weight:900; color:#111; font-size:30px; margin: 0 auto 16px; }
.auth-wrap h2 { text-align:center; margin-bottom: 24px; }
.auth-tabs { display:flex; gap:8px; margin-bottom: 18px; }
.auth-tabs button { flex:1; padding:10px; border-radius:10px; border:1px solid #2a2a35; background:var(--card); color:var(--muted); font-weight:700; cursor:pointer; }
.auth-tabs button.active { background: var(--yellow); color:#111; border-color:var(--yellow); }
.field { margin-bottom: 14px; }
.field label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
.field input { width:100%; padding:11px 12px; border-radius:10px; border:1px solid #2a2a35; background:var(--card); color:var(--text); font-size:14px; }
.form-err { background: rgba(255,90,95,0.12); border:1px solid var(--red); color:#ffb3b5; padding:10px 12px; border-radius:10px; font-size:12.5px; margin-bottom:14px; }
.form-ok { background: rgba(53,196,106,0.12); border:1px solid var(--green); color:#b7f0c9; padding:10px 12px; border-radius:10px; font-size:12.5px; margin-bottom:14px; }

.modal-backdrop { position: fixed; inset:0; background: rgba(0,0,0,.6); display:flex; align-items:flex-end; z-index: 70; }
.modal { background: var(--card); border-radius: 18px 18px 0 0; padding: 18px 16px 28px; width:100%; max-width:560px; margin:0 auto; max-height:80vh; overflow-y:auto; }
.modal h3 { margin-top:0; }
.search-result { display:flex; gap:10px; align-items:center; padding:8px 0; }
.search-result-wrap { border-bottom:1px solid #22222c; }
.search-result img { width:34px; height:48px; object-fit:cover; border-radius:5px; background:#222; }
.search-result .sr-name { flex:1; font-size:13.5px; }

.detail-page { position: fixed; inset: 0; background: var(--bg); z-index: 60; overflow-y: auto; }
.detail-page-header {
  display: flex; align-items: center; gap: 12px; padding: 18px 16px 12px;
  position: sticky; top: 0; background: var(--bg); z-index: 2; border-bottom: 1px solid #1c1c24;
}
.detail-page-header .icon-btn {
  background: var(--card); border: 1px solid #2a2a35; color: var(--text); border-radius: 10px;
  width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.detail-page-header h2 { font-size: 16.5px; margin: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-page-body { padding: 16px 16px 32px; max-width: 560px; margin: 0 auto; }

.media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 4px; }
.media-card {
  position: relative; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden;
  background: var(--card); cursor: pointer; border: 1px solid #22222c;
}
.media-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center top; background-color: #1c1c24; }
.media-card-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.88) 100%); }
.media-card-title {
  position: absolute; left: 10px; right: 10px; bottom: 10px; color: #fff; font-size: 13px;
  font-weight: 700; line-height: 1.25; text-shadow: 0 1px 4px rgba(0,0,0,.7); z-index: 1;
}
.media-card-year { display: block; font-size: 11px; font-weight: 500; opacity: .75; margin-top: 2px; }
.media-card-add {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(10,10,14,.55); border: 1px solid rgba(255,255,255,.3); color: #fff;
  font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  z-index: 2; line-height: 1; backdrop-filter: blur(2px);
}
.media-card-add.added { background: var(--yellow); color: #111; border-color: var(--yellow); }
.media-card-add:disabled { opacity: .4; }
.media-card-desc {
  position: absolute; inset: 0; background: rgba(9,9,13,.96); padding: 12px 12px 10px;
  font-size: 11.5px; line-height: 1.5; color: var(--text); overflow-y: auto; display: none; z-index: 3;
}
.media-card.expanded .media-card-desc { display: block; }
.media-card-close {
  position: absolute; top: 6px; right: 8px; background: none; border: none; color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 4px;
}
.media-card-desc-text { padding-right: 18px; }
.media-card-sub { margin-top: 8px; font-size: 10.5px; color: var(--muted); }

.radio-group { display: flex; gap: 8px; }
.radio-group label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 4px; border-radius: 10px; border: 1px solid #2a2a35; background: var(--card);
  font-size: 12.5px; cursor: pointer;
}
.radio-group label.checked { border-color: var(--yellow); color: var(--yellow); }
.radio-group input { accent-color: var(--yellow); }

.season-check, .ep-check { accent-color: var(--yellow); width: 16px; height: 16px; flex: none; }

/* Accordeon saisons (page detail serie) */
.season-header { cursor: pointer; user-select: none; }
.season-chevron { display:flex; color: var(--muted); transition: transform .15s ease; flex: none; }
.season-header.open .season-chevron { transform: rotate(180deg); color: var(--yellow); }
.season-body.collapsed { display: none; }

/* Accordeon "derniers episodes" (Mon visionnage) */
.show-card-wrap { margin-bottom: 10px; }
.show-card-wrap .show-card { margin-bottom: 0; }
.acc-toggle { transition: transform .15s ease; }
.acc-toggle.open { transform: rotate(180deg); }
.show-accordion {
  background: var(--card); border: 1px solid #22222c; border-top: none;
  border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
  margin-top: -1px; padding: 4px 0;
}
.acc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 14px; font-size: 12px;
}
.acc-row-status { font-size: 11px; font-weight: 700; flex: none; margin-left: 10px; }
.acc-link { padding: 6px 14px 8px; }
.acc-link a { color: var(--yellow); font-size: 12px; text-decoration: none; font-weight: 700; }