:root{
  color-scheme: dark;
  --c-bg: 19 19 26;
  --c-surface: 27 27 34;
  --c-surface-2: 35 35 44;
  --c-line: 51 51 61;
  --c-accent: 232 168 56;
  --c-accent-sky: 79 195 247;
  --c-success: 74 222 128;
  --c-warning: 234 179 8;
  --c-error: 244 63 94;
  --c-text: 240 238 233;
  --c-muted: 173 173 186;
  --c-disabled: 108 108 122;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:rgb(var(--c-bg));
  color:rgb(var(--c-text));
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
img{max-width:100%;}
[hidden]{display:none!important;}
.font-mono, .phonetic{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible{
  outline: 2px solid rgb(var(--c-accent-sky));
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.app{
  max-width: 560px;
  margin: 0 auto;
  min-height: 100%;
  display:flex;
  flex-direction:column;
}
.statusbar{ height: 4px; }
.appbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--space-4);
}
.wordmark{
  font-weight:800; letter-spacing:-0.02em; font-size:1.15rem;
  color: rgb(var(--c-text)); margin:0;
}
.wordmark b{ color: rgb(var(--c-accent)); font-weight:800; }
.icon-btn{
  width:36px; height:36px; min-width:24px; min-height:24px;
  border-radius: var(--radius-full);
  border:1px solid rgb(var(--c-line));
  background: rgb(var(--c-surface));
  color: rgb(var(--c-text));
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  cursor:pointer;
}
.icon-btn:hover{ border-color: rgb(var(--c-accent-sky)); color: rgb(var(--c-accent-sky)); }
.icon-btn:disabled{ opacity:.35; cursor:default; }
.icon-btn:disabled:hover{ border-color: rgb(var(--c-line)); color: rgb(var(--c-text)); }
.icon-btn-sm{ width:32px; height:32px; }
.icon-btn-xs{ width:24px; height:24px; font-size:0.7rem; }

.pane-head-right{ display:flex; align-items:center; gap:var(--space-2); }
.pane-reorder{ display:flex; align-items:center; gap:4px; }

.add-lang-wrap{ padding: 0 var(--space-4) var(--space-4); }
.btn-add-lang{
  width:100%; background: rgb(var(--c-surface)); border:1px dashed rgb(var(--c-line));
  border-radius: var(--radius-lg); color: rgb(var(--c-accent)); font-weight:700;
  font-size:0.95rem; padding: var(--space-4); cursor:pointer; min-height:24px;
}
.btn-add-lang:hover{ border-color: rgb(var(--c-accent)); }
.add-lang-panel{
  background: rgb(var(--c-surface)); border:1px solid rgb(var(--c-line));
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.add-lang-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: var(--space-3);
}
.add-lang-panel-head h3{ margin:0; font-size:0.9rem; color: rgb(var(--c-text)); }
.add-lang-row{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:0; border-top:1px solid rgb(var(--c-line));
  color: rgb(var(--c-text)); font-size:0.92rem; padding: var(--space-3) 0;
  cursor:pointer; min-height:24px;
}
.add-lang-row:first-of-type{ border-top:0; }
.add-lang-row:hover{ color: rgb(var(--c-accent)); }
.icon-btn[aria-pressed="true"]{ border-color: rgb(var(--c-error)); color: rgb(var(--c-error)); }

.panes{
  display:flex; flex-direction:column; gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
  flex:1;
}
.pane{
  background: rgb(var(--c-surface));
  border:1px solid rgb(var(--c-line));
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: border-color 160ms ease, opacity 160ms ease;
}
.pane .pane-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: var(--space-2);
}
.pane .pane-lang{
  font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;
  color: rgb(var(--c-accent-sky));
  font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.pane .pane-flag{ font-size:0.9rem; }
.pane textarea{
  width:100%; border:0; background:transparent; resize:none;
  color: rgb(var(--c-text)); font: inherit; font-size:1.02rem; line-height:1.45;
  min-height:2.6rem; outline:none; display:block; padding:0;
}
.pane textarea::placeholder{ color: rgb(var(--c-disabled)); }
.pane .phonetic{
  display:block; margin-top: var(--space-2);
  font-size:0.82rem; color: rgb(var(--c-muted));
}
.pane .pane-play{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; color: rgb(var(--c-accent));
  font-size:0.78rem; cursor:pointer; padding:var(--space-1) 0;
  min-height:24px;
}
.pane .pane-play:hover{ color: rgb(var(--c-accent-sky)); }
.pane.active{ border-color: rgb(var(--c-accent)); }
.pane.demoted{ opacity:0.72; }
.pane.loading .skel{ }

.badge-speaking{
  display:inline-flex; align-items:center; gap:4px;
  font-size:0.66rem; text-transform:uppercase; letter-spacing:0.05em;
  color: rgb(var(--c-bg)); background: rgb(var(--c-accent));
  border-radius:999px; padding:2px 8px;
}
.pane-actions{ display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-3); flex-wrap:wrap; }
.btn-translate{
  background: rgb(var(--c-accent)); color: rgb(var(--c-bg));
  border:0; border-radius:999px; padding:6px 14px; font-weight:700; font-size:0.78rem;
  cursor:pointer; min-height:24px;
}
.btn-translate:hover:not(:disabled){ filter:brightness(1.08); }
.btn-translate:disabled{ opacity:.5; cursor:default; }

