:root{--clr1:#09203F;--clr2:#537895;--btn-bg:rgba(255,255,255,.85);--btn-shadow:rgba(0,0,0,.15);--input-bg:rgba(255,255,255,.7);--input-shadow:rgba(0,0,0,.05);--radius:6px;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--gap:.75rem}
* {box-sizing:border-box;margin:0;padding:0}
body {font-family:var(--font);min-height:100vh;background:linear-gradient(45deg,var(--clr1),var(--clr2));background-size:400% 400%;animation:gradient 15s ease infinite;padding:1rem}
@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.header,.container{width:min(1100px,94vw);margin:1rem auto;background:rgba(255,255,255,.311);backdrop-filter:blur(15px);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.08);padding:1.25rem}
.header h1{text-align:center;margin-bottom:.35rem}
.header p{text-align:center;opacity:.9}
.controls{display:grid;grid-template-columns:1fr 140px 160px 140px 160px;gap:var(--gap)}
.controls input,.controls select{padding:.7rem 1rem;border:none;border-radius:var(--radius);background:var(--input-bg);box-shadow:inset 4px 4px 8px var(--input-shadow),inset -4px -4px 8px #fff}
.controls button{background:var(--btn-bg);border:none;border-radius:var(--radius);padding:.7rem 1rem;cursor:pointer;box-shadow:4px 4px 8px var(--btn-shadow),-4px -4px 8px #fff;transition:.2s}
.controls button:hover{transform:translateY(-2px)}
.output{margin-top:1rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.kw{background:rgba(255,255,255,.95);border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.1);padding:.9rem;display:flex;justify-content:space-between;gap:.75rem;align-items:center}
.kw .vol{font-size:.85rem;opacity:.8;background:rgba(0,0,0,.05);padding:.2rem .5rem;border-radius:999px;margin-left:auto;margin-right:.5rem}
.kw .text{word-break:break-word}
.kw button{padding:.4rem .8rem;border:none;border-radius:8px;background:var(--btn-bg);cursor:pointer}
.contact{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:var(--btn-bg);padding:.6rem 1.2rem;border-radius:var(--radius);text-decoration:none;color:#333;font-weight:700;box-shadow:0 4px 12px var(--btn-shadow)}
@media(max-width:900px){.controls{grid-template-columns:1fr 1fr 1fr}.controls button{width:100%}}
@media(max-width:560px){.controls{grid-template-columns:1fr}.controls button{width:100%}}