/* ============================================================
   ZepStore Design System
   One coherent visual language for the whole site + admin panel.
   Every selector below matches class/ID names already used inside
   the PHP templates — no markup or backend logic was changed to
   produce this refresh.
   ============================================================ */

/* ---------- 1. Foundations : color, type, radius, elevation ---------- */
:root{
  /* Brand */
  --zep-primary:#4B39EF;
  --zep-primary-hover:#3C2BD6;
  --zep-primary-soft:rgba(75,57,239,.10);
  --zep-accent:#0FB873;         /* verified / success / download */
  --zep-accent-soft:rgba(15,184,115,.12);
  --zep-amber:#F5A524;          /* ratings / stars */
  --zep-danger:#E23A5D;
  --zep-danger-hover:#C22B4B;

  /* Surfaces (light) */
  --zep-bg:#F3F4F8;
  --zep-surface:#FFFFFF;
  --zep-surface-muted:#EDEEF5;
  --zep-border:#E3E5EF;
  --zep-text:#15161F;
  --zep-text-secondary:#666B7D;

  /* Radius scale — deliberately tiered, not one-size-fits-all */
  --zep-radius-lg:24px;   /* hero panels, auth card, app header card */
  --zep-radius:18px;      /* standard cards / tiles */
  --zep-radius-sm:13px;   /* inputs, chips-inner, small surfaces */
  --zep-radius-pill:999px;/* buttons, chips, badges */

  /* Elevation — used sparingly, mostly on hover/interaction */
  --zep-shadow-sm:0 1px 2px rgba(19,20,32,.05), 0 1px 1px rgba(19,20,32,.04);
  --zep-shadow:0 14px 34px -16px rgba(19,20,32,.20);
  --zep-shadow-lg:0 26px 60px -20px rgba(19,20,32,.30);

  --zep-font-display:'Sora','Manrope',system-ui,-apple-system,sans-serif;
  --zep-font-body:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  color-scheme: light;

  /* Bring key Bootstrap tokens in line so native components
     (tables, badges, dropdowns, pagination, alerts) inherit the brand
     without needing a bespoke override for every component. */
  --bs-body-bg:var(--zep-bg);
  --bs-body-color:var(--zep-text);
  --bs-body-font-family:var(--zep-font-body);
  --bs-border-color:var(--zep-border);
  --bs-primary:var(--zep-primary);
  --bs-primary-rgb:75,57,239;
  --bs-link-color:var(--zep-primary);
  --bs-link-hover-color:var(--zep-primary-hover);
  --bs-emphasis-color:var(--zep-text);
  --bs-secondary-color:var(--zep-text-secondary);
  --bs-heading-color:var(--zep-text);
}

[data-bs-theme="dark"]{
  --zep-bg:#0D0E14;
  --zep-surface:#171922;
  --zep-surface-muted:#1F212C;
  --zep-border:#2B2E3D;
  --zep-text:#EEF0F7;
  --zep-text-secondary:#9298AC;

  --zep-primary:#8C7DFF;
  --zep-primary-hover:#A79BFF;
  --zep-primary-soft:rgba(140,125,255,.16);
  --zep-accent:#22D48B;
  --zep-accent-soft:rgba(34,212,139,.15);
  --zep-amber:#FFBB45;
  --zep-danger:#FF6B88;
  --zep-danger-hover:#FF8CA2;

  --zep-shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --zep-shadow:0 16px 38px -16px rgba(0,0,0,.55);
  --zep-shadow-lg:0 28px 64px -18px rgba(0,0,0,.65);

  color-scheme: dark;

  --bs-body-bg:var(--zep-bg);
  --bs-body-color:var(--zep-text);
  --bs-border-color:var(--zep-border);
  --bs-primary:var(--zep-primary);
  --bs-primary-rgb:140,125,255;
  --bs-link-color:var(--zep-primary);
  --bs-link-hover-color:var(--zep-primary-hover);
  --bs-emphasis-color:var(--zep-text);
  --bs-secondary-color:var(--zep-text-secondary);
  --bs-heading-color:var(--zep-text);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}
body{
  background:var(--zep-bg);
  color:var(--zep-text);
  font-family:var(--zep-font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .2s ease,color .2s ease;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--zep-font-display); color:var(--zep-text); letter-spacing:-.01em; }
p{ line-height:1.6; }
a{ color:var(--zep-primary); }
a:hover{ color:var(--zep-primary-hover); }
.text-secondary{ color:var(--zep-text-secondary) !important; }
::selection{ background:var(--zep-primary-soft); color:var(--zep-text); }
img{ max-width:100%; }
.container,.container-fluid{ overflow-x:visible; max-width:1360px; }
main{ min-height:55vh; }
hr{ border-color:var(--zep-border); opacity:1; }

