/* ==========================================================================
   ZHH Tools — Aurora Ink design system
   Palette: midnight indigo base, violet + cyan + rose aurora accents, glass
   Type: Sora (display) / Inter (body) / JetBrains Mono (data)
   ========================================================================== */

:root{
  --bg: #0B0E1A;
  --bg-elevated: #10142a;
  --ink: #F5F6FA;
  --ink-muted: #9CA3C0;
  --ink-faint: #6b7396;

  --violet: #7C5CFF;
  --violet-soft: #a892ff;
  --cyan: #22D3EE;
  --rose: #FF6FA5;

  --glass-bg: rgba(255,255,255,0.055);
  --glass-bg-strong: rgba(255,255,255,0.09);
  --glass-border: rgba(255,255,255,0.14);
  --glass-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --font-display: 'Sora', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --ease: cubic-bezier(.22,1,.36,1);
  --nav-h: 76px;

  color-scheme: dark;
}

html[data-theme="light"]{
  --bg: #F3F2FB;
  --bg-elevated: #ffffff;
  --ink: #14162B;
  --ink-muted: #565C7C;
  --ink-faint: #8A8FB0;

  --glass-bg: rgba(255,255,255,0.55);
  --glass-bg-strong: rgba(255,255,255,0.75);
  --glass-border: rgba(20,22,43,0.08);
  --glass-shadow: 0 20px 50px -24px rgba(60,50,120,0.25);
  color-scheme: light;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
}

img,svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; }
button{ font: inherit; color: inherit; background:none; border:none; cursor:pointer; }
input,select,textarea{ font: inherit; color: inherit; }

::selection{ background: var(--violet); color:#fff; }

/* focus visibility for a11y */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link{
  position:fixed; top:-60px; left:16px; z-index:9999;
  background: var(--violet); color:#fff; padding: 10px 18px; border-radius: 10px;
  transition: top .25s var(--ease);
}
.skip-link:focus{ top: 16px; }

/* ============ scrollbar ============ */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--violet), var(--cyan)); border-radius: 10px; }

/* ============ background ambience ============ */
.bg-scene{
  position: fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none;
}
.ambient-blob{
  position:absolute; border-radius:50%; filter: blur(90px); opacity:.55;
  will-change: transform;
  transition: opacity .6s var(--ease);
}
.blob-violet{ width:46vw; height:46vw; background: var(--violet); top:-12%; left:-10%; animation: drift1 22s ease-in-out infinite; }
.blob-cyan{ width:38vw; height:38vw; background: var(--cyan); bottom:-14%; right:-8%; animation: drift2 26s ease-in-out infinite; }
.blob-rose{ width:30vw; height:30vw; background: var(--rose); top:38%; right:20%; animation: drift3 30s ease-in-out infinite; opacity:.35;}
html[data-theme="light"] .ambient-blob{ opacity:.28; }

@keyframes drift1{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(6vw,8vh) scale(1.12);} }
@keyframes drift2{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-7vw,-6vh) scale(1.08);} }
@keyframes drift3{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-4vw,5vh) scale(1.15);} }

.noise-overlay{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

/* ============ glass card base ============ */
.glass-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

/* ============ typography ============ */
h1,h2,h3,h4{ font-family: var(--font-display); letter-spacing: -0.02em; font-weight:700; }
.eyebrow{
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 14px; font-weight:500;
}
.gradient-text{
  background: linear-gradient(100deg, var(--violet-soft), var(--cyan) 55%, var(--rose));
  -webkit-background-clip: text; background-clip:text; color: transparent;
}

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 28px; border-radius: 999px; font-weight:600; font-size:.98rem;
  position: relative; overflow:hidden; isolation:isolate;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: scale(.96); }
