.result-hash {
            padding: 1.2rem;
            background-color: #f8f9fc;
            border-radius: 6px;
            border: 1px solid #e0e5ee;
            font-family: 'Courier New', Consolas, monospace;
            font-size: 0.9rem;
            word-break: break-all;
            margin: 0.8rem 0;
            position: relative;
        }
        .result-hash .copy-btn {
            position: absolute;
            top: -5px;
            right: 0px;
            background: transparent;
            border: none;
            color: var(--primary-color);
            cursor: pointer;
            font-size: 1rem;
        }
        .result-hash .copy-btn:hover {
            color: #0056b3;
        }
        .strength-meter {
            height: 8px;
            border-radius: 4px;
            background: #e9ecef;
            margin: 0.5rem 0 1rem 0;
            overflow: hidden;
        }
        .strength-meter .fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.3s ease;
        }
        .strength-label {
            font-weight: 600;
            font-size: 0.95rem;
        }
        .strength-label .badge {
            font-size: 0.8rem;
            padding: 0.35rem 0.7rem;
        }
        .algo-badge {
            display: inline-block;
            padding: 0.2rem 0.7rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            background: #e7f3ff;
            color: #0d6efd;
            margin-right: 0.3rem;
        }
        .algo-badge.argon2 { background: #e8f5e9; color: #2e7d32; }
        .algo-badge.bcrypt { background: #fff3e0; color: #e65100; }
        .algo-badge.default { background: #e3f2fd; color: #0d47a1; }
        .param-group {
            background: #f5f7fb;
            border-radius: 6px;
            padding: 0.8rem 1rem;
            margin: 0.5rem 0;
            border: 1px solid #eef2f7;
        }
        .param-group label {
            font-weight: 500;
            font-size: 0.85rem;
            color: #495057;
        }
        .param-group .info-box.warning {
            background: #fff8e1;
            border-left-color: #ffa000;
        }
        .info-box.success {
            background: #e8f5e9;
            border-left-color: #2e7d32;
        }
        .comparison-table th {
            background: #f1f4f9;
        }
        .comparison-table td, .comparison-table th {
            padding: 0.7rem 0.9rem;
            border: 1px solid #e5e9f0;
        }
        .privacy-badge {
            background: #e7f3ff;
            border: 1px solid #b8daff;
            color: #004085;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            margin: 0.8rem 0;
            font-size: 0.9rem;
        }
        .example-presets .code-block {
            background: #1e1e2e;
            color: #cdd6f4;
            padding: 1rem 1.2rem;
            border-radius: 6px;
            font-family: 'Courier New', Consolas, monospace;
            font-size: 0.85rem;
            overflow-x: auto;
            margin: 0.8rem 0;
            white-space: pre-wrap;
            word-break: break-all;
        }
        .code-block .kw { color: #cba6f7; }
        .code-block .fn { color: #89b4fa; }
        .code-block .str { color: #a6e3a1; }
        .code-block .cmt { color: #6c7086; }
        .code-block .num { color: #fab387; }
        .code-block .var { color: #f9e2af; }
        .section-title-custom {
            font-weight: 700;
            font-size: 1.5rem;
            margin: 2rem 0 1rem 0;
            color: #1a2634;
        }
        .subsection-title-custom {
            font-weight: 600;
            font-size: 1.2rem;
            margin: 1.8rem 0 0.8rem 0;
            color: #2c3e50;
        }
        @media (max-width: 768px) {
            .result-hash { font-size: 0.75rem; padding: 0.8rem; }
            .code-block { font-size: 0.7rem; padding: 0.8rem; }
        }