 

:root{
   
  --gs-primary: #383873;      
  --gs-primary-2: #4b6885;    
  --gs-accent: #fcce04;       
  --gs-accent-2: #f2b510;     

  --gs-success: #16a34a;
  --gs-warning: #f2b510;
  --gs-danger: #ef4444;

   
  --gs-bg: #f7f8fc;
  --gs-surface: rgba(255,255,255,.86);
  --gs-surface-strong: rgba(255,255,255,.94);
  --gs-border: rgba(15,23,42,.10);
  --gs-border-strong: rgba(15,23,42,.14);

   
  --gs-text: #0f172a;
  --gs-muted: rgba(15,23,42,.62);
  --gs-muted-2: rgba(15,23,42,.46);

   
  --gs-shadow-sm: 0 6px 18px rgba(15,23,42,.08);
  --gs-shadow: 0 14px 50px rgba(15,23,42,.10);
  --gs-ring: 0 0 0 .25rem rgba(56,56,115,.14);
  --gs-ring-accent: 0 0 0 .25rem rgba(252,206,4,.22);
}

:root{
   
  --bs-body-bg: var(--gs-bg);
  --bs-body-color: var(--gs-text);
  --bs-primary: var(--gs-primary);
  --bs-success: var(--gs-success);
  --bs-warning: var(--gs-warning);
  --bs-danger: var(--gs-danger);
  --bs-link-color: var(--gs-primary);
  --bs-link-hover-color: #2f2f63;
  --bs-border-color: var(--gs-border);
  --bs-border-radius: 1rem;
  --bs-border-radius-sm: .85rem;
  --bs-border-radius-lg: 1.25rem;
  --bs-box-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --bs-box-shadow: 0 10px 30px rgba(15,23,42,.10);
  --bs-box-shadow-lg: 0 18px 60px rgba(15,23,42,.14);
}

html, body{height:100%;}

body.gs-body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(252,206,4,.20), transparent 62%),
    radial-gradient(900px 520px at 95% 12%, rgba(56,56,115,.16), transparent 60%),
    radial-gradient(900px 520px at 50% 100%, rgba(75,104,133,.14), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--gs-bg) 62%, var(--gs-bg) 100%);
  color: var(--gs-text);
}

 
.gs-shell{max-width: 1180px;}
.gs-muted{color: var(--gs-muted) !important;}
.gs-muted-2{color: var(--gs-muted-2) !important;}
.gs-divider{height:1px;background:var(--gs-border);}

 
.gs-logo{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--gs-border);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.gs-logo img{width: 100%; height: 100%; object-fit: cover;}
.gs-brand{font-weight: 800; letter-spacing: -.02em;}

 
.gs-card{
  background: var(--gs-surface-strong);
  border: 1px solid var(--gs-border);
  border-radius: 24px;
  box-shadow: var(--gs-shadow-sm);
  backdrop-filter: blur(10px);
}
.gs-card:hover{box-shadow: var(--gs-shadow);}
.gs-card-soft{background: var(--gs-surface);}

 
.btn{border-radius: 1.1rem;}
.btn:focus{box-shadow: var(--gs-ring);}
.btn-gs-primary{
  border: 0;
  color:#fff;
  background: linear-gradient(135deg, var(--gs-primary), var(--gs-primary-2));
  box-shadow: 0 14px 30px rgba(56,56,115,.22);
}
.btn-gs-primary:hover{filter:saturate(1.05); transform: translateY(-1px);}
.btn-gs-primary:active{transform: translateY(0px);}

.btn-gs-soft{
  background: rgba(252,206,4,.14);
  border: 1px solid rgba(252,206,4,.30);
  color: var(--gs-primary);
}
.btn-gs-soft:hover{background: rgba(252,206,4,.18); border-color: rgba(252,206,4,.38);}

