/**
 * ===================================================================
 * CODEBOOK.ANDREAN.AI.ID — DESIGN SYSTEM & STYLESHEET
 * Perfectly synchronized with https://andrean.ai.id/
 * Monochrome OKLCH palette, Outfit & Manrope typography, bg-grid & glow
 * ===================================================================
 */

:root {
  /* === Core Surfaces (Light Mode) === */
  --background: oklch(1 0 0deg);
  --foreground: oklch(0.145 0 0deg);
  --card: oklch(1 0 0deg);
  --card-foreground: oklch(0.145 0 0deg);
  --popover: oklch(1 0 0deg);
  --popover-foreground: oklch(0.145 0 0deg);

  /* === Primary — neutral (near-black) === */
  --primary: oklch(0.205 0 0deg);
  --primary-foreground: oklch(0.985 0 0deg);
  --primary-hover: oklch(0.27 0 0deg);
  --primary-active: oklch(0.32 0 0deg);
  --primary-muted: oklch(0.97 0 0deg);

  /* === Secondary === */
  --secondary: oklch(0.97 0 0deg);
  --secondary-foreground: oklch(0.205 0 0deg);
  --secondary-hover: oklch(0.94 0 0deg);

  /* === Accent === */
  --accent: oklch(0.97 0 0deg);
  --accent-foreground: oklch(0.205 0 0deg);
  --accent-hover: oklch(0.94 0 0deg);

  /* === Muted === */
  --muted: oklch(0.97 0 0deg);
  --muted-foreground: oklch(0.5 0 0deg);

  /* === Border & Ring === */
  --border: oklch(0.922 0 0deg);
  --border-hover: oklch(0.7 0 0deg);
  --ring: oklch(0.45 0 0deg);
  --ring-offset: oklch(1 0 0deg);

  /* === Functional Status (Kept Chromatic per andrean.ai.id) === */
  --destructive: oklch(0.577 0.245 27.325deg);
  --destructive-foreground: oklch(0.985 0 0deg);
  --success: oklch(0.62 0.16 150deg);
  --success-foreground: oklch(0.985 0 0deg);
  --warning: oklch(0.75 0.16 75deg);
  --warning-foreground: oklch(0.205 0 0deg);
  --info: oklch(0.68 0.16 230deg);
  --info-foreground: oklch(0.985 0 0deg);

  /* === Surface Invert === */
  --surface-invert: oklch(0.205 0 0deg);
  --surface-invert-foreground: oklch(0.985 0 0deg);
  --surface-invert-border: oklch(0.32 0 0deg);

  /* === Radius Scale === */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 8%), 0 2px 4px -2px rgb(0 0 0 / 5%);
  --shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 12%), 0 4px 8px -4px rgb(0 0 0 / 6%);

  /* === Typography Tokens === */
  --font-sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --transition-bezier: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Dark Mode (Default on andrean.ai.id) === */
html.dark,
[data-theme="dark"] {
  --background: oklch(0.145 0 0deg);
  --foreground: oklch(0.985 0 0deg);
  --card: oklch(0.205 0 0deg);
  --card-foreground: oklch(0.985 0 0deg);
  --popover: oklch(0.205 0 0deg);
  --popover-foreground: oklch(0.985 0 0deg);

  --primary: oklch(0.985 0 0deg);
  --primary-foreground: oklch(0.205 0 0deg);
  --primary-hover: oklch(0.9 0 0deg);
  --primary-active: oklch(0.82 0 0deg);
  --primary-muted: oklch(0.269 0 0deg);

  --secondary: oklch(0.269 0 0deg);
  --secondary-foreground: oklch(0.985 0 0deg);
  --secondary-hover: oklch(0.32 0 0deg);

  --accent: oklch(0.269 0 0deg);
  --accent-foreground: oklch(0.985 0 0deg);
  --accent-hover: oklch(0.32 0 0deg);

  --muted: oklch(0.269 0 0deg);
  --muted-foreground: oklch(0.74 0 0deg);

  --border: oklch(0.32 0 0deg);
  --border-hover: oklch(0.48 0 0deg);
  --ring: oklch(0.6 0 0deg);
  --ring-offset: oklch(0.145 0 0deg);

  --destructive: oklch(0.704 0.191 22.216deg);
  --destructive-foreground: oklch(0.985 0 0deg);
  --success: oklch(0.7 0.15 150deg);
  --success-foreground: oklch(0.145 0 0deg);
  --warning: oklch(0.8 0.15 80deg);
  --warning-foreground: oklch(0.145 0 0deg);
  --info: oklch(0.708 0 0deg);
  --info-foreground: oklch(0.145 0 0deg);

  --surface-invert: oklch(0.985 0 0deg);
  --surface-invert-foreground: oklch(0.205 0 0deg);
  --surface-invert-border: oklch(0.85 0 0deg);

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 40%);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 50%), 0 2px 4px -2px rgb(0 0 0 / 40%);
  --shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 60%), 0 4px 8px -4px rgb(0 0 0 / 45%);
}

