:root{
    --azure:#007fff; --bg:#071025; --card:#071428; --muted:#9aa3b2; --glass:rgba(255,255,255,0.03);
    --radius:12px; --shadow:0 8px 30px rgba(0,0,0,0.6); --text:#e6eef8;
  }
  [data-theme="light"]{
    --bg:linear-gradient(180deg,#f5fbff,#ffffff 60%); --card:#ffffff; --muted:#6b7280; --glass:rgba(255,255,255,0.75);
    --shadow:0 8px 30px rgba(2,6,23,0.06); --text:#0f172a;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;color:var(--text);background:var(--bg)}

  .wrap {
  max-width: 1200px;
  margin: 16px auto;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
}

  header{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}
  .brand{display:flex;gap:12px;align-items:center}
  .logo{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--white),#beb7b7);display:flex;align-items:center;justify-content:center;color:white;font-weight:800}
  h1{margin:0;font-size:18px; font-family: Arial, Helvetica, sans-serif;}
  .sub{color:var(--muted);font-size:13px;margin-top:2px}

  /* Search */
  .top-controls{display:flex;gap:12px;align-items:center;width:100%}
  .searchbar{display:flex; gap:12px; align-items:center; width:100%}
  .search-input{flex:1;display:flex;align-items:center;gap:10px;background:var(--card);padding:10px 12px;border-radius:12px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,0.03)}
  .search-input input{flex:1;border:0;outline:none;font-size:15px;background:transparent;color:var(--text)}
  .search-meta{min-width:220px;text-align:right}
  .count{font-weight:800;color:var(--azure)}

  /* controls */
  .controls-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
  .btn{background:var(--azure);color:white;padding:8px 12px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
  .btn.ghost{background:transparent;color:var(--azure);border:1px solid rgba(0,127,255,0.12)}
  .small-btn{padding:6px 8px;font-size:13px;border-radius:8px}
  .chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:var(--card);border:1px solid rgba(255,255,255,0.03);gap:8px;color:var(--text)}

  /* layout */
  .content{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
  @media(max-width:1000px){ .content{grid-template-columns:1fr;} .search-meta{display:none} }

  /* grid */
  /* grid */
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Force exactly 2 per row on mobile */
@media (max-width: 700px) {
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Handle very tiny screens */
@media (max-width: 350px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.card {
  background: var(--card);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  position: relative;
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis;
}

 .img{height:160px;border-radius:10px;background-size:cover;background-position:center;box-shadow:inset 0 -20px 60px rgba(0,0,0,0.06)}
  

.title{font-weight:800;font-size:15px}
  .price{font-size:15px;color:var(--azure);font-weight:800}
  .muted{color:var(--muted);font-size:13px}
  .specs{font-size:13px;color:#AAB7C4}
  .qty{font-size:13px;color:#0ea5a3;font-weight:600}
  .card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}

  /* sold ribbon */
  .ribbon{position:absolute;left:-10px;top:14px;background: rgb(255, 0, 0);color:white;padding:6px 14px;transform:rotate(-18deg);font-weight:800;border-radius:6px;box-shadow:0 8px 18px rgba(0,0,0,0.3);z-index:30}

  /* fav */
  .fav{position:absolute; right:12px; top:12px; background:rgba(255,255,255,0.03); border-radius:999px; padding:6px; box-shadow:0 6px 18px rgba(0,0,0,0.08); cursor:pointer; z-index:40}
  .card-wrap{position:relative}
#openInbox {
  position: absolute; /* keep in DOM but remove from layout */
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

  /* modals/backdrop */
  .modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.45);display:none;align-items:center;justify-content:center;z-index:200}
 .modal {
  width: 100%;
  max-width: 600px;
  background: var(--card);
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.6);
  color: var(--text);
  overflow: hidden;
}

.modal img {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 10px;
}

  .modal .row{display:flex;gap:8px}
  .modal input,.modal textarea,select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--text)}
  .modal textarea{min-height:100px;resize:vertical}

  mark{background:linear-gradient(90deg,#fffacd,#fff);padding:0 2px;border-radius:3px;color:#000}
  .empty{color:var(--muted);text-align:center;padding:36px 0}
  .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;padding:10px 14px;background:rgba(15,23,42,0.94);color:white;border-radius:9px;z-index:210}

  /* sold style on image */
  .img.sold{filter:grayscale(60%) brightness(0.8);opacity:0.9}

  @media(max-width:420px){
    header{flex-direction:column;align-items:flex-start;gap:10px}
    .logo{width:46px;height:46px}
  }
/* Mobile safety fixes */
@media (max-width: 480px) {
  html, body {
    overflow-x: hidden;
  }
  .card {
    padding: 10px;
  }
  .title {
    font-size: 14px;
  }
  .specs, .muted {
    font-size: 12px;
  }
}



.deals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.deal-card {
  background: var(--card);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}

.deal-card:hover {
  transform: translateY(-4px);
}

.deal-img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}

