/* Панель успадковує кольори теми Telegram: світла чи темна — вирішує застосунок
   користувача, а не ми. Тому всюди змінні tg-theme-* із запасними значеннями. */
:root{
  --bg: var(--tg-theme-bg-color, #ffffff);
  --fg: var(--tg-theme-text-color, #16202a);
  --muted: var(--tg-theme-hint-color, #7b8794);
  --card: var(--tg-theme-secondary-bg-color, #f3f6f9);
  --accent: var(--tg-theme-button-color, #2f7bd6);
  --accent-fg: var(--tg-theme-button-text-color, #ffffff);
  --line: color-mix(in srgb, var(--muted) 30%, transparent);
  --ok:#2e9e5b; --warn:#d98324; --bad:#cf4b3c;
  --r: 14px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.45 -apple-system, "SF Pro Text", Roboto, "Segoe UI", sans-serif;
  padding-bottom:28px;
}
/* Шапка: назва, мова панелі, хто зайшов. Мова стоїть зверху, бо це
   перше, що людина хоче поставити «під себе», і не має з'їжджати вниз,
   коли підписи довшають у перекладі. */
.top{display:flex;align-items:center;gap:10px;padding:14px 16px 8px}
.brand{font-weight:700;letter-spacing:.2px;white-space:nowrap}
.who{font-size:12px;color:var(--muted);text-align:right;margin-left:auto;
  max-width:42%;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.langsel{width:auto;min-width:46px;padding:2px 6px;height:24px;line-height:1;
  border-radius:999px;font-size:11.5px;letter-spacing:.3px;
  background:var(--card);border:1px solid var(--line);color:var(--muted);
  margin:0;-webkit-appearance:none;appearance:none;
  text-align:center;text-align-last:center}
/* Між вкладками і фільтрами має бути повітря: інакше два ряди круглих
   кнопок зливаються в один і незрозуміло, що до чого належить. */
.view{padding:16px 14px 24px}
.loader{padding:40px 0;text-align:center;color:var(--muted)}
h2{font-size:17px;margin:18px 0 8px}
.muted{color:var(--muted)}
.small{font-size:12.5px}
/* плитки статистики */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{background:var(--card);border-radius:var(--r);padding:12px 14px;
  width:100%;text-align:left;border:0;color:inherit;font:inherit;
  transition:transform .12s ease,background .12s ease;-webkit-tap-highlight-color:transparent}
.tile:active,.tile.tapped{transform:scale(.97);background:var(--line)}
.tile b{display:block;font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums}
.tile span{font-size:12.5px;color:var(--muted)}
/* списки */
.row{display:flex;gap:10px;align-items:center;background:var(--card);
  border-radius:var(--r);padding:11px 13px;margin-bottom:8px;width:100%;
  text-align:left;border:0;color:inherit;font:inherit;cursor:pointer}
.row:active{opacity:.7}
.row .main{flex:1;min-width:0}
.row .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .s{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.badge{font-size:11.5px;padding:3px 8px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb, var(--muted) 22%, transparent)}
.badge.ok{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
.badge.warn{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}
.badge.bad{background:color-mix(in srgb,var(--bad) 20%,transparent);color:var(--bad)}
.badge.acc{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}
/* фільтри */
/* Стрічка фільтрів їде під край екрана — так видно, що її можна рухати,
   і вона не виглядає втиснутою між полями. */
.chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;
  margin:2px -14px 14px;padding:2px 14px 4px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch}
.chips .chip{scroll-snap-align:start}
.chips::-webkit-scrollbar{display:none}
.chip{border:0;background:var(--card);color:var(--fg);padding:7px 12px;
  border-radius:999px;font-size:13px;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}
.search{width:100%;padding:11px 13px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--card);color:var(--fg);font:inherit;margin-bottom:8px}
/* форми */
label{display:block;margin:10px 0 4px;font-size:12.5px;color:var(--muted)}
input,select,textarea{width:100%;padding:11px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;
  font-size:16px;min-width:0}   /* 16px — інакше iPhone збільшує сторінку */
textarea{min-height:88px;resize:vertical}
/* Два поля поруч — тільки там, де вони справді вміщаються. На вузькому
   екрані підпис ламався на два рядки і налазив на сусіднє поле, тому
   нижче 430 px усе стає в один стовпчик. */
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;align-items:end}
@media (max-width:430px){ .two{grid-template-columns:1fr} }
/* ставка: підпис широкий, сума вузька — і так на будь-якому екрані */
.rate{display:grid;grid-template-columns:1fr 104px;gap:8px;margin-bottom:8px}
@media (max-width:430px){ .rate{grid-template-columns:1fr 96px} }
.rate input{margin-bottom:0}
.check{display:flex;align-items:center;gap:9px;margin:10px 0}
.check input{width:20px;height:20px}
.btn{display:block;width:100%;padding:13px;border:0;border-radius:12px;
  background:var(--accent);color:var(--accent-fg);font:inherit;font-weight:600;
  margin-top:14px}
.btn.ghost{background:var(--card);color:var(--fg)}
.btn.danger{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Рамка розділу. Заголовок ховався під шапкою вікна, коли до нього
   докручували, — тому лишаємо йому місце зверху. */
fieldset{border:1px solid var(--line);border-radius:var(--r);
  padding:4px 12px 12px;margin:20px 0;min-width:0}
fieldset > :first-child{margin-top:0}
legend{font-size:12.5px;color:var(--muted);padding:0 6px;
  text-transform:uppercase;letter-spacing:.4px}
.sheet-body fieldset{scroll-margin-top:60px}
/* попередній перегляд картки */
.preview{background:var(--card);border-radius:var(--r);padding:12px 14px;
  white-space:pre-wrap;font-size:14px;max-height:320px;overflow:auto}
/* вкладки: липкий рядок угорі. Унизу на iPhone Telegram перекриває смугу
   вікна власними кнопками, і нижня панель просто не видно. */
.tabs{position:sticky;top:0;z-index:10;display:flex;gap:7px;overflow-x:auto;
  background:var(--bg);border-bottom:1px solid var(--line);
  padding:8px 14px 12px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;border:0;background:var(--card);color:var(--fg);
  font:inherit;font-size:13.5px;padding:8px 13px;border-radius:999px;
  display:flex;align-items:center;gap:6px;white-space:nowrap}
.tabs button i{font-style:normal;font-size:15px;line-height:1}
.tabs button[aria-current="true"]{background:var(--accent);color:var(--accent-fg)}
/* модальне вікно.
   [hidden] має перемагати: інакше порожнє вікно висить поверх сторінки і
   з'їдає всі дотики — сторінка виглядає живою, але не натискається. */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;
  align-items:flex-end;z-index:20}
.sheet[hidden], .toast[hidden]{display:none !important}
.sheet-card{background:var(--bg);width:100%;max-height:92vh;border-radius:18px 18px 0 0;
  display:flex;flex-direction:column}
.sheet-head{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 8px 14px 16px;border-bottom:1px solid var(--line)}
/* «ручка» вгорі картки: за неї видно, що вікно можна стягнути вниз */
.grip{width:40px;height:4px;border-radius:999px;background:var(--line);
  margin:8px auto 2px;flex:0 0 auto}
.sheet-card{transition:transform .18s ease}
body.locked{overflow:hidden}
.sheet-body{padding:14px 16px calc(20px + env(safe-area-inset-bottom));overflow:auto}
/* хрестик: велика зона дотику (44px — мінімум, у який людина влучає
   пальцем не цілячись) і видиме коло, щоб було зрозуміло, куди тиснути */
.x{border:0;background:var(--card);color:var(--fg);font-size:17px;line-height:1;
  min-width:44px;height:44px;border-radius:999px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
.x:active{background:var(--line)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:92px;z-index:30;
  background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:999px;
  font-size:13.5px;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.empty{padding:34px 10px;text-align:center;color:var(--muted)}
/* Мова контенту — одна на всю панель, одразу під шапкою */
/* плитка, за якою стежать найчастіше */
/* підсвічена плитка: рамка всередині, щоб текст не налазив на неї */
.tile.accent{box-shadow:inset 0 0 0 1px var(--accent)}
/* Переклад робить підписи довшими: скрізь, де є текст, дозволяємо
   переносити слово і не даємо розтягувати сітку. */
.tile,.row,.chip,.badge,.empty,.small{overflow-wrap:anywhere}
.tile span{display:block;line-height:1.25}
.tile b{overflow-wrap:normal}
.grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.row .main{min-width:0}
.row .t,.row .s{overflow-wrap:anywhere}

/* розгорнутий рядок топ-оферти */
.topdet{background:var(--card);border-radius:var(--r);padding:10px 13px;
  margin:-4px 0 8px}
.topdet[hidden]{display:none !important}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12.5px;
  background:var(--bg);color:var(--muted)}
.topdet .btn{margin-top:10px;padding:10px}

/* готова картка вакансії у формі */
.preview[hidden]{display:none !important}
.preview blockquote{margin:6px 0;padding-left:10px;border-left:2px solid var(--line)}

/* рядок, який розкривається просто в тексті */
.reveal{display:flex;align-items:center;gap:7px;padding:8px 2px;color:var(--accent);
  font-size:13.5px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.reveal .caret{font-size:11px;line-height:1}
.reveal.tapped{opacity:.6}

/* заголовок екрана */
h1.screen{font-size:19px;margin:10px 0 12px;letter-spacing:.2px}
/* рядок, який нічого не відкриває */
.row.static{cursor:default}

/* ---- картка справи: заявка, рекомендація, звернення ---- */
.hero{display:flex;align-items:flex-start;gap:10px;margin:2px 0 12px}
.hero .h-t{font-size:18px;font-weight:650;line-height:1.25;flex:1;min-width:0;
  overflow-wrap:anywhere}
.hero .badge{flex:0 0 auto;margin-top:2px}

.kv{display:grid;grid-template-columns:minmax(96px,38%) 1fr;gap:1px;
  background:var(--line);border-radius:var(--r);overflow:hidden}
.kv .k,.kv .v{background:var(--bg);padding:9px 12px;font-size:13.5px;
  overflow-wrap:anywhere}
.kv .k{color:var(--muted);font-size:12.5px}
.tel{color:var(--accent);text-decoration:none;font-weight:600}

.msg{background:var(--card);border-radius:var(--r);padding:12px 14px;margin-top:10px;
  font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.card{background:var(--card);border-radius:var(--r);padding:10px 13px}
.card .s{font-size:12.5px;color:var(--muted);padding:3px 0}

.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 12px}
@media (max-width:360px){ .opts{grid-template-columns:1fr} }
/* Кнопки статусів: однакова висота, текст по центру, однакові поля —
   інакше сітка виглядає складеною навмання. */
.opt{display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--line);background:var(--card);color:var(--fg);
  font:inherit;font-size:13px;line-height:1.2;padding:10px 12px;border-radius:12px;
  min-height:52px;-webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,background .12s ease}
.opt:active{transform:scale(.97);background:var(--line)}
.opt[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);
  border-color:transparent;font-weight:600}