:root{
  --red:#E53935;
  --red-strong:#C62828;
  --blue:#1976D2;
  --text:#111827;
  --muted:#6B7280;
  --bg:#ffffff;
  --line:#E5E7EB;
  --card:#ffffff;
  --shadow:0 12px 30px rgba(17,24,39,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}
.container{width:min(1100px, 100% - 32px); margin:0 auto}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.topbar{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
  z-index:10;
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:inline-flex; align-items:baseline; gap:2px; text-decoration:none; font-weight:800; letter-spacing:-.5px; color:var(--text)}
.brand__mark{font-size:20px}
.brand__mark--accent{color:var(--red)}
.topnav{display:flex; gap:10px; align-items:center}
.topnav__link{color:var(--text); text-decoration:none; padding:10px 10px; border-radius:12px}
.topnav__link:hover{background:#F3F4F6}

.cartpill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  margin-left:8px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(25,118,210,.12);
  color:var(--blue);
  font-weight:900;
  font-size:12px;
}

.btn{
  appearance:none;
  border:1px solid transparent;
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn--primary{background:var(--red); color:white}
.btn--primary:hover{background:var(--red-strong)}
.btn--ghost{background:white; border-color:var(--line); color:var(--text)}
.btn--ghost:hover{border-color:#D1D5DB}

.hero{padding:22px 0}
.hero__card{
  padding:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, #ffffff, #fff5f5);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero__title{margin:0 0 8px 0; font-size:28px; line-height:1.2; letter-spacing:-.8px}
.hero__subtitle{margin:0 0 14px 0; color:var(--muted)}

.search{display:flex; gap:10px; flex-wrap:wrap}
.search__input{
  flex:1;
  min-width:240px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  outline:none;
}
.search__input:focus{border-color:rgba(25,118,210,.45); box-shadow:0 0 0 3px rgba(25,118,210,.15)}

.tabs{padding:8px 0 2px}
.tabs__row{display:flex; gap:8px; flex-wrap:wrap}
.tab{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:white;
  text-decoration:none;
  color:var(--text);
  font-weight:700;
}
.tab:hover{border-color:#D1D5DB}
.tab--active{border-color:rgba(229,57,53,.35); background:rgba(229,57,53,.08); color:var(--red)}

.section{padding:18px 0}
.section__head{display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:12px}
.section__title{margin:0; font-size:18px}

.grid{display:grid; grid-template-columns:repeat(12, 1fr); gap:12px}
.grid > .card{grid-column:span 12}
@media (min-width: 680px){
  .grid > .card{grid-column:span 6}
}
@media (min-width: 980px){
  .grid > .card{grid-column:span 4}
}
.grid--products > .card{grid-column:span 12}
@media (min-width: 680px){
  .grid--products > .card{grid-column:span 6}
}
@media (min-width: 980px){
  .grid--products > .card{grid-column:span 3}
}

.card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 8px 18px rgba(17,24,39,.06);
  display:flex;
  flex-direction:column;
}
.card__body{padding:14px}
.card__actions{padding:0 14px 14px}
.card__title-row{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.card__title{margin:0; font-size:16px; line-height:1.25}
.card__meta{margin:8px 0 0 0; color:var(--muted); font-size:13px}
.card__rating{margin:10px 0 0 0; display:flex; gap:8px; align-items:center}
.stars{color:var(--blue); font-weight:800}

.badge{
  font-size:12px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  white-space:nowrap;
}
.badge--online{border-color:rgba(16,185,129,.35); color:#065F46; background:rgba(16,185,129,.12)}
.badge--offline{border-color:rgba(239,68,68,.35); color:#7F1D1D; background:rgba(239,68,68,.10)}

.card--product .card__body{padding-top:12px}
.product__img{width:100%; height:130px; background:#F3F4F6}
.product__img img{width:100%; height:100%; object-fit:cover; display:block}
.product__img-fallback{width:100%; height:100%; background:linear-gradient(135deg, #f3f4f6, #fee2e2)}
.card__price{margin:10px 0 0 0; font-weight:900; color:var(--red)}

.empty{
  border:1px dashed #D1D5DB;
  border-radius:var(--radius);
  padding:16px;
  background:#FAFAFA;
}
.empty__title{margin:0 0 6px 0; font-weight:900}
.muted{color:var(--muted)}

.footer{border-top:1px solid var(--line); margin-top:14px}
.footer__inner{display:flex; justify-content:space-between; padding:14px 0; color:var(--muted); font-weight:700}

.panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:18px;
}
.panel__head{display:flex; justify-content:space-between; gap:14px; align-items:flex-start; flex-wrap:wrap}
.panel__head-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.panel__title{margin:0; font-size:22px; letter-spacing:-.4px}
.panel__subtitle{margin:16px 0 10px 0; font-size:16px}

.segmented{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 14px}
.segmented__item{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:white;
  text-decoration:none;
  color:var(--text);
  font-weight:800;
}
.segmented__item--active{border-color:rgba(229,57,53,.35); background:rgba(229,57,53,.08); color:var(--red)}

.form{margin-top:12px}
.field{display:flex; flex-direction:column; gap:6px; margin:0 0 12px 0}
.label{font-weight:800; font-size:13px}
.input{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  outline:none;
  font:inherit;
}
.input:focus{border-color:rgba(25,118,210,.45); box-shadow:0 0 0 3px rgba(25,118,210,.15)}
.form__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}

.gridform{display:grid; grid-template-columns:repeat(12, 1fr); gap:12px}
.gridform .field{grid-column:span 12}
@media (min-width: 780px){
  .gridform .field{grid-column:span 6}
}

.alert{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  font-weight:800;
  margin:12px 0;
}
.alert--danger{border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.10); color:#7F1D1D}

.divider{height:1px; background:var(--line); margin:16px 0}

.table{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.table__row{display:grid; grid-template-columns:1.1fr 2fr 1.2fr 1.2fr 1.6fr; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); align-items:center}
.table__row--head{background:#F9FAFB; font-weight:900}
.table__row:last-child{border-bottom:none}
@media (max-width: 760px){
  .table__row{grid-template-columns:1fr; gap:6px}
}

.cardsline{display:grid; grid-template-columns:repeat(12, 1fr); gap:12px; margin-top:10px}
.stat{grid-column:span 12; border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:#fff}
.stat__label{font-weight:900; color:var(--muted); font-size:12px}
.stat__value{font-weight:900; margin-top:6px}
@media (min-width: 780px){
  .stat{grid-column:span 4}
}

.timeline{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin:10px 0 12px}
.timeline__item{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 10px;
  background:#fff;
  font-weight:900;
  text-align:center;
  color:var(--muted);
}
.timeline__item--done{border-color:rgba(25,118,210,.25); background:rgba(25,118,210,.08); color:var(--blue)}
.timeline__item--active{border-color:rgba(229,57,53,.35); background:rgba(229,57,53,.08); color:var(--red)}
@media (max-width: 760px){
  .timeline{grid-template-columns:1fr;}
}

.thumbs{display:grid; grid-template-columns:repeat(12, 1fr); gap:12px}
.thumb{grid-column:span 12; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column}
.thumb img{width:100%; height:140px; object-fit:cover; display:block; background:#F3F4F6}
.thumb__actions{display:flex; gap:10px; align-items:center; padding:10px 12px; font-weight:900; color:var(--text)}
@media (min-width: 780px){
  .thumb{grid-column:span 4}
}