:root{
  --bg: #f5f7fb;
  --bg-soft: #eef2f8;
  --card: #ffffff;
  --card-hover: #f8faff;
  --primary: #6d3df5;
  --primary-2: #19bfe0;
  --text: #182033;
  --text-dim: #667085;
  --success: #16a34a;
  --danger: #dc2626;
  --border: #dfe4ee;
  --radius: 16px;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  font-family: 'Inter', sans-serif;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 48%, #eef2f8 100%) fixed;
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
}

.container{ max-width: 1200px; margin: 0 auto; padding: 0 20px; }

a{ color: inherit; text-decoration: none; }

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; gap:24px; padding:16px 20px; flex-wrap:wrap;
}
.logo{
  font-family:'Orbitron', sans-serif;
  font-weight:800; font-size:22px; letter-spacing:1px; color: #172033; white-space:nowrap;
}
.logo span{ color: var(--primary-2); }

.main-nav{ display:flex; gap:8px; }
.nav-group{ position:relative; }
.nav-cat{
  display:block; padding:10px 16px; border-radius:10px; cursor:pointer;
  font-weight:700; color: var(--text-dim); transition:.2s;
}
.nav-group:hover .nav-cat{ background: #f1f4fa; color:var(--text); }
.nav-drop{
  position:absolute; top:100%; left:0; min-width:160px;
  background: var(--card); border:1px solid var(--border); border-radius:12px;
  padding:8px; display:none; flex-direction:column; gap:4px;
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}
.nav-group:hover .nav-drop{ display:flex; }
.nav-drop a{ padding:10px 12px; border-radius:8px; color:var(--text); font-weight:500; }
.nav-drop a:hover{ background: var(--primary); color:#fff; }

.search-form{
  flex:1; min-width:240px; max-width:400px; display:flex;
  height:46px; background:#fff; border:1px solid var(--border); border-radius:13px; overflow:hidden;
  box-shadow:0 4px 14px rgba(16,24,40,.06);
}
.search-form input{
  flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--text);
  padding:10px 14px; font-family:inherit; font-size:14px;
}
.search-form button{
  width:48px; min-width:48px; background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border:none; color:#fff; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.burger{ display:none; background:none; border:none; color:var(--text); font-size:25px; cursor:pointer; line-height:1; padding:6px; }

/* ===== Hero ===== */
.hero{
  padding: 70px 20px 50px; text-align:center;
}
.hero h1{
  font-family:'Orbitron', sans-serif; font-size: clamp(28px, 5vw, 48px);
  font-weight:800; margin-bottom:16px;
  background: linear-gradient(90deg, #172033 0%, var(--primary) 55%, var(--primary-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ color: var(--text-dim); max-width:600px; margin:0 auto; font-size:17px; }

/* ===== Category Grid (home) ===== */
.category-section{ padding: 30px 20px 70px; }
.section-title{
  font-size:22px; font-weight:700; margin-bottom:20px; padding-left:12px;
  border-left:4px solid var(--primary);
}
.devices-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap:24px; margin-bottom:50px;
}
.device-card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding:32px 24px; text-align:center; transition:.25s;
}
.device-card:hover{ transform: translateY(-6px); border-color: var(--primary); box-shadow: 0 20px 40px rgba(124,58,237,.25); }
.device-card .icon{ font-size:46px; margin-bottom:14px; }
.device-card h3{ font-size:20px; margin-bottom:16px; }
.device-links{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.device-links a{
  background: var(--bg-soft); border:1px solid var(--border); padding:8px 18px; border-radius:30px;
  font-weight:600; font-size:14px; transition:.2s;
}
.device-links a:hover{ background: var(--primary); border-color: var(--primary); color:#fff; }

/* ===== Items Grid ===== */
.items-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:20px;
}
.item-card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding:20px; display:flex; flex-direction:column; align-items:center; text-align:center;
  transition:.2s;
}
.item-card:hover{ background: var(--card-hover); border-color: var(--primary); }
.item-logo{
  width:84px; height:84px; border-radius:20px; object-fit:cover; margin-bottom:14px;
  background: var(--bg-soft); border:1px solid var(--border);
}
.item-title{ font-weight:700; font-size:17px; margin-bottom:6px; }
.item-meta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; margin-bottom:8px; font-size:13px; color:var(--text-dim);
}
.stars-wrap{ position:relative; display:inline-block; font-size:15px; line-height:1; letter-spacing:1px; direction:ltr; unicode-bidi:bidi-override; }
.stars-base{ color:#3a3f5c; }
.stars-fill{
  position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap;
  color:#fbbf24; direction:ltr; unicode-bidi:bidi-override;
}
.rating-num{ font-weight:700; color:#fbbf24; font-size:13px; }
.downloads-count{ display:flex; align-items:center; gap:4px; }
.downloads-count svg{ width:13px; height:13px; }

.item-badge{
  display:inline-block; background: var(--bg-soft); color: var(--text-dim);
  font-size:12px; padding:3px 10px; border-radius:20px; margin-bottom:10px;
}
.item-desc{ color: var(--text-dim); font-size:14px; margin-bottom:16px; flex:1; }
.btn-download{
  display:inline-block; width:100%; padding:11px; border-radius:10px; text-align:center;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff; font-weight:700; border:none; cursor:pointer; font-family:inherit;
}
.btn-download:hover{ filter:brightness(1.1); }

.empty-state{ text-align:center; padding:60px 20px; color: var(--text-dim); }
.empty-state .icon{ font-size:50px; margin-bottom:14px; }

.page-header{ padding:40px 20px 10px; }
.page-header h1{ font-size:26px; margin-bottom:6px; }
.page-header p{ color:var(--text-dim); }
.breadcrumb{ font-size:14px; color: var(--text-dim); margin-bottom:10px; }
.breadcrumb a{ color: var(--primary-2); }

/* ===== Footer ===== */
.site-footer{ border-top:1px solid var(--border); margin-top:60px; padding:30px 20px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-inner p{ color: var(--text-dim); font-size:14px; }
.admin-link{ color: var(--text-dim); font-size:13px; border:1px solid var(--border); padding:6px 14px; border-radius:20px; }
.admin-link:hover{ color:#fff; border-color: var(--primary); }

/* ===== Admin ===== */
.admin-wrap{ min-height:100vh; display:flex; }
.admin-sidebar{
  width:230px; background:#ffffff; border-right:1px solid var(--border);
  padding:24px 16px; display:flex; flex-direction:column; gap:6px; flex-shrink:0;
}
.admin-sidebar .logo{ margin-bottom:24px; padding:0 8px; }
.admin-sidebar a{
  padding:12px 14px; border-radius:10px; color: var(--text-dim); font-weight:600;
}
.admin-sidebar a:hover, .admin-sidebar a.active{ background: var(--card); color:#fff; }
.admin-main{ flex:1; padding:30px; max-width:1100px; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:10px; }
.admin-topbar h1{ font-size:22px; }

.stats-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:16px; margin-bottom:30px; }
.stat-card{ background: var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; }
.stat-card .num{ font-size:26px; font-weight:800; color: var(--primary-2); }
.stat-card .label{ color: var(--text-dim); font-size:13px; }

.btn{
  display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:10px;
  font-weight:700; border:none; cursor:pointer; font-family:inherit; font-size:14px;
}
.btn-primary{ background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; }
.btn-danger{ background: var(--danger); color:#fff; }
.btn-outline{ background:transparent; border:1px solid var(--border); color: var(--text); }
.btn-outline:hover{ border-color: var(--primary); }

.card-box{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:24px; }

.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse: collapse; }
th, td{ padding:12px 10px; text-align:right; border-bottom:1px solid var(--border); font-size:14px; }
th{ color: var(--text-dim); font-weight:700; }
.table-logo{ width:44px; height:44px; border-radius:10px; object-fit:cover; }

.form-group{ margin-bottom:18px; }
.form-group label{ display:block; margin-bottom:8px; font-weight:600; font-size:14px; }
.form-group input[type=text], .form-group textarea, .form-group select, .form-group input[type=password], .form-group input[type=file]{
  width:100%; background: var(--bg-soft); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; color: var(--text); font-family:inherit; font-size:14px;
}
.form-group textarea{ resize:vertical; min-height:90px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }

.alert{ padding:12px 16px; border-radius:10px; margin-bottom:18px; font-size:14px; }
.alert-success{ background: rgba(34,197,94,.15); border:1px solid var(--success); color:#86efac; }
.alert-danger{ background: rgba(239,68,68,.15); border:1px solid var(--danger); color:#fca5a5; }

.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-box{ width:100%; max-width:380px; background:#ffffff; border:1px solid var(--border); border-radius: var(--radius); padding:36px 28px; }
.login-box .logo{ text-align:center; display:block; margin-bottom:24px; font-size:26px; }

.current-logo-preview{ width:70px; height:70px; border-radius:14px; object-fit:cover; margin-bottom:10px; border:1px solid var(--border); }

@media (max-width: 860px){
  .header-inner{
    display:grid; grid-template-columns:1fr auto; gap:12px; padding:12px 16px;
  }
  .logo{ font-size:20px; }
  .burger{ display:block; }
  .search-form{
    grid-column:1 / -1; grid-row:2; width:100%; max-width:none; min-width:0; height:44px;
  }
  .main-nav{ display:none; width:100%; grid-column:1 / -1; grid-row:3; flex-direction:column; }
  .main-nav.open{ display:flex; }
  .nav-drop{ position:static; display:flex !important; box-shadow:none; border:none; padding:0 16px 0 0; background:transparent; }
  .nav-group{ display:flex; flex-direction:column; }
  .devices-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .admin-wrap{ flex-direction:column; }
  .admin-sidebar{ width:100%; flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--border); }
  .hero{ padding:52px 18px 36px; }
  .hero p{ font-size:16px; }
  .category-section{ padding:24px 16px 56px; }
  .container{ padding:0 16px; }
}

@media (max-width: 420px){
  .header-inner{ padding:11px 14px; }
  .logo{ font-size:19px; }
  .search-form input{ font-size:13px; padding-left:12px; padding-right:8px; }
  .search-form input::placeholder{ color:#8a93a6; }
  .search-form button{ width:44px; min-width:44px; }
  .hero h1{ font-size:30px; }
}


/* ===== SYGAME LIGHT THEME V2 / MOBILE ===== */
html, body { background: #f6f8fc !important; color: #172033 !important; }

.site-header {
  background: rgba(255,255,255,.98) !important;
  border-bottom: 1px solid #e2e7f0 !important;
  box-shadow: 0 2px 14px rgba(20,32,55,.06);
}
.logo { color:#172033 !important; }
.logo span { color:#19bfe0 !important; }

.search-form {
  background:#fff !important;
  border:1px solid #d9dfeb !important;
  box-shadow:0 3px 12px rgba(20,32,55,.07) !important;
}
.search-form input { color:#172033 !important; }
.search-form input::placeholder { color:#8a94a6 !important; }
.burger { color:#172033 !important; }

.hero { background:transparent !important; }
.hero h1 {
  background:linear-gradient(90deg,#172033 0%,#6d3df5 55%,#19bfe0 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}
.hero p { color:#667085 !important; }

.category-section { background:transparent !important; }
.section-title { color:#172033 !important; }
.device-card, .item-card, .card-box, .stat-card {
  background:#fff !important;
  border-color:#e0e5ee !important;
  box-shadow:0 5px 18px rgba(20,32,55,.045);
}
.device-links a {
  background:#f7f9fc !important;
  border-color:#dfe5ef !important;
  color:#344054 !important;
}
.item-logo { background:#f2f5f9 !important; border-color:#e0e5ee !important; }
.footer-inner p { color:#667085 !important; }
.admin-sidebar { background:#fff !important; }

@media (max-width: 860px) {
  .site-header { position:relative; }
  .header-inner {
    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-areas:
      "logo burger"
      "search search" !important;
    gap:10px !important;
    padding:12px 14px !important;
    width:100% !important;
  }
  .header-inner .logo { grid-area:logo; align-self:center; }
  .header-inner .burger { grid-area:burger; align-self:center; justify-self:end; }
  .header-inner .search-form {
    grid-area:search;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:46px !important;
    margin:0 !important;
  }
  .search-form input {
    font-size:14px !important;
    padding:10px 13px !important;
    min-width:0 !important;
  }
  .search-form button { width:46px !important; min-width:46px !important; }
  .main-nav { grid-area:nav; }
  .hero { padding:46px 18px 34px !important; }
  .hero h1 { font-size:30px !important; line-height:1.45 !important; }
  .hero p { font-size:16px !important; line-height:1.75 !important; }
  .category-section { padding:24px 16px 55px !important; }
  .device-card { padding:28px 20px !important; }
}

@media (max-width: 420px) {
  .header-inner { padding:11px 12px !important; }
  .logo { font-size:19px !important; }
  .search-form { height:45px !important; border-radius:11px !important; }
}