:root{--m3-card: #FEF7FF;--m3-text: #1D1B20;--m3-primary: #6750A4;--m3-primary-hover: #79659E;--m3-on-primary: #FFFFFF;--m3-blue: #1976D2;--m3-blue-hover: #1565C0;--m3-error: #B3261E;--m3-error-hover: #98191D;--m3-on-error: #FFFFFF;--m3-border: #CAC4D0;--m3-outline: #79747E;--m3-surface-container: #F3EDF7;--m3-surface-container-high: #ECE6F0;--m3-surface-container-highest: #E6E0E9;--m3-on-surface-variant: #49454F;--m3-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24)}.dark :root,.dark{--m3-card: #141218;--m3-text: #E6E0E9;--m3-primary: #D0BCFF;--m3-primary-hover: #E0CCFF;--m3-on-primary: #381E72;--m3-blue: #2196F3;--m3-blue-hover: #1E88E5;--m3-error: #F2B8B5;--m3-error-hover: #EFC8C6;--m3-on-error: #601410;--m3-border: #49454F;--m3-outline: #938F99;--m3-surface-container: #211F26;--m3-surface-container-high: #2B2930;--m3-surface-container-highest: #36343B;--m3-on-surface-variant: #CAC4D0}.app,.app *{box-sizing:border-box}.app{max-width:980px;margin:0 auto;background:var(--m3-card);border:1px solid var(--m3-border);border-radius:28px;padding:25px;overflow-x:clip;box-shadow:var(--m3-shadow)}.dark .app{background:var(--m3-card);color:var(--m3-text);border-color:var(--m3-border)}.settings{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;border-radius:16px}.dark .settings{background:transparent}.settings label,.block label{display:block;font-size:14px;color:var(--m3-on-surface-variant);font-weight:500;letter-spacing:.1px;margin-bottom:10px}.dark .settings label,.dark .block label{color:var(--m3-on-surface-variant)}.codec-row{display:flex;align-items:center;gap:10px;width:100%}.input-wrapper{position:relative;flex:1 1 auto}.settings input{width:100%;height:44px;border-radius:12px;border:1px solid var(--m3-border);padding:0 35px 0 16px;font-size:14px;outline:none;background:var(--m3-card);color:var(--m3-text);transition:border-color .2s}.btn-mini-clear-input{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;border:none;background:transparent;color:var(--m3-on-surface-variant);font-size:18px;font-weight:400;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .18s ease;opacity:0;visibility:hidden;padding:0}.btn-mini-clear-input:hover{color:var(--m3-text)}.dark .btn-mini-clear-input{color:var(--m3-on-surface-variant)}.dark .btn-mini-clear-input:hover{color:var(--m3-text)}.input-wrapper.has-input .btn-mini-clear-input{opacity:1;visibility:visible}.dark .settings input{background:var(--m3-card);color:var(--m3-text);border-color:var(--m3-border)}.settings input:focus,.input-wrap textarea:focus{border-color:var(--m3-primary);box-shadow:0 0 0 2px #6750a438}.dark .settings input:focus,.dark .input-wrap textarea:focus{box-shadow:0 0 0 2px #d0bcff4d}.single-layout{display:grid;grid-template-columns:1fr;gap:18px}.textarea-wrap{position:relative}.input-wrap textarea{width:100%;min-height:150px;resize:vertical;border-radius:16px;border:1px solid var(--m3-border);padding:12px 118px 12px 16px;font-size:15px;line-height:1.6;outline:none;background:var(--m3-card);color:var(--m3-text);transition:border-color .2s}.dark .input-wrap textarea{background:var(--m3-card);color:var(--m3-text);border-color:var(--m3-border)}.dark .input-wrap textarea::placeholder{color:var(--m3-on-surface-variant)}.btn-mini{position:absolute;top:10px;right:10px;min-width:0;height:32px;padding:0 12px;border:1px solid var(--m3-outline);border-radius:8px;background:var(--m3-surface);color:var(--m3-primary);font-size:12px;font-weight:500;line-height:1;z-index:2;box-shadow:var(--m3-shadow);opacity:0;visibility:hidden;pointer-events:none;transition:background .18s ease,border-color .18s ease,opacity .18s ease}.btn-mini-clear{top:48px;color:var(--m3-error);border-color:var(--m3-error);background:var(--m3-surface)}.textarea-wrap.has-text .btn-mini,.output-panel.has-text .output-actions .btn-mini{opacity:1;visibility:visible;pointer-events:auto}.btn-mini:hover{background:var(--m3-surface-container-high)}.btn-mini-clear:hover{background:#b3261e14}.dark .btn-mini{background:var(--m3-dark-surface);color:var(--m3-primary);border-color:var(--m3-outline);box-shadow:none}.dark .btn-mini-clear{color:var(--m3-error);border-color:var(--m3-error);background:var(--m3-dark-surface)}.dark .btn-mini:hover{background:var(--m3-surface-container-high)}.dark .btn-mini-clear:hover{background:#f2b8b514}.actions{display:flex;gap:12px;justify-content:flex-start;flex-wrap:nowrap;width:100%;min-width:0}.actions-row>button{flex:1 1 0;min-width:0;white-space:nowrap}.btn-encode,.btn-decode,.actions .btn-clear{display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:126px;padding:0 24px;border:none;border-radius:24px;font-size:14px;font-weight:500;letter-spacing:.1px;line-height:1;cursor:pointer;transition:background .18s ease,box-shadow .18s ease;box-shadow:var(--m3-shadow)}.settings .btn-clear{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--m3-outline);border-radius:20px;background:transparent;color:var(--m3-primary);font-size:14px;font-weight:500;letter-spacing:.1px;line-height:1;cursor:pointer;transition:background .18s ease}.btn-content{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1}.btn-icon{width:16px;height:16px;display:block;flex:0 0 auto}.btn-icon-key{width:18px;height:18px;transform:translateY(-.5px)}.btn-encode{background:var(--m3-primary);color:var(--m3-on-primary)}.btn-encode:hover{background:var(--m3-primary-hover);box-shadow:0 2px 6px #0003,0 1px 3px #0000004d}.btn-decode{background:var(--m3-blue);color:#fff}.btn-decode:hover{background:var(--m3-blue-hover);box-shadow:0 2px 6px #0003,0 1px 3px #0000004d}.actions .btn-clear{background:var(--m3-error);color:var(--m3-on-error);border:none}.actions .btn-clear:hover{background:var(--m3-error-hover);box-shadow:0 2px 6px #0003,0 1px 3px #0000004d}.settings .btn-clear:hover{background:#6750a414}.dark .btn-encode{background:var(--m3-primary);color:var(--m3-on-primary)}.dark .btn-encode:hover{background:var(--m3-primary-hover)}.dark .btn-decode{background:var(--m3-blue);color:#fff}.dark .btn-decode:hover{background:var(--m3-blue-hover)}.dark .actions .btn-clear{background:var(--m3-error);color:var(--m3-on-error)}.dark .actions .btn-clear:hover{background:var(--m3-error-hover)}.dark .settings .btn-clear{background:transparent;color:var(--m3-primary);border-color:var(--m3-outline)}.dark .settings .btn-clear:hover{background:#d0bcff14}.output-panel{border:1px solid var(--m3-border);border-radius:16px;background:var(--m3-surface-container);padding:14px}.dark .output-panel{background:var(--m3-surface-container);border-color:var(--m3-border)}.output-head{display:flex;align-items:center;justify-content:flex-start;gap:10px}.output-panel{position:relative}.output-actions{position:absolute;top:42px;right:10px;width:48px;height:68px;z-index:10}.output-actions .btn-mini{position:absolute;top:0;right:0}.output-actions .btn-mini-clear{top:38px;right:0}.output-box{position:relative;width:100%;height:150px;resize:vertical;overflow:auto;border-radius:12px}.output-text{height:100%;font-size:15px;line-height:1.6;color:var(--m3-text);white-space:pre-wrap;word-break:break-word}.dark .output-box{background:var(--m3-card);border-color:var(--m3-border)}.dark .output-text{color:var(--m3-text)}.toast-wrap{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}.toast{width:max-content;max-width:min(92vw,420px);padding:16px 24px;border-radius:12px;background:var(--m3-surface-container-highest);color:var(--m3-text);font-size:14px;line-height:1.5;box-shadow:0 4px 8px 3px #00000026,0 1px 3px #0000004d;display:flex;align-items:center;gap:8px;transform:translateY(-8px);opacity:0;animation:toast-in .2s ease forwards}.toast-icon{width:16px;height:16px;flex:0 0 auto}.toast-icon.success{color:#22c55e}.toast-icon.error{color:var(--m3-error)}.toast-text{color:var(--m3-text)}.toast.hide{animation:toast-out .2s ease forwards}@keyframes toast-in{to{transform:translateY(0);opacity:1}}@keyframes toast-out{to{transform:translateY(-8px);opacity:0}}@media(max-width:640px){.app{padding:16px;border-radius:20px}.codec-row{flex-direction:row;align-items:center;flex-wrap:nowrap}.settings .btn-clear{width:auto;flex:0 0 auto;white-space:nowrap;padding:0 12px}.input-wrap textarea,.output-box{height:150px}.output-text{height:100%}.btn-encode,.btn-decode,.actions .btn-clear{min-width:0;padding:0 12px;font-size:14px;border-radius:20px}.actions{gap:8px}.btn-content{gap:4px}.btn-icon,.btn-icon-key{width:18px;height:18px;transform:none}.output-head{align-items:flex-start}}