/* password-generator views — minimal hyper-modern, aligned con MOX design system (base4.css).
   Mismo lenguaje visual que iptool-views.css: cards blend con canvas, mox-primary accents,
   theme dark+light vía inheritance, focal generator en hero 2-col, globo wireframe en CTA final. */

:root{
    --pwd-canvas:        var(--bg-primary);
    --pwd-canvas-subtle: var(--bg-secondary);
    --pwd-canvas-inset:  var(--bg-tertiary);
    --pwd-card:          var(--bg-primary);
    --pwd-hover:         var(--bg-secondary);

    --pwd-text:          var(--text-primary);
    --pwd-text-muted:    var(--text-secondary);
    --pwd-text-faint:    var(--text-tertiary);

    --pwd-border:        var(--border-primary);
    --pwd-border-soft:   var(--border-secondary);

    --pwd-primary:        var(--mox-primary, #0066FF);
    --pwd-primary-hover:  var(--mox-primary-light, #3385FF);
    --pwd-primary-subtle: rgba(14,165,233,.10);
    --pwd-primary-glow:   rgba(0,102,255,.22);

    --pwd-grad: linear-gradient(135deg, var(--mox-primary, #0066FF) 0%, var(--mox-primary-light, #3385FF) 100%);

    --pwd-cta:        #0570DE;
    --pwd-cta-hover:  #0061C2;

    --pwd-warning: #f59e0b;
    --pwd-danger:  #ef4444;
    --pwd-success: #22c55e;
    --pwd-info:    #3b82f6;
}

/* ============================================================
   PAGE SHELL
============================================================ */
.pwd-page{min-height:100vh;background:var(--pwd-canvas);font-family:var(--font-sans,var(--font))}
.pwd-page *{box-sizing:border-box}
.pwd-container{max-width:1100px;margin:0 auto;padding:0 var(--space-5,24px)}

/* ============================================================
   HERO — dot-grid + radial glow, 2-col en desktop
============================================================ */
.pwd-hero{padding:96px 0 56px;position:relative;overflow:hidden;isolation:isolate}
.pwd-hero::before{
    content:'';position:absolute;inset:0;
    background-image:
        radial-gradient(circle at 50% 0%, var(--pwd-primary-glow) 0%, transparent 45%),
        radial-gradient(circle at 1px 1px, var(--pwd-border) 1px, transparent 0);
    background-size:100% 100%, 32px 32px;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 90%);
            mask-image:linear-gradient(180deg,#000 0%,transparent 90%);
    pointer-events:none;z-index:0
}

.pwd-hero-grid{
    position:relative;z-index:1;
    display:grid;grid-template-columns:1fr;gap:32px;
    align-items:center
}
.pwd-hero-content{text-align:center;max-width:680px;margin:0 auto}
@media (min-width:900px){
    .pwd-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px}
    .pwd-hero-content{text-align:left;margin:0;max-width:none}
}

.pwd-hero-badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:5px 12px 5px 10px;
    background:var(--pwd-card);border:1px solid var(--pwd-border);border-radius:100px;
    font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);
    font-size:11.5px;font-weight:500;letter-spacing:.01em;
    color:var(--pwd-text-muted);
    margin-bottom:24px;
    box-shadow:0 1px 2px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04)
}
[data-theme="light"] .pwd-hero-badge{box-shadow:0 1px 2px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.6)}
.pwd-hero-badge svg{width:14px;height:14px;color:var(--pwd-primary)}

.pwd-hero h1{
    font-family:var(--font-display,var(--font));
    font-size:clamp(2rem,4.5vw,3rem);
    font-weight:700;line-height:1.05;letter-spacing:-.03em;
    color:var(--pwd-text);margin:0 0 16px;text-wrap:balance
}
.pwd-hero h1 span{color:var(--pwd-primary)}

