:root {
  color-scheme: light dark;
  --bg: var(--tg-theme-bg-color, #f3f2ef);
  --surface: var(--tg-theme-secondary-bg-color, #ffffff);
  --surface-muted: #eeece8;
  --text: var(--tg-theme-text-color, #0b0b0c);
  --muted: var(--tg-theme-hint-color, #6f6e6a);
  --accent: #f3223a;
  --accent-strong: #d90d28;
  --accent-pressed: #b90a20;
  --accent-text: #ffffff;
  --line: #dcd9d3;
  --line-soft: #ece9e4;
  --danger: #e31b34;
  --success: #16784a;
  --warning: #9c570b;
  --radius: 20px;
  --shadow: 0 1px 2px rgb(16 16 18 / 5%), 0 12px 32px rgb(16 16 18 / 5%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-width: 300px; min-height: 100dvh; margin: 0; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ui-icon { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; vertical-align: middle; }
.app-shell { width: min(100%, 760px); min-height: 100dvh; margin: 0 auto; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }

.topbar { position: sticky; z-index: 20; top: 0; display: flex; min-height: 72px; align-items: center; justify-content: space-between; padding: calc(9px + env(safe-area-inset-top)) 16px 9px; border-bottom: .5px solid color-mix(in srgb, var(--line) 65%, transparent); background: color-mix(in srgb, var(--bg) 91%, transparent); -webkit-backdrop-filter: saturate(150%) blur(22px); backdrop-filter: saturate(150%) blur(22px); }
.brand { display: flex; min-width: 0; min-height: 44px; align-items: center; padding: 0; border: 0; color: inherit; text-align: left; background: transparent; cursor: pointer; }
.brand-mark { display: block; flex: 0 0 auto; width: 42px; height: 42px; margin-right: 10px; border-radius: 12px; box-shadow: 0 5px 16px rgb(11 11 12 / 14%); }
.brand-copy { display: grid; min-width: 0; justify-items: start; gap: 1px; }
.brand-wordmark { position: relative; color: var(--text); font-size: 22px; font-weight: 830; letter-spacing: -.055em; line-height: 1; }
.brand-last { position: relative; display: inline-block; }
.brand-last::before { position: absolute; top: -5px; right: -1px; width: 9px; height: 3px; border-radius: 1px; background: var(--accent); content: ""; transform: skewX(-28deg); }
.brand small { overflow: hidden; max-width: min(64vw, 380px); margin-top: 4px; color: var(--muted); font-size: 9.5px; font-weight: 520; letter-spacing: .005em; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: var(--surface); box-shadow: 0 2px 10px rgb(16 16 18 / 4%); font-size: 14px; font-weight: 750; cursor: pointer; }

main { padding: 14px 16px 40px; outline: none; }
.hero { position: relative; margin: 14px 0 24px; padding: 7px 2px 0; }
.eyebrow, .job-kicker { margin: 0 0 7px; color: var(--accent); font-size: 10px; font-weight: 760; letter-spacing: .105em; line-height: 1.2; text-transform: uppercase; }
h1 { max-width: 640px; margin: 0; font-size: clamp(38px, 10vw, 54px); font-weight: 790; line-height: .97; letter-spacing: -.058em; }
h2 { margin: 0; font-size: 21px; font-weight: 760; letter-spacing: -.035em; }
h3 { margin: 0; font-size: 18px; font-weight: 730; letter-spacing: -.025em; }
.hero > p:last-child { max-width: 570px; margin: 9px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 27px 2px 10px; }
.section-head.compact { margin-top: 0; }
.section-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.stack { display: grid; gap: 10px; }

.job-card, .panel, .activity-card, .candidate-card { overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 88%, transparent); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.job-card { position: relative; padding: 19px; }
.job-card.urgent { border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); }
.job-card.urgent::before { position: absolute; top: 0; right: 22px; left: 22px; height: 3px; border-radius: 0 0 4px 4px; background: var(--accent); content: ""; }
.job-top { display: flex; justify-content: space-between; gap: 14px; }
.job-top > div { min-width: 0; }
.job-top h3 { max-width: 520px; }
.badge { display: inline-flex; min-height: 25px; align-items: center; align-self: flex-start; padding: 4px 9px; border-radius: 999px; color: var(--muted); background: var(--surface-muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.badge.urgent { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.badge.success { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
.job-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 17px 0; padding: 15px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.job-meta > span { display: flex; min-width: 0; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.25; }
.job-meta .ui-icon { width: 17px; height: 17px; }
.job-meta > span > span { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.job-meta small { display: block; margin-bottom: 2px; color: var(--muted); font-size: 9px; font-weight: 620; letter-spacing: .045em; text-transform: uppercase; }
.job-description { margin: 0 0 15px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.positions { border-top: 1px solid var(--line-soft); }
.job-description + .positions { border-top: 0; }
.position { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 7px 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.position:last-child { border-bottom: 0; padding-bottom: 2px; }
.position-main { min-width: 0; }
.position-main strong, .position-main small { display: block; }
.position-main strong { font-size: 14px; font-weight: 650; }
.position-main small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.position .pay { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.position > .badge { grid-column: 1 / -1; justify-self: start; }
.position-actions { grid-column: 1 / -1; display: flex; gap: 8px; }

.filters { display: flex; gap: 7px; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px 3px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.chip { min-height: 39px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: var(--surface); font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.chip.active { border-color: var(--text); color: var(--surface); background: var(--text); }

.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 7px; padding: 11px 16px; border: 1px solid var(--accent-strong); border-radius: 14px; color: var(--accent-text); background: var(--accent-strong); box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 18%, transparent); font-weight: 700; letter-spacing: -.015em; cursor: pointer; transition: opacity .12s ease, transform .12s ease, background .12s ease; }
.button:hover { background: var(--accent-pressed); }
.button .ui-icon { width: 17px; height: 17px; }
.button:active { transform: scale(.98); }
.button.secondary { border-color: var(--line); color: var(--text); background: var(--surface); box-shadow: none; }
.button.secondary:hover { background: var(--surface-muted); }
.button.danger { border-color: var(--danger); color: white; background: var(--danger); }
.button.small { min-height: 39px; padding: 8px 12px; border-radius: 12px; font-size: 12px; }
.button.block { width: 100%; }
.button:disabled { cursor: not-allowed; opacity: .4; }
.icon-button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: var(--surface-muted); cursor: pointer; }
.icon-button .ui-icon { width: 19px; height: 19px; }

.bottom-nav { position: fixed; z-index: 30; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); left: 10px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: min(calc(100% - 20px), 720px); margin: auto; padding: 5px; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 21px; background: color-mix(in srgb, var(--surface) 91%, transparent); box-shadow: 0 12px 36px rgb(11 11 12 / 12%); -webkit-backdrop-filter: saturate(160%) blur(22px); backdrop-filter: saturate(160%) blur(22px); }
.nav-item { display: grid; min-height: 55px; place-items: center; align-content: center; gap: 3px; padding: 4px; border: 0; border-radius: 16px; color: var(--muted); background: transparent; cursor: pointer; }
.nav-item .ui-icon { width: 21px; height: 21px; }
.nav-item span { font-size: 10px; font-weight: 580; line-height: 1; }
.nav-item.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

.stats { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.stat { min-height: 105px; padding: 17px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.stat:nth-child(2n) { border-right: 0; }
.stat:nth-last-child(-n + 2) { border-bottom: 0; }
.stat strong { display: block; margin-bottom: 6px; font-size: 32px; font-weight: 710; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 12px; line-height: 1.3; }
.stat.accent strong { color: var(--accent); }
.panel { padding: 19px; }
.info-panel p:last-child { margin-bottom: 0; }
.action-list { padding: 0; }
.action-list button { display: grid; width: 100%; min-height: 70px; grid-template-columns: 38px minmax(0, 1fr) 20px; align-items: center; gap: 11px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--text); text-align: left; background: transparent; cursor: pointer; }
.action-list button:last-child { border-bottom: 0; }
.action-list button > span:nth-child(2) { display: grid; gap: 3px; }
.action-list button strong { font-size: 14px; }
.action-list button small { color: var(--muted); font-size: 12px; }
.action-list button > .ui-icon { width: 17px; color: var(--muted); }
.action-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; color: #fff; background: #0b0b0c; }
.action-icon .ui-icon { width: 19px; height: 19px; }

.form { display: grid; gap: 16px; }
.form-section { display: grid; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.form-section:last-of-type { padding-bottom: 0; border-bottom: 0; }
.form-section > h2 { margin-bottom: 1px; }
.field { display: grid; gap: 6px; }
.field > span, .field legend { font-size: 12px; font-weight: 650; }
.field small { color: var(--muted); font-size: 11px; }
input:not([type="checkbox"]):not([type="radio"]), textarea, select { width: 100%; min-height: 48px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; outline: none; color: var(--text); background: var(--surface); -webkit-appearance: none; appearance: none; }
select { padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 20px, calc(100% - 11px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
textarea { min-height: 92px; resize: vertical; }
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
input:disabled, textarea:disabled, select:disabled { opacity: .52; }
fieldset.field { padding: 0; border: 0; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.check { display: flex; min-height: 46px; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 13px; font-size: 12px; }
.check:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.check:has(input:disabled) { color: var(--muted); background: var(--surface-muted); }
.check input { flex: 0 0 auto; width: 19px; height: 19px; min-height: 19px; margin: 0; accent-color: var(--accent); -webkit-appearance: checkbox; appearance: auto; }
.tools-grid { margin-top: 2px; }
.inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.position-editor { position: relative; display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-muted); }
.position-editor .remove-position { position: absolute; z-index: 1; top: 8px; right: 8px; width: 31px; height: 31px; }
.position-editor > .field:first-of-type > span { padding-right: 34px; }
.publish-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }

.activity-card, .candidate-card { padding: 18px; }
.activity-card header, .candidate-card header { display: flex; justify-content: space-between; gap: 12px; }
.detail-list { display: grid; gap: 7px; margin: 14px 0 0; }
.detail-list p { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; }
.detail-list .ui-icon { width: 17px; height: 17px; }
.contact-row { display: grid; gap: 3px; margin-top: 14px; padding: 11px 12px; border-radius: 10px; background: var(--surface-muted); }
.contact-row small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.contact-row strong { font-size: 13px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.candidate-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0; padding: 12px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.candidate-facts div { padding: 0 9px; border-right: 1px solid var(--line-soft); }
.candidate-facts div:first-child { padding-left: 0; }
.candidate-facts div:last-child { padding-right: 0; border-right: 0; }
.candidate-facts dt { color: var(--muted); font-size: 10px; }
.candidate-facts dd { margin: 3px 0 0; font-size: 12px; font-weight: 620; }
.candidate-note { margin-top: 12px; }
.candidate-note small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.candidate-note p { margin: 4px 0 0; color: var(--text); font-size: 13px; line-height: 1.4; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tag-list span { padding: 5px 8px; border-radius: 999px; color: var(--text); background: var(--surface-muted); font-size: 11px; }
.status-note { margin-top: 12px; padding: 10px 11px; border-left: 3px solid var(--accent); border-radius: 8px; color: var(--muted); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); font-size: 12px; line-height: 1.4; }
.review-result { display: grid; gap: 4px; margin-top: 13px; padding: 11px 12px; border-radius: 10px; color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--surface)); }
.review-result strong { font-size: 13px; }
.review-result span, .review-result p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.rating-grid { display: grid; gap: 14px; }
.rating-field { display: grid; gap: 7px; padding: 0; border: 0; }
.rating-field legend { font-size: 12px; font-weight: 650; }
.rating-options { display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.rating-options label { position: relative; min-width: 0; border-right: 1px solid var(--line); cursor: pointer; }
.rating-options label:last-child { border-right: 0; }
.rating-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rating-options span { display: grid; min-height: 42px; place-items: center; color: var(--muted); font-size: 13px; font-weight: 650; }
.rating-options input:checked + span { color: white; background: var(--accent); }
.rating-options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -3px; }

.empty { padding: 40px 24px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; background: color-mix(in srgb, var(--surface) 74%, transparent); }
.empty strong { display: block; color: var(--text); }
.empty p { margin: 6px 0 0; font-size: 13px; line-height: 1.4; }
.empty-icon { display: grid; width: 42px; height: 42px; place-items: center; margin: 0 auto 12px; border-radius: 14px; color: white; background: var(--text); }
.empty-icon .ui-icon { width: 21px; height: 21px; }

.sheet { width: min(100%, 760px); max-width: none; max-height: 92dvh; margin: auto auto 0; padding: 0; border: 1px solid var(--line); border-radius: 26px 26px 0 0; color: var(--text); background: var(--surface); box-shadow: 0 -16px 54px rgb(0 0 0 / 18%); }
.sheet::backdrop { background: rgb(0 0 0 / 32%); }
.sheet-card { position: relative; overflow: auto; max-height: 92dvh; padding: 31px 20px calc(26px + env(safe-area-inset-bottom)); }
.sheet-handle { position: absolute; top: 8px; left: 50%; width: 34px; height: 4px; border-radius: 3px; background: var(--line); transform: translateX(-50%); }
.sheet-close { position: absolute; z-index: 2; top: 15px; right: 14px; }
.sheet h2 { padding-right: 44px; }
.sheet > p, .sheet-card > p, #sheet-content > p { color: var(--muted); font-size: 13px; line-height: 1.4; }
.toast { position: fixed; z-index: 50; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); left: 16px; width: fit-content; max-width: min(90%, 560px); margin: auto; padding: 12px 15px; border-radius: 14px; color: white; background: #171719; box-shadow: 0 10px 34px rgb(0 0 0 / 22%); opacity: 0; pointer-events: none; transform: translateY(8px); transition: .18s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--danger); }
.loading { display: grid; gap: 12px; padding-top: 22px; }
.skeleton { border-radius: 13px; background: linear-gradient(100deg, var(--line-soft) 30%, var(--surface) 50%, var(--line-soft) 70%); background-size: 300% 100%; animation: shimmer 1.3s infinite; }
.skeleton-title { width: 58%; height: 58px; }
.skeleton-card { height: 220px; }
.error-state { padding: 45px 10px; text-align: center; }
.error-state strong { display: block; margin-bottom: 7px; font-size: 20px; }
.error-state .button { margin-top: 8px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

@keyframes shimmer { to { background-position: -300% 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media (pointer: coarse) { .chip, .button.small, .icon-button { min-height: 44px; } .icon-button { width: 44px; } }
@media (max-width: 380px) { .inline-fields, .check-grid, .publish-row { grid-template-columns: 1fr; } .candidate-facts { grid-template-columns: 1fr; gap: 9px; } .candidate-facts div { padding: 0; border-right: 0; } .brand small { display: none; } .brand-wordmark { font-size: 21px; } main { padding-inline: 12px; } .filters { margin-inline: -12px; padding-inline: 12px; } }
@media (min-width: 700px) { main { padding-inline: 24px; } .jobs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .job-card { height: fit-content; } }

@media (prefers-color-scheme: dark) {
  :root { --bg: var(--tg-theme-bg-color, #0b0b0c); --surface: var(--tg-theme-secondary-bg-color, #18181a); --surface-muted: #262629; --text: var(--tg-theme-text-color, #f7f6f3); --muted: var(--tg-theme-hint-color, #9b9994); --line: #39393d; --line-soft: #2e2e31; --shadow: 0 1px 2px rgb(0 0 0 / 20%), 0 16px 36px rgb(0 0 0 / 16%); }
  .chip.active { border-color: #f7f6f3; color: #0b0b0c; background: #f7f6f3; }
  .action-icon { color: #0b0b0c; background: #f7f6f3; }
  .button.secondary { background: var(--surface-muted); }
  input:not([type="checkbox"]):not([type="radio"]), textarea, select { background-color: var(--surface-muted); }
  .sheet { box-shadow: 0 -12px 44px rgb(0 0 0 / 45%); }
}