.btn-primary{
  background: linear-gradient(120deg, var(--violet), #9d7bff);
  color:#fff; box-shadow: 0 10px 30px -8px rgba(124,92,255,.65);
}
.btn-primary:hover{ box-shadow: 0 14px 40px -8px rgba(124,92,255,.85); transform: translateY(-2px); }
.btn-outline{
  border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--ink);
}
.btn-outline:hover{ background: var(--glass-bg-strong); transform: translateY(-2px); }
.btn-ghost{
  background: transparent; border: 1px solid var(--glass-border); color: var(--ink);
  padding: 10px 20px; font-size: .9rem;
}
.btn-ghost:hover{ background: var(--glass-bg); }
.btn-whatsapp{
  background: linear-gradient(120deg,#25D366,#128C7E); color:#fff;
  box-shadow: 0 10px 30px -10px rgba(37,211,102,.6);
}
.btn-whatsapp:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(37,211,102,.8); }

/* ripple */
.btn::after{
  content:''; position:absolute; inset:0; border-radius: inherit;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,.35), transparent 60%);
  opacity:0; transition: opacity .4s;
  z-index:-1;
}
.btn:active::after{ opacity:1; transition: none; }

/* ============ icon buttons ============ */
.icon-btn{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border-radius: 50%; background: var(--glass-bg); border:1px solid var(--glass-border);
  transition: all .25s var(--ease); position:relative;
}
.icon-btn:hover{ background: var(--glass-bg-strong); transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(124,92,255,.5); }
.icon-btn.sm{ width:36px; height:36px; }
.icon-btn.active{ color: var(--cyan); border-color: var(--cyan); }

[data-tooltip]{ position:relative; }
[data-tooltip]::before{
  content: attr(data-tooltip);
  position:absolute; bottom: calc(100% + 10px); left:50%; transform: translateX(-50%) translateY(4px);
  background: var(--bg-elevated); color: var(--ink); font-size:.72rem; padding: 6px 10px; border-radius:8px;
  white-space:nowrap; opacity:0; pointer-events:none; transition: all .2s var(--ease);
  border: 1px solid var(--glass-border);
  z-index: 50;
}
[data-tooltip]:hover::before{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ============ loader ============ */
.loader{
  position:fixed; inset:0; z-index: 10000;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg);
  transition: opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--ease);
}
.loader.fade-out{ opacity:0; filter: blur(16px); transform: scale(1.06); pointer-events:none; }

.loader-blobs{ position:absolute; inset:0; overflow:hidden; }
.loader-blobs .blob{ position:absolute; border-radius:50%; filter: blur(80px); opacity:.5; }
.blob-a{ width:40vw; height:40vw; background: var(--violet); top:-10%; left:-10%; animation: drift1 10s ease-in-out infinite; }
.blob-b{ width:34vw; height:34vw; background: var(--cyan); bottom:-12%; right:-6%; animation: drift2 12s ease-in-out infinite; }
.blob-c{ width:26vw; height:26vw; background: var(--rose); top:40%; right:30%; animation: drift3 14s ease-in-out infinite; opacity:.3; }

