:root{
  --bg0:#070a12;
  --bg1:#0b1020;
  --bg2:#101833;
  --surface:rgba(255,255,255,.05);
  --surface-strong:rgba(255,255,255,.08);
  --surface-soft:rgba(255,255,255,.03);
  --border:rgba(255,255,255,.11);
  --border-strong:rgba(255,255,255,.16);
  --text:#ecf2ff;
  --muted:#aab6d6;
  --brand1:#7c5cff;
  --brand2:#19d3ff;
  --brand3:#2ef2b1;
  --success:#2ef2b1;
  --warning:#ffd166;
  --danger:#ff7b7b;
  --shadow:0 22px 60px rgba(0,0,0,.32);
  --shadow-soft:0 12px 28px rgba(0,0,0,.22);
  --radius:18px;
  --radius-sm:14px;
  --radius-lg:26px;
  --container:1200px;
}

html{scroll-behavior:smooth}
body.matelix-body{
  min-height:100vh;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 650px at 10% 5%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 12%, rgba(25,211,255,.14), transparent 58%),
    radial-gradient(1000px 560px at 50% 100%, rgba(46,242,177,.08), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 42%, #060913 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.matelix-body a{color:inherit}
body.matelix-body .container-xl{max-width:var(--container)}
body.matelix-body .text-muted-soft{color:var(--muted)!important}
body.matelix-body .text-brand{color:var(--brand2)!important}
body.matelix-body .grad-text{
  background:linear-gradient(135deg, var(--brand2), var(--brand3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

body.matelix-body .navbar.matelix-nav{
  background:rgba(7,10,18,.76)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.matelix-body .brand-logo{
  height:46px;
  width:auto;
  border-radius:14px;
  background:rgba(11,16,32,.75);
  border:1px solid rgba(255,255,255,.12);
  padding:6px 9px;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
body.matelix-body .nav-link{
  color:rgba(236,242,255,.76)!important;
  border-radius:12px;
  font-weight:600;
}
body.matelix-body .nav-link:hover,
body.matelix-body .nav-link.active{
  color:#fff!important;
  background:rgba(255,255,255,.06);
}

.btn-brand{
  border:none;
  color:#07101a;
  font-weight:800;
  border-radius:14px;
  background:linear-gradient(135deg, var(--brand1), var(--brand2));
  box-shadow:0 16px 40px rgba(124,92,255,.22);
}
.btn-brand:hover,
.btn-brand:focus{filter:brightness(1.04); transform:translateY(-1px)}
.btn-ghost{
  border:1px solid var(--border);
  color:var(--text);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  font-weight:700;
}
.btn-ghost:hover,
.btn-ghost:focus{
  background:rgba(255,255,255,.06);
  border-color:var(--border-strong);
}
.btn-danger-soft{
  background:rgba(255,123,123,.12);
  border:1px solid rgba(255,123,123,.25);
  color:#ffd0d0;
}
.btn-danger-soft:hover{background:rgba(255,123,123,.18)}

.glass-card,
.surface-card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.surface-card.strong{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-color:var(--border-strong);
}
.panel{
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.hero-panel{
  padding:1.2rem;
  border-radius:var(--radius-lg);
}
.metric-pill,
.inline-pill,
.type-pill,
.stock-pill,
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border-radius:999px;
  padding:.45rem .78rem;
  font-size:.9rem;
  font-weight:700;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
}
.metric-pill{font-size:.82rem; color:var(--muted)}
.type-pill{color:#d3d9ff}
.type-pill.type-hardware{background:rgba(124,92,255,.12); border-color:rgba(124,92,255,.22)}
.type-pill.type-software{background:rgba(25,211,255,.12); border-color:rgba(25,211,255,.24)}
.type-pill.type-service{background:rgba(46,242,177,.12); border-color:rgba(46,242,177,.22)}
.stock-pill.stock-low{background:rgba(255,209,102,.12); border-color:rgba(255,209,102,.28); color:#ffe29e}
.stock-pill.stock-out{background:rgba(255,123,123,.12); border-color:rgba(255,123,123,.3); color:#ffd0d0}
.stock-pill.stock-good{background:rgba(46,242,177,.12); border-color:rgba(46,242,177,.24); color:#c8ffef}
.status-pill.status-paid{background:rgba(46,242,177,.12); border-color:rgba(46,242,177,.24); color:#c8ffef}
.status-pill.status-pending_payment,
.status-pill.status-pending{background:rgba(255,209,102,.12); border-color:rgba(255,209,102,.28); color:#ffe29e}
.status-pill.status-cancelled,
.status-pill.status-failed{background:rgba(255,123,123,.12); border-color:rgba(255,123,123,.28); color:#ffd0d0}
.status-pill.status-shipped,
.status-pill.status-processing{background:rgba(25,211,255,.12); border-color:rgba(25,211,255,.24); color:#c8f4ff}

.matelix-body .form-control,
.matelix-body .form-select,
.matelix-body .form-control:focus,
.matelix-body .form-select:focus{
  background:#101a33;
  color:var(--text);
  border-color:#233050;
  box-shadow:none;
}
.matelix-body .form-control::placeholder{color:#7e8bac}
.matelix-body .form-text{color:var(--muted)!important}
.matelix-body .table{--bs-table-bg:transparent; --bs-table-border-color:rgba(255,255,255,.08); color:var(--text)}
.matelix-body .table thead th{color:#d7e0f8; font-size:.86rem; text-transform:uppercase; letter-spacing:.04em; border-bottom-color:rgba(255,255,255,.12)}
.matelix-body .table tbody td{border-color:rgba(255,255,255,.06)}

.page-shell{padding-top:7rem; padding-bottom:3rem}
.page-hero{margin-bottom:1.5rem}
.page-title{font-size:clamp(2rem,3vw,3rem); line-height:1.05; margin-bottom:.6rem}
.page-sub{color:var(--muted); font-size:1.02rem; max-width:760px}
.section-kicker{display:inline-flex; align-items:center; gap:.5rem; color:#cfd8ff; font-size:.84rem; letter-spacing:.08em; text-transform:uppercase; font-weight:800}

.stats-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1rem}
.stat-card{padding:1rem 1.1rem}
.stat-label{color:var(--muted); font-size:.86rem; margin-bottom:.35rem}
.stat-value{font-size:1.55rem; font-weight:800}

.product-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem}
.product-card{height:100%; overflow:hidden}
.product-card .card-body{padding:1.1rem}
.product-image-wrap{
  position:relative;
  aspect-ratio:4/3;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(124,92,255,.12), rgba(25,211,255,.08)), rgba(255,255,255,.02);
}
.product-image{
  width:100%;
  height:100%;
  object-fit:cover;
}
.product-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  color:var(--muted);
  font-weight:700;
}
.product-title{font-size:1.06rem; font-weight:800; margin:0}
.product-sku{color:var(--muted); font-size:.86rem}
.price-row{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem}
.price-main{font-size:1.45rem; font-weight:900; line-height:1}
.price-note{font-size:.85rem; color:var(--muted)}
.product-desc{color:var(--muted); min-height:4.7em}
.filter-bar{padding:1rem}
.filter-grid{display:grid; grid-template-columns:2fr repeat(3, minmax(0, 1fr)); gap:.85rem}

.cart-layout,
.checkout-layout{display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(320px, .95fr); gap:1.2rem}
.summary-card{position:sticky; top:6.4rem; padding:1.15rem}
.summary-row{display:flex; justify-content:space-between; gap:1rem; padding:.42rem 0}
.summary-row.total{font-size:1.08rem; font-weight:800; border-top:1px solid rgba(255,255,255,.08); margin-top:.6rem; padding-top:.9rem}
.cart-item{display:grid; grid-template-columns:96px minmax(0, 1fr) auto; gap:1rem; padding:1rem; align-items:start}
.cart-thumb{width:96px; height:96px; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03)}
.qty-control{display:flex; gap:.55rem; align-items:center}
.qty-control .form-control{max-width:96px}
.order-card{padding:1rem}
.order-items{margin:0; padding-left:1.1rem; color:var(--muted)}
.order-meta{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; margin-top:1rem}
.order-meta > div{padding:.85rem 1rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px}
.empty-state{padding:2rem 1.2rem; text-align:center}
.empty-state .icon{width:74px; height:74px; border-radius:50%; display:grid; place-items:center; margin:0 auto 1rem; font-size:1.8rem; background:rgba(25,211,255,.12); border:1px solid rgba(25,211,255,.25)}
.auth-shell{max-width:560px; margin:0 auto}
.auth-card{padding:1.4rem}
.flash-stack{display:grid; gap:.8rem; margin-bottom:1rem}
.footer-links{display:flex; flex-wrap:wrap; gap:1rem}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{color:#fff}

.shop-banner{padding:1rem 1.15rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}
.shop-banner .banner-left{display:flex; gap:.8rem; flex-wrap:wrap}
.alert-inline{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  padding:.85rem 1rem;
  background:rgba(255,255,255,.04);
}
.alert-inline.success{border-color:rgba(46,242,177,.24); background:rgba(46,242,177,.08)}
.alert-inline.error{border-color:rgba(255,123,123,.24); background:rgba(255,123,123,.08)}
.alert-inline.info{border-color:rgba(25,211,255,.24); background:rgba(25,211,255,.08)}

.payment-choice{
  cursor:pointer;
  padding:.95rem 1rem;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  transition:border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.payment-choice:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
}
.payment-choice input{margin-top:.2rem}
.payment-choice.is-selected{
  transform:translateY(-1px);
  border-color:rgba(25,211,255,.34);
  background:rgba(25,211,255,.09);
  box-shadow:0 0 0 1px rgba(25,211,255,.14) inset;
}
.payment-choice.is-manual.is-selected{
  border-color:rgba(255,209,102,.34);
  background:rgba(255,209,102,.08);
  box-shadow:0 0 0 1px rgba(255,209,102,.12) inset;
}
.payment-method-note{
  display:flex;
  align-items:flex-start;
  gap:.2rem;
}
.payment-method-note.manual{
  border-color:rgba(255,209,102,.28);
  background:rgba(255,209,102,.08);
  color:#ffe29e;
}
.checkout-submit-btn.is-manual{
  background:linear-gradient(135deg, #ffd166, #ffb347);
  color:#2a1600;
  box-shadow:0 16px 40px rgba(255,177,71,.22);
}
.checkout-submit-btn.is-stripe{
  background:linear-gradient(135deg, var(--brand1), var(--brand2));
  color:#07101a;
}

.accordion.matelix-accordion .accordion-item{
  color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:.8rem;
  border-radius:16px;
  overflow:hidden;
}
.accordion.matelix-accordion .accordion-button{
  color:var(--text);
  background:rgba(255,255,255,.03);
}
.accordion.matelix-accordion .accordion-button:not(.collapsed){
  background:rgba(255,255,255,.06);
  color:#fff;
}
.accordion.matelix-accordion .accordion-button:focus{box-shadow:none}
.accordion.matelix-accordion .accordion-body{color:var(--muted)}

@media (max-width: 1199px){
  .product-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .stats-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 991px){
  .cart-layout,
  .checkout-layout,
  .filter-grid,
  .order-meta{grid-template-columns:1fr}
  .summary-card{position:static}
  .page-shell{padding-top:6rem}
}
@media (max-width: 767px){
  .product-grid,
  .stats-grid{grid-template-columns:1fr}
  .cart-item{grid-template-columns:1fr}
  .cart-thumb{width:100%; height:200px}
  .page-title{font-size:2rem}
}