:root{
  --bg:#0b0d10; --panel:#14181d; --muted:#8aa0b2; --text:#e6eef5; --accent:#6bc2ff;
  --table-border:#20262d; --chip:#1b222a;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0; background:var(--bg); color:var(--text); font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.container{max-width:1080px; margin:0 auto; padding:0 16px}

.site-header{position:sticky; top:0; z-index:10; background:rgba(11,13,16,.9); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--table-border)}
.header-inner{display:flex; align-items:center; gap:16px; padding:10px 0}
.logo{font-weight:800; color:var(--text); text-decoration:none; font-size:18px}
.nav{display:flex; gap:12px; margin-left:8px}
.nav a{color:var(--muted); text-decoration:none; padding:6px 8px; border-radius:6px}
.nav a.active{color:var(--text); background:var(--chip)}
.nav a.disabled{opacity:.6; pointer-events:none}
.search{margin-left:auto}
.search input{background:var(--panel); border:1px solid var(--table-border); border-radius:8px; padding:8px 10px; color:var(--text); width:260px}

.toolbar{display:flex; justify-content:space-between; gap:12px; padding:16px 0}
.toolbar label{display:inline-flex; flex-direction:column; gap:6px; color:var(--muted); font-size:12px}
.toolbar select{background:var(--panel); border:1px solid var(--table-border); border-radius:8px; padding:8px 10px; color:var(--text); min-width:160px}

.table-wrap{background:var(--panel); border:1px solid var(--table-border); border-radius:10px; overflow:hidden}
.mv-table{width:100%; border-collapse:collapse}
.mv-table thead{background:#0f1317}
.mv-table th,.mv-table td{padding:10px 12px; border-bottom:1px solid var(--table-border); text-align:left}
.mv-table th{font-weight:600; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em}
.mv-table th.sortable{cursor:pointer}
.mv-table tr:hover td{background:#10151a}
.mv-thumb{width:56px; height:56px; border-radius:6px; object-fit:cover; display:block}
.mv-title{color:var(--text); text-decoration:none}
.mv-title:hover{color:var(--accent)}
.mv-group{color:var(--muted); text-decoration:none}
.mv-group:hover{color:var(--text)}
.stat{color:var(--text)}
.muted{color:var(--muted)}

.site-footer{color:var(--muted); padding:24px 0}

/* Modal */
.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6)}
.modal__dialog{position:relative; background:var(--panel); border:1px solid var(--table-border); border-radius:12px; width:min(960px, 92vw); box-shadow:0 10px 30px rgba(0,0,0,.4)}
.modal__content{padding:0}
.modal__close{position:absolute; top:8px; right:8px; background:#0000; border:1px solid var(--table-border); color:var(--muted); border-radius:8px; padding:6px 10px; cursor:pointer}
.player-embed{aspect-ratio:16/9; width:100%}

/* Cards (mobile) */
.cards{display:none; margin-top:16px}
.cards .card{display:grid; grid-template-columns:96px 1fr; gap:12px; padding:12px; border:1px solid var(--table-border); border-radius:10px; background:var(--panel); margin-bottom:10px}
.cards .thumb{width:96px; height:96px; object-fit:cover; border-radius:8px}
.cards .title{color:var(--text); text-decoration:none; font-weight:600}
.cards .meta{color:var(--muted); font-size:12px}
.cards .stats{color:var(--text); font-weight:600}

/* Page headers */
.group-header,
.idol-header,
.page-header {
  padding: 24px 0 12px;
}
.media-header {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 16px;
  align-items: start;
}
.group-header h1,
.idol-header h1,
.page-header h1 {
  margin: 0 0 4px;
  font-size: 24px;
}
.group-header p,
.idol-header p,
.page-header p {
  margin: 0;
}

/* Simple grid cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0 24px;
}
.group-card,
.idol-card {
  background: var(--panel);
  border: 1px solid var(--table-border);
  border-radius: 10px;
  padding: 12px;
}
.group-card .cover,
.idol-card .cover {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}
.avatar {
  width: 112px;
  height: 112px;
  border-radius: 10px;
  object-fit: cover;
}
.avatar--placeholder {
  width: 112px;
  height: 112px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1b222a;
  color: var(--muted);
  font-weight: 700;
  font-size: 28px;
  user-select: none;
}
.chips { margin: 6px 0; }
.group-card h2,
.idol-card h2 {
  margin: 0 0 6px;
  font-size: 16px;
}
.group-card h2 a,
.idol-card h2 a {
  color: var(--text);
  text-decoration: none;
}
.group-card h2 a:hover,
.idol-card h2 a:hover {
  color: var(--accent);
}
.small {
  font-size: 12px;
}
.badge {
  display: inline-block;
  background: var(--chip);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--muted);
}

.simple-toolbar {
  padding: 16px 0 8px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.simple-toolbar input[type="search"] {
  background: var(--panel);
  border: 1px solid var(--table-border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  min-width: 220px;
}
.simple-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.simple-toolbar select {
  background: var(--panel);
  border: 1px solid var(--table-border);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--text);
  min-width: 140px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* Calendar */
.cal-toolbar { padding: 16px 0 8px; display:flex; gap:8px; align-items:center; }
.cal-toolbar button { background: var(--panel); color: var(--text); border:1px solid var(--table-border); border-radius:8px; padding:6px 10px; cursor:pointer }
.cal-toolbar .muted { margin-left: 8px; }
.calendar-wrapper { display:grid; grid-template-columns: 2fr 1fr; gap:16px; }
.calendar-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; }
.calendar-weekdays { display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; margin-bottom:8px; }
.calendar-weekdays div { text-align:center; color: var(--muted); font-size:12px; }
.calendar-cell { background: var(--panel); border:1px solid var(--table-border); border-radius:8px; padding:8px; min-height:120px; }
.calendar-cell--today { border-color: #8a6bff; box-shadow: 0 0 0 1px rgba(138,107,255,0.5); }
.calendar-cell .day-num { color: var(--muted); font-size:12px; margin-bottom:6px; }
.event { display:block; color: var(--text); text-decoration:none; font-size:12px; margin:2px 0; }
.event small { color: var(--muted); }
.upcoming { background: var(--panel); border:1px solid var(--table-border); border-radius:8px; padding:10px; }
.upcoming h3 { margin:0 0 6px; font-size:14px; }
.upcoming .item { margin:6px 0; font-size:13px; }

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

@media (max-width: 720px){
  .search input{width:140px}
  .toolbar{flex-direction:column; align-items:flex-start}
  /* hide table on small; show cards instead */
  .table-wrap{display:none}
  .cards{display:block}
}