.pwd-hero-subtitle{
    font-size:var(--text-md,1.0625rem);
    color:var(--pwd-text-muted);margin:0 0 20px;line-height:1.6;text-wrap:pretty
}
.pwd-hero-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;color:var(--pwd-text-muted)}
@media (max-width:899px){.pwd-hero-meta{justify-content:center}}
.pwd-hero-meta li{display:inline-flex;align-items:center;gap:6px}
.pwd-hero-meta svg{width:14px;height:14px;color:var(--pwd-success);flex-shrink:0}

/* ============================================================
   FOCAL GENERATOR — output + strength + stats
============================================================ */
.pwd-focal{
    background:var(--pwd-card);
    border:1px solid var(--pwd-border);
    border-radius:var(--radius-xl,20px);
    padding:24px;
    position:relative;overflow:hidden
}
.pwd-focal::after{
    content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
    background:var(--pwd-grad);opacity:.6
}

.pwd-output{
    display:flex;align-items:center;gap:8px;
    background:var(--pwd-canvas-subtle);
    border:1px solid var(--pwd-border);
    border-radius:var(--radius-md,12px);
    padding:8px 8px 8px 18px;
    transition:border-color var(--motion-base,200ms)
}
.pwd-output:focus-within{border-color:var(--pwd-primary)}
.pwd-output.copied{border-color:var(--pwd-success)}
.pwd-output-input{
    flex:1;min-width:0;background:none;border:0;outline:none;
    font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);
    font-size:clamp(1.05rem,2.4vw,1.5rem);font-weight:600;
    color:var(--pwd-text);letter-spacing:.015em;
    padding:6px 0;word-break:break-all
}
.pwd-output-input::placeholder{color:var(--pwd-text-faint);font-weight:400}
.pwd-output-actions{display:flex;gap:4px;flex-shrink:0}

.pwd-icon-btn{
    width:38px;height:38px;
    background:transparent;border:1px solid var(--pwd-border);
    border-radius:8px;
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--pwd-text-muted);cursor:pointer;
    transition:background var(--motion-base,200ms), border-color var(--motion-base,200ms), color var(--motion-base,200ms)
}
.pwd-icon-btn:hover{background:var(--pwd-hover);border-color:var(--pwd-primary);color:var(--pwd-primary)}
.pwd-icon-btn.copied{background:var(--pwd-success);border-color:var(--pwd-success);color:#fff}
.pwd-icon-btn svg{width:18px;height:18px}

/* Strength */
.pwd-strength{margin-top:16px}
.pwd-strength-bar{
    height:6px;background:var(--pwd-canvas-subtle);
    border:1px solid var(--pwd-border-soft);
    border-radius:100px;overflow:hidden
}
.pwd-strength-fill{
    height:100%;width:0;
    background:var(--pwd-text-faint);
    border-radius:100px;
    transition:width .3s ease, background .3s ease
}
.pwd-strength-fill.weak  {width:25%; background:var(--pwd-danger)}
.pwd-strength-fill.fair  {width:50%; background:var(--pwd-warning)}
.pwd-strength-fill.good  {width:75%; background:var(--pwd-info)}
.pwd-strength-fill.strong{width:100%;background:var(--pwd-success)}

.pwd-strength-meta{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:8px;font-size:12px;color:var(--pwd-text-faint);
    text-transform:uppercase;letter-spacing:.08em
}
.pwd-strength-value{font-weight:700;letter-spacing:.04em}
.pwd-strength-value.weak  {color:var(--pwd-danger)}
.pwd-strength-value.fair  {color:var(--pwd-warning)}
.pwd-strength-value.good  {color:var(--pwd-info)}
.pwd-strength-value.strong{color:var(--pwd-success)}

/* Stats: entropy + crack time */
.pwd-stats{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;
    margin-top:14px
}
.pwd-stat{
    padding:10px 14px;
    background:var(--pwd-canvas-subtle);
    border:1px solid var(--pwd-border-soft);
    border-radius:10px;
    display:flex;flex-direction:column;gap:2px
}
.pwd-stat-label{
    font-size:10.5px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
    color:var(--pwd-text-faint)
}
.pwd-stat-value{
    font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);
    font-size:13.5px;font-weight:600;color:var(--pwd-text)
}

