* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #e9eef0;
  color: #17383d;
}

.page {
  width: min(100% - 18px, 720px);
  margin: 0 auto;
  padding: 28px 0 40px;
}

h1 {
  font-size: 36px;
  line-height: 1.15;
  font-weight: 700;
  margin-bottom: 6px;
}

.intro {
  color: #718286;
  font-size: 18px;
  margin-bottom: 22px;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.job-card {
  width: 100%;
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: transform .15s ease, background .15s ease;
}

.job-card:hover {
  background: #fcfdfd;
  transform: translateY(-1px);
}

.job-card:active {
  transform: scale(.995);
}

.job-card__image {
  display: block;
  width: 115px;
  height: 92px;
  flex: 0 0 115px;
  object-fit: cover;
  object-position: center;
  border-radius: 13px;
}

.job-card__content {
  min-width: 0;
  flex: 1;
  display: block;
}

.job-card__title {
  display: block;
  font-size: 18px;
  line-height: 1.12;
  font-weight: 700;
  color: #17383d;
  margin-bottom: 5px;
  overflow-wrap: anywhere;
}

.job-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.job-card__tag{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#eef4f5;color:#17383d;font-size:12px;line-height:1.1;font-weight:600;white-space:nowrap}

.job-card__text {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: #718286;
  overflow-wrap: anywhere;
}

/* Окно городов */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}

.modal.open {
  display: flex;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(23, 56, 61, .25);
}

.modal-box {
  position: relative;
  width: min(100%, 430px);
  max-height: 82vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 24px;
  padding: 25px 18px 18px;
  z-index: 1;
}

.modal-box h2 {
  font-size: 24px;
  line-height: 1.15;
  padding-right: 35px;
  margin-bottom: 5px;
}

.modal-subtitle {
  color: #7a898c;
  font-size: 14px;
  margin-bottom: 16px;
}

.close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #eef2f3;
  color: #17383d;
  font-size: 25px;
  line-height: 30px;
  cursor: pointer;
}

.city-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.city-search__icon {
  position: absolute;
  left: 14px;
  color: #718286;
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-1px);
}

.city-search input {
  width: 100%;
  height: 48px;
  border: 1px solid #dce4e5;
  border-radius: 14px;
  outline: none;
  background: #f7f9f9;
  color: #17383d;
  padding: 0 42px 0 42px;
  font-size: 16px;
}

