:root{
  --galaxy-0:#070A12;
  --galaxy-1:#0B1020;
  --galaxy-2:#0C1B3A;
  --galaxy-3:#102A5C;
  --galaxy-blue:#3B82F6;
  --galaxy-cyan:#22D3EE;
  --galaxy-violet:#8B5CF6;

  --app-bg:
    linear-gradient(180deg, #050914 0%, #070F20 45%, #071836 75%, #051024 100%);

  --ink-0:#0B1220;
  --ink-1:#111827;
  --ink-2:#1F2937;

  --text:#EAF2FF;
  --muted:rgba(234,242,255,.72);

  --card-bg:rgba(255,255,255,.06);
  --card-border:rgba(255,255,255,.12);

  --radius-xl:20px;
  --radius-lg:16px;
  --radius-md:12px;

  --shadow-1:0 10px 30px rgba(0,0,0,.25);
  --shadow-2:0 20px 70px rgba(0,0,0,.35);
}

html,body{height:100%;}

body{
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  background:transparent;
  color:var(--text);
  position:relative;
  min-height:100vh;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:var(--app-bg);
  z-index:-1;
}

a{color:rgba(234,242,255,.9);} 
a:hover{color:#fff;}

.app-topbar{
  background:rgba(0,0,0,.28);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}

.app-navbar{
  background:linear-gradient(90deg, rgba(12,27,58,.85) 0%, rgba(17,24,39,.78) 40%, rgba(7,10,18,.85) 100%);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
}

.app-brand{
  letter-spacing:.2px;
}

.app-brand-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  background:linear-gradient(180deg, var(--galaxy-cyan), var(--galaxy-blue));
  box-shadow:0 0 0 5px rgba(59,130,246,.15), 0 10px 20px rgba(59,130,246,.18);
  vertical-align:middle;
  margin-right:8px;
}

.app-surface{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-1);
  backdrop-filter:blur(16px);
}

main.container{
  padding-top:28px !important;
  padding-bottom:40px !important;
}

.btn{
  border-radius:999px;
}

.btn-primary{
  border:0;
  background:linear-gradient(135deg, rgba(34,211,238,.95) 0%, rgba(59,130,246,.95) 45%, rgba(139,92,246,.92) 100%);
  box-shadow:0 14px 30px rgba(59,130,246,.25);
}
.btn-primary:hover{
  filter:brightness(1.03);
}

.btn-outline-light{
  border-color:rgba(234,242,255,.28) !important;
  color:rgba(234,242,255,.92) !important;
}

.form-control, .form-select{
  border-radius:14px;
  border-color:rgba(255,255,255,.14) !important;
}

.form-control.bg-transparent{
  background:rgba(255,255,255,.06) !important;
}

.card{
  border-radius:var(--radius-xl);
}

.dropdown-menu{
  border-radius:14px;
}

.table{
  color:rgba(234,242,255,.92);
  background:transparent !important;
}

.table th,
.table td{
  background:transparent !important;
}

.table.table-bordered,
.table.table-bordered th,
.table.table-bordered td{
  border-color:rgba(255,255,255,.12) !important;
}

.table thead th{
  border-bottom-color:rgba(255,255,255,.14) !important;
}

.table-striped>tbody>tr:nth-of-type(odd)>*{
  --bs-table-bg-type:rgba(255,255,255,.04);
}

.text-secondary{color:var(--muted) !important;}

.bg-body-tertiary{
  background:var(--app-bg) !important;
}

.breadcrumb{
  --bs-breadcrumb-divider-color: rgba(234,242,255,.45);
  --bs-breadcrumb-item-active-color: rgba(234,242,255,.65);
}

.breadcrumb .breadcrumb-item a{ color: rgba(234,242,255,.85); }

.app-hero{
  position:relative;
  overflow:hidden;
}

.app-hero::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(700px 500px at 10% 20%, rgba(59,130,246,.28), transparent 60%),
    radial-gradient(600px 450px at 85% 35%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(700px 520px at 50% 120%, rgba(139,92,246,.12), transparent 60%),
    linear-gradient(180deg, rgba(5,9,20,.45) 0%, rgba(5,9,20,.15) 75%, rgba(5,9,20,0) 100%);
  pointer-events:none;
}

.app-hero > *{ position:relative; }

.app-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
  white-space:nowrap;
  line-height:1.1;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(234,242,255,.88);
  text-decoration:none;
}

.app-chip--truncate{
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.app-chip:hover{ color:#fff; border-color:rgba(255,255,255,.20); }

.app-chip--primary{
  border:1px solid rgba(34,211,238,.28);
  background:linear-gradient(135deg, rgba(34,211,238,.18), rgba(59,130,246,.14));
}

.app-chip--active{
  border-color:rgba(34,211,238,.45);
  background:linear-gradient(135deg, rgba(34,211,238,.26), rgba(59,130,246,.20));
  box-shadow:0 10px 30px rgba(59,130,246,.18);
}

.app-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-1);
  backdrop-filter:blur(16px);
}

