/* ==========================================================================
   VRIZMODS — NEUMORPHIC PREMIUM LIVE UI
   Frontend only — Backend / API tidak diubah
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {

  /* ---------- Background ---------- */

  --bg: #151821;
  --bg-deep: #0f1219;

  --surface: #1a1f2a;
  --surface-2: #1e2430;
  --surface-3: #232a38;

  /* ---------- Text ---------- */

  --text-main: #f5f7ff;
  --text-muted: #9da7ba;
  --text-subtle: #687386;

  /* ---------- Live Accent ---------- */

  --accent-1: #8b5cf6;
  --accent-2: #6366f1;
  --accent-3: #06b6d4;
  --accent-4: #ec4899;

  --accent-primary: #8b5cf6;
  --accent-secondary: #6366f1;

  --accent-soft:
    rgba(139, 92, 246, .14);

  /* ---------- Borders ---------- */

  --border-soft:
    rgba(255,255,255,.035);

  --border-card:
    rgba(255,255,255,.055);

  --border-hover:
    rgba(139,92,246,.24);

  /* ---------- Radius ---------- */

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 27px;
  --radius-full: 999px;

  /* ---------- Neumorphism ---------- */

  --shadow-dark:
    13px 15px 30px rgba(3,5,10,.68),
    5px 7px 15px rgba(4,6,12,.36);

  --shadow-light:
    -8px -8px 20px rgba(255,255,255,.028);

  --shadow-neu:
    var(--shadow-dark),
    var(--shadow-light);

  --shadow-inset:
    inset 5px 5px 12px rgba(5,7,13,.62),
    inset -5px -5px 12px rgba(255,255,255,.022);

  --shadow-glow:
    0 0 30px rgba(139,92,246,.12);

  /* ---------- Motion ---------- */

  --ease:
    cubic-bezier(.2,.75,.2,1);

}


/* ==========================================================================
   02. RESET
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  position: relative;

  min-height: 100vh;

  margin: 0;
  padding: 0;

  overflow-x: hidden;

  color: var(--text-main);

  font-family:
    'Plus Jakarta Sans',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;

  background:

    radial-gradient(
      circle at 12% 8%,
      rgba(139,92,246,.10),
      transparent 30%
    ),

    radial-gradient(
      circle at 88% 30%,
      rgba(6,182,212,.07),
      transparent 28%
    ),

    radial-gradient(
      circle at 50% 100%,
      rgba(236,72,153,.055),
      transparent 35%
    ),

    var(--bg);

  -webkit-font-smoothing: antialiased;

  letter-spacing: -.012em;
}


/* ==========================================================================
   03. LIVE AMBIENT LIGHT
   ========================================================================== */

body::before {

  content: "";

  position: fixed;

  inset: -30%;

  z-index: -2;

  pointer-events: none;

  background:

    radial-gradient(
      circle at 18% 25%,
      rgba(139,92,246,.11),
      transparent 23%
    ),

    radial-gradient(
      circle at 82% 22%,
      rgba(6,182,212,.085),
      transparent 22%
    ),

    radial-gradient(
      circle at 65% 78%,
      rgba(236,72,153,.075),
      transparent 25%
    );

  filter: blur(50px);

  animation:
    ambientFloat 16s ease-in-out infinite alternate;
}


body::after {

  content: "";

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:

    linear-gradient(
      125deg,
      rgba(139,92,246,.025),
      transparent 28%,
      rgba(6,182,212,.025),
      transparent 58%,
      rgba(236,72,153,.02)
    );

  background-size: 260% 260%;

  animation:
    ambientGradient 15s ease infinite;
}


@keyframes ambientFloat {

  0% {
    transform:
      translate3d(-2%, -2%, 0)
      scale(1);
  }

  50% {
    transform:
      translate3d(3%, 2%, 0)
      scale(1.035);
  }

  100% {
    transform:
      translate3d(-1%, 4%, 0)
      scale(1.02);
  }

}


@keyframes ambientGradient {

  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }

}


/* ==========================================================================
   04. GLOBAL HELPERS
   ========================================================================== */

.max-w-lg {

  width: 100%;

  max-width: 960px;

  margin-left: auto;
  margin-right: auto;

}


.text-indigo {
  color:
    var(--accent-primary) !important;
}


.text-secondary,
.text-muted {

  color:
    var(--text-muted) !important;

}


.text-white {
  color: #fff !important;
}


/* ==========================================================================
   05. NAVBAR
   ========================================================================== */

.vriz-navbar {

  position: sticky;

  top: 0;

  background:

    linear-gradient(
      145deg,
      rgba(34,40,54,.94),
      rgba(19,23,32,.94)
    );

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  border-bottom:
    1px solid rgba(255,255,255,.035);

  box-shadow:

    0 10px 30px rgba(0,0,0,.36),

    inset 0 -1px 0
      rgba(255,255,255,.025);

  z-index: 1030;

}


/* ==========================================================================
   06. BRAND
   ========================================================================== */

.vriz-brand {

  color: #fff;

  font-size: 1.16rem;

  font-weight: 800;

  letter-spacing: -.055em;

  text-decoration: none;

  transition:
    transform .25s var(--ease),
    opacity .25s ease;

}