.city-search input::placeholder { color: #9aa7aa; }
.city-search input:focus { border-color: #9db2b5; background: #fff; }

.city-search__clear {
  position: absolute;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #e9eff0;
  color: #607477;
  font-size: 20px;
  line-height: 28px;
  cursor: pointer;
}

.city-search__clear:hover { background: #dde6e7; }

.city-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.city {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  background: #f1f4f5;
  color: #17383d;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}

.city:hover {
  background: #e5ebec;
}

@media (max-width: 650px) {
  .page {
    width: min(100% - 14px, 900px);
    padding-top: 16px;
  }

  h1 {
    font-size: 25px;
  }

  .intro {
    font-size: 15px;
    margin-bottom: 14px;
  }

  .cards {
    gap: 8px;
  }

  .job-card {
    min-height: 118px;
    gap: 13px;
    padding: 9px;
    border-radius: 20px;
  }

  .job-card__image {
    width: 105px;
    height: 100px;
    flex-basis: 105px;
    border-radius: 16px;
  }

  .job-card__title {
    font-size: 18px;
    margin-bottom: 5px;
  }

  .job-card__text {
    font-size: 13px;
  }

  .modal-box {
    border-radius: 20px;
  }
}

.city small{font-size:13px;color:#777;white-space:nowrap}.city span{min-width:0}

.job-card--disabled{cursor:not-allowed;opacity:.72;filter:grayscale(.15)}
.job-card--disabled:hover{transform:none}
.job-card__notice{display:block;margin-top:8px;font-size:12px;line-height:1.35;color:#dc2626;font-weight:600}
.city--disabled{white-space:normal;text-align:center;line-height:1.45;color:#dc2626;font-weight:600;padding:16px}


.city--choose{border:0;text-align:left;font-family:inherit;cursor:pointer}
.city--selected{outline:2px solid #9db2b5;background:#e5ebec}



/* ===== Modern Admin UI ===== */
:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --text:#172033;
  --muted:#667085;
  --border:#e6eaf0;
  --primary:#5b5ce2;
  --primary-2:#7475f0;
  --success:#12b76a;
  --danger:#f04438;
  --shadow:0 10px 35px rgba(20,32,55,.07);
  --radius:18px;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.admin-layout{display:flex;min-height:100vh}
.admin-sidebar{
  width:260px;background:#111827;color:#fff;padding:22px 16px;
  position:sticky;top:0;height:100vh;flex:none;
}
.admin-brand{display:flex;align-items:center;gap:11px;padding:8px 10px 26px;font-weight:800;font-size:20px}
.admin-brand .brand-dot{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--primary),#9b7bff);box-shadow:0 8px 20px rgba(91,92,226,.35)}
.admin-nav{display:grid;gap:6px}
.admin-nav a{
  display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:12px;
  color:#aeb7c8;text-decoration:none;transition:.18s ease;font-size:14px;font-weight:600
}
.admin-nav a:hover,.admin-nav a.active{background:rgba(255,255,255,.09);color:#fff}
.admin-main{flex:1;min-width:0}
.admin-topbar{
  height:74px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;
  justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:20
}
.admin-title{font-size:21px;font-weight:800;letter-spacing:-.02em}
.admin-user{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.admin-avatar{width:36px;height:36px;border-radius:50%;background:#ececff;color:var(--primary);display:grid;place-items:center;font-weight:800}
.admin-content{padding:30px;max-width:1500px;margin:auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}
.page-head h1{margin:0 0 6px;font-size:30px;letter-spacing:-.035em}
.page-head p{margin:0;color:var(--muted);font-size:14px}
.admin-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.admin-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px
}
.admin-card h2,.admin-card h3{margin:0 0 16px;font-size:17px}
.stat-card{grid-column:span 3;padding:20px}
.stat-label{font-size:13px;color:var(--muted);font-weight:600}
.stat-value{font-size:30px;font-weight:850;margin-top:8px;letter-spacing:-.04em}
.stat-note{font-size:12px;color:var(--success);margin-top:7px;font-weight:700}
.block-card{grid-column:span 6;position:relative;overflow:hidden}
.block-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--primary),#9b7bff)}
.block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.block-title{font-size:18px;font-weight:800}
.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#eef0ff;color:var(--primary);font-size:11px;font-weight:800}
label{display:block;margin:0 0 7px;color:#475467;font-size:12px;font-weight:750}
input,select,textarea{
  width:100%;border:1px solid #dfe4ec;background:#fff;color:var(--text);
  border-radius:12px;padding:11px 13px;outline:none;font:inherit;font-size:14px;
  transition:border-color .16s,box-shadow .16s
}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(91,92,226,.10)}
textarea{min-height:115px;resize:vertical}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-group{margin-bottom:14px}
.btn{
  appearance:none;border:0;border-radius:12px;padding:10px 15px;cursor:pointer;
  font-weight:750;font-size:13px;transition:transform .12s,box-shadow .15s,background .15s
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 7px 18px rgba(91,92,226,.22)}
.btn-primary:hover{background:#4f50d6}
.btn-secondary{background:#f1f3f7;color:#344054}
.btn-danger{background:#fff0ef;color:var(--danger)}
.btn-success{background:#eafaf2;color:#079455}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.file-drop{
  border:1.5px dashed #cbd3e1;border-radius:14px;background:var(--surface-2);
  padding:16px;text-align:center;transition:.18s
}
.file-drop:hover{border-color:var(--primary);background:#f5f5ff}
.file-drop input{display:none}
.file-drop strong{display:block;font-size:13px;margin-bottom:4px}
.file-drop span{color:var(--muted);font-size:11px}
.city-list{
  margin-top:10px;max-height:180px;overflow:auto;border:1px solid var(--border);
  border-radius:12px;background:#fbfcfe
}
.city-list div{padding:8px 11px;border-bottom:1px solid #eef1f5;font-size:12px}
.city-list div:last-child{border-bottom:0}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid #eef1f5;font-size:13px}
th{background:#f8fafc;color:#667085;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
tr:last-child td{border-bottom:0}
.toast{
  position:fixed;right:22px;bottom:22px;z-index:100;padding:13px 16px;border-radius:13px;
  background:#111827;color:#fff;box-shadow:0 15px 40px rgba(0,0,0,.18);font-size:13px
}
@media(max-width:1050px){
  .admin-sidebar{width:220px}.stat-card{grid-column:span 6}.block-card{grid-column:span 12}
}
@media(max-width:720px){
  .admin-sidebar{display:none}.admin-topbar{padding:0 18px}.admin-content{padding:18px}
  .page-head{align-items:flex-start;flex-direction:column}.page-head h1{font-size:25px}
  .stat-card{grid-column:span 12}.form-row{grid-template-columns:1fr}.admin-card{padding:17px}
}