:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --line:#e6ebf2;
  --text:#1f2937;
  --muted:#6b7280;
  --brand:#0d6efd;
  --brand-dark:#0a58ca;
  --ok:#198754;
  --warn:#f59e0b;
  --danger:#dc3545;
  --shadow:0 8px 24px rgba(17,24,39,.08);
  --r:14px;
}

html,body{background:var(--bg); color:var(--text);}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.45;}

.container{max-width:1200px;}
.navbar{box-shadow:var(--shadow);}
.navbar-brand img{border-radius:8px; background:#fff; padding:2px;}

.card{
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  background:var(--card);
}
.card-header{
  border-bottom:1px solid var(--line);
  background:#fff;
  font-weight:700;
}

.product-card{
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:.2s ease;
  overflow:hidden;
  background:#fff;
}
.product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(17,24,39,.12);
}
.product-card .card-img-top{
  height:220px;
  width:100%;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
}

.price-container del{opacity:.7;}
.badge{font-weight:600;}

.btn{
  border-radius:10px;
  font-weight:600;
}
.btn-primary{background:var(--brand); border-color:var(--brand);}
.btn-primary:hover{background:var(--brand-dark); border-color:var(--brand-dark);}

.table{
  --bs-table-bg:transparent;
}
.table thead th{
  background:#f8fafc;
  border-bottom:1px solid var(--line);
  font-size:.92rem;
}
.table td,.table th{vertical-align:middle;}

.form-control,.form-select{
  border-radius:10px;
  border-color:#d7deea;
}
.form-control:focus,.form-select:focus{
  border-color:#9ec1ff;
  box-shadow:0 0 0 .2rem rgba(13,110,253,.15);
}

.alert{border-radius:10px;}
footer a{opacity:.95;}
footer a:hover{opacity:1; text-decoration:underline!important;}

.admin-kpi{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px;
  background:#fff;
  box-shadow:var(--shadow);
}
.admin-kpi .num{font-size:2rem; font-weight:800; line-height:1;}

@media (max-width: 992px){
  .product-card .card-img-top{height:190px;}
  .navbar .btn{margin-top:.25rem;}
}
@media (max-width: 576px){
  .container{padding-left:12px; padding-right:12px;}
  .product-card .card-img-top{height:170px;}
  h2,h3,h4{line-height:1.2;}
}