* { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', sans-serif; }
body { background:#f5f6fa; color:#2d3436; }

.top-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 30px; background:#1e272e; color:white;
}
.logo { font-size:1.5rem; font-weight:bold; color:#feca57; }
.search-box { flex:1; margin:0 20px; display:flex; }
.search-box input { flex:1; padding:10px; border:none; border-radius:5px 0 0 5px; }
.search-box button { padding:10px 15px; border:none; background:#feca57; cursor:pointer; border-radius:0 5px 5px 0; }
nav a { color:white; margin-left:20px; text-decoration:none; }

.hero {
  text-align:center; padding:60px 20px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color:white;
}
.hero h1 { font-size:3rem; margin-bottom:10px; }

.categories {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap:15px; padding:30px;
}
.category-card {
  background:white; padding:20px; text-align:center; border-radius:10px;
  cursor:pointer; transition:transform 0.2s; box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.category-card:hover { transform:translateY(-5px); box-shadow:0 5px 15px rgba(0,0,0,0.1); }
.category-card .icon { font-size:2.5rem; }
.category-card p { margin-top:8px; font-size:0.9rem; }

.featured-products, .ai-assist { padding:30px; }
.product-grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:20px; margin-top:20px;
}
.product-card {
  background:white; border-radius:10px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.product-card img { width:100%; height:180px; object-fit:cover; }
.product-card .info { padding:15px; }
.product-card h3 { font-size:1rem; margin-bottom:5px; }
.product-card .price { color:#e84118; font-weight:bold; font-size:1.2rem; }
.product-card .trader { font-size:0.8rem; color:#636e72; }
.product-card button {
  width:100%; padding:10px; background:#00b894; color:white;
  border:none; cursor:pointer; margin-top:10px; border-radius:5px;
}

.chat-box {
  background:white; padding:20px; border-radius:10px; max-width:600px; margin:20px auto;
}
#chatMessages { min-height:150px; max-height:300px; overflow-y:auto; margin-bottom:10px; }
.chat-msg { padding:8px; margin:5px 0; border-radius:5px; }
.chat-msg.user { background:#dfe6e9; text-align:right; }
.chat-msg.bot { background:#74b9ff; color:white; }
.chat-box input { width:80%; padding:10px; }
.chat-box button { padding:10px 20px; background:#6c5ce7; color:white; border:none; cursor:pointer; }

/* Trader Layout */
.trader-layout { display:flex; min-height:100vh; }
.sidebar {
  width:250px; background:#2d3436; color:white; padding:20px;
}
.sidebar nav a {
  display:block; padding:12px; color:white; text-decoration:none;
  cursor:pointer; margin:5px 0; border-radius:5px;
}
.sidebar nav a:hover { background:#636e72; }
.main-content { flex:1; padding:30px; }
.tab { display:none; }
.tab.active { display:block; }

.stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; margin-top:20px; }
.stat-card { background:white; padding:20px; border-radius:10px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
.stat-card h3 { color:#636e72; font-size:0.9rem; }
.stat-card p { font-size:2rem; color:#0984e3; margin-top:10px; }

form label { display:block; margin:15px 0 5px; font-weight:bold; }
form input, form select, form textarea {
  width:100%; padding:10px; border:1px solid #ddd; border-radius:5px;
}
form button {
  margin-top:20px; padding:12px 30px; background:#00b894; color:white;
  border:none; border-radius:5px; cursor:pointer; font-size:1rem;
}

.plans { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-top:20px; }
.plan-card { background:white; padding:30px; text-align:center; border-radius:10px; }
.plan-card.silver { border:3px solid #b2bec3; }
.plan-card.diamond { border:3px solid #74b9ff; }
.plan-card.gold { border:3px solid #feca57; }
.plan-card button {
  margin-top:15px; padding:10px 25px; background:#0984e3; color:white;
  border:none; border-radius:5px; cursor:pointer;
}

.slider-controls { display:flex; align-items:center; gap:15px; margin-bottom:20px; }
.slider-controls button { padding:8px 15px; cursor:pointer; }

/* Admin */
#loginScreen {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100vh; background:#2d3436; color:white;
}
#loginScreen input { padding:10px; margin:10px; width:300px; border-radius:5px; border:none; }
#loginScreen button { padding:10px 30px; background:#feca57; border:none; border-radius:5px; cursor:pointer; }

.admin-grid { padding:30px; display:grid; gap:30px; }
.admin-grid section { background:white; padding:20px; border-radius:10px; }
table { width:100%; border-collapse:collapse; margin-top:10px; }
th, td { padding:10px; text-align:left; border-bottom:1px solid #ddd; }
th { background:#dfe6e9; }

.commission-row { display:flex; align-items:center; gap:10px; margin:10px 0; }
.commission-row input { width:80px; padding:5px; }

.order-card {
  background:#f5f6fa; padding:15px; margin:10px 0; border-radius:8px;
  border-left:4px solid #0984e3;
}
.order-card.ready { border-left-color:#00b894; }
.order-card button {
  margin-top:10px; padding:8px 15px; background:#e84118; color:white;
  border:none; border-radius:5px; cursor:pointer;
}