:root{
  --lava:#e4572e;
  --lava-2:#ff8a3d;
  --char:#1a1211;
  --panel:#201616;
  --panel-2:#2a1c1b;
  --text:#e9dfd7;
  --muted:#a89186;
  --gold:#f1c27d;
  --ok:#7bd458;
  --danger:#d84b4b;
  --ring: 0 0 0 2px rgba(228,87,46,.25);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(255,138,61,0.08), transparent 60%),
    url('/images/items/bg_lava.jpg') center/cover fixed no-repeat,
    #0d0908;
}

/* ====== FLASH MESSAGE (login/logout + JS) ====== */
.flash{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  border-radius:12px;
  padding:16px 26px;
  font-size:16px;
  font-weight:600;
  color:#fff;
  box-shadow:0 18px 60px rgba(0,0,0,.75);
  z-index:200;
  opacity:0;
  animation:flash-in .25s forwards, flash-out .35s 3s forwards;
}

/* Login = verde plin */
.flash.success{
  background:#28a745;
  border:1px solid #1f8a39;
  box-shadow:0 0 20px rgba(40,167,69,.45);
}

/* Logout / erori = ro?u plin */
.flash.logout,
.flash.error{
  background:#d84b4b;
  border:1px solid #b83c3c;
  box-shadow:0 0 20px rgba(216,75,75,.45);
}

@keyframes flash-in{
  from{
    opacity:0;
    transform:translate(-50%, -60%) scale(0.9);
  }
  to{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
  }
}
@keyframes flash-out{
  from{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
  }
  to{
    opacity:0;
    transform:translate(-50%, -40%) scale(0.9);
  }
}

/* ====== ITEMSHOP LAYOUT ====== */
.shop-wrap{
  max-width:1260px; margin:0 auto; padding:24px 16px 60px;
}
.shop-top{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg, #2a1c1b 0%, #1c1312 100%);
  border:1px solid #3a2624; border-radius:14px; padding:14px 16px; gap:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  position:sticky; top:10px; z-index:30; backdrop-filter: blur(2px);
}
.logo{
  display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase;
}
.logo .mark{
  width:36px; height:36px; border-radius:10px;
  background: radial-gradient(circle at 30% 30%, var(--lava-2), var(--lava));
  box-shadow:0 0 22px rgba(229, 87, 46, .45), inset 0 0 14px rgba(0,0,0,.35);
}
.balance{
  display:flex; align-items:center; gap:10px; background: #1b1110; border:1px solid #3a2624;
  padding:8px 12px; border-radius:12px;
}
.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Buton de cos tip "pill" */
.cart-pill{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  background:#1b1110;
  border:1px solid #3a2624;
  color:var(--text);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  transition:.12s transform,.12s box-shadow,.12s background;
}

.cart-pill:hover{
  background:#241716;
  box-shadow:0 6px 18px rgba(0,0,0,.55);
  transform:translateY(-1px);
}

.cart-icon{
  font-size:14px;
  opacity:.9;
}

.cart-label{
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:11px;
}

/* badge rotund cu numarul de iteme */
.cart-badge{
  min-width:20px;
  height:20px;
  border-radius:999px;
  background:var(--lava);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  box-shadow:0 0 14px rgba(228,87,46,.6);
}

/* optional, facem balansul din dreapta un pic mai compact */
.top-balance{
  padding:6px 10px;
}

