:root{
  --bg:#120e14; --fg:#f6eef4; --muted:#b7a8b4; --card:#1c1520;
  --line:#3a2a38; --accent:#f0a0d8; --shadow:0 18px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 "Segoe UI",system-ui,sans-serif}
a{color:inherit}
.bar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;min-height:52px;padding:.4rem .8rem;background:#161018;border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;text-decoration:none;font-weight:750;letter-spacing:-.03em}
.brand .name{
  font-size:1.25rem;
  background:linear-gradient(90deg,#ffe8f2,#ffc4e4,#e888cc);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand .tld{color:#db2777;font-size:1rem}
.bar-end{display:flex;align-items:center;gap:.55rem}
.uname{font-weight:700;font-size:.95rem;letter-spacing:.01em}
.uname-guest{color:#9a9590}
.uname-email{color:#fff}
.uname-sms{color:#f5d76e}
.menu{
  width:2.1rem;height:2.1rem;border-radius:.45rem;border:1px solid var(--line);
  background:#221824;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.22rem;
  cursor:pointer;padding:0;
}
.menu span{display:block;width:1rem;height:2px;background:#fff;border-radius:2px}
.menu-pop{
  position:absolute;right:.7rem;top:3.1rem;min-width:9rem;padding:.35rem;
  background:#1c1520;border:1px solid var(--line);border-radius:.6rem;box-shadow:var(--shadow);
}
.menu-pop a{display:block;padding:.4rem .55rem;text-decoration:none;border-radius:.4rem;font-weight:650}
.menu-pop a:hover{background:rgba(240,160,216,.12)}
.wrap{max-width:28rem;margin:0 auto;padding:1.3rem 1rem 3rem}
.kicker{margin:0;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;font-weight:700}
h1{margin:.25rem 0 .35rem;font-size:clamp(1.7rem,5vw,2.15rem);line-height:1.15;font-weight:760}
.lede{margin:0 0 1.1rem;color:#e7d5e4}
.langs{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem .4rem;margin:0 0 1.15rem;
}
.lang{
  display:flex;flex-direction:column;align-items:center;gap:.22rem;width:100%;margin:0;padding:.38rem .2rem .32rem;
  border:0;border-radius:1rem;cursor:pointer;color:var(--fg);font:inherit;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 18%,transparent 40%),
    linear-gradient(165deg,#3c2c38,#221820 45%,#100c10);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 -3px 7px rgba(0,0,0,.45) inset,0 8px 16px rgba(0,0,0,.25);
}
.lang.is-on{outline:2px solid var(--accent);outline-offset:1px}
.flag{
  width:100%;aspect-ratio:1.35/1;border-radius:.45rem;overflow:hidden;
  box-shadow:0 0 0 2px rgba(255,255,255,.18),0 6px 10px rgba(0,0,0,.35);
}
.flag img{display:block;width:100%;height:100%;object-fit:cover}
.native{font-size:.68rem;line-height:1.15;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1rem 1rem 1.05rem;box-shadow:var(--shadow);
}
.card h2{margin:0 0 .7rem;font-size:1.35rem}
.err{color:#ffb4c8;margin:.2rem 0 .55rem;font-size:.9rem}
.ok{color:#c8f0c4;margin:.2rem 0 .55rem}
.field{display:flex;flex-direction:column;gap:.3rem;margin:0 0 .75rem}
.field input{
  width:100%;padding:.62rem .7rem;border-radius:.55rem;border:1px solid #4a3848;background:#100c12;color:#fff;font:1rem/1.3 inherit;
}
.actions{display:grid;grid-template-columns:4.4rem 1fr 4.4rem;gap:.4rem;align-items:stretch}
.side,.go{
  border-radius:.55rem;font-weight:750;cursor:pointer;
}
.side{
  border:1px solid #4a3848;background:#221824;color:#fff;padding:.45rem .2rem;line-height:1.05;
}
.go{border:0;background:linear-gradient(180deg,#ffd0ec,#e888cc);color:#2a1020;padding:.55rem .4rem}
.guest-panel{margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--line)}
.cells{display:grid;grid-template-columns:repeat(8,1fr);gap:.2rem;margin:.35rem 0 .6rem}
.cells span{
  height:1.7rem;border-radius:.3rem;background:#0c0a0e;border:1px solid #3a2e38;
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.people{display:flex;flex-direction:column;gap:.45rem;margin-top:.4rem}
.person{
  display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;
  padding:.55rem .7rem;border-radius:.7rem;background:#241a26;border:1px solid var(--line);
}
.role{color:var(--muted);font-size:.78rem}
.note{color:var(--muted);font-size:.92rem}
@media (max-width:380px){
  .native{font-size:.6rem}
  .actions{grid-template-columns:3.6rem 1fr 3.6rem}
}