:root{
  --bg:#0a0a0b;
  --card:#0f1012;
  --text:#e6e6e6;
  --muted:#8b8b8b;
  --border:#1a1b20;
  --accent:#bcbcbc;
  --radius:16px;
  --pad:16px;
  --speed:140ms;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.app-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px var(--pad);
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(0,0,0,.45);
  border-bottom:1px solid var(--border);
}

.app-title{
  font-weight:700; letter-spacing:.2px; font-size:16px;
}

.lang-toggle{
  font-size:11px; color:var(--muted);
  border:1px solid var(--border); border-radius:999px; padding:6px 10px;
  cursor:pointer; user-select:none;
  transition:border var(--speed) ease, transform var(--speed) ease, color var(--speed) ease;
}
.lang-toggle:hover{ border-color:var(--accent); color:var(--text); transform:translateY(-1px) }
.lang-toggle:active{ transform:translateY(0) scale(.99) }

.app-footer{
  margin-top:auto;
  padding:18px var(--pad) 24px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--muted);
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,0.02));
}
.version{ font-size:11px; opacity:.9 }
.dev{ font-size:10px; opacity:.75; text-align:center }