.vriz-brand:hover {

  color: #fff;

  transform:
    translateY(-1px);

}


.vriz-brand span {

  color:
    var(--accent-primary);

  text-shadow:
    0 0 13px
      rgba(139,92,246,.38);

  animation:
    brandPulse 4s ease-in-out infinite;

}


@keyframes brandPulse {

  0%,
  100% {

    color:
      var(--accent-1);

    text-shadow:
      0 0 10px
      rgba(139,92,246,.25);

  }

  50% {

    color:
      var(--accent-3);

    text-shadow:
      0 0 17px
      rgba(6,182,212,.42);

  }

}


/* ==========================================================================
   07. ICON BUTTON
   ========================================================================== */

.btn-icon {

  width: 41px;
  height: 41px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  color:
    var(--text-muted);

  background:

    linear-gradient(
      145deg,
      #222837,
      #151923
    );

  border:
    1px solid
    rgba(255,255,255,.035);

  border-radius:
    13px;

  box-shadow:
    var(--shadow-neu);

  transition:
    transform .25s var(--ease),
    color .25s ease,
    box-shadow .25s ease;

}


.btn-icon:hover {

  color: #fff;

  transform:
    translateY(-2px);

  box-shadow:

    0 0 22px
      rgba(139,92,246,.16),

    var(--shadow-neu);

}


.btn-icon:active {

  transform:
    scale(.94);

  box-shadow:
    var(--shadow-inset);

}


/* ==========================================================================
   08. HEADER LOGO
   ========================================================================== */

.vriz-logo-header {

  display: block;

  width: auto;

  height: 30px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 0 8px
      rgba(139,92,246,.24)
    );

  transition:
    transform .3s var(--ease),
    filter .3s ease;

}


.vriz-logo-header:hover {

  transform:
    scale(1.055);

  filter:
    drop-shadow(
      0 0 15px
      rgba(6,182,212,.42)
    );

}


/* ==========================================================================
   09. HERO
   ========================================================================== */

.vriz-hero {

  position: relative;

  padding:
    32px
    18px
    23px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.03);

  border-radius:
    var(--radius-xl);

  background:

    linear-gradient(
      145deg,
      rgba(35,41,55,.66),
      rgba(18,22,31,.52)
    );

  box-shadow:
    var(--shadow-neu);

}


.vriz-hero::before {

  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  top: -120px;
  left: 50%;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(139,92,246,.18),
      transparent 68%
    );

  filter: blur(10px);

  animation:
    heroGlow 7s ease-in-out infinite alternate;

}


.vriz-hero::after {

  content: "";

  position: absolute;

  width: 180px;
  height: 1px;

  left: 50%;
  bottom: 0;

  transform:
    translateX(-50%);

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(139,92,246,.5),
      transparent
    );

  opacity: .6;

  filter:
    blur(.5px);

}


@keyframes heroGlow {

  from {

    transform:
      translateX(-50%)
      scale(.88);

    opacity: .55;

  }

  to {

    transform:
      translateX(-50%)
      scale(1.28);

    opacity: 1;

  }

}


.hero-content {

  position: relative;

  z-index: 1;

}


.hero-title {

  color: #fff;

  font-size: 1.55rem;

  font-weight: 800;

  line-height: 1.2;

  letter-spacing: -.055em;

}


.hero-subtitle {

  color:
    var(--text-muted);

  font-size: .83rem;

  line-height: 1.65;

}


/* ==========================================================================
   10. SEARCH
   ========================================================================== */

.search-wrapper {

  position: relative;

  width: 100%;

  max-width: 540px;

}


.search-icon {

  position: absolute;

  top: 50%;
  left: 16px;

  z-index: 2;

  color:
    var(--text-subtle);

  transform:
    translateY(-50%);

  pointer-events: none;

  transition:
    color .25s ease,
    filter .25s ease;

}


.search-input {

  width: 100%;

  min-height: 49px;

  padding:
    13px
    17px
    13px
    45px;

  color:
    var(--text-main);

  font-size: .84rem;

  background:

    linear-gradient(
      145deg,
      #151923,
      #1e2430
    );

  border:
    1px solid
    rgba(255,255,255,.035);

  border-radius:
    var(--radius-md);

  outline: none;

  box-shadow:
    var(--shadow-inset);

  transition:
    border-color .25s ease,
    box-shadow .3s ease;

}


.search-input::placeholder {
  color:
    var(--text-subtle);
}


.search-input:hover {

  border-color:
    rgba(139,92,246,.13);

}


.search-input:focus {

  border-color:
    rgba(139,92,246,.48);

  box-shadow:

    var(--shadow-inset),

    0 0 0 3px
      rgba(139,92,246,.065),

    0 0 25px
      rgba(139,92,246,.11);

}


.search-wrapper:focus-within
.search-icon {

  color:
    var(--accent-primary);

  filter:
    drop-shadow(
      0 0 6px
      rgba(139,92,246,.5)
    );

}


/* ==========================================================================
   11. CATEGORY
   ========================================================================== */

.category-nav-wrapper {
  padding: 2px;
}


.category-scroll {

  display: flex;

  gap: 10px;

  padding:
    5px
    5px
    9px;

  overflow-x: auto;

  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;

}


