/* ================================================================
   KAFLU Admin — Design System (OripioFin-inspired)
   ================================================================ */

:root {
  --green:       #0f9d58;
  --green-dark:  #0b7a44;
  --green-deep:  #064e2e;
  --bg:          #f4f6f5;
  --card:        #ffffff;
  --text:        #0f1b16;
  --muted:       #7c8a83;
  --border:      #e8ebe9;
  --soft:        #eef2f0;
  --danger:      #d93025;
  --danger-soft: #fce8e6;
  --radius:      14px;
  --radius-lg:   18px;
  --shadow:      0 2px 12px rgba(0,0,0,.06);
  --shadow-md:   0 8px 28px rgba(0,0,0,.10);
}

/* ── Reset ───────────────────────────────────────────────────── */
.news-admin { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.5; }
.news-admin *, .news-admin *::before, .news-admin *::after { box-sizing:border-box; }
.news-admin a { color:inherit; }
.news-admin [hidden] { display:none !important; }
.news-admin i[data-lucide] { display:inline-flex; flex:0 0 auto; }
.news-admin i[data-lucide] svg { width:18px; height:18px; flex:0 0 auto; }

/* ── Shell ───────────────────────────────────────────────────── */
.admin-shell { display:flex; min-height:100vh; align-items:stretch; }
.admin-content { display:flex; flex:1 1 auto; flex-direction:column; min-width:0; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.admin-sidebar {
  position:sticky; top:0;
  display:flex; flex:0 0 260px; width:260px;
  flex-direction:column; height:100vh;
  border-right:1px solid var(--border);
  background:var(--card);
  overflow-y:auto;
}

.admin-sidebar__brand { padding:22px 18px 16px; border-bottom:1px solid var(--border); }

.admin-brand {
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
}
.admin-brand__mark {
  display:grid; place-items:center; width:36px; height:36px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--green), var(--green-dark));
  color:#fff; font-weight:800; font-size:16px; flex:0 0 auto;
}
.admin-brand strong { display:block; font-size:15px; font-weight:700; color:var(--text); line-height:1.2; }
.admin-brand small  { display:block; margin-top:2px; color:var(--muted); font-size:12px; }

.admin-sidebar__nav {
  display:flex; flex:1 1 auto; flex-direction:column;
  padding:10px 14px 0; gap:10px; overflow-y:auto;
}

.nav-section { display:flex; flex-direction:column; gap:2px; }
.nav-section__label {
  font-size:11px; letter-spacing:.07em; color:var(--muted);
  text-transform:uppercase; font-weight:700;
  padding:0 8px; margin-bottom:2px;
}

.admin-sidebar__link {
  display:flex; align-items:center; gap:11px;
  padding:7px 12px; border-radius:12px;
  color:var(--muted); font-size:14px; font-weight:500;
  text-decoration:none;
  transition:background .15s, color .15s;
}
.admin-sidebar__link svg { width:18px; height:18px; }
.admin-sidebar__link:hover { background:var(--soft); color:var(--text); }
.admin-sidebar__link.is-active { background:var(--green); color:#fff; }

.admin-sidebar__footer {
  padding:10px 14px;
  border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:2px;
}

.admin-user {
  display:flex; align-items:center; gap:10px; padding:6px 12px;
}
.admin-user__avatar {
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg, var(--green), var(--green-dark));
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px;
  flex:0 0 auto;
}
.admin-user__info { min-width:0; }
.admin-user__name { font-size:13.5px; font-weight:600; color:var(--text); display:block; }
.admin-user__role { font-size:11.5px; color:var(--muted); display:block; }

.admin-logout { display:contents; }
.admin-logout .button { justify-content:flex-start; }

/* mobile overlay */
.admin-sidebar-overlay { position:fixed; inset:0; z-index:40; background:rgba(15,27,22,.45); }
.admin-sidebar-toggle {
  display:none; flex:0 0 auto; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  width:38px; height:38px; border:1px solid var(--border);
  border-radius:10px; background:var(--card); cursor:pointer;
}
.admin-sidebar-toggle__bar { display:block; width:18px; height:2px; border-radius:1px; background:var(--text); }

/* ── Topbar ──────────────────────────────────────────────────── */
.admin-topbar {
  position:sticky; top:0; z-index:30;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(14px);
}
.admin-topbar__inner {
  display:flex; align-items:center; gap:14px;
  width:100%;
  max-width:1760px;
  margin:0 auto;
  padding:14px 40px;
}
.admin-content--with-sidebar .admin-topbar__link { margin-left:auto; }

/* ── Main content ────────────────────────────────────────────── */
.admin-main {
  width:100%;
  max-width:1760px;
  margin:0 auto;
  padding:40px 40px 72px;
}

/* ── Messages ────────────────────────────────────────────────── */
.admin-messages {
  width:100%;
  max-width:1760px;
  margin:18px auto 0;
  padding:0 40px;
}
.admin-message {
  border:1px solid var(--border); border-left:4px solid var(--green);
  border-radius:var(--radius); background:var(--card);
  padding:12px 16px; box-shadow:var(--shadow); margin-bottom:10px;
}
.admin-message--error { border-left-color:var(--danger); }