/* ============================================================
   MAIN
============================================================ */
.pwd-main{position:relative;padding:32px 0 8px}

/* Presets row */
.pwd-presets{
    display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
    margin-bottom:24px
}
@media (min-width:768px){.pwd-presets{grid-template-columns:repeat(4,1fr)}}
.pwd-preset{
    display:flex;align-items:center;gap:10px;
    padding:14px 16px;
    background:var(--pwd-card);
    border:1px solid var(--pwd-border);
    border-radius:var(--radius-md,12px);
    color:var(--pwd-text);
    font-size:13.5px;font-weight:600;letter-spacing:-.005em;
    cursor:pointer;text-align:left;
    transition:border-color var(--motion-base,200ms), background var(--motion-base,200ms)
}
.pwd-preset:hover{border-color:var(--pwd-primary);background:var(--pwd-primary-subtle)}
.pwd-preset svg{width:18px;height:18px;color:var(--pwd-primary);flex-shrink:0}

/* Grid de cards */
.pwd-grid{
    display:grid;grid-template-columns:1fr;gap:14px
}
@media (min-width:900px){
    .pwd-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
    .pwd-card-history{grid-column:1/-1}
}

.pwd-card{
    background:var(--pwd-card);
    border:1px solid var(--pwd-border);
    border-radius:var(--radius-lg,16px);
    padding:22px;
    transition:border-color var(--motion-base,200ms)
}
.pwd-card-head{
    display:flex;align-items:center;gap:10px;
    margin:0 0 16px;
    padding-bottom:12px;border-bottom:1px solid var(--pwd-border-soft)
}
.pwd-card-icon{
    width:28px;height:28px;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--pwd-primary-subtle);border-radius:8px;color:var(--pwd-primary)
}
.pwd-card-icon svg{width:14px;height:14px}
.pwd-card-title{
    font-size:13px;font-weight:600;color:var(--pwd-text);
    letter-spacing:-.005em;margin:0
}

/* Length card */
.pwd-card-length .pwd-card-head{flex-wrap:wrap;row-gap:6px}
.pwd-length-value{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.pwd-length-input{
    width:54px;padding:5px 8px;
    background:var(--pwd-canvas-subtle);
    border:1px solid var(--pwd-border);border-radius:6px;
    font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);
    font-size:13px;font-weight:600;color:var(--pwd-text);text-align:center;outline:none
}
.pwd-length-input:focus{border-color:var(--pwd-primary)}
.pwd-length-value span{font-size:11.5px;color:var(--pwd-text-faint)}
.pwd-length-slider{
    -webkit-appearance:none;appearance:none;width:100%;height:6px;
    background:var(--pwd-canvas-inset);border-radius:100px;outline:none;cursor:pointer
}
.pwd-length-slider::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:18px;height:18px;background:var(--pwd-primary);border:2px solid var(--pwd-card);
    border-radius:50%;cursor:pointer;
    transition:transform var(--motion-fast,150ms)
}
.pwd-length-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.pwd-length-slider::-moz-range-thumb{
    width:18px;height:18px;background:var(--pwd-primary);border:2px solid var(--pwd-card);
    border-radius:50%;cursor:pointer
}