/* Visible keyboard focus everywhere, including inside dark admin shell */
a:focus-visible,button:focus-visible,.btn:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.category-chip:focus-visible,.app-card:focus-visible,.app-tile:focus-visible{
  outline:2px solid var(--zep-primary);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- 2. Buttons ---------- */
.btn{
  position:relative;
  border-radius:var(--zep-radius-pill);
  font-weight:700;
  font-family:var(--zep-font-body);
  padding:.6rem 1.3rem;
  letter-spacing:.01em;
  box-shadow:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease,filter .2s ease;
}
.btn:active{ transform:translateY(1px) scale(.985); }
.btn-sm{ border-radius:var(--zep-radius-pill); padding:.36rem 1rem; font-size:.82rem; gap:.35rem; }
.btn-lg{ padding:.8rem 1.7rem; font-size:1.02rem; }
.btn:disabled,.btn.disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-primary{
  background:linear-gradient(155deg, color-mix(in srgb, var(--zep-primary) 100%, white 12%), var(--zep-primary) 60%);
  border-color:transparent; color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 10px 22px -12px color-mix(in srgb, var(--zep-primary) 70%, transparent);
}
.btn-primary:hover,.btn-primary:focus{
  background:linear-gradient(155deg, color-mix(in srgb, var(--zep-primary) 100%, white 12%), var(--zep-primary-hover) 65%);
  border-color:transparent; color:#fff; transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 14px 28px -12px color-mix(in srgb, var(--zep-primary) 78%, transparent);
}

.btn-secondary{ background:var(--zep-surface-muted); border-color:var(--zep-surface-muted); color:var(--zep-text); }
.btn-secondary:hover{ background:var(--zep-border); border-color:var(--zep-border); color:var(--zep-text); }

.btn-outline-primary{ color:var(--zep-primary); border-width:1.5px; border-color:var(--zep-primary); background:transparent; }
.btn-outline-primary:hover{ background:var(--zep-primary); color:#fff; transform:translateY(-1px); box-shadow:0 10px 22px -14px color-mix(in srgb, var(--zep-primary) 70%, transparent); }

.btn-outline-secondary{ color:var(--zep-text); border-width:1.5px; border-color:var(--zep-border); background:transparent; }
.btn-outline-secondary:hover{ background:var(--zep-surface-muted); border-color:var(--zep-border); color:var(--zep-text); }

.btn-danger{
  background:linear-gradient(155deg, color-mix(in srgb, var(--zep-danger) 100%, white 14%), var(--zep-danger) 60%);
  border-color:transparent; color:#fff;
  box-shadow:0 10px 22px -14px color-mix(in srgb, var(--zep-danger) 70%, transparent);
}
.btn-danger:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn-outline-danger{ color:var(--zep-danger); border-width:1.5px; border-color:var(--zep-danger); background:transparent; }
.btn-outline-danger:hover{ background:var(--zep-danger); color:#fff; }

.btn-success{
  background:linear-gradient(155deg, color-mix(in srgb, var(--zep-accent) 100%, white 14%), var(--zep-accent) 60%);
  border-color:transparent; color:#fff;
  box-shadow:0 10px 22px -14px color-mix(in srgb, var(--zep-accent) 70%, transparent);
}
.btn-success:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn-light{ background:rgba(255,255,255,.92); border-color:transparent; color:var(--zep-text); }
.btn-link{ text-decoration:none; }
.btn-link:hover{ text-decoration:underline; }

/* ---------- 3. Forms ---------- */
.form-control,.form-select{
  border-radius:var(--zep-radius-sm);
  border:1.5px solid var(--zep-border);
  background:var(--zep-surface);
  color:var(--zep-text);
  min-height:46px;
  padding:.6rem .9rem;
  font-family:var(--zep-font-body);
  transition:border-color .15s ease,box-shadow .15s ease;
}
textarea.form-control{ min-height:auto; }
.form-control::placeholder{ color:var(--zep-text-secondary); opacity:.85; }
.form-control:focus,.form-select:focus{
  border-color:var(--zep-primary);
  box-shadow:0 0 0 4px var(--zep-primary-soft);
  background:var(--zep-surface);
  color:var(--zep-text);
}
.form-control.is-invalid,.form-select.is-invalid{ border-color:var(--zep-danger); }
.form-control.is-invalid:focus{ box-shadow:0 0 0 4px rgba(226,58,93,.14); }
.form-control.is-valid,.form-select.is-valid{ border-color:var(--zep-accent); }
.form-label{ font-weight:600; font-size:.86rem; margin-bottom:.4rem; color:var(--zep-text); }
.form-text{ color:var(--zep-text-secondary); font-size:.8rem; }
.invalid-feedback{ color:var(--zep-danger); }
.valid-feedback{ color:var(--zep-accent); }
.input-group-text{ background:var(--zep-surface-muted); border:1.5px solid var(--zep-border); color:var(--zep-text-secondary); }
.form-check-input{ border-color:var(--zep-border); }
.form-check-input:checked{ background-color:var(--zep-primary); border-color:var(--zep-primary); }
input[type=file].form-control{ padding:.5rem .6rem; min-height:auto; }
input[type=file].form-control::file-selector-button{
  border:0; border-radius:var(--zep-radius-pill); padding:.5rem .95rem; margin-right:.7rem;
  background:var(--zep-primary); color:#fff; font-weight:600; cursor:pointer;
}

/* ---------- 4. Alerts / badges ---------- */
.alert{ border-radius:var(--zep-radius-sm); border:none; padding:.85rem 1.1rem; }
.alert-danger{ background:#FDEBEF; color:#9E1F41; }
.alert-success{ background:#E4F8EE; color:#0A7A4E; }
.alert-info{ background:#EBEAFC; color:#3A2BC0; }
.alert-warning{ background:#FEF3DE; color:#93610A; }
[data-bs-theme="dark"] .alert-danger{ background:rgba(226,58,93,.16); color:#FF9DB5; }
[data-bs-theme="dark"] .alert-success{ background:rgba(15,184,115,.16); color:#6EE7B7; }
[data-bs-theme="dark"] .alert-info{ background:rgba(140,125,255,.16); color:#C3BAFF; }
[data-bs-theme="dark"] .alert-warning{ background:rgba(245,165,36,.16); color:#FFD180; }

.badge{ font-weight:600; border-radius:var(--zep-radius-pill); padding:.4em .75em; letter-spacing:.01em; }
.site-notice{ font-weight:600; letter-spacing:.01em; }

/* ---------- 5. Modals ---------- */
.modal-content{ background:var(--zep-surface); color:var(--zep-text); border:none; border-radius:var(--zep-radius); box-shadow:var(--zep-shadow-lg); }
.modal-header,.modal-footer{ border-color:var(--zep-border); }
.modal-backdrop.show{ opacity:.6; }
.btn-close{ filter:none; }
[data-bs-theme="dark"] .btn-close{ filter:invert(1) grayscale(100%) brightness(200%); }
@media (max-width:576px){ .modal-dialog{ margin:.75rem; } }

/* ---------- 6. Navbar ---------- */
..zep-navbar{
  background:var(--zep-surface);
  background:color-mix(in srgb, var(--zep-surface) 92%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--zep-border);
  box-shadow:none;
  padding-top:.6rem;
  padding-bottom:.6rem;
}

.zep-navbar .container{
  position:relative;
  min-height:34px;
}

.zep-navbar .navbar-brand{
  color:var(--zep-text);
  font-family:var(--zep-font-display);
  font-weight:700;
  font-size:1.2rem;
}

/* Center ZepStore logo + name */
.zep-centered-logo{
  position:absolute !important;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  margin:0 !important;
  white-space:nowrap;
  z-index:10;
}

.zep-logo-mark{
  width:34px;
  height:34px;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(
    155deg,
    color-mix(in srgb,var(--zep-primary) 100%,white 20%) 0%,
    var(--zep-primary) 55%,
    var(--zep-primary-hover) 100%
  );
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.05rem;
  flex-shrink:0;
  position:relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 6px 14px -6px
    color-mix(in srgb,var(--zep-primary) 60%,transparent);
}

.zep-logo-mark::after{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--zep-amber);
  top:-2px;
  right:-2px;
  box-shadow:0 0 0 2px var(--zep-surface);
}

#themeToggle,.zep-theme-btn{
  width:40px; height:40px; border-radius:50%; padding:0; display:flex; align-items:center; justify-content:center;
  background:var(--zep-surface-muted); border:1px solid var(--zep-border); color:var(--zep-text); font-size:1.05rem;
  transition:background .15s ease,transform .15s ease;
}
.zep-theme-btn:hover{ background:var(--zep-border); transform:translateY(-1px); }
[data-bs-theme="dark"] .zep-theme-btn{ color:var(--zep-amber); }

/* Custom hamburger toggle (kept as a button, not the default bootstrap icon) */
.zep-menu-btn{
  border:1px solid var(--zep-border)!important; background:var(--zep-surface)!important; color:var(--zep-text)!important;
  min-width:74px; height:40px; padding:5px 10px!important; border-radius:var(--zep-radius-pill)!important;
  align-items:center; justify-content:center; gap:8px;
  box-shadow:none!important; transition:border-color .2s ease,background .2s ease;
}
@media (max-width:991.98px){ .zep-menu-btn{ display:inline-flex!important; } }
.zep-menu-btn:hover,.zep-menu-btn:focus{ border-color:var(--zep-primary)!important; background:var(--zep-primary-soft)!important; }
.zep-menu-label{ font-size:.74rem; font-weight:700; letter-spacing:.02em; }
.zep-menu-icon{ width:18px; height:14px; display:flex; flex-direction:column; justify-content:space-between; }
.zep-menu-icon i{ display:block; height:2px; border-radius:99px; background:currentColor; transition:transform .25s ease,opacity .2s ease,width .25s ease; }
.zep-menu-icon i:nth-child(2){ width:12px; margin-left:auto; }
.zep-menu-btn[aria-expanded="true"] .zep-menu-icon i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.zep-menu-btn[aria-expanded="true"] .zep-menu-icon i:nth-child(2){ opacity:0; width:0; }
.zep-menu-btn[aria-expanded="true"] .zep-menu-icon i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.zep-navbar .navbar-collapse.show{ animation:zepMenuIn .18s ease both; }
@keyframes zepMenuIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.zep-search-form .input-group,.zep-hero-search .input-group{
  border:1.5px solid var(--zep-border); border-radius:var(--zep-radius-pill); overflow:hidden;
  background:var(--zep-surface-muted); box-shadow:none; transition:border-color .15s ease,box-shadow .15s ease;
}
.zep-search-form .input-group:focus-within{ border-color:var(--zep-primary); box-shadow:0 0 0 4px var(--zep-primary-soft); }
.zep-search-form .input-group-text,.zep-search-form .form-control{ background:transparent; border:none; }
.zep-search-form .form-control{ min-height:42px; }
.zep-search-form .form-control:focus{ box-shadow:none; }
.zep-search-form{ max-width:460px; }

/* ---------- 7. Mobile bottom nav ---------- */
.zep-bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1040;
  display:flex; justify-content:space-around; align-items:center;
  background:var(--zep-surface);
  background:color-mix(in srgb, var(--zep-surface) 94%, transparent);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--zep-border);
  box-shadow:0 -8px 24px rgba(19,20,32,.06);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.zep-bottom-nav a{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--zep-text-secondary); text-decoration:none; font-size:.66rem; font-weight:600;
  flex:1; padding:5px 2px; min-height:46px; justify-content:center; border-radius:12px;
}
.zep-bottom-nav a i{ font-size:1.25rem; }
.zep-bottom-nav a.active{ color:var(--zep-primary); background:var(--zep-primary-soft); }
.zep-bottom-nav-avatar{ width:22px; height:22px; border-radius:50%; object-fit:cover; }
@media (min-width:992px){ .zep-bottom-nav{ display:none; } }
@media (max-width:991px){ body{ padding-bottom:66px; } }

/* ---------- 8. Home hero + search ---------- */
.zep-hero-search-wrap{ padding:30px 0 8px; }
.zep-hero-search-wrap h1{ font-size:1.55rem; font-weight:700; margin-bottom:16px; text-align:center; }
.zep-home-hero{
  position:relative; overflow:hidden; margin-top:14px;
  background:
    radial-gradient(520px 220px at 88% -20%, rgba(140,125,255,.35), transparent 70%),
    linear-gradient(160deg, #15121F 0%, #1C1830 55%, #241C3E 100%);
  background-image:
    radial-gradient(520px 220px at 88% -20%, rgba(140,125,255,.35), transparent 70%),
    linear-gradient(160deg, #15121F 0%, #1C1830 55%, #241C3E 100%),
    radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:auto,auto,16px 16px;
  color:#fff; border-radius:var(--zep-radius-lg); padding:44px 28px; text-align:center;
}
.zep-home-hero h1{ font-family:var(--zep-font-display); font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; letter-spacing:-.02em; margin-bottom:4px; color:#fff; }
.zep-home-hero p.tagline{ color:rgba(255,255,255,.72); margin-bottom:22px; }
.zep-hero-search{ max-width:640px; margin:0 auto; position:relative; z-index:1; }
.zep-hero-search .input-group{ background:rgba(255,255,255,.97)!important; border-color:transparent!important; box-shadow:var(--zep-shadow-lg)!important; }
.zep-hero-search .form-control{ border:none; background:transparent; padding:14px 8px; font-size:1rem; color:#15161F; }
.zep-hero-search .form-control:focus{ box-shadow:none; }
.zep-hero-search .input-group-text{ background:transparent; border:none; padding-left:20px; color:#70758a; }
.zep-hero-search button{ border:none; background:transparent; padding-right:18px; color:var(--zep-primary); }
@media (max-width:576px){
  .zep-home-hero{ padding:30px 18px; border-radius:20px; }
  .zep-home-hero h1{ font-size:1.4rem; }
  .zep-hero-search-wrap{ padding-top:22px; }
}

/* ---------- 9. Hero banner carousel ---------- */
.zep-hero-banner{
  border-radius:var(--zep-radius); overflow:hidden; position:relative;
  background-size:cover; background-position:center; min-height:220px;
  display:flex; align-items:flex-end; color:#fff; box-shadow:var(--zep-shadow);
}
.zep-hero-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,10,18,.72), rgba(10,10,18,.05) 65%); }
.zep-hero-banner .banner-content{ position:relative; z-index:2; padding:22px; }
.zep-hero-banner .banner-content h1,.zep-hero-banner .banner-content h2,.zep-hero-banner .banner-content h3,
.zep-hero-banner .banner-content h4,.zep-hero-banner .banner-content h5,.zep-hero-banner .banner-content h6{ color:#fff; }
.carousel-control-prev,.carousel-control-next{ width:8%; opacity:0; transition:opacity .2s ease; }
#heroCarousel:hover .carousel-control-prev,
#heroCarousel:hover .carousel-control-next{ opacity:.85; }

/* ---------- 10. Section headings ---------- */
.section-heading{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:30px 0 14px; }
.section-heading h2{
  font-size:1.2rem; font-weight:700; margin:0; line-height:1.2;
  padding-left:13px; border-left:4px solid var(--zep-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.section-heading a{ font-size:.85rem; font-weight:700; text-decoration:none; color:var(--zep-primary); white-space:nowrap; flex-shrink:0; }
.section-heading a:hover{ text-decoration:underline; }

/* ---------- 11. Category chips + tiles ---------- */
.category-chip-row{ display:flex; gap:9px; overflow-x:auto; padding:4px 0 16px; scrollbar-width:none; }
.category-chip-row::-webkit-scrollbar{ display:none; }
.category-chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:var(--zep-surface); border:1.5px solid var(--zep-border);
  border-radius:var(--zep-radius-pill); padding:7px 15px 7px 8px; font-weight:600; font-size:.85rem;
  text-decoration:none; color:var(--zep-text); transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.category-chip .chip-icon{ width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.7rem; flex-shrink:0; }
.category-chip:hover,.category-chip.active{ background:var(--zep-text); border-color:var(--zep-text); color:var(--zep-surface); }
.category-chip:hover .chip-icon,.category-chip.active .chip-icon{ background:var(--zep-surface); color:var(--zep-text)!important; }
[data-bs-theme="dark"] .category-chip:hover,[data-bs-theme="dark"] .category-chip.active{ background:var(--zep-primary); border-color:var(--zep-primary); color:#fff; }

.category-tile{
  display:flex; align-items:center; gap:13px; background:var(--zep-surface); border:1.5px solid var(--zep-border);
  border-radius:var(--zep-radius); padding:16px; text-decoration:none; color:var(--zep-text); height:100%;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.category-tile:hover{ transform:translateY(-3px); border-color:var(--zep-primary); box-shadow:var(--zep-shadow); }
.category-tile-icon{ width:46px; height:46px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
.category-tile-name{ font-weight:700; font-size:.94rem; margin:0; }
.category-tile-count{ font-size:.78rem; color:var(--zep-text-secondary); margin:0; }

/* ---------- 12. App cards (list-style) + tiles (grid-style) ---------- */
.app-card{ display:block; color:inherit; height:100%; }
.app-card-inner{
  background:var(--zep-surface); border:1.5px solid var(--zep-border); border-radius:var(--zep-radius);
  padding:12px; height:100%; display:flex; gap:12px; align-items:flex-start; position:relative;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.app-card-inner:hover{ border-color:var(--zep-primary); transform:translateY(-2px); box-shadow:var(--zep-shadow); }
.app-card-icon-wrap{ position:relative; flex-shrink:0; }
.app-card-icon{ width:60px; height:60px; border-radius:16px; object-fit:cover; background:var(--zep-surface-muted); }
.app-card-verified{ position:absolute; bottom:-4px; right:-4px; color:var(--zep-primary); background:var(--zep-surface); border-radius:50%; font-size:.85rem; box-shadow:0 0 0 2px var(--zep-surface); }
.app-card-body{ min-width:0; flex:1; }
.app-card-title{ font-size:.94rem; font-weight:700; margin:0 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--zep-text); }
.app-card-dev{ font-size:.79rem; margin:0 0 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-card-meta{ font-size:.79rem; color:var(--zep-text-secondary); display:flex; align-items:center; gap:6px; }
.app-card-rating{ color:var(--zep-text); font-weight:600; }
.app-card-rating i{ color:var(--zep-amber); font-size:.72rem; }
.zep-badge-updated{ position:absolute; top:8px; right:8px; background:var(--zep-accent); color:#fff; font-size:.62rem; font-weight:700; border-radius:var(--zep-radius-pill); }

.app-rail{ display:grid; grid-auto-flow:column; grid-auto-columns:255px; gap:10px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; }
.app-rail .app-card{ scroll-snap-align:start; }

:root{ --zep-card-gap:14px; }
.app-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--zep-card-gap); align-items:stretch; }
@media (min-width:576px){ .app-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:768px){ .app-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
@media (min-width:1100px){ .app-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } }
@media (min-width:1440px){ .app-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }

.app-tile{ display:block; color:inherit; height:100%; }
.app-tile-inner{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px;
  padding:16px 12px; border-radius:var(--zep-radius); position:relative; height:100%;
  background:var(--zep-surface); border:1.5px solid var(--zep-border);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.app-tile-inner:hover{ border-color:var(--zep-primary); transform:translateY(-3px); box-shadow:var(--zep-shadow); }
.app-tile-icon-wrap{ position:relative; }
.app-tile-icon{ width:72px; height:72px; border-radius:19px; object-fit:cover; background:var(--zep-surface-muted); }
.app-tile-verified{ position:absolute; bottom:-3px; right:-3px; color:var(--zep-primary); background:var(--zep-surface); border-radius:50%; font-size:.8rem; line-height:1; box-shadow:0 0 0 2px var(--zep-surface); }
.app-tile-title{
  font-size:.9rem; font-weight:700; margin:0; color:var(--zep-text); width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.25;
}
.app-tile-meta{ font-size:.76rem; color:var(--zep-text-secondary); display:flex; align-items:center; gap:4px; max-width:100%; }
.app-tile-meta .dot{ opacity:.6; }
.app-tile-rating{ display:flex; align-items:center; gap:3px; }
.app-tile-rating i{ color:var(--zep-amber); font-size:.72rem; }
.app-tile-badge{ position:absolute; top:9px; right:9px; z-index:3; background:var(--zep-accent); color:#fff; font-size:.6rem; font-weight:700; border-radius:var(--zep-radius-pill); padding:2px 8px; }

/* ---------- 13. CTA banner (request an app) ---------- */
.zep-cta-banner{
  background:linear-gradient(135deg, var(--zep-primary-soft), var(--zep-accent-soft));
  border:1.5px solid var(--zep-border); border-radius:var(--zep-radius-lg);
  padding:24px 26px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:10px 0 34px;
}
.zep-cta-banner .cta-text{ font-weight:700; font-size:1.05rem; font-family:var(--zep-font-display); }
.zep-cta-banner .cta-sub{ font-size:.86rem; color:var(--zep-text-secondary); margin-top:3px; max-width:46ch; }

/* ---------- 14. App detail page ---------- */
.zep-breadcrumb{ font-size:.85rem; }
.app-header-card{ background:var(--zep-surface); border:1.5px solid var(--zep-border); border-radius:var(--zep-radius-lg); padding:26px; overflow:hidden; }
.app-header-icon{ width:104px; height:104px; border-radius:var(--zep-radius); object-fit:cover; box-shadow:var(--zep-shadow-sm); }
.app-inline-rating{ font-weight:700; font-size:.92rem; }
.app-inline-rating i{ color:var(--zep-amber); font-size:.82rem; margin-right:2px; }
.category-pill{ background:var(--zep-surface-muted); color:var(--zep-text); font-size:.76rem; font-weight:600; padding:4px 12px; border-radius:var(--zep-radius-pill); text-decoration:none; }
.category-pill:hover{ background:var(--zep-border); color:var(--zep-text); }
.stat-box{ text-align:center; padding:14px 8px; border-radius:var(--zep-radius-sm); background:var(--zep-surface-muted); }
.stat-box .value{ font-weight:700; font-size:1.1rem; font-family:var(--zep-font-display); }
.stat-box .label{ font-size:.72rem; color:var(--zep-text-secondary); }

.screenshot-carousel-wrap{ position:relative; }
.screenshot-scroll{ display:flex; gap:12px; overflow-x:auto; padding:4px 2px 10px; scroll-snap-type:x proximity; scrollbar-width:thin; scroll-behavior:smooth; }
.screenshot-scroll img{ width:190px; height:340px; object-fit:cover; flex:0 0 auto; scroll-snap-align:start; border-radius:var(--zep-radius); cursor:pointer; box-shadow:var(--zep-shadow-sm); }
.screenshot-nav-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--zep-border);
  background:var(--zep-surface); color:var(--zep-text); box-shadow:var(--zep-shadow); align-items:center; justify-content:center;
}
.screenshot-nav-btn.prev{ left:-8px; } .screenshot-nav-btn.next{ right:-8px; }

.rating-bar-row{ display:flex; align-items:center; gap:10px; font-size:.85rem; margin-bottom:7px; }
.rating-bar-track{ flex:1; height:8px; background:var(--zep-surface-muted); border-radius:6px; overflow:hidden; }
.rating-bar-fill{ height:100%; background:var(--zep-amber); border-radius:6px; }
.review-card{ border-bottom:1px solid var(--zep-border); padding:18px 0; }
.review-card:last-child{ border-bottom:none; }
.star-input{ font-size:1.7rem; cursor:pointer; color:var(--zep-border); transition:color .1s ease,transform .1s ease; }
.star-input.active,.star-input:hover{ color:var(--zep-amber); }
#starRatingInput:hover .star-input{ transform:scale(1.04); }


/* ---------- App detail actions / responsive stats ---------- */
.app-action-buttons{
  width:100%;
  align-items:stretch;
}
.app-action-buttons .btn{
  min-height:44px;
  white-space:nowrap;
}
.app-action-download{
  min-width:150px;
}
.app-action-report{
  min-width:44px;
  padding-left:.8rem!important;
  padding-right:.8rem!important;
}

/* Keep the main brand visible while the page scrolls. */
.zep-navbar{
  position:sticky;
  top:0;
  z-index:1030;
  background:color-mix(in srgb, var(--zep-surface) 94%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.zep-footer .footer-bottom{
  width:100%;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  flex-direction:column!important;
  line-height:1.55;
}
.zep-footer .footer-bottom span{
  display:block;
  width:100%;
}

@media (max-width:767px){
  .app-action-buttons{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 48px;
    gap:8px!important;
  }
  .app-action-buttons .btn{
    width:100%;
    min-width:0;
    padding-left:.7rem!important;
    padding-right:.7rem!important;
    font-size:.84rem;
  }
  .app-action-download{
    grid-column:1 / -1;
  }
  .app-action-report{
    min-width:0;
  }
  .stat-box{
    min-width:0;
    padding:11px 5px;
  }
  .stat-box .value{
    font-size:clamp(.82rem,3.4vw,1rem);
    line-height:1.25;
    overflow-wrap:anywhere;
  }
  .stat-box .label{
    font-size:.66rem;
    line-height:1.25;
    margin-top:3px;
  }
}

@media (max-width:380px){
  .app-action-buttons{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;
  }
  .app-action-buttons .btn{
    font-size:.78rem;
  }
  .stat-box{
    padding-left:3px;
    padding-right:3px;
  }
  .stat-box .label{
    font-size:.61rem;
  }
}

/* ---------- 15. Empty states / skeletons / ads ---------- */
.zep-empty-state{ text-align:center; padding:60px 20px; color:var(--zep-text-secondary); }
.zep-empty-state i{ font-size:2.6rem; margin-bottom:14px; display:block; opacity:.6; }
.skeleton{ background:linear-gradient(90deg, var(--zep-surface-muted) 25%, var(--zep-border) 37%, var(--zep-surface-muted) 63%); background-size:400% 100%; animation:skeleton-loading 1.4s ease infinite; border-radius:var(--zep-radius-sm); }
@keyframes skeleton-loading{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }
.ad-slot{ margin:18px 0; text-align:center; overflow:hidden; border-radius:var(--zep-radius-sm); }

/* ---------- 16. Footer ---------- */
.zep-footer{ background:var(--zep-surface); border-top:1px solid var(--zep-border); margin-top:48px; }
.footer-link{ color:var(--zep-text-secondary); text-decoration:none; }
.footer-link:hover{ color:var(--zep-primary); }
.zep-footer .footer-bottom{ font-size:.8rem; }

/* ---------- 17. Auth cards ---------- */
.auth-card{ max-width:440px; margin:44px auto; background:var(--zep-surface); border:1.5px solid var(--zep-border); border-radius:var(--zep-radius-lg); padding:34px; box-shadow:var(--zep-shadow); }

/* ---------- 18. Profile / account hub ---------- */
.zep-account-menu-item{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:var(--zep-radius-sm); color:var(--zep-text); text-decoration:none; font-size:.92rem; font-weight:600; transition:background .15s ease; }
.zep-account-menu-item:hover{ background:var(--zep-surface-muted); }
.zep-account-menu-item i:first-child{ font-size:1.1rem; color:var(--zep-primary); width:20px; text-align:center; }
.zep-theme-pill .btn{ border-radius:var(--zep-radius-pill)!important; padding:4px 14px; font-size:.76rem; font-weight:700; border:1.5px solid var(--zep-border); background:transparent; color:var(--zep-text-secondary); }
.zep-theme-pill .btn.active{ background:var(--zep-primary); color:#fff; border-color:var(--zep-primary); }

/* ---------- 19. Developer console page ---------- */
.developer-hero{
  position:relative; overflow:hidden; border:none; border-radius:var(--zep-radius-lg);
  background:radial-gradient(480px 200px at 85% -10%, rgba(140,125,255,.35), transparent 70%), linear-gradient(160deg,#15121F 0%,#1C1830 55%,#241C3E 100%);
  color:#fff; padding:40px 32px; box-shadow:var(--zep-shadow-lg);
}
.developer-avatar{ width:92px; height:92px; border-radius:26px; display:grid; place-items:center; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.2); font-size:2rem; font-weight:800; font-family:var(--zep-font-display); flex-shrink:0; color:#fff; }
.developer-avatar-photo{ object-fit:cover; padding:0; background:none; }
.developer-bio{ color:rgba(255,255,255,.78); max-width:720px; }
.developer-social-row{ display:flex; flex-wrap:wrap; gap:9px; }
.developer-social-btn{
  width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:1.05rem;
  transition:background .15s ease,transform .15s ease,border-color .15s ease;
}
.developer-social-btn:hover{ background:var(--zep-primary); border-color:var(--zep-primary); color:#fff; transform:translateY(-2px); }
.developer-name{ font-family:var(--zep-font-display); font-size:clamp(1.6rem,4vw,2.3rem); font-weight:700; letter-spacing:-.02em; margin:0; color:#fff; }
.developer-role{ color:rgba(255,255,255,.75); font-weight:600; margin:5px 0 0; }
.developer-badge{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:var(--zep-radius-pill); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); font-size:.76rem; font-weight:700; }
.developer-card{ height:100%; padding:22px; border:1.5px solid var(--zep-border); border-radius:var(--zep-radius); background:var(--zep-surface); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.developer-card:hover{ transform:translateY(-3px); box-shadow:var(--zep-shadow); border-color:var(--zep-primary); }
.developer-icon{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--zep-primary-soft); color:var(--zep-primary); font-size:1.15rem; margin-bottom:14px; }
.developer-stat{ padding:16px; border-radius:var(--zep-radius-sm); background:var(--zep-surface-muted); border:1px solid var(--zep-border); }
.developer-stat strong{ display:block; font-size:1.1rem; font-family:var(--zep-font-display); color:var(--zep-text); }
.developer-stat span{ font-size:.78rem; color:var(--zep-text-secondary); }
.developer-actions .btn{ min-height:46px; }
@media (max-width:767px){
  .developer-hero{ padding:30px 20px; border-radius:22px; }
  .developer-avatar{ width:76px; height:76px; border-radius:22px; font-size:1.6rem; }
}

/* ---------- 20. Admin shell ---------- */
.admin-shell{ display:flex; min-height:100vh; background:var(--zep-bg); }
.admin-sidebar{
  width:256px; flex-shrink:0; min-height:100vh; position:sticky; top:0; align-self:flex-start;
  background:#101119; color:#c7cadb; border-right:1px solid rgba(255,255,255,.06);
}
.admin-sidebar a{
  color:#9aa0b8; text-decoration:none; display:flex; align-items:center; gap:11px;
  padding:11px 16px; font-size:.89rem; font-weight:600; border-radius:11px; margin:2px 12px;
  transition:background .15s ease,color .15s ease;
}
.admin-sidebar a i{ font-size:1.02rem; width:18px; text-align:center; opacity:.9; }
.admin-sidebar a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.admin-sidebar a.active{ background:var(--zep-primary); color:#fff; box-shadow:0 6px 18px rgba(140,125,255,.28); }
.admin-sidebar a .badge{ margin-left:auto; }
.admin-main{ flex:1; min-width:0; background:var(--zep-bg); }
.admin-topbar{ background:var(--zep-surface); border-bottom:1px solid var(--zep-border); padding:16px 26px; }
.admin-content{ padding:26px; max-width:1500px; margin:0 auto; }
.admin-content .form-control,.admin-content .form-select{ background:var(--zep-surface-muted); }
.admin-content .form-text{ color:var(--zep-text-secondary); font-size:.78rem; }
.admin-content .table{ --bs-table-bg:var(--zep-surface); }

.stat-card{ background:var(--zep-surface); border:1.5px solid var(--zep-border); border-radius:var(--zep-radius); padding:22px; }
.stat-card .stat-icon{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }

@media (max-width:991px){
  .admin-sidebar{ position:fixed; left:-260px; z-index:1050; transition:left .2s ease; height:100vh; }
  .admin-sidebar.open{ left:0; box-shadow:var(--zep-shadow-lg); }
}

/* ---------- 21. Bootstrap primitives used inside admin tables/pagination ---------- */
.table{ color:var(--zep-text); vertical-align:middle; }
.table > :not(caption) > * > *{ background-color:var(--zep-surface); color:var(--zep-text); border-bottom-color:var(--zep-border); }
.table thead th{ color:var(--zep-text-secondary); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; border-bottom-width:1px; }
.table-hover > tbody > tr:hover > *{ background-color:var(--zep-surface-muted); }

.pagination{ gap:4px; }
.page-link{ border-radius:var(--zep-radius-sm); border:1.5px solid var(--zep-border); color:var(--zep-text); background:var(--zep-surface); margin:0 2px; }
.page-link:hover{ background:var(--zep-surface-muted); color:var(--zep-text); }
.page-item.active .page-link{ background:var(--zep-primary); border-color:var(--zep-primary); color:#fff; }
.page-item.disabled .page-link{ color:var(--zep-text-secondary); background:transparent; }

.breadcrumb-item + .breadcrumb-item::before{ color:var(--zep-text-secondary); }

/* ---------- 22. Small screens: comfortable touch targets ---------- */
@media (max-width:576px){
  .container{ padding-left:14px; padding-right:14px; }
  .btn,.form-control,.form-select,.category-chip,.nav-link{ min-height:40px; }
  .btn-sm{ min-height:34px; }
  .app-header-card{ padding:18px; }
  .app-header-icon{ width:86px; height:86px; }
  .section-heading{ margin-top:24px; margin-bottom:12px; }
  .section-heading h2{ font-size:1.05rem; }
  .app-grid{ gap:10px; }
  .app-tile-inner{ padding:13px 8px; }
  .app-tile-icon{ width:64px; height:64px; border-radius:16px; }
  .app-tile-title{ font-size:.85rem; }
  .app-tile-meta{ font-size:.7rem; }
  .screenshot-scroll img{ width:156px; height:278px; }
  .auth-card{ margin:20px auto; padding:24px; }
  .zep-cta-banner{ padding:20px; }
  .zep-navbar .navbar-collapse{ padding:10px 0 4px; }
  .zep-navbar .navbar-nav .nav-link{ margin:2px 0; }
  .zep-search-form{ margin:10px 0!important; max-width:none; }
}
@media (max-width:380px){
  .app-grid{ gap:8px; }
  .app-tile-icon{ width:58px; height:58px; }
  .app-tile-title{ font-size:.8rem; }
}