body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App-header{background:var(--background-gradient);color:#fff;padding:20px;text-align:center;box-shadow:0 4px 15px #0000001a}.main-content{max-width:1800px;margin:0 auto;padding:20px 10px}.section{background:var(--card-bg);border-radius:16px;padding:20px;box-shadow:0 4px 20px #00000014;border:1px solid var(--border);margin-bottom:30px}.simulator-header{text-align:center;margin-bottom:30px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:5px;border-radius:16px}.encryption-explanation h4{font-size:18px;font-weight:600;color:#0b2447;margin-bottom:3px;padding-bottom:4px}.info-box{background:#f0f9ff;padding:12px 20px;border-radius:8px;margin-bottom:20px;border-left:4px solid var(--primary-blue)}.action-section{text-align:center;margin:0;padding:20px;background:#fff;border-radius:8px;border:1px solid var(--border);box-shadow:0 2px 8px #0000000d}.encrypt-actions{display:flex;align-items:center;gap:15px;margin:20px 0}.encrypt-actions .status-note{margin-top:0}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-out}.modal-content{background:#fff;border-radius:12px;padding:25px;max-width:500px;width:90%;box-shadow:0 10px 25px #0003;animation:slideUp .3s ease-out}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--light-blue);padding-bottom:15px;margin-bottom:15px}.modal-header h3{margin:0;color:var(--dark-blue)}.close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-light);transition:color .2s;padding:0;margin:0;display:flex;align-items:center;justify-content:center;line-height:1}.close-btn:hover{color:var(--error);transform:none;box-shadow:none}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.action-section{text-align:center;margin:30px 0;padding:20px;background:#f8fafc;border-radius:8px}.challenge-section h5{margin:0 0 15px;color:#2c3e50;font-size:1.2em}.challenge-actions{display:flex;justify-content:center;margin-top:12px}:root{--primary-blue: #2563eb;--dark-blue: #1e40af;--light-blue: #dbeafe;--background-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--card-bg: #ffffff;--section-bg: #f8fafc;--text-dark: #1e293b;--text-light: #64748b;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--border: #e2e8f0}*{box-sizing:border-box}body{margin:0;background:var(--section-bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;color:var(--text-dark);line-height:1.6}.App{min-height:100vh;background:var(--section-bg)}.App-header{background:var(--background-gradient);color:#fff;padding:10px 20px;text-align:center;box-shadow:0 4px 15px #0000001a}.header-content h1{margin:0 0 15px;font-size:2.8rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.1)}.header-content p{font-size:1.2rem;opacity:.95;font-weight:300;max-width:600px;margin:0 auto}.navigation{display:flex;justify-content:center;gap:10px;padding:20px;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 2px 10px #0000000d}.nav-btn{padding:12px 24px;border:2px solid var(--primary-blue);background:#fff;color:var(--primary-blue);border-radius:25px;cursor:pointer;font-size:16px;font-weight:600;transition:all .3s ease;display:flex;align-items:center;gap:8px}.nav-btn:hover{background:var(--light-blue);transform:translateY(-2px);box-shadow:0 4px 12px #2563eb33}.nav-btn.active{background:var(--primary-blue);color:#fff;box-shadow:0 4px 12px #2563eb4d}.section{background:var(--card-bg);border-radius:16px;padding:30px;box-shadow:0 4px 20px #00000014;border:1px solid var(--border);margin-bottom:30px}.section h3{color:var(--text-dark);margin-top:0;margin-bottom:25px;font-size:1.5rem;font-weight:700;display:flex;align-items:center;gap:10px;padding-bottom:15px;border-bottom:2px solid var(--light-blue)}.database-simulator{background:var(--card-bg)}.record-form{background:var(--light-blue);padding:25px;border-radius:12px;margin-bottom:25px;border:1px solid var(--border)}.record-form h4{margin-top:0;color:var(--dark-blue);display:flex;align-items:center;gap:8px}.record-form input{display:block;margin:10px 0;padding:12px 16px;width:100%;max-width:300px;border:2px solid var(--border);border-radius:8px;font-size:14px;transition:all .3s ease}.record-form input:focus{outline:none;border-color:var(--primary-blue);box-shadow:0 0 0 3px #2563eb1a}.form-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}.backup-section{background:#f0fdf4;padding:20px;border-radius:12px;border:1px solid #bbf7d0;margin:20px 0}.backup-section button{margin:5px}button{padding:12px 24px;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px}.primary-btn:hover{background:var(--dark-blue);transform:translateY(-2px);box-shadow:0 4px 12px #2563eb4d}.secondary-btn{background:#f1f5f9;color:var(--text-dark);border:1px solid var(--border)}.secondary-btn:hover{background:#e2e8f0;transform:translateY(-2px)}.records-table{margin-top:25px;overflow-x:auto;border-radius:12px;border:1px solid var(--border);box-shadow:0 2px 8px #0000000d}table{width:100%;border-collapse:collapse;background:#fff}th,td{border:1px solid var(--border);padding:15px 12px;text-align:left;font-size:14px}th{background:#f8fafc;font-weight:600;color:var(--text-dark);position:sticky;top:0}tr:nth-child(2n){background:#f8fafc}tr:hover{background:#f1f5f9}.encryption-demo .demo-section{background:#f0f9ff;padding:25px;border-radius:12px;border:1px solid #bae6fd;margin-bottom:25px}.demo-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}.results{display:grid;gap:20px;margin:25px 0}.result-box{background:#fff;padding:20px;border-radius:12px;border:1px solid var(--border);box-shadow:0 2px 8px #0000000d}.result-box label{display:block;font-weight:600;margin-bottom:10px;color:var(--text-dark);font-size:14px}.ciphertext{background:#fef3c7;padding:15px;border-radius:8px;word-break:break-all;font-family:Courier New,monospace;font-size:12px;border:1px solid #fcd34d;color:#92400e}.plaintext{background:#d1fae5;padding:15px;border-radius:8px;border:1px solid #a7f3d0;color:#065f46;font-weight:500}.key-management .key-info{background:#f8fafc;padding:20px;border-radius:12px;border:1px solid var(--border);margin-bottom:20px}.key-info p{margin:10px 0;padding:10px;background:#fff;border-radius:8px;border-left:4px solid var(--primary-blue)}.status{padding:15px;margin:20px 0;border-radius:8px;font-weight:500;display:flex;align-items:center;gap:10px}.status.success{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0}.status.error{background:#fee2e2;color:#dc2626;border:1px solid #fca5a5}.key-notes{background:#f0f9ff;padding:25px;border-radius:12px;border:1px solid #bae6fd;margin-top:25px}.key-notes h4{color:var(--dark-blue);margin-top:0;display:flex;align-items:center;gap:10px}.key-notes ul{margin:15px 0;padding-left:20px}.key-notes li{margin:12px 0;line-height:1.6}.app-footer{background:var(--text-dark);color:#fff;padding:40px 20px;margin-top:50px}.footer-content{max-width:1200px;margin:0 auto}.footer-content h3{text-align:center;margin-bottom:30px;font-size:1.8rem}.learning-objectives{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.objective-card{background:#ffffff1a;padding:20px;border-radius:12px;display:flex;align-items:flex-start;gap:15px;transition:transform .3s ease}.objective-card:hover{transform:translateY(-5px);background:#ffffff26}.objective-card .emoji{font-size:2rem;flex-shrink:0}.objective-card strong{display:block;margin-bottom:5px;font-size:1.1rem}.objective-card p{margin:0;opacity:.9;font-size:.9rem}@media (max-width: 768px){.header-content h1{font-size:2rem}.navigation{flex-direction:column;align-items:center}.nav-btn{width:100%;max-width:300px;justify-content:center}.learning-objectives{grid-template-columns:1fr}.section{padding:20px}.form-buttons,.demo-buttons{flex-direction:column}button{width:100%;justify-content:center}}.section{animation:fadeInUp .6s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.dummy-data-section{background:#f0f9ff;padding:30px;border-radius:12px;border:1px solid #bae6fd;margin-bottom:25px}.dummy-data-section h4{color:var(--dark-blue);margin-top:0;display:flex;align-items:center;gap:10px}.info-box{background:#fff;padding:20px;border-radius:8px;margin-bottom:20px;border-left:4px solid var(--primary-blue)}.dummy-preview{background:#fff;padding:20px;border-radius:8px;margin:20px 0;border:1px solid var(--border)}.dummy-preview h5{margin-top:0;color:var(--text-dark)}.preview-note{font-size:.9em;color:var(--text-light);font-style:italic;margin-top:10px}.next-btn{margin-top:20px;padding:15px 30px;font-size:16px}.navigation-controls{margin-bottom:20px}.encrypted-field{font-family:Courier New,monospace;font-size:11px;background:#fef3c7;color:#92400e;word-break:break-all}.encryption-status{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600}.encryption-status.encrypted{background:#d1fae5;color:#065f46}.encryption-status.plaintext{background:#fef3c7;color:#92400e}.records-table h4{display:flex;align-items:center;gap:10px}.record-form input[type=password]{font-family:monospace}.simulator-header{text-align:center;margin-bottom:30px;color:#fff;padding:5px;border-radius:16px}.simulator-header h3{margin:0 0 10px;font-size:2rem}.simulator-header p{margin:0;opacity:.9;font-size:1.1rem}.progress-steps{display:flex;justify-content:space-between;margin-bottom:40px;gap:10px}.step{flex:1;display:flex;align-items:center;padding:20px;background:#fff;border-radius:12px;border:2px solid #e2e8f0;cursor:pointer;transition:all .3s ease}.step.active{border-color:var(--primary-blue);background:var(--light-blue)}.step.completed{border-color:var(--success);background:#f0fdf4}.step-number{width:40px;height:40px;border-radius:50%;background:#e2e8f0;display:flex;align-items:center;justify-content:center;font-weight:700;margin-right:15px;flex-shrink:0}.step.active .step-number{background:var(--primary-blue);color:#fff}.step.completed .step-number{background:var(--success);color:#fff}.step-title{font-weight:600;margin-bottom:5px}.step-description{font-size:.9em;color:var(--text-light)}.step-content h4{color:var(--text-dark);margin-top:0;margin-bottom:20px;font-size:1.4rem}.action-section{text-align:center;margin:30px 0}.status-note{margin-top:15px;padding:10px;border-radius:8px;background:#f8fafc;font-weight:500}.encryption-visual{margin:30px 0}.visual-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:20px}.visual-item{text-align:center;padding:20px;background:#fff;border-radius:8px;border:2px solid var(--border)}.visual-label{font-weight:600;margin-bottom:10px;color:var(--text-dark)}.visual-data{padding:10px;border-radius:6px;font-family:Courier New,monospace;font-size:12px}.visual-data.plaintext{background:#d1fae5;color:#065f46}.visual-data.encrypted{background:#fef3c7;color:#92400e}.tde-visual{text-align:center;margin:30px 0}.database-file,.application{display:inline-block;padding:20px;background:#fff;border-radius:12px;border:2px solid var(--border);margin:0 20px}.file-icon,.app-icon{font-size:2rem;margin-bottom:10px}.file-status,.app-status{font-size:.9em;color:var(--text-light);margin-top:5px}.file-status.encrypted{color:var(--success);font-weight:600}.encryption-flow{display:inline-block;vertical-align:middle}.flow-arrow{font-size:1.5rem;margin:5px 0}.flow-text{font-weight:600;color:var(--primary-blue)}.challenges-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:30px 0}.challenge-card{background:#fff;padding:25px;border-radius:12px;border:2px solid var(--border);text-align:center}.challenge-card h5{margin-top:0;color:var(--text-dark)}.result{margin-top:15px;padding:10px;border-radius:6px;font-weight:500}.result.success{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0}.result.error{background:#fee2e2;color:#dc2626;border:1px solid #fca5a5}.security-comparison{margin-top:30px}.risk-high{background:#fee2e2;color:#dc2626;font-weight:600}.risk-medium{background:#fef3c7;color:#92400e;font-weight:600}.risk-low{background:#d1fae5;color:#065f46;font-weight:600}.backup-actions{display:flex;gap:15px;justify-content:center;margin:30px 0;flex-wrap:wrap}.backup-info{background:#f8fafc;padding:20px;border-radius:8px;margin-top:20px}.backup-details p{margin:10px 0}.status-success{color:var(--success);font-weight:600}.status-error{color:var(--error);font-weight:600}.status-warning{color:var(--warning);font-weight:600}.operations-panel{background:#fff;padding:30px;border-radius:16px;box-shadow:0 4px 20px #00000014}.current-database{margin-top:25px}.security-warning{background:#fef3c7;color:#92400e;padding:15px;border-radius:8px;border:1px solid #fcd34d;font-weight:600;text-align:center;margin:20px 0}.navigation-controls{display:flex;justify-content:space-between;align-items:center;margin-top:30px;padding:20px;background:#fff;border-radius:12px}.step-indicator{font-weight:600;color:var(--text-dark)}@media (max-width: 768px){.progress-steps{flex-direction:column}.step{margin-bottom:10px}.challenges-grid{grid-template-columns:1fr}.backup-actions{flex-direction:column}.navigation-controls{flex-direction:column;gap:15px}.visual-grid{grid-template-columns:1fr}}.step-content{background:#fff;padding:20px;border-radius:16px;margin-bottom:30px;box-shadow:0 4px 20px #00000014}.step-content h4{color:var(--text-dark);margin-top:0;margin-bottom:20px;font-size:1.4rem;border-bottom:2px solid var(--light-blue);padding-bottom:10px}.info-box{background:#f0f9ff;padding:20px;border-radius:8px;margin-bottom:25px;border-left:4px solid var(--primary-blue)}.info-box p{margin:10px 0}.action-section{text-align:center;margin:0;padding:20px;background:#f8fafc;border-radius:8px}.status-note{margin-top:15px;padding:10px;border-radius:8px;background:#fff;font-weight:500}.data-preview{margin-top:25px}.data-preview h5{color:var(--text-dark);margin-bottom:15px}.security-warning{background:#fef3c7;color:#92400e;padding:15px;border-radius:8px;border:1px solid #fcd34d;font-weight:500;text-align:center;margin:20px 0}.learning-tip{background:#f0fdf4;padding:20px;border-radius:8px;border:1px solid #bbf7d0;margin:25px 0}.learning-tip h5{color:#065f46;margin-top:0}.step-navigation{display:flex;justify-content:space-between;align-items:center;margin-top:30px;padding-top:20px;border-top:2px solid var(--border)}.next-btn{padding:12px 24px;font-size:16px}.plaintext-field{background:#f1f5f9;padding:2px 4px;border-radius:3px;font-family:monospace}.encrypted-field{font-family:Courier New,monospace;font-size:11px;background:#fef3c7;color:#92400e;word-break:break-all;padding:2px 4px;border-radius:3px}.status-badge{padding:4px 8px;border-radius:4px;font-size:11px;font-weight:600}.status-badge.plaintext{background:#fef3c7;color:#92400e}.status-badge.encrypted{background:#d1fae5;color:#065f46}.demo-section{background:#f8fafc;padding:20px;border-radius:8px;margin:20px 0}.demo-results{margin-top:15px}.result-item{margin:10px 0}.result-item label{font-weight:600;display:block;margin-bottom:5px}.plaintext-demo{background:#d1fae5;padding:10px;border-radius:6px;border:1px solid #a7f3d0;font-family:monospace}.ciphertext-demo{background:#fef3c7;padding:10px;border-radius:6px;border:1px solid #fcd34d;font-family:Courier New,monospace;word-break:break-all}.record-form-section{margin:25px 0}.record-form{background:#fff;padding:20px;border-radius:8px;border:1px solid var(--border)}.record-form input{display:block;margin:10px 0;padding:12px 16px;width:100%;max-width:300px;border:2px solid var(--border);border-radius:8px;font-size:14px}.form-buttons{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}.tde-explanation{margin:25px 0}.feature-comparison{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:20px}.feature-card{background:#fff;padding:20px;border-radius:8px;border:2px solid var(--border)}.feature-card h5{margin-top:0;color:var(--text-dark)}.feature-card ul{margin:15px 0;padding-left:20px}.feature-card li{margin:8px 0}.tde-toggle{padding:15px 30px;border:none;border-radius:25px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.tde-toggle.enabled{background:var(--success);color:#fff}.tde-toggle.disabled{background:var(--error);color:#fff}.tde-visualization{margin:30px 0}.tde-flow{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:20px;margin-top:20px}.flow-item{text-align:center;padding:20px;background:#fff;border-radius:12px;border:2px solid var(--border);min-width:150px}.flow-icon{font-size:2rem;margin-bottom:10px}.flow-label{font-weight:600;margin-bottom:5px}.flow-status{font-size:.9em;color:var(--text-light)}.flow-status.encrypted{color:var(--success);font-weight:600}.flow-arrow{font-size:1.5rem;color:var(--primary-blue)}.protection-levels{margin:30px 0}.protection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:20px}.protection-item{text-align:center;padding:20px;background:#fff;border-radius:8px;border:2px solid var(--border)}.protection-icon{font-size:2rem;margin-bottom:10px}.protection-title{font-weight:600;margin-bottom:10px}.protection-desc{font-size:.9em;color:var(--text-light)}.challenge-section{background:#f8fafc;padding:25px;border-radius:8px;margin:20px 0;border:1px solid var(--border)}.records-challenges{display:grid;gap:15px;margin-top:15px}.record-challenge{background:#fff;padding:15px;border-radius:8px;border:1px solid var(--border)}.record-info{margin-bottom:10px}.encrypted-preview{font-family:Courier New,monospace;font-size:12px;color:var(--text-light);margin-top:5px}.challenge-actions{display:flex;gap:10px;flex-wrap:wrap}.small-btn{padding:8px 16px;font-size:12px}.attack-result{margin-top:10px;padding:10px;border-radius:6px;font-weight:500}.attack-result.success{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0}.attack-result.error{background:#fee2e2;color:#dc2626;border:1px solid #fca5a5}.attempt-count{font-size:.9em;color:var(--text-light);margin-top:5px}.security-metrics{margin:30px 0}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-top:15px}.metric-card{background:#fff;padding:20px;border-radius:8px;border:2px solid var(--border);text-align:center}.metric-value{font-size:2rem;font-weight:700;color:var(--primary-blue);margin-bottom:5px}.metric-label{font-size:.9em;color:var(--text-light)}.protection-summary{margin:25px 0}.protection-list{background:#fff;padding:20px;border-radius:8px;border:1px solid var(--border)}.protection-item{display:flex;align-items:flex-start;gap:15px;margin:15px 0}.protection-icon{flex-shrink:0;font-size:1.2em}.protection-text{flex:1}.status-overview{background:#f8fafc;padding:20px;border-radius:8px;margin:20px 0}.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-top:15px}.status-item{display:flex;justify-content:space-between;padding:10px;background:#fff;border-radius:6px}.status-label{font-weight:600}.status-value{color:var(--primary-blue);font-weight:600}.status-success{color:var(--success)}.status-error{color:var(--error)}.status-warning{color:var(--warning)}.backup-actions{margin:25px 0}.action-buttons{display:flex;gap:15px;flex-wrap:wrap}.current-backup{background:#f0f9ff;padding:20px;border-radius:8px;margin:20px 0;border:1px solid #bae6fd}.backup-details p{margin:8px 0}.backup-test-actions{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}.backup-history{margin:25px 0}.history-list{display:grid;gap:10px;margin-top:15px}.history-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#fff;border-radius:8px;border:1px solid var(--border)}.history-time{font-weight:600}.history-stats{font-size:.9em;color:var(--text-light);margin-top:5px}.security-guidelines{margin:25px 0}.guidelines-list{background:#fff;padding:20px;border-radius:8px;border:1px solid var(--border)}.guideline{display:flex;align-items:flex-start;gap:15px;margin:12px 0}.guideline-icon{flex-shrink:0}.guideline-text{flex:1}.completion-section{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:30px;border-radius:12px;text-align:center;margin:30px 0}.completion-section h5{margin-top:0;font-size:1.5rem}.achievements{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:20px}.achievement{background:#fff3;padding:10px;border-radius:6px;font-weight:500}@media (max-width: 768px){.step-content{padding:20px}.feature-comparison,.protection-grid,.metrics-grid{grid-template-columns:1fr}.tde-flow,.form-buttons,.challenge-actions,.backup-test-actions{flex-direction:column}.step-navigation{flex-direction:column;gap:15px}.achievements{grid-template-columns:1fr}}.column-selection-section{background:#f8fafc;padding:25px;border-radius:12px;margin:25px 0;border:1px solid var(--border)}.column-selection-section h5{margin-top:0;margin-bottom:20px;color:var(--text-dark)}.column-selection{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:20px}.column-option{background:#fff;padding:15px;border-radius:8px;border:2px solid var(--border);transition:all .3s ease}.column-option:hover{border-color:var(--primary-blue);background:#f0f9ff}.column-checkbox{display:flex;align-items:flex-start;gap:15px;cursor:pointer;margin:0}.column-checkbox input[type=checkbox]{display:none}.checkmark{width:20px;height:20px;border:2px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:all .3s ease}.column-checkbox input[type=checkbox]:checked+.checkmark{background:var(--primary-blue);border-color:var(--primary-blue)}.column-checkbox input[type=checkbox]:checked+.checkmark:after{content:"✓";color:#fff;font-weight:700}.column-info{flex:1}.column-label{font-weight:600;color:var(--text-dark);margin-bottom:5px}.column-description{font-size:.9em;color:var(--text-light)}.selection-summary{padding:15px;background:#fff;border-radius:8px;border-left:4px solid var(--primary-blue)}.warning-text{color:var(--error);margin-left:15px;font-weight:500}.encryption-summary{background:#f0fdf4;padding:15px;border-radius:8px;margin-top:15px;border:1px solid #bbf7d0}.encryption-summary ul{margin:10px 0 0;padding-left:20px}.encryption-summary li{margin:5px 0;color:#065f46}th{position:relative}@media (max-width: 768px){.column-selection{grid-template-columns:1fr}.column-checkbox{align-items:flex-start}}.encryption-status-bar{display:flex;gap:20px;margin-bottom:15px;padding:10px;background:#f8f9fa;border-radius:8px}.status-item{display:flex;align-items:center;gap:8px}.status-indicator{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:700}.status-indicator.tde{background:#e3f2fd;color:#1976d2}.status-indicator.column{background:#f3e5f5;color:#7b1fa2}.tde-encrypted{background-color:#e8f5e8!important;color:#2e7d32;font-family:Courier New,monospace}.column-encrypted{background-color:#fff3e0!important;color:#ef6c00}.plaintext{background-color:#ffebee!important;color:#c62828}.status-badge.tde-encrypted{background:#4caf50;color:#fff}.status-badge.column-encrypted{background:#ff9800;color:#fff}.status-badge.plaintext{background:#f44336;color:#fff}.encryption-legend{margin-top:15px;padding:12px;background:#f8f9fa;border-radius:8px}.legend-items{display:flex;gap:20px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:8px}.legend-color{width:16px;height:16px;border-radius:4px}.legend-color.tde-encrypted{background:#e8f5e8;border:1px solid #2e7d32}.legend-color.column-encrypted{background:#fff3e0;border:1px solid #ef6c00}.legend-color.plaintext{background:#ffebee;border:1px solid #c62828}.protection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-top:15px}.protection-item{padding:15px;border:2px solid #e0e0e0;border-radius:8px;text-align:center}.protection-status{margin-top:10px;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:700}.risk-high{background:#ffebee;color:#c62828}.risk-medium{background:#fff3e0;color:#ef6c00}.risk-low{background:#e8f5e8;color:#2e7d32}.security-note{margin-top:15px;padding:12px;background:#e8f5e8;border:1px solid #4caf50;border-radius:8px;color:#2e7d32}.tde-flow{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px 0;flex-wrap:wrap}.flow-item{text-align:center;padding:15px;border:2px solid #e0e0e0;border-radius:8px;min-width:120px}.flow-icon{font-size:24px;margin-bottom:8px}.flow-label{font-weight:700;margin-bottom:5px}.flow-status{font-size:12px;color:#666}.flow-status.encrypted{color:#4caf50;font-weight:700}.flow-status.plaintext{color:#f44336;font-weight:700}.flow-arrow{font-size:18px;color:#666}Encryption Demo Section .encryption-demo-section{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:20px;margin-bottom:25px}.encryption-demo-section h5{margin:0 0 15px;color:#2c3e50;font-size:1.1em;font-weight:600}.demo-input{display:flex;gap:12px;margin-bottom:20px;align-items:center}.demo-input input{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;background:#fff;transition:border-color .2s ease}.demo-input input:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e21a}.demo-input .primary-btn{white-space:nowrap;padding:10px 16px;background:#4a90e2;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:background-color .2s ease}.demo-input .primary-btn:hover{background:#357abd}.results{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px}.result-box{background:#fff;border:1px solid #e9ecef;border-radius:6px;padding:15px}.result-box label{display:block;font-weight:600;font-size:12px;text-transform:uppercase;color:#6c757d;margin-bottom:8px;letter-spacing:.5px}.ciphertext,.plaintext{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;padding:10px;background:#f8f9fa;border-radius:4px;border-left:3px solid;word-break:break-all;min-height:20px}.ciphertext{border-left-color:#e74c3c;background:#fff5f5;color:#c53030}.plaintext{border-left-color:#27ae60;background:#f0fff4;color:#22543d}.explanation{background:#fff;border:1px solid #e9ecef;border-radius:6px;padding:15px}.explanation h4{margin:0 0 12px;color:#2c3e50;font-size:1em;font-weight:600;text-transform:lowercase}.explanation h4:first-letter{text-transform:uppercase}.explanation p{margin:8px 0;color:#6c757d;font-size:14px;line-height:1.4}.explanation p:last-child{margin-bottom:0}@media (max-width: 768px){.results{grid-template-columns:1fr;gap:12px}.demo-input{flex-direction:column;align-items:stretch}.demo-input .primary-btn{width:100%}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.results,.explanation{animation:fadeIn .3s ease-out}.challenge-section{background:#f8f9fa;border:2px solid #e9ecef;border-radius:12px;padding:25px;margin-bottom:25px}.challenge-section h3,.challenge-section h5{margin:0 0 15px;color:#2c3e50;font-size:1.2em}.challenge-section p{margin:0 0 20px;color:#6c757d}.new-record-form{background:#fff;padding:20px;border-radius:8px;border:1px solid #dee2e6}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-weight:600;color:#495057}.form-group input{width:100%;padding:10px 12px;border:2px solid #e9ecef;border-radius:6px;font-size:14px;transition:border-color .3s ease}.form-group input:focus{outline:none;border-color:#4a90e2}.form-actions{display:flex;gap:10px;margin-top:20px}.records-challenges{display:flex;flex-direction:column;gap:15px}.record-challenge{background:#fff;padding:20px;border-radius:8px;border:2px solid #e9ecef}.record-info strong{display:block;margin-bottom:10px;font-size:1.1em;color:#2c3e50}.encrypted-preview{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;color:#6c757d;margin-bottom:15px}.record-status{color:#e74c3c;font-weight:600;margin-top:5px}.challenge-actions{display:flex;gap:10px;margin-bottom:15px}.primary-btn{background:#4a90e2;color:#fff;border:none;padding:12px 20px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s ease}.primary-btn:hover{background:#357abd;transform:translateY(-2px)}.danger-btn{background:#e74c3c;color:#fff;border:none;padding:12px 20px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s ease}.danger-btn:hover{background:#c0392b;transform:translateY(-2px)}.success-btn{background:#27ae60;color:#fff;border:none;padding:12px 20px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s ease}.success-btn:hover{background:#219653;transform:translateY(-2px)}.secondary-btn{background:#6c757d;color:#fff;border:none;padding:12px 20px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s ease}.secondary-btn:hover{background:#5a6268}.attack-result{padding:15px;border-radius:6px;margin-top:10px}.attack-result.success{background:#d4edda;border:1px solid #c3e6cb;color:#155724}.attack-result.error{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.attempt-count{font-size:12px;color:#856404;margin-top:8px;font-weight:600}.decrypted-data{background:#fff;padding:12px;border-radius:4px;margin-top:10px;border:1px solid #28a745}.decrypted-data h6{margin:0 0 8px;color:#155724}.learning-summary{background:#e8f5e8;border:2px solid #27ae60;border-radius:12px;padding:25px;margin-bottom:25px}.learning-points{display:flex;flex-direction:column;gap:15px}.learning-point{display:flex;align-items:flex-start;gap:15px}.point-icon{font-size:1.5em;flex-shrink:0}.point-content strong{display:block;margin-bottom:5px;color:#2c3e50}.point-content p{margin:0;color:#6c757d;font-size:14px}.security-status{background:#fff;border:2px solid #e9ecef;border-radius:12px;padding:25px;margin-bottom:25px}.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px}.status-item{text-align:center;padding:20px;background:#f8f9fa;border-radius:8px}.status-value{font-size:2em;font-weight:700;color:#4a90e2;margin-bottom:5px}.status-label{font-size:12px;color:#6c757d;text-transform:uppercase;letter-spacing:.5px}.success-note{background:#d4edda;color:#155724;padding:12px;border-radius:6px;margin-top:15px;border:1px solid #c3e6cb}.warning-note{background:#fff3cd;color:#856404;padding:12px;border-radius:6px;margin-top:15px;border:1px solid #ffeaa7}@media (max-width: 768px){.form-actions,.challenge-actions{flex-direction:column}.status-grid{grid-template-columns:1fr}}.tde-layout-grid{display:grid;grid-template-columns:1.2fr 1.8fr;gap:20px;align-items:stretch;margin-bottom:20px}@media (max-width: 900px){.tde-layout-grid{grid-template-columns:1fr}}.tde-left-panel{display:flex;flex-direction:column;gap:15px}.tde-right-panel{display:flex;flex-direction:column}.db-type-section{padding:15px;background:#fff;border-radius:8px;border:1px solid var(--border);box-shadow:0 2px 8px #0000000d}.db-type-selector{display:flex;gap:10px;margin:10px 0}.db-type-btn{flex:1;padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;font-size:14px;transition:all .3s ease}.db-type-btn:hover{border-color:#1976d2;background:#f0f7ff}.db-type-btn.active{border-color:#1976d2;background:#1976d2;color:#fff}.db-description{margin:10px 0;font-size:14px;color:#666;line-height:1.4}.db-examples{font-size:14px;color:#666}.tde-implementation-section{margin:20px 0;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}.implementation-details{padding:20px;background:#fff}.implementation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:20px}.impl-feature{padding:15px;background:#f8f9fa;border-radius:8px}.impl-feature h6{margin:0 0 8px;color:#1976d2;font-size:14px}.impl-feature p{margin:0;font-size:14px;color:#333}.impl-feature ul{margin:0;padding-left:15px}.impl-feature li{font-size:13px;color:#666;margin-bottom:2px}.key-management-flow{margin:25px 0}.key-management-flow h6{color:#1976d2;margin-bottom:15px}.key-flow-steps{display:flex;flex-direction:column;gap:10px}.key-step{display:flex;align-items:flex-start;gap:15px;padding:12px;background:#f0f7ff;border-radius:8px;border-left:4px solid #1976d2}.step-number{background:#1976d2;color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}.step-description{font-size:14px;color:#333;line-height:1.4}.tde-features{margin:20px 0}.tde-features h6{color:#1976d2;margin-bottom:15px}.features-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}.feature-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f8f9fa;border-radius:4px;font-size:14px}.feature-icon{color:#4caf50}.db-architecture{margin-top:25px;padding:20px;background:#f8f9fa;border-radius:8px}.db-architecture h6{color:#1976d2;margin-bottom:15px}.architecture-diagram{font-family:Courier New,monospace}.arch-layer{padding:15px;margin:10px 0;background:#fff;border:2px solid #e0e0e0;border-radius:8px;transition:all .3s ease}.arch-layer.encrypted{border-color:#4caf50;background:#e8f5e8}.layer-title{font-weight:700;color:#1976d2;margin-bottom:8px;font-size:14px}.layer-content{font-size:13px;color:#333}.sub-item{margin-left:15px;font-size:12px;color:#666;margin-top:4px}.arch-arrow{text-align:center;font-size:18px;color:#666;margin:5px 0}@media (max-width: 768px){.db-type-selector{flex-direction:column}.implementation-grid,.features-list{grid-template-columns:1fr}.key-step{flex-direction:column;gap:8px}}.documents-container{display:flex;flex-direction:column;gap:15px;max-height:400px;overflow-y:auto;padding:10px;border:1px solid #e0e0e0;border-radius:8px;background:#f8f9fa}.document-card{background:#fff;border:1px solid #ddd;border-radius:6px;overflow:hidden;box-shadow:0 2px 4px #0000001a}.doc-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f5f5f5;border-bottom:1px solid #ddd}.doc-id{font-family:Courier New,monospace;font-size:12px;font-weight:700;color:#333}.doc-status{padding:4px 8px;border-radius:12px;font-size:11px;font-weight:700;color:#fff}.doc-status.tde-encrypted{background:#4caf50}.doc-status.column-encrypted{background:#ff9800}.doc-status.plaintext{background:#f44336}.doc-content{padding:15px}.doc-content pre{margin:0;font-size:12px;line-height:1.4;color:#333;background:#f8f9fa;padding:10px;border-radius:4px;border:1px solid #e0e0e0;overflow-x:auto}.relational-view table{width:100%;border-collapse:collapse;margin-top:10px}.relational-view th{background:#1976d2;color:#fff;padding:12px 8px;text-align:left;font-size:14px}.relational-view td{padding:10px 8px;border-bottom:1px solid #ddd;font-size:13px}.relational-view tr:hover{background:#f5f5f5}@media (max-width: 768px){.documents-container{max-height:300px}.doc-header{flex-direction:column;gap:5px;align-items:flex-start}.relational-view{overflow-x:auto}.relational-view table{min-width:600px}}.nonrelational-view{margin-top:15px}.documents-container{display:flex;flex-direction:column;gap:15px;max-height:1000px;overflow-y:auto;padding:15px;border:1px solid var(--border);border-radius:8px;background:#f8fafc}.document-card{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #00000014;transition:all .3s ease}.document-card:hover{box-shadow:0 4px 12px #0000001f;transform:translateY(-2px)}.doc-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f8fafc;border-bottom:1px solid var(--border)}.doc-id{font-family:Courier New,monospace;font-size:13px;font-weight:600;color:var(--text-dark)}.doc-status{padding:4px 10px;border-radius:16px;font-size:11px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px}.doc-status.tde-encrypted{background:var(--success)}.doc-status.column-encrypted{background:var(--warning)}.doc-status.plaintext{background:var(--error)}.doc-content{padding:16px}.doc-content pre{margin:0;font-size:12px;line-height:1.5;color:var(--text-dark);background:#fff;padding:12px;border-radius:6px;border:1px solid var(--border);overflow-x:auto;max-height:200px;overflow-y:auto}.card{background:#fff;border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 2px 4px #0000001a;border:1px solid #e1e5e9}.section-description{color:#666;margin-bottom:15px;font-size:14px}.success-message{background:#d4edda;border:1px solid #c3e6cb;border-radius:4px;padding:15px;margin-top:15px;color:#155724}.success-message ul{margin:10px 0 0;padding-left:20px}.success-message li{margin-bottom:5px}.status-message{color:#28a745;margin-top:10px;font-weight:500}.form-row input{flex:1}.table-container{overflow-x:auto;margin:15px 0}.security-warning{background:#fff3cd;border:1px solid #ffeaa7;border-radius:4px;padding:12px;color:#856404;margin-top:15px}.tde-explanation{max-width:1200px;margin:0 auto;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6}.explanation-header{text-align:center;margin-bottom:30px;padding:30px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:15px}.explanation-header h1{margin:0 0 10px;font-size:2.5em}.explanation-header p{margin:0;opacity:.9;font-size:1.2em}.tabs{display:flex;justify-content:center;margin-bottom:30px;flex-wrap:wrap;gap:10px}.tabs button{padding:12px 20px;border:2px solid #667eea;background:#fff;color:#667eea;border-radius:25px;cursor:pointer;font-weight:600;transition:all .3s ease}.tabs button:hover{background:#667eea;color:#fff;transform:translateY(-2px)}.tabs button.active{background:#667eea;color:#fff}.content{background:#fff;border-radius:15px;padding:30px;box-shadow:0 5px 15px #0000001a}.section h2{color:#2d3748;border-bottom:3px solid #667eea;padding-bottom:10px;margin-bottom:20px}.analogy{background:#f7fafc;padding:25px;border-radius:10px;margin-bottom:30px;border-left:4px solid #667eea}.analogy-content{display:grid;gap:20px;margin-top:15px}.analogy-item{display:flex;align-items:flex-start;gap:15px;padding:15px;background:#fff;border-radius:8px;border:1px solid #e2e8f0}.analogy-item .icon{font-size:2em;flex-shrink:0}.points-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:20px}.point-card{background:#fff;padding:25px;border-radius:10px;text-align:center;border:1px solid #e2e8f0;transition:transform .3s ease}.point-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #0000001a}.point-icon{font-size:3em;margin-bottom:15px}.point-card h4{margin:0 0 10px;color:#2d3748}.point-card p{margin:0;color:#718096}.workflow{display:grid;gap:20px;margin:30px 0}.workflow-step{display:flex;align-items:center;gap:20px;padding:20px;background:#f7fafc;border-radius:10px}.step-number{background:#667eea;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.flow-diagram{display:flex;justify-content:center;align-items:center;gap:20px;margin:30px 0;flex-wrap:wrap}.flow-item{text-align:center;padding:20px;background:#fff;border:2px solid #e2e8f0;border-radius:10px;min-width:120px}.flow-item.encrypted{border-color:#e53e3e;background:#fed7d7}.flow-icon{font-size:2em;margin-bottom:10px}.flow-arrow{font-size:1.5em;color:#667eea}.database-example{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:30px 0}.example-side{padding:20px;border-radius:10px;border:2px solid #e2e8f0}.file-structure{margin:15px 0}.file{background:#2d3748;color:#fff;padding:8px 12px;border-radius:5px;font-family:monospace;margin-bottom:5px}.encrypted-file{background:#c53030}.file-content{background:#f7fafc;padding:15px;border-radius:5px;font-family:monospace;font-size:.9em;margin-bottom:15px;border-left:4px solid #e2e8f0}.file-content.plain{border-left-color:#38a169}.file-content.encrypted{border-left-color:#e53e3e;background:#fed7d7}.risk,.secure{padding:10px;border-radius:5px;text-align:center;font-weight:700}.risk{background:#fed7d7;color:#c53030}.secure{background:#c6f6d5;color:#276749}.real-world{background:#fffaf0;padding:25px;border-radius:10px;border-left:4px solid #dd6b20;margin-top:30px}.scenario ul{margin:15px 0}.scenario li{margin:8px 0}.simple-demo{margin-top:30px}.demo-controls{display:flex;gap:15px;justify-content:center;margin-bottom:30px;flex-wrap:wrap}.demo-btn{padding:12px 20px;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .3s ease}.demo-btn:disabled{opacity:.5;cursor:not-allowed}.encrypt-btn{background:#e53e3e;color:#fff}.encrypt-btn:hover:not(:disabled){background:#c53030;transform:translateY(-2px)}.decrypt-btn{background:#38a169;color:#fff}.decrypt-btn:hover:not(:disabled){background:#2f855a;transform:translateY(-2px)}.key-btn{background:#d69e2e;color:#fff}.key-btn:hover:not(:disabled){background:#b7791f;transform:translateY(-2px)}.key-display{background:#fffaf0;padding:20px;border-radius:8px;text-align:center;margin-bottom:20px;border:1px solid #fbd38d}.demo-comparison{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:30px 0}.demo-side{padding:20px;border:2px solid #e2e8f0;border-radius:10px}.data-table{overflow-x:auto;margin:15px 0}.data-table table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:10px;text-align:left;border-bottom:1px solid #e2e8f0}.data-table th{background:#f7fafc;font-weight:600}.encrypted{background:#fed7d7;color:#c53030;font-family:monospace;font-size:.8em}.status{padding:10px;border-radius:5px;text-align:center;font-weight:700;margin:10px 0 0}.status.encrypted{background:#fed7d7;color:#c53030}.status.unencrypted{background:#c6f6d5;color:#276749}.demo-explanation{background:#f7fafc;padding:20px;border-radius:8px;margin-top:20px}.demo-explanation ul{margin:15px 0 0}.demo-explanation li{margin:10px 0}@media (max-width: 768px){.tabs{flex-direction:column}.database-example,.demo-comparison,.points-grid{grid-template-columns:1fr}.flow-diagram,.demo-controls{flex-direction:column}}.non-relational-view{display:flex;flex-direction:column;gap:1rem}.document-record{border:1px solid #ddd;border-radius:8px;padding:1rem;background:#f9f9f9}.document-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #eee}.document-id{font-family:monospace;font-weight:700;color:#333}.document-body{display:flex;flex-direction:column;gap:.5rem}.document-field{display:flex;align-items:center;gap:.5rem;font-family:monospace}.field-name{font-weight:700;color:#555;min-width:80px}.field-value{padding:2px 6px;border-radius:4px}.key-value-view{display:flex;flex-direction:column;gap:1rem}.key-value-pair{border:1px solid #ddd;border-radius:8px;padding:1rem;background:#f9f9f9;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.key-section{flex:1}.key{font-family:monospace;font-weight:700;color:#333;background:#e9e9e9;padding:4px 8px;border-radius:4px}.value-section{flex:2;display:flex;flex-direction:column;gap:.25rem}.value-field{display:flex;gap:.5rem;font-family:monospace}.value-field span:first-child{font-weight:700;color:#555;min-width:80px}.pair-status{flex:0 0 auto}.field-value.tde-encrypted,.value-field span.tde-encrypted{background-color:#e8f5e8;color:#2d5016}.field-value.column-encrypted,.value-field span.column-encrypted{background-color:#fff3cd;color:#856404}.field-value.plaintext,.value-field span.plaintext{background-color:transparent;color:inherit}.status-badge{padding:4px 8px;border-radius:12px;font-size:.8rem;font-weight:700}.status-badge.tde-encrypted{background-color:#d4edda;color:#155724}.status-badge.column-encrypted{background-color:#fff3cd;color:#856404}.status-badge.plaintext{background-color:#f8d7da;color:#721c24}.file-structure-view{margin:0;padding:20px;background:#fff;border-radius:8px;border:1px solid var(--border);box-shadow:0 2px 8px #0000000d;border-top:4px solid var(--primary-blue);height:100%}.file-list{display:flex;flex-direction:column;gap:8px}.file-item{display:flex;align-items:center;padding:10px;background:#fff;border-radius:6px;border:1px solid #e9ecef;transition:all .3s ease}.file-item.encrypted-file{border-left:4px solid #28a745;background:#f8fff9}.file-item.plain-file{border-left:4px solid #6c757d}.file-icon{font-size:1.2em;margin-right:12px}.file-details{flex:1}.file-name{font-weight:600;font-family:Courier New,monospace}.file-type{font-size:.85em;color:#6c757d}.file-status .status-encrypted{color:#28a745;font-weight:600}.file-status .status-plaintext{color:#6c757d}.implementation-details{margin:20px 0;padding:15px;background:#f0f8ff;border-radius:8px;border:1px solid #d1ecf1}.implementation-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px}.implementation-item{display:flex;flex-direction:column;padding:8px;background:#fff;border-radius:4px}.implementation-item.full-width{grid-column:1 / -1}.implementation-item strong{color:#495057;font-size:.9em}.features-list ul{margin:0;padding-left:20px}.features-list li{margin:5px 0;color:#155724}.security-note.success{background:#d4edda;border:1px solid #c3e6cb;color:#155724;padding:12px;border-radius:6px;margin-top:15px}.file-structure-toggle{text-align:center;margin:15px 0}.secondary-btn.small{padding:6px 12px;font-size:.9em}.view-toggle{margin:20px 0;padding:15px;background:#f8f9fa;border-radius:8px}.toggle-buttons{display:flex;gap:10px;margin-top:10px}.toggle-btn{padding:10px 16px;border:2px solid #e9ecef;background:#fff;border-radius:6px;cursor:pointer;transition:all .3s ease}.toggle-btn.active{border-color:#007bff;background:#007bff;color:#fff}.toggle-btn:hover:not(.active){border-color:#007bff;background:#f8f9ff}.relational-view{margin:20px 0}.sql-table-container{border:1px solid #dee2e6;border-radius:8px;overflow:hidden}.sql-header{background:#343a40;color:#fff;padding:10px 15px;font-family:Courier New,monospace;font-size:14px}.sql-table{width:100%;border-collapse:collapse;font-family:Courier New,monospace;font-size:13px}.sql-table th{background:#495057;color:#fff;padding:10px;text-align:left;border-right:1px solid #6c757d}.sql-table td{padding:8px 10px;border-bottom:1px solid #dee2e6;border-right:1px solid #dee2e6}.sql-id{color:#6c757d;font-weight:700}.sql-plaintext{color:#28a745;font-weight:500}.sql-encrypted{color:#dc3545;background:#fff5f5;font-family:Courier New,monospace}.sql-boolean{color:#007bff;font-weight:700}.non-relational-view{margin:20px 0}.json-documents{display:flex;flex-direction:column;gap:15px}.json-document{border:1px solid #dee2e6;border-radius:8px;overflow:hidden}.json-header{background:#343a40;color:#fff;padding:10px 15px;display:flex;justify-content:space-between;align-items:center}.document-id{font-family:Courier New,monospace;font-weight:700}.document-status{font-size:12px;padding:4px 8px;border-radius:4px;font-weight:700}.document-status.encrypted{background:#dc3545;color:#fff}.document-status.plaintext{background:#28a745;color:#fff}.json-content{margin:0;padding:15px;background:#f8f9fa;font-family:Courier New,monospace;font-size:12px;line-height:1.4;overflow-x:auto;white-space:pre-wrap}.database-comparison{margin-top:20px;padding:20px;background:#f8f9fa;border-radius:8px}.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:15px}.comparison-item{background:#fff;padding:15px;border-radius:6px;border-left:4px solid #007bff}.comparison-item strong{color:#343a40;margin-bottom:10px;display:block}.comparison-item ul{margin:0;padding-left:20px}.comparison-item li{margin-bottom:5px;color:#6c757d}@media (max-width: 768px){.comparison-grid{grid-template-columns:1fr}.toggle-buttons{flex-direction:column}.json-header{flex-direction:column;align-items:flex-start;gap:10px}.sql-table{font-size:11px}}.simulation-intro{background:#e3f2fd;border-left:4px solid #2196f3;padding:10px;margin-bottom:10px;border-radius:4px}.simulation-intro h2{margin:0 0 8px;color:#1565c0;font-size:1.3em}.simulation-intro p{margin:0;color:#37474f;line-height:1.5}.step-content{max-width:1400px;margin:0 auto}.card{background:#fff;border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 2px 4px #0000001a;border:1px solid #e0e0e0}.primary-btn{background:#2196f3;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:14px}.primary-btn:disabled{background:#ccc;cursor:not-allowed}.success-message{background:#e8f5e8;border:1px solid #4caf50;border-radius:4px;padding:15px;margin-top:15px}.security-warning{background:#fff3e0;border:1px solid #ff9800;border-radius:4px;padding:15px;margin-top:15px}.table-container{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{padding:8px 12px;text-align:left;border-bottom:1px solid #ddd}.plaintext-field{color:#d32f2f;font-family:monospace}.status-badge.plaintext{background:#ffebee;color:#c62828;padding:4px 8px;border-radius:12px;font-size:12px}.form-row{display:flex;gap:15px;margin-bottom:15px}.form-row input{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:4px}.step-navigation{display:flex;justify-content:flex-end;margin-top:20px}:root{--primary-blue: #2563eb;--primary-dark: #1e40af;--primary-light: #dbeafe;--success: #10b981;--success-dark: #059669;--warning: #f59e0b;--error: #ef4444;--background: #f8fafc;--surface: #ffffff;--text-primary: #1e293b;--text-secondary: #64748b;--text-light: #94a3b8;--border: #e2e8f0;--border-light: #f1f5f9;--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--background);color:var(--text-primary);line-height:1.6}.app-shell{max-width:1200px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:40px;padding:40px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:16px}.label{display:inline-block;background:#fff3;padding:6px 12px;border-radius:20px;font-size:14px;font-weight:600;margin-bottom:12px}.header h1{font-size:2.5rem;font-weight:700;margin-bottom:16px}.header p{font-size:1.2rem;opacity:.9;max-width:600px;margin:0 auto}.progress-tracker{display:flex;gap:12px;margin-bottom:40px;overflow-x:auto}.step-indicator{flex:1;display:flex;align-items:center;padding:16px;background:var(--surface);border:2px solid var(--border);border-radius:12px;cursor:pointer;transition:all .3s ease;min-width:200px}.step-indicator.active{border-color:var(--primary-blue);background:var(--primary-light)}.step-indicator.completed{border-color:var(--success);background:#f0fdf4}.step-marker{width:32px;height:32px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;margin-right:12px;flex-shrink:0}.step-indicator.active .step-marker{background:var(--primary-blue);color:#fff}.step-indicator.completed .step-marker{background:var(--success);color:#fff}.step-title{font-weight:600;font-size:14px;color:var(--text-secondary)}.step-description{font-weight:600;color:var(--text-primary)}.card{background:var(--surface);border-radius:16px;padding:32px;box-shadow:var(--shadow-lg);margin-bottom:24px;border:1px solid var(--border)}.card-header{margin-bottom:4px}.card-header h2{font-size:1.75rem;font-weight:700;margin-bottom:8px;color:var(--text-primary)}.card-header h3{color:var(--text-primary);font-size:1.2rem;line-height:1.6}.card-header p{color:var(--text-secondary);font-size:1rem;line-height:1.6}.grid{display:grid;gap:24px;margin-bottom:24px;align-items:start}.two-columns{grid-template-columns:1fr 1fr}.form-grid{display:grid;gap:16px;margin-bottom:20px}.form-grid>div{display:flex;flex-direction:column}label{font-weight:600;margin-bottom:6px;color:var(--text-primary)}input,textarea{padding:12px 16px;border:2px solid var(--border);border-radius:8px;font-size:14px;transition:all .3s ease}input:focus,textarea:focus{outline:none;border-color:var(--primary-blue);box-shadow:0 0 0 3px #2563eb1a}button{padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px}.primary-btn{background:var(--primary-blue);color:#fff}.primary-btn:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.primary-btn.large{padding:16px 32px;font-size:16px}.primary-btn.enabled{background:var(--success)}.secondary-btn{background:var(--surface);color:var(--text-primary);border:2px solid var(--border)}.secondary-btn:hover{background:var(--border-light);border-color:var(--primary-blue)}.danger-btn{background:var(--error);color:#fff}.danger-btn:hover{background:#dc2626;transform:translateY(-2px)}.success-btn{background:var(--success);color:#fff}.success-btn:hover{background:var(--success-dark);transform:translateY(-2px)}button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.toggle-group{display:flex;flex-direction:column;gap:12px;margin:20px 0}.toggle-item{display:flex;align-items:flex-start;gap:12px;padding:16px;background:var(--surface);border:2px solid var(--border);border-radius:8px;cursor:pointer;transition:all .3s ease}.toggle-item:hover{border-color:var(--primary-blue);background:var(--primary-light)}.toggle-item input[type=checkbox],.toggle-item input[type=radio]{display:none}.toggle-slider{width:20px;height:20px;border:2px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:all .3s ease}.toggle-item input[type=checkbox]:checked+.toggle-slider,.toggle-item input[type=radio]:checked+.toggle-slider{background:var(--primary-blue);border-color:var(--primary-blue)}.toggle-item input[type=checkbox]:checked+.toggle-slider:after,.toggle-item input[type=radio]:checked+.toggle-slider:after{content:"✓";color:#fff;font-weight:700;font-size:12px}.toggle-content{flex:1}.toggle-label{font-weight:600;margin-bottom:4px}.toggle-description{font-size:14px;color:var(--text-secondary)}.table-wrapper{overflow-x:auto;border-radius:8px;border:1px solid var(--border);margin:16px 0}table{width:100%;border-collapse:collapse;background:var(--surface)}th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}th{background:var(--background);font-weight:600;color:var(--text-primary)}tr:hover{background:var(--border-light)}.monospace{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px}.status-badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.status-badge.ready-to-ship{background:#dbeafe;color:#1e40af}.status-badge.awaiting-payment{background:#fef3c7;color:#92400e}.status-badge.completed{background:#d1fae5;color:#065f46}.status-badge.pending{background:#f3f4f6;color:#374151}.security-badge{padding:4px 8px;border-radius:4px;font-size:11px;font-weight:600}.security-badge.protected{background:#d1fae5;color:#065f46}.security-badge.vulnerable{background:#fecaca;color:#dc2626}.encrypted-badge{background:#fef3c7;color:#92400e;padding:2px 6px;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:11px;border:1px solid #fcd34d}.plaintext-field{color:var(--error);font-weight:500}.encrypted-field{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:11px;color:var(--warning)}.success-message{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:16px;margin-top:16px;color:#065f46}.security-warning{background:#fef3c7;border:1px solid #fcd34d;border-radius:8px;padding:16px;margin-top:16px;color:#92400e}.warning-note{background:#fef3c7;border:1px solid #fcd34d;border-radius:8px;padding:12px;color:#92400e;text-align:center}.step-navigation{display:flex;justify-content:space-between;align-items:center;margin-top:3px;padding-top:2px;border-top:2px solid var(--border)}@media (max-width: 768px){.app-shell{padding:12px}.header{padding:24px 16px}.header h1{font-size:2rem}.progress-tracker{flex-direction:column}.grid.two-columns{grid-template-columns:1fr}.card{padding:20px}.step-navigation{flex-direction:column;gap:12px}.step-navigation button{width:100%;justify-content:center}}.footer-note{text-align:center;color:var(--text-secondary);font-size:14px;margin-top:40px;padding:20px;border-top:1px solid var(--border)}.database-management{margin-top:20px}.tab-navigation{display:flex;border-bottom:1px solid #ddd;margin-bottom:20px}.tab-btn{padding:12px 24px;background:#f8f9fa;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:14px;font-weight:500;color:#666;transition:all .3s ease}.tab-btn:hover{background:#e9ecef;color:#333}.tab-btn.active{background:#fff;border-bottom:3px solid #007bff;color:#007bff;font-weight:600}.tab-content{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.success-message{background:#d4edda;border:1px solid #c3e6cb;border-radius:8px;padding:16px;margin-top:16px;animation:slideIn .3s ease}.success-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.success-icon{font-size:18px}.database-schema{display:flex;flex-direction:column;gap:8px;margin-top:12px}.schema-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#ffffffb3;border-radius:4px}.schema-field{font-weight:600;color:#155724}.schema-type{font-size:.9em;color:#6c757d}.schema-type.warning{color:#856404;font-weight:500}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.status-message{color:#155724;background:#d4edda;padding:8px 12px;border-radius:4px;margin-top:12px;font-weight:500}.encryption-explanation{margin-bottom:10px}.explanation-content{display:flex;flex-direction:column;gap:20px}.encryption-definition{background:#f0f9ff;padding:10px;border-radius:8px;border-left:4px solid #007bff}.encryption-definition p{margin:0;font-size:1rem;line-height:1.6}.encryption-types h5{margin-bottom:16px;color:var(--text-dark)}.types-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.type-item{display:flex;align-items:flex-start;gap:15px;padding:20px;background:#f8fafc;border-radius:8px;border:2px solid #e2e8f0}.type-icon{font-size:2rem;flex-shrink:0}.type-content strong{display:block;margin-bottom:8px;color:var(--text-dark)}.type-content p{margin:0 0 12px;color:var(--text-light)}.type-content ul{margin:0;padding-left:0;list-style:none}.type-content li{padding:4px 0;font-size:.9rem}.encryption-demo-section{margin-bottom:24px}.demo-content{display:flex;flex-direction:column;gap:20px}.demo-input{display:flex;gap:12px;align-items:center}.demo-input input{flex:1;padding:12px 16px;border:2px solid var(--border);border-radius:8px;font-size:14px}.demo-input input:focus{outline:none;border-color:var(--primary-blue)}.results{display:grid;grid-template-columns:1fr 1fr;gap:20px}.result-box{background:#fff;padding:16px;border-radius:8px;border:1px solid var(--border)}.result-box label{display:block;font-weight:600;margin-bottom:8px;color:var(--text-dark);font-size:14px}.plaintext{background:#d1fae5;padding:12px;border-radius:6px;border:1px solid #a7f3d0;color:#065f46;font-family:monospace;word-break:break-all}.ciphertext{background:#fef3c7;padding:12px;border-radius:6px;border:1px solid #fcd34d;color:#92400e;font-family:Courier New,monospace;word-break:break-all;font-size:12px}.explanation h5{margin-bottom:16px;color:var(--text-dark)}.explanation-points{display:flex;flex-direction:column;gap:12px}.point{display:flex;align-items:flex-start;gap:12px;padding:12px;background:#f8fafc;border-radius:6px}.point-icon{font-size:1.2rem;flex-shrink:0}.importance-section{margin-bottom:24px}.importance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:20px}.importance-item{display:flex;align-items:flex-start;gap:15px;padding:20px;background:#f8fafc;border-radius:8px;border:2px solid #e2e8f0}.importance-icon{font-size:1.5rem;flex-shrink:0}.importance-content strong{display:block;margin-bottom:8px;color:var(--text-dark)}.importance-content p{margin:0;color:var(--text-light);font-size:.9rem;line-height:1.5}.objectives-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:20px}.objective-item{display:flex;align-items:flex-start;gap:15px;padding:20px;background:#f8fafc;border-radius:12px;border:2px solid #e2e8f0;transition:all .3s ease}.objective-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a;border-color:var(--primary-blue)}.objective-icon{font-size:2rem;flex-shrink:0}.objective-content h5{margin:0 0 8px;color:var(--text-dark);font-size:1.1rem}.objective-content p{margin:0;color:var(--text-light);font-size:.9rem;line-height:1.5}.flow-steps{display:flex;flex-direction:column;gap:15px;margin-top:20px}.flow-step{display:flex;align-items:flex-start;gap:15px;padding:15px;background:#fff;border-radius:8px;border:1px solid var(--border)}.flow-step .step-number{width:32px;height:32px;border-radius:50%;background:var(--primary-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.flow-step .step-info{flex:1}.flow-step .step-info strong{display:block;margin-bottom:5px;color:var(--text-dark)}.flow-step .step-info span{color:var(--text-light);font-size:.9rem}.primary-btn.large{padding:16px 32px;font-size:1.1rem;font-weight:600}@media (max-width: 768px){.types-grid,.results{grid-template-columns:1fr}.demo-input{flex-direction:column}.importance-grid,.objectives-grid{grid-template-columns:1fr}.flow-step{flex-direction:column;text-align:center}.flow-step .step-number{align-self:center}}.simulation-intro h3{color:var(--text-dark);margin-bottom:6px;font-size:1.1rem}.simulation-intro p{margin-bottom:0;line-height:1.6;color:var(--text-secondary)}.learning-objectives{background:#f0f9ff;padding:20px;border-radius:8px;border-left:4px solid var(--primary-blue);margin-top:20px}.learning-objectives h5{margin:0 0 12px;color:var(--text-dark)}.learning-objectives ul{margin:0;padding-left:20px}.learning-objectives li{margin-bottom:8px;color:var(--text-secondary)}.management-intro{background:#f8fafc;padding:16px;border-radius:8px;margin-bottom:20px;border:1px solid var(--border)}.management-intro h5{margin:0 0 8px;color:var(--text-dark)}.management-intro p{margin:0;color:var(--text-secondary)}.security-note{background:#fff3cd;border:1px solid #ffeaa7;border-radius:6px;padding:12px;margin-top:16px;color:#856404}.security-note strong{color:#856404}.step-summary{flex:1}.step-summary strong{display:block;margin-bottom:8px;color:var(--text-dark)}.step-summary p{margin:0;color:var(--text-secondary);font-size:.9rem}.security-warning ul{margin:12px 0;padding-left:20px}.security-warning li{margin-bottom:6px;color:#721c24}.encrypt-actions{display:flex;flex-direction:row;align-items:center;margin-top:20px}.primary-btn{padding:10px 18px;font-size:15px;font-weight:600;color:#fff;border:none;border-radius:6px;cursor:pointer}.primary-btn:disabled{background-color:#b5dcd4;cursor:not-allowed}.status-note{margin-top:8px;font-size:14px;color:#2e7d32}.column-option.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.file-item{position:relative;cursor:help}.file-tooltip{display:none;position:absolute;top:100%;left:50%;transform:translate(-50%);background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px;box-shadow:0 4px 15px #00000026;z-index:100;width:max-content;max-width:300px;margin-top:10px;text-align:left}.file-item:hover .file-tooltip{display:block;animation:fadeIn .2s ease-in-out}.file-tooltip:before{content:"";position:absolute;top:-6px;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-style:solid;border-color:transparent transparent white transparent;z-index:101}.file-tooltip:after{content:"";position:absolute;top:-7px;left:50%;transform:translate(-50%);border-width:0 7px 7px 7px;border-style:solid;border-color:transparent transparent var(--border) transparent;z-index:100}.tooltip-header{font-weight:600;color:var(--dark-blue);margin-bottom:5px;border-bottom:1px solid var(--border);padding-bottom:5px;font-size:.9em}.tooltip-content{margin:0;font-family:Courier New,monospace;font-size:.8em;color:var(--text-dark);white-space:pre-wrap;word-break:break-all;background:#f8fafc;padding:5px;border-radius:4px}