/*
 * CapyUniverse Shared Styles - UI 3.0
 *
 * This stylesheet centralizes the look and feel used across the
 * CapyUniverse tools. It is based on the custom theme originally
 * defined for CapyIMG and exposes a set of CSS variables and
 * reusable utility classes. By including this file in your
 * HTML documents, you inherit a cohesive dark aesthetic with
 * subtle gradients, glassy panels and colourful accents. The
 * variables are prefixed with `--cu` and can be reused within
 * inline styles if needed.
 */

:root {
  /* UI 3.0: Aurora & Neon Fusion */
  --cu-bg-0: #0D0C14; /* Near-black with a hint of deep purple */
  --cu-bg-1: #191823; /* Slightly lighter background for depth */
  --cu-grid: #3a385833; /* More subtle grid lines */
  --cu-card: #1E1C2E99; /* Translucent card background */
  
  /* Vibrant, Neon-like Accents */
  --cu-cyan: #00f6ff;
  --cu-magenta: #ff00f5;
  --cu-purple: #9d00ff;
  --cu-amber: #ffb800;

  /* Text colors for clarity */
  --cu-text: #f0f0f5; /* Slightly off-white for comfort */
  --cu-text-dim: #a0a0b5; /* Softer dim text */

  /* UI Geometry & Effects */
  --cu-radius: 14px;
  --cu-radius-lg: 20px;
  --cu-blur: 16px; /* Increased blur for a dreamier effect */
  --cu-shadow: 0 8px 40px #00000099, inset 0 0 0 1.5px #ffffff0a; /* Deeper shadow, subtle inner border */

  /* New Gradient Definitions */
  --glow-purple: #7e22ce;
  --glow-blue: #0077ff;
  --glow-pink: #ff00a0;
  --premium-gradient: linear-gradient(135deg, var(--cu-purple), var(--cu-magenta), var(--cu-cyan));
}


html{
  background:var(--cu-bg-0);
  overflow-x:hidden;
  max-width:100vw;
}

*,*::before,*::after{
  box-sizing:border-box;
}

body{
  font-family:Inter,system-ui,sans-serif;
  color:var(--cu-text);
  background:
    radial-gradient(800px 600px at 80% -15%, #9d00ff22, transparent 70%),
    radial-gradient(600px 500px at 10% 20%, #00f6ff1a, transparent 70%),
    var(--cu-bg-0);
  position:relative;
}

/* Offset page content to avoid overlap with fixed headers on
 * CapyUniverse-themed pages. Matches the 64px header height and
 * reapplies the CapyIMG background palette even when legacy pages
 * define their own colours. */
html[data-theme="capyuniverse"] body{
  font-family:Inter,system-ui,sans-serif !important;
  color:var(--cu-text) !important;
  background:
    radial-gradient(800px 600px at 80% -15%, #9d00ff22, transparent 70%),
    radial-gradient(600px 500px at 10% 20%, #00f6ff1a, transparent 70%),
    var(--cu-bg-0) !important;
  position:relative;
  min-height:100vh;
  padding-top:64px;
}

body::before{
  content:none !important;
}

/* Decorative starfield used on some pages. To activate it, place
 * `<div class="cu-stars"></div>` somewhere near the top of your body. */
.cu-stars{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.12) 0 1px, transparent 2px) 0 0/180px 180px,
    radial-gradient(circle at 75% 35%, rgba(255,255,255,.10) 0 1px, transparent 2px) 0 0/220px 220px,
    radial-gradient(circle at 40% 70%, rgba(255,255,255,.08) 0 1px, transparent 2px) 0 0/260px 260px;
}

/* Stage grid that fades into the background. */
.cu-stage{
  position:fixed;
  inset:auto 0 0 0;
  height:38vh;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(to top, rgba(13, 12, 20, .85), transparent 70%),
    repeating-linear-gradient(to right, transparent 0 38px, var(--cu-grid) 38px 39px),
    repeating-linear-gradient(to top,   transparent 0 38px, var(--cu-grid) 38px 39px);
  /* fade the stage into nothing */
  mask: linear-gradient(to top, black, transparent 80%);
}

/* Header component styling. See CapyIMG for an example. */
.cu-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:40;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding:0 .75rem;
  backdrop-filter: blur(12px);
  background: #0D0C1488;
  border-bottom:1px solid rgba(255,255,255,.08);
  min-width:0;
}

@media (max-width: 768px) {
  .cu-header {
    padding:0 .5rem;
    gap:.25rem;
  }
  
  .cu-brand {
    min-width:0;
    flex-shrink:1;
  }
  
  .cu-appname {
    font-size:1rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:150px;
  }
  
  .cu-logo {
    width:1.5rem;
    height:1.5rem;
    font-size:.7rem;
    flex-shrink:0;
  }
}

/* Ensure legacy headers adopt the unified style automatically when
 * the CapyUniverse theme is active. This keeps existing HTML intact
 * across tools while producing a consistent header look-and-feel. */
html[data-theme="capyuniverse"] body > header:not(.cu-header){
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:40;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:0 .9rem;
  backdrop-filter: blur(12px);
  background: #0D0C1488;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* Backwards-compatibility for pages using "global-header" or a plain
 * "header" class. Scoped by data-theme to avoid touching the homepage. */
html[data-theme="capyuniverse"] header.global-header,
html[data-theme="capyuniverse"] header.header{
  background: #0D0C1488;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.cu-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:0;
  flex:1;
}

.cu-appname{
  font-family:Inter,system-ui,sans-serif;
  font-weight:600;
  letter-spacing:.2px;
}

.cu-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .6rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(120deg, #00f6ff22, #9d00ff22);
}

/* Panels are translucent cards used for grouping content. */
.cu-panel{
  background:var(--cu-card);
  backdrop-filter: blur(var(--cu-blur));
  border-radius:var(--cu-radius-lg);
  box-shadow:var(--cu-shadow);
  border:1px solid rgba(255,255,255,.08);
}

/* Legacy pages rely on a `.glass` utility. Mirror the new visual. */
html[data-theme="capyuniverse"] .glass{
  background:var(--cu-card) !important;
  border-radius:var(--cu-radius-lg) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:var(--cu-shadow) !important;
  backdrop-filter: blur(var(--cu-blur)) !important;
}

/* Buttons with subtle glassmorphism. */
.cu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.6rem .9rem;
  border-radius:12px;
  font-weight:600;
  border:1px solid rgba(255,255,255,.12);
  background: #ffffff1a;
  box-shadow: 0 2px 8px #00000055;
  backdrop-filter: blur(4px);
  transition: all .2s;
  text-decoration: none;
  color: var(--cu-text);
}
.cu-btn:hover{
  transform: translateY(-2px);
  background: #ffffff22;
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 6px 20px #00000077;
  filter: drop-shadow(0 0 12px var(--cu-cyan)22) drop-shadow(0 0 24px var(--cu-magenta)22);
}
.cu-btn.primary{
  background: var(--premium-gradient);
  color:white;
  border-color:transparent;
  box-shadow: 0 6px 25px #9d00ff66, 0 2px 10px #00f6ff55;
}
.cu-btn.primary:hover {
  filter: brightness(1.15);
  box-shadow: 0 8px 30px #9d00ff88, 0 4px 15px #00f6ff77;
}


.cu-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.9rem;
  height:1.9rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.4px;
  color:white;
  background:transparent;
}

