.panel-custom {
 border-color: #3498db;
 border-width: 2px;
 }
 
 .panel-custom > .panel-heading {
 background: linear-gradient(135deg, #3498db, #2980b9);
 border-color: #3498db;
 color: white;
 font-weight: 600;
 font-size: 18px;
 }
 
 .panel-body {
 padding: 25px;
 }
 
 .form-group {
 margin-bottom: 20px;
 }
 
 .checkbox label, .radio label {
 font-weight: normal;
 cursor: pointer;
 }
 
 .checkbox input[type="checkbox"], .radio input[type="radio"] {
 margin-right: 8px;
 }
 
 .slider-container {
 padding: 20px;
 background: #f8f9fa;
 border: 1px solid #e9ecef;
 }
 
 .slider-value {
 font-size: 22px;
 color: #3498db;
 font-weight: bold;
 }
 
 input[type="range"] {
 width: 100%;
 margin-top: 10px;
 }
 
 .current-password-box {
 font-family: 'Courier New', monospace;
 font-size: 20px;
 padding: 20px;
 background: #f8f9fa;
 border: 2px dashed #e4e4e4;
 margin: 20px 0;
 word-break: break-all;
 text-align: center;
 border-radius: 8px;
 font-weight: 600;
 color: #2c3e50;
 min-height: 80px;
 display: flex;
 align-items: center;
 justify-content: center;
 }
 
 .strength-meter {
 margin: 25px 0;
 padding: 15px;
 background: #f8f9fa;
 }
 
 .strength-label {
 display: flex;
 justify-content: space-between;
 margin-bottom: 10px;
 font-weight: 600;
 font-size: 16px;
 }
 
 .strength-bar {
 height: 12px;
 background: #ecf0f1;
 border-radius: 6px;
 overflow: hidden;
 margin-top: 10px;
 }
 
 .strength-fill {
 height: 100%;
 border-radius: 6px;
 transition: width 0.5s ease;
 }
 
 .weak .strength-fill { 
 width: 30%; 
 background: #e74c3c; 
 }
 .medium .strength-fill { 
 width: 60%; 
 background: #f39c12; 
 }
 .strong .strength-fill { 
 width: 90%; 
 background: #2ecc71; 
 }
 .very-strong .strength-fill { 
 width: 100%; 
 background: #27ae60; 
 }
 
 .password-list-item {
 display: flex;
 align-items: center;
 padding: 12px 15px;
 margin: 8px 0;
 background: white;
 border: 1px solid #ddd;
 border-radius: 6px;
 transition: all 0.3s ease;
 }
 
 .password-list-item:hover {
 background: #f8f9fa;
 border-color: #3498db;
 transform: translateX(5px);
 }
 
 .password-index {
 font-weight: bold;
 color: #3498db;
 min-width: 40px;
 font-size: 16px;
 }
 
 .password-text {
 font-family: 'Courier New', monospace;
 font-size: 16px;
 flex-grow: 1;
 word-break: break-all;
 padding: 0 15px;
 color: #2c3e50;
 }
 
 .btn-copy-sm {
 padding: 5px 12px;
 font-size: 13px;
 white-space: nowrap;
 min-width: 100px;
 }
 
 .stats-box {
 background: #f8f9fa;
 padding: 15px;
 border-radius: 8px;
 margin-top: 20px;
 border: 1px solid #e9ecef;
 }
 
 .stats-item {
 text-align: center;
 padding: 10px;
 }
 
 .stats-value {
 font-size: 20px;
 font-weight: bold;
 color: #3498db;
 display: block;
 }
 
 .stats-label {
 font-size: 13px;
 color: #7f8c8d;
 text-transform: uppercase;
 letter-spacing: 1px;
 }
 
 .notification {
 position: fixed;
 top: 20px;
 right: 20px;
 background: #2ecc71;
 color: white;
 padding: 15px 25px;
 border-radius: 6px;
 box-shadow: 0 5px 15px rgba(0,0,0,0.2);
 z-index: 9999;
 opacity: 0;
 transform: translateX(120px);
 transition: all 0.4s ease;
 font-weight: 500;
 max-width: 350px;
 }
 
 .notification.show {
 opacity: 1;
 transform: translateX(0);
 }
 
 .notification.error {
 background: #e74c3c;
 }
 
 .notification.warning {
 background: #f39c12;
 }
 
 .notification.info {
 background: #3498db;
 }
 
 @keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.02); }
 100% { transform: scale(1); }
 }
 
 .generating {
 animation: pulse 0.5s ease;
 }
 
 .btn i {
 margin-right: 8px;
 }
 
 .checkbox-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 gap: 10px;
 }
 
 @media (max-width: 768px) {
 .panel-body {
 padding: 15px;
 }
 
 .checkbox-grid {
 grid-template-columns: 1fr;
 }
 
 .password-list-item {
 flex-direction: column;
 align-items: flex-start;
 }
 
 .password-text {
 margin: 10px 0;
 padding: 0;
 width: 100%;
 }
 
 .btn-copy-sm {
 align-self: flex-end;
 }
 }