.btn-gs-outline{
  background: rgba(255,255,255,.70);
  border: 1px solid var(--gs-border-strong);
  color: var(--gs-text);
}
.btn-gs-outline:hover{background:#fff; border-color: rgba(15,23,42,.22);}

 
.form-control, .form-select{
  border-radius: 1.1rem;
  border-color: var(--gs-border);
  background: rgba(255,255,255,.85);
}
.form-control:focus, .form-select:focus{box-shadow: var(--gs-ring-accent); border-color: rgba(252,206,4,.52);}

 
.gs-navbar{background: rgba(255,255,255,.80); border-bottom: 1px solid var(--gs-border); backdrop-filter: blur(10px);}
.gs-footer{background: rgba(255,255,255,.74); border-top: 1px solid var(--gs-border); backdrop-filter: blur(10px);}

 
.gs-topbar{background: rgba(255,255,255,.80); border-bottom: 1px solid var(--gs-border); backdrop-filter: blur(10px);}
.gs-sidebar{width: 288px; background: rgba(255,255,255,.84); border-right: 1px solid var(--gs-border); backdrop-filter: blur(10px);}

.gs-nav .nav-link{border-radius: 16px; color: rgba(15,23,42,.78); padding: .75rem .9rem;}
.gs-nav .nav-link:hover{background: rgba(15,23,42,.04);}
.gs-nav .nav-link.active{
  background: rgba(252,206,4,.16);
  border: 1px solid rgba(252,206,4,.28);
  color: var(--gs-primary);
  font-weight: 800;
}

 
.gs-badge{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--gs-border);
  background: rgba(255,255,255,.75);
  color: rgba(15,23,42,.80);
  font-size: .85rem;
  white-space: nowrap;
}
.gs-badge.success{border-color: rgba(22,163,74,.22); background: rgba(22,163,74,.08); color: #14532d;}
.gs-badge.warning{border-color: rgba(242,181,16,.34); background: rgba(242,181,16,.14); color: #7c2d12;}
.gs-badge.danger{border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.08); color: #7f1d1d;}
.gs-badge.info{border-color: rgba(56,56,115,.22); background: rgba(56,56,115,.08); color: #2f2f63;}

 
.gs-timeline{list-style:none; margin:0; padding:0; position:relative;}
.gs-timeline:before{content:""; position:absolute; left: 12px; top: 4px; bottom: 4px; width:2px; background: rgba(15,23,42,.10);}
.gs-timeline li{position:relative; padding-left: 42px; padding-bottom: 18px;}
.gs-timeline li:before{content:""; position:absolute; left: 6px; top: 2px; width: 14px; height: 14px; border-radius: 999px; background: linear-gradient(135deg, var(--gs-accent), var(--gs-accent-2)); box-shadow: 0 10px 18px rgba(242,181,16,.18);}
.gs-timeline li:last-child{padding-bottom:0;}

 
.toast-wrap{position: fixed; right: 18px; top: 86px; z-index: 1080; display:flex; flex-direction:column; gap: 10px; max-width: 420px;}
.toast-glass{
  display:flex; gap: 12px; align-items:flex-start;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.90);
  border: 1px solid var(--gs-border);
  box-shadow: var(--gs-shadow-sm);
  backdrop-filter: blur(10px);
}
.toast-glass .icon{
  width: 34px; height: 34px; border-radius: 14px;
  background: rgba(252,206,4,.18);
  display:flex; align-items:center; justify-content:center;
  color: var(--gs-primary);
}

 
.gs-kpi{border-radius: 24px; border: 1px solid var(--gs-border); background: rgba(255,255,255,.86); box-shadow: var(--gs-shadow-sm); padding: 18px;}
.gs-kpi .num{font-size: 1.55rem; font-weight: 900; letter-spacing: -.02em;}
.gs-kpi .label{color: var(--gs-muted); font-size: .9rem;}

@media (prefers-reduced-motion: reduce){
  *{transition: none !important; scroll-behavior: auto !important;}
}

 
.gs-hero{
  padding: 28px;
  border-radius: 28px;
  border: 1px solid var(--gs-border);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow: var(--gs-shadow-sm);
}
@media (min-width: 992px){
  .gs-hero{padding: 46px;}
}

 
.gs-quick-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
@media (min-width: 992px){
  .gs-quick-grid{grid-template-columns: 1fr;}
}

 
.gs-bottomnav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1035;
  background: rgba(255,255,255,.86);
  border-top: 1px solid var(--gs-border);
  backdrop-filter: blur(12px);
}
.gs-bottomnav-inner{
  max-width: 520px;
  margin: 0 auto;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.gs-bnav-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: rgba(15,23,42,.78);
  font-weight: 800;
  padding: 10px 8px;
  border-radius: 18px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.70);
}
.gs-bnav-item i{font-size: 1.15rem;}
.gs-bnav-item span{font-size: .78rem; line-height: 1;}
.gs-bnav-item:hover{background: rgba(255,255,255,.86);}
.gs-bnav-item.active{
  background: rgba(252,206,4,.16);
  border-color: rgba(252,206,4,.28);
  color: var(--gs-primary);
}
.gs-bnav-fab{
  width: 54px;
  height: 54px;
  border-radius: 22px;
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--gs-primary), var(--gs-primary-2));
  box-shadow: 0 14px 30px rgba(56,56,115,.24);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gs-bnav-fab i{font-size: 1.4rem;}
