:root {
  --primary: #de2121;
  --secondary: #f3b21c;
  --bg-overlay: rgba(10, 5, 18, 0.84);
  --card-bg: rgba(17, 14, 31, 0.84);
  --card-bg-2: rgba(30, 24, 48, 0.72);
  --card-border: rgba(255,255,255,0.08);
  --text: #ffffff;
  --muted: #c0bcd4;
  --success: #44d17c;
  --danger: #ff6565;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(var(--bg-overlay), var(--bg-overlay)), url('uploads/background_image_file_69cee63a2f7659.72275781.jpg') center/cover fixed no-repeat;
}
body.admin-body {
  background:
    radial-gradient(circle at top right, rgba(255,49,49,.12), transparent 24%),
    radial-gradient(circle at top left, rgba(243,178,28,.08), transparent 20%),
    linear-gradient(135deg, #0b0610, #140c23 45%, #0e0717);
}
a { color: inherit; }
img { max-width: 100%; }
.container { width: min(1320px, calc(100% - 32px)); margin: 0 auto; }
.topbar {
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:24px 0;
}
.topbar-actions { display:flex; gap: 12px; flex-wrap: wrap; }
.brand { display:flex; align-items:center; gap:18px; }
.brand img { width:72px; height:72px; object-fit:contain; filter: drop-shadow(0 12px 24px rgba(0,0,0,.45)); }
.brand h1 { margin:0; font-size: 30px; }
.brand p { margin:6px 0 0; color: var(--muted); }
.hero {
  display:grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items:center;
  padding: 14px 0 28px;
}
.hero-card, .mascot-card, .card, .admin-card, .toolbar-card, .featured-item, .login-card {
  background: linear-gradient(180deg, rgba(26, 19, 44, 0.92), rgba(15, 12, 28, 0.92));
  border: 1px solid var(--card-border);
  border-radius: 28px;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.hero-card { padding: 34px; }
.hero-card h2 { font-size: clamp(34px, 4vw, 52px); margin: 12px 0; line-height: 1.05; }
.hero-card p { color: var(--muted); font-size: 18px; line-height: 1.6; }
.badge-row { display:flex; gap:10px; flex-wrap:wrap; }
.badge {
  display:inline-flex; padding:10px 16px; border-radius:999px; font-weight:900;
  background: linear-gradient(90deg, var(--primary), var(--secondary)); color:#fff; letter-spacing:.04em; font-size:12px;
}
.badge.ghost { background: rgba(255,255,255,.08); }
.notice-bar {
  margin-top: 18px; padding: 14px 18px; border-radius: 18px;
  background: rgba(255,255,255,.05); color: #ece8ff; border:1px solid rgba(255,255,255,.06);
}
.highlight {
  display:inline-flex; margin-top:12px; padding:10px 16px; border-radius:999px;
  background: linear-gradient(90deg, var(--primary), var(--secondary)); font-weight:700;
}
.mini-stats {
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin-top: 22px;
}
.mini-stats div { padding:14px 16px; border-radius:18px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06); }
.mini-stats strong { display:block; font-size:26px; }
.mini-stats span { color: var(--muted); font-size: 13px; }
.mascot-card { padding: 18px; text-align:center; min-height: 100%; display:grid; place-items:center; }
.mascot-card img { max-width:100%; max-height:420px; object-fit:contain; filter: drop-shadow(0 20px 36px rgba(0,0,0,.45)); }
.toolbar-card { padding: 18px; margin-bottom: 22px; }
.filters { display:grid; grid-template-columns: 1.8fr 1fr auto auto; gap: 14px; align-items:center; }
.search-input { position: relative; }
.grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 26px; padding-bottom: 42px;
}
.card { overflow:hidden; position: relative; }
.card-cover { height: 220px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.03); position:relative; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-placeholder {
  width: 100%; height: 100%; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at top, rgba(255,255,255,.12), rgba(255,255,255,.03)), linear-gradient(135deg, rgba(255,255,255,.04), rgba(0,0,0,.2));
  color:#fff; font-size: 52px; font-weight:700;
}
.corner-badge {
  position:absolute; top:16px; right:16px; padding:8px 12px; border-radius:999px;
  background: linear-gradient(90deg, var(--primary), var(--secondary)); font-size:11px; font-weight:800;
}
.card-body { padding: 24px; }
.card h3 { margin:10px 0 8px; font-size: 24px; }
.category { color: var(--secondary); font-weight:800; letter-spacing:.4px; text-transform: uppercase; font-size: 12px; }
.desc { color: var(--muted); min-height:66px; line-height: 1.55; }
.app-meta-top, .meta-row { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.version-chip { background: rgba(255,255,255,.08); border-radius:999px; padding:8px 12px; font-size: 12px; font-weight:700; }
.meta-row { margin: 10px 0; font-size: 14px; color: #f1eefb; }
.muted-row { color: var(--muted); }
.info-box {
  margin: 16px 0; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06);
}
.info-box strong { display:block; font-size: 13px; color: #d4d0e9; margin-bottom:8px; text-transform:uppercase; }
.code { font-size: 34px; font-weight:900; color: #7da0ff; letter-spacing:1px; }
.buttons { display:grid; gap: 12px; margin-top: 18px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding: 14px 20px; border:none; border-radius: 999px; cursor:pointer;
  font-weight: 800; text-decoration:none; color:#fff;
  background: linear-gradient(90deg, #6178ff, #9d4edd);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.btn.secondary { background: linear-gradient(90deg, var(--primary), var(--secondary)); }
.btn.dark { background: #1b1830; }
.btn.danger { background: linear-gradient(90deg, #931f2e, #c6264d); }
.footer { padding: 24px 0 48px; color: var(--muted); text-align:center; }
.featured-strip { margin-bottom: 28px; }
.featured-strip h2 { margin: 0 0 16px; }
.featured-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.featured-item { padding: 22px; display:grid; gap: 16px; }
.empty-state { grid-column: 1/-1; text-align:center; }
.floating-mascot {
  position: fixed; right: 24px; bottom: 18px; width: 120px; z-index: 9;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.45)); opacity: .92; pointer-events:none;
}

/* Admin */
.admin-shell { display:grid; grid-template-columns: 280px 1fr; min-height:100vh; }
.sidebar {
  background: rgba(8, 8, 16, .78); border-right:1px solid rgba(255,255,255,.08); padding:24px; position: sticky; top:0; height:100vh;
}
.sidebar .logo { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.sidebar .logo img { width:56px; height:56px; object-fit:contain; }
.sidebar a {
  display:block; padding:14px 16px; margin-bottom:10px; text-decoration:none; color:#fff; border-radius:16px; background: rgba(255,255,255,.03);
}
.sidebar a:hover, .sidebar a.active { background: linear-gradient(90deg, rgba(255,43,43,.25), rgba(248,180,0,.22)); }
.content { padding:28px; }
.admin-card { padding:24px; margin-bottom:22px; }
.admin-header { display:flex; align-items:center; justify-content:space-between; gap: 16px; margin-bottom:20px; flex-wrap: wrap; }
.admin-header-actions { display:flex; gap:10px; flex-wrap:wrap; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:14px 12px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; vertical-align: middle; }
input, textarea, select {
  width:100%; padding:14px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.06); color:#fff; outline:none; margin-top:8px;
}
input[type="checkbox"] { width:auto; margin-right:10px; }
input[type="file"] { padding: 10px; }
label { display:block; margin-bottom:16px; font-weight:700; }
.checkbox-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin: 6px 0 16px; }
textarea { min-height:120px; resize:vertical; }
.form-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card { width:min(460px, 100%); padding:28px; }
.alert { padding:16px 18px; border-radius:16px; margin-bottom:18px; }
.alert.success { background: rgba(0, 160, 80, .2); border:1px solid rgba(0, 160, 80, .4); }
.alert.error { background: rgba(200, 20, 20, .2); border:1px solid rgba(200, 20, 20, .4); }
.small { font-size: 13px; color: var(--muted); }
.stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.stat-card { padding: 22px; border-radius: 22px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
.stat-card strong { display:block; font-size: 32px; margin-top: 8px; }
.inline-form { display:flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.inline-form > * { flex: 1; min-width: 180px; }
.app-thumb { width: 68px; height: 68px; border-radius: 16px; object-fit: cover; background: rgba(255,255,255,.05); }
.dropzone {
  border: 1px dashed rgba(255,255,255,.18); border-radius: 20px; padding: 18px; background: rgba(255,255,255,.03);
}
.preview-box {
  margin-top: 8px; display:flex; align-items:center; gap:14px; flex-wrap: wrap; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.04);
}
.preview-box img { width: 76px; height: 76px; object-fit: cover; border-radius: 16px; }
.inline-note { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.04); margin: 8px 0 16px; }
.kbd {
  display:inline-flex; padding:5px 9px; border-radius:10px; background: rgba(255,255,255,.08); font-size: 12px; border:1px solid rgba(255,255,255,.08);
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr; }
  .admin-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
}
@media (max-width: 640px) {
  .container { width: min(100% - 20px, 1320px); }
  .brand h1 { font-size: 24px; }
  .hero-card { padding: 24px; }
  .mini-stats { grid-template-columns: 1fr; }
  .floating-mascot { width: 82px; right: 10px; bottom: 10px; }
}

.hero-slider { position:relative; overflow:hidden; min-height: 420px; }
.hero-slider .slides { position:relative; min-height:420px; }
.hero-slide {
  display:none; position:relative; min-height:420px; padding:34px;
  grid-template-columns: 1.1fr .9fr; gap:24px; align-items:center;
}
.hero-slide.active { display:grid; animation: fadeIn .5s ease; }
.hero-slide-image { min-height: 320px; border-radius: 24px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); }
.hero-slide-image img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-slide-image .fallback { width:100%; height:100%; display:grid; place-items:center; font-size:36px; font-weight:900; background: radial-gradient(circle at top left, rgba(255,255,255,.12), rgba(255,255,255,.03)); }
.slider-dots { display:flex; gap:10px; margin-top:18px; }
.slider-dot { width:12px; height:12px; border-radius:999px; background:rgba(255,255,255,.18); cursor:pointer; border:none; }
.slider-dot.active { background:linear-gradient(90deg,var(--primary),var(--secondary)); width:34px; }
.card-screens { display:flex; gap:10px; overflow:auto; padding-bottom:4px; margin-top:12px; }
.card-screens img { width:120px; height:76px; border-radius:14px; object-fit:cover; border:1px solid rgba(255,255,255,.08); flex:0 0 auto; cursor:pointer; }
.code-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.btn.small-btn { min-height:40px; padding:10px 14px; font-size:13px; }
.copy-feedback { font-size:12px; color:var(--secondary); font-weight:700; display:none; }
.screens-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:14px; margin-top:12px; }
.screen-admin-item { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); padding:10px; border-radius:18px; }
.screen-admin-item img { width:100%; height:120px; border-radius:14px; object-fit:cover; display:block; }
@keyframes fadeIn { from {opacity:.4; transform: translateY(8px);} to {opacity:1; transform:none;} }

@media (max-width: 980px) {
  .hero-slide, .hero-slide.active { grid-template-columns: 1fr; }
}