/* Passwort-Generator – Widget (Embed-Variante)
 * Laedt NACH pages/password-generator.css (+ game-toolbar/highscore-panel bei Spielen).
 * Kompakte Raender fuer iframe-Einbindung, Badge-Abstand unten rechts.
 */

body.boza-widget.page-password-generator {
    padding: 12px;
}

body.boza-widget.page-password-generator .container {
    max-width: 640px;
    padding: 0;
}

/* Platz fuer die Badge unten rechts */
body.boza-widget.page-password-generator .main-card {
    margin-bottom: 40px;
}

/* Compact-Modus (?compact=true): Header reduzieren */
body.boza-widget.page-password-generator.compact .card-header h1 {
    font-size: 1.35em;
}

body.boza-widget.page-password-generator.compact .card-header p {
    display: none;
}

/* Akzentfarbe (?accent=hex) – gilt fuer den Generieren-Button */
body.boza-widget.page-password-generator .action-btn {
    background: var(--c-accent, #667eea);
    color: var(--c-accent-text, #fff);
}

body.boza-widget.page-password-generator .action-btn:hover {
    background: var(--c-accent-hover, #5568d3);
}

/* ==== Voll-Anpassung (Tools): Anzeige, Buttons, Checkboxen, Akzentflächen ==== */

/* Passwort-Anzeige */
body.boza-widget .password-display {
    background: var(--c-surface, #f8f9fa);
    border-color: var(--c-border, #e0e0e0);
}
body.dark-theme.boza-widget .password-display {
    background: var(--c-surface, #1a1f33);
    border-color: var(--c-border, #2a3045);
}
body.boza-widget .password-text {
    color: var(--c-text, #333);
}
body.dark-theme.boza-widget .password-text {
    color: var(--c-text, #e0e0e0);
}

/* Aktionen: Generieren/Kopieren/Download -> accent */
body.boza-widget .action-btn,
body.dark-theme.boza-widget .action-btn {
    background: var(--c-accent, #667eea);
    color: var(--c-accent-text, #fff);
}
body.boza-widget .action-btn:hover,
body.dark-theme.boza-widget .action-btn:hover {
    background: var(--c-accent-hover, #5568d3);
}
body.boza-widget .action-btn.copied,
body.dark-theme.boza-widget .action-btn.copied {
    background: var(--c-success, #10b981);
}

/* Visibility-Button */
body.boza-widget .visibility-btn,
body.dark-theme.boza-widget .visibility-btn {
    background: var(--c-surface-2, #e0e0e0);
    color: var(--c-text, #333);
}
body.dark-theme.boza-widget .visibility-btn {
    background: var(--c-surface-2, #2a2a3e);
    color: var(--c-text, #e0e0e0);
}

/* Generate-Button (groß, primär) */
body.boza-widget .generate-btn,
body.dark-theme.boza-widget .generate-btn {
    background: var(--c-accent, #667eea);
    color: var(--c-accent-text, #fff);
}
body.boza-widget .generate-btn:hover,
body.dark-theme.boza-widget .generate-btn:hover {
    background: var(--c-accent-hover, #5568d3);
}

/* Slider */
body.boza-widget .length-slider {
    accent-color: var(--c-accent, #667eea);
}

/* Checkboxen */
body.boza-widget .checkbox-group input[type="checkbox"],
body.boza-widget .option-item input[type="checkbox"] {
    accent-color: var(--c-accent, #667eea);
}

/* Option-Selects */
body.boza-widget .count-select,
body.boza-widget .options-section select {
    border-color: var(--c-border, #e0e0e0);
}