.category-scroll::-webkit-scrollbar {
  display: none;
}


.cat-chip {

  position: relative;

  flex: 0 0 auto;

  min-height: 38px;

  padding:
    8px
    18px;

  color:
    var(--text-muted);

  font-size: .75rem;

  font-weight: 700;

  white-space: nowrap;

  cursor: pointer;

  background:

    linear-gradient(
      145deg,
      #222837,
      #151923
    );

  border:
    1px solid
    rgba(255,255,255,.035);

  border-radius:
    var(--radius-full);

  box-shadow:

    5px 5px 12px
      rgba(4,6,12,.5),

    -4px -4px 9px
      rgba(255,255,255,.022);

  transition:
    transform .25s var(--ease),
    color .25s ease,
    box-shadow .25s ease;

}


.cat-chip:hover {

  color: #fff;

  transform:
    translateY(-2px);

  box-shadow:

    0 0 19px
      rgba(139,92,246,.11),

    5px 5px 12px
      rgba(4,6,12,.5);

}


.cat-chip:active {

  transform:
    scale(.96);

  box-shadow:
    var(--shadow-inset);

}


.cat-chip.active {

  color: #fff;

  border-color:
    transparent;

  background:

    linear-gradient(
      120deg,
      var(--accent-1),
      var(--accent-2),
      var(--accent-3),
      var(--accent-4)
    );

  background-size:
    280% 280%;

  box-shadow:

    0 8px 22px
      rgba(99,102,241,.22),

    0 0 27px
      rgba(139,92,246,.14);

  animation:
    categoryLive 6s ease infinite;

}


@keyframes categoryLive {

  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }

}


/* ==========================================================================
   12. SECTION HEADER
   ========================================================================== */

.section-title {

  color:
    var(--text-main);

  font-size: .94rem;

  font-weight: 800;

  letter-spacing: -.035em;

}


.section-badge {

  display: inline-flex;

  align-items: center;

  min-height: 27px;

  padding:
    5px
    10px;

  color:
    var(--text-muted);

  font-size: .65rem;

  font-weight: 700;

  white-space: nowrap;

  background:

    linear-gradient(
      145deg,
      #222837,
      #151923
    );

  border:
    1px solid
    rgba(255,255,255,.035);

  border-radius:
    var(--radius-full);

  box-shadow:
    4px 4px 10px
      rgba(4,6,12,.42),

    -3px -3px 7px
      rgba(255,255,255,.018);

}


/* ==========================================================================
   13. APP GRID
   ========================================================================== */

#appGrid {

  --bs-gutter-x: .85rem;
  --bs-gutter-y: .85rem;

}


/* ==========================================================================
   14. MAIN APP CARD
   ========================================================================== */

.vriz-app-card {

  height: 100%;

  display: flex;

  flex-direction: column;

  padding: 0;

  background:

    linear-gradient(
      145deg,
      rgba(34,40,54,.97),
      rgba(19,23,32,.97)
    );

  border:
    1px solid
    rgba(255,255,255,.04);

  border-radius:
    var(--radius-lg);

  overflow: hidden;

  box-shadow:
    var(--shadow-neu);

  transition:
    transform .3s var(--ease),
    border-color .3s ease,
    box-shadow .3s ease;

}


.vriz-app-card::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  background:

    linear-gradient(
      125deg,
      rgba(139,92,246,.08),
      transparent 30%,
      transparent 70%,
      rgba(6,182,212,.045)
    );

  opacity: 0;

  transition:
    opacity .3s ease;

}


.vriz-app-card:hover {

  transform:
    translateY(-5px);

  border-color:
    var(--border-hover);

  box-shadow:

    16px 18px 35px
      rgba(2,4,9,.72),

    -8px -8px 22px
      rgba(255,255,255,.022),

    0 0 28px
      rgba(139,92,246,.08);

}


.vriz-app-card:hover::before {
  opacity: 1;
}


.vriz-app-card:active {

  transform:
    translateY(-1px)
    scale(.988);

  box-shadow:
    var(--shadow-inset);

}


/* ==========================================================================
   15. CARD MAIN AREA
   ========================================================================== */

.vriz-card-main {

  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  gap: 13px;

  min-width: 0;

  padding:
    15px;

  color: inherit;

}


.vriz-card-main:hover {
  color: inherit;
}


/* ==========================================================================
   16. ICON CONTAINER
   ========================================================================== */

.vriz-card-icon-wrap {

  position: relative;

  flex: 0 0 auto;

  width: 60px;
  height: 60px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius:
    17px;

  background:

    linear-gradient(
      145deg,
      #242b3a,
      #151923
    );

  box-shadow:

    inset 1px 1px 2px
      rgba(255,255,255,.025),

    7px 7px 14px
      rgba(4,6,12,.48),

    -4px -4px 9px
      rgba(255,255,255,.018);

}


.vriz-card-icon-wrap::after {

  content: "";

  position: absolute;

  inset: -1px;

  border-radius: inherit;

  border:
    1px solid
    rgba(139,92,246,.07);

  pointer-events: none;

}


