:root{--primary-bg: #020617;--secondary-bg: #0f172a;--accent-color: #38bdf8;--accent-glow: rgba(56, 189, 248, .4);--text-primary: #f8fafc;--text-secondary: #94a3b8;--glass-bg: rgba(15, 23, 42, .7);--glass-border: rgba(255, 255, 255, .08);--glass-blur: blur(16px);--card-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);font-family:Inter,system-ui,-apple-system,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--primary-bg);background-image:radial-gradient(circle at 10% 20%,rgba(56,189,248,.15) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(14,165,233,.15) 0%,transparent 40%),radial-gradient(circle at 50% 50%,rgba(2,6,23,1) 0%,transparent 100%);background-attachment:fixed;color:var(--text-primary);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow-x:hidden}#root{width:100%;max-width:1000px;padding:2rem}.app-container{display:flex;flex-direction:column;gap:3rem;perspective:1000px}header{text-align:center;margin-bottom:2rem;z-index:10}h1{font-family:Outfit,sans-serif;font-size:4rem;font-weight:800;letter-spacing:-.02em;background:linear-gradient(to bottom right,#fff 20%,#38bdf8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem;filter:drop-shadow(0 0 20px rgba(56,189,248,.3))}header p{color:var(--text-secondary);font-size:1.25rem;max-width:600px;margin:0 auto;line-height:1.6}.translator-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:32px;padding:3rem;box-shadow:var(--card-shadow);display:grid;grid-template-columns:1fr 1fr;gap:2rem;position:relative;overflow:hidden}.translator-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg at 50% 50%,transparent 0%,var(--accent-glow) 25%,transparent 50%);animation:rotate 10s linear infinite;opacity:.1;pointer-events:none}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.clear-btn{grid-column:1 / -1;background:transparent;border:1px solid var(--glass-border);color:var(--text-secondary);padding:.75rem;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9rem;margin-top:.5rem;transition:all .2s ease}.clear-btn:hover{background:#ffffff0d;color:var(--text-primary)}.app-footer{text-align:center;margin-top:1rem}.app-footer p{color:var(--text-secondary);font-size:.875rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.status-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;display:inline-block}@media (max-width: 850px){.translator-card{grid-template-columns:1fr;padding:2rem}}.input-section,.output-section{display:flex;flex-direction:column;gap:1rem;z-index:1}label{font-size:.75rem;font-weight:700;color:var(--accent-color);text-transform:uppercase;letter-spacing:.15em;opacity:.8}textarea{background:#0006;border:1px solid var(--glass-border);border-radius:16px;padding:1.25rem;color:var(--text-primary);font-family:inherit;font-size:1.1rem;line-height:1.6;resize:none;min-height:200px;transition:all .4s cubic-bezier(.4,0,.2,1)}textarea:focus{outline:none;border-color:var(--accent-color);background:#0009;box-shadow:0 0 30px #38bdf826}.output-area{background:linear-gradient(135deg,#38bdf80d,#0ea5e90d);border:1px solid var(--glass-border);border-radius:16px;padding:1.25rem;min-height:200px;color:var(--text-primary);position:relative;font-size:1.1rem;line-height:1.6;display:flex;align-items:center;justify-content:center;text-align:center}.translate-btn{grid-column:1 / -1;background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#020617;border:none;border-radius:16px;padding:1.25rem;font-size:1.25rem;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1rem;z-index:1}.translate-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 40px -10px #0ea5e980}.translate-btn:active{transform:translateY(0) scale(1)}.translate-btn:disabled{opacity:.3;cursor:not-allowed;transform:none}.loader{width:32px;height:32px;border:4px solid rgba(56,189,248,.2);border-radius:50%;border-top-color:var(--accent-color);animation:spin .8s cubic-bezier(.5,.1,.4,.9) infinite}.copy-btn{position:absolute;top:1rem;right:1rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:8px;padding:.5rem;color:var(--text-secondary);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.copy-btn:hover{color:var(--text-primary);background:#ffffff1a;transform:scale(1.1)}.tone-button{flex:1;padding:.75rem;border-radius:12px;border:1px solid var(--glass-border);background:#ffffff08;color:var(--text-secondary);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.tone-button.active{background:var(--accent-color);color:#020617;border-color:var(--accent-color);font-weight:700;box-shadow:0 0 20px #38bdf84d}.tone-button:hover:not(.active){background:#ffffff14;color:var(--text-primary);border-color:var(--text-secondary)}@keyframes spin{to{transform:rotate(360deg)}}