/* Design Tokens (оставлены для остальных страниц/компонентов, не критичных для первого рендера) */
:root {
  /* Neutrals (dark default) */
  --bg: #0d1117;
  --bg-2: #111827;
  --surface: #0f1522;
  --surface-2: #0f172a;
  --paper: #121826;
  --paper-2: #1a2233;
  --fg: #f6f8fa;
  --muted: #b9c2d6;
  --line: #24314a;
  /* Accents */
  --accent: #4f7cff;
  --accent-2: #8bb2ff;
  --success: #22c55e;
  --warn: #f5c04d;
  --danger: #ff6b6b;
  /* Roles */
  --role-manager: #5b8bff;
  --role-customer: #2dd4bf;
  /* Effects */
  --focus-ring: 0 0 0 3px rgba(79, 124, 255, .22);
  --shadow: 0 10px 24px rgba(3, 7, 18, .35), 0 2px 6px rgba(0, 0, 0, .25);
  --radius: 12px;
  /* Typography */
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, 'Noto Sans';
}

/* Optional light theme */
:root.theme-light {
  --bg: #f6f7fb;
  --bg-2: #eef1f7;
  --surface: #ffffff;
  --surface-2: #f7f9ff;
  --paper: #ffffff;
  --paper-2: #f4f6fb;
  --fg: #0b1220;
  --muted: #4a5568;
  --line: #d7ddea;
  --accent: #305fe6;
  --accent-2: #5b86ff;
  --focus-ring: 0 0 0 3px rgba(48, 95, 230, .22);
}

/* Базовая обёртка main уже покрыта инлайном; оставляем дополнительные поверхности и навигацию */
.site-header {
  box-shadow: 0 6px 14px rgba(3, 7, 18, .28);
  backdrop-filter: saturate(120%) blur(6px);
}

.nav a:hover {
  background: rgba(79, 124, 255, .08);
}

/* Cards/Tags (карточки контента ниже первого экрана) */
.card {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin: 16px 0;
  box-shadow: var(--shadow);
}

.tag {
  background: rgba(255, 255, 255, .02);
}

.tag.warn {
  color: #f5c04d;
  border-color: #6b5527;
  background: rgba(245, 192, 77, .1);
}

/* Формы — расширенные состояния, гриды и адаптив */
label {
  display: block;
  margin-bottom: 6px;
  color: #d9e4ff;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
.form-control {
  width: 100%;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}

input::placeholder,
textarea::placeholder {
  color: #93a3c4;
}

input:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width:760px) {
  .grid.two {
    grid-template-columns: 1fr;
  }
}

/* Кнопки — дополнительные варианты */
.btn.danger {
  background: linear-gradient(180deg, #e05656, #c84848);
  border-color: #b23f3f;
}

.btn.danger:hover {
  background: linear-gradient(180deg, #f06464, #d24f4f);
}

/* Markdown Readable Surfaces */
.md-view {
  color: #eaf0ff;
}

.md-view a {
  color: #9cc0ff;
  border-bottom: 1px dashed rgba(156, 192, 255, .5);
}

.md-view a:hover {
  border-bottom-color: #9cc0ff;
}

.md-view blockquote {
  margin: 10px 0;
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  color: #d4e1ff;
  background: #111a34;
  border-radius: 8px;
}

.md-view pre {
  background: var(--surface-2);
  color: #e6eeff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  overflow: auto;
}

.md-view code {
  font-family: var(--mono);
}

.md-view table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 10px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .01);
}

.md-view thead th {
  background: #122042;
  color: #eaf0ff;
}

.md-view tbody tr:nth-child(2n) {
  background: #0e1936;
}

/* EasyMDE — тулбары, превью и редакторская область */
.EasyMDEContainer .editor-toolbar {
  position: relative;
  background: rgba(245, 248, 255, .82) !important;
  color: #0b1220 !important;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)) !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  box-shadow: 0 8px 24px rgba(3, 7, 18, .18);
  backdrop-filter: saturate(130%) blur(8px);
}

:root:not(.theme-light) .EasyMDEContainer .editor-toolbar {
  background: rgba(236, 242, 255, .86) !important;
}

.EasyMDEContainer .editor-toolbar a {
  color: #18223a !important;
  border-color: transparent !important;
}

.EasyMDEContainer .editor-toolbar a:hover {
  background: rgba(49, 92, 225, .12) !important;
  border-radius: 8px !important;
}

.EasyMDEContainer .editor-toolbar i {
  filter: none !important;
  opacity: .95;
}

.EasyMDEContainer .editor-statusbar {
  color: #3c4a68 !important;
  background: rgba(245, 248, 255, .7);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 6px 10px;
}

.EasyMDEContainer .CodeMirror {
  background: var(--surface-2) !important;
  color: var(--fg) !important;
  border: 1px solid var(--line) !important;
  border-top: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  min-height: 260px;
}

.cm-s-easymde .CodeMirror-selected {
  background: rgba(79, 124, 255, .25) !important;
}

.CodeMirror-cursor {
  border-left: 2px solid #6fa0ff !important;
}

.cm-s-easymde .CodeMirror-gutters {
  background: color-mix(in srgb, var(--surface-2) 86%, #000 14%) !important;
  border-right: 1px solid var(--line) !important;
}

.cm-s-easymde .CodeMirror-linenumber {
  color: #93a3c4 !important;
}

.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 72%, #fff 28%), var(--paper-2)) !important;
  color: var(--fg) !important;
  border: 1px solid var(--line) !important;
  border-top: none !important;
  border-radius: 0 0 10px 10px !important;
  padding: 14px 16px !important;
}

:root.theme-light .EasyMDEContainer .editor-preview,
:root.theme-light .EasyMDEContainer .editor-preview-side {
  background: linear-gradient(180deg, #ffffff, var(--paper-2)) !important;
  color: #0b1220 !important;
}

/* Read-only markdown контейнер */
.md-view[aria-readonly="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 70%, #fff 30%), var(--paper-2));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--fg);
}

/* Отключение тулбара в превью */
.EasyMDEContainer .editor-toolbar.disabled-for-preview a:not(.no-disable) {
  opacity: .55 !important;
}

/* Роли и акценты */
.is-manager .card {
  border-color: color-mix(in srgb, var(--role-manager) 35%, var(--line));
}

.is-customer .card {
  border-color: color-mix(in srgb, var(--role-customer) 35%, var(--line));
}

.is-manager .btn.primary {
  box-shadow: 0 0 0 2px rgba(91, 139, 255, .2);
}

.is-customer .btn.primary {
  box-shadow: 0 0 0 2px rgba(45, 212, 191, .2);
}

/* A11y */
:focus-visible {
  outline: 3px solid transparent;
  box-shadow: var(--focus-ring);
  outline-offset: 2px;
}

/* Empty states */
.empty {
  border: 1px dashed var(--line);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

/* Landing grid / список */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.vacancy-item .vacancy-title {
  margin: 4px 0 6px;
  font-size: 18px;
  line-height: 1.25;
}

.vacancy-item .muted {
  color: var(--muted);
}

.vacancy-item .meta {
  margin-top: 6px;
  font-size: 12px;
  color: #9fb0d1;
}

.vacancy-item .actions {
  margin-top: 8px;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0 24px;
}

.load-more-wrap .btn.primary {
  min-width: 200px;
  box-shadow: 0 8px 18px rgba(79, 124, 255, .25);
}

/* Доп. кнопки/элементы */
.btn-delete-order.btn.danger {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(255, 107, 107, .18);
}

.delete-status {
  min-height: 1em;
}