:root{--bg-primary: #0a0a0b;--bg-secondary: #131316;--bg-tertiary: #1c1c21;--bg-hover: #252529;--border-color: #2a2a2f;--border-focus: #3b82f6;--text-primary: #f4f4f5;--text-secondary: #a1a1aa;--text-muted: #71717a;--accent-blue: #3b82f6;--accent-blue-hover: #2563eb;--accent-green: #22c55e;--accent-green-hover: #16a34a;--accent-purple: #a855f7;--accent-purple-hover: #9333ea;--accent-orange: #f97316;--accent-yellow: #eab308;--error-red: #ef4444;--error-bg: #1f0a0a;--success-bg: #0a1f0a;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--transition-fast: .15s ease;--transition-normal: .25s ease}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.app-container{width:100%;max-width:min(3200px,99vw);margin:0 auto;padding:clamp(16px,4vw,40px) clamp(20px,5vw,64px)}@media (min-width: 2560px){.app-container{max-width:min(4000px,98vw);padding:clamp(40px,6vw,80px) clamp(64px,8vw,128px)}}@media (min-width: 3840px){.app-container{max-width:95vw;padding:clamp(60px,8vw,120px) clamp(80px,10vw,160px)}}.header{text-align:center;margin-bottom:clamp(24px,5vw,40px);width:100%}.logo{display:inline-flex;align-items:center;gap:clamp(8px,2vw,12px);margin-bottom:clamp(8px,2vw,12px);text-decoration:none;color:inherit;transition:opacity var(--transition-fast);-webkit-tap-highlight-color:transparent}.logo:hover{opacity:.8}.logo-icon{width:clamp(40px,8vw,48px);height:clamp(40px,8vw,48px);background:linear-gradient(135deg,var(--accent-blue),var(--accent-purple));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:clamp(20px,4vw,24px)}.logo-text{font-size:clamp(22px,5vw,28px);font-weight:700;background:linear-gradient(135deg,var(--text-primary),var(--text-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{color:var(--text-secondary);font-size:clamp(13px,3vw,15px);padding:0 clamp(8px,2vw,0)}.version-badge{display:inline-block;margin-top:8px;padding:4px 12px;background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));border-radius:20px;font-size:12px;font-weight:600;color:#fff}.status-message{padding:clamp(12px,2.5vw,14px) clamp(14px,3vw,18px);border-radius:var(--radius-md);margin-bottom:clamp(16px,3vw,24px);display:none;align-items:center;gap:clamp(8px,2vw,10px);font-size:clamp(13px,2.5vw,14px);font-weight:500;word-break:break-word}.status-message.error{display:flex;background:var(--error-bg);border:1px solid var(--error-red);color:var(--error-red)}.status-message.success{display:flex;background:var(--success-bg);border:1px solid var(--accent-green);color:var(--accent-green)}.settings-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:clamp(16px,3vw,24px);margin-bottom:clamp(16px,3vw,24px);width:100%}@media (min-width: 1200px){.settings-card{padding:clamp(24px,4vw,32px)}}@media (min-width: 1600px){.settings-card{padding:clamp(32px,5vw,48px)}}@media (min-width: 2560px){.settings-card{padding:clamp(48px,7vw,80px)}}@media (min-width: 3840px){.settings-card{padding:clamp(64px,9vw,120px)}}.settings-grid{display:grid;grid-template-columns:1fr;gap:clamp(12px,2.5vw,16px);align-items:end}@media (min-width: 600px){.settings-grid{grid-template-columns:minmax(180px,1fr) minmax(300px,4fr);gap:clamp(20px,4vw,32px)}}@media (min-width: 1200px){.settings-grid{grid-template-columns:minmax(200px,1fr) minmax(500px,6fr);gap:clamp(24px,5vw,48px)}}@media (min-width: 1600px){.settings-grid{grid-template-columns:minmax(220px,1fr) minmax(600px,8fr);gap:clamp(32px,6vw,64px)}}@media (min-width: 2560px){.settings-grid{grid-template-columns:minmax(250px,1fr) minmax(800px,10fr);gap:clamp(48px,8vw,96px)}}@media (min-width: 3840px){.settings-grid{grid-template-columns:minmax(300px,1fr) minmax(1000px,12fr);gap:clamp(64px,10vw,128px)}}.form-group{display:flex;flex-direction:column;gap:clamp(6px,1.5vw,8px)}.form-label{font-size:clamp(11px,2.2vw,13px);font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.select-wrapper{position:relative}.select-wrapper:after{content:"▼";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--text-muted);pointer-events:none}select{width:100%;padding:clamp(12px,2.5vw,14px) clamp(36px,7vw,40px) clamp(12px,2.5vw,14px) clamp(12px,2.5vw,14px);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:clamp(14px,2.8vw,16px);font-family:inherit;cursor:pointer;appearance:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);-webkit-tap-highlight-color:transparent;min-height:44px}select:hover{border-color:var(--text-muted)}select:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px #3b82f626}.key-input-wrapper{position:relative;display:flex;gap:clamp(8px,2vw,10px);flex-wrap:wrap;align-items:center}@media (min-width: 500px){.key-input-wrapper{flex-wrap:nowrap}}input[type=text],input[type=password]{flex:1;padding:clamp(12px,2.5vw,14px);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:clamp(14px,2.8vw,16px);font-family:JetBrains Mono,monospace;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);-webkit-tap-highlight-color:transparent;min-height:44px;-webkit-appearance:none;appearance:none}@media (min-width: 500px){.key-input-wrapper input[type=text],.key-input-wrapper input[type=password]{padding-right:clamp(60px,13vw,80px)}}@supports (-webkit-touch-callout: none){input[type=text],input[type=password]{font-size:16px}}input:hover{border-color:var(--text-muted)}input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px #3b82f626}input::placeholder{color:var(--text-muted)}.key-toggle{padding:clamp(10px,2vw,12px) clamp(12px,2.5vw,14px);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);font-size:clamp(16px,3vw,18px);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.key-toggle:hover{background:var(--bg-hover);color:var(--text-primary)}.key-length{position:static;order:3;width:100%;text-align:right;font-size:clamp(10px,2vw,11px);color:var(--text-muted);font-family:JetBrains Mono,monospace;pointer-events:none;margin-top:clamp(4px,1vw,6px)}@media (min-width: 500px){.key-length{position:absolute;right:clamp(56px,12vw,72px);top:50%;transform:translateY(-50%);order:unset;width:auto;margin-top:0}}.key-length.valid{color:var(--accent-green)}.key-length.invalid{color:var(--error-red)}.crypto-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;width:100%}.crypto-panels{display:flex;flex-direction:column;min-height:auto}@media (min-width: 768px){.crypto-panels{display:grid;grid-template-columns:1fr auto 1fr;min-height:clamp(300px,50vw,400px);gap:0}}@media (min-width: 1200px){.crypto-panels{grid-template-columns:minmax(450px,1fr) auto minmax(450px,1fr);min-height:clamp(350px,45vh,500px)}}@media (min-width: 1600px){.crypto-panels{grid-template-columns:minmax(500px,1fr) auto minmax(500px,1fr);min-height:clamp(400px,50vh,600px)}}@media (min-width: 2560px){.crypto-panels{grid-template-columns:minmax(700px,1fr) auto minmax(700px,1fr);min-height:clamp(500px,55vh,800px)}}@media (min-width: 3840px){.crypto-panels{grid-template-columns:minmax(900px,1fr) auto minmax(900px,1fr);min-height:clamp(600px,60vh,1000px)}}.panel{display:flex;flex-direction:column;min-height:clamp(160px,30vw,200px);flex:1}@media (min-width: 768px){.panel{min-height:auto}}@media (min-width: 1200px){.panel{min-height:clamp(350px,45vh,500px)}}@media (min-width: 2560px){.panel{min-height:clamp(500px,50vh,700px)}}@media (min-width: 3840px){.panel{min-height:clamp(700px,55vh,1000px)}}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,2.5vw,16px) clamp(16px,3vw,20px);background:var(--bg-tertiary);border-bottom:1px solid var(--border-color)}@media (min-width: 1200px){.panel-header{padding:clamp(16px,3vw,20px) clamp(24px,4vw,32px)}}@media (min-width: 1600px){.panel-header{padding:clamp(20px,4vw,24px) clamp(32px,5vw,48px)}}@media (min-width: 2560px){.panel-header{padding:clamp(24px,5vw,32px) clamp(48px,7vw,80px)}}@media (min-width: 3840px){.panel-header{padding:clamp(32px,6vw,48px) clamp(64px,9vw,120px)}}.panel-title{font-size:clamp(11px,2.2vw,13px);font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.panel-actions{display:flex;gap:clamp(6px,1.5vw,8px)}.icon-btn{width:clamp(36px,7vw,40px);height:clamp(36px,7vw,40px);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);font-size:clamp(14px,2.8vw,16px);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.icon-btn:hover{background:var(--bg-hover);border-color:var(--text-muted);color:var(--text-primary)}.icon-btn:active{transform:scale(.95)}.icon-btn.copied{background:var(--accent-green);border-color:var(--accent-green);color:#fff}textarea{flex:1;width:100%;padding:clamp(14px,3vw,20px);background:transparent;border:none;color:var(--text-primary);font-size:clamp(14px,2.8vw,16px);font-family:JetBrains Mono,monospace;line-height:1.7;resize:none;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none}@media (min-width: 1200px){textarea{padding:clamp(20px,4vw,28px)}}@media (min-width: 1600px){textarea{padding:clamp(28px,5vw,40px)}}@media (min-width: 2560px){textarea{padding:clamp(40px,7vw,60px);font-size:clamp(16px,3.5vw,18px)}}@media (min-width: 3840px){textarea{padding:clamp(60px,9vw,100px);font-size:clamp(18px,4vw,20px)}}@supports (-webkit-touch-callout: none){textarea{font-size:16px}}textarea:focus{outline:none}textarea::placeholder{color:var(--text-muted)}textarea:read-only{color:var(--text-secondary);cursor:default}.center-actions{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(12px,2.5vw,16px);padding:clamp(12px,2.5vw,16px);background:var(--bg-tertiary);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}@media (min-width: 768px){.center-actions{flex-direction:column;gap:clamp(10px,2vw,12px);padding:clamp(16px,3vw,20px) clamp(12px,2.5vw,16px);border-top:none;border-bottom:none;border-left:1px solid var(--border-color);border-right:1px solid var(--border-color)}}.action-btn{width:clamp(48px,9vw,56px);height:clamp(48px,9vw,56px);min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-size:clamp(18px,3.5vw,20px);box-shadow:var(--shadow-sm);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.action-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.action-btn:active{transform:translateY(0)}.action-btn.encrypt{background:linear-gradient(135deg,var(--accent-blue),var(--accent-blue-hover));color:#fff}.action-btn.encrypt:hover{background:linear-gradient(135deg,var(--accent-blue-hover),#1d4ed8)}.action-btn.decrypt{background:linear-gradient(135deg,var(--accent-green),var(--accent-green-hover));color:#fff}.action-btn.decrypt:hover{background:linear-gradient(135deg,var(--accent-green-hover),#15803d)}.action-btn.swap{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);width:clamp(40px,8vw,48px);height:clamp(40px,8vw,48px);min-width:44px;min-height:44px;font-size:clamp(16px,3vw,18px)}.action-btn.swap:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-muted)}.action-label{display:none;font-size:clamp(9px,1.8vw,10px);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:clamp(-4px,-.8vw,-2px)}@media (min-width: 768px){.action-label{display:block}}.footer{margin-top:clamp(24px,5vw,32px);text-align:center;color:var(--text-muted);font-size:clamp(12px,2.5vw,13px)}.footer a{color:var(--accent-blue);text-decoration:none;transition:color var(--transition-fast)}.footer a:hover{color:var(--accent-blue-hover);text-decoration:underline}.tech-badges{display:flex;justify-content:center;gap:clamp(6px,1.5vw,8px);margin-top:clamp(10px,2vw,12px);flex-wrap:wrap}.badge{display:inline-flex;align-items:center;gap:clamp(4px,1vw,6px);padding:clamp(5px,1.2vw,6px) clamp(10px,2vw,12px);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;font-size:clamp(11px,2.2vw,12px);color:var(--text-secondary)}.badge-dot{width:clamp(6px,1.5vw,8px);height:clamp(6px,1.5vw,8px);border-radius:50%}.badge-dot.rust{background:var(--accent-orange)}.badge-dot.wasm{background:var(--accent-purple)}.badge-dot.aes{background:var(--accent-green)}.badge-dot.vite{background:var(--accent-yellow)}.loading-overlay{position:fixed;inset:0;background:var(--bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:1000;transition:opacity var(--transition-normal)}.loading-overlay.hidden{opacity:0;pointer-events:none}.spinner{width:clamp(40px,8vw,48px);height:clamp(40px,8vw,48px);border:clamp(2px,.5vw,3px) solid var(--border-color);border-top-color:var(--accent-blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--text-secondary);font-size:clamp(13px,2.5vw,14px);text-align:center;padding:0 clamp(16px,4vw,24px)}@media (max-width: 400px){.logo{flex-direction:column;gap:clamp(6px,1.5vw,8px)}.panel-header{padding:clamp(10px,2vw,12px) clamp(12px,2.5vw,14px)}.key-input-wrapper{flex-wrap:wrap}.key-length{position:static;order:3;width:100%;text-align:right;margin-top:clamp(4px,1vw,6px)}}@media (hover: none) and (pointer: coarse){.icon-btn:hover,.action-btn:hover,.key-toggle:hover{transform:none}.icon-btn:active,.action-btn:active,.key-toggle:active{transform:scale(.95);opacity:.8}.action-btn.encrypt:active,.action-btn.decrypt:active{transform:scale(.95)}}[data-tooltip]{position:relative}[data-tooltip]:before{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%);padding:clamp(5px,1.2vw,6px) clamp(8px,2vw,10px);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:clamp(10px,2vw,11px);font-weight:500;color:var(--text-secondary);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast);margin-bottom:clamp(6px,1.5vw,8px);z-index:100}@media (hover: hover) and (pointer: fine){[data-tooltip]:hover:before{opacity:1;transform:translate(-50%) translateY(-2px)}}button,.icon-btn,.action-btn,.key-toggle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}textarea,input{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}