/* === Reset & Base === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--foreground);
  background-color: var(--background);
  line-height: 1.5;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Selection */
::selection {
  background-color: color-mix(in srgb, var(--primary) 25%, transparent);
  color: var(--foreground);
}

/* Custom Scrollbar (AstroDeck style) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--muted-foreground) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--muted-foreground);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--foreground);
}

/* Focus Ring */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* === Background Grid & Glow (Exact andrean.ai.id patterns) === */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--foreground) 7%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--foreground) 7%, transparent) 1px,
      transparent 1px
    );
  background-size: 56px 56px;
  mask-image: radial-gradient(
    ellipse 75% 60% at 50% 0%,
    #000 40%,
    transparent 100%
  );
}

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 50% at 50% -10%,
    color-mix(in srgb, var(--foreground) 8%, transparent),
    transparent 70%
  );
}

@media (prefers-reduced-motion: no-preference) {
  .bg-glow {
    animation: bg-glow-pulse 8s ease-in-out infinite alternate;
  }
}

@keyframes bg-glow-pulse {
  from { opacity: 70%; }
  to { opacity: 100%; }
}

/* Top Route Progress Bar */
.top-line-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
  z-index: 10000;
  pointer-events: none;
}

/* App Container */
.app-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem 5rem 1.5rem;
  position: relative;
  z-index: 1;
}

/* ===================================================================
   HEADER & NAVBAR (Matching andrean.ai.id Header.astro)
   =================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 90%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.2s ease, background-color var(--transition-normal);
}

.header-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.logo-mark {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--radius-lg);
  background: var(--primary);
  color: var(--primary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.logo-group:hover .logo-mark {
  transform: scale(1.04);
}

.logo-text h1 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.domain-pill {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
}

.vip-badge {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
}


.header-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.15s ease;
}

.header-link:hover {
  color: var(--foreground);
  background: var(--secondary);
}

.header-link.back-main {
  color: var(--foreground);
  border: 1px solid var(--border);
  background: var(--card);
}

.header-link.back-main:hover {
  border-color: var(--border-hover);
  background: var(--secondary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 2.35rem;
  padding: 0 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s var(--transition-bezier);
}

.header-btn:hover {
  border-color: var(--foreground);
  background: var(--secondary);
  transform: translateY(-1px);
}

.header-btn.primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.header-btn.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.theme-toggle-btn {
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s var(--transition-bezier);
}

.theme-toggle-btn:hover {
  border-color: var(--foreground);
  background: var(--secondary);
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .header-nav { display: none; }
}

/* ===================================================================
   HERO / BANNER (AstroDeck / Minimalist Clean Tech Style)
   =================================================================== */
.hero-banner {
  margin: 1.5rem 0 2.5rem 0;
  text-align: center;
  position: relative;
}

.section-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.875rem 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--foreground);
  background: var(--muted);
  border: 1px solid var(--border);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background-color: var(--success);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px var(--success);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--foreground);
  margin-bottom: 0.875rem;
}

.hero-desc {
  max-width: 44rem;
  margin: 0 auto 2rem auto;
  color: var(--muted-foreground);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.6;
}

/* Hero Stat Grid */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow-sm);
  text-align: left;
  transition: all 0.2s var(--transition-bezier);
}

.stat-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-num {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--foreground);
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  font-weight: 500;
  margin-top: 0.2rem;
}

/* ===================================================================
   PROMPT BUILDER (Window Pattern with Mac-style Header)
   =================================================================== */
.builder-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--card);
  box-shadow: var(--shadow-md);
  margin-bottom: 2.75rem;
  overflow: hidden;
  position: relative;
  transition: border-color var(--transition-fast);
}

.builder-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 60%, var(--muted));
}

.window-dots {
  display: flex;
  gap: 0.45rem;
}

.window-dots span {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--muted-foreground) 40%, transparent);
}

.window-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.builder-formula-badge {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--foreground);
}

.builder-body {
  padding: 1.75rem;
}

.builder-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2rem;
}

@media (max-width: 900px) {
  .builder-grid {
    grid-template-columns: 1fr;
  }
}

.builder-inputs {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.input-group label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  display: flex;
  justify-content: space-between;
}

