:root {
  --vacancy-accent: #ffb347;
  --vacancy-surface: rgba(20, 18, 16, .94);
  --vacancy-field: rgba(255, 255, 255, .045);
  --vacancy-line: rgba(255, 226, 190, .11);
  --vacancy-muted: rgba(242, 231, 217, .55);
}

.vacancy-account-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding: 19px 22px;
  border: 1px solid rgba(255, 179, 71, .2);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(255, 179, 71, .085), rgba(18, 17, 16, .9));
}

.vacancy-account-state > div { display: grid; gap: 5px; }
.vacancy-account-state strong { color: #fff7ed; font-size: 14px; }
.vacancy-account-state span { color: var(--vacancy-muted); font-size: 11px; line-height: 1.55; }
.vacancy-account-state > a { min-width: max-content; padding: 10px 15px; border-radius: 9px; background: var(--vacancy-accent); color: #1c1208; font-size: 11px; font-weight: 900; }
.vacancy-account-state.is-blocked { border-color: rgba(255, 105, 92, .23); background: linear-gradient(135deg, rgba(255, 82, 70, .08), rgba(18, 17, 16, .92)); }

.vacancy-application-status {
  display: inline-flex;
  min-width: max-content;
  align-items: center;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 179, 71, .1);
  color: #ffc46f;
  font-size: 9px;
  font-weight: 900;
}

.vacancy-application-status.is-accepted { color: #87e5a7; background: rgba(74, 205, 120, .1); }
.vacancy-application-status.is-rejected { color: #ff9990; background: rgba(255, 95, 82, .1); }
.vacancy-application-status.is-interview { color: #a8c9ff; background: rgba(94, 148, 236, .11); }

.vacancy-application-dialog {
  width: min(760px, calc(100% - 24px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--vacancy-line);
  border-radius: 23px;
  color: #f7efe6;
  background: radial-gradient(circle at 80% 0, rgba(255, 179, 71, .09), transparent 24rem), #11100f;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .62);
}

.vacancy-application-dialog::backdrop { background: rgba(5, 5, 5, .82); backdrop-filter: blur(9px); }
.vacancy-application-dialog > form { position: relative; display: grid; gap: 25px; padding: clamp(24px, 4vw, 42px); }
.vacancy-dialog-close { position: absolute; top: 15px; right: 15px; width: 34px; height: 34px; border: 0; border-radius: 9px; color: #9d958d; background: rgba(255, 255, 255, .05); font-size: 21px; cursor: pointer; }
.vacancy-dialog-heading { max-width: 610px; }
.vacancy-dialog-heading > span, .vacancy-admin-head > div > span { color: var(--vacancy-accent); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.vacancy-dialog-heading h2 { margin: 8px 0 9px; font: 800 clamp(26px, 4vw, 40px)/1.05 Unbounded, sans-serif; letter-spacing: -.045em; }
.vacancy-dialog-heading p { margin: 0; color: var(--vacancy-muted); font-size: 11px; line-height: 1.6; }

.vacancy-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.vacancy-form-grid label, .vacancy-review-controls label, .vacancy-setting-card label { display: grid; min-width: 0; gap: 6px; }
.vacancy-form-grid label > span, .vacancy-review-controls label > span, .vacancy-setting-card label > span { color: #89817a; font-size: 9px; font-weight: 800; }
.vacancy-form-grid .wide, .vacancy-review-controls .wide { grid-column: 1 / -1; }
.vacancy-form-grid input, .vacancy-form-grid textarea, .vacancy-admin-toolbar input, .vacancy-admin-toolbar select, .vacancy-review-controls input, .vacancy-review-controls textarea, .vacancy-review-controls select, .vacancy-setting-card input, .vacancy-blacklist-action input, .vacancy-blacklist-action select {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px;
  outline: 0;
  color: #f6eee5;
  background: var(--vacancy-field);
  font: 700 11px Manrope, sans-serif;
}
.vacancy-form-grid textarea, .vacancy-review-controls textarea { min-height: 94px; resize: vertical; line-height: 1.55; }
.vacancy-form-grid :is(input, textarea):focus, .vacancy-admin :is(input, textarea, select):focus { border-color: rgba(255, 179, 71, .42); box-shadow: 0 0 0 3px rgba(255, 179, 71, .07); }
.vacancy-check { display: flex !important; align-items: center; grid-template-columns: auto 1fr; }
.vacancy-check input { width: 17px; min-height: 17px; accent-color: var(--vacancy-accent); }
.vacancy-check span { color: #c6bcb2 !important; }
.vacancy-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.vacancy-form-actions p { margin: 0; color: #ff9b8e; font-size: 10px; }
.vacancy-form-actions button, .vacancy-review-controls button, .vacancy-setting-card button, .vacancy-blacklist button, .vacancy-blacklist-action button {
  min-height: 42px;
  padding: 0 15px;
  border: 0;
  border-radius: 9px;
  color: #1d1308;
  background: var(--vacancy-accent);
  font: 900 10px Manrope, sans-serif;
  cursor: pointer;
}
button:disabled { opacity: .5; cursor: wait; }

.vacancy-admin { padding-top: 30px; }
.vacancy-admin-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 22px; }
.vacancy-admin-head h2 { margin: 7px 0 9px; font: 800 clamp(28px, 4vw, 43px)/1.05 Unbounded, sans-serif; letter-spacing: -.05em; }
.vacancy-admin-head p { margin: 0; color: var(--vacancy-muted); font-size: 11px; }
.vacancy-admin-counts { display: flex; gap: 7px; }
.vacancy-admin-counts span { display: grid; min-width: 88px; gap: 3px; padding: 11px 13px; border-radius: 11px; background: var(--vacancy-surface); color: #817a73; font-size: 8px; }
.vacancy-admin-counts b { color: #f7efe7; font: 800 17px Unbounded, sans-serif; }
.vacancy-admin-tabs { display: flex; width: max-content; max-width: 100%; gap: 4px; padding: 4px; overflow-x: auto; border-radius: 11px; background: var(--vacancy-surface); }
.vacancy-admin-tabs button { min-width: max-content; height: 38px; padding: 0 14px; border: 0; border-radius: 8px; color: #827a72; background: transparent; font: 800 10px Manrope, sans-serif; cursor: pointer; }
.vacancy-admin-tabs button.is-active { color: #1d1308; background: var(--vacancy-accent); }
.vacancy-admin-panel { display: none; padding-top: 18px; }
.vacancy-admin-panel.is-active { display: block; }
.vacancy-admin-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.vacancy-admin-toolbar input { max-width: 330px; }
.vacancy-admin-toolbar select { width: 190px; }
.vacancy-applications { display: grid; gap: 11px; }
.vacancy-application-card { display: grid; gap: 18px; padding: clamp(18px, 3vw, 27px); border: 1px solid var(--vacancy-line); border-radius: 17px; background: var(--vacancy-surface); }
.vacancy-application-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vacancy-applicant { display: flex; align-items: center; gap: 12px; }
.vacancy-applicant img { width: 44px; height: 44px; border-radius: 9px; background: #201d1a; image-rendering: pixelated; }
.vacancy-applicant h3 { margin: 0 0 4px; color: #fff; font: 800 15px Unbounded, sans-serif; }
.vacancy-applicant span { color: #77706a; font-size: 9px; }
.vacancy-answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vacancy-answer { min-width: 0; padding: 13px; border-radius: 10px; background: rgba(255, 255, 255, .027); }
.vacancy-answer > span { color: #756e67; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.vacancy-answer p { margin: 7px 0 0; color: #c9bfb5; font-size: 10px; line-height: 1.6; white-space: pre-wrap; }
.vacancy-review-controls { display: grid; grid-template-columns: 190px 1fr auto; align-items: end; gap: 9px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .055); }
.vacancy-review-controls .wide { grid-column: auto; }
.vacancy-review-controls textarea { min-height: 72px; }
.vacancy-review-controls small { grid-column: 1 / -1; min-height: 12px; color: #90d7a7; font-size: 9px; }
.vacancy-blacklist-action { padding-top: 3px; color: #ff9187; font-size: 10px; }
.vacancy-blacklist-action summary { width: max-content; cursor: pointer; font-weight: 800; }
.vacancy-blacklist-action > div { display: grid; grid-template-columns: 1fr 150px auto; gap: 8px; margin-top: 10px; }
.vacancy-blacklist-action button { color: #fff; background: #a6423b; }
.vacancy-blacklist-action small { grid-column: 1 / -1; }

.vacancy-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vacancy-setting-card { display: grid; grid-template-columns: 1fr auto; gap: 11px; padding: 20px; border: 1px solid var(--vacancy-line); border-radius: 15px; background: var(--vacancy-surface); }
.vacancy-setting-card > div, .vacancy-setting-card label, .vacancy-setting-card small { grid-column: 1 / -1; }
.vacancy-setting-card > div > span { color: var(--vacancy-accent); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.vacancy-setting-card h3 { margin: 5px 0; font: 800 16px Unbounded, sans-serif; }
.vacancy-setting-card p { margin: 0; color: var(--vacancy-muted); font-size: 9px; }
.vacancy-setting-card button[data-toggle] { color: #ff9a90; background: rgba(255, 90, 78, .1); }
.vacancy-setting-card button[data-toggle].is-open { color: #8fe0a9; background: rgba(75, 204, 119, .1); }
.vacancy-setting-card small { min-height: 12px; color: #91d8a8; font-size: 9px; }
.vacancy-blacklist { display: grid; gap: 8px; }
.vacancy-blacklist > article { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; border: 1px solid rgba(255, 102, 90, .14); border-radius: 13px; background: rgba(45, 21, 19, .42); }
.vacancy-blacklist h3 { margin: 0 0 4px; font-size: 13px; }
.vacancy-blacklist p { margin: 0 0 5px; color: #c8b7b2; font-size: 10px; }
.vacancy-blacklist span { color: #756b68; font-size: 8px; }
.vacancy-blacklist button { color: #ffaba3; background: rgba(255, 92, 79, .1); }
.vacancy-admin-empty { padding: 42px; border: 1px dashed rgba(255, 255, 255, .1); border-radius: 15px; color: #77706a; text-align: center; }

@media (max-width: 760px) {
  .vacancy-account-state, .vacancy-admin-head, .vacancy-form-actions { align-items: flex-start; flex-direction: column; }
  .vacancy-account-state { padding: 17px; }
  .vacancy-form-grid, .vacancy-answer-grid, .vacancy-settings { grid-template-columns: 1fr; }
  .vacancy-form-grid .wide { grid-column: auto; }
  .vacancy-admin-counts { width: 100%; overflow-x: auto; }
  .vacancy-admin-toolbar { display: grid; }
  .vacancy-admin-toolbar input, .vacancy-admin-toolbar select { width: 100%; max-width: none; }
  .vacancy-review-controls { grid-template-columns: 1fr; }
  .vacancy-review-controls .wide, .vacancy-review-controls small { grid-column: auto; }
  .vacancy-blacklist-action > div { grid-template-columns: 1fr; }
  .vacancy-blacklist-action small { grid-column: auto; }
  .vacancy-blacklist > article { align-items: flex-start; flex-direction: column; }
  .vacancy-application-dialog > form { padding: 24px 17px; }
}