:root{
  --bg:#0b1020;
  --panel:rgba(15,23,42,.65);
  --card:rgba(11,18,34,.92);
  --border:#22304a;
  --text:#e5e7eb;
  --muted:#94a3b8;

  /* ===== Genre Colors ===== */
  --g-action: #ef4444;
  --g-adventure: #f97316;
  --g-comedy: #facc15;
  --g-drama: #a855f7;
  --g-fantasy: #22c55e;
  --g-romance: #fb7185;
  --g-slice-of-life: #38bdf8;
  --g-sci-fi: #60a5fa;
  --g-mystery: #94a3b8;
  --g-thriller: #f43f5e;
  --g-supernatural: #c084fc;
  --g-horror: #dc2626;
  --g-ecchi: #f472b6;
  --g-sports: #34d399;
  --g-music: #a3e635;
  --g-psychological: #818cf8;
  --g-mecha: #fb923c;
  --g-mahou-shoujo: #fda4af;
  --g-other: #64748b;
}

*{box-sizing:border-box}

body{
  margin:0;
  padding:24px;
  background:radial-gradient(1200px 800px at 15% 10%, #111b33, var(--bg));
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Segoe UI",Roboto,sans-serif;
}
body.no-scroll{overflow:hidden}

.header{margin-bottom:14px}
.head-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.title{margin:0;font-size:28px}
.subtitle{margin-top:8px;color:var(--muted)}

.controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.input,.select{
  background:rgba(11,18,34,.78);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  outline:none;
}
.input{width:min(320px, 80vw)}
.select{min-width:170px}

.toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--muted);
  user-select:none;
}
.toggle input{transform:translateY(1px)}

/* ===== Custom Dropdown ===== */
.dd{
  position:relative;
  min-width:170px;
}

.dd-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(11,18,34,.78);
  color:var(--text);
  cursor:pointer;
  font-size:13px;
}

.dd-btn:hover{background:rgba(34,48,74,.18)}
.dd-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dd-caret{opacity:.8}

.dd-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:360px;
  max-width:min(360px, 90vw);
  background:rgba(11,18,34,.98);
  border:1px solid rgba(34,48,74,.9);
  border-radius:14px;
  box-shadow:0 20px 70px rgba(0,0,0,.45);
  display:none;
  z-index:999;
}
.dd-menu.open{display:block}

.dd-search{
  padding:10px;
  border-bottom:1px solid rgba(34,48,74,.65);
}

.dd-search-input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(34,48,74,.85);
  background:rgba(11,18,34,.55);
  color:var(--text);
  outline:none;
  font-size:13px;
}

.dd-list{
  max-height:320px;
  overflow:auto;
  padding:6px;
}

.dd-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  border:1px solid transparent;
}
.dd-item:hover{
  background:rgba(34,48,74,.25);
  border-color:rgba(34,48,74,.55);
}

.dd-item-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}

.dd-swatch{
  width:12px;
  height:12px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.12);
  background: var(--g-other);
  flex:0 0 auto;
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
}

.dd-swatch-all{
  background:rgba(148,163,184,.25);
  border-color:rgba(148,163,184,.35);
}

/* ===== Grid + Day Columns ===== */
.calendar-grid{
  display:grid;
  gap:14px;
  align-items:stretch;
  grid-auto-rows:1fr;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
}

.day-col{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  min-height:140px;
  height:100%;
  align-self:stretch;
  display:flex;
  flex-direction:column;
}

.day-title{
  margin:0 0 12px 0;
  font-size:14px;
  border-bottom:1px solid var(--border);
  padding:10px 8px;
  border-radius:12px;
  flex:0 0 auto;
  position:sticky;
  top:10px;
  background:rgba(15,23,42,.85);
  backdrop-filter:blur(6px);
  z-index:10;
}

/* ===== Cards ===== */
.anime-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:start;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
  flex:0 0 auto;
  cursor:pointer;
  transition:opacity 220ms ease, transform 220ms ease, max-height 260ms ease, margin 260ms ease, padding 260ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.anime-card:hover{
  border-color:rgba(148,163,184,.55);
}

/* ===== Countdown highlighting states ===== */
.anime-card.past{
  opacity:.72;
  filter:saturate(.9);
}