.app-card--hover{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.app-card--hover:hover{
  transform:translateY(-3px);
  border-color:rgba(34,211,238,.22);
  box-shadow:var(--shadow-2);
}

.app-product-img{
  height:200px;
  object-fit:cover;
  border-top-left-radius:var(--radius-xl);
  border-top-right-radius:var(--radius-xl);
}

.app-price{
  font-weight:800;
  background:linear-gradient(135deg, rgba(34,211,238,.98), rgba(59,130,246,.98));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.offcanvas{
  background:rgba(7,10,18,.92);
  color:var(--text);
  border-right:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(18px);
}

.offcanvas .btn-close{
  filter:invert(1);
  opacity:.85;
}

.dropdown-menu{
  background:rgba(10,14,24,.94);
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow-1);
}

.dropdown-item{ color:rgba(234,242,255,.88); }
.dropdown-item:hover{ color:#fff; background:rgba(255,255,255,.08); }

.table{
  color:rgba(234,242,255,.86);
}

.table thead th{
  color:rgba(234,242,255,.86);
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
}

.table tbody td,
.table tbody th,
.table tfoot td,
.table tfoot th{
  color:rgba(234,242,255,.82);
  border-color:rgba(255,255,255,.10);
}

.table-striped > tbody > tr:nth-of-type(odd) > *{
  color:rgba(234,242,255,.84);
  background:rgba(255,255,255,.03);
}

.table-hover > tbody > tr:hover > *{
  color:#fff;
  background:rgba(255,255,255,.06);
}

.app-spec-table tbody tr td{
  color:rgba(234,242,255,.84);
}

.form-control,
.form-select,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="search"]{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:rgba(234,242,255,.90) !important;
}

.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus{
  outline:0;
  border-color:rgba(34,211,238,.35) !important;
  box-shadow:0 0 0 .2rem rgba(59,130,246,.20) !important;
}

.form-control::placeholder,
textarea::placeholder,
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="search"]::placeholder{
  color:rgba(234,242,255,.45) !important;
}

select{
  color-scheme:dark;
}

select option,
select optgroup{
  background:rgba(10,14,24,.96);
  color:rgba(234,242,255,.92);
}

.pagination{ --bs-pagination-bg: rgba(255,255,255,.06); --bs-pagination-border-color: rgba(255,255,255,.12); }
.page-link{ color:rgba(234,242,255,.86); }
.page-link:hover{ color:#fff; background:rgba(255,255,255,.10); }
.page-link:focus{ box-shadow:0 0 0 .2rem rgba(59,130,246,.25); }

.app-pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}

.app-pager .page-link{
  border-radius:999px;
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}

.admin-shell{
  display:flex;
  min-height:100vh;
}

.admin-sidebar{
  width:260px;
  flex:0 0 260px;
  background:linear-gradient(180deg, rgba(12,27,58,.88) 0%, rgba(7,10,18,.92) 100%);
  border-right:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
  padding:14px;
}

.admin-sidebar__brand{
  padding:10px 10px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:12px;
}

.admin-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:rgba(234,242,255,.92);
  font-weight:700;
}

.admin-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.admin-nav__link{
  display:flex;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  color:rgba(234,242,255,.86);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

.admin-nav__link:hover{
  color:#fff;
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
}

.admin-nav__sep{
  height:1px;
  background:rgba(255,255,255,.10);
  margin:6px 0;
}

.admin-main{
  flex:1 1 auto;
  min-width:0;
}

.admin-topbar{
  background:rgba(0,0,0,.28);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}

.admin-content{
  max-width:1400px;
}

.admin-offcanvas{
  background:rgba(7,10,18,.94);
  color:var(--text);
}

.app-spec-table{
  border-collapse:separate;
  border-spacing:0;
}

.app-spec-table tbody tr td{
  padding-top:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.app-spec-table tbody tr:last-child td{
  border-bottom:0;
}

.app-spec-table tbody tr:nth-child(odd) td{
  background:rgba(255,255,255,.03);
}

.app-spec-table tbody tr td:first-child{
  width:220px;
  font-weight:600;
  color:rgba(234,242,255,.70);
}

.input-group-text{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:rgba(234,242,255,.75) !important;
}

.alert{
  border-radius:var(--radius-lg);
}

.badge{
  font-weight:600;
  padding:5px 10px;
  border-radius:20px;
}

.badge.bg-success{
  background:rgba(34,197,94,.2) !important;
  color:#22C55E !important;
}

.badge.bg-warning{
  background:rgba(234,179,8,.2) !important;
  color:#EAB308 !important;
}

.badge.bg-info{
  background:rgba(59,130,246,.2) !important;
  color:#3B82F6 !important;
}

.badge.bg-danger{
  background:rgba(239,68,68,.2) !important;
  color:#EF4444 !important;
}