/* ── Page head ───────────────────────────────────────────────── */
.page-head {
  display:flex; gap:20px; align-items:flex-start;
  justify-content:space-between; margin-bottom:24px;
}
.page-head__actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.page-head h1 { margin:0; color:var(--text); font-size:clamp(24px,3.5vw,36px); line-height:1.15; }
.page-head p, .form-section__head p { margin:6px 0 0; color:var(--muted); font-size:14px; }
.eyebrow {
  margin:0 0 8px; color:var(--green); font-size:11px;
  font-weight:800; letter-spacing:.07em; text-transform:uppercase;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.button, .icon-button {
  border:1px solid transparent; border-radius:var(--radius);
  font:inherit; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, transform .15s;
}
.button {
  display:inline-flex; align-items:center; justify-content:center;
  gap:7px; min-height:40px; padding:9px 16px;
  font-size:14px; text-decoration:none;
}
.button svg { width:16px; height:16px; }
.button:hover, .icon-button:hover { transform:translateY(-1px); }
.button--primary  { background:var(--green); border-color:var(--green); color:#fff; }
.button--primary:hover { background:var(--green-dark); border-color:var(--green-dark); }
.button--secondary { background:var(--card); border-color:var(--border); color:var(--text); }
.button--secondary:hover { background:var(--soft); }
.button--ghost { background:transparent; border-color:transparent; color:var(--muted); }
.button--ghost:hover { background:var(--soft); color:var(--text); }
.button--danger   { background:var(--danger); border-color:var(--danger); color:#fff; }
.button--danger:hover { filter:brightness(.9); }
.button--wide { width:100%; }

.icon-button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:7px 11px; white-space:nowrap;
  background:var(--card); border-color:var(--border); color:var(--text);
}
.icon-button svg { width:16px; height:16px; }
.icon-button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.icon-button--danger { background:var(--danger-soft); border-color:rgba(217,48,37,.25); color:var(--danger); }

/* ── Filter panel ────────────────────────────────────────────── */
.filter-panel {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:18px; margin-bottom:20px;
}
.filters-form {
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(160px,210px) minmax(180px,240px) auto;
  gap:14px; align-items:end;
}
.filters-form__actions { display:flex; gap:8px; align-items:center; justify-content:flex-end; }

/* ── Fields ──────────────────────────────────────────────────── */
.field, .check-field { display:flex; min-width:0; flex-direction:column; gap:7px; }
.field > label, .field > span, .check-field > span, .block-card__top {
  color:var(--text); font-size:13px; font-weight:650;
}
.field input, .field select, .field textarea,
.login-form input, .article-form input, .article-form select, .article-form textarea {
  width:100%; min-height:42px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--card); color:var(--text); font:inherit;
  padding:9px 13px; transition:border-color .15s, box-shadow .15s;
}
.field textarea, .article-form textarea { min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus,
.login-form input:focus, .article-form input:focus, .article-form select:focus, .article-form textarea:focus {
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(15,157,88,.12);
}
.field--error input, .field--error select, .field--error textarea, .field--error.check-field {
  border-color:var(--danger);
}
.field-errors, .form-alert { color:var(--danger); font-size:13px; }
.field-errors ul, .form-alert ul { margin:0; padding-left:18px; }
.form-alert {
  margin-bottom:20px; border:1px solid rgba(217,48,37,.25);
  border-radius:var(--radius); background:var(--danger-soft); padding:12px 16px;
}
.field small { color:var(--muted); font-size:12px; }

/* ── Table ───────────────────────────────────────────────────── */
.article-table {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden;
}
.article-table__head, .article-row {
  display:grid;
  grid-template-columns:minmax(260px,1.7fr) minmax(140px,.8fr) minmax(130px,.7fr) minmax(145px,.7fr) minmax(190px,.8fr);
  gap:16px; align-items:center;
}
.article-table__head {
  border-bottom:1px solid var(--border); background:var(--soft);
  padding:11px 18px; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase;
}
.article-row { padding:16px 18px; border-bottom:1px solid var(--border); }
.article-row:last-child { border-bottom:0; }
.article-row__title { color:var(--text); font-weight:700; text-decoration:none; }
.article-row__title:hover { color:var(--green); }
.article-row__meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:5px; color:var(--muted); font-size:13px; }
.article-row__actions { display:flex; flex-wrap:wrap; gap:8px; }

.admin-nav__link, .icon-link {
  display:inline-flex; align-items:center; gap:7px;
  color:var(--text); font-size:14px; font-weight:600; text-decoration:none;
}
.admin-nav__link:hover, .icon-link:hover { color:var(--green); }
.icon-link--danger { color:var(--danger); }
.icon-link--danger:hover { color:var(--danger); opacity:.8; }

/* status pills */
.status-pill { display:inline-flex; align-items:center; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; }
.status-pill--published { background:rgba(15,157,88,.12); color:var(--green-dark); }
.status-pill--draft { background:#fff3e0; color:#e65100; }
.muted { color:var(--muted); }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  display:grid; justify-items:center; padding:52px 20px; text-align:center;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
}
.empty-state svg { width:40px; height:40px; color:var(--green); margin-bottom:12px; }
.empty-state h2 { margin:0 0 8px; color:var(--text); font-size:20px; }
.empty-state p  { margin:0 0 20px; color:var(--muted); }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination { display:flex; gap:10px; align-items:center; justify-content:center; margin-top:24px; }
.pagination__link, .pagination__current {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--card); padding:8px 14px; text-decoration:none; font-size:14px;
}
.pagination__link--disabled { color:var(--muted); opacity:.55; }