.loader-card{ position:relative; z-index:2; text-align:center; padding: 40px; }
.loader-ring{
  width:120px; height:120px; margin: 0 auto 28px; position:relative;
  border-radius:50%; border: 2px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center;
  animation: spin 3.2s linear infinite;
}
.loader-ring::before{
  content:''; position:absolute; inset:-2px; border-radius:50%;
  border: 2px solid transparent; border-top-color: var(--violet); border-right-color: var(--cyan);
}
.ring-glow{
  position:absolute; inset:-16px; border-radius:50%;
  background: conic-gradient(from 0deg, var(--violet), var(--cyan), var(--rose), var(--violet));
  filter: blur(18px); opacity:.55; animation: spin 4s linear infinite reverse;
}
.loader-logo{
  font-family: var(--font-display); font-weight:800; font-size:1.6rem;
  background: var(--bg-elevated); width:78px; height:78px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; position:relative; z-index:2;
  color:#fff; letter-spacing: -0.02em;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.loader-welcome{ font-family: var(--font-display); font-size:1.3rem; font-weight:600; margin-bottom:20px; }
.loader-welcome span{ color: var(--cyan); }
.loader-bar-track{
  width:240px; height:6px; border-radius:99px; background: var(--glass-bg); margin: 0 auto 12px;
  overflow:hidden; border: 1px solid var(--glass-border);
}
.loader-bar-fill{
  height:100%; width:0%; border-radius:99px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  transition: width .25s var(--ease);
}
.loader-percent{ font-family: var(--font-mono); font-size:.85rem; color: var(--ink-muted); margin-bottom: 18px; }
.loader-dev{ font-size:.82rem; color: var(--ink-faint); }
.loader-dev strong{ color: var(--ink-muted); }

/* ============ offline banner ============ */
/* Floating pill, bottom-center — never covers the navbar or blocks content */
.offline-banner{
  position: fixed; bottom: 26px; left:50%; transform: translateX(-50%); z-index: 1500;
  background: linear-gradient(90deg, #b3491f, #c0392b);
  color:#fff; text-align:center; padding: 12px 22px; font-size:.85rem;
  display:flex; align-items:center; justify-content:center; gap:10px;
  border-radius: 999px; box-shadow: 0 16px 40px -14px rgba(192,57,43,.7);
  max-width: min(92vw, 440px);
  animation: slideUpFade .4s var(--ease);
}
.offline-banner .dot{ width:8px; height:8px; border-radius:50%; background:#fff; flex-shrink:0; animation: pulse 1.4s ease-in-out infinite; }
@keyframes slideUpFade{ from{ opacity:0; transform: translateX(-50%) translateY(16px); } to{ opacity:1; transform: translateX(-50%) translateY(0); } }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.3;} }

/* Keep it clear of the scroll-to-top button and toast stack on small screens */
@media (max-width: 560px){
  .offline-banner{ bottom: 90px; padding: 10px 18px; font-size:.8rem; }
}

/* ============ navbar ============ */
.navbar{
  position: sticky; top:0; z-index: 900;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: rgba(11,14,26,0.55);
  border-bottom: 1px solid var(--glass-border);
  transition: background .4s var(--ease);
}
html[data-theme="light"] .navbar{ background: rgba(255,255,255,0.6); }
.nav-inner{
  max-width: 1240px; margin: 0 auto; height: var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
  padding: 0 28px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:800; color:#fff;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  box-shadow: 0 8px 20px -6px rgba(124,92,255,.6);
}
.brand-mark.small{ width:36px; height:36px; font-size:.9rem; }
.brand-text{ font-family: var(--font-display); font-weight:700; font-size:1.1rem; }
.brand-text em{ font-style:normal; color: var(--cyan); }

.nav-links{ display:flex; gap: 8px; }
.nav-links a{
  padding: 10px 16px; border-radius: 999px; font-size:.92rem; color: var(--ink-muted);
  transition: all .25s var(--ease);
}
.nav-links a:hover{ color: var(--ink); background: var(--glass-bg); }

.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-burger{ display:none; }
.nav-mobile{
  display:none; flex-direction:column; padding: 10px 20px 20px;
  border-top: 1px solid var(--glass-border);
}
.nav-mobile a{ padding: 12px 6px; border-bottom: 1px solid var(--glass-border); color: var(--ink-muted); }
.nav-mobile.open{ display:flex; }

/* ============ hero ============ */
.hero{ position:relative; padding: 64px 28px 40px; }
.hero-inner{
  max-width: 1240px; margin:0 auto; display:grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items:center;
  min-height: 66vh;
}
.hero-title{
  font-size: clamp(2.4rem, 5.4vw, 3.8rem); line-height:1.08; margin: 6px 0 22px;
}
.hero-sub{ color: var(--ink-muted); max-width: 46ch; font-size:1.05rem; margin-bottom: 32px; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 44px; }
.hero-stats{ display:flex; gap: 40px; }
.hero-stats dt{ font-family: var(--font-display); font-size:1.6rem; font-weight:800; }
.hero-stats dd{ color: var(--ink-faint); font-size:.82rem; margin-top:2px; }

.hero-visual{ position:relative; height: 440px; display:flex; align-items:center; justify-content:center; }
.orbit-ring{
  position:absolute; border-radius:50%; border:1px solid var(--glass-border);
}
.ring-1{ width:260px; height:260px; animation: spin 40s linear infinite; }
.ring-2{ width:340px; height:340px; animation: spin 60s linear infinite reverse; border-style:dashed; }
.ring-3{ width:420px; height:420px; animation: spin 80s linear infinite; opacity:.6; }
.orbit-glyph{
  position:absolute; font-family: var(--font-display); font-size:1.3rem; color: var(--ink-muted);
  animation: spin 40s linear infinite;
}
.g1{ top:6%; left:50%; } .g2{ top:50%; right:2%; } .g3{ bottom:6%; left:50%; }
.g4{ top:50%; left:2%; } .g5{ top:16%; right:14%; } .g6{ bottom:16%; left:14%; }

.hero-card{
  position:relative; z-index:3; width: min(340px, 84vw); padding: 26px; text-align:left;
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }
.hero-card-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.chip{
  padding:5px 12px; border-radius:999px; background: var(--glass-bg-strong); border:1px solid var(--glass-border);
  font-family: var(--font-mono); font-size:.75rem;
}
.swap-mini{ color: var(--ink-faint); }
.hero-card-text{ font-size:.95rem; margin-bottom: 10px; }
.hero-card-text.translated{ color: var(--cyan); }

.scroll-cue{ display:flex; justify-content:center; margin-top: 10px; }
.scroll-cue span{
  width:26px; height:42px; border-radius:99px; border:2px solid var(--glass-border); position:relative; display:block;
}
.scroll-cue span::before{
  content:''; position:absolute; top:8px; left:50%; width:4px; height:8px; background: var(--cyan);
  border-radius:99px; transform: translateX(-50%); animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue{ 0%{ opacity:1; top:8px;} 70%{opacity:0; top:22px;} 100%{opacity:0; top:8px;} }

/* ============ section shared ============ */
section{ padding: 90px 28px; position:relative; }
.section-head{ max-width: 1240px; margin: 0 auto 48px; text-align:center; }
.section-head h2{ font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.section-sub{ color: var(--ink-muted); margin-top:12px; }

/* ============ translator ============ */
.translator-shell{ max-width: 1000px; margin:0 auto; padding: 28px; }
.translator-toolbar{
  display:flex; align-items:center; justify-content:center; gap: 14px; margin-bottom: 22px; flex-wrap:wrap;
}
.lang-picker{ position:relative; }
.lang-btn{
  display:flex; align-items:center; gap:10px; padding: 12px 18px; border-radius: 14px;
  background: var(--glass-bg); border:1px solid var(--glass-border); min-width:180px; justify-content:space-between;
  transition: all .25s var(--ease);
}
.lang-btn:hover{ background: var(--glass-bg-strong); }
.flag{ font-size:1.2rem; }
.swap-btn{
  width:46px; height:46px; border-radius:50%; background: linear-gradient(135deg, var(--violet), var(--cyan));
  color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: transform .35s var(--ease);
}
.swap-btn:hover{ transform: rotate(180deg) scale(1.06); }

.lang-dropdown{
  position:absolute; top: calc(100% + 10px); left:0; width: 300px; max-height: 360px; z-index:60;
  background: var(--bg-elevated); border:1px solid var(--glass-border); border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow); overflow:hidden; display:flex; flex-direction:column;
  animation: dropIn .25s var(--ease);
}
@keyframes dropIn{ from{ opacity:0; transform: translateY(-8px) scale(.98);} to{ opacity:1; transform: translateY(0) scale(1);} }
.lang-search{ display:flex; align-items:center; gap:8px; padding: 12px 14px; border-bottom:1px solid var(--glass-border); color: var(--ink-faint); }
.lang-search input{ background:transparent; border:none; width:100%; color: var(--ink); }
.lang-search input:focus-visible{ outline:none; }
.lang-list{ overflow-y:auto; padding: 6px; }

/* Sheet-only chrome — invisible on desktop, shown by the mobile media query below */
.lang-sheet-handle{ display:none; }
.lang-sheet-header{ display:none; }

/* Shared dimmed backdrop behind the mobile sheet */
.lang-sheet-overlay{
  position: fixed; inset:0; z-index: 1800;
  background: rgba(4,6,14,.55); backdrop-filter: blur(2px);
  animation: fadeIn .25s var(--ease);
}
.lang-option{
  display:flex; align-items:center; gap:10px; width:100%; padding: 10px 12px; border-radius:10px; text-align:left;
  font-size:.92rem;
}
.lang-option:hover, .lang-option.active{ background: var(--glass-bg); }
.lang-option .native{ color: var(--ink-faint); font-size:.8rem; margin-left:auto; }
.lang-option.active{ color: var(--cyan); }
.lang-option.active .native{ color: var(--cyan); opacity:.75; }
.lang-option.active::after{
  content:'✓'; font-weight:700; color: var(--cyan); margin-left:8px; flex-shrink:0;
}

.translator-panels{ display:grid; grid-template-columns: 1fr auto 1fr; gap: 0; }
.panel{ display:flex; flex-direction:column; min-height: 220px; }
.panel-divider{ width:1px; background: var(--glass-border); margin: 6px 20px; }
.panel-text{
  flex:1; background:transparent; border:none; resize:none; font-size:1.05rem; padding: 8px 6px; line-height:1.55;
}
.panel-text:focus-visible{ outline:none; }
.panel-text.output{ color: var(--ink); white-space: pre-wrap; }
.panel-text.output:empty::before{ content: attr(data-placeholder); color: var(--ink-faint); }
.output .word-highlight{ background: rgba(34,211,238,.25); border-radius:4px; }

.panel-footer{ display:flex; align-items:center; gap: 14px; padding-top: 10px; border-top: 1px solid var(--glass-border); margin-top:10px; flex-wrap:wrap; }
.panel-tools{ display:flex; gap:8px; }
.counter{ margin-left:auto; font-family: var(--font-mono); font-size:.75rem; color: var(--ink-faint); }

.mic-wave{ display:flex; align-items:center; gap:3px; height:22px; }
.mic-wave span{
  width:3px; border-radius:99px; background: var(--rose); animation: wave 1s ease-in-out infinite;
  height: 6px;
}
.mic-wave span:nth-child(1){ animation-delay:.0s; }
.mic-wave span:nth-child(2){ animation-delay:.12s; }
.mic-wave span:nth-child(3){ animation-delay:.24s; }
.mic-wave span:nth-child(4){ animation-delay:.36s; }
.mic-wave span:nth-child(5){ animation-delay:.48s; }
@keyframes wave{ 0%,100%{ height:6px;} 50%{ height:20px;} }
#micBtn.recording{ color: var(--rose); border-color: var(--rose); animation: micPulse 1.2s ease-in-out infinite; }
@keyframes micPulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(255,111,165,.5);} 50%{ box-shadow: 0 0 0 8px rgba(255,111,165,0);} }

