*{box-sizing:border-box;margin:0;padding:0}body{color:#e2e8f0;background:#0f172a;min-height:100vh;font-family:Inter,Segoe UI,Arial,sans-serif}#root{width:100%;height:100vh}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1e293b}::-webkit-scrollbar-thumb{background:#475569;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#64748b}button{cursor:pointer;border:none;outline:none;font-family:inherit}input{border:none;outline:none;font-family:inherit}*{transition:all .2s ease-in-out}.app{flex-direction:column;min-height:100vh;display:flex;position:relative}.bg-shape{filter:blur(120px);opacity:.25;z-index:0;border-radius:50%;position:absolute}.s1{background:#6366f1;width:300px;height:300px;top:-50px;left:-50px}.s2{background:#22c55e;width:300px;height:300px;bottom:-50px;right:-50px}.s3{background:#f59e0b;width:250px;height:250px;top:50%;left:50%;transform:translate(-50%,-50%)}.header{text-align:center;z-index:1;padding:20px}.logo{font-size:24px;font-weight:700}.logo-text em{color:#6366f1;font-style:normal}.tagline{color:#94a3b8;font-size:14px}.main{grid-template-columns:1fr 1fr;gap:20px;height:calc(100vh - 100px);padding:20px;display:grid}.panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1e293bb3;border-radius:16px;flex-direction:column;max-height:100%;padding:20px;display:flex;overflow:hidden}.panel-section{margin-bottom:5px}.field-label{color:#cbd5f5;margin-bottom:8px;font-size:14px;display:block}.lang-grid{flex-wrap:wrap;gap:10px;display:flex}.lang-btn{color:#e2e8f0;background:#1e293b;border:1px solid #0000;border-radius:10px;padding:10px 14px;transition:all .2s}.lang-btn:hover{background:#334155}.lang-btn.active{background:#1e293b;border:1px solid #6366f1}.drop-zone{text-align:center;cursor:pointer;border:2px dashed #475569;border-radius:12px;padding:30px;transition:all .2s}.drop-zone:hover{border-color:#6366f1}.drop-zone.drag-over{background:#22c55e1a;border-color:#22c55e}.preview-img{border-radius:10px;max-width:100%;max-height:50vh}.convert-btn{color:#fff;background:#6366f1;border-radius:12px;width:100%;margin-top:5px;padding:4px;font-weight:700;transition:all .2s}.convert-btn:hover{background:#4f46e5}.convert-btn.loading{opacity:.7;cursor:not-allowed}.error-box{color:#f87171;background:#ef44441a;border-radius:10px;margin-top:10px;padding:10px}.code-header{justify-content:space-between;margin-bottom:10px;display:flex}.code-title{font-weight:700}.code-actions{gap:10px;display:flex}.action-btn{color:#e2e8f0;background:#1e293b;border-radius:8px;padding:6px 10px}.action-btn:hover{background:#334155}.code-body{background:#020617;border-radius:12px;flex:1;max-height:100%;padding:10px;overflow:auto}.code-empty{text-align:center;color:#64748b}.change-btn{color:#fff;background:#334155;border-radius:8px;margin-top:10px;padding:6px 10px}