:root {
  --bg: var(--tg-theme-bg-color, #0f1115);
  --surface: var(--tg-theme-secondary-bg-color, #171a21);
  --text: var(--tg-theme-text-color, #f4f6f8);
  --muted: var(--tg-theme-hint-color, #8f96a3);
  --link: var(--tg-theme-link-color, #6aa8ff);
  --button: var(--tg-theme-button-color, #2f7df4);
  --button-text: var(--tg-theme-button-text-color, #fff);
  --border: color-mix(in srgb, var(--text) 12%, transparent);
  --good: #42c98a;
  --warn: #eeb85b;
  --bad: #ef6a6a;
  --shadow: 0 16px 40px rgba(0,0,0,.24);
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
button,input,select,textarea { font: inherit; }
button { color: inherit; }
#app { max-width: 760px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom)); }
.topbar { position: sticky; top: 0; z-index: 5; display:flex; align-items:center; justify-content:space-between; padding: 8px 0 10px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(18px); }
h1,h2,h3,p { margin:0; } h1 {font-size:28px; letter-spacing:-.5px} h2{font-size:22px; line-height:1.15} h3{font-size:13px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted)}
.eyebrow { font-size:10px; font-weight:800; letter-spacing:1.4px; color:var(--muted); text-transform:uppercase; margin-bottom:2px; }
.icon-btn { width:40px; height:40px; border:1px solid var(--border); border-radius:14px; background:var(--surface); cursor:pointer; }
.search-wrap { margin: 4px 0 10px; }
.search,input[type=text],select,textarea { width:100%; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); padding:12px 13px; outline:none; }
.search:focus,input:focus,select:focus,textarea:focus { border-color: var(--button); }
.tabs { display:flex; gap:7px; overflow:auto; padding:4px 0 10px; scrollbar-width:none; position:sticky; top:58px; z-index:4; background:var(--bg); }
.tab { white-space:nowrap; border:1px solid var(--border); border-radius:999px; background:var(--surface); padding:8px 12px; cursor:pointer; }
.tab.active { background:var(--button); color:var(--button-text); border-color:transparent; }
.active-filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.filter-chip,.chip { display:inline-flex; align-items:center; border-radius:999px; padding:4px 8px; background:color-mix(in srgb,var(--button) 16%,var(--surface)); color:var(--text); font-size:12px; }
.list { display:grid; gap:10px; }
.card { border:1px solid var(--border); border-radius:18px; background:var(--surface); padding:14px; box-shadow:0 1px 0 rgba(255,255,255,.02); }
.card-top { display:flex; gap:12px; align-items:flex-start; }
.fit { min-width:50px; height:50px; border-radius:15px; display:grid; place-content:center; background:color-mix(in srgb,var(--good) 16%,var(--surface)); font-weight:800; font-size:18px; }
.fit.medium { background:color-mix(in srgb,var(--warn) 16%,var(--surface)); }
.fit.low { background:color-mix(in srgb,var(--bad) 15%,var(--surface)); }
.card-main { min-width:0; flex:1; }
.company { color:var(--muted); font-size:12px; margin-bottom:2px; }
.title { font-weight:750; font-size:16px; line-height:1.25; }
.location { color:var(--muted); margin-top:5px; font-size:12px; }
.card-tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:10px; }
.card-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:12px; }
.card-actions button,.reaction-btn { border:1px solid var(--border); background:transparent; border-radius:12px; padding:8px; cursor:pointer; }
.card-actions button.active,.reaction-btn.active { background:color-mix(in srgb,var(--button) 20%,var(--surface)); border-color:var(--button); }
.open-card { font-weight:700; }
.loader,.empty { text-align:center; color:var(--muted); padding:28px; }
.load-more { width:100%; border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:12px; margin-top:12px; }
.hidden { display:none !important; }
.overlay { position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.48); display:flex; align-items:flex-end; justify-content:center; }
.sheet { width:min(760px,100%); max-height:93vh; overflow:auto; background:var(--bg); border-radius:22px 22px 0 0; padding:18px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow:var(--shadow); }
.sheet-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.filters-sheet label,.detail-sheet>label { display:block; color:var(--muted); font-size:12px; margin:13px 0 6px; }
input[type=range] { width:100%; accent-color:var(--button); }
.sheet-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:20px; }
.btn { border:0; border-radius:14px; padding:12px 14px; font-weight:750; cursor:pointer; }
.btn.primary { background:var(--button); color:var(--button-text); }
.btn.secondary { background:var(--surface); border:1px solid var(--border); }
.meta { color:var(--muted); margin:8px 0; }
.score-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:14px 0; }
.metric { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:9px; text-align:center; }
.metric b { display:block; font-size:18px; }
.metric span { color:var(--muted); font-size:10px; text-transform:uppercase; }
.detail-section { margin-top:18px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.chip.gap { background:color-mix(in srgb,var(--warn) 15%,var(--surface)); }
.detail-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px 0 6px; }
.reaction-btn { font-size:20px; }
.description { white-space:pre-wrap; color:color-mix(in srgb,var(--text) 88%,var(--muted)); margin-top:8px; line-height:1.55; }
.sticky-open { width:100%; position:sticky; bottom:0; margin-top:20px; box-shadow:0 -8px 25px var(--bg); }
.compact-sheet { max-height:70vh; }
.reason-list { display:grid; gap:8px; margin-bottom:12px; }
.reason-list button { border:1px solid var(--border); border-radius:12px; background:var(--surface); text-align:left; padding:12px; }
.toast { position:fixed; z-index:50; left:50%; transform:translateX(-50%); bottom:calc(24px + env(safe-area-inset-bottom)); background:#111; color:#fff; padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); max-width:90%; }
@media (min-width:700px){ .list{grid-template-columns:1fr 1fr}.sheet{border-radius:22px;margin-bottom:24px}.overlay{align-items:center}.detail-sheet{max-height:90vh}.tabs{top:58px} }