.cu-header-actions .cu-btn{
  box-shadow:var(--cu-shadow);
}

/* Form elements share a consistent look. */
.cu-input,
.cu-select,
.cu-textarea{
  width:100%;
  background: #191823;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:.75rem .9rem;
  color:var(--cu-text);
  outline:none;
  transition: all .2s;
}
.cu-input:focus,
.cu-select:focus,
.cu-textarea:focus{
  border-color: var(--cu-cyan);
  box-shadow: 0 0 0 3px #00f6ff22, 0 0 15px #00f6ff33;
}

/* Map legacy field classes to the unified look. */
html[data-theme="capyuniverse"] .input-field,
html[data-theme="capyuniverse"] .input-select,
html[data-theme="capyuniverse"] .input-textarea,
html[data-theme="capyuniverse"] textarea.input-field,
html[data-theme="capyuniverse"] select.input-field{
  background: #191823 !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:10px !important;
  padding:.75rem .9rem !important;
  color:var(--cu-text) !important;
  outline:none !important;
}

html[data-theme="capyuniverse"] .input-field:focus,
html[data-theme="capyuniverse"] .input-select:focus,
html[data-theme="capyuniverse"] .input-textarea:focus{
  border-color: var(--cu-cyan) !important;
  box-shadow: 0 0 0 3px #00f6ff22, 0 0 15px #00f6ff33 !important;
}

/* Sidebar styling to achieve a frosted glass effect. */
.sidebar-glass{
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  backdrop-filter: blur(15px);
  border-right:1px solid rgba(255,255,255,.06);
}

.sidebar-link{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.45rem .6rem;
  border-radius:12px;
  color:var(--cu-text-dim) !important;
  transition:color .2s ease, background .2s ease, transform .2s ease;
  border:1px solid transparent;
}

.sidebar-link:hover{
  background:rgba(255,255,255,.08) !important;
  color:var(--cu-text) !important;
  transform:translateX(2px);
}

.sidebar-link.active{
  background:linear-gradient(130deg, #00f6ff22, #ff00f522);
  border-color:rgba(255,255,255,.18);
  color:white !important;
  box-shadow:0 10px 20px rgba(15,23,42,.35);
}

.category-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}

.category-content.expanded{
  max-height:1600px;
}

/* Simple card component often used for galleries. */
.card{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:#0f1024;
}
.card img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#0b0b14;
}
.card .toolbar{
  position:absolute;
  bottom:.5rem;
  left:.5rem;
  right:.5rem;
  display:flex;
  justify-content:space-between;
  gap:.5rem;
}
.badge{
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  font-size:.75rem;
}

/* Thin custom scrollbars for webkit browsers. */
.scrollbar-thin::-webkit-scrollbar{
  width:8px;
  height:8px;
}
.scrollbar-thin::-webkit-scrollbar-thumb{
  background:var(--premium-gradient);
  border-radius:999px;
}
.scrollbar-thin::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
}

/* Override for .font-syne to avoid loading the Syne typeface. */
.font-syne{
  font-family:Inter,system-ui,sans-serif !important;
}

#apiKeysModal .cu-btn.primary{
  box-shadow:none;
}

/* Modal visibility utilities, restored from index.html styles */
.modal-hidden{
  opacity:0;
  pointer-events:none;
}
.modal-visible{
  opacity:1;
  pointer-events:auto;
}
.modal-overlay-bg{
  transition:opacity .25s;
}
.modal-content{
  transition:transform .25s,opacity .25s;
}
.modal-hidden .modal-overlay-bg{
  opacity:0;
}
.modal-hidden .modal-content{
  opacity:0;
  transform:translateY(-8px) scale(.98);
}
.modal-visible .modal-overlay-bg{
  opacity:.75;
}
.modal-visible .modal-content{
  opacity:1;
  transform:none;
}