/* Chars card */
.pwd-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pwd-option{
    display:flex;align-items:center;gap:10px;
    padding:12px;
    background:var(--pwd-canvas-subtle);
    border:1px solid var(--pwd-border);
    border-radius:10px;
    cursor:pointer;user-select:none;
    transition:border-color var(--motion-base,200ms), background var(--motion-base,200ms)
}
.pwd-option:hover{border-color:var(--pwd-border)}
.pwd-option.active{border-color:var(--pwd-primary);background:var(--pwd-primary-subtle)}
.pwd-option-check{
    width:18px;height:18px;flex-shrink:0;
    background:var(--pwd-card);
    border:1.5px solid var(--pwd-border);
    border-radius:5px;
    display:inline-flex;align-items:center;justify-content:center;
    transition:all var(--motion-fast,150ms)
}
.pwd-option.active .pwd-option-check{background:var(--pwd-primary);border-color:var(--pwd-primary)}
.pwd-option-check svg{width:11px;height:11px;color:#fff;opacity:0;transform:scale(.5);transition:all var(--motion-fast,150ms)}
.pwd-option.active .pwd-option-check svg{opacity:1;transform:scale(1)}
.pwd-option-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pwd-option-label{font-size:13px;font-weight:600;color:var(--pwd-text);letter-spacing:-.005em}
.pwd-option-preview{font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);font-size:11.5px;color:var(--pwd-text-faint);letter-spacing:.04em}
.pwd-option input{position:absolute;opacity:0;pointer-events:none}

/* Advanced card */
.pwd-exclude{margin-bottom:14px}
.pwd-exclude label{display:block;font-size:12px;color:var(--pwd-text-muted);margin:0 0 6px}
.pwd-exclude input{
    width:100%;padding:9px 12px;
    background:var(--pwd-canvas-subtle);
    border:1px solid var(--pwd-border);border-radius:8px;
    font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);
    font-size:13px;color:var(--pwd-text);outline:none
}
.pwd-exclude input:focus{border-color:var(--pwd-primary)}
.pwd-exclude input::placeholder{color:var(--pwd-text-faint)}
.pwd-extra-options{display:flex;flex-direction:column;gap:6px}
.pwd-extra-opt{
    display:flex;align-items:center;gap:10px;
    padding:8px 10px;
    border-radius:8px;
    font-size:13px;color:var(--pwd-text-muted);cursor:pointer;user-select:none;
    transition:background var(--motion-fast,150ms)
}
.pwd-extra-opt:hover{background:var(--pwd-canvas-subtle)}
.pwd-extra-opt input{appearance:auto;accent-color:var(--pwd-primary);margin:0}
.pwd-extra-opt.active{color:var(--pwd-text)}

/* History card */
.pwd-card-history .pwd-card-head{flex-wrap:wrap;row-gap:6px}
.pwd-history-clear{
    margin-left:auto;
    background:none;border:0;
    color:var(--pwd-text-faint);
    font-size:12px;font-weight:500;cursor:pointer;
    padding:4px 10px;border-radius:6px;
    transition:color var(--motion-fast,150ms), background var(--motion-fast,150ms)
}
.pwd-history-clear:hover{color:var(--pwd-danger);background:rgba(239,68,68,.06)}
.pwd-history-list{max-height:280px;overflow-y:auto;margin:-6px -6px 0}
.pwd-history-empty{padding:24px 6px;text-align:center;color:var(--pwd-text-faint);font-size:13px}
.pwd-history-item{
    display:flex;align-items:center;gap:10px;
    padding:8px 10px;
    border-radius:8px;
    transition:background var(--motion-fast,150ms)
}
.pwd-history-item:hover{background:var(--pwd-canvas-subtle)}
.pwd-history-pwd{
    flex:1;min-width:0;
    font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);
    font-size:12.5px;color:var(--pwd-text);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.pwd-history-meta{font-size:10.5px;color:var(--pwd-text-faint);flex-shrink:0}
.pwd-history-copy{
    width:28px;height:28px;flex-shrink:0;
    background:transparent;border:1px solid var(--pwd-border);border-radius:6px;
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--pwd-text-muted);cursor:pointer;
    transition:border-color var(--motion-fast,150ms), color var(--motion-fast,150ms)
}
.pwd-history-copy:hover{border-color:var(--pwd-primary);color:var(--pwd-primary)}
.pwd-history-copy svg{width:13px;height:13px}

/* ============================================================
   TIPS + EDU SECTIONS
============================================================ */
.pwd-tips-section, .pwd-edu{padding:88px 0;position:relative}
.pwd-edu{border-top:1px solid var(--pwd-border)}