/* ── Login ───────────────────────────────────────────────────── */
.login-layout { display:grid; min-height:calc(100vh - 80px); place-items:center; }
.login-card {
  width:min(100%,440px); padding:32px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.login-card__header { margin-bottom:24px; }
.login-card h1 { margin:0; color:var(--text); font-size:26px; }
.login-card p { margin:6px 0 0; color:var(--muted); }
.login-card__public-link { display:inline-block; margin-top:20px; color:var(--green); font-weight:600; text-decoration:none; }
.login-form { display:grid; gap:18px; }

/* ── Article / generic form ──────────────────────────────────── */
.article-form { display:grid; gap:28px; }
.form-section { border-top:1px solid var(--border); padding-top:24px; }
.form-section h2, .form-section h3 { margin:0; color:var(--text); line-height:1.2; }
.form-section__head { max-width:760px; margin-bottom:18px; }
.form-section__head--with-actions { display:flex; max-width:none; gap:20px; align-items:flex-start; justify-content:space-between; }
.form-grid { display:grid; gap:16px; }
.form-grid--two   { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.field--full { grid-column:1/-1; }

.check-field {
  min-height:70px; justify-content:center;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--soft); padding:12px;
  flex-direction:row; align-items:flex-start;
}
.check-field input { width:auto; min-height:auto; margin-top:3px; }
.check-field small { display:block; font-weight:500; }

/* form actions bar */
.form-actions {
  position:sticky; bottom:0;
  display:flex; gap:10px; align-items:center; justify-content:flex-end;
  border-top:1px solid var(--border);
  background:rgba(244,246,245,.95); padding:14px 0 0;
  backdrop-filter:blur(10px);
}

/* ── Block editor ────────────────────────────────────────────── */
.block-toolbar { display:grid; grid-template-columns:minmax(220px,320px) auto; gap:8px; align-items:end; justify-content:end; }
.block-toolbar__select { min-width:220px; }
.block-editor { display:grid; gap:14px; }
.block-editor__empty {
  display:grid; justify-items:start;
  border:1px dashed var(--border); border-radius:var(--radius);
  background:rgba(255,255,255,.7); padding:20px; color:var(--muted);
}
.block-editor__empty svg { width:24px; height:24px; margin-bottom:8px; color:var(--green); }
.block-editor__empty p { margin:0; }
.block-card { border:1px solid var(--border); border-radius:var(--radius); background:var(--card); padding:18px; }
.block-card__top { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:13px; font-weight:700; color:var(--text); }
.block-card__actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.block-index { display:inline-grid; place-items:center; width:26px; height:26px; margin-right:8px; border-radius:8px; background:var(--soft); color:var(--green-dark); font-size:12px; }
.legacy-body { margin-top:28px; }

/* ── Danger / delete ─────────────────────────────────────────── */
.danger-panel {
  border:1px solid rgba(217,48,37,.25); border-radius:var(--radius-lg);
  background:var(--card); box-shadow:var(--shadow); padding:24px;
}
.danger-panel h2 { margin:0 0 16px; color:var(--danger); font-size:22px; }
.delete-summary { display:grid; gap:12px; margin:0 0 24px; }
.delete-summary div { display:grid; grid-template-columns:160px 1fr; gap:12px; border-bottom:1px solid var(--border); padding-bottom:10px; }
.delete-summary dt { color:var(--muted); font-weight:700; }
.delete-summary dd { margin:0; }
.delete-actions { display:flex; flex-wrap:wrap; gap:10px; }

/* ── Table helper ────────────────────────────────────────────── */
.table-empty { padding:36px; text-align:center; color:var(--muted); font-size:14px; }
.field__checkbox { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; font-weight:500; }
.field__checkbox input[type="checkbox"] { width:16px; height:16px; flex:0 0 auto; accent-color:var(--green); }
.field__hint { margin:6px 0 0; font-size:12px; line-height:1.4; color:var(--muted); }

/* ================================================================
   DASHBOARD
   ================================================================ */

/* Welcome banner */
.dash-welcome {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-bottom:28px; padding:28px 32px;
  background:linear-gradient(135deg, var(--green-deep) 0%, var(--green) 100%);
  border-radius:var(--radius-lg); color:#fff;
}
.dash-welcome .eyebrow { color:rgba(255,255,255,.6); margin-bottom:6px; }
.dash-welcome h1 { margin:0; color:#fff; font-size:clamp(20px,2.8vw,30px); }
.dash-welcome p  { margin:6px 0 0; color:rgba(255,255,255,.7); font-size:14px; }
.dash-welcome__actions { display:flex; gap:10px; flex-shrink:0; align-items:center; }
.dash-welcome .button--primary  { background:#fff; border-color:#fff; color:var(--green-dark); }
.dash-welcome .button--primary:hover  { background:var(--soft); }
.dash-welcome .button--secondary { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.35); color:#fff; }
.dash-welcome .button--secondary:hover { background:rgba(255,255,255,.25); }

/* Stat cards grid */
.dashboard-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:16px; margin-bottom:28px;
}

.dashboard-card {
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:22px 20px 20px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  color:var(--text); text-decoration:none;
  transition:border-color .15s, box-shadow .15s, transform .15s;
  overflow:hidden;
}
.dashboard-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--green); opacity:0; transition:opacity .15s;
}
.dashboard-card:hover { border-color:var(--green); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.dashboard-card:hover::before { opacity:1; }

.dashboard-card__icon {
  display:grid; place-items:center; width:44px; height:44px;
  border-radius:12px; background:var(--soft); color:var(--green); margin-bottom:4px;
}
.dashboard-card__icon svg { width:22px; height:22px; }

.dashboard-card__value { font-size:36px; font-weight:800; color:var(--text); line-height:1; }
.dashboard-card__label { font-size:13px; font-weight:500; color:var(--muted); }
.dashboard-card__sub   { margin-top:2px; }

.dash-pill {
  display:inline-flex; align-items:center; border-radius:999px;
  padding:3px 10px; font-size:11.5px; font-weight:700;
  background:rgba(15,157,88,.1); color:var(--green-dark);
}

.dashboard-card__arrow {
  position:absolute; bottom:16px; right:18px;
  color:var(--border); transition:color .15s, transform .15s;
}
.dashboard-card__arrow svg { width:15px; height:15px; }
.dashboard-card:hover .dashboard-card__arrow { color:var(--green); transform:translateX(3px); }

/* Quick actions */
.dash-sections { display:grid; gap:20px; }

.dash-section {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden;
}
.dash-section__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--border);
}
.dash-section__head h2 {
  display:flex; align-items:center; gap:8px;
  margin:0; font-size:16px; font-weight:700; color:var(--text);
}
.dash-section__head h2 svg { width:18px; height:18px; color:var(--green); }

