/* ─────────────────────────────────────────────────────────────
   Navtiro — спільний стиль сайту (navtiro.com).
   Одна палітра й один шелл (шапка/підвал/мова) на всі сторінки:
   index.html, privacy.html, delete-account.html.
   ───────────────────────────────────────────────────────────── */

/* Палітра з логотипа NavTiro: глибокий синій щит, синє «Nav», золоте «Tiro».
   Імена токенів --teal / --teal-deep залишені навмисно — на них зав'язані
   privacy.html і delete-account.html; міняємо значення, а не ключі. */
:root{
  --bg:#071634; --panel:#0D2148; --line:#1C3A6B;
  --teal:#3E7BD6; --teal-deep:#12356E;   /* синій бренду */
  --amber:#F0B41E;                        /* золото бренду */
  --red:#E2574C; --red-deep:#8E2A22;
  --green:#4FBF8B;
  --text:#E8EFFB; --muted:#93A8CB;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--text);font:400 17px/1.6 'Fira Sans',system-ui,sans-serif}
a{color:var(--teal)}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}

/* Мова: на <html> стоїть рівно один клас — .uk або .en.
   Елементи з протилежним lang= ховаються. Той самий механізм на всіх сторінках. */
html.uk [lang="en"]{display:none!important}
html.en [lang="uk"]{display:none!important}

/* ── Шапка ── */
header{border-bottom:1px solid var(--line)}
/* padding-block, а не скорочений padding: інакше нуль по горизонталі
   затирає бічні відступи .wrap і вміст лягає на край екрана */
.nav{display:flex;align-items:center;justify-content:space-between;padding-block:18px;gap:12px}
/* Написання як на емблемі: «Nav» світле, «Tiro» золоте */
.logo{font:700 26px/1 'Fira Sans Condensed';letter-spacing:.04em;color:var(--text);
  text-decoration:none;display:inline-flex;align-items:center}
.logo i{font-style:normal}
.logo i b{font-weight:700;color:var(--amber)}
.logo span{color:var(--amber)}
.logo img{height:40px;width:40px;border-radius:50%;display:block;margin-right:11px}
.nav-right{display:flex;align-items:center;gap:14px}
.lang{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.lang button{background:none;border:none;color:var(--muted);font:600 14px 'Fira Sans';padding:7px 12px;cursor:pointer}
.lang button.on{background:var(--teal);color:#05132C}
.nav a.cta{background:var(--teal);color:#05132C;text-decoration:none;font-weight:600;
  padding:9px 18px;border-radius:8px;white-space:nowrap}

/* ── Кнопки ── */
.btn{display:inline-block;text-decoration:none;font-weight:600;border-radius:10px;padding:13px 24px;border:none;cursor:pointer}
.btn-primary{background:var(--teal);color:#05132C}
.btn-ghost{border:1px solid var(--line);color:var(--text);background:none}

/* ── Підвал ── */
footer{border-top:1px solid var(--line);padding:30px 0;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer a{color:var(--muted)}

/* ─────────────────────────────────────────────────────────────
   Юридичні / текстові сторінки (privacy, delete-account)
   ───────────────────────────────────────────────────────────── */
.page{max-width:820px;margin:0 auto;padding:44px 20px 80px}
.page h1{font:700 clamp(30px,4.4vw,42px)/1.1 'Fira Sans Condensed';margin-bottom:8px}
.page .meta{color:var(--muted);font-size:14px;margin-bottom:8px}
.page h2{font:700 clamp(22px,2.6vw,27px)/1.2 'Fira Sans Condensed';
  margin:38px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.page h3{font:600 17px/1.3 'Fira Sans';margin:22px 0 6px;color:var(--teal)}
.page p{margin-bottom:12px}
.page ul{margin:10px 0 14px 22px}
.page li{margin-bottom:7px}
.muted{color:var(--muted)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin:18px 0}
.card.danger{border-color:rgba(226,87,76,.45);background:rgba(226,87,76,.07)}

/* Таблиці (мета × правова підстава, отримувачі даних) */
.scroll{overflow-x:auto;margin:14px 0}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:14px}

/* ── Форма (видалення акаунта) ── */
label{display:block;font-size:13px;color:var(--muted);margin:16px 0 6px;font-weight:600}
input[type=email],input[type=password]{
  width:100%;padding:12px 14px;font:400 16px 'Fira Sans';
  background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:10px}
input:focus{outline:none;border-color:var(--teal)}
.check{display:flex;gap:10px;align-items:flex-start;margin:18px 0 4px}
.check input{margin-top:5px;flex:none;width:18px;height:18px}
.check label{margin:0;color:var(--text);font-weight:400;font-size:15px}
.btn-danger{
  width:100%;margin-top:18px;padding:14px;font:700 16px 'Fira Sans';
  color:#fff;border-radius:10px;
  background:linear-gradient(135deg,var(--red),var(--red-deep))}
.btn-danger:disabled{opacity:.45;cursor:not-allowed}
.msg{margin-top:16px;padding:12px 14px;border-radius:10px;font-size:15px;display:none}
.msg.err{display:block;background:rgba(226,87,76,.12);border:1px solid rgba(226,87,76,.5);color:#ff9a93}
.msg.ok{display:block;background:rgba(79,191,139,.12);border:1px solid rgba(79,191,139,.5);color:#8fe3ba}

@media (max-width:860px){
  .nav a.cta{display:none}   /* на вузькому — не тіснимо шапку */
}