.vriz-card-icon {

  width: 100%;

  height: 100%;

  max-width: 60px;
  max-height: 60px;

  display: block;

  object-fit: cover;

  border-radius:
    16px;

  border:
    1px solid
    rgba(255,255,255,.055);

  box-shadow:

    4px 5px 10px
      rgba(3,5,10,.48);

  transition:
    transform .3s var(--ease),
    filter .3s ease;

}


.vriz-app-card:hover
.vriz-card-icon {

  transform:
    scale(1.045)
    translateY(-1px);

  filter:
    brightness(1.04);

}


/* ==========================================================================
   17. FALLBACK ICON
   ========================================================================== */

.vriz-fallback-icon {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius:
    16px;

  color: #fff;

  font-size: 1.15rem;

  font-weight: 800;

  background:

    linear-gradient(
      135deg,
      var(--accent-1),
      var(--accent-2),
      var(--accent-3)
    );

  background-size:
    200% 200%;

  box-shadow:
    0 0 20px
      rgba(139,92,246,.16);

  animation:
    fallbackLive 7s ease infinite;

}


@keyframes fallbackLive {

  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }

}


/* ==========================================================================
   18. CARD BODY
   ========================================================================== */

.vriz-card-body {

  flex: 1;

  min-width: 0;

  overflow: hidden;

}


.vriz-card-heading {

  display: flex;

  align-items: center;

  min-width: 0;

}


.vriz-card-title {

  width: 100%;

  margin: 0 0 5px;

  overflow: hidden;

  color:
    var(--text-main);

  font-size: .85rem;

  font-weight: 800;

  line-height: 1.3;

  white-space: nowrap;

  text-overflow: ellipsis;

  letter-spacing:
    -.025em;

}


.vriz-card-meta {

  display: flex;

  align-items: center;

  gap: 6px;

  min-width: 0;

  color:
    var(--text-muted);

  font-size: .67rem;

  white-space: nowrap;

  overflow: hidden;

}


.vriz-card-meta > span:not(.vriz-tag-mod) {

  overflow: hidden;

  text-overflow: ellipsis;

}


.vriz-meta-dot,
.detail-dot {

  color:
    var(--text-subtle);

}


.vriz-card-submeta {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 6px;

  color:
    var(--text-subtle);

  font-size: .61rem;

}


.vriz-card-submeta span {

  position: relative;

}


.vriz-card-submeta span + span::before {

  content: "";

  display: inline-block;

  width: 3px;
  height: 3px;

  margin:
    0 7px 2px 0;

  border-radius: 50%;

  background:
    var(--text-subtle);

}


/* ==========================================================================
   19. MOD TAG
   ========================================================================== */

.vriz-tag-mod {

  display: inline-flex;

  align-items: center;

  max-width: 120px;

  padding:
    3px
    7px;

  overflow: hidden;

  color:
    #c9bdff;

  font-size: .58rem;

  font-weight: 800;

  line-height: 1.3;

  text-transform: uppercase;

  letter-spacing: .035em;

  white-space: nowrap;

  text-overflow: ellipsis;

  background:

    linear-gradient(
      135deg,
      rgba(139,92,246,.17),
      rgba(6,182,212,.07)
    );

  border:
    1px solid
    rgba(139,92,246,.18);

  border-radius:
    7px;

  box-shadow:
    inset 1px 1px 4px
      rgba(255,255,255,.018),

    0 0 11px
      rgba(139,92,246,.045);

}


/* ==========================================================================
   20. CARD FOOTER
   ========================================================================== */

.vriz-card-footer {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  padding:
    0 15px 15px;

}


.vriz-card-footer
.btn-card-action {

  width: 100%;

}


/* ==========================================================================
   21. ACTION BUTTON
   ========================================================================== */

.btn-card-action {

  position: relative;

  min-height: 38px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding:
    8px
    13px;

  overflow: hidden;

  color:
    var(--text-main);

  font-size: .7rem;

  font-weight: 800;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

  cursor: pointer;

  background:

    linear-gradient(
      145deg,
      #272e3d,
      #171b25
    );

  border:
    1px solid
    rgba(255,255,255,.045);

  border-radius:
    11px;

  box-shadow:

    5px 5px 11px
      rgba(3,5,10,.48),

    -3px -3px 8px
      rgba(255,255,255,.018);

  transition:
    transform .25s var(--ease),
    color .25s ease,
    background .25s ease,
    box-shadow .25s ease;

}


.btn-card-action::before {

  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 75%;
  height: 100%;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.13),
      transparent
    );

  transform:
    skewX(-18deg);

  transition:
    left .55s ease;

}


.btn-card-action:hover {

  color: #fff;

  transform:
    translateY(-1px);

  background:

    linear-gradient(
      135deg,
      var(--accent-1),
      var(--accent-2)
    );

  border-color:
    rgba(255,255,255,.09);

  box-shadow:

    0 0 20px
      rgba(139,92,246,.20);

}


.btn-card-action:hover::before {
  left: 140%;
}


.btn-card-action:active {

  transform:
    scale(.96);

  box-shadow:
    var(--shadow-inset);

}


.btn-card-action:focus-visible {

  outline: none;

  box-shadow:

    0 0 0 3px
      rgba(139,92,246,.12),

    0 0 22px
      rgba(139,92,246,.16);

}