.gs-bnav-fab:active{transform: translateY(1px);}

 
@media (max-width: 991.98px){
  body.gs-panel .gs-panel-main{padding-bottom: 96px !important;}
  body.gs-panel .gs-footer{padding-bottom: 86px;}
}


 
.gs-tap-card{transition: transform .12s ease, box-shadow .12s ease;}
.gs-tap-card:active{transform: scale(.99);}

.gs-list-card{padding: 14px 14px; border-radius: 22px;}
.gs-list-meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center; color: var(--gs-muted); font-size: .85rem;}
.gs-code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 800; letter-spacing: .02em;}

 
.gs-sticky-actions{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1036;
  background: rgba(255,255,255,.90);
  border-top: 1px solid var(--gs-border);
  backdrop-filter: blur(12px);
}
.gs-sticky-inner{
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex;
  gap: 10px;
  align-items:center;
}
.gs-sticky-inner .btn{flex: 1;}
.gs-sticky-inner .btn.icon{flex: 0 0 auto; width: 46px; height: 46px; padding:0; display:flex; align-items:center; justify-content:center; border-radius: 18px;}

@media (max-width: 991.98px){
  body.gs-panel.gs-has-sticky-actions .gs-panel-main{padding-bottom: 120px !important;}
  body.gs-panel.gs-has-sticky-actions .gs-footer{padding-bottom: 0 !important;}
}

/* ------------------------------
   CATALOG (Public)
------------------------------ */
.gs-cat-pills .btn{border-radius: 999px; padding: 6px 12px;}
.gs-catalog-sidebar{position: sticky; top: 92px;}
.gs-side-link{
  display:flex;
  align-items:center;
  gap: .55rem;
  padding: .72rem .85rem;
  border-radius: 18px;
  text-decoration:none;
  color: rgba(15,23,42,.80);
  background: rgba(255,255,255,.70);
  border: 1px solid var(--gs-border);
}
.gs-side-link:hover{background:#fff; border-color: rgba(15,23,42,.22);}
.gs-side-link.active{
  background: rgba(252,206,4,.16);
  border-color: rgba(252,206,4,.28);
  color: var(--gs-primary);
  font-weight: 900;
}
.gs-side-link i{font-size: 1.05rem;}
.gs-catalog-card{transition: transform .15s ease, box-shadow .15s ease;}
.gs-catalog-card:hover{transform: translateY(-2px); box-shadow: 0 18px 45px rgba(0,0,0,.08);}
.gs-catalog-media{position: relative; border-radius: 26px 26px 0 0; overflow:hidden; background: rgba(56,56,115,.06);}
.gs-catalog-media img{width: 100%; height: 210px; object-fit: cover; display:block;}
.gs-catalog-placeholder{height: 210px; display:flex; align-items:center; justify-content:center; color: var(--gs-muted); font-size: 34px;}
.gs-catalog-badge{position: absolute; left: 12px; top: 12px;}
.gs-catalog-detail-media{border-radius: 22px; overflow:hidden; background: rgba(56,56,115,.06);}
.gs-catalog-detail-media img{width: 100%; height: 360px; object-fit: cover; display:block; border-radius: 22px;}

@media (max-width: 575.98px){
  .gs-catalog-media img,.gs-catalog-placeholder{height: 160px;}
}

/* ------------------------------
   CATALOG (Admin)
------------------------------ */
.gs-thumb{width: 58px; height: 58px; border-radius: 16px; overflow:hidden; background: rgba(56,56,115,.06); display:flex; align-items:center; justify-content:center;}
.gs-thumb img{width: 100%; height: 100%; object-fit: cover; display:block;}
.gs-thumb-ph{width: 58px; height: 58px; display:flex; align-items:center; justify-content:center; color: var(--gs-muted); font-size: 22px;}
.gs-thumb.gs-thumb-lg,.gs-thumb.gs-thumb-lg img,.gs-thumb.gs-thumb-lg .gs-thumb-ph{width: 74px; height: 74px; border-radius: 18px;}
