*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.app{max-width:600px;margin:40px auto;padding:30px;background:white;border-radius:12px;box-shadow:0 4px 20px #0000001a}h1{text-align:center;margin-bottom:10px;color:#2c3e50;font-size:28px}.app-subtitle{color:#666;text-align:center;font-size:1.1em;margin-bottom:30px;font-style:italic}.tabs{display:flex;margin-bottom:30px;border-bottom:2px solid #e9ecef}.tab-button{padding:12px 24px;border:none;background:none;cursor:pointer;font-size:16px;color:#6c757d;border-bottom:3px solid transparent;transition:all .3s ease}.tab-button.active{color:#007bff;border-bottom-color:#007bff;background-color:#f8f9fa}.tab-button:hover{background-color:#f8f9fa}.tab-content{min-height:300px}.input-group{margin-bottom:20px}.input-group label{display:block;margin-bottom:8px;font-weight:500;color:#495057}.text-input,.number-input{width:100%;padding:12px 16px;border:2px solid #e9ecef;border-radius:8px;font-size:16px;transition:border-color .3s ease}.text-input:focus,.number-input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.generate-btn{width:100%;padding:14px;background:linear-gradient(135deg,#007bff,#0056b3);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease;margin-bottom:20px}.generate-btn:hover{background:linear-gradient(135deg,#0056b3,#004085);transform:translateY(-1px);box-shadow:0 4px 12px #007bff4d}.result{margin-top:20px;padding:20px;background-color:#f8f9fa;border-radius:8px;border:1px solid #e9ecef}.password-output{display:flex;gap:10px;margin-top:10px}.password-input{flex:1;padding:12px 16px;border:2px solid #28a745;border-radius:8px;background-color:#f8fff9;font-family:Courier New,monospace;font-size:16px;color:#155724}.copy-btn{padding:12px 20px;background:#28a745;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:all .3s ease}.copy-btn:hover{background:#218838;transform:translateY(-1px)}.chinese-mode{display:flex;flex-direction:column;gap:30px}.mapping-section{background-color:#f8f9fa;padding:20px;border-radius:8px;border:1px solid #e9ecef}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-header h3{margin:0;color:#495057;font-size:18px}.mapping-controls{display:flex;gap:10px;align-items:center}.char-set-select{padding:8px 12px;border:2px solid #e9ecef;border-radius:6px;background:white;cursor:pointer;font-size:14px;transition:border-color .3s ease}.char-set-select:focus{outline:none;border-color:#007bff}.generate-mapping-btn,.copy-mapping-btn,.import-mapping-btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s ease}.generate-mapping-btn{background:#007bff;color:#fff}.generate-mapping-btn:hover{background:#0056b3}.copy-mapping-btn{background:#28a745;color:#fff}.copy-mapping-btn:hover{background:#218838}.import-mapping-btn{background:#6f42c1;color:#fff}.import-mapping-btn:hover{background:#5a2d91}.mapping-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;max-height:300px;overflow-y:auto}.mapping-item{display:flex;flex-direction:column;align-items:center;padding:8px;background:white;border-radius:6px;border:1px solid #dee2e6;font-size:14px}.chinese-char{font-size:16px;color:#495057;font-weight:700}.arrow{color:#6c757d;font-size:12px;margin:2px 0}.target-char{font-size:16px;color:#007bff;font-weight:700}.encode-section,.decode-section{background-color:#fff;padding:20px;border-radius:8px;border:1px solid #e9ecef}.text-area,.password-textarea{width:100%;padding:12px 16px;border:2px solid #e9ecef;border-radius:8px;font-size:16px;font-family:inherit;resize:vertical;transition:border-color .3s ease}.text-area:focus,.password-textarea:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.password-textarea{background-color:#f8fff9;border-color:#28a745;color:#155724}.import-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}.import-dialog{background:white;border-radius:12px;width:90%;max-width:500px;max-height:80vh;overflow:hidden;box-shadow:0 10px 30px #0000004d}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e9ecef;background:#f8f9fa}.dialog-header h3{margin:0;color:#495057;font-size:18px}.close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:#6c757d;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease}.close-btn:hover{background:#e9ecef;color:#495057}.dialog-content{padding:20px}.dialog-content label{display:block;margin-bottom:10px;font-weight:500;color:#495057}.import-textarea{width:100%;padding:12px 16px;border:2px solid #e9ecef;border-radius:8px;font-size:14px;font-family:Courier New,monospace;resize:vertical;margin-bottom:20px;transition:border-color .3s ease}.import-textarea:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.dialog-actions{display:flex;gap:10px;justify-content:flex-end}.confirm-btn,.cancel-btn{padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s ease}.confirm-btn{background:#007bff;color:#fff}.confirm-btn:hover{background:#0056b3}.cancel-btn{background:#6c757d;color:#fff}.cancel-btn:hover{background:#545b62}@media (max-width: 640px){.app{margin:20px;padding:20px}.section-header{flex-direction:column;align-items:stretch;gap:15px}.mapping-controls{justify-content:center;flex-wrap:wrap}.import-dialog{width:95%;margin:20px}.dialog-actions{flex-direction:column}.confirm-btn,.cancel-btn{width:100%}.mapping-table{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px}.password-output{flex-direction:column}.copy-btn{width:100%}}.mode-description{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);border-radius:12px;padding:20px;margin-bottom:25px;border-left:4px solid #4CAF50;box-shadow:0 2px 10px #0000001a}.mode-description h3{margin:0 0 15px;color:#2c3e50;font-size:1.3em}.mode-description p{margin:8px 0;color:#34495e;line-height:1.6;font-size:.95em}.mode-description strong{color:#27ae60}.encode-section h4,.decode-section h4{color:#2c3e50;margin:20px 0 10px;font-size:1.1em;display:flex;align-items:center;gap:8px}.section-tip{color:#7f8c8d;font-size:.9em;margin:5px 0 15px;font-style:italic}