.balance b{color:#fff}
.tag{
  font-size:12px; color:var(--muted);
}
.btn{
  appearance:none; border:none; color:#120d0d; font-weight:800; cursor:pointer;
  background: linear-gradient(180deg, #ffd7b0 0%, #ffb868 100%);
  padding:10px 14px; border-radius:10px; transition:.15s transform, .15s filter;
  box-shadow: 0 2px 0 #a86f37, 0 6px 18px rgba(0,0,0,.35);
  text-transform:uppercase; letter-spacing:.3px;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn.ghost{
  background:transparent; color:var(--text); border:1px solid #3a2624; box-shadow:none;
}
.searchbar{
  display:flex; gap:8px; align-items:center;
  background:#1b1110; border:1px solid #3a2624; padding:8px 10px; border-radius:12px;
  min-width: 260px; flex:1;
}
.searchbar input{
  flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:14px;
}
.select{
  background:#1b1110; border:1px solid #3a2624; color:#fff; border-radius:10px; padding:8px 10px;
}
.grid{
  display:grid; grid-template-columns:280px 1fr; gap:16px; margin-top:16px;
}
.sidebar{
  background: linear-gradient(180deg, #241716 0%, #1a1211 100%);
  border:1px solid #3a2624; border-radius:14px; padding:14px;
  position:sticky; top:78px; height:fit-content;
}
.s-title{font-weight:800; text-transform:uppercase; color:#fff; font-size:14px; margin-bottom:10px}
.cat{
  display:flex; flex-direction:column; gap:8px;
}
.cat a{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--text);
  background:#1b1110; border:1px solid #2f1f1d;
  transition:.12s transform,.12s background;
}
.cat a small{color:var(--muted)}
.cat a.active, .cat a:hover{
  background:linear-gradient(180deg, #2a1c1b 0%, #1c1312 100%);
  border-color:#3a2624;
  box-shadow: var(--ring);
  transform:translateY(-1px);
}
.items{
  background: linear-gradient(180deg, #241716 0%, #1a1211 100%);
  border:1px solid #3a2624; border-radius:14px; padding:14px;
}
.items-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;
}
.cards{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;
}
.card{
  background:#1b1110; border:1px solid #382422; border-radius:14px; padding:12px; position:relative;
  display:flex; flex-direction:column; gap:10px; overflow:hidden;
}
.card .flags{
  position:absolute; top:10px; left:10px; display:flex; gap:6px; z-index:2;
}
.badge{
  font-size:11px; padding:3px 8px; border-radius:999px; font-weight:800; letter-spacing:.3px;
  background:#2a1c1b; border:1px solid #3a2624; color:#fff;
}
.badge.gold{ background: linear-gradient(180deg,#ffd7b0,#ffb868); color:#1a1211; border:none }
.badge.red{ background: linear-gradient(180deg,#ffb0a1,#ff6d6d); color:#1a1211; border:none }
.card .thumb{
  height:140px; background:#120d0d url('/images/items/pattern.png') center/120px repeat; border-radius:10px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.card .thumb img{max-height:100%; max-width:100%; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(228,87,46,.25))}
.card h3{margin:0; font-size:16px}
.card p{margin:0; color:var(--muted); font-size:13px; line-height:1.4}
.card .row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.price{font-weight:800; color:#fff}
.price del{color:#a7836d; margin-left:6px; font-weight:600}
.buy{
  display:flex; gap:8px; align-items:center; justify-content:flex-end;
}
.icon-coin{
  width:18px; height:18px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ffe9c9, #f6b35e);
  box-shadow: inset 0 0 4px rgba(0,0,0,.25), 0 0 10px rgba(241,194,125,.25);
}
.btn.sm{padding:8px 10px; border-radius:8px; font-size:12px}
.btn.danger{ background: linear-gradient(180deg,#ffb0a1,#ff6d6d); box-shadow:0 2px 0 #9a3f3f, 0 6px 18px rgba(0,0,0,.35) }
.tab-btn.active{
  background:linear-gradient(180deg, #2a1c1b 0%, #1c1312 100%);
  color:#fff;
  box-shadow:var(--ring);
}

/* Modal */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:50;
}
.modal.open{display:flex}
.modal .box{
  width:min(540px, 92vw); background:#1a1211; border:1px solid #3a2624; border-radius:14px; padding:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.6);
}
.box h4{margin:0 0 10px 0}
.box .actions{display:flex; justify-content:flex-end; gap:8px; margin-top:12px}

/* Responsive */
@media (max-width: 1100px){
  .cards{grid-template-columns: repeat(2,1fr)}
}
@media (max-width: 760px){
  .grid{grid-template-columns:1fr}
  .sidebar{position:static}
  .cards{grid-template-columns:1fr}
  .searchbar{min-width:0}
}

/* ====== LOGIN PAGE ====== */

.login-page{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

.login-card{
  background:#1a1211;
  border:1px solid #3a2624;
  border-radius:14px;
  padding:20px 22px;
  width:min(380px, 94vw);
  box-shadow:0 16px 40px rgba(0,0,0,.6);
}

.login-card h1{
  margin:0 0 12px 0;
  font-size:20px;
}

.login-card label{
  display:block;
  font-size:13px;
  margin-bottom:4px;
}

.login-card input{
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #3a2624;
  background:#120d0d;
  color:#fff;
  margin-bottom:10px;
}

.login-btn{
  width:100%;
}

.login-error{
  color:#ff8c8c;
  font-size:13px;
  margin-bottom:6px;
}

.login-links{
  margin-top:10px;
  font-size:13px;
}

.login-links a{
  color:#ffb868;
  text-decoration:none;
}
.login-links a:hover{
  text-decoration:underline;
}
.cat-count{
  background:#2a1c1b;
  border:1px solid #3a2624;
  padding:2px 6px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  min-width:20px;
  text-align:center;
}