.input-hint {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-weight: 400;
}

.select-control, .text-control {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  outline: none;
  transition: all var(--transition-fast);
}

.select-control:focus, .text-control:focus {
  border-color: var(--foreground);
  background: var(--card);
}

.pills-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pill-option {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all 0.2s var(--transition-bezier);
  user-select: none;
}

.pill-option:hover {
  color: var(--foreground);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.pill-option.active {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* Builder Live Output Box */
.builder-output-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
}

.output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

.output-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.live-indicator {
  width: 7px;
  height: 7px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--success);
  animation: pulseLive 2s infinite;
}

@keyframes pulseLive {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.output-textarea {
  flex-grow: 1;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.6;
  background: transparent;
  color: var(--foreground);
  border: none;
  resize: none;
  outline: none;
  min-height: 120px;
  margin-bottom: 1.25rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.output-actions {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.btn-builder-action {
  flex: 1;
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s var(--transition-bezier);
  text-decoration: none;
}

.btn-builder-copy {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-sm);
}

.btn-builder-copy:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.btn-builder-chatgpt {
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.btn-builder-chatgpt:hover {
  border-color: var(--foreground);
  transform: translateY(-1px);
}

.btn-builder-random {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
}

.btn-builder-random:hover {
  color: var(--foreground);
  border-color: var(--border-hover);
}

/* ===================================================================
   CATALOG CONTROLS: SEARCH, TABS & CATEGORIES
   =================================================================== */
.catalog-controls {
  margin-bottom: 1.75rem;
}

.search-hero-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.4rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s var(--transition-bezier);
}

.search-hero-box:focus-within {
  border-color: var(--foreground);
  box-shadow: var(--shadow-md);
}

.search-icon {
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
}

.search-input {
  flex-grow: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 0.65rem 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--foreground);
}

.search-input::placeholder {
  color: var(--muted-foreground);
}

.search-kbd {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.45rem;
}

.btn-clear-search {
  background: transparent;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.25rem;
  border-radius: 50%;
}

.btn-clear-search:hover {
  color: var(--foreground);
}

/* Part Tabs Navigation (Matching andrean.ai.id .feature-tabs__tab) */
.part-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
  scrollbar-width: none;
}

.part-tabs::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s var(--transition-bezier);
  user-select: none;
}

.tab-btn:hover {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.tab-btn.active {
  color: var(--primary-foreground);
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.tab-count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--muted);
  color: var(--foreground);
}

.tab-btn.active .tab-count {
  background: color-mix(in srgb, var(--primary-foreground) 20%, transparent);
  color: var(--primary-foreground);
}

/* Filter Row */
.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
}

.category-select-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-grow: 1;
  max-width: 360px;
}

.category-select {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-md);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-size: 0.8125rem;
  outline: none;
  cursor: pointer;
}

.category-select:focus {
  border-color: var(--foreground);
}

.catalog-info {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.catalog-info strong {
  color: var(--foreground);
}

/* ===================================================================
   PROMPT CARDS GRID
   =================================================================== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 480px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
}

.prompt-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all 0.2s var(--transition-bezier);
  box-shadow: var(--shadow-sm);
  contain: content;
  content-visibility: auto;
  contain-intrinsic-size: 260px;
}

.prompt-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

@media (max-width: 640px) {
  .prompt-card {
    padding: 1rem;
    box-shadow: none;
  }
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.badge-category {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  background: var(--muted);
  color: var(--foreground);
  border: 1px solid var(--border);
}

.badge-part-indicator {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--muted-foreground);
}

.btn-star {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.btn-star:hover {
  color: var(--warning);
  transform: scale(1.15);
}

.btn-star.favorited {
  color: var(--warning);
}

.card-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.code-pill {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.02em;
}

.btn-copy-code-only {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-copy-code-only:hover {
  color: var(--foreground);
  border-color: var(--border-hover);
}

.card-description {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.5;
  margin-bottom: 1rem;
  flex-grow: 1;
}

/* Prompt Example Box in Card */
.prompt-example-container {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.85rem;
  margin-bottom: 1rem;
}

.prompt-example-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.example-tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted-foreground);
  letter-spacing: 0.05em;
}

.prompt-text {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--foreground);
  word-break: break-word;
  user-select: all;
}

/* Card Action Buttons */
.card-actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s var(--transition-bezier);
  text-decoration: none;
}

.btn-copy-prompt {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-sm);
}

.btn-copy-prompt:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.btn-copy-prompt.copied {
  background: var(--success) !important;
  color: var(--success-foreground) !important;
}

.btn-chatgpt {
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
}

