/**
 * Schriften Generator — WordPress Plugin Stylesheet
 * assets/css/schriften-generator.css
 *
 * Scoped to .sg-wrap to avoid conflicts with theme CSS.
 * Google Fonts loaded async via PHP (class-schriften-generator-assets.php).
 */

/* ==========================================================================
   TOKENS  (scoped to wrapper)
   ========================================================================== */
.sg-wrap {
  /* Premium Slate Blue & Royal Indigo Theme (Light Theme - Default) */
  --sg-bg:           #f1f5f9; /* Slate 100 */
  --sg-surface:      #e2e8f0; /* Slate 200 */
  --sg-card:         #ffffff; /* Pure White */
  --sg-glass:        rgba(15, 23, 42, 0.04);
  --sg-glass-h:      rgba(15, 23, 42, 0.07);
  --sg-border:       #cbd5e1; /* Slate 300 */
  --sg-border-a:     #2563eb; /* Blue 600 */

  --sg-accent1:      #2563eb; /* Royal Blue */
  --sg-accent2:      #1d4ed8; /* Darker Blue */
  --sg-accent3:      #4f46e5; /* Indigo 600 */
  --sg-accent4:      #0ea5e9; /* Sky 500 */
  --sg-glow:         rgba(37, 99, 235, 0.05);

  --sg-text:         #0f172a; /* Slate 900 */
  --sg-text2:        #334155; /* Slate 800 */
  --sg-text3:        #475569; /* Slate 600 */
  
  --sg-grad-hero:    linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
  --sg-grad-btn:     linear-gradient(135deg, #1d4ed8, #2563eb);
  --sg-grad-card:    linear-gradient(135deg, rgba(37,99,235,0.03) 0%, rgba(79,70,229,0.01) 100%);
  --sg-grad-text:    linear-gradient(90deg, #1d4ed8, #3b82f6);

  --sg-r-sm:   0.5rem;
  --sg-r-md:   0.875rem;
  --sg-r-lg:   1.25rem;
  --sg-r-xl:   1.75rem;
  --sg-r-full: 9999px;

  --sg-ease:   cubic-bezier(0.4,0,0.2,1);
  --sg-bounce: cubic-bezier(0.34,1.56,0.64,1);

  /* Layout */
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--sg-text);
  background: var(--sg-bg);
  border-radius: 0px !important;
  overflow: clip;
  position: relative;
  padding-bottom: 3rem;
  box-shadow: 0 10px 40px rgba(15,23,42,0.06);
  width: 100%;
  box-sizing: border-box;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid var(--sg-border);
}

/* Premium Deep Slate & Royal Indigo Theme (Dark Theme Override) */
.sg-wrap.sg-theme-dark {
  --sg-bg:           #0f172a; /* Slate 900 */
  --sg-surface:      #1e293b; /* Slate 800 */
  --sg-card:         #1e293b; /* Slate 800 */
  --sg-glass:        rgba(255, 255, 255, 0.03);
  --sg-glass-h:      rgba(255, 255, 255, 0.06);
  --sg-border:       #334155; /* Slate 700 */
  --sg-border-a:     #60a5fa; /* Blue 300 */

  --sg-accent1:      #3b82f6; /* Blue 500 */
  --sg-accent2:      #60a5fa; /* Blue 400 */
  --sg-accent3:      #818cf8; /* Indigo 400 */
  --sg-accent4:      #38bdf8; /* Sky 400 */
  --sg-glow:         rgba(59, 130, 246, 0.2);

  --sg-text:         #f8fafc; /* Slate 50 */
  --sg-text2:        #cbd5e1; /* Slate 300 */
  --sg-text3:        #94a3b8; /* Slate 400 */

  --sg-grad-hero:    linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #93c5fd 100%);
  --sg-grad-btn:     linear-gradient(135deg, #2563eb, #3b82f6);
  --sg-grad-card:    linear-gradient(135deg, rgba(59,130,246,0.12) 0%, rgba(129,140,248,0.06) 100%);
  --sg-grad-text:    linear-gradient(90deg, #60a5fa, #93c5fd);
  
  box-shadow: 0 10px 50px rgba(0,0,0,0.5);
}

/* Reset box-sizing inside wrapper */
.sg-wrap *, .sg-wrap *::before, .sg-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sg-wrap button { cursor: pointer; border: none; background: none; font-family: inherit; }
.sg-wrap a { text-decoration: none; color: inherit; }
.sg-wrap input { font-family: inherit; border: none; outline: none; }

/* ==========================================================================
   ANIMATED ORBS
   ========================================================================== */
.sg-bg-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.sg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .18;
  animation: sg-orb-float 20s ease-in-out infinite;
}
.sg-orb-1 { width:500px; height:500px; background: radial-gradient(circle,#2563eb,transparent 70%); top:-150px; left:-80px; animation-delay:0s; }
.sg-orb-2 { width:400px; height:400px; background: radial-gradient(circle,#4f46e5,transparent 70%); bottom:-80px; right:-40px; animation-delay:-7s; }
.sg-orb-3 { width:320px; height:320px; background: radial-gradient(circle,#0ea5e9,transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); animation-delay:-14s; }

@keyframes sg-orb-float {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(30px,-25px) scale(1.05); }
  66%      { transform: translate(-15px,18px) scale(0.95); }
}

.sg-wrap .sg-orb { opacity: .05; }
.sg-wrap.sg-theme-dark .sg-orb { opacity: .1; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.sg-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.75rem;
  border-bottom: 1px solid var(--sg-border);
  background: rgba(248,250,252,.75);
  backdrop-filter: blur(16px);
}
.sg-wrap.sg-theme-dark .sg-header { background: rgba(15,23,42,.75); }

.sg-logo { display:flex; align-items:center; gap:.5rem; font-family:'Space Grotesk','Inter',sans-serif; font-weight:700; font-size:1.2rem; letter-spacing:-.02em; }
.sg-logo-icon { font-size:1.4rem; background:var(--sg-grad-hero); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sg-logo-text { color:var(--sg-text); }
.sg-logo-accent { background:var(--sg-grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sg-logo-badge { font-size:9px; font-weight:700; letter-spacing:.1em; padding:2px 7px; background:var(--sg-grad-btn); color:#fff; border-radius:var(--sg-r-full); align-self:flex-start; margin-top:2px; }

.sg-header-right { display:flex; align-items:center; gap:.5rem; }
.sg-nav-link { display:flex; align-items:center; gap:.35rem; padding:.4rem .85rem; font-size:.85rem; font-weight:500; color:var(--sg-text2); border-radius:var(--sg-r-full); transition:all .2s var(--sg-ease); }
.sg-nav-link:hover { color:var(--sg-text); background:var(--sg-glass); }

.sg-fav-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 5px;
  font-size:11px; font-weight:700;
  background:var(--sg-grad-btn); color:#fff;
  border-radius:var(--sg-r-full);
  transition: transform .3s var(--sg-bounce);
}
.sg-fav-count--bump { transform: scale(1.35); }

.sg-theme-toggle {
  width:38px; height:38px; border-radius:var(--sg-r-full);
  background:var(--sg-glass); border:1px solid var(--sg-border);
  color:var(--sg-text2); display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  transition: all .2s var(--sg-ease);
}
.sg-theme-toggle:hover { background:var(--sg-glass-h); transform:scale(1.1) rotate(12deg); box-shadow:0 0 20px var(--sg-glow); }

/* ==========================================================================
   HERO
   ========================================================================== */
.sg-hero {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: .85rem 1.75rem .75rem;
  text-align: center;
  max-width: 100%;
  margin: 0 auto;
  background: var(--sg-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--sg-border);
}

.sg-hero-title {
  font-family: 'Space Grotesk','Inter',sans-serif;
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--sg-text);
  margin-bottom: .65rem;
}

.sg-gradient-text {
  background: var(--sg-grad-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: sg-grad-shift 4s linear infinite;
}
@keyframes sg-grad-shift { 0%{background-position:0% center} 100%{background-position:200% center} }

.sg-hero-sub { font-size: clamp(.9rem,2vw,1.1rem); color: var(--sg-text2); margin-bottom: 1.25rem; }

/* Preview strip */
.sg-preview-strip { display:flex; justify-content:center; gap:.65rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.sg-preview-strip span {
  font-size:1rem; color:var(--sg-text2);
  padding:.25rem .9rem;
  background:var(--sg-glass); border:1px solid var(--sg-border);
  border-radius:var(--sg-r-full); backdrop-filter:blur(10px);
  transition: all .2s var(--sg-ease); white-space:nowrap;
}
.sg-preview-strip span:hover { color:var(--sg-text); border-color:var(--sg-accent1); box-shadow:0 0 18px var(--sg-glow); transform:translateY(-2px); }

/* ==========================================================================
   INPUT BOX
   ========================================================================== */
.sg-input-box {
  background: var(--sg-card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--sg-border);
  border-radius: 1.25rem;
  padding: .75rem 1.25rem;
  box-shadow: 0 4px 24px rgba(15,23,42,.03), 0 0 28px var(--sg-glow);
  transition: box-shadow .2s var(--sg-ease), border-color .2s var(--sg-ease);
}
.sg-wrap.sg-theme-dark .sg-input-box {
  box-shadow: 0 4px 30px rgba(0,0,0,.35), 0 0 28px var(--sg-glow);
}
.sg-input-box:focus-within { box-shadow: 0 6px 32px rgba(37,99,235,.1), 0 0 50px var(--sg-glow); border-color: var(--sg-accent2); }
.sg-wrap.sg-theme-dark .sg-input-box:focus-within { box-shadow: 0 6px 32px rgba(0,0,0,.4), 0 0 50px var(--sg-glow); }

.sg-input-row {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: .6rem;
  margin-bottom: .6rem;
  width: 100% !important;
  box-sizing: border-box !important;
}
.sg-input-icon { font-size:1.3rem; background:var(--sg-grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; flex-shrink:0; }

.sg-wrap input.sg-input,
.sg-wrap input.sg-input:focus,
.sg-wrap input.sg-input:active,
.sg-wrap input.sg-input:hover,
.sg-wrap input.sg-input:placeholder-shown {
  flex: 1 !important;
  background: transparent !important;
  color: var(--sg-text) !important;
  font-size: clamp(1rem, 3vw, 1.4rem);
  font-weight: 500;
  letter-spacing: .01em;
  padding: .35rem 0 !important;
  caret-color: var(--sg-accent2);
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.sg-wrap input.sg-input::placeholder { color:var(--sg-text3); font-weight:400; }

.sg-input-controls { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.sg-char-count { font-size:.75rem; color:var(--sg-text3); font-weight:500; white-space:nowrap; }

.sg-clear-btn {
  width:30px; height:30px; border-radius:var(--sg-r-full);
  background:var(--sg-glass); border:1px solid var(--sg-border);
  color:var(--sg-text3); font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
  transition: all .18s var(--sg-ease);
  opacity:0; pointer-events:none;
}
.sg-clear-btn--visible { opacity:1; pointer-events:all; }
.sg-clear-btn:hover { background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.4); color:#ef4444; transform:scale(1.1); }

/* Size slider */
.sg-size-row { display:flex; align-items:center; gap:.85rem; padding-top:.6rem; border-top:1px solid var(--sg-border); }
.sg-size-label { display:flex; align-items:center; gap:.3rem; font-size:.72rem; color:var(--sg-text3); font-weight:700; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; flex-shrink:0; }

.sg-wrap input.sg-size-slider {
  flex: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 24px !important;
  cursor: pointer;
}

/* Webkit (Chrome, Safari, Edge) Track */
.sg-wrap input.sg-size-slider::-webkit-slider-runnable-track {
  height: 4px !important;
  background: var(--sg-border) !important;
  border-radius: var(--sg-r-full) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Firefox Track */
.sg-wrap input.sg-size-slider::-moz-range-track {
  height: 4px !important;
  background: var(--sg-border) !important;
  border-radius: var(--sg-r-full) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Webkit Thumb */
.sg-wrap input.sg-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: var(--sg-r-full) !important;
  background: var(--sg-grad-btn) !important;
  cursor: pointer !important;
  box-shadow: 0 0 10px var(--sg-glow) !important;
  margin-top: -7px !important; /* Vertically center */
  border: none !important;
  transition: transform .2s var(--sg-bounce);
}
.sg-wrap input.sg-size-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}

/* Firefox Thumb */
.sg-wrap input.sg-size-slider::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: var(--sg-r-full) !important;
  background: var(--sg-grad-btn) !important;
  cursor: pointer !important;
  box-shadow: 0 0 10px var(--sg-glow) !important;
  border: none !important;
  transition: transform .2s var(--sg-bounce);
}
.sg-wrap input.sg-size-slider::-moz-range-thumb:hover {
  transform: scale(1.25);
}

.sg-size-val { font-size:.72rem; color:var(--sg-accent1); font-weight:700; min-width:34px; text-align:right; }
.sg-wrap.sg-theme-dark .sg-size-val { color:var(--sg-accent2); }

/* ==========================================================================
   FILTER BAR
   ========================================================================== */
.sg-filters {
  position: relative; z-index: 1;
  padding: 1.25rem 1.75rem 0;
  display: flex; flex-direction: column; gap: .85rem;
}

.sg-search-wrap { position:relative; max-width:340px; }
.sg-search-icon { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--sg-text3); font-size:1.1rem; pointer-events:none; }
.sg-wrap input.sg-style-search {
  width:100%; padding:.5rem .9rem .5rem 2.4rem;
  background:var(--sg-glass) !important; border:1px solid var(--sg-border) !important;
  border-radius:var(--sg-r-full); color:var(--sg-text) !important; font-size:.88rem;
  transition: all .2s var(--sg-ease);
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
}
.sg-wrap input.sg-style-search:focus { border-color:var(--sg-accent2) !important; background:var(--sg-glass-h) !important; box-shadow:0 0 0 3px rgba(37,99,235,.12) !important; }
.sg-wrap input.sg-style-search::placeholder { color:var(--sg-text3); }

/* Pills */
.sg-pills { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.25rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.sg-pills::-webkit-scrollbar { display:none; }
.sg-pill {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.35rem 1rem; border-radius:var(--sg-r-full);
  font-size:.84rem; font-weight:500; color:var(--sg-text2);
  background:var(--sg-glass); border:1px solid var(--sg-border);
  white-space:nowrap; flex-shrink:0;
  transition: all .2s var(--sg-ease);
}
.sg-pill:hover { color:var(--sg-text); background:var(--sg-glass-h); border-color:rgba(37,99,235,.35); transform:translateY(-1px); }
.sg-pill.active { background:var(--sg-grad-btn); color:#fff; border-color:transparent; box-shadow:0 4px 16px var(--sg-glow); transform:translateY(-1px); }

/* Sort row */
.sg-sort-row { display:flex; align-items:center; justify-content:space-between; gap:.85rem; }
.sg-result-count { font-size:.84rem; color:var(--sg-text3); font-weight:500; }
.sg-random-btn {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .9rem; font-size:.84rem; font-weight:600;
  color:var(--sg-accent1); background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.25); border-radius:var(--sg-r-full);
  transition: all .2s var(--sg-ease);
}
.sg-random-btn:hover { background:rgba(37,99,235,.15); transform:translateY(-1px); box-shadow:0 4px 16px rgba(37,99,235,.18); }
.sg-wrap.sg-theme-dark .sg-random-btn { color:var(--sg-accent2); background:rgba(37,99,235,.12); border-color:rgba(37,99,235,.3); }

/* ==========================================================================
   FAVORITES SECTION
   ========================================================================== */
.sg-favorites { position:relative; z-index:1; padding:1.5rem 1.75rem 0; display:none; }
.sg-favorites.sg-favorites--visible { display:block; }

.sg-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.85rem; }
.sg-section-title { font-family:'Space Grotesk','Inter',sans-serif; font-size:1.15rem; font-weight:700; color:var(--sg-text); }
.sg-clear-favs { font-size:.82rem; color:var(--sg-text3); padding:.25rem .5rem; border-radius:var(--sg-r-sm); transition:color .15s; }
.sg-clear-favs:hover { color:#ef4444; }

/* ==========================================================================
   MAIN GRID
   ========================================================================== */
.sg-main { position:relative; z-index:1; padding:1.25rem 1.75rem 0; }

.sg-grid {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: .45rem;
}

/* card */
.sg-card {
  position: relative;
  background: var(--sg-card);
  backdrop-filter: blur(14px);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-lg);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.02), 0 1px 2px rgba(15, 23, 42, 0.03);
  padding: .95rem 1.25rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  overflow: hidden;
  transition: transform .18s var(--sg-ease), box-shadow .18s var(--sg-ease), border-color .18s var(--sg-ease);
  animation: sg-card-in .3s var(--sg-ease) both;
}

@keyframes sg-card-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.sg-card::before {
  content:''; position:absolute; inset:0; background:var(--sg-grad-card);
  opacity:0; border-radius:inherit; transition:opacity .18s var(--sg-ease);
}
.sg-card:hover { border-color:var(--sg-border-a); box-shadow:0 8px 30px rgba(15,23,42,0.04),0 0 18px var(--sg-glow); }
.sg-wrap.sg-theme-dark .sg-card:hover { border-color:var(--sg-border-a); box-shadow:0 8px 30px rgba(0,0,0,0.4),0 0 18px var(--sg-glow); }
.sg-card:hover::before { opacity:1; }
.sg-card:active { opacity:.85; }
.sg-card--highlight { border-color:var(--sg-accent2); box-shadow:0 0 0 2px var(--sg-accent2),0 0 24px var(--sg-glow); animation:sg-card-pulse .5s var(--sg-bounce); }
@keyframes sg-card-pulse { 0%{transform:scale(1)} 40%{transform:scale(1.02)} 100%{transform:scale(1)} }

/* Card header */
.sg-card-header { width: 100%; position: relative; z-index: 1; }
.sg-card-name { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--sg-text3); display:block; }

.sg-cat-script    { color:#4f46e5; border-color:rgba(79,70,229,.25); background:rgba(79,70,229,.06); }
.sg-cat-gothic    { color:#0f172a; border-color:rgba(15,23,42,.2); background:rgba(15,23,42,.05); }
.sg-wrap.sg-theme-dark .sg-cat-gothic { color:#cbd5e1; border-color:rgba(203,213,225,.2); background:rgba(203,213,225,.05); }
.sg-cat-aesthetic { color:#db2777; border-color:rgba(219,39,119,.25); background:rgba(219,39,119,.06); }
.sg-cat-glitch    { color:#059669; border-color:rgba(5,150,105,.25);  background:rgba(5,150,105,.06);  }
.sg-cat-gaming    { color:#2563eb; border-color:rgba(37,99,235,.25);  background:rgba(37,99,235,.06);  }
.sg-cat-special   { color:#d97706; border-color:rgba(217,119,6,.25);  background:rgba(217,119,6,.06);  }
.sg-cat-decorative{ color:#e11d48; border-color:rgba(225,29,72,.25); background:rgba(225,29,72,.06); }

.sg-cat-small        { color:#0ea5e9; border-color:rgba(14,165,233,.25); background:rgba(14,165,233,.05); }
.sg-cat-graffiti     { color:#db2777; border-color:rgba(219,39,119,.25); background:rgba(219,39,119,.05); }
.sg-cat-squiggle     { color:#059669; border-color:rgba(5,150,105,.25);  background:rgba(5,150,105,.05);  }
.sg-cat-box          { color:#475569; border-color:rgba(71,85,105,.25); background:rgba(71,85,105,.05); }
.sg-wrap.sg-theme-dark .sg-cat-box { color:#cbd5e1; border-color:rgba(203,213,225,.25); background:rgba(203,213,225,.05); }
.sg-cat-bubble       { color:#7c3aed; border-color:rgba(124,58,237,.25); background:rgba(124,58,237,.05); }
.sg-cat-sad          { color:#64748b; border-color:rgba(100,116,139,.25); background:rgba(100,116,139,.05); }
.sg-cat-ugly         { color:#dc2626; border-color:rgba(220,38,38,.25); background:rgba(220,38,38,.05); }
.sg-cat-strange      { color:#0d9488; border-color:rgba(13,148,136,.25);  background:rgba(13,148,136,.05);  }
.sg-cat-bold         { color:#ea580c; border-color:rgba(234,88,12,.25);  background:rgba(234,88,12,.05);   }
.sg-cat-cursive      { color:#4f46e5; border-color:rgba(79,70,229,.25); background:rgba(79,70,229,.05); }
.sg-cat-strikethrough{ color:#e11d48; border-color:rgba(225,29,72,.25); background:rgba(225,29,72,.05); }
.sg-cat-freefire     { color:#ea580c; border-color:rgba(234,88,12,.25);  background:rgba(234,88,12,.05);   }

/* Fav button */
.sg-fav-btn {
  display: none !important;
}

/* Preview */
.sg-preview {
  font-family: Arial,'Segoe UI Emoji','Apple Color Emoji',sans-serif;
  line-height: 1.4;
  color: var(--sg-text) !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: .25rem 0 .1rem;
  position: relative;
  z-index: 1;
  transition: font-size .12s;
}
.sg-preview--sample { font-style:normal; }

/* Copy button */
.sg-copy-btn {
  display: none !important;
}

/* Empty states */
.sg-empty-favs { grid-column:1/-1; text-align:center; padding:1.5rem; color:var(--sg-text3); }
.sg-empty-icon { font-size:2.25rem; display:block; margin-bottom:.5rem; opacity:.45; }
.sg-no-results { grid-column:1/-1; text-align:center; padding:3rem 1rem; color:var(--sg-text3); }
.sg-no-results h3 { font-size:1.1rem; font-weight:600; margin:.75rem 0 .35rem; color:var(--sg-text2); }

/* Toast */
.sg-card--copied {
  border-color: var(--sg-accent2) !important;
  box-shadow: 0 0 24px var(--sg-glow) !important;
  transform: scale(0.97);
}

.sg-toast {
  position: fixed; bottom: 2rem; left: 50%;
  display: flex; align-items: center; gap: .5rem; padding: .65rem 1.75rem;
  background: var(--sg-grad-btn); color: #fff;
  font-size: .88rem; font-weight: 600; border-radius: var(--sg-r-full);
  box-shadow: 0 15px 35px rgba(37,99,235,0.15), 0 0 25px var(--sg-glow);
  z-index: 99999; pointer-events: none; white-space: nowrap;
  transform: translateX(-50%) translateY(120px) scale(0.7) rotateX(-70deg);
  transform-style: preserve-3d;
  perspective: 1000px;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, border-color 0.15s ease;
}
.sg-wrap.sg-theme-dark .sg-toast {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 25px var(--sg-glow);
}
.sg-toast--show {
  transform: translateX(-50%) translateY(0) scale(1) rotateX(0deg) !important;
  opacity: 1 !important;
}



/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 600px) {
  .sg-header { padding: .75rem 1rem; }
  .sg-logo-badge { display:none; }
  .sg-hero { padding: 1.75rem 1rem 1.1rem; }
  .sg-filters { padding: 1rem 1rem 0; }
  .sg-main { padding: 1rem 1rem 0; }
  .sg-favorites { padding: 1.1rem 1rem 0; }
  .sg-search-wrap { max-width:100%; }
  .sg-preview-strip { gap:.4rem; }
  .sg-preview-strip span { font-size:.82rem; padding:.2rem .65rem; }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
.sg-wrap :focus-visible { outline:2px solid var(--sg-accent2); outline-offset:3px; border-radius:var(--sg-r-sm); }

@media (prefers-reduced-motion: reduce) {
  .sg-wrap *, .sg-wrap *::before, .sg-wrap *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ==========================================================================
   "MEHR LADEN" LOAD-MORE BUTTON
   ========================================================================== */
.sg-load-more-wrap {
  grid-column: 1/-1;
  display: flex;
  justify-content: center;
  margin: 2rem 0 1rem;
}
.sg-load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 2.75rem !important;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: #fff !important;
  background: linear-gradient(135deg, var(--sg-accent1), var(--sg-accent2)) !important;
  border: none !important;
  border-radius: var(--sg-r-full);
  cursor: pointer;
  transition: all .2s var(--sg-ease);
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
}
.sg-load-more-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(37,99,235,.45); }
.sg-load-more-btn:active { transform: translateY(0); }
.sg-load-more-btn:disabled { opacity: .6; cursor: default; transform: none; }
.sg-load-more-btn .sg-sentinel-loader {
  width: 16px;
  height: 16px;
  border-width: 2px;
  border-color: rgba(255,255,255,.4);
  border-top-color: #fff;
  display: none;
}
.sg-load-more-btn.sg-loading .sg-sentinel-loader { display: inline-block; }
.sg-load-more-btn.sg-loading .sg-load-more-label { display: none; }

.sg-sentinel-loader {
  width: 32px;
  height: 32px;
  border: 3px solid var(--sg-border);
  border-top-color: var(--sg-accent2);
  border-radius: 50%;
  animation: sg-spin .7s linear infinite;
}
@keyframes sg-spin { to { transform: rotate(360deg); } }