.anime-card.soon-24{
  border-color:rgba(250,204,21,.55);
  box-shadow:0 0 0 3px rgba(250,204,21,.12);
}

.anime-card.soon-2{
  border-color:rgba(249,115,22,.60);
  box-shadow:0 0 0 3px rgba(249,115,22,.14);
}

@keyframes pulseSoon{
  0%{ box-shadow:0 0 0 3px rgba(244,63,94,.16); }
  50%{ box-shadow:0 0 0 6px rgba(244,63,94,.10); }
  100%{ box-shadow:0 0 0 3px rgba(244,63,94,.16); }
}

.anime-card.soon-30{
  border-color:rgba(244,63,94,.70);
  animation:pulseSoon 1.6s ease-in-out infinite;
}

.anime-left{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:12px;
  align-items:center;
  min-width:0;
}

.cover{
  width:64px;
  height:90px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid var(--border);
  cursor:zoom-in;
}

.anime-text{min-width:0}
.anime-title{
  font-weight:750;
  font-size:13.5px;
  line-height:1.2;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.anime-sub{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.studio-line{
  margin-top:6px;
  color:rgba(148,163,184,.95);
  font-size:12px;
  line-height:1.25;
}

.genre-line{
  margin-top:6px;
  color:rgba(148,163,184,.9);
  font-size:12px;
  line-height:1.25;
}

.hint-line{
  margin-top:6px;
  color:rgba(148,163,184,.75);
  font-size:11px;
}

/* Genre squares */
.genre-squares{
  margin-top:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}

.gq{
  width:10px;
  height:10px;
  border-radius:3px;
  border:1px solid rgba(255,255,255,.12);
  background: var(--g-other);
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
}

.gq-more{
  font-size:11px;
  color:rgba(148,163,184,.9);
  padding-left:2px;
}

/* Color mapping for BOTH: .gq + .dd-swatch */
.gq[data-genre="action"], .dd-swatch[data-genre="action"]{ background: var(--g-action); }
.gq[data-genre="adventure"], .dd-swatch[data-genre="adventure"]{ background: var(--g-adventure); }
.gq[data-genre="comedy"], .dd-swatch[data-genre="comedy"]{ background: var(--g-comedy); }
.gq[data-genre="drama"], .dd-swatch[data-genre="drama"]{ background: var(--g-drama); }
.gq[data-genre="fantasy"], .dd-swatch[data-genre="fantasy"]{ background: var(--g-fantasy); }
.gq[data-genre="romance"], .dd-swatch[data-genre="romance"]{ background: var(--g-romance); }
.gq[data-genre="slice-of-life"], .dd-swatch[data-genre="slice-of-life"]{ background: var(--g-slice-of-life); }
.gq[data-genre="sci-fi"], .dd-swatch[data-genre="sci-fi"]{ background: var(--g-sci-fi); }
.gq[data-genre="mystery"], .dd-swatch[data-genre="mystery"]{ background: var(--g-mystery); }
.gq[data-genre="thriller"], .dd-swatch[data-genre="thriller"]{ background: var(--g-thriller); }
.gq[data-genre="supernatural"], .dd-swatch[data-genre="supernatural"]{ background: var(--g-supernatural); }
.gq[data-genre="horror"], .dd-swatch[data-genre="horror"]{ background: var(--g-horror); }
.gq[data-genre="ecchi"], .dd-swatch[data-genre="ecchi"]{ background: var(--g-ecchi); }
.gq[data-genre="sports"], .dd-swatch[data-genre="sports"]{ background: var(--g-sports); }
.gq[data-genre="music"], .dd-swatch[data-genre="music"]{ background: var(--g-music); }
.gq[data-genre="psychological"], .dd-swatch[data-genre="psychological"]{ background: var(--g-psychological); }
.gq[data-genre="mecha"], .dd-swatch[data-genre="mecha"]{ background: var(--g-mecha); }
.gq[data-genre="mahou-shoujo"], .dd-swatch[data-genre="mahou-shoujo"]{ background: var(--g-mahou-shoujo); }

.anime-right{
  display:grid;
  gap:8px;
  justify-items:end;
}

.right-row{
  display:flex;
  gap:8px;
  align-items:center;
}

.btn-chip{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(11,18,34,.78);
  color:var(--text);
  cursor:pointer;
  font-size:16px;
  line-height:0;
}
.btn-chip:hover{background:rgba(34,48,74,.25)}
.fav-btn{ cursor:pointer; }

.anime-card.is-removing{
  opacity:0;
  transform:translateY(-6px) scale(.985);
  max-height:0;
  margin:0;
  padding-top:0;
  padding-bottom:0;
  overflow:hidden;
}

/* ===== Details / Expand ===== */
.details{
  grid-column: 1 / -1;
  margin-top: 10px;
  border-top: 1px solid rgba(34,48,74,.75);
  padding-top: 10px;
  display:none;
}

.anime-card.open .details{display:block}

.cast-loading,
.cast-empty{
  color: var(--muted);
  font-size: 12px;
  padding: 6px 2px;
}

/* ===== Cast/Streaming UI ===== */
.cast-wrap{
  display:grid;
  gap:10px;
}

.cast-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.cast-title{
  font-size: 12px;
  color: rgba(229,231,235,.9);
  letter-spacing: .2px;
}

.cast-controls{
  display:flex;
  gap:8px;
  align-items:center;
}

.lang-btn{
  border:1px solid rgba(34,48,74,.8);
  background:rgba(11,18,34,.55);
  color:rgba(229,231,235,.9);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
}
.lang-btn:hover{background:rgba(34,48,74,.25)}
.lang-btn.active{
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 0 0 3px rgba(56,189,248,.12);
}

.stream-wrap{
  display:grid;
  gap:8px;
  padding:10px;
  border:1px solid rgba(34,48,74,.65);
  border-radius:12px;
  background: rgba(11,18,34,.45);
}

.stream-title{
  font-size: 12px;
  color: rgba(229,231,235,.9);
  letter-spacing: .2px;
}

.stream-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.stream-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(34,48,74,.8);
  background:rgba(11,18,34,.6);
  color:rgba(229,231,235,.92);
  text-decoration:none;
  font-size:12px;
}
.stream-link:hover{background:rgba(34,48,74,.25)}

.stream-icon{
  width:16px;
  height:16px;
  border-radius:4px;
  object-fit:cover;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
  background: rgba(255,255,255,.08);
}

.cast-list{
  display:grid;
  gap:6px;
}

.cast-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border:1px solid rgba(34,48,74,.65);
  border-radius:12px;
  background: rgba(11,18,34,.55);
}