/* ==========================================================================
   22. LOADING STATE
   ========================================================================== */

.vriz-loading-card {

  min-height: 130px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  padding: 24px;

}


.spinner-border {

  border-width: 2px;

  filter:
    drop-shadow(
      0 0 8px
      rgba(139,92,246,.42)
    );

}


/* ==========================================================================
   23. EMPTY / ERROR STATE
   ========================================================================== */

.vriz-state-card {

  min-height: 150px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding:
    25px
    18px;

  text-align: center;

}


.state-icon {

  width: 42px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 12px;

  color:
    var(--accent-primary);

  font-size: 1rem;
  font-weight: 800;

  border-radius:
    13px;

  background:

    linear-gradient(
      145deg,
      #232a38,
      #171b25
    );

  box-shadow:
    var(--shadow-neu);

}


.state-error {

  color:
    #f0a0b2;

  box-shadow:

    0 0 18px
      rgba(236,72,153,.08),

    var(--shadow-neu);

}


/* ==========================================================================
   24. DETAIL PAGE
   ========================================================================== */

.detail-page-label {

  display: flex;

  align-items: center;

  gap: 8px;

}


.detail-page-label::before {

  content: "";

  width: 5px;
  height: 18px;

  border-radius:
    var(--radius-full);

  background:

    linear-gradient(
      180deg,
      var(--accent-1),
      var(--accent-3)
    );

  box-shadow:
    0 0 10px
      rgba(139,92,246,.35);

}


/* ==========================================================================
   25. DETAIL APP HEADER
   ========================================================================== */

.detail-app-header {

  display: flex;

  align-items: center;

  gap: 17px;

  min-width: 0;

}


.detail-icon-wrap {

  position: relative;

  flex: 0 0 auto;

  width: 88px;
  height: 88px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 4px;

  border-radius:
    23px;

  background:

    linear-gradient(
      145deg,
      #252c3b,
      #151923
    );

  box-shadow:

    8px 9px 19px
      rgba(3,5,10,.52),

    -5px -5px 12px
      rgba(255,255,255,.018),

    0 0 23px
      rgba(139,92,246,.08);

}


.detail-icon-wrap
.vriz-card-icon {

  max-width: 80px;
  max-height: 80px;

  border-radius:
    19px;

}


.detail-app-info {

  flex: 1;

  min-width: 0;

}


.detail-badge-group {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

  margin-bottom: 7px;

}


.detail-category {

  color:
    var(--text-muted);

  font-size: .68rem;

  font-weight: 700;

}


.detail-app-title {

  margin: 0 0 12px;

  color:
    var(--text-main);

  font-size: 1.1rem;

  font-weight: 800;

  line-height: 1.25;

  letter-spacing:
    -.04em;

  overflow-wrap: anywhere;

}


/* ==========================================================================
   26. DETAIL SPEC
   ========================================================================== */

.detail-spec-grid {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 9px;

  padding: 9px;

  background:

    linear-gradient(
      145deg,
      #161a24,
      #1d222e
    );

  border:
    1px solid
    rgba(255,255,255,.035);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--shadow-inset);

}


.detail-spec-item {

  min-width: 0;

  padding:
    8px
    9px;

  color:
    var(--text-muted);

  font-size: .65rem;

  background:
    rgba(255,255,255,.012);

  border:
    1px solid
    rgba(255,255,255,.022);

  border-radius:
    10px;

}


.detail-spec-label {

  display: block;

  margin-bottom: 3px;

  color:
    var(--text-subtle);

  font-size: .59rem;

}


.detail-spec-item strong {

  display: block;

  overflow: hidden;

  color:
    var(--text-main);

  font-size: .73rem;

  font-weight: 800;

  white-space: nowrap;

  text-overflow: ellipsis;

}


/* ==========================================================================
   27. DETAIL DOWNLOAD ICON
   ========================================================================== */

.detail-download-icon,
.detail-info-icon {

  display: flex;

  align-items: center;
  justify-content: center;

  color:
    var(--accent-primary);

  background:

    linear-gradient(
      145deg,
      #232a38,
      #171b25
    );

  border:
    1px solid
    rgba(255,255,255,.035);

  box-shadow:
    var(--shadow-neu);

}


.detail-download-icon {

  width: 48px;
  height: 48px;

  border-radius:
    15px;

  filter:
    drop-shadow(
      0 0 8px
      rgba(139,92,246,.18)
    );

}


.detail-info-icon {

  width: 38px;
  height: 38px;

  flex-shrink: 0;

  border-radius:
    12px;

}


/* ==========================================================================
   28. DOWNLOAD LOADING
   ========================================================================== */

.download-loading {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

}


.download-loading strong {

  color: #fff;

  min-width: 23px;

}


/* ==========================================================================
   29. READY DOWNLOAD
   ========================================================================== */

.btn-download-ready {

  min-height: 49px;

  padding:
    13px
    18px;

  font-size: .78rem;

  background:

    linear-gradient(
      120deg,
      var(--accent-1),
      var(--accent-2),
      var(--accent-3)
    );

  background-size:
    220% 220%;

  border-color:
    rgba(255,255,255,.09);

  box-shadow:

    0 10px 25px
      rgba(99,102,241,.20),

    0 0 28px
      rgba(139,92,246,.12);

  animation:
    downloadLive 6s ease infinite;

}