.deal-title {
  margin: 8px 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.deal-price {
  color: var(--azure);
  font-weight: 800;
  margin: 0;
}

.deal-phone {
  color: gold;
  font-size: 13px;
  margin-top: 6px;
}
 .mini-footer {
      font-family: Arial, sans-serif;
      color: #fff;
      padding: 20px;
      border-radius: 12px 12px 0 0;
      text-align: center;
      background: linear-gradient(270deg, #007fff, #00d4ff, #0066ff);
      background-size: 400% 400%;
      animation: glow 10s ease infinite;
      font-size: 0.9rem;
    }

    @keyframes glow {
      0% {background-position:0% 50%;}
      50% {background-position:100% 50%;}
      100% {background-position:0% 50%;}
    }

    .mini-footer a {
      color: #fff;
      margin: 0 10px;
      padding: 6px 12px; /* more clickable area */
      border-radius: 6px; /* makes click area bigger */
      display: inline-block;
      transition: color 0.3s ease, background 0.3s ease;
      text-decoration: none; /* remove underline */
    }

    .mini-footer a:hover {
      color: #ffcc00;
      background: rgba(255, 255, 255, 0.1); /* subtle hover effect */
    }

    .footer-social {
      display: flex;
      justify-content: center;
      gap: 20px; /* more spacing for thumbs */
      margin: 8px 0;
    }

    .footer-social a {
      font-size: 1.2rem;
      padding: 10px; /* bigger clickable area */
      border-radius: 50%;
      transition: transform 0.3s, color 0.3s, text-shadow 0.3s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .footer-social a:hover {
      transform: scale(1.4);
      color: #00ffff;
      text-shadow: 0 0 6px #00ffff, 0 0 12px #00ffff;
      background: rgba(255,255,255,0.1); /* subtle hover background */
    }
    #imagePopup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,0.88);
    z-index: 1200;
    align-items: center;
    justify-content: center;
  }
  #imagePopup .popup-inner {
    position: relative;
    max-width: 92%;
    max-height: 92%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #imagePopup img { max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,0.6); }
  #imagePopup .navBtn {
    position: absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.92); border-radius:999px; border:0; width:44px; height:44px; font-size:22px; cursor:pointer;
  }
  #imagePopup .prevBtn { left:12px; }
  #imagePopup .nextBtn { right:12px; }
  #imagePopup .closeBtn { position:absolute; top:12px; right:12px; background:transparent; color:white; border:0; font-size:28px; cursor:pointer; }
  /* thumbnails row (if multiple images) */
  #imagePopup .thumbs { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
  #imagePopup .thumbs img { width:56px; height:40px; object-fit:cover; border-radius:6px; opacity:0.8; border:2px solid rgba(255,255,255,0.1); cursor:pointer; }
  #imagePopup .thumbs img.active { opacity:1; border-color:var(--azure); }