:root{
  --bg: 0 0% 6%;
  --card: 0 0% 9%;
  --muted: 0 0% 62%;
  --text: 0 0% 98%;
  --primary: 350 86% 46%;
  --primary-2: 345 86% 36%;
  --ring: 0 0% 100% / 12%;
  --shadow: 0 0% 0% / 40%;
  --glass: 0 0% 100% / 6%;
  --border: 0 0% 100% / 10%;
  --gradient: conic-gradient(from 180deg at 50% 50%, hsl(var(--primary)/.5), hsl(var(--primary-2)/.5), transparent 60%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:hsl(var(--text));
  background: radial-gradient(1200px 800px at 80% -10%, hsl(var(--primary)/.08), transparent 60%),
              radial-gradient(1200px 800px at 10% 110%, hsl(var(--primary-2)/.08), transparent 60%),
              linear-gradient(180deg, #0b0b0f, #0a0a0c 60%, #09090b);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  line-height:1.5;
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem;
}

.site-header{
  position: sticky; top:0; z-index:20;
  background: linear-gradient(180deg, #0b0b0f, transparent);
  border-bottom: 1px solid hsl(var(--border));
  backdrop-filter: blur(8px);
}

.brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:hsl(var(--text));
  font-weight:700; letter-spacing:.2px;
}
.brand-glyph{
  width:26px; height:26px; border-radius:7px;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-2)));
  box-shadow: 0 8px 24px hsl(var(--primary)/.32), 0 0 0 1px hsl(var(--border));
}
.brand-text{ font-size:1.02rem }

.hero{
  text-align:center; padding: 3rem 0 2rem;
  animation: fade-in .4s ease-out both;
}
.h1{ font-size: clamp(1.8rem, 1.6rem + 1.2vw, 2.6rem); margin:0 0 .6rem; letter-spacing:.3px }
.sub{ color:hsl(var(--muted)); margin:0 auto; max-width:52ch }

.translator-card{
  position:relative;
  margin-top:1.5rem;
  border-radius: 18px;
  background: color-mix(in oklab, #0b0b0f 85%, hsl(var(--primary)/.05));
  border:1px solid hsl(var(--border));
  padding: 1.2rem;
  overflow:hidden;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,.5);
}
.translator-card::before{
  content:""; position:absolute; inset:-2px;
  background: var(--gradient);
  filter: blur(14px);
  opacity:.25; z-index:0; pointer-events:none;
}
.translator-card > *{ position:relative; z-index:1 }

.lang-row{
  display:flex; gap:.75rem; align-items:center; justify-content:center; flex-wrap:wrap;
  margin-bottom:1rem;
}
.select{
  flex:1 1 260px;
  background: hsl(var(--card)/ / 1);
  color:hsl(var(--text));
  border: 1px solid hsl(var(--border));
  border-radius: 12px; padding:.75rem .9rem;
  outline: none;
  appearance:none;
  background-image:
    linear-gradient(180deg, transparent, transparent 60%, hsl(var(--glass))),
    radial-gradient(8px 8px at calc(100% - 14px) 50%, hsl(var(--muted)), transparent 60%);
  background-repeat:no-repeat;
  background-position: 0 0, right .6rem center;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.select:focus{ border-color: hsl(var(--primary)); box-shadow: 0 0 0 4px hsl(var(--primary)/.2) }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius: 12px; padding:.8rem 1rem;
  font-weight:600; letter-spacing:.2px; cursor:pointer;
  border:1px solid hsl(var(--border));
  background: hsl(var(--card)); color:hsl(var(--text));
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) scale(.98) }

.btn-primary{
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-2)));
  border-color: transparent;
  box-shadow: 0 10px 26px -8px hsl(var(--primary)/.45), 0 0 0 1px hsl(var(--primary)/.5) inset;
  color:white;
}
.btn-primary:hover{ box-shadow: 0 12px 28px -8px hsl(var(--primary)/.5), 0 0 0 1px hsl(var(--primary)/.6) inset }
.btn-ghost{
  background: transparent;
  border-color: hsl(var(--border));
  color:hsl(var(--text));
}
.btn-content{ display:inline-flex; align-items:center; gap:.6rem }
.spinner{
  width:0; height:0; border-radius:999px; border:2px solid transparent; border-top-color:white; opacity:0;
  transition: width .25s ease, height .25s ease, opacity .2s ease;
}
.loading .spinner{
  width:16px; height:16px; opacity:1; animation: spin 1s linear infinite;
}

.icon-btn{
  background: hsl(var(--glass));
  border:1px solid hsl(var(--border));
  color:hsl(var(--text));
  border-radius: 10px; padding:.5rem .65rem; cursor:pointer;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.icon-btn:hover{ transform: translateY(-1px); border-color:hsl(var(--primary)); box-shadow: 0 8px 20px -10px rgba(0,0,0,.6) }
.icon{ font-size:1.05rem; display:inline-block; line-height:1 }

.grid{
  display:grid; gap:1rem; grid-template-columns: 1fr; margin-top:.5rem;
}
@media (min-width: 920px){
  .grid{ grid-template-columns: 1fr 1fr }
}

.panel{
  background: linear-gradient(180deg, hsl(var(--card)), color-mix(in oklab, #0b0b0f 85%, hsl(var(--primary)/.06)));
  border: 1px solid hsl(var(--border));
  border-radius: 14px; padding:.9rem;
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.6);
  animation: enter .45s ease both;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.6rem;
}
.panel-title{ margin:0; font-size: .95rem; font-weight:700; letter-spacing:.3px }
.panel-actions{ display:flex; gap:.4rem }

.textarea{
  width:100%; min-height: 200px; resize: vertical;
  background: hsl(var(--bg)/ / 1);
  color:hsl(var(--text));
  border:1px solid hsl(var(--border));
  outline:none; border-radius: 10px; padding:.9rem;
  line-height:1.55;
  transition: border-color .18s ease, box-shadow .2s ease, transform .18s ease;
}
.textarea:focus{ border-color: hsl(var(--primary)); box-shadow: 0 0 0 4px hsl(var(--primary)/.15) }

.meta-row{
  margin-top:.55rem; display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}
.muted{ color:hsl(var(--muted)) }

.actions{
  margin-top:1.1rem; display:flex; gap:.7rem; flex-wrap:wrap; justify-content:flex-end;
}

.site-footer{ padding:2rem 1.25rem 3rem; text-align:center; color:hsl(var(--muted)) }

.typing::after{
  content:""; display:inline-block; width:1.2em; text-align:left;
  animation: dots 1.2s steps(3,end) infinite;
}

.toast{
  position: fixed; left:50%; bottom:24px; transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, hsl(var(--primary-2)/.9), hsl(var(--primary)));
  color:white; padding:.7rem 1rem; border-radius: 10px;
  box-shadow: 0 10px 30px -10px hsl(var(--shadow));
  opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0) }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }

@keyframes spin{ to{ transform: rotate(360deg) } }
@keyframes dots{ 0%{content:""} 33%{content:"."} 66%{content:".."} 100%{content:"..."} }
@keyframes fade-in{ from{ opacity:0; transform: translateY(8px) } to{ opacity:1; transform: translateY(0) } }
@keyframes enter{ from{ opacity:0; transform: scale(.98) } to{ opacity:1; transform: scale(1) } }