.skel{
  height:0.9rem; border-radius:6px; margin-bottom:8px;
  background: rgb(var(--c-surface-2));
  position:relative; overflow:hidden;
}
.skel::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(240,238,233,0.08), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer{ from{ transform:translateX(-100%);} to{ transform:translateX(100%);} }
.skel.w60{width:60%;} .skel.w80{width:80%;} .skel.w40{width:40%;}

.btn{
  border:0; border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-weight:700; font-size:0.85rem; cursor:pointer;
  min-height:24px;
}
.btn-accent{ background: rgb(var(--c-accent)); color: rgb(var(--c-bg)); }
.btn-accent:hover{ filter:brightness(1.08); }
.btn-ghost{
  background:transparent; color: rgb(var(--c-text));
  border:1px solid rgb(var(--c-line));
}
.btn-ghost:hover{ border-color: rgb(var(--c-accent-sky)); }

.recents{ padding: 0 var(--space-4) var(--space-6); }
.recents h3{
  font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;
  color: rgb(var(--c-muted)); margin: 0 0 var(--space-2);
}
.recent-item{
  padding: var(--space-2) 0;
  border-bottom:1px solid rgb(var(--c-line));
  cursor:pointer; background:none; border-left:0; border-right:0; border-top:0;
  width:100%; text-align:left; color:inherit; font:inherit;
}
.recent-item:hover .recent-src{ color: rgb(var(--c-accent-sky)); }
.recent-src{ font-size:0.92rem; color: rgb(var(--c-text)); margin:0; }
.recent-sub{ font-size:0.78rem; color: rgb(var(--c-muted)); margin:2px 0 0; }
.empty-state{
  text-align:center; padding: var(--space-6) var(--space-4);
  color: rgb(var(--c-muted)); font-size:0.85rem;
}

.banner-error{
  margin: 0 var(--space-4) var(--space-3);
  background: rgb(var(--c-surface));
  border:1px solid rgb(var(--c-error));
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display:flex; align-items:center; gap:var(--space-3);
  font-size:0.85rem;
}
.retry-wrap{ padding: 0 var(--space-4) var(--space-4); }
.banner-error .dot{
  width:8px; height:8px; border-radius:50%; background:rgb(var(--c-error));
  flex-shrink:0;
}

.gate-wrap{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: var(--space-6) var(--space-5);
  text-align:center;
  min-height:100vh;
}
.gate-wrap .wordmark{ font-size:2rem; margin-bottom: var(--space-2); }
.gate-wrap .tagline{ color: rgb(var(--c-muted)); font-size:0.85rem; margin-bottom: var(--space-6); }
.gate-field{ width:100%; max-width:320px; text-align:left; }
.gate-field label{
  display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;
  color: rgb(var(--c-muted)); margin-bottom:6px;
}
.gate-field input{
  width:100%; background: rgb(var(--c-surface));
  border:1px solid rgb(var(--c-line)); border-radius: var(--radius-md);
  padding: var(--space-3); color: rgb(var(--c-text)); font-size:1rem;
}
.gate-field input.err{ border-color: rgb(var(--c-error)); }
.gate-error{ color: rgb(var(--c-error)); font-size:0.8rem; margin-top:6px; text-align:left; min-height:1.2em; }
.gate-wrap .btn{ width:100%; margin-top: var(--space-4); padding: var(--space-3); font-size:0.95rem; }