.translator-actions{ display:flex; align-items:center; justify-content:center; gap:16px; margin: 26px 0 10px; }
.btn-translate{ min-width: 220px; }
.voice-mini-controls{ display:flex; gap:8px; }

.translator-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--glass-border); margin-top: 20px; }
.tab-btn{ padding: 10px 18px; font-size:.9rem; color: var(--ink-muted); border-bottom:2px solid transparent; }
.tab-btn.active{ color: var(--ink); border-color: var(--cyan); }
.translator-tab-panels{ padding-top: 18px; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.empty-state{ color: var(--ink-faint); font-size:.92rem; text-align:center; padding: 20px 0; }
.tab-panel-head{ display:flex; justify-content:flex-end; margin-bottom:10px; }
.link-btn{ color: var(--rose); font-size:.85rem; }
.link-btn:hover{ text-decoration:underline; }

.history-item, .fav-item, .recent-item{
  display:flex; align-items:center; gap:12px; padding: 12px 14px; border-radius: 12px;
  background: var(--glass-bg); border:1px solid var(--glass-border); margin-bottom:10px;
  animation: itemIn .35s var(--ease);
}
@keyframes itemIn{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform: translateY(0);} }
.history-item-text{ flex:1; min-width:0; }
.history-item-text p{ font-size:.9rem; }
.history-item-text .from{ color: var(--ink-faint); font-size:.78rem; margin-bottom:2px; }
.history-item-actions{ display:flex; gap:6px; flex-shrink:0; }

