/* app.css — v4.9.0 (professional sleek UI) */
/* --- Theme --- */
:root{
  --bg:#0a0c0f; --panel:#11151a; --border:#1e2329; --ink:#e8eaed;
  --muted:#8b95a2; --accent:#ffd700; --accent-2:#ffed4e;
  --success:#4ade80; --error:#ef4444; --warning:#f59e0b;
  --banner-w:300px; --header-h:86px;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --gradient-gold: linear-gradient(135deg, #ffd700, #ffed4e);
  --gradient-subtle: linear-gradient(135deg, rgba(255,215,0,0.03), rgba(255,237,78,0.01));
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--ink);text-decoration:none}
.muted{color:var(--muted)}
.container{max-width:1100px;margin:0 auto;padding:18px 18px 40px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow-md);transition:all 0.3s ease}

/* --- Header --- */
.site-header{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(17,21,26,.98),rgba(10,12,15,.95));backdrop-filter:saturate(1.8) blur(12px);border-bottom:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,0.12)}
.header-inner{height:86px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 18px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}
.brand img{height:54px;width:auto;display:block}
.nav{display:flex;gap:18px}
.nav a{padding:8px 10px;border-radius:10px;color:var(--muted);transition:all 0.2s}
.nav a:hover{color:var(--ink);background:rgba(39,49,54,0.3)}
.nav a.active{color:var(--ink);background:var(--panel);border:1px solid var(--border)}
.userbox .actions{display:flex;gap:10px}
.btn{background:var(--accent);color:#fff;border:none;padding:10px 16px;border-radius:8px;font-weight:600;transition:all 0.3s ease;cursor:pointer;box-shadow:var(--shadow-sm)}
.btn:hover{background:var(--accent-2);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-outline{background:rgba(255,255,255,0.05);color:var(--ink);border:1px solid rgba(255,255,255,0.1);transition:all 0.3s ease;backdrop-filter:blur(4px)}
.btn-outline:hover{background:rgba(255,255,255,0.1);border-color:var(--accent);transform:translateY(-1px)}
.ribbon{height:1px;background:#1a2328}

/* --- Banner layout: side rails fixed, center only scrolls --- */
body.banner-layout{overflow:hidden}
#pageWrap{position:relative}
.banner{position:fixed;top:var(--header-h);bottom:0;width:var(--banner-w);overflow:hidden;z-index:5;background:var(--bg);padding:0;margin:0;border:none}
.banner.left{left:0}
.banner.right{right:0}
.banner img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;border:none;margin:0;padding:0}

/* Enhanced page-main with softer blending */
.page-main{
  position:fixed;
  top:var(--header-h);
  bottom:61px;
  left:calc(var(--banner-w) - 2px);
  right:calc(var(--banner-w) - 2px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  z-index:6;
  background:rgba(10,12,15,0.85);
  backdrop-filter:blur(8px);
  border-left:2px solid rgba(255,255,255,0.02);
  border-right:2px solid rgba(255,255,255,0.02);
}
/* Mobile Menu Button */
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.mobile-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: all 0.3s ease;
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Menu Overlay */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 12, 15, 0.98);
  backdrop-filter: blur(12px);
  z-index: 100;
  padding: 20px;
  overflow-y: auto;
}

.mobile-menu.active {
  display: block;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}

.mobile-menu-nav a {
  padding: 15px 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.mobile-menu-nav a:active {
  transform: scale(0.98);
  background: rgba(255, 215, 0, 0.1);
  border-color: var(--accent);
}

.mobile-menu-user {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.mobile-menu-user .login-btn {
  width: 100%;
  padding: 15px;
  background: var(--gradient-gold);
  color: #000;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
}

.mobile-menu-user .register-btn {
  width: 100%;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
  /* Hide desktop nav, show mobile menu button */
  .nav {
    display: none !important;
  }
  
  .mobile-menu-btn {
    display: flex;
  }
  
  /* Adjust header layout */
  .header-inner {
    padding: 0 15px;
    height: 70px;
  }
  
  :root {
    --header-h: 70px;
  }
  
  .brand img {
    height: 40px;
  }
  
  .brand .word {
    display: none;
  }
  
  /* Hide desktop userbox on mobile */
  .userbox {
    display: none !important;
  }
  
  /* Adjust page layout */
  .page-main {
    left: 0;
    right: 0;
    bottom: 0;
    border-left: none;
    border-right: none;
  }
  
  .container {
    padding: 15px;
  }
  
  /* Forms full width on mobile */
  .form-container {
    margin: 20px auto;
    max-width: calc(100% - 30px);
  }
  
  /* Grid adjustments */
  .grid-cases {
    grid-template-columns: 1fr !important;
  }
  
  .backpack-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  
  /* Buttons and inputs */
  .btn {
    padding: 12px 20px;
    font-size: 16px;
  }
  
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="password"],
  .form input[type="tel"] {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 14px;
  }
  
  /* Footer adjustments */
  .footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 480px) {
  /* Even smaller screens */
  .header-inner {
    padding: 0 10px;
  }
  
  .container {
    padding: 10px;
  }
  
  .panel {
    padding: 12px;
  }
  
  .case-card {
    grid-template-columns: 80px 1fr;
    gap: 12px;
    padding: 12px;
  }
  
  .case-ring {
    width: 80px;
    height: 100px;
  }
  
  .backpack-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 1280px){.banner{display:none}.page-main{left:0;right:0}}

/* --- Cases list --- */
.case-card{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;transition:all 0.3s ease;cursor:pointer}
.case-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.case-ring{position:relative;width:120px;height:140px}
.case-ring .back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.65;transform:scale(.92)}
.case-ring .front{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.case-ring img{width:90%;height:90%;object-fit:contain;border-radius:10px;border:1px solid var(--border);background:#0c1317}
.case-card h3{margin:0 0 4px 0}
.grid-cases{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:768px){.grid-cases{grid-template-columns:1fr 1fr 1fr}}

/* --- Backpack (for later pages) --- */
.backpack-head{position:sticky;top:0;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:12px;z-index:5;display:flex;justify-content:space-between;align-items:center}
.backpack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.backpack-item{border:1px solid var(--border);border-radius:12px;padding:10px;background:#0f1519;cursor:pointer}
.backpack-item.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.backpack-item img{width:100%;height:140px;object-fit:contain;background:#0c1317;border:1px solid var(--border);border-radius:8px}
.badge{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:3px 8px;font-size:11px;color:var(--muted)}

/* --- Forms --- */
.form-container{max-width:400px;margin:40px auto}
.form{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:24px}
.form .row{margin-bottom:16px}
.form label{display:block;margin-bottom:6px;color:var(--muted);font-size:14px;font-weight:500}
.form input[type="text"],.form input[type="email"],.form input[type="password"],.form input[type="tel"]{width:100%;padding:12px 14px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:8px;color:var(--ink);font-size:15px;transition:all 0.3s ease}
.form input[type="text"]:focus,.form input[type="email"]:focus,.form input[type="password"]:focus,.form input[type="tel"]:focus{outline:none;border-color:var(--accent);background:rgba(255,215,0,0.05);box-shadow:0 0 0 3px rgba(255,215,0,0.1)}
.form input[type="checkbox"]{margin-right:6px}
.form .actions{margin-top:20px}
.form .actions .btn{width:100%;padding:12px;font-size:16px}
.form .inline{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .muted{margin-top:12px;text-align:center}

/* --- Scrollbar styling --- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#39444a}
body{scrollbar-width:thin;scrollbar-color:var(--border) transparent}

/* --- Footer --- */
.footer{background:var(--panel);border-top:1px solid var(--border);padding:20px 0;backdrop-filter:blur(8px)}
.footer .inner{max-width:1100px;margin:0 auto;padding:0 18px;color:var(--muted);text-align:center;font-size:14px}
body.banner-layout .footer{position:relative;margin-left:var(--banner-w);margin-right:var(--banner-w)}
@media (max-width:1280px){body.banner-layout .footer{left:0;right:0}}

/* --- Professional Enhancements --- */
.glass-effect{background:rgba(255,255,255,0.05);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1)}
.hover-lift{transition:transform 0.3s ease, box-shadow 0.3s ease}
.hover-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.fade-in{animation:fadeIn 0.5s ease-in}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.pulse{animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,158,255,0.4)}70%{box-shadow:0 0 0 10px rgba(74,158,255,0)}100%{box-shadow:0 0 0 0 rgba(74,158,255,0)}}

/* --- Status Colors --- */
.status-success{color:var(--success)}
.status-error{color:var(--error)}
.status-warning{color:var(--warning)}
.badge-success{background:rgba(74,222,128,0.1);border-color:var(--success);color:var(--success)}
.badge-error{background:rgba(239,68,68,0.1);border-color:var(--error);color:var(--error)}
.badge-warning{background:rgba(245,158,11,0.1);border-color:var(--warning);color:var(--warning)}