@keyframes downloadLive {

  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }

}


/* ==========================================================================
   30. DRAWER
   ========================================================================== */

.vriz-drawer {

  width: min(290px, 86vw) !important;

  color:
    var(--text-main) !important;

  background:

    linear-gradient(
      145deg,
      #222837,
      #151923
    ) !important;

  border-right:
    1px solid
    rgba(255,255,255,.045) !important;

  box-shadow:
    18px 0 45px
      rgba(0,0,0,.45);

}


.vriz-drawer .offcanvas-header {

  border-bottom:
    1px solid
    rgba(255,255,255,.045);

}


.vriz-drawer .offcanvas-body {

  scrollbar-width: thin;

}


/* ==========================================================================
   31. DRAWER LINK
   ========================================================================== */

.drawer-link {

  position: relative;

  display: flex;

  align-items: center;

  gap: 12px;

  min-height: 45px;

  margin-bottom: 6px;

  padding:
    11px
    14px;

  color:
    var(--text-muted);

  font-size: .82rem;

  font-weight: 700;

  text-decoration: none;

  border:
    1px solid transparent;

  border-radius:
    var(--radius-md);

  transition:
    transform .25s var(--ease),
    color .25s ease,
    background .25s ease,
    box-shadow .25s ease;

}


.drawer-link:hover {

  color: #fff;

  transform:
    translateX(3px);

  background:

    linear-gradient(
      145deg,
      rgba(38,45,59,.96),
      rgba(20,24,34,.96)
    );

  box-shadow:

    5px 5px 12px
      rgba(5,7,13,.48),

    -3px -3px 8px
      rgba(255,255,255,.018);

}


.drawer-link.active {

  color: #fff;

  background:

    linear-gradient(
      135deg,
      rgba(139,92,246,.20),
      rgba(99,102,241,.09)
    );

  border-color:
    rgba(139,92,246,.15);

  box-shadow:

    inset 3px 3px 8px
      rgba(5,7,13,.32),

    0 0 18px
      rgba(139,92,246,.07);

}


.drawer-link.active svg {

  color:
    var(--accent-primary);

  filter:
    drop-shadow(
      0 0 7px
      rgba(139,92,246,.45)
    );

}


/* ==========================================================================
   32. BOOTSTRAP OVERRIDES
   ========================================================================== */

.border-dark-subtle {

  border-color:
    rgba(255,255,255,.045) !important;

}


.btn-close {

  opacity: .7;

  transition:
    opacity .2s ease,
    transform .2s ease;

}


.btn-close:hover {

  opacity: 1;

  transform:
    rotate(90deg);

}


/* ==========================================================================
   33. SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar {

  width: 7px;
  height: 7px;

}


::-webkit-scrollbar-track {

  background:
    var(--bg-deep);

}


::-webkit-scrollbar-thumb {

  border-radius:
    var(--radius-full);

  background:

    linear-gradient(
      180deg,
      var(--accent-1),
      var(--accent-3)
    );

}


::-webkit-scrollbar-thumb:hover {

  background:

    linear-gradient(
      180deg,
      var(--accent-3),
      var(--accent-2)
    );

}


/* ==========================================================================
   34. SELECTION
   ========================================================================== */

::selection {

  color: #fff;

  background:
    rgba(139,92,246,.28);

}


/* ==========================================================================
   35. MOBILE
   ========================================================================== */

@media (max-width: 575.98px) {

  .max-w-lg {
    max-width: 100%;
  }


  .vriz-navbar {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }


  .vriz-logo-header {
    height: 27px;
  }


  .vriz-brand {
    font-size: 1.08rem;
  }


  main.max-w-lg {
    padding-top: 18px !important;
  }


  .vriz-hero {

    padding:
      26px
      13px
      19px;

    border-radius:
      22px;

  }


  .hero-title {
    font-size: 1.3rem;
  }


  .hero-subtitle {
    font-size: .76rem;
  }


  .search-input {
    min-height: 46px;

    padding:
      12px
      14px
      12px
      43px;

    font-size: .8rem;
  }


  .cat-chip {

    min-height: 36px;

    padding:
      8px
      15px;

    font-size: .7rem;

  }


  #appGrid {

    --bs-gutter-x: .7rem;
    --bs-gutter-y: .7rem;

  }


  .vriz-app-card {
    border-radius: 18px;
  }


  .vriz-card-main {

    gap: 11px;

    padding:
      13px;

  }


  .vriz-card-icon-wrap {

    width: 55px;
    height: 55px;

    border-radius: 15px;

  }


  .vriz-card-icon {

    max-width: 55px;
    max-height: 55px;

    border-radius: 14px;

  }


  .vriz-card-title {
    font-size: .78rem;
  }


  .vriz-card-meta {
    font-size: .63rem;
  }


  .vriz-card-submeta {
    font-size: .58rem;
  }


  .vriz-card-footer {

    padding:
      0
      13px
      13px;

  }


  .btn-card-action {

    min-height: 36px;

    padding:
      7px
      10px;

    font-size: .65rem;

  }


  .section-title {
    font-size: .86rem;
  }


  .section-badge {
    font-size: .61rem;
  }


  /* DETAIL */

  .detail-app-header {

    align-items: flex-start;

    gap: 13px;

  }


  .detail-icon-wrap {

    width: 70px;
    height: 70px;

    padding: 3px;

    border-radius: 18px;

  }


  .detail-icon-wrap
  .vriz-card-icon {

    max-width: 64px;
    max-height: 64px;

    border-radius: 15px;

  }


  .detail-app-title {

    margin-bottom: 9px;

    font-size: .93rem;

  }


  .detail-badge-group {
    gap: 6px;
  }


  .detail-spec-grid {

    gap: 6px;

    padding: 7px;

  }


  .detail-spec-item {

    padding:
      7px;

    font-size: .59rem;

  }


  .detail-spec-item strong {
    font-size: .67rem;
  }


  .detail-download-icon {

    width: 44px;
    height: 44px;

  }


  .detail-info-icon {

    width: 34px;
    height: 34px;

  }

}