/* ============ popular chips ============ */
.chip-row{ max-width: 1000px; margin: 0 auto; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.phrase-chip{
  padding: 12px 20px; border-radius: 999px; background: var(--glass-bg); border:1px solid var(--glass-border);
  font-size:.9rem; transition: all .25s var(--ease);
}
.phrase-chip:hover{ background: var(--glass-bg-strong); transform: translateY(-3px); box-shadow: 0 10px 24px -12px rgba(124,92,255,.5); }

/* ============ features ============ */
.features-grid{
  max-width: 1240px; margin:0 auto; display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.feature-card{
  padding: 30px 24px; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.feature-card:hover{ transform: translateY(-8px); box-shadow: 0 24px 50px -20px rgba(124,92,255,.5); }
.feature-icon{ font-size:1.8rem; margin-bottom:14px; }
.feature-card h3{ font-size:1.1rem; margin-bottom:8px; }
.feature-card p{ color: var(--ink-muted); font-size:.92rem; }

/* ============ about ============ */
.about-grid{ max-width: 1100px; margin:0 auto; display:grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items:center; }
.about-copy p{ color: var(--ink-muted); margin-bottom: 16px; max-width:52ch; }
.about-copy h2{ margin-bottom:18px; font-size: clamp(1.8rem,3.4vw,2.4rem); }
.about-visual{ padding: 36px 30px; display:flex; flex-direction:column; gap: 26px; }
.about-stat{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--glass-border); padding-bottom:18px; }
.about-stat:last-child{ border-bottom:none; padding-bottom:0; }
.about-stat-num{ font-family: var(--font-display); font-size:2rem; font-weight:800; color: var(--cyan); }
.about-stat-label{ color: var(--ink-muted); font-size:.85rem; }

/* ============ developer ============ */
.developer-card{
  max-width: 900px; margin: 0 auto; padding: 44px; display:flex; gap: 34px; align-items:center;
}
.developer-avatar{
  width:100px; height:100px; border-radius: 28px; flex-shrink:0;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display);
  font-size:2rem; font-weight:800; color:#fff;
}
.developer-info h2{ font-size:1.7rem; margin: 4px 0 12px; }
.developer-info p{ color: var(--ink-muted); margin-bottom: 20px; max-width:56ch; }

/* ============ footer ============ */
.footer{ padding: 70px 28px 30px; border-top:1px solid var(--glass-border); }
.footer-inner{ max-width:1240px; margin:0 auto; display:flex; justify-content:space-between; gap:60px; flex-wrap:wrap; }
.footer-brand{ display:flex; gap:14px; align-items:flex-start; }
.footer-brand-name{ font-family: var(--font-display); font-weight:700; }
.footer-dev{ color: var(--ink-faint); font-size:.85rem; margin-top:4px; }
.footer-links{ display:flex; gap:56px; flex-wrap:wrap; }
.footer-col h4{ font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-faint); margin-bottom:14px; }
.footer-col a{ display:block; color: var(--ink-muted); font-size:.92rem; margin-bottom:10px; }
.footer-col a:hover{ color: var(--cyan); }
.footer-bottom{
  max-width:1240px; margin: 50px auto 0; padding-top: 24px; border-top:1px solid var(--glass-border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  color: var(--ink-faint); font-size:.85rem;
}
.back-to-top{ color: var(--ink-muted); }
.back-to-top:hover{ color: var(--cyan); }

/* ============ scroll top fab ============ */
.scroll-top-fab{
  position: fixed; bottom: 26px; right: 26px; z-index: 500;
  width:50px; height:50px; border-radius:50%;
  background: linear-gradient(135deg, var(--violet), var(--cyan)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 30px -10px rgba(124,92,255,.7);
  animation: floatY 4s ease-in-out infinite;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.scroll-top-fab:hover{ transform: translateY(-4px) scale(1.05); }

/* ============ settings panel ============ */
.settings-overlay, .modal-overlay{
  position: fixed; inset:0; background: rgba(4,6,14,.6); backdrop-filter: blur(4px); z-index: 2000;
  animation: fadeIn .3s var(--ease);
}
@keyframes fadeIn{ from{ opacity:0;} to{ opacity:1;} }
.settings-panel{
  position: fixed; top:0; right: -420px; width: min(400px, 90vw); height:100%; z-index: 2100;
  background: var(--bg-elevated); border-left: 1px solid var(--glass-border);
  padding: 28px; overflow-y:auto; transition: right .4s var(--ease);
}
.settings-panel.open{ right:0; }
.settings-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 30px; }
.settings-group{ margin-bottom: 34px; }
.settings-group h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-faint); margin-bottom:16px; }
.segmented{ display:flex; background: var(--glass-bg); border:1px solid var(--glass-border); border-radius: 12px; padding:4px; }
.segmented button{ flex:1; padding:10px; border-radius:9px; font-size:.86rem; color: var(--ink-muted); }
.segmented button.active{ background: linear-gradient(120deg, var(--violet), var(--cyan)); color:#fff; }
.settings-label{ display:flex; justify-content:space-between; font-size:.85rem; color: var(--ink-muted); margin: 16px 0 8px; }
.settings-select{
  width:100%; padding: 10px 12px; border-radius:10px; background: var(--glass-bg); border:1px solid var(--glass-border);
}
input[type="range"]{ width:100%; accent-color: var(--violet); }
.shortcuts-list li{ display:flex; justify-content:space-between; align-items:center; padding: 10px 0; border-bottom:1px solid var(--glass-border); font-size:.86rem; color: var(--ink-muted); }
.shortcuts-list li:last-child{ border-bottom:none; }
kbd{ background: var(--glass-bg-strong); border:1px solid var(--glass-border); border-radius:6px; padding:2px 6px; font-family: var(--font-mono); font-size:.75rem; margin: 0 2px; }

/* ============ modals ============ */
.modal{
  position: fixed; top:50%; left:50%; transform: translate(-50%,-50%); z-index: 2200;
  width: min(420px, 90vw); background: var(--bg-elevated); border:1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: 36px; text-align:center;
  box-shadow: var(--glass-shadow); animation: modalIn .35s var(--ease);
}
@keyframes modalIn{ from{ opacity:0; transform: translate(-50%,-46%) scale(.94);} to{ opacity:1; transform: translate(-50%,-50%) scale(1);} }
.modal-logo{
  width:64px; height:64px; margin: 0 auto 18px; border-radius:18px;
  background: linear-gradient(135deg, var(--violet), var(--cyan)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:800;
}
.install-modal h3{ margin-bottom: 10px; }
.install-modal p{ color: var(--ink-muted); font-size:.92rem; margin-bottom: 26px; }
.modal-actions{ display:flex; gap:12px; justify-content:center; }
.info-modal{ text-align:left; max-height: 78vh; overflow-y:auto; }
.info-modal h3{ margin-bottom: 16px; }
.info-body{ color: var(--ink-muted); font-size:.92rem; }
.info-body p{ margin-bottom: 12px; }
.modal-close{ position:absolute; top:16px; right:16px; }

/* ============ toasts ============ */
.toast-stack{ position: fixed; bottom: 26px; left: 26px; z-index: 3000; display:flex; flex-direction:column; gap:10px; }
.toast{
  padding: 14px 18px; border-radius: 14px; background: var(--bg-elevated); border:1px solid var(--glass-border);
  box-shadow: var(--glass-shadow); font-size:.88rem; display:flex; align-items:center; gap:10px;
  animation: toastIn .35s var(--ease);
  max-width: 320px;
}
.toast.success{ border-color: rgba(34,211,238,.4); }
.toast.error{ border-color: rgba(255,111,165,.4); }
.toast.leaving{ animation: toastOut .3s var(--ease) forwards; }
@keyframes toastIn{ from{ opacity:0; transform: translateX(-20px);} to{ opacity:1; transform: translateX(0);} }
@keyframes toastOut{ to{ opacity:0; transform: translateX(-20px);} }

/* ============ skeleton ============ */
.skeleton-line{
  height: 14px; border-radius: 6px; margin-bottom:8px;
  background: linear-gradient(90deg, var(--glass-bg) 25%, var(--glass-bg-strong) 50%, var(--glass-bg) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer{ 0%{ background-position: 200% 0;} 100%{ background-position: -200% 0;} }

/* ============ fullscreen ============ */
:fullscreen{ background: var(--bg); }

/* ============ responsive ============ */
@media (max-width: 980px){
  .features-grid{ grid-template-columns: repeat(2,1fr); }
  .hero-inner{ grid-template-columns: 1fr; text-align:center; gap: 40px; }
  .hero-copy{ order:2; }
  .hero-visual{ order:1; height: 340px; }
  .hero-cta{ justify-content:center; }
  .hero-stats{ justify-content:center; }
  .about-grid{ grid-template-columns: 1fr; }
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
}
@media (max-width: 720px){
  .translator-panels{ grid-template-columns: 1fr; }
  .panel-divider{ width:auto; height:1px; margin: 16px 0; }
  .developer-card{ flex-direction:column; text-align:center; }
  .features-grid{ grid-template-columns: 1fr; }
  .footer-inner{ flex-direction:column; gap:34px; }

  /* Language picker becomes a bottom sheet instead of a floating popup box */
  .lang-dropdown{
    position: fixed;
    top: auto; left:0; right:0; bottom:0;
    width: 100%;
    max-height: 75vh;
    z-index: 1900;
    border-radius: 24px 24px 0 0;
    border: 1px solid var(--glass-border);
    border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: sheetUp .32s var(--ease);
  }
  @keyframes sheetUp{
    from{ opacity:0; transform: translateY(100%); }
    to{ opacity:1; transform: translateY(0); }
  }

  .lang-sheet-handle{
    display:block; width:40px; height:5px; border-radius:99px;
    background: var(--glass-border); margin: 12px auto 0;
    flex-shrink:0;
  }
  .lang-sheet-header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 18px 6px;
  }
  .lang-sheet-header h4{ font-size:1rem; }

  .lang-search{ padding: 12px 18px; }
  .lang-list{ padding: 6px 10px 18px; }
  .lang-option{ padding: 14px 12px; font-size:1rem; }
}
@media (max-width: 560px){
  section{ padding: 60px 18px; }
  .translator-shell{ padding: 20px 16px; }
  .lang-btn{ min-width: 0; flex: 1 1 auto; padding: 12px 14px; }
  .translator-toolbar{ gap: 10px; }
  .icon-btn.sm{ width:40px; height:40px; }
  .icon-btn{ width:44px; height:44px; }
  .btn{ padding: 13px 22px; }
  .modal{ padding: 26px 22px; width: min(94vw, 420px); }
  .developer-card{ padding: 30px 22px; }
  .hero-stats{ gap: 26px; }
  [data-tooltip]::before{ display:none; } /* tooltips add no value on touch devices */
}

/* Touch devices: hover styles can get "stuck" after a tap since there's no
   real pointer to leave. Neutralize hover-only motion so cards/buttons don't
   look frozen mid-animation after being tapped. */
@media (hover: none) and (pointer: coarse){
  .btn:hover, .icon-btn:hover, .feature-card:hover, .phrase-chip:hover, .btn-outline:hover, .btn-primary:hover{
    transform: none;
  }
}