/* ─── HJFR Password Generator — Stylesheet v1.0.0 ─────────────────────────── */

/* ─── CSS Variables ─────────────────────────────────────────────────── */
.hjfr-pg-wrapper {
    --clr-bg:           #0f1420;
    --clr-surface:      #161d2b;
    --clr-surface-alt:  #1c2638;
    --clr-border:       #2a3548;
    --clr-navy:         #1a2540;
    --clr-cyan:         #00c9c4;
    --clr-cyan-dim:     #00a89e;
    --clr-gold:         #e8b84b;
    --clr-gold-dim:     #c9a03a;
    --clr-text:         #dce3ed;
    --clr-text-muted:   #7a8899;
    --clr-unsafe:       #e74c3c;
    --clr-unsafe-bg:    rgba(231, 76, 60, 0.12);
    --clr-weak:         #f39c12;
    --clr-weak-bg:      rgba(243, 156, 18, 0.12);
    --clr-fair:         #3498db;
    --clr-fair-bg:      rgba(52, 152, 219, 0.12);
    --clr-strong:       #2ecc71;
    --clr-strong-bg:    rgba(46, 204, 113, 0.12);
    --clr-vstrong:      #00c9c4;
    --clr-vstrong-bg:   rgba(0, 201, 196, 0.12);

    --radius:           14px;
    --radius-sm:        8px;
    --radius-xs:        5px;
    --font-mono:        'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --font-sans:        'Segoe UI', system-ui, -apple-system, sans-serif;
    --transition:       0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    max-width:          520px;
    margin:             2rem auto;
    background:         var(--clr-bg);
    border:             1px solid var(--clr-border);
    border-radius:      var(--radius);
    padding:            28px 26px 22px;
    box-shadow:         0 8px 40px rgba(0, 0, 0, 0.35),
                        0 0 0 1px rgba(0, 201, 196, 0.06);
    font-family:        var(--font-sans);
    color:              var(--clr-text);
    box-sizing:         border-box;
}

/* ─── Header ─────────────────────────────────────────────────────── */
.hjfr-pg-header {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    margin-bottom:  22px;
    padding-bottom: 16px;
    border-bottom:  1px solid var(--clr-border);
}
.hjfr-pg-logo {
    display:    flex;
    align-items: center;
    gap:        10px;
}
.hjfr-pg-shield {
    width:      26px;
    height:     26px;
    color:      var(--clr-cyan);
    filter:     drop-shadow(0 0 6px rgba(0, 201, 196, 0.35));
}
.hjfr-pg-title {
    font-size:      1.1rem;
    font-weight:    600;
    color:          #fff;
    letter-spacing: 0.01em;
}
.hjfr-pg-badge {
    font-size:      0.68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          var(--clr-gold);
    background:     rgba(232, 184, 75, 0.1);
    border:         1px solid rgba(232, 184, 75, 0.25);
    padding:        3px 10px;
    border-radius:  20px;
}

/* ─── Sections ───────────────────────────────────────────────────── */
.hjfr-pg-section {
    margin-bottom: 20px;
}
.hjfr-pg-section-label {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    font-size:      0.78rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color:          var(--clr-text-muted);
    margin-bottom:  10px;
}
.hjfr-pg-length-value {
    font-family:    var(--font-mono);
    font-size:      0.88rem;
    color:          var(--clr-cyan);
    background:     var(--clr-surface-alt);
    padding:        2px 9px;
    border-radius:  var(--radius-xs);
    font-weight:    700;
}

/* ─── Checkbox Option Cards ──────────────────────────────────────── */
.hjfr-pg-options {
    display:    grid;
    grid-template-columns: repeat(2, 1fr);
    gap:        8px;
}
.hjfr-pg-option {
    position:   relative;
    cursor:     pointer;
}
/* Hide native checkbox */
.hjfr-pg-option input.hjfr-pg-check {
    position:   absolute;
    opacity:    0;
    width:      0;
    height:     0;
}
.hjfr-pg-option-inner {
    display:        flex;
    align-items:    center;
    gap:            10px;
    background:     var(--clr-surface);
    border:         1px solid var(--clr-border);
    border-radius:  var(--radius-sm);
    padding:        10px 12px;
    transition:     border-color var(--transition),
                    background var(--transition),
                    box-shadow var(--transition);
}
.hjfr-pg-option-icon {
    font-family:    var(--font-mono);
    font-size:      0.82rem;
    font-weight:    700;
    color:          var(--clr-text-muted);
    min-width:      30px;
    text-align:     center;
    background:     var(--clr-surface-alt);
    padding:        3px 6px;
    border-radius:  var(--radius-xs);
    transition:     color var(--transition), background var(--transition);
}
.hjfr-pg-option-text {
    font-size:      0.82rem;
    color:          var(--clr-text-muted);
    font-weight:    500;
    transition:     color var(--transition);
}
/* Checked state */
.hjfr-pg-check:checked + .hjfr-pg-option-inner {
    border-color:   var(--clr-cyan);
    background:     rgba(0, 201, 196, 0.06);
    box-shadow:     0 0 0 1px rgba(0, 201, 196, 0.15);
}
.hjfr-pg-check:checked + .hjfr-pg-option-inner .hjfr-pg-option-icon {
    color:          var(--clr-cyan);
    background:     rgba(0, 201, 196, 0.12);
}
.hjfr-pg-check:checked + .hjfr-pg-option-inner .hjfr-pg-option-text {
    color:          var(--clr-text);
}
/* Hover */
.hjfr-pg-option:hover .hjfr-pg-option-inner {
    border-color:   rgba(0, 201, 196, 0.4);
}
/* Focus-visible */
.hjfr-pg-check:focus-visible + .hjfr-pg-option-inner {
    box-shadow:     0 0 0 2px var(--clr-cyan);
}