.pwd-section-header{text-align:center;margin-bottom:48px;max-width:680px;margin-left:auto;margin-right:auto}
.pwd-section-title{
    font-family:var(--font-display,var(--font));
    font-size:clamp(1.5rem,3.2vw,2.25rem);
    font-weight:700;color:var(--pwd-text);letter-spacing:-.025em;line-height:1.15;
    margin:0 0 12px;text-wrap:balance
}
.pwd-section-subtitle{font-size:var(--text-md,1rem);color:var(--pwd-text-muted);max-width:600px;margin:0 auto;text-wrap:pretty}

.pwd-tips-grid{
    display:grid;grid-template-columns:1fr;gap:14px
}
@media (min-width:680px){.pwd-tips-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.pwd-tips-grid{grid-template-columns:repeat(3,1fr)}}

.pwd-tip{
    background:var(--pwd-card);
    border:1px solid var(--pwd-border);
    border-radius:var(--radius-lg,16px);
    padding:22px;
    transition:border-color var(--motion-base,200ms), transform var(--motion-base,200ms)
}
.pwd-tip:hover{border-color:var(--pwd-primary);transform:translateY(-2px)}
.pwd-tip-icon{
    width:38px;height:38px;
    background:var(--pwd-primary-subtle);
    border:1px solid rgba(14,165,233,.20);
    border-radius:var(--radius-md,12px);
    display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px
}
.pwd-tip-icon svg{width:18px;height:18px;color:var(--pwd-primary)}
.pwd-tip h3{font-size:15px;font-weight:600;color:var(--pwd-text);margin:0 0 6px;letter-spacing:-.01em}
.pwd-tip p{font-size:13.5px;color:var(--pwd-text-muted);line-height:1.6;margin:0}

/* Edu cards */
.pwd-edu-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:900px){.pwd-edu-grid{grid-template-columns:repeat(3,1fr)}}
.pwd-edu-card{
    background:var(--pwd-card);
    border:1px solid var(--pwd-border);
    border-radius:var(--radius-lg,16px);
    padding:24px;
    position:relative
}
.pwd-edu-num{
    font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);
    font-size:12px;font-weight:700;color:var(--pwd-primary);letter-spacing:.08em;
    margin-bottom:10px
}
.pwd-edu-card h3{font-size:16px;font-weight:600;color:var(--pwd-text);margin:0 0 8px;letter-spacing:-.01em}
.pwd-edu-card p{font-size:13.5px;color:var(--pwd-text-muted);line-height:1.65;margin:0}

