@font-face { font-family: Rubik; src: url(site-rubik-400.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Rubik; src: url(site-rubik-600.ttf) format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --ink: #0B1F33; --muted: #5C6F82; --line: #DCE4EC; --paper: #F3F6F9; --card: #FFFFFF;
  --navy: #0A2558; --blue: #0E4486; --ocean: #1666AE; --soft: #E8F0F8;
  --ok: #17803D; --okbg: #E5F5EB; --warn: #B4610A; --warnbg: #FDF0E0; --bad: #C0322B;
  --r: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: Rubik, system-ui, sans-serif; font-size: 16px; -webkit-text-size-adjust: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none; }

.shell { max-width: 640px; margin: 0 auto; min-height: 100vh; padding: 0 16px 96px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 12px; }
.top h1 { font-size: 20px; font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link { background: none; border: 0; color: var(--ocean); padding: 6px; font-size: 14px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 12px; }
.card h2 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.muted { color: var(--muted); font-size: 14px; }
.note { padding: 24px; text-align: center; color: var(--muted); }

.hero { text-align: center; padding: 30px 18px; background: var(--blue); border: 0; color: #fff; }
.hero.on_way { background: var(--ocean); }
.hero.none { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.hero .big { font-size: 26px; font-weight: 600; margin: 0; }
.hero .sub { font-size: 15px; margin: 8px 0 0; opacity: .85; }

.primary, .secondary { display: block; width: 100%; min-height: 50px; border-radius: 14px; font-weight: 600; font-size: 16px; padding: 12px; }
.primary { background: var(--ocean); color: #fff; border: 0; }
.primary:disabled { opacity: .55; cursor: default; }
.secondary { background: var(--card); color: var(--blue); border: 1px solid var(--line); }
.done { display: block; background: var(--okbg); color: var(--ok); font-weight: 600; text-align: center; border-radius: 14px; padding: 14px; }

label { display: block; font-size: 14px; color: var(--muted); margin: 10px 0 6px; }
input[type=text], input[type=password], textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--card); }
textarea { min-height: 84px; resize: vertical; }
.code { direction: ltr; text-align: center; font-size: 18px; letter-spacing: .5px; }
.error { color: var(--bad); font-size: 14px; margin-top: 8px; }

.login { max-width: 400px; margin: 0 auto; padding: 64px 20px 32px; text-align: center; }
.login img { width: 84px; height: 84px; border-radius: 20px; }
.login h1 { font-size: 24px; font-weight: 600; margin: 16px 0 4px; }
.login .primary { margin-top: 14px; }

.row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 6px 0; }
.row .num { font-weight: 600; white-space: nowrap; direction: ltr; }
.line { border-top: 1px solid var(--line); margin: 10px 0; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.thumbs img { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); }
.stars { display: flex; gap: 4px; margin-top: 10px; align-items: center; }
.stars button { background: none; border: 0; font-size: 26px; line-height: 1; color: #C9D3DD; padding: 2px; }
.stars button.on { color: #F2A60C; }
.actions { display: flex; gap: 14px; margin-top: 10px; }

.balance { font-size: 26px; font-weight: 600; direction: ltr; text-align: right; }

.chat { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.bubble { max-width: 82%; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.me { align-self: flex-start; background: var(--soft); border-color: var(--soft); }
.bubble.them { align-self: flex-end; }
.bubble time { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }

.tabs { position: fixed; inset-inline: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line); display: flex; justify-content: center; padding-bottom: env(safe-area-inset-bottom); }
.tabs button { flex: 1; max-width: 160px; background: none; border: 0; padding: 14px 4px; color: var(--muted); font-size: 15px; }
.tabs button.on { color: var(--blue); font-weight: 600; }

.lang { display: flex; gap: 2px; }
.lang button { background: none; border: 0; padding: 6px 7px; color: var(--muted); font-size: 13px; border-radius: 8px; }
.lang button.on { background: var(--soft); color: var(--blue); font-weight: 600; }

@media (min-width: 900px) {
  .shell { max-width: 760px; }
  .tabs { position: sticky; top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--line); }
  .shell { padding-bottom: 32px; }
}