/* Password Strength Specific Styles (Hybrid Approach) */

/* Input Block */
.ps-input-block { border: 2px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 30px; background: var(--bg-card); transition: 0.3s; }
.ps-input-block:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); }
.ps-block-header { background: var(--bg-secondary); padding: 12px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.ps-label { font-weight: 800; color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase; }

/* Clear Button */
.ps-btn-clear { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); padding: 6px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: 0.2s; outline: none; }
.ps-btn-clear:hover { background: #ef4444; color: #fff; }

/* Password Input */
.ps-input-wrapper { display: flex; align-items: center; }
.ps-input-wrapper input { flex: 1; border: none; padding: 20px; font-family: 'Consolas', monospace; font-size: 1.2rem; outline: none; color: var(--text-main); background: transparent; }
.ps-toggle { padding: 0 20px; color: var(--text-muted); cursor: pointer; font-size: 1.2rem; transition: 0.2s; }
.ps-toggle:hover { color: var(--primary); }

/* Meter Section (Replaces Inline CSS) */
.ps-meter-section { margin-bottom: 40px; }
.ps-strength-header { display: flex; justify-content: space-between; margin-bottom: 12px; align-items: center; }
.ps-status-text { color: var(--text-muted); font-weight: 900; font-size: 1.1rem; transition: 0.3s; }
.ps-progress-wrapper { height: 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
#strength-bar { height: 100%; width: 0%; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s ease; border-radius: 10px; background-color: var(--text-muted); }

/* Analysis Grid */
.ps-analysis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ps-stat-box { background: var(--bg-card); border: 1px solid var(--border); padding: 25px 20px; border-radius: 16px; position: relative; overflow: hidden; transition: 0.3s; }
.ps-stat-box:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.ps-stat-box::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background: var(--primary); opacity: 0.5; }
.ps-stat-lbl { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; display: block; margin-bottom: 8px; }
.ps-stat-val { display: block; font-weight: 800; color: var(--text-main); font-size: 1.2rem; word-break: break-word; font-family: 'Consolas', monospace; }

@media (max-width: 768px) { 
    .ps-analysis-grid { grid-template-columns: 1fr; gap: 15px; } 
    .ps-input-wrapper input { font-size: 1rem; padding: 15px; }
}