/* ==========================================================================
   36. TABLET / DESKTOP
   ========================================================================== */

@media (min-width: 576px) {

  .hero-title {
    font-size: 1.7rem;
  }


  .vriz-card-main {
    padding: 16px;
  }


  .vriz-card-footer {
    padding:
      0
      16px
      16px;
  }

}


@media (min-width: 768px) {

  .hero-title {
    font-size: 1.9rem;
  }


  .hero-subtitle {
    font-size: .88rem;
  }


  .vriz-app-card {
    border-radius: 22px;
  }


  .vriz-card-main {
    min-height: 101px;
  }

}


/* ==========================================================================
   37. ACCESSIBILITY
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible {

  outline:
    2px solid
    rgba(139,92,246,.65);

  outline-offset: 3px;

}


/* ==========================================================================
   38. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}

/* =========================================================
   VRIZMODS ADMIN PANEL
   ========================================================= */

body {
  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(139, 92, 246, 0.08),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(6, 182, 212, 0.07),
      transparent 30%
    ),
    var(--bg, #151821);
}


/* ADMIN CONTAINER */

body:has(#loginBox),
body:has(#adminContent) {
  min-height: 100vh;
}


/* CARD ADMIN */

.bento-card {
  position: relative;
  background:
    linear-gradient(
      145deg,
      rgba(32, 37, 50, 0.94),
      rgba(22, 25, 34, 0.97)
    );
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 24px;

  box-shadow:
    12px 12px 28px rgba(0, 0, 0, 0.35),
    -8px -8px 22px rgba(255, 255, 255, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  overflow: hidden;
}


/* LIGHT EFFECT */

.bento-card::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(139, 92, 246, 0.09),
      transparent 32%
    );

  pointer-events: none;
}


/* FORM */

#loginBox,
#adminContent {
  position: relative;
  z-index: 1;
}


/* INPUT */

.search-input-bento,
.form-control.search-input-bento,
.form-select.search-input-bento {
  min-height: 46px;

  color: #f8fafc !important;

  background:
    linear-gradient(
      145deg,
      rgba(14, 17, 24, 0.9),
      rgba(25, 29, 39, 0.9)
    ) !important;

  border: 1px solid rgba(255, 255, 255, 0.07) !important;

  border-radius: 14px !important;

  box-shadow:
    inset 4px 4px 10px rgba(0, 0, 0, 0.3),
    inset -3px -3px 8px rgba(255, 255, 255, 0.025) !important;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}


.search-input-bento:focus {
  border-color: rgba(139, 92, 246, 0.55) !important;

  box-shadow:
    0 0 0 3px rgba(139, 92, 246, 0.08),
    inset 4px 4px 10px rgba(0, 0, 0, 0.3) !important;

  outline: none !important;
}


.search-input-bento::placeholder {
  color: rgba(148, 163, 184, 0.55) !important;
}


/* SELECT OPTION */

.search-input-bento option {
  background: #191d27;
  color: #fff;
}


/* LABEL */

#adminContent .form-label,
#loginBox .form-label {
  letter-spacing: 0.02em;
}


/* PRIMARY BUTTON */

.btn-aurora {
  min-height: 46px;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;

  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #8b5cf6,
      #6366f1 55%,
      #06b6d4
    ) !important;

  box-shadow:
    0 10px 25px rgba(99, 102, 241, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}


.btn-aurora:hover {
  transform: translateY(-2px);

  filter: brightness(1.08);

  box-shadow:
    0 15px 32px rgba(99, 102, 241, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}


.btn-aurora:active {
  transform: translateY(0);
}


/* DIVIDER */

.admin-divider {
  height: 1px;
  margin: 28px 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.09),
      transparent
    );
}


/* REFRESH */

.btn-icon {
  width: 40px;
  height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border-radius: 12px !important;

  color: #cbd5e1 !important;

  background:
    linear-gradient(
      145deg,
      rgba(38, 43, 57, 0.95),
      rgba(22, 25, 34, 0.95)
    ) !important;

  border: 1px solid rgba(255, 255, 255, 0.06) !important;

  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.25),
    -3px -3px 8px rgba(255, 255, 255, 0.025);
}


