@font-face {
  font-family: 'SymbolaLocal';
  src: url('../fonts/Symbola.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-FFFF, U+1D000-1DFFF, U+20000-2FA1F;
}
/* ===== SmileyZone Spitznamen Generator – Google Font Edition ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&family=Noto+Sans+Math&family=Noto+Sans+Display:wght@400;700&family=Noto+Serif+Display:wght@400;700&display=swap');


@import url('https://fonts.cdnfonts.com/css/quivira');
@import url('https://fonts.cdnfonts.com/css/freeserif');


/* ===== Divi Font Override Fix ===== */
#sz-nickgen, #sz-nickgen * {
  font-family:
    'SymbolaLocal',
    'Noto Sans Symbols 2',
    'Noto Sans Math',
    'Noto Sans Display',
    'Noto Serif Display',
    'Segoe UI Symbol',
    'Segoe UI Emoji',
    'Apple Color Emoji',
    'Noto Color Emoji',
    system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

:root {
  --sz-bg:#212121;
  --sz-elev:#1a1a1a;
  --sz-bord:#333;
  --sz-text:#efefef;
  --sz-muted:#cfcfcf;
  --sz-dim:#b9b9b9;
  --sz-pill:#2a2a2a;
  --sz-pill-h:#333;
  --sz-ok:#2f4f2f;
  --sz-ok-b:#3b7a3b;
  --sz-dash:#2d2d2d;
  --sz-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* ===== Layout & Buttons ===== */
.sz-wrap{background:var(--sz-bg);color:var(--sz-text);padding:20px;border-radius:14px;box-shadow:var(--sz-shadow);}
.sz-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:16px;}
.sz-input label{display:block;font-size:13px;margin-bottom:6px;color:var(--sz-muted);}
.sz-input textarea{width:100%;min-height:220px;background:var(--sz-elev);color:#fff;border:1px solid var(--sz-bord);border-radius:10px;padding:12px;font-size:16px;resize:vertical;}
.sz-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.sz-btn{border:1px solid var(--sz-bord);background:var(--sz-pill);color:#eaeaea;padding:8px 12px;border-radius:10px;cursor:pointer;font-size:13px;transition:all .2s ease;}
.sz-btn:hover{background:var(--sz-pill-h);transform:scale(1.05);}
.sz-note{margin-top:8px;font-size:12px;color:var(--sz-dim);}
.sz-toolbar{display:flex;align-items:center;gap:10px;justify-content:space-between;position:sticky;top:0;background:var(--sz-bg);padding-bottom:4px;z-index:2;}
.sz-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.sz-tab{border:1px solid var(--sz-bord);background:#1e1e1e;color:#ddd;padding:6px 10px;border-radius:999px;cursor:pointer;font-size:12px;transition:all .15s ease-in-out;}
.sz-tab:hover{background:#2b2b2b;}
.sz-tab.is-active{background:var(--sz-ok);border-color:var(--sz-ok-b);}
.sz-search input{background:var(--sz-elev);border:1px solid var(--sz-bord);border-radius:999px;color:#fff;padding:8px 12px;font-size:13px;min-width:200px;}
.sz-list{max-height:60vh;overflow:auto;background:var(--sz-elev);border:1px solid var(--sz-bord);border-radius:10px;padding:10px;position:relative;}
.sz-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px dashed var(--sz-dash);flex-wrap:wrap;}
.sz-nick{flex:1 1 auto;font-size:15px;word-break:break-word;min-width:180px;}
.sz-ops{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:150px;}
.sz-copy,.sz-fav{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--sz-bord);background:var(--sz-pill);color:#eaeaea;padding:6px 12px;border-radius:999px;cursor:pointer;font-size:12px;line-height:1;transition:all .15s ease-in-out;}
.sz-copy:hover,.sz-fav:hover{background:var(--sz-pill-h);transform:scale(1.05);}

.sz-copy.copied{background:var(--sz-ok);border-color:var(--sz-ok-b);}

#sz-nickgen .sz-copy .icon,
#sz-nickgen .sz-fav .icon {
  min-width: 16px;
  min-height: 16px;
  flex-shrink: 0;
}
@media (max-width:1024px){.sz-grid{grid-template-columns:1fr}.sz-toolbar{position:static}.sz-search input{min-width:140px;width:100%}}
@media (max-width:600px){.sz-item{flex-direction:column;align-items:flex-start;gap:8px}.sz-ops{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:10px}.sz-copy,.sz-fav{width:48%;text-align:center}}



/* === Kopieren/Favorit: immer zeigen, nie verschlucken === */
#sz-nickgen .sz-item{
  display:flex;
  align-items:center;
  gap:12px;
}
#sz-nickgen .sz-nick{ flex:1 1 auto; min-width:120px; }
#sz-nickgen .sz-chip{ flex:0 0 auto; }

#sz-nickgen .sz-ops{
  margin-left:auto;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  overflow:visible !important;
  flex:0 0 auto;
}

/* Buttons */
#sz-nickgen .sz-ops button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px;
  padding:6px 12px;
  border:1px solid #333;
  background:#1e1e1e;
  color:#ddd;
  border-radius:8px;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition:.15s ease-in-out;
}
#sz-nickgen .sz-ops button:hover{
  background:#2a2a2a;
  color:#fff;
  border-color:#555;
}

/* Icons */
#sz-nickgen .sz-ops .icon{
  width:14px;
  height:14px;
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* 📋 Kopieren */
#sz-nickgen .sz-copy .icon{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23bbb"><path d="M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v16l4-4h9a2 2 0 0 0 2-2V5z"/></svg>');
}
#sz-nickgen .sz-copy.copied .icon{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2396f59a"><path d="M9 16.17 5.12 12.3 4 13.41l5 5L20 7.41 18.59 6z"/></svg>');
}

/* ☆ Favorit */
#sz-nickgen .sz-fav .icon{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23bbb"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}
#sz-nickgen .sz-fav.active .icon{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffd166"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

/* mobile layout fix */
@media (max-width:600px){
  .sz-item{flex-direction:column;align-items:flex-start;gap:8px}
  .sz-ops{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:10px}
  .sz-copy,.sz-fav{width:48%;text-align:center}
}

#sz-nickgen .sz-ops button {
  position: relative !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: inline-flex !important;
}