.cast-left{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
  font-size: 12px;
  color: rgba(229,231,235,.92);
}

.cast-right{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
  font-size: 12px;
  color: rgba(148,163,184,.95);
  text-align:right;
}

.cast-role{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(34,48,74,.8);
  color: rgba(148,163,184,.95);
  font-size: 10px;
  vertical-align: middle;
}

.cast-footer{
  color: rgba(148,163,184,.85);
  font-size: 12px;
}

.more-btn{
  justify-self:start;
  border:1px solid rgba(34,48,74,.8);
  background:rgba(11,18,34,.78);
  color:rgba(229,231,235,.9);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-size:12px;
}
.more-btn:hover{background:rgba(34,48,74,.25)}

/* ===== Footer ===== */
.footer{
  margin-top:32px;
  padding:18px 12px;
  text-align:center;
}
.footer-inner{
  font-size:13px;
  color:var(--muted);
  opacity:.85;
  transition:opacity 200ms ease;
}
.footer-inner:hover{opacity:1}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.lightbox.open{display:block}
.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
}
.lightbox-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(620px,92vw);
  background:rgba(11,18,34,.98);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow:0 20px 70px rgba(0,0,0,.45);
}
.lightbox-close{
  position:absolute;
  right:10px;
  top:10px;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
.lightbox-close:hover{background:rgba(34,48,74,.25)}
.lightbox-img{
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid var(--border);
  display:block;
}
.lightbox-title{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.3;
}

@media (max-width: 900px){
  .calendar-grid{grid-template-columns:1fr}
  .day-col{height:auto}
  .dd-menu{width:min(360px, 94vw)}
  .cast-row{grid-template-columns:1fr}
  .cast-right{text-align:left}
}