/* =======================================================
   1. UKŁAD STRONY GENERATORA
   ======================================================= */
/* Import czcionki, jeśli nie ma jej w headerze */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700;800&display=swap');

.generator-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 50px;
    font-family: 'Rajdhani', sans-serif;
}

.gen-header {
    text-align: center;
    margin-bottom: 40px;
}
.gen-header h1 {
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 2px;
}
.gen-header p {
    color: #888;
    font-size: 14px;
    margin-top: 5px;
}

.gen-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 40px;
    align-items: start;
}

/* =======================================================
   2. LEWA KOLUMNA: KONTROLKI (INPUTY)
   ======================================================= */

.controls-panel {
    background: #0f0f12;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 25px;
}

.control-group { margin-bottom: 20px; }
.control-group label {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.control-group label i { color: var(--accent); margin-right: 5px; }

/* Inputy tekstowe i Selecty */
input[type="text"], select {
    width: 100%;
    background: #050506;
    border: 1px solid #333;
    padding: 12px;
    color: #fff;
    border-radius: 8px;
    outline: none;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    transition: 0.3s;
}
input[type="text"]:focus, select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
}

/* Narzędzia ikon (Wyszukiwarka + Custom Code) */
.icon-tools {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.icon-tools input {
    font-size: 11px;
    padding: 8px;
    background: #000;
}
#iconSearch { flex: 1; }
#customIconInput { flex: 1; border-color: #333; color: var(--accent); }
#customIconInput::placeholder { color: #555; }

/* Siatka Ikon */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 5px;
    background: #050506;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #333;
}

/* Scrollbar dla ikon */
.icon-grid::-webkit-scrollbar { width: 4px; }
.icon-grid::-webkit-scrollbar-track { background: #111; }
.icon-grid::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
.icon-grid::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.icon-btn {
    aspect-ratio: 1/1;
    background: #1a1a1f;
    border: 1px solid #333;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    cursor: pointer;
    transition: 0.2s;
    font-size: 14px;
}
.icon-btn:hover { background: #333; color: #fff; }
.icon-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

/* Color Picker */
.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #050506;
    padding: 5px;
    border-radius: 8px;
    border: 1px solid #333;
}
input[type="color"] {
    width: 40px;
    height: 35px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}
#colorHex {
    font-family: monospace;
    color: #888;
    font-size: 14px;
}

/* Przycisk Pobierania */
.download-btn {
    width: 100%;
    padding: 15px;
    background: #00ff88;
    color: #000;
    border: none;
    border-radius: 8px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.download-btn:hover {
    box-shadow: 0 0 20px rgba(0,255,136, 0.4);
    transform: translateY(-2px);
}

/* =======================================================
   3. PRAWA KOLUMNA: PODGLĄD
   ======================================================= */

.preview-panel {
    background: rgba(255,255,255,0.02);
    border: 2px dashed rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 450px;
}
.preview-title {
    color: #555;
    font-weight: 800;
    margin-bottom: 30px;
    font-size: 12px;
    letter-spacing: 1px;
}
.preview-info {
    margin-top: 30px;
    color: #666;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.preview-info i { color: #00ff88; }

/* =======================================================
   4. DESIGN KAFELKÓW (STREAMER CARDS)
   ======================================================= */

.streamer-card {
    width: 320px;
    height: 100px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-radius: 12px;
    /* Zmienna CSS dynamicznie zmieniana przez JS */
    --card-accent: #8b5cf6; 
}

.card-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    /* Padding z prawej: miejsce na pionowy pasek */
    padding: 0 35px 0 15px; 
    gap: 10px;
}

.icon-box {
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
}

/* Kontener na Tekst i Podtytuł */
.text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* WAŻNE: Visible, żeby html2canvas nie ucinał ogonków */
    overflow: visible; 
    flex: 1;
}

/* --- GŁÓWNY TEKST --- */
.text-box {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 800;
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Luźniejsza linia, żeby nie ucięło góry liter */
    line-height: 1.2;
    padding-top: 2px; 
    
    white-space: nowrap;
    overflow: visible; /* Nie ucinaj! */
    max-width: 100%;
    display: block;
}