.btn-icon:hover {
  color: #fff !important;
  transform: rotate(25deg);
}


/* =========================================================
   ADMIN APP LIST
   ========================================================= */

.admin-app-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* APP ITEM */

.admin-app-item {
  position: relative;

  display: flex;
  align-items: center;

  gap: 14px;

  padding: 12px;

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(32, 37, 50, 0.8),
      rgba(19, 22, 30, 0.9)
    );

  border: 1px solid rgba(255, 255, 255, 0.055);

  box-shadow:
    7px 7px 16px rgba(0, 0, 0, 0.22),
    -4px -4px 12px rgba(255, 255, 255, 0.018);

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}


.admin-app-item:hover {
  transform: translateY(-2px);

  border-color: rgba(139, 92, 246, 0.25);

  box-shadow:
    10px 12px 25px rgba(0, 0, 0, 0.3),
    0 0 22px rgba(139, 92, 246, 0.06);
}


/* ICON */

.admin-app-icon {
  width: 58px;
  height: 58px;

  flex: 0 0 58px;

  object-fit: cover;

  border-radius: 16px;

  background: #11141b;

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.35),
    -3px -3px 8px rgba(255, 255, 255, 0.025);
}


/* INFO */

.admin-app-info {
  min-width: 0;
  flex: 1;
}


.admin-app-title {
  color: #f8fafc;

  font-size: 0.95rem;
  font-weight: 800;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.admin-app-meta {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-top: 4px;

  color: #94a3b8;

  font-size: 0.72rem;
}


.admin-app-mod {
  display: inline-flex;

  max-width: 100%;

  margin-top: 7px;
  padding: 4px 8px;

  color: #c4b5fd;

  background: rgba(139, 92, 246, 0.1);

  border: 1px solid rgba(139, 92, 246, 0.16);

  border-radius: 8px;

  font-size: 0.67rem;
  font-weight: 700;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ACTIONS */

.admin-app-actions {
  display: flex;
  align-items: center;
  gap: 7px;

  flex-shrink: 0;
}


.admin-btn-edit,
.admin-btn-delete {
  min-height: 36px;

  padding: 7px 11px;

  border-radius: 10px;

  font-size: 0.72rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    background 0.18s ease;
}


.admin-btn-edit {
  color: #c4b5fd;

  background: rgba(139, 92, 246, 0.1);

  border: 1px solid rgba(139, 92, 246, 0.2);
}


.admin-btn-edit:hover {
  color: #fff;
  background: rgba(139, 92, 246, 0.2);
  transform: translateY(-1px);
}


.admin-btn-delete {
  color: #fda4af;

  background: rgba(244, 63, 94, 0.08);

  border: 1px solid rgba(244, 63, 94, 0.16);
}


.admin-btn-delete:hover {
  color: #fff;
  background: rgba(244, 63, 94, 0.2);
  transform: translateY(-1px);
}


/* EDIT MODE */

.admin-edit-mode {
  background:
    linear-gradient(
      135deg,
      #06b6d4,
      #6366f1,
      #8b5cf6
    ) !important;
}


/* LOADING */

.admin-loading {
  padding: 25px;

  text-align: center;

  color: #94a3b8;

  font-size: 0.85rem;
}


/* EMPTY */

.admin-empty {
  padding: 30px 20px;

  text-align: center;

  border-radius: 18px;

  background: rgba(15, 18, 25, 0.5);

  border: 1px dashed rgba(255, 255, 255, 0.08);
}


.admin-empty-icon {
  margin-bottom: 8px;

  font-size: 2rem;

  filter: grayscale(0.2);
}


/* ERROR */

.admin-error {
  padding: 20px;

  text-align: center;

  color: #fda4af;

  border-radius: 16px;

  background: rgba(244, 63, 94, 0.06);

  border: 1px solid rgba(244, 63, 94, 0.12);

  font-size: 0.82rem;
}


/* FOCUS */

.admin-btn-edit:focus-visible,
.admin-btn-delete:focus-visible,
.btn-icon:focus-visible,
.btn-aurora:focus-visible,
.search-input-bento:focus-visible {
  outline: 2px solid rgba(6, 182, 212, 0.65);
  outline-offset: 3px;
}


/* MOBILE */

@media (max-width: 576px) {

  .container.py-5 {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }

  .bento-card {
    border-radius: 20px;
  }

  .admin-app-item {
    gap: 10px;
    padding: 10px;
  }

  .admin-app-icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    border-radius: 14px;
  }

  .admin-app-meta {
    font-size: 0.66rem;
  }

  .admin-app-mod {
    max-width: 130px;
  }

  .admin-app-actions {
    flex-direction: column;
    gap: 5px;
  }

  .admin-btn-edit,
  .admin-btn-delete {
    width: 54px;
    min-height: 32px;
    padding: 5px 7px;
    font-size: 0.66rem;
  }
}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

  .admin-app-item,
  .admin-btn-edit,
  .admin-btn-delete,
  .btn-aurora,
  .btn-icon,
  .search-input-bento {
    transition: none !important;
  }

}