:root{
    --bg:#070b10;
    --bg-soft:#0d1218;
    --card:#10161d;
    --card-2:#131b23;
    --line:rgba(255,255,255,.08);
    --text:#f4f8fb;
    --muted:#9fb0c0;
    --accent:#d2ff1f;
    --accent-2:#f1ff8d;
    --danger:#ff5d5d;
    --success:#4be28a;
    --shadow:0 16px 40px rgba(0,0,0,.34);
    --radius:24px;
    --radius-sm:18px;
    --container:min(1320px, calc(100vw - 32px));
    --font:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:
radial-gradient(circle at top, rgba(210,255,31,.10), transparent 32%),
linear-gradient(180deg,#06090d 0%,#091019 100%);
color:var(--text)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
.container{width:var(--container);margin:0 auto}
.site-header{position:sticky;top:0;z-index:40;background:rgba(7,11,16,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.header-row{display:grid;grid-template-columns:300px minmax(0,1fr) 160px;gap:16px;align-items:center;padding:16px 0}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:44px;height:44px;border-radius:14px;box-shadow:0 0 26px rgba(210,255,31,.22)}
.brand strong{display:block;font-size:1.08rem;line-height:1.1}
.brand small{display:block;color:var(--muted);margin-top:4px}
.search-form{display:flex;align-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:6px 8px}
.search-form input{flex:1;min-width:0;background:transparent;border:0;color:var(--text);padding:10px 14px;outline:0}
.search-form button{width:44px;height:44px;border-radius:999px;border:0;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0b0f14;cursor:pointer}
.vpn-top-link{justify-self:end;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0b0f14;font-weight:800;box-shadow:var(--shadow)}
.nav-row{padding:0 0 16px}
.nav-scroll{display:flex;gap:12px;overflow:auto;padding-bottom:2px}
.nav-scroll a{white-space:nowrap;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted)}
.nav-scroll a:hover,.nav-scroll a:focus{color:var(--text);border-color:rgba(210,255,31,.35)}
.page-main{padding:28px 0 64px}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch}
.hero-card,.panel,.card,.vpn-promo,.stat-card,.admin-card,.empty-state{background:linear-gradient(180deg,rgba(19,27,35,.92),rgba(13,18,24,.96));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-copy{padding:34px}
.hero-copy h1{margin:0 0 16px;font-size:clamp(2rem,4vw,4rem);line-height:1.02;letter-spacing:-.03em}
.hero-copy p{margin:0;color:var(--muted);font-size:1.04rem;max-width:820px}
.badge-row{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 28px}
.badge{display:inline-flex;align-items:center;gap:10px;padding:11px 14px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;font-weight:700}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0b0f14;border-color:transparent}
.btn-dark{background:#0c1117}
.hero-side{padding:22px;display:flex;flex-direction:column;justify-content:space-between}
.hero-side .vpn-promo{padding:22px;height:100%}
.hero-side h2,.section-head h2,.admin-card h2{margin:0 0 12px;font-size:1.35rem}
.hero-side p,.section-head p,.muted,.app-copy p,.meta-list,.info-box p,.faq-item p{color:var(--muted)}
.hero-side img{width:86px;height:86px;border-radius:24px;margin-bottom:18px;box-shadow:0 0 34px rgba(210,255,31,.20)}
.grid-4,.grid-3,.apps-grid,.category-grid,.stats-grid,.admin-grid{display:grid;gap:18px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.apps-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.admin-grid{grid-template-columns:1fr 1fr}
.section{margin-top:32px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.section-head h2{font-size:1.6rem}
.card-link,.app-card,.category-card{display:flex;flex-direction:column;height:100%}
.card-link,.app-card,.category-card,.stat-card,.admin-card{padding:18px}
.app-thumb{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.app-thumb img{width:68px;height:68px;border-radius:18px;background:#111;object-fit:cover}
.app-title{margin:0;font-size:1.05rem;line-height:1.2}
.app-meta{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 12px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;font-size:.84rem;border:1px solid var(--line);color:var(--muted);background:rgba(255,255,255,.03)}
.pill-vpn{border-color:rgba(210,255,31,.28);background:rgba(210,255,31,.10);color:var(--accent-2)}
.app-card p,.category-card p{margin:0 0 16px;color:var(--muted);line-height:1.55}
.card-actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.category-card h3{margin:0 0 10px;font-size:1.08rem}
.kpi{font-size:2rem;font-weight:800;letter-spacing:-.04em}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);margin-bottom:14px}
.breadcrumbs a{color:var(--muted)}
.page-hero{padding:26px}
.page-hero h1{margin:0 0 14px;font-size:clamp(1.8rem,3.2vw,3rem);line-height:1.04}
.page-hero p{margin:0;color:var(--muted);max-width:900px}
.app-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:24px;align-items:start}
.app-sidebar,.app-main{padding:24px}
.app-main h1{margin:0 0 16px;font-size:clamp(1.8rem,3.2vw,3rem);line-height:1.03}
.app-logo{width:112px;height:112px;border-radius:28px;background:#0d1014;object-fit:cover;margin-bottom:16px}
.meta-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.meta-list li{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.info-box{padding:18px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid var(--line);margin-top:18px}
.download-box{display:grid;gap:16px}
.countdown{font-size:1.1rem;font-weight:700}
.hidden{display:none!important}
.pagination{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pagination a,.pagination span{padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted)}
.pagination .active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0b0f14;border-color:transparent}
.site-footer{border-top:1px solid var(--line);background:rgba(8,12,18,.9);padding:28px 0 18px}
.footer-grid{display:grid;grid-template-columns:1.1fr .8fr .9fr;gap:20px}
.footer-grid h3{margin:0 0 12px}
.footer-grid p{margin:0;color:var(--muted);line-height:1.6}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.footer-links a{color:var(--muted)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:18px;margin-top:22px;color:var(--muted)}
.table-wrap{overflow:auto}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.admin-table th{color:var(--muted);font-size:.92rem;font-weight:600}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-group{display:grid;gap:8px}
.form-group.full{grid-column:1/-1}
.input,.textarea,.select{width:100%;padding:14px 14px;border-radius:16px;border:1px solid var(--line);background:#0c1218;color:var(--text);outline:none}
.textarea{min-height:160px;resize:vertical}
.checkbox-row{display:flex;flex-wrap:wrap;gap:14px}
.login-shell{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login-card{width:min(520px,100%);padding:24px}
.chart-bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(24px,1fr));gap:10px;align-items:end;min-height:180px}
.chart-bar{display:flex;flex-direction:column;align-items:center;gap:8px}
.chart-bar span{width:100%;border-radius:14px 14px 8px 8px;background:linear-gradient(180deg,var(--accent),#9bc902);min-height:18px}
.chart-bar small{color:var(--muted);font-size:.75rem}
.notice{padding:14px 16px;border-radius:16px;margin-bottom:16px}
.notice-success{background:rgba(75,226,138,.12);border:1px solid rgba(75,226,138,.24)}
.notice-error{background:rgba(255,93,93,.12);border:1px solid rgba(255,93,93,.24)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:1180px){
    .apps-grid,.category-grid,.grid-4,.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .hero{grid-template-columns:1fr}
    .app-layout{grid-template-columns:1fr}
}
@media (max-width:900px){
    .header-row{grid-template-columns:1fr;gap:12px}
    .vpn-top-link{justify-self:start}
    .apps-grid,.category-grid,.grid-4,.grid-3,.stats-grid,.admin-grid,.footer-grid,.form-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
    .container{width:min(100vw - 20px, 1320px)}
    .hero-copy,.hero-side,.page-hero,.app-sidebar,.app-main,.app-card,.category-card,.admin-card{padding:18px}
    .apps-grid,.category-grid,.grid-4,.grid-3,.stats-grid,.admin-grid,.footer-grid,.form-grid{grid-template-columns:1fr}
    .footer-bottom{flex-direction:column}
}
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at top center, rgba(184, 255, 0, 0.10), transparent 28%),
    linear-gradient(180deg, #03060b 0%, #040913 100%);
  color: #f5f7fb;
  font-family: 'Inter', sans-serif;
}

.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1;
}

.container {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
}

.section {
  padding: 48px 0;
}

.section-head {
  margin-bottom: 24px;
}

.section-head h1,
.section-head h2 {
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1.1;
}

.section-head p {
  margin: 0;
  color: rgba(255,255,255,0.72);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(5, 10, 18, 0.78);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 86px;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  text-decoration: none;
}

.brand-logo {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(184,255,0,0.18), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.08);
  color: #d6ff3f;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-text strong {
  font-size: 22px;
}

.brand-text small {
  color: rgba(255,255,255,0.65);
  font-size: 13px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.header-nav a {
  color: rgba(255,255,255,0.86);
  text-decoration: none;
  font-weight: 600;
}

.hero {
  padding: 52px 0 20px;
}

.hero-card {
  border-radius: 32px;
  padding: 44px;
  background: linear-gradient(180deg, rgba(9,16,28,0.92), rgba(5,10,18,0.92));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 80px rgba(0,0,0,0.35);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(184,255,0,0.10);
  border: 1px solid rgba(184,255,0,0.22);
  color: #d6ff3f;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 16px;
}

.hero h1 {
  margin: 0 0 16px;
  font-size: 54px;
  line-height: 1;
}

.hero p {
  margin: 0;
  max-width: 900px;
  font-size: 18px;
  color: rgba(255,255,255,0.76);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.stat-card {
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.stat-card strong {
  display: block;
  font-size: 28px;
  margin-bottom: 6px;
}

.stat-card span {
  color: rgba(255,255,255,0.68);
}

.grid {
  display: grid;
  gap: 20px;
}

.categories-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.apps-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.category-card,
.app-card {
  border-radius: 26px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.category-card:hover,
.app-card:hover {
  transform: translateY(-3px);
  border-color: rgba(184,255,0,0.18);
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}

.category-card {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 22px;
}

.category-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.category-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(184,255,0,0.10);
  color: #d6ff3f;
}

.category-count {
  color: rgba(255,255,255,0.65);
  font-weight: 700;
}

.category-card h3,
.app-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
}

.category-card p,
.app-card p {
  margin: 0;
  color: rgba(255,255,255,0.68);
  line-height: 1.5;
}

.app-card-link {
  display: block;
  padding: 22px;
  text-decoration: none;
  color: #fff;
}

.app-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  background: rgba(255,255,255,0.04);
  margin-bottom: 18px;
}

.app-card-actions {
  display: flex;
  gap: 12px;
  padding: 0 22px 22px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: .2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(135deg, #cfff1a, #9fdf00);
  color: #111;
}

.btn-dark {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border-color: rgba(255,255,255,0.10);
}

.btn-light {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.08);
}

.btn-full {
  width: 100%;
}

.vpn-banner {
  border-radius: 30px;
  padding: 30px;
  background: linear-gradient(135deg, rgba(184,255,0,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(184,255,0,0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-footer {
  padding: 28px 0 40px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 40px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-links a {
  color: rgba(255,255,255,0.72);
  text-decoration: none;
}

.admin-auth-section {
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: center;
}

.admin-login-card {
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 32px;
  border-radius: 28px;
  background: rgba(10,16,26,0.94);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 80px rgba(0,0,0,0.35);
}

.admin-form {
  display: grid;
  gap: 18px;
}

.form-group {
  display: grid;
  gap: 10px;
}

.form-group label {
  font-weight: 700;
  color: rgba(255,255,255,0.86);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: #fff;
  outline: none;
  box-sizing: border-box;
}

.form-group textarea {
  min-height: 120px;
  padding-top: 14px;
}

.alert {
  padding: 14px 16px;
  border-radius: 16px;
  margin-bottom: 16px;
  font-weight: 600;
}

.alert-error {
  background: rgba(255, 72, 72, 0.10);
  border: 1px solid rgba(255, 72, 72, 0.18);
  color: #ffb7b7;
}

.admin-hint {
  margin-top: 16px;
  color: rgba(255,255,255,0.56);
  font-size: 14px;
}

@media (max-width: 1100px) {
  .categories-grid,
  .apps-grid,
  .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero h1 {
    font-size: 40px;
  }
}

@media (max-width: 720px) {
  .container {
    width: min(100% - 24px, 1280px);
  }

  .header-inner,
  .vpn-banner,
  .footer-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .categories-grid,
  .apps-grid,
  .stats-row {
    grid-template-columns: 1fr;
  }

  .hero-card,
  .admin-login-card {
    padding: 24px;
  }

  .hero h1 {
    font-size: 32px;
  }
}