/* --- PODTYTUŁ --- */
.subtext-box {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
    
    /* Luźniejsza linia */
    line-height: 1.3;
    padding-bottom: 2px;
    margin-top: -2px; 
    
    white-space: nowrap;
    overflow: visible; /* Nie ucinaj! */
    display: block;
}

/* --- ZNAK WODNY (PIONOWY PASEK) --- */
.watermark {
    position: absolute;
    right: 0;
    top: 0;
    width: 28px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    
    background: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

/* Obracamy SPAN wewnątrz - to jest bezpieczne dla generatora */
.watermark span {
    display: block;
    transform: rotate(-90deg);
    white-space: nowrap;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    font-family: 'Rajdhani', sans-serif;
    width: 100px; /* Wirtualna szerokość dla pewnego centrowania */
    text-align: center;
}

/* =======================================================
   5. STYLE MOTYWÓW (WERSJA PANCERNA DLA GENERATORA)
   ======================================================= */

/* 1. CS2 TACTICAL */
.style-cs2 {
    background: #1b1b1f;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.style-cs2 .icon-box { color: var(--card-accent); filter: drop-shadow(0 0 2px var(--card-accent)); }
.style-cs2 .text-box { color: #fff; }
.style-cs2 .deco-line {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;
    background: var(--card-accent);
}

/* 2. NEON GLOW (FIX) */
.style-neon {
    border: 3px solid var(--card-accent);
    /* Używamy solidnego koloru tła, gradient robimy w JS */
    box-shadow: 0 0 15px var(--card-accent); 
}
.style-neon .icon-box { color: #fff; filter: drop-shadow(0 0 5px var(--card-accent)); }
.style-neon .text-box { color: #fff; text-shadow: 0 0 10px var(--card-accent); }
.style-neon .deco-line {
    position: absolute; top: 0; right: 0; width: 50px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2));
    transform: skewX(-20deg);
    border-right: 1px solid rgba(255,255,255,0.3);
}

/* 3. GLASSMORPHISM (FIX) */
.style-glass {
    /* Większe krycie, żeby było widać na zdjęciu */
    background: rgba(40, 40, 45, 0.85); 
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.style-glass .icon-box { 
    background: var(--card-accent); 
    width: 40px; height: 40px; border-radius: 10px; 
    color: #fff; font-size: 24px;
}
.style-glass .text-box { color: #fff; }

/* 4. MINIMAL */
.style-clean { background: #fff; border: 2px solid #ddd; }
.style-clean .icon-box { color: var(--card-accent); }
.style-clean .text-box { color: #000; }
.style-clean .subtext-box { color: #555; }
.style-clean::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
    background: var(--card-accent);
}
.style-clean .watermark { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.2); border-left: 1px solid rgba(0,0,0,0.1); }

/* 5. MOLOTOV (FIRE) */
.style-fire {
    border: 2px solid #ffcc00; 
    box-shadow: 0 0 15px rgba(255, 100, 0, 0.6);
}
.style-fire .icon-box { color: #fff; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8)); }
.style-fire .text-box { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.style-fire .subtext-box { color: rgba(255,255,255,0.9); text-shadow: 0 1px 2px #000; }
.style-fire .deco-line {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 4px;
    background: #fff; opacity: 0.8;
}
.style-fire .watermark { background: rgba(0,0,0,0.3); color: rgba(255,255,255,0.8); }

/* 6. GLITCH / HACKER */
.style-glitch {
    background: #000; border: 2px solid #00ff00; 
}
.style-glitch .text-box, .style-glitch .subtext-box { font-family: 'Courier New', monospace; letter-spacing: -1px; }
.style-glitch .icon-box { color: #00ff00; }
.style-glitch .text-box { color: #00ff00; text-shadow: 2px 0px 0px rgba(255,0,0,0.7); }
.style-glitch .subtext-box { color: #00ff00; }
.style-glitch .deco-line { background: #00ff00; height: 2px; }
.style-glitch .watermark { color: #00ff00; border-left: 1px dashed #00ff00; font-family: 'Courier New'; }

/* 7. CARBON GOLD */
.style-carbon {
    border: 2px solid #d4af37; 
    background-color: #111;
}
.style-carbon .icon-box { 
    color: #ffd700; 
    filter: drop-shadow(0 2px 2px #000);
}
.style-carbon .text-box { color: #f1f1f1; text-shadow: 0 2px 2px #000; }
.style-carbon .subtext-box { color: #d4af37; }
.style-carbon .deco-line { background: #d4af37; height: 1px; bottom: 10px; }
.style-carbon .watermark { color: rgba(212, 175, 55, 0.5); border-left: 1px solid rgba(212, 175, 55, 0.3); }

/* 8. RETRO WAVE */
.style-retro {
    border-top: 3px solid #00f3ff; border-bottom: 3px solid #ff00ff;
    background-color: #2b0042;
}
.style-retro .icon-box { color: #00f3ff; filter: drop-shadow(0 0 2px #00f3ff); }
.style-retro .text-box { color: #ff00ff; text-shadow: 2px 2px 0px #00f3ff; font-style: italic; }
.style-retro .subtext-box { color: #00f3ff; font-style: italic; }
.style-retro .watermark { color: rgba(255, 255, 255, 0.7); }

/* 9. PASTEL DREAM */
.style-pastel {
    border: 5px solid #fff; border-radius: 20px; 
}
.style-pastel .icon-box { 
    color: #fff; background: var(--card-accent); width: 45px; height: 45px; 
    border-radius: 50%; font-size: 20px; 
}
.style-pastel .text-box { color: #555; font-weight: 900; letter-spacing: 0px; }
.style-pastel .subtext-box { color: var(--card-accent); font-weight: 700; }
.style-pastel .watermark { color: rgba(0,0,0,0.2); border-left: 1px solid rgba(0,0,0,0.1); }


/* =======================================================
   6. TEKSTURY TŁA (Wersja PANCERNA - SVG)
   ======================================================= */
/* SVG w data-uri działają w 100% z html2canvas. Gradienty CSS są zawodne. */

.card-bg {
    position: absolute; inset: 0; opacity: 0.4; z-index: 0; pointer-events: none;
    background-position: center;
}

/* HEXAGONS */
.tex-hex {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='42' viewBox='0 0 24 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v20H0V0zm0 22h24v20H0V22z' fill='%23000000' fill-opacity='0.0'/%3E%3Cpath d='M12 0L0 10v20l12 10 12-10V10z' fill='%23000000' fill-opacity='0.6' stroke='%23333' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 30px 52px;
    opacity: 0.2;
}

/* CARBON FIBER */
.tex-carbon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23000000' fill-opacity='0.7'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 10px 10px;
    opacity: 0.25;
}

/* SCANLINES */
.tex-scan {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2h40' stroke='%23000000' stroke-width='2' opacity='0.8'/%3E%3C/svg%3E");
    background-size: 100% 4px;
    opacity: 0.4;
}

/* DOTS */
.tex-dots {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='2' fill='%23ffffff' fill-opacity='0.5'/%3E%3C/svg%3E");
    background-size: 15px 15px;
    opacity: 0.15;
}

/* Dostosowanie widoczności dla jasnych motywów */
.style-clean .card-bg { opacity: 0.05; filter: invert(1); }
.style-retro .card-bg { opacity: 0.3; transform: perspective(100px) rotateX(10deg) scale(1.2); }


/* =======================================================
   7. RESPONSYWNOŚĆ
   ======================================================= */

@media (max-width: 900px) {
    .gen-grid { grid-template-columns: 1fr; }
    .preview-panel { padding: 20px; min-height: 250px; }
    .icon-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 480px) {
    .gen-header h1 { font-size: 26px; }
    .icon-grid { grid-template-columns: repeat(4, 1fr); }
    .streamer-card { transform: scale(0.9); } 
}