/* --- Google Font --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono&display=swap');

/* --- CSS Variables for a professional dark theme --- */
:root {
    --bg-dark: #121212;
    --card-bg: #1E1E1E;
    --primary-color: #007BFF;
    --primary-hover: #0056b3;
    --text-primary: #EAEAEA;
    --text-secondary: #B0B0B0;
    --border-color: #333;
    /* Strength colors */
    --strength-very-weak: #dc3545;
    --strength-weak: #fd7e14;
    --strength-fair: #ffc107;
    --strength-strong: #20c997;
    --strength-very-strong: #198754;
}

/* --- Base & Body Styles --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-dark); color: var(--text-primary); line-height: 1.6; }
.container { max-width: 800px; margin: 20px auto; padding: 0 15px; }

/* --- Header & Footer --- */
.main-header { text-align: center; margin-bottom: 30px; }
.main-header h1 { font-size: 2.2rem; }
.main-header p { color: var(--text-secondary); }
.main-footer { text-align: center; margin-top: 30px; font-size: 0.9rem; color: var(--text-secondary); }

/* --- General & Card Styles --- */
.card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 25px; margin-bottom: 25px; }
h2 { font-size: 1.5rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
label { display: block; margin-bottom: 5px; font-weight: 500; }
input[type="text"], input[type="range"], textarea, .btn { font-family: 'Inter', sans-serif; font-size: 1rem; }
textarea { resize: vertical; }

/* --- Password Generator --- */
.generator-output { display: flex; gap: 10px; margin-bottom: 20px; }
#generated-password { flex-grow: 1; border: 1px solid var(--border-color); background: var(--bg-dark); color: var(--text-primary); padding: 10px; border-radius: 8px; font-family: 'Roboto Mono', monospace; }
.btn-icon { padding: 10px; background: var(--primary-color); color: white; border: none; border-radius: 8px; cursor: pointer; }
.generator-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 20px; }
.checkboxes { display: flex; flex-direction: column; gap: 10px; }
#length-slider { width: 100%; }

/* --- Buttons --- */
.btn { padding: 10px 15px; border-radius: 8px; border: none; cursor: pointer; transition: background-color 0.2s; }
.btn-primary { background: var(--primary-color); color: white; width: 100%; }
.btn-primary:hover { background: var(--primary-hover); }

/* --- Password Analyzer --- */
.analyzer-input input { width: 100%; padding: 10px; background: var(--bg-dark); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 8px; }
.strength-meter { width: 100%; height: 10px; background: #333; border-radius: 5px; margin-top: 15px; overflow: hidden; }
.strength-bar { height: 100%; width: 0; border-radius: 5px; transition: width 0.3s, background-color 0.3s; }
.strength-text { margin-top: 5px; font-weight: bold; }
.analysis-details { margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; color: var(--text-secondary); }
.assumptions { font-size: 0.8rem; color: #666; margin-top: 10px; }

/* --- Hash Calculator --- */
.security-warning { background: #4d0a0a; border: 1px solid var(--strength-very-weak); padding: 15px; border-radius: 8px; margin-bottom: 20px; }
.hash-section, .verify-section { border-top: 1px solid var(--border-color); padding-top: 20px; margin-top: 20px; }
#hash-input, #verify-password, #verify-hash { width: 100%; padding: 10px; background: var(--bg-dark); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 10px; }
#hash-output { width: 100%; height: 100px; font-family: 'Roboto Mono', monospace; margin-top: 10px; }
.hash-section { position: relative; }
.hash-section .btn-icon { position: absolute; right: 10px; bottom: 20px; }
#verify-result { margin-top: 10px; font-weight: bold; }

/* --- Toast Notification --- */
.toast { visibility: hidden; position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background-color: var(--strength-very-strong); color: white; padding: 16px; border-radius: 8px; z-index: 1; opacity: 0; transition: opacity 0.3s, visibility 0.3s; }
.toast.show { visibility: visible; opacity: 1; }