:root{
  --bg:#0b1220;
  --card:#0f172a;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --accent:#22c55e;
  --border:rgba(148,163,184,.18);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(34,197,94,.25), transparent 55%),
              radial-gradient(1200px 600px at 90% 10%, rgba(99,102,241,.25), transparent 55%),
              var(--bg);
  color: var(--text);
}

a{color:inherit; text-decoration:none}
a:hover{color: var(--accent);}

.navbar{
  backdrop-filter: blur(8px);
  background: rgba(11,18,32,.7);
  border-bottom: 1px solid var(--border);
}

.brand-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:800; letter-spacing:.04em;
}

.brand-dot{
  width:10px;height:10px;border-radius:999px;background:var(--accent);
  box-shadow: 0 0 0 6px rgba(34,197,94,.18);
}

.searchbar{
  background: rgba(15,23,42,.75);
  border:1px solid var(--border);
  border-radius: 999px;
  padding:.55rem .75rem;
}
.searchbar input{
  background: transparent;
  border:0;
  outline:0;
  color:var(--text);
  width:100%;
}
.btn-accent{
  background: var(--accent);
  border: 0;
  color:#05120a;
  font-weight:700;
}
.btn-accent:hover{ filter: brightness(.95); }
.btn-soft{
  background: rgba(148,163,184,.12);
  border:1px solid var(--border);
  color: var(--text);
}
.btn-soft:hover{ background: rgba(148,163,184,.18); }

.hero{
  margin-top: 86px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15,23,42,.65), rgba(15,23,42,.35));
  box-shadow: var(--shadow);
}
.hero h1{font-weight:800; letter-spacing:-.02em}
.hero p{color: var(--muted); margin:0}

.section{
  margin-top: 26px;
}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin-bottom: 12px;
}
.section-title{
  font-weight:800;
  letter-spacing:-.015em;
}
.section-subtitle{
  color: var(--muted);
  font-size:.95rem;
}

.grid-cards{
  display:grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap: 12px;
}
@media(min-width: 576px){
  .grid-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media(min-width: 992px){
  .grid-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.card-app{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(15,23,42,.75);
  border:1px solid var(--border);
  box-shadow: 0 12px 22px rgba(0,0,0,.22);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.card-app:hover{
  transform: translateY(-2px);
  border-color: rgba(34,197,94,.35);
  background: rgba(15,23,42,.9);
}
.icon{
  width:56px; height:56px; border-radius: 14px; flex:0 0 auto;
  background: rgba(148,163,184,.12);
  border:1px solid var(--border);
  overflow:hidden;
}
.icon img{width:100%;height:100%;object-fit:cover;display:block}
.card-meta{min-width:0}
.card-name{
  font-weight:800;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-sub{
  color: var(--muted);
  font-size:.92rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.badges{
  margin-top: 8px;
  display:flex; flex-wrap:wrap; gap:6px;
}
.badge-pill{
  font-size:.75rem;
  color: rgba(229,231,235,.92);
  border:1px solid var(--border);
  background: rgba(148,163,184,.10);
  padding: .2rem .5rem;
  border-radius: 999px;
}

.genre-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
@media(min-width: 768px){
  .genre-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media(min-width: 1200px){
  .genre-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
}
.genre-tile{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(15,23,42,.65);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.genre-tile:hover{ border-color: rgba(34,197,94,.35); }
.genre-tile span{font-weight:700}
.genre-tile small{color: var(--muted);}

.page-head{
  margin-top: 86px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}
.page-head p{margin:0;color: var(--muted);}

.detail-card{
  margin-top: 18px;
  border-radius: 18px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.7);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.detail-top{
  padding: 16px;
  display:flex;
  gap: 14px;
  align-items:center;
  border-bottom:1px solid var(--border);
}
.detail-top .icon{width:72px;height:72px;border-radius:18px;}
.detail-title{font-weight:900; margin:0}
.detail-kv{color: var(--muted); margin:0}
.detail-body{padding: 16px;}
.kv-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media(min-width: 768px){
  .kv-row{ grid-template-columns: repeat(4, 1fr); }
}
.kv{
  border:1px solid var(--border);
  background: rgba(148,163,184,.08);
  border-radius: 14px;
  padding: 10px 12px;
}
.kv label{display:block;color: var(--muted); font-size:.8rem}
.kv strong{font-size: .95rem}

.screens{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
@media(min-width: 992px){
  .screens{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.screen{
  border-radius: 14px;
  overflow:hidden;
  border:1px solid var(--border);
  background: rgba(148,163,184,.08);
  aspect-ratio: 9 / 16;
}
.screen img{width:100%;height:100%;object-fit:cover;display:block}

.footer{
  margin-top: 40px;
  padding: 24px 0 34px;
  border-top:1px solid var(--border);
  color: var(--muted);
}

/* Download bottom area */
.ad-slot{
  border: 1px dashed var(--border);
  background: rgba(148,163,184,.06);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  color: var(--muted);
}
.download-box{
  border:1px solid var(--border);
  background: rgba(148,163,184,.08);
  border-radius: 18px;
  padding: 16px;
}

/* Bootstrap helper override: make .text-muted readable on dark UI */
.text-muted{ color: var(--muted) !important; }