:root{--app-bg:#FFFFFF;--app-fg:#000000;--app-border:#E5E5E5;--app-muted:#737373;--app-surface:#FAFAFA;--glass-bg:rgba(255,255,255,.65);--glass-border:rgba(0,0,0,.05);--toast-bg:rgba(0,0,0,.85);--toast-fg:#FFFFFF;--transition-snappy:150ms cubic-bezier(.2,0,0,1)} @media (prefers-color-scheme:dark){:root{--app-bg:#030712;--app-fg:#f9fafb;--app-border:#1f2937;--app-muted:#9ca3af;--app-surface:#111827;--glass-bg:rgba(17,24,39,.65);--glass-border:rgba(255,255,255,.08);--toast-bg:rgba(255,255,255,.9);--toast-fg:#000000} body{background-color:var(--app-bg)!important;color:var(--app-fg)!important} .bg-mono-50,.bg-white{background-color:var(--app-bg)!important} .text-mono-900,.text-mono-800,.text-mono-700{color:var(--app-fg)!important} .bg-mono-900{background-color:var(--app-fg)!important;color:var(--app-bg)!important} .border-mono-200,.border-mono-800{border-color:var(--app-border)!important} .text-mono-400,.text-mono-500,.text-mono-300{color:var(--app-muted)!important} .bg-mono-100,.bg-mono-50\/50,.bg-mono-200{background-color:var(--app-surface)!important} } html,body{overscroll-behavior-y:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}::selection{background-color:var(--app-fg);color:var(--app-bg)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent;border-left:1px solid var(--app-border)}::-webkit-scrollbar-thumb{background-color:var(--app-border);border:2px solid var(--app-bg);border-radius:0}::-webkit-scrollbar-thumb:hover{background-color:var(--app-muted)}::-webkit-scrollbar-corner{background:var(--app-bg)} .editor-textarea{resize:none;outline:none;tab-size:2;caret-color:var(--app-fg);line-height:1.6} .highlight-border{transition:border-color var(--transition-snappy),box-shadow var(--transition-snappy)} .highlight-border:focus-within{border-color:var(--app-fg);box-shadow:inset 2px 0 0 0 var(--app-fg)} button{cursor:pointer;-webkit-tap-highlight-color:transparent} button:active{transform:scale(.97)} .lang-btn{transition:background-color var(--transition-snappy),color var(--transition-snappy),transform 50ms ease} input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1px solid var(--app-muted);background-color:var(--app-bg);cursor:pointer;position:relative;flex-shrink:0;transition:border-color var(--transition-snappy),background-color var(--transition-snappy)} input[type="checkbox"]:checked{background-color:var(--app-fg);border-color:var(--app-fg)} input[type="checkbox"]:checked::after{content:"";position:absolute;top:2px;left:5px;width:4px;height:8px;border:solid var(--app-bg);border-width:0 2px 2px 0;transform:rotate(45deg)} input[type="checkbox"]:focus-visible{outline:2px solid var(--app-fg);outline-offset:2px} input[type="range"]{-webkit-appearance:none;appearance:none;height:2px;background:var(--app-border);outline:none;cursor:pointer;width:100%} input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--app-fg);cursor:pointer} input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--app-fg);border:none;cursor:pointer} .loader-dots{display:flex;align-items:center;justify-content:center;gap:6px} .loader-dots div{background-color:var(--app-fg)!important;animation-timing-function:cubic-bezier(0,1,1,0)} .loader-dots div:nth-child(1){left:8px;animation:loader-dots1 .6s infinite} .loader-dots div:nth-child(2){left:8px;animation:loader-dots2 .6s infinite} .loader-dots div:nth-child(3){left:32px;animation:loader-dots2 .6s infinite} .loader-dots div:nth-child(4){left:56px;animation:loader-dots3 .6s infinite} @keyframes loader-dots1{0%{transform:scale(0)} 100%{transform:scale(1)} } @keyframes loader-dots3{0%{transform:scale(1)} 100%{transform:scale(0)} } @keyframes loader-dots2{0%{transform:translate(0,0)} 100%{transform:translate(24px,0)} } #drop-zone{border:2px dashed var(--app-border);transition:border-color 200ms,background 200ms} #drop-zone.dragover{border-color:var(--app-fg);background:var(--app-surface)} .strength-bar{height:3px;background:var(--app-border);overflow:hidden} .strength-fill{height:100%;background:var(--app-fg);transition:width 400ms cubic-bezier(.16,1,.3,1)} .file-item{border-bottom:1px solid var(--app-border);transition:background 100ms} .file-item:last-child{border-bottom:none} .file-item:hover{background:var(--app-surface)} [data-tip]{position:relative} [data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--app-fg);color:var(--app-bg);font-size:11px;padding:4px 8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 150ms;z-index:100} [data-tip]:hover::after{opacity:1} #toast-container{top:auto;bottom:32px;right:50%;transform:translateX(50%);align-items:center} .toast-msg{background:var(--toast-bg);color:var(--toast-fg);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);padding:10px 20px;border-radius:999px;font-size:13px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.12);border:1px solid var(--glass-border);animation:toast-slide-up .4s cubic-bezier(.16,1,.3,1) forwards} @keyframes toast-slide-up{0%{opacity:0;transform:translateY(20px) scale(.9)} 100%{opacity:1;transform:translateY(0) scale(1)} } @media (max-width:768px){header,#settings-panel,.h-9.bg-mono-50,.h-7.bg-mono-50{background:var(--glass-bg)!important;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-color:var(--glass-border)!important} #panel-code,#panel-compress,#panel-obfuscate,#panel-text,#panel-base64{margin:12px;border-radius:20px;box-shadow:0 12px 32px rgba(0,0,0,.08);border:1px solid var(--glass-border);overflow:hidden;background:var(--app-bg)} .border-r,.border-b,.border-t{border-color:var(--glass-border)!important} } .landing-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;text-align:center;background:radial-gradient(circle at center,var(--app-surface) 0%,var(--app-bg) 100%)} .landing-title{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;letter-spacing:-.04em;margin-bottom:1rem;color:var(--app-fg)} .landing-subtitle{font-size:clamp(1rem,2vw,1.25rem);color:var(--app-muted);max-width:600px;margin-bottom:2.5rem;line-height:1.6} .landing-cta{background:var(--app-fg);color:var(--app-bg);padding:14px 32px;border-radius:999px;font-weight:600;font-size:1rem;transition:transform var(--transition-snappy),opacity var(--transition-snappy)} .landing-cta:hover{opacity:.9;transform:scale(1.02)} .auth-wrapper{display:flex;justify-content:center;align-items:center;min-height:100vh;background:var(--app-bg);padding:1rem} .auth-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(32px) saturate(200%);backdrop-filter:blur(32px) saturate(200%);border:1px solid var(--glass-border);border-radius:24px;padding:3rem 2.5rem;width:100%;max-width:420px;box-shadow:0 24px 64px rgba(0,0,0,.06)} .auth-header{text-align:center;margin-bottom:2rem} .auth-header h2{font-size:1.75rem;font-weight:600;color:var(--app-fg);margin-bottom:.5rem} .auth-header p{color:var(--app-muted);font-size:.9rem} .auth-input-group{margin-bottom:1.25rem} .auth-input-group label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--app-muted);margin-bottom:.5rem} .auth-input{width:100%;padding:14px 16px;background:var(--app-surface);border:1px solid var(--app-border);border-radius:12px;color:var(--app-fg);font-size:1rem;transition:border-color var(--transition-snappy),box-shadow var(--transition-snappy)} .auth-input:focus{border-color:var(--app-fg);outline:none;box-shadow:0 0 0 1px var(--app-fg)} .auth-submit{width:100%;padding:14px;margin-top:1rem;background:var(--app-fg);color:var(--app-bg);border-radius:12px;font-weight:600;border:none} .legal-wrapper{min-height:100vh;background:var(--app-bg);padding:4rem 1rem} .legal-content{max-width:720px;margin:0 auto;color:var(--app-fg);line-height:1.8} .legal-content h1{font-size:2.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:1rem} .legal-content .last-updated{font-size:.85rem;color:var(--app-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3rem;display:block} .legal-content h2{font-size:1.5rem;font-weight:600;margin-top:3rem;margin-bottom:1rem} .legal-content p{color:var(--app-muted);font-size:1rem;margin-bottom:1.5rem} .legal-content ul{list-style-type:disc;padding-left:1.5rem;color:var(--app-muted);margin-bottom:1.5rem} .legal-content li{margin-bottom:.5rem}