/* password-gen.css */

.pg-main { max-width: 640px; }

.pg-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.4rem;
}

.section-title {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

/* Output row */
.pg-output-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.pg-output-row .tool-input {
    flex: 1;
    min-width: 160px;
    font-size: 1rem;
}

.icon-btn {
    padding: 0.5rem 0.9rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s;
    white-space: nowrap;
}
.icon-btn:hover { background: var(--color-primary-dk); }
.icon-btn.copied { background: #28a745; }

/* Options */
.pg-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pg-opt-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.opt-label { margin: 0; min-width: 110px; }

.pg-slider {
    flex: 1;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.pg-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
}

.pg-check {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

.pg-count-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.pg-count-sel {
    width: auto;
    min-width: 80px;
    padding: 0.5rem 0.6rem;
}

/* Batch output */
.pg-batch {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    margin-top: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.9;
}
.pg-batch.hidden { display: none; }

.pg-batch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.1rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.pg-batch-item:last-child { border-bottom: none; }

.pg-batch-copy {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0.05rem 0.4rem;
    font-size: 0.75rem;
    cursor: pointer;
    color: var(--color-text-muted);
    font-family: var(--font-main);
}
.pg-batch-copy:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Strength checker ──────────────────────────────────────────────────────── */
.strength-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 99px;
    margin: 0.75rem 0 0.35rem;
    overflow: hidden;
}

.strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    transition: width 0.3s, background 0.3s;
}

.strength-label {
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    min-height: 1.2em;
}

.strength-details {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}
.strength-details.hidden { display: none; }

.sd-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.88rem;
}
.sd-row:last-child { border-bottom: none; }
.sd-key { color: var(--color-text-muted); }
.sd-val { font-family: var(--font-mono); font-weight: 600; }

.strength-tips {
    background: #fffbea;
    border: 1px solid #ffe68a;
    border-radius: var(--radius-md);
    padding: 0.65rem 0.9rem;
    font-size: 0.85rem;
    line-height: 1.6;
}
.strength-tips.hidden { display: none; }
.strength-tips ul { margin: 0; padding-left: 1.2rem; }
.strength-tips li { margin: 0.2rem 0; }

@media (max-width: 480px) {
    .pg-output-row { flex-direction: column; }
    .pg-opt-row { flex-direction: column; align-items: flex-start; }
    .pg-slider { width: 100%; }
}