/* --- Base & Theme --- */
:root{
  --bg:#0f1115;
  --fg:#f6f7fb;
  --muted:#9aa3b2;
  --card:#151a23;
  --accent:#7aa2ff;
  --border:#232a35;
  --pill:#1f2632;
  --shadow:0 6px 24px rgba(0,0,0,.35);
}
html,body{margin:0;padding:0}
*{box-sizing:border-box}
body{
  font: 15px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
}

/* --- Layout --- */
.container{max-width:1100px; margin:0 auto; padding: 16px 16px 40px}
header.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(15,17,21,.75);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px}
.brand .logo{
  width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg, #7aa2ff, #56e6ff);
  box-shadow: var(--shadow);
}
nav a{color:var(--fg); text-decoration:none; opacity:.85; padding:6px 10px; border-radius:10px}
nav a.active, nav a:hover{background:var(--pill); opacity:1}

footer.site-footer{border-top:1px solid var(--border); color:var(--muted); padding:18px 16px; text-align:center}

/* --- Typography & helpers --- */
h1{font-size:1.8rem; line-height:2.1rem; margin: 12px 0 6px}
h2{font-size:1.25rem; margin: 10px 0}
.muted{color:var(--muted)}

/* --- Toolbar --- */
.toolbar{display:flex; gap:12px; justify-content:space-between; align-items:center; margin:.5rem 0 1rem}
.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tab{border:1px solid var(--border); background:var(--pill); color:var(--fg); padding:.45rem .8rem; border-radius:999px; cursor:pointer; font-size:.9rem}
.tab.active{outline:2px solid var(--accent)}
.actions{display:flex; gap:8px; align-items:center}
#search{padding:.5rem .65rem; border:1px solid var(--border); background:var(--card); color:var(--fg); border-radius:10px; min-width:230px}
#toggle-theme{border:1px solid var(--border); background:var(--card); color:var(--fg); border-radius:10px; padding:.48rem .68rem; cursor:pointer}

/* --- Slider --- */
.slider{margin:1rem 0 1.2rem; position:relative; overflow:hidden; border-radius:16px; background:var(--card); border:1px solid var(--border)}
.slider .slides{display:flex; transition:transform .55s ease; will-change:transform}
.slider .slide{min-width:100%; position:relative; color:#fff; text-decoration:none}
.slider img{width:100%; height:300px; object-fit:cover; display:block; filter:saturate(1.05)}
.slider .caption{position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 90%);}
.slider .kicker{font-size:.82rem; opacity:.95}
.slider .headline{font-size:1.1rem; font-weight:800; line-height:1.3rem; text-shadow:0 1px 12px rgba(0,0,0,.6)}
.slider .nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45); border:0; color:#fff; font-size:24px; width:44px; height:44px; border-radius:50%; cursor:pointer}
.slider .nav.prev{left:10px} .slider .nav.next{right:10px}
.slider .dots{position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:6px}
.slider .dots button{width:8px; height:8px; border-radius:50%; border:0; background:#bbb; opacity:.9; cursor:pointer}
.slider .dots button.active{background:#fff}

/* --- Grid & Cards --- */
.grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:14px}
.card{display:flex; flex-direction:column; overflow:hidden; border-radius:16px; background:var(--card); border:1px solid var(--border); text-decoration:none; color:var(--fg); box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.45)}
.thumb{width:100%; height:168px; object-fit:cover; background:#0b0e13}
.card-body{padding:12px 12px 14px}
.title{font-weight:800; font-size:1rem; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden}
.source{display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:.86rem}
.pill{background:var(--pill); border-radius:999px; padding:.15rem .5rem; border:1px solid var(--border); color:#c8d2e0}

/* --- Save button & sentinel --- */
.card{position:relative}
.save-btn{position:absolute; top:8px; right:8px; background:rgba(0,0,0,.45); color:#fff; border:0; width:30px; height:30px; border-radius:50%; font-size:16px; cursor:pointer}
.save-btn.saved{background:#ffd54d; color:#111}
#load-sentinel{height:52px; display:flex; align-items:center; justify-content:center; color:var(--muted)}

/* --- Responsive tweaks --- */
@media (min-width: 900px){
  .slider img{height:360px}
  .thumb{height:180px}
}

.logo-img{width:32px;height:32px;border-radius:10px;object-fit:cover;box-shadow:var(--shadow)}
.brand-text{font-weight:800;letter-spacing:.3px}

/* --- Modal --- */
.modal.hidden{display:none}
.modal .overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(2px);}
.modal .dialog{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--card); border:1px solid var(--border); color:var(--fg); padding:18px; width:min(92vw, 420px); border-radius:16px; box-shadow:var(--shadow)}
.modal .close{position:absolute; right:10px; top:8px; background:transparent; border:0; color:var(--fg); font-size:22px; cursor:pointer}
#code-form{display:flex; flex-direction:column; gap:8px}
#code-form input{padding:.6rem .7rem; border:1px solid var(--border); background:var(--bg); color:var(--fg); border-radius:10px}
#code-form button{padding:.6rem .8rem; border-radius:10px; border:1px solid var(--border); background:var(--pill); color:var(--fg); cursor:pointer}
#code-wrap.hidden{display:none}

/* --- Store grid --- */
.store-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:14px}
.store-grid .card .thumb{height:200px}
.btn{display:inline-block; padding:.6rem .8rem; background:var(--accent); color:#0f1115; border-radius:10px; text-decoration:none; font-weight:700; border:0}
.badge{padding:.15rem .5rem; background:var(--pill); border:1px solid var(--border); border-radius:999px; margin-left:8px}

/* --- Free Apps grid --- */
.apps-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin-top:.6rem}
.apps-grid .app-card{background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.apps-grid .app-card .thumb{height:140px; width:100%; object-fit:cover; background:#0b0e13}
.apps-grid .app-card .card-body{padding:12px 12px 14px}
.apps-grid .app-card .title{font-weight:800; font-size:1rem; margin-bottom:6px}

#app-search{padding:.5rem .65rem; border:1px solid var(--border); background:var(--card); color:var(--fg); border-radius:10px; min-width:260px}