/* ============================================================
   FINAL CTA (con globo wireframe overflow)
============================================================ */
.pwd-cta{
    padding:88px 0;text-align:center;
    border-top:1px solid var(--pwd-border);
    overflow:hidden;isolation:isolate;position:relative;
    /* Cancela margin-top:80px del .footer global → SVG llega al pie del footer. */
    margin-bottom:-80px;padding-bottom:168px
}
/* Globo wireframe anclado a la derecha + rotado 18° CW, stroke variable + mask radial. */
.pwd-cta::before{
    content:'';position:absolute;
    bottom:-20%;right:-30%;left:auto;
    width:min(80vw, 880px);aspect-ratio:1;
    transform:rotate(18deg);transform-origin:center;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%230066FF' stroke-linecap='round'><circle cx='50' cy='50' r='49.5' stroke-width='.18' stroke-opacity='.55'/><ellipse cx='50' cy='50' rx='49.5' ry='42' stroke-width='.13' stroke-opacity='.32'/><ellipse cx='50' cy='50' rx='49.5' ry='34' stroke-width='.15' stroke-opacity='.38'/><ellipse cx='50' cy='50' rx='49.5' ry='26' stroke-width='.12' stroke-opacity='.22'/><ellipse cx='50' cy='50' rx='49.5' ry='19' stroke-width='.13' stroke-opacity='.26'/><ellipse cx='50' cy='50' rx='49.5' ry='13' stroke-width='.1' stroke-opacity='.18'/><ellipse cx='50' cy='50' rx='49.5' ry='7' stroke-width='.11' stroke-opacity='.16'/><ellipse cx='50' cy='50' rx='44' ry='49.5' stroke-width='.13' stroke-opacity='.32'/><ellipse cx='50' cy='50' rx='36' ry='49.5' stroke-width='.15' stroke-opacity='.38'/><ellipse cx='50' cy='50' rx='28' ry='49.5' stroke-width='.12' stroke-opacity='.22'/><ellipse cx='50' cy='50' rx='22' ry='49.5' stroke-width='.13' stroke-opacity='.26'/><ellipse cx='50' cy='50' rx='15' ry='49.5' stroke-width='.1' stroke-opacity='.18'/><ellipse cx='50' cy='50' rx='9' ry='49.5' stroke-width='.11' stroke-opacity='.16'/><line x1='50' y1='2' x2='50' y2='98' stroke-width='.13' stroke-opacity='.32'/><line x1='72' y1='4' x2='72' y2='96' stroke-width='.11' stroke-opacity='.22'/></svg>") center/contain no-repeat;
    opacity:.7;
    -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.85) 32%, rgba(0,0,0,.4) 55%, transparent 78%);
            mask-image:radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.85) 32%, rgba(0,0,0,.4) 55%, transparent 78%);
    pointer-events:none;z-index:0
}
[data-theme="light"] .pwd-cta::before{opacity:.45}
.pwd-cta > *{position:relative;z-index:1}
.pwd-cta-title{
    font-family:var(--font-display,var(--font));
    font-size:clamp(1.625rem,3.4vw,2.5rem);
    font-weight:700;color:var(--pwd-text);letter-spacing:-.025em;line-height:1.1;
    margin:0 0 12px;text-wrap:balance
}
.pwd-cta-subtitle{font-size:1rem;color:var(--pwd-text-muted);max-width:540px;margin:0 auto 28px;text-wrap:pretty}
.pwd-cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.pwd-cta-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:12px 24px;border-radius:8px;
    font-size:14.5px;font-weight:600;letter-spacing:.005em;line-height:1.2;
    text-decoration:none;cursor:pointer;white-space:nowrap;
    transition:background var(--motion-base,200ms), color var(--motion-base,200ms), box-shadow var(--motion-base,200ms)
}
.pwd-cta-btn.primary{background:var(--pwd-cta);color:#fff;border:0}
.pwd-cta-btn.primary:hover{background:var(--pwd-cta-hover);color:#fff}
.pwd-cta-btn.primary:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(5,112,222,.35)}
.pwd-cta-btn.secondary{background:transparent;color:var(--pwd-text);box-shadow:inset 0 0 0 1px var(--pwd-border)}
.pwd-cta-btn.secondary:hover{box-shadow:inset 0 0 0 1px var(--pwd-primary);color:var(--pwd-primary)}
.pwd-cta-btn svg{width:16px;height:16px}

/* ============================================================
   TOAST
============================================================ */
.pwd-toast{
    position:fixed;bottom:24px;left:50%;
    transform:translateX(-50%) translateY(80px);
    background:var(--pwd-card);
    border:1px solid var(--pwd-border);
    border-radius:var(--radius-md,12px);
    padding:12px 18px;
    display:flex;align-items:center;gap:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    z-index:1000;opacity:0;
    transition:transform .3s ease, opacity .3s ease
}
.pwd-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.pwd-toast svg{width:18px;height:18px;color:var(--pwd-success)}
.pwd-toast span{font-size:13.5px;font-weight:500;color:var(--pwd-text)}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:600px){
    .pwd-hero{padding:72px 0 40px}
    .pwd-focal{padding:18px}
    .pwd-card{padding:18px}
    .pwd-options{grid-template-columns:1fr}
    .pwd-stats{grid-template-columns:1fr}
    .pwd-tips-section, .pwd-edu{padding:64px 0}
}