:root{--bg: #f0f2f5;--card-bg: #ffffff;--primary: #4f6ef7;--primary-hover: #3b54db;--primary-light: #eef1ff;--danger: #e0556a;--danger-light: #fef0f2;--warning: #e8a020;--warning-light: #fffdf5;--success: #2da94f;--success-light: #edfaf1;--text: #1a1d2e;--text-secondary: #5a5f7a;--text-muted: #8b8fa3;--border: #e2e5f0;--border-focus: #4f6ef7;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--shadow: 0 4px 16px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .04);--shadow-lg: 0 12px 32px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .04);--radius-sm: 8px;--radius: 12px;--radius-lg: 16px;--transition: .2s cubic-bezier(.4, 0, .2, 1);--font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Cascadia Code", "Consolas", "Monaco", "Liberation Mono", monospace}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#e8ecf4,#f0f2f8,#eef0f7 60%,#f2f4f9);background-attachment:fixed;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;top:-180px;right:-120px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(79,110,247,.07) 0%,transparent 70%);pointer-events:none;z-index:0}body:after{content:"";position:fixed;bottom:-160px;left:-100px;width:450px;height:450px;border-radius:50%;background:radial-gradient(circle,rgba(139,143,163,.06) 0%,transparent 70%);pointer-events:none;z-index:0}.container{position:relative;z-index:1;width:100%;max-width:780px;background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:36px 32px 32px;transition:box-shadow var(--transition)}.container:hover{box-shadow:0 16px 40px #00000017,0 6px 16px #0000000d}.header{text-align:center;margin-bottom:28px}.header .icon-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}.header .shield-icon{width:42px;height:42px;background:var(--primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--primary)}.header h1{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;color:var(--text);margin:0}.header .subtitle{font-size:.875rem;color:var(--text-muted);margin-top:2px;letter-spacing:.01em}.algo-tabs{display:flex;gap:6px;background:#f5f6fa;border-radius:28px;padding:4px;margin-bottom:20px;position:relative}.algo-tab{flex:1;padding:10px 18px;border-radius:24px;text-align:center;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--text-secondary);transition:all var(--transition);user-select:none;border:none;background:transparent;position:relative;z-index:1;letter-spacing:.01em;white-space:nowrap}.algo-tab.active{background:#fff;color:var(--primary);box-shadow:var(--shadow-sm)}.algo-tab:hover:not(.active){color:var(--text);background:#ffffff80}.algo-tab .badge{display:inline-block;font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:6px;vertical-align:middle;letter-spacing:.03em}.badge-recommended{background:#d4fce4;color:#1a7a3a}.badge-warning{background:#fff3cd;color:#8a6d14}.warning-bar{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:var(--radius-sm);background:var(--warning-light);border:1px solid #fce9b4;margin-bottom:18px;font-size:.82rem;color:#7a5e10;line-height:1.5;transition:all var(--transition)}.warning-bar .warn-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px}.mode-tabs{display:flex;gap:4px;background:#f5f6fa;border-radius:22px;padding:3px;margin-bottom:16px;width:fit-content}.mode-tab{padding:7px 16px;border-radius:20px;cursor:pointer;font-weight:600;font-size:.82rem;color:var(--text-secondary);transition:all var(--transition);user-select:none;border:none;background:transparent;letter-spacing:.02em}.mode-tab.active{background:#fff;color:var(--primary);box-shadow:var(--shadow-sm)}.mode-tab:hover:not(.active){color:var(--text)}.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}.config-group{display:flex;flex-direction:column;gap:5px}.config-group label{font-weight:600;font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}.config-group .input-row{display:flex;gap:6px;align-items:center}.config-group input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.9rem;font-family:var(--font-mono);transition:all var(--transition);background:#fafbfc;color:var(--text);min-width:0}.config-group input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px #4f6ef71a;background:#fff}.config-group input.error{border-color:var(--danger);box-shadow:0 0 0 3px #e0556a14}.btn-icon-sm{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border);background:#fafbfc;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition);color:var(--text-secondary)}.btn-icon-sm:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}.btn-icon-sm:active{transform:scale(.93);transition:.08s}.length-hint{font-size:.72rem;color:var(--text-muted);min-height:16px;transition:color var(--transition);letter-spacing:.02em}.length-hint.valid{color:var(--success)}.length-hint.invalid{color:var(--danger)}.iv-section{transition:all .3s ease;overflow:hidden}.iv-section.collapsed{max-height:0;opacity:0;margin:0;pointer-events:none}.iv-section.expanded{max-height:120px;opacity:1;margin-bottom:16px}.text-areas{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}.text-area-group{display:flex;flex-direction:column;gap:5px}.text-area-group .area-header{display:flex;justify-content:space-between;align-items:center}.text-area-group label{font-weight:600;font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}.text-area-group textarea{width:100%;min-height:110px;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:.9rem;font-family:var(--font-mono);resize:vertical;transition:all var(--transition);background:#fafbfc;color:var(--text);line-height:1.5}.text-area-group textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px #4f6ef71a;background:#fff}.text-area-group textarea.output-area{background:#f8f9fc;color:#2d3348}.btn-xs{font-size:.75rem;padding:5px 10px;border-radius:14px;border:1px solid var(--border);background:#fff;cursor:pointer;color:var(--text-secondary);font-weight:500;transition:all var(--transition);white-space:nowrap;letter-spacing:.02em}.btn-xs:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}.btn-xs:active{transform:scale(.95);transition:.08s}.btn-xs.copied{background:var(--success-light);border-color:var(--success);color:var(--success)}.action-buttons{display:flex;gap:10px;flex-wrap:wrap}.btn{flex:1;min-width:100px;padding:12px 20px;border-radius:26px;font-weight:600;font-size:.9rem;cursor:pointer;border:none;letter-spacing:.02em;transition:all var(--transition);display:flex;align-items:center;justify-content:center;gap:7px;user-select:none}.btn:active{transform:scale(.96);transition:.08s}.btn-encrypt{background:var(--primary);color:#fff;box-shadow:0 4px 14px #4f6ef74d}.btn-encrypt:hover{background:var(--primary-hover);box-shadow:0 6px 20px #4f6ef766}.btn-decrypt{background:#fff;color:var(--primary);border:2px solid var(--primary)}.btn-decrypt:hover{background:var(--primary-light)}.btn-clear{flex:.4;min-width:70px;background:#fff;color:var(--text-secondary);border:1.5px solid var(--border)}.btn-clear:hover{background:#f5f5f8;border-color:#c5c8d6}.btn-swap{flex:.4;min-width:70px;background:#fff;color:var(--text-secondary);border:1.5px solid var(--border);font-size:1.1rem}.btn-swap:hover{background:#f5f5f8;border-color:#c5c8d6}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%) translateY(-120px);background:#1a1d2e;color:#fff;padding:12px 24px;border-radius:24px;font-weight:600;font-size:.85rem;z-index:999;pointer-events:none;opacity:0;transition:all .35s cubic-bezier(.4,0,.2,1);letter-spacing:.02em;box-shadow:0 8px 24px #00000040;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.toast.success{background:#1a3c2a;color:#c8f7d5}.toast.error{background:#3d1a1f;color:#fdd}.toast-enter-active{animation:toastIn .35s cubic-bezier(.4,0,.2,1)}.toast-leave-active{animation:toastOut .35s cubic-bezier(.4,0,.2,1)}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(-120px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-120px)}}.footer-note{text-align:center;margin-top:22px;font-size:.72rem;color:var(--text-muted);letter-spacing:.02em;line-height:1.6}.footer-note strong{color:var(--text);font-weight:600}@media (max-width: 600px){.config-grid{grid-template-columns:1fr}.container{padding:24px 16px 20px;border-radius:var(--radius)}.header h1{font-size:1.35rem}.mode-tabs{flex-wrap:wrap}.mode-tab{font-size:.8rem;padding:8px 14px}}@media (max-width: 480px){.btn{padding:10px 14px;font-size:.82rem;border-radius:22px}.action-buttons{gap:6px}.text-area-group textarea{min-height:90px;font-size:.82rem}.config-group input{font-size:.82rem;padding:8px 10px}.algo-tab{font-size:.78rem;padding:8px 10px}}