.btn-chatgpt:hover {
  border-color: var(--foreground);
  transform: translateY(-1px);
}

.btn-use-builder {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
}

.btn-use-builder:hover {
  color: var(--foreground);
  border-color: var(--border-hover);
}

/* ===================================================================
   SMART PAGINATION (Tuned for Ultra-Fast Mobile Performance)
   =================================================================== */
.pagination-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.page-nav-btn, .page-num-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  padding: 0 0.65rem;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
  transition: all 0.15s var(--transition-bezier);
  user-select: none;
}

.page-nav-btn:hover:not(:disabled), .page-num-btn:hover:not(.active) {
  border-color: var(--foreground);
  background: var(--secondary);
  transform: translateY(-1px);
}

.page-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.page-numbers-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.page-num-btn.active {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.page-ellipsis {
  font-family: var(--font-mono);
  color: var(--muted-foreground);
  padding: 0 0.35rem;
  font-size: 0.875rem;
  user-select: none;
}

.pagination-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  flex-wrap: wrap;
  justify-content: center;
}

.pagination-info strong {
  color: var(--foreground);
}

.page-size-selector {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.page-size-select {
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-md);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-size: 0.8125rem;
  outline: none;
  cursor: pointer;
}

.page-size-select:focus {
  border-color: var(--foreground);
}

@media (max-width: 480px) {
  .page-btn-text {
    display: none;
  }
  .page-nav-btn, .page-num-btn {
    min-width: 2.15rem;
    height: 2.15rem;
    padding: 0 0.45rem;
    font-size: 0.8125rem;
  }
  .page-numbers-wrapper {
    gap: 0.2rem;
  }
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 4rem 1.5rem;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-2xl);
  margin-bottom: 2.5rem;
}

.empty-state-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.empty-state h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.empty-state p {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  max-width: 400px;
  margin: 0 auto 1.25rem auto;
}

/* ===================================================================
   MODAL / POPUP
   =================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--background) 80%, black 20%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.modal-window {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  padding: 2rem;
  position: relative;
  transform: translateY(16px) scale(0.98);
  transition: all var(--transition-normal);
}

.modal-backdrop.open .modal-window {
  transform: translateY(0) scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: transparent;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.modal-close-btn:hover {
  color: var(--foreground);
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.modal-body {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.guide-step-card {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem;
}

.guide-step-title {
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.guide-step-num {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.6875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.guide-formula-box {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--foreground);
}

/* ===================================================================
   FLOATING TOAST NOTIFICATION
   =================================================================== */
.toast-notification {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1.25rem;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  box-shadow: var(--shadow-lg);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.25s var(--transition-bezier);
  pointer-events: none;
}

.toast-notification.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.toast-icon {
  color: var(--success);
  display: flex;
}

.toast-message {
  font-size: 0.875rem;
  font-weight: 600;
}

/* ===================================================================
   SITE FOOTER (Matching andrean.ai.id Footer)
   =================================================================== */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
  margin-top: 4rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--foreground);
}

/* ===================================================================
   LOGIN GATE (Matching paraimer.com/digicover aesthetic)
   =================================================================== */
html.is-authenticated #loginGate {
  display: none !important;
}

html:not(.is-authenticated) #mainAppWrapper {
  display: none !important;
}

.login-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 10;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.login-icon-badge {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.25rem auto;
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid var(--border);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 0.35rem;
}

.login-subtitle {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 1.75rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input {
  width: 100%;
  padding: 0.85rem 3rem 0.85rem 1.15rem;
  border-radius: var(--radius-lg);
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  outline: none;
  transition: all 0.2s ease;
}

.login-input:focus {
  border-color: var(--foreground);
  background: var(--card);
  box-shadow: 0 0 0 2px var(--border);
}

.btn-toggle-eye {
  position: absolute;
  right: 0.85rem;
  background: transparent;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}

.btn-toggle-eye:hover {
  color: var(--foreground);
}

.btn-login-submit {
  width: 100%;
  padding: 0.85rem;
  border-radius: var(--radius-lg);
  background: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s var(--transition-bezier);
}

.btn-login-submit:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.login-error-msg {
  color: var(--destructive);
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--destructive) 25%, transparent);
  border-radius: var(--radius-md);
  padding: 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  animation: shake 0.35s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.btn-logout {
  color: var(--destructive) !important;
  border-color: color-mix(in srgb, var(--destructive) 30%, var(--border)) !important;
}

.btn-logout:hover {
  background: color-mix(in srgb, var(--destructive) 12%, transparent) !important;
  border-color: var(--destructive) !important;
}