.dash-actions-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1px; background:var(--border);
}
.dash-action {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:24px 16px; background:var(--card);
  text-decoration:none; color:var(--text);
  font-size:13.5px; font-weight:600; text-align:center;
  transition:background .15s;
}
.dash-action:hover { background:var(--soft); }
.dash-action__icon {
  display:grid; place-items:center; width:46px; height:46px;
  border-radius:14px; background:var(--soft); color:var(--green);
  transition:background .15s, color .15s;
}
.dash-action__icon svg { width:22px; height:22px; }
.dash-action:hover .dash-action__icon { background:var(--green); color:#fff; }

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (min-width:981px) {
  .admin-content--with-sidebar .admin-topbar { display:none; }
}

@media (max-width:980px) {
  .admin-sidebar {
    position:fixed; z-index:50; transform:translateX(-100%);
    box-shadow:var(--shadow-md); transition:transform .2s ease;
  }
  .admin-sidebar.is-open { transform:translateX(0); }
  .admin-sidebar-toggle { display:flex; }

  .filters-form, .form-grid--three { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filters-form__actions { justify-content:flex-start; }

  .article-table__head { display:none; }
  .article-table { display:grid; gap:12px; border:0; background:transparent; box-shadow:none; }
  .article-row {
    grid-template-columns:1fr; gap:10px;
    border:1px solid var(--border); border-radius:var(--radius-lg);
    background:var(--card); box-shadow:var(--shadow);
  }
  .article-row [data-label]::before { content:attr(data-label) ": "; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; }
  .form-section__head--with-actions { display:block; }
  .block-toolbar { grid-template-columns:1fr; justify-content:flex-start; margin-top:14px; }
}

@media (max-width:768px) {
  .dash-welcome { flex-direction:column; padding:22px; }
  .dash-welcome__actions { width:100%; }
  .dash-welcome .button { flex:1; justify-content:center; }
}

@media (max-width:680px) {
  .admin-main { padding:24px 16px 48px; }
  .admin-messages, .admin-topbar__inner { padding-left:16px; padding-right:16px; }
  .page-head, .pagination, .form-actions { align-items:stretch; flex-direction:column; }
  .page-head__actions { flex-direction:column; width:100%; }
  .admin-user .button, .page-head .button, .form-actions .button { width:100%; }
  .filters-form, .form-grid--two, .form-grid--three { grid-template-columns:1fr; }
  .login-layout { place-items:start center; }
  .login-card { padding:24px; }
  .block-card__top { align-items:flex-start; flex-direction:column; }
  .block-card__actions, .delete-actions { width:100%; }
  .block-card__actions .icon-button, .delete-actions .button { flex:1 1 140px; }
  .delete-summary div { grid-template-columns:1fr; gap:4px; }
}

/* ================================================================
   LANGUAGE TABS
   ================================================================ */

.lang-tabs {
  display:flex; gap:4px;
}
.lang-tab {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:32px; padding:0 12px;
  border:1px solid var(--border); border-radius:8px;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--muted);
  transition:background .12s, color .12s, border-color .12s;
}
.lang-tab:hover { background:var(--soft); color:var(--text); }
.lang-tab.is-active { background:var(--green); border-color:var(--green); color:#fff; }

/* ================================================================
   DATA TABLE — OripioFin style
   ================================================================ */

.list-header {
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  margin-bottom:24px;
}
.list-header h1 { margin:0; font-size:clamp(22px,3vw,32px); }
.list-header p  { margin:6px 0 0; color:var(--muted); font-size:14px; }

.data-panel {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden;
}

.data-panel__head {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:18px 22px; border-bottom:1px solid var(--border);
}
.data-panel__head h3 { font-size:17px; font-weight:700; margin:0; white-space:nowrap; }
.data-panel__tools {
  margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

.search-box {
  display:flex; align-items:center; gap:8px;
  background:var(--soft); border-radius:10px;
  padding:9px 13px; min-width:220px;
}
.search-box svg { width:16px; height:16px; color:var(--muted); flex:0 0 auto; }
.search-box input {
  border:none; background:transparent; color:var(--text); font:inherit;
  font-size:14px; width:100%; outline:none;
}
.search-box input::placeholder { color:var(--muted); }

.filter-select {
  height:40px; border:1px solid var(--border); border-radius:10px;
  background:var(--card); color:var(--text); font:inherit; font-size:14px;
  padding:0 12px; cursor:pointer; outline:none;
  transition:border-color .15s;
}
.filter-select:focus { border-color:var(--green); }

.table-wrap { overflow-x:auto; }

.data-table {
  width:100%; border-collapse:collapse;
}
.data-table thead th {
  text-align:left; font-size:12px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
  padding:13px 20px; background:var(--soft);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.data-table tbody td {
  padding:16px 20px; border-top:1px solid var(--border);
  font-size:14px; vertical-align:middle;
}
.data-table tbody tr { transition:background .12s; }
.data-table tbody tr:hover { background:var(--soft); }

.row-item { display:flex; align-items:center; gap:12px; }
.row-item__icon {
  width:38px; height:38px; border-radius:10px; flex:0 0 auto;
  background:linear-gradient(135deg, var(--green), var(--green-dark));
  display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:15px;
}
.row-item__title {
  font-weight:600; color:var(--text); text-decoration:none;
  display:block; line-height:1.3;
}
.row-item__title:hover { color:var(--green); }
.row-item__sub { font-size:12px; color:var(--muted); margin-top:2px; }

.td-muted { color:var(--muted); font-size:13.5px; }

.status-dot {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600;
}
.status-dot::before {
  content:''; width:7px; height:7px; border-radius:50%; flex:0 0 auto;
}
.status-dot--green { color:var(--green); }
.status-dot--green::before { background:var(--green); }
.status-dot--orange { color:#e0792f; }
.status-dot--orange::before { background:#e0792f; }
.status-dot--muted { color:var(--muted); }
.status-dot--muted::before { background:var(--muted); }
.status-dot--danger { color:#c0392b; }
.status-dot--danger::before { background:#c0392b; }

.row-actions { display:flex; align-items:center; gap:6px; justify-content:flex-end; }
.row-btn {
  display:grid; place-items:center; width:34px; height:34px;
  border-radius:9px; border:1px solid var(--border);
  background:var(--card); color:var(--muted);
  text-decoration:none; transition:background .12s, color .12s, border-color .12s;
  cursor:pointer;
}
.row-btn svg { width:15px; height:15px; }
.row-btn:hover { background:var(--soft); color:var(--text); border-color:var(--text); }
.row-btn--danger:hover { background:var(--danger-soft); color:var(--danger); border-color:var(--danger); }
.row-btn--approve {
  display:inline-flex; align-items:center; gap:5px;
  width:auto; padding:0 12px;
  color:var(--green-dark); border-color:var(--green);
  font-size:12.5px; font-weight:600; white-space:nowrap;
}
.row-btn--approve:hover { background:var(--green); color:#fff; border-color:var(--green); }

.data-panel__foot {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; border-top:1px solid var(--border);
}
.pager { display:flex; gap:6px; }
.pager__btn {
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--border); border-radius:9px;
  background:var(--card); color:var(--text);
  text-decoration:none; transition:background .12s;
  cursor:pointer;
}
.pager__btn svg { width:16px; height:16px; }
.pager__btn:hover { background:var(--soft); }
.pager__btn--disabled { color:var(--muted); opacity:.45; cursor:not-allowed; }

@media (max-width:768px) {
  .list-header { flex-direction:column; }
  .data-panel__head { flex-direction:column; align-items:stretch; }
  .data-panel__tools { margin-left:0; }
  .search-box { min-width:0; }
}

/* ================================================================
   Article Editor Layout
   ================================================================ */

/* ── Editor topbar ───────────────────────────────────────────── */
.editor-topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; margin-bottom:28px;
  padding:18px 24px;
  background:var(--card); border-radius:var(--radius-lg);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.editor-topbar__left {
  display:flex; align-items:center; gap:14px; min-width:0; flex:1 1 auto;
}
.editor-topbar__left > div { min-width:0; }
.editor-topbar__right {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.eyebrow {
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:700; line-height:1;
  margin:0 0 4px;
}
.editor-title {
  font-size:20px; font-weight:700; margin:0; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  /* max-width:100% — обрезаемся по реально доступному месту в шапке, чтобы
     длинный заголовок не налезал на языковые вкладки и кнопки справа */
  max-width:100%;
}

/* ── Two-column editor layout ────────────────────────────────── */
.editor-layout {
  display:grid;
  grid-template-columns:minmax(720px,1fr) minmax(380px,420px);
  gap:32px;
  align-items:start;
}
.editor-main { display:flex; flex-direction:column; gap:24px; min-width:0; }
.editor-aside {
  display:flex;
  flex-direction:column;
  gap:18px;
  position:sticky;
  top:24px;
  overscroll-behavior:contain;
}

/* ── Editor cards (main area) ────────────────────────────────── */
.editor-card {
  background:var(--card); border-radius:var(--radius-lg);
  border:1px solid var(--border); box-shadow:var(--shadow);
  overflow:hidden;
}
.editor-card__head {
  display:flex; align-items:center; gap:10px;
  padding:14px 20px; border-bottom:1px solid var(--border);
  background:var(--soft);
}
.editor-card__head i[data-lucide] svg { width:17px; height:17px; color:var(--green); }
.editor-card__head h2 {
  font-size:14px; font-weight:700; margin:0; color:var(--text); flex:1;
}
.editor-card__tools {
  display:flex; align-items:center; gap:8px; margin-left:auto;
}
.editor-card__body { padding:24px 28px; }

.row-link { color:inherit; text-decoration:none; }
.row-link:hover { color:var(--green); text-decoration:underline; }

/* ── Detail (read-only) view ─────────────────────────────────── */
.detail-stack { display:flex; flex-direction:column; gap:20px; max-width:820px; }
.detail-list { display:flex; flex-direction:column; margin:0; }
.detail-list__row {
  display:grid; grid-template-columns:200px 1fr; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--border);
}
.detail-list__row:last-child { border-bottom:0; padding-bottom:0; }
.detail-list__row:first-child { padding-top:0; }
.detail-list dt { margin:0; color:var(--muted); font-size:13px; font-weight:600; }
.detail-list dd { margin:0; color:var(--text); font-size:14px; word-break:break-word; }
.detail-message {
  color:var(--text); font-size:15px; line-height:1.65; word-break:break-word;
}
@media (max-width:640px) {
  .detail-list__row { grid-template-columns:1fr; gap:4px; }
}

/* ── Form grids ──────────────────────────────────────────────── */
.form-grid { display:flex; flex-direction:column; gap:14px; }
.form-grid--two {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.field--full { grid-column:1/-1; }

/* ── Choice groups for project regions/tags ─────────────────── */
.choice-matrix {
  display:grid;
  grid-template-columns:minmax(280px,.85fr) minmax(360px,1.15fr);
  gap:24px;
  align-items:start;
}
.choice-group { min-width:0; }
.choice-group__head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.choice-group__title {
  color:var(--text);
  font-size:15px;
  font-weight:800;
  line-height:1.25;
}
.choice-group__meta {
  color:var(--muted);
  font-size:12.5px;
  font-weight:600;
  line-height:1.35;
  margin-top:3px;
}
.choice-group__icon {
  width:34px;
  height:34px;
  flex:0 0 34px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--green);
  background:#f8faf9;
}
.choice-grid {
  display:grid;
  gap:10px;
}
.choice-grid--regions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.choice-grid--tags { grid-template-columns:repeat(2,minmax(0,1fr)); }
.choice-pill {
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  cursor:pointer;
  overflow:hidden;
  transition:background .14s, border-color .14s, box-shadow .14s, transform .14s;
}
.choice-pill:hover {
  border-color:rgba(30,80,84,.34);
  box-shadow:0 8px 18px rgba(15,27,22,.06);
}
.choice-pill:focus-within {
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(30,80,84,.12);
}
.choice-pill:has(input:checked) {
  border-color:rgba(30,80,84,.34);
  background:linear-gradient(180deg,#f7fbf8 0%,#eef6f0 100%);
}
.choice-pill input[type="checkbox"] {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  opacity:0;
  cursor:pointer;
}
.choice-pill__box {
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border:1.5px solid var(--border);
  border-radius:7px;
  background:#fff;
  color:#fff;
  transition:background .14s, border-color .14s, transform .14s;
}
.choice-pill__box svg {
  width:14px;
  height:14px;
  opacity:0;
  stroke-width:3;
  transition:opacity .14s;
}
.choice-pill input:checked + .choice-pill__box {
  border-color:var(--green);
  background:var(--green);
  transform:scale(1.03);
}
.choice-pill input:checked + .choice-pill__box svg { opacity:1; }
.choice-pill__text {
  min-width:0;
  max-width:100%;
  color:var(--text);
  font-size:13px;
  font-weight:650;
  line-height:1.28;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}
.choice-group--error .choice-pill { border-color:rgba(217,48,37,.35); }

/* ── Sidebar cards ───────────────────────────────────────────── */
.aside-card {
  background:var(--card); border-radius:var(--radius);
  border:1px solid var(--border); box-shadow:var(--shadow);
  overflow:hidden;
}
.aside-card__head {
  display:flex; align-items:center; gap:9px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background:var(--soft);
}
.aside-card__head i[data-lucide] svg { width:16px; height:16px; color:var(--green); }
.aside-card__head h3 { font-size:13px; font-weight:700; margin:0; color:var(--text); }
.aside-card__body { padding:18px 20px; }
.aside-fields { display:flex; flex-direction:column; gap:12px; }

/* ── Cover editor ─────────────────────────────────────────────── */
.cover-editor { position:relative; display:grid; gap:12px; min-width:0; }
.cover-editor__stage {
  position:relative; display:grid; place-items:center;
  min-height:176px; overflow:hidden;
  border:1px dashed var(--border); border-radius:12px;
  background:#f8faf9; touch-action:none;
}
.cover-editor__source {
  display:block; width:auto; height:auto; max-width:100%; max-height:280px; object-fit:contain;
  user-select:none; -webkit-user-drag:none;
}
.cover-editor__empty {
  display:grid; justify-items:center; gap:8px;
  color:var(--muted); font-size:13px; text-align:center; padding:24px;
}
.cover-editor__empty svg { width:28px; height:28px; color:var(--muted); opacity:.7; }
.cover-editor__crop {
  position:absolute; z-index:2;
  border:2px solid #fff; border-radius:8px;
  box-shadow:0 0 0 999px rgba(15,27,22,.48), 0 8px 24px rgba(0,0,0,.18);
  cursor:grab; touch-action:none;
}
.cover-editor__crop.is-dragging { cursor:grabbing; }
.cover-editor__crop-grid {
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, transparent 33.333%, rgba(255,255,255,.65) 33.333%, rgba(255,255,255,.65) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(255,255,255,.65) 66.666%, rgba(255,255,255,.65) calc(66.666% + 1px), transparent calc(66.666% + 1px)),
    linear-gradient(to bottom, transparent 33.333%, rgba(255,255,255,.65) 33.333%, rgba(255,255,255,.65) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(255,255,255,.65) 66.666%, rgba(255,255,255,.65) calc(66.666% + 1px), transparent calc(66.666% + 1px));
}
.cover-editor__actions { display:flex; gap:8px; }
.cover-editor__upload { flex:1; justify-content:center; }
.cover-editor__reset { width:42px; padding:0; flex:0 0 42px; }
.cover-editor__input {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; opacity:0; pointer-events:none;
}
.cover-editor__clear {
  display:flex; align-items:center; gap:8px;
  color:var(--muted); font-size:13px; font-weight:600; cursor:pointer;
}
.cover-editor__clear input { width:auto; min-height:auto; margin:0; }
.cover-editor__previews { display:grid; gap:10px; }
.cover-preview { display:grid; gap:6px; min-width:0; }
.cover-preview > span { color:var(--muted); font-size:12px; font-weight:700; }
.cover-preview__frame {
  position:relative; overflow:hidden;
  border:1px solid var(--border); border-radius:8px;
  background:linear-gradient(135deg,#6B8270,#2a4030);
}
.cover-preview__frame--detail { aspect-ratio:16/9; }
.cover-preview__frame--card { aspect-ratio:16/10; }
.cover-preview__frame img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}

/* ── Publish toggle ──────────────────────────────────────────── */
.pub-toggle {
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px; cursor:pointer;
  user-select:none;
}
.pub-toggle input[type="checkbox"] { position:absolute; opacity:0; width:0; height:0; }
.pub-toggle__track {
  position:relative; width:44px; height:24px; flex:0 0 44px;
  border-radius:12px; background:var(--border);
  transition:background .2s;
}
.pub-toggle__thumb {
  position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2);
  transition:transform .2s;
}
.pub-toggle input:checked ~ .pub-toggle__track { background:var(--green); }
.pub-toggle input:checked ~ .pub-toggle__track .pub-toggle__thumb { transform:translateX(20px); }
.pub-toggle span { font-size:13.5px; font-weight:600; color:var(--text); }

/* ── Block editor ────────────────────────────────────────────── */
.block-editor {
  display:flex; flex-direction:column; gap:8px;
  min-height:60px;
}
.block-editor__empty {
  display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:32px 20px;
  border:2px dashed var(--border); border-radius:var(--radius);
  color:var(--muted); text-align:center;
}
.block-editor__empty i[data-lucide] svg { width:28px; height:28px; }
.block-editor__empty p { margin:0; font-size:13.5px; }

/* Block card */
.block-card {
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--card); overflow:hidden;
  transition:border-color .15s;
}
.block-card:hover { border-color:var(--green); }
.block-card__top {
  display:flex; align-items:center; gap:9px;
  padding:10px 14px; background:var(--soft); border-bottom:1px solid var(--border);
  cursor:pointer; user-select:none;
}
.block-card.is-closed .block-card__top { border-bottom:none; }
.block-card.is-closed .block-card__fields { display:none; }

.block-index {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; flex:0 0 auto;
  background:var(--green); color:#fff; font-size:11px; font-weight:700;
}
.block-card__icon { flex:0 0 auto; color:var(--muted); }
.block-card__icon svg { width:15px; height:15px; }
.block-card__heading { font-size:13px; font-weight:700; color:var(--text); flex:0 0 auto; }
.block-card__preview {
  flex:1; min-width:0;
  font-size:12px; font-weight:400; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.block-card__actions { display:flex; gap:5px; flex:0 0 auto; }
.block-card__fields {
  padding:14px;
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}

/* Block picker panel */
.block-picker {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px;
  margin-bottom:4px;
}
.block-picker__label {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); margin:0 0 10px;
}
.block-picker__grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
}
.block-type-card {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:10px 6px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--card); cursor:pointer; text-align:center;
  transition:border-color .12s, background .12s;
}
.block-type-card:hover { border-color:var(--green); background:rgba(15,157,88,.05); }
.block-type-card svg { width:20px; height:20px; color:var(--green); }
.block-type-card__name { font-size:11px; font-weight:600; color:var(--text); line-height:1.2; }

/* Add block button */
.block-add-btn {
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:10px; margin-top:6px;
  border:1.5px dashed var(--border); border-radius:var(--radius);
  background:transparent; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--muted);
  transition:border-color .12s, color .12s, background .12s;
}
.block-add-btn:hover, .block-add-btn.is-open {
  border-color:var(--green); color:var(--green);
  background:rgba(15,157,88,.04);
}
.block-add-btn svg { width:16px; height:16px; }

/* ── Legacy body details ─────────────────────────────────────── */
.legacy-details {
  margin-top:16px;
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden;
}
.legacy-details summary {
  padding:10px 14px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--muted);
  background:var(--soft); list-style:none;
  user-select:none;
}
.legacy-details summary::-webkit-details-marker { display:none; }
.legacy-details[open] summary { border-bottom:1px solid var(--border); }
.legacy-details .field { padding:14px; }

/* ── Form alert ──────────────────────────────────────────────── */
.form-alert {
  background:var(--danger-soft); border:1px solid var(--danger);
  color:var(--danger); border-radius:var(--radius);
  padding:12px 16px; font-size:13.5px; margin-bottom:18px;
}

/* ── Responsive: collapse to single column ───────────────────── */
@media (max-width:1280px) {
  .editor-layout { grid-template-columns:1fr; }
  .editor-aside { position:static; }
  .choice-matrix { grid-template-columns:1fr; }
  .choice-grid--regions { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:768px) {
  .editor-topbar { flex-direction:column; align-items:flex-start; gap:12px; }
  .editor-topbar__right { width:100%; justify-content:flex-end; }
  .editor-title { max-width:100%; }
  .form-grid--two { grid-template-columns:1fr; }
  .choice-grid--regions,
  .choice-grid--tags { grid-template-columns:1fr; }
  .block-card__fields { grid-template-columns:1fr; }
  .editor-card__head { flex-wrap:wrap; }
  .editor-card__tools { width:100%; }
}

/* Превью обложки в форме проекта */
.image-preview {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border, #e2e6e3);
  background: var(--surface-2, #f3f5f3);
  margin-bottom: 10px;
}
.image-preview.is-empty { display: none; }
.image-preview__hint {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #7b8a80);
}

/* Вкладка языка, для которого перевода ещё нет */
.lang-tab--empty { border-style: dashed; opacity: .75; }
.lang-tab--empty.is-active { opacity: 1; }

/* Информационный баннер (в отличие от .form-alert — не про ошибку) */
.form-alert--info {
  background: var(--soft);
  border-color: var(--border);
  color: var(--text);
}

/* Инлайн-строки блоков при создании проекта (статистика/достижения/фазы/партнёры) */
.inline-row {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px; margin-bottom:10px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--surface-2, #f7f9f8);
}
.inline-row:last-child { margin-bottom:0; }
.inline-row > .row-btn--danger { flex:0 0 auto; margin-top:22px; }

/* ── Загрузка фото ───────────────────────────────────────────────────── */
.filepick {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 16px;
  border:1px dashed var(--border);
  border-radius:var(--radius);
  background:var(--soft);
}
.filepick--error { border-color:var(--danger); }
.filepick__btn { cursor:pointer; margin:0; flex:0 0 auto; }
.filepick__name {
  flex:1 1 160px; min-width:0;
  font-size:13px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.filepick__clear {
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; color:var(--muted); cursor:pointer;
  margin-left:auto; flex:0 0 auto;
}
.filepick__clear input { width:15px; height:15px; accent-color:var(--danger); }

/* ── Редактор кадрирования фото сотрудника ───────────────────────────── */
.crop { margin-top:18px; }
.crop__layout { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.crop__main { flex:1 1 380px; min-width:0; }

/* Обёртка задаёт фон и центрирует кадр; сама сцена по размеру картинки,
   чтобы проценты рамки совпадали с пикселями изображения */
.crop__stage-wrap {
  display:flex; justify-content:center; align-items:center;
  padding:16px;
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.crop__stage {
  position:relative; display:inline-block; line-height:0;
  max-width:100%;
  touch-action:none; user-select:none; cursor:crosshair;
  border-radius:6px; overflow:hidden;
}
.crop__stage img {
  display:block; width:auto; height:auto;
  max-width:100%; max-height:420px;   /* портрет целиком влезает в экран */
  pointer-events:none;
}

.crop__shade { position:absolute; inset:0; background:rgba(15,27,22,.55); pointer-events:none; }

.crop__box {
  position:absolute; box-sizing:border-box;
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.45);
  cursor:move;
}
.crop__box::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1px dashed rgba(255,255,255,.5);
}
.crop__handle {
  position:absolute; width:14px; height:14px;
  background:#fff; border:2px solid var(--green); border-radius:3px;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.crop__handle--nw { top:-8px; left:-8px;  cursor:nwse-resize; }
.crop__handle--ne { top:-8px; right:-8px; cursor:nesw-resize; }
.crop__handle--sw { bottom:-8px; left:-8px;  cursor:nesw-resize; }
.crop__handle--se { bottom:-8px; right:-8px; cursor:nwse-resize; }

.crop__hint { margin:10px 2px 0; font-size:12px; line-height:1.5; color:var(--muted); }

.crop__side { flex:0 0 200px; }
.crop__prev-cap {
  margin-bottom:8px;
  font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.crop__prev-box {
  position:relative; width:180px; height:180px;
  overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--soft);
}
.crop__prev-box img { position:absolute; max-width:none; }
.crop__tools { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.crop__tools .button { min-height:34px; padding:6px 12px; font-size:13px; }
.crop__note { margin:12px 0 0; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }

@media (max-width: 900px) {
  .crop__side { flex:1 1 100%; }
  .crop__prev-box { width:150px; height:150px; }
  .crop__stage img { max-height:340px; }
}

/* ── Загрузка картинки в блок контента ───────────────────────────────── */
.field__label {
  display:block; margin-bottom:6px;
  font-size:13px; font-weight:600; color:var(--text);
}
.block-upload { display:flex; gap:10px; align-items:stretch; }
.block-upload input[type="url"] { flex:1 1 auto; min-width:0; }
.block-upload__btn { flex:0 0 auto; cursor:pointer; margin:0; white-space:nowrap; }

.block-upload__status { margin-top:8px; font-size:12px; color:var(--muted); }
.block-upload__status.is-error { color:var(--danger); }

.block-upload__preview { margin-top:10px; }
.block-upload__preview img {
  display:block; max-width:260px; max-height:170px;
  border-radius:10px; border:1px solid var(--border);
  object-fit:cover;
}

/* Бейдж в боковом меню: сколько запросов покупателей ждут ответа */
.admin-sidebar__badge {
  margin-left: auto;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  flex: 0 0 auto;
}
/* На активном (зелёном) пункте красный кружок выглядит грязно — там белый */
.admin-sidebar__link.is-active .admin-sidebar__badge {
  background: #fff;
  color: var(--green-dark, #0b7c46);
}

/* ── Загрузка документа: зона перетаскивания ─────────────────── */
.dropzone {
  position: relative;
  display: block;
  border: 2px dashed var(--border, #dfe3e0);
  border-radius: var(--radius);
  background: var(--surface-2, #f7f9f8);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--green); background: rgba(15,157,88,.05); }
.dropzone--error { border-color: var(--danger, #e53935); }
.dropzone--warn { border-color: #d97706; }
/* Настоящий input лежит поверх зоны прозрачным слоем — так работает и
   клик, и нативное перетаскивание, без подмены файлов скриптом. */
.dropzone input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.dropzone__icon { width: 30px; height: 30px; color: var(--green); }
.dropzone__title { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.dropzone__sub { margin-top: 2px; font-size: 13px; color: var(--muted); }
.dropzone__link { color: var(--green); text-decoration: underline; }
.dropzone__current { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.dropzone__picked {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; font-size: 13.5px; color: var(--text);
}
.dropzone__picked svg { width: 16px; height: 16px; color: var(--green); flex: 0 0 auto; }
.dropzone__picked span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Предупреждение о дубликате ──────────────────────────────── */
.dup-alert {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 20px; padding: 14px 16px;
  border: 1px solid #fcd34d; border-radius: var(--radius);
  background: #fffbeb; color: #92400e;
}
.dup-alert svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.dup-alert__body { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.dup-alert__body a { color: #92400e; font-weight: 600; text-decoration: underline; }
.dup-alert__force { margin-top: 6px; }
.dup-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.dup-item:last-child { border-bottom: none; padding-bottom: 0; }
.dup-item__reason { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #b45309; }
.dup-item__link { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.dup-item__link:hover { color: var(--green); }
.dup-item__meta { margin-top: 2px; font-size: 12px; color: var(--muted); }