/* Char-type validation warning */
.hjfr-pg-chartype-warn {
    margin:     8px 0 0;
    font-size:  0.77rem;
    color:      var(--clr-unsafe);
    min-height: 1.1em;
    transition: opacity var(--transition);
    opacity:    0;
}
.hjfr-pg-chartype-warn.visible {
    opacity:    1;
}

/* ─── Range Slider ───────────────────────────────────────────────── */
.hjfr-pg-slider {
    -webkit-appearance: none;
    appearance:         none;
    width:              100%;
    height:             6px;
    border-radius:      3px;
    background:         var(--clr-surface-alt);
    outline:            none;
    cursor:             pointer;
    position:           relative;
}
/* Chrome / Safari thumb */
.hjfr-pg-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:         none;
    width:              22px;
    height:             22px;
    border-radius:      50%;
    background:         var(--clr-cyan);
    box-shadow:         0 0 8px rgba(0, 201, 196, 0.45),
                        0 2px 4px rgba(0, 0, 0, 0.3);
    cursor:             pointer;
    transition:         box-shadow var(--transition);
}
.hjfr-pg-slider::-webkit-slider-thumb:hover {
    box-shadow:         0 0 14px rgba(0, 201, 196, 0.6),
                        0 2px 6px rgba(0, 0, 0, 0.3);
}
/* Firefox thumb */
.hjfr-pg-slider::-moz-range-thumb {
    width:              22px;
    height:             22px;
    border:             none;
    border-radius:      50%;
    background:         var(--clr-cyan);
    box-shadow:         0 0 8px rgba(0, 201, 196, 0.45);
    cursor:             pointer;
}
/* Filled portion (Chrome) */
.hjfr-pg-slider::-webkit-slider-runnable-track {
    height:             6px;
    border-radius:      3px;
}
/* Focus ring */
.hjfr-pg-slider:focus {
    outline:            none;
}
.hjfr-pg-slider:focus::-webkit-slider-thumb {
    box-shadow:         0 0 0 3px rgba(0, 201, 196, 0.3),
                        0 0 8px rgba(0, 201, 196, 0.45);
}

/* Tick labels */
.hjfr-pg-slider-ticks {
    display:            flex;
    justify-content:    space-between;
    margin-top:         6px;
}
.hjfr-pg-slider-ticks span {
    font-size:          0.68rem;
    color:              var(--clr-text-muted);
    font-family:        var(--font-mono);
}

/* ─── Strength Bar ───────────────────────────────────────────────── */
.hjfr-pg-strength-bar-track {
    width:          100%;
    height:         5px;
    background:     var(--clr-surface-alt);
    border-radius:  3px;
    overflow:       hidden;
    margin-top:     4px;
}
.hjfr-pg-strength-bar {
    height:         100%;
    width:          0%;
    border-radius:  3px;
    transition:     width 0.4s ease, background-color 0.35s ease;
}
/* Strength colours applied via JS data-level classes */
.hjfr-pg-strength-bar[data-level="unsafe"]  { background: var(--clr-unsafe); }
.hjfr-pg-strength-bar[data-level="weak"]    { background: var(--clr-weak); }
.hjfr-pg-strength-bar[data-level="fair"]    { background: var(--clr-fair); }
.hjfr-pg-strength-bar[data-level="strong"]  { background: var(--clr-strong); }
.hjfr-pg-strength-bar[data-level="vstrong"] { background: var(--clr-vstrong); }

/* Strength label row */
.hjfr-pg-strength-label {
    display:        flex;
    align-items:    baseline;
    justify-content: space-between;
    margin-top:     7px;
    margin-bottom:  16px;
    min-height:     1.3em;
}
.hjfr-pg-strength-text {
    font-size:      0.78rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition:     color var(--transition);
}
.hjfr-pg-strength-text[data-level="unsafe"]  { color: var(--clr-unsafe); }
.hjfr-pg-strength-text[data-level="weak"]    { color: var(--clr-weak); }
.hjfr-pg-strength-text[data-level="fair"]    { color: var(--clr-fair); }
.hjfr-pg-strength-text[data-level="strong"]  { color: var(--clr-strong); }
.hjfr-pg-strength-text[data-level="vstrong"] { color: var(--clr-vstrong); }

/* Inline warning / info message */
.hjfr-pg-strength-warning {
    font-size:      0.72rem;
    max-width:      280px;
    text-align:     right;
    transition:     color var(--transition);
}
.hjfr-pg-strength-warning[data-level="unsafe"]  { color: var(--clr-unsafe); }
.hjfr-pg-strength-warning[data-level="weak"]    { color: var(--clr-weak); }
.hjfr-pg-strength-warning[data-level="fair"]    { color: var(--clr-fair); }
.hjfr-pg-strength-warning[data-level="strong"]  { color: var(--clr-strong); }
.hjfr-pg-strength-warning[data-level="vstrong"] { color: var(--clr-vstrong); }

/* ─── Password Output ────────────────────────────────────────────── */
.hjfr-pg-output-block {
    background:     var(--clr-surface);
    border:         1px solid var(--clr-border);
    border-radius:  var(--radius-sm);
    padding:        14px 14px 14px 18px;
    margin-bottom:  16px;
    transition:     border-color var(--transition);
}
.hjfr-pg-output-block.unsafe {
    border-color:   var(--clr-unsafe);
    background:     var(--clr-unsafe-bg);
}
.hjfr-pg-output-block.weak {
    border-color:   var(--clr-weak);
    background:     var(--clr-weak-bg);
}
.hjfr-pg-output-block.fair {
    border-color:   var(--clr-fair);
}
.hjfr-pg-output-block.strong {
    border-color:   var(--clr-strong);
}
.hjfr-pg-output-block.vstrong {
    border-color:   var(--clr-vstrong);
}
.hjfr-pg-output-row {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            12px;
}
.hjfr-pg-password-display {
    font-family:    var(--font-mono);
    font-size:      1.15rem;
    font-weight:    600;
    color:          #fff;
    letter-spacing: 0.04em;
    word-break:     break-all;
    flex:           1;
    user-select:    all;
}

/* Copy button */
.hjfr-pg-copy-btn {
    display:        flex;
    align-items:    center;
    gap:            6px;
    background:     var(--clr-surface-alt);
    border:         1px solid var(--clr-border);
    border-radius:  var(--radius-xs);
    color:          var(--clr-text-muted);
    padding:        6px 11px;
    font-size:      0.75rem;
    font-weight:    600;
    cursor:         pointer;
    transition:     all var(--transition);
    white-space:    nowrap;
    flex-shrink:    0;
}
.hjfr-pg-copy-btn svg {
    width:          15px;
    height:         15px;
}
.hjfr-pg-copy-btn:hover {
    border-color:   var(--clr-cyan);
    color:          var(--clr-cyan);
    background:     rgba(0, 201, 196, 0.06);
}
.hjfr-pg-copy-btn.copied {
    border-color:   var(--clr-strong);
    color:          var(--clr-strong);
    background:     rgba(46, 204, 113, 0.08);
}

/* ─── Generate Button ────────────────────────────────────────────── */
.hjfr-pg-generate-btn {
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            10px;
    width:          100%;
    background:     linear-gradient(135deg, var(--clr-cyan), var(--clr-cyan-dim));
    border:         none;
    border-radius:  var(--radius-sm);
    color:          #0f1420;
    font-family:    var(--font-sans);
    font-size:      0.88rem;
    font-weight:    700;
    letter-spacing: 0.04em;
    padding:        13px 18px;
    cursor:         pointer;
    transition:     box-shadow var(--transition), transform 0.12s ease;
    box-shadow:     0 4px 16px rgba(0, 201, 196, 0.28);
}
.hjfr-pg-generate-btn svg {
    width:          18px;
    height:         18px;
    transition:     transform 0.5s ease;
}
.hjfr-pg-generate-btn:hover {
    box-shadow:     0 6px 24px rgba(0, 201, 196, 0.4);
}
.hjfr-pg-generate-btn:active {
    transform:      scale(0.97);
}
/* Spin icon on click */
.hjfr-pg-generate-btn.spin svg {
    transform:      rotate(360deg);
}

/* ─── Footer Disclaimer ──────────────────────────────────────────── */
.hjfr-pg-disclaimer {
    margin:         18px 0 0;
    font-size:      0.7rem;
    color:          var(--clr-text-muted);
    text-align:     center;
    line-height:    1.5;
    padding-top:    14px;
    border-top:     1px solid var(--clr-border);
}
.hjfr-pg-disclaimer a {
    color:          var(--clr-gold);
    text-decoration: none;
    font-weight:    600;
}
.hjfr-pg-disclaimer a:hover {
    text-decoration: underline;
}

/* ─── Admin Notice ───────────────────────────────────────────────── */
.hjfr-pg-notice .hjfr-pg-notice-params code {
    margin-right:   6px;
    background:     #f1f1f1;
    padding:        2px 7px;
    border-radius:  3px;
    font-size:      0.82em;
}

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 500px) {
    .hjfr-pg-wrapper {
        margin:     1rem 12px;
        padding:    20px 18px 18px;
    }
    .hjfr-pg-options {
        grid-template-columns: repeat(2, 1fr);
    }
    .hjfr-pg-password-display {
        font-size:  1rem;
    }
}
@media (max-width: 340px) {
    .hjfr-pg-options {
        grid-template-columns: 1fr;
    }
}