:root{
  --bg:#161a21; --bg-base: #161a21; --panel:#0a0f16; --panel-2:#0d131c; --line:#18202e;
  --text:#e8edf3; --muted:#8b96a5; --green:#22c55e; --green-d:#15803d;
  --purple:#a855f7; --purple-d:#5b21b6; --red:#ef4444; --gold:#facc15;
  --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg-base);color:var(--text);font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* Layout */
.wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;max-width:1180px;margin:16px auto;padding:0 0px; background-color:var(--bg);}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.stack{display:flex;flex-direction:column;gap:16px}

/* Responsive */
@media (max-width:900px){
  .wrap{grid-template-columns:1fr}
  .footer{justify-content:center;flex-wrap:wrap}
}

/* Tilte */
.page-title {
  font-size: 30px;
  font-weight: 800;
  margin: 24px 0;
}

.page-title.index-title{
  font-size: 55px;
}


.page-title span {
  color: var(--green);
}

.green.page-title span {
  color: var(--green);
}

.purple.page-title span {
  color: var(--purple);
}

/* Notice */
.notice{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px}
.age{width:38px;height:38px;border:1.5px solid var(--muted);border-radius:50%;display:grid;place-items:center;font-size:12px;flex:none}


/* Star half */
.star--half{
  position:relative;
  display:inline-block;
  color:#ccc;
}
.star--half::before{
  content:'★';
  position:absolute;
  left:0;
  top:0;
  width:50%;
  overflow:hidden;
  color:#f5b301;
}

.stars{color:var(--gold);letter-spacing:2px;font-size:15px}

/* Filter Controls & Tabs */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-btn:hover {
  color: var(--text);
  border-color: #3b4d6b;
}
.filter-btn.active {
  background: #0f2e1b;
  border-color: var(--green);
  color: #fff;
}

.hide {
  display: none !important;
}

@media (max-width: 768px) {

  body{
    font:19px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  .page-title.index-title{
    font-size: 40px;
  }

  .page-title{
    font-size: 33px;
  }

  .wrap{
    padding: 0 16px;
  }

  p, span, h1, h2, h3 {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}