/* SeycoInventory — CRUD/dashboard қосымша стильдері (style.css үстіне)
   2026-09-16: style.css-пен бірге қара/қызыл (dark) тақырыпқа толық
   көшірілді — сол айнымалылар (--paper-2/--ink-soft/--line/--navy/
   --amber/--ok/--err) қолданылады, тек осы файлда бұрын ТІКЕЛЕЙ хекс
   түрінде жазылған ашық-фон түстер (негізінен #fff карточка/кесте
   фондары мен ашық pastel pill/badge түстері) енді айнымалыларға
   немесе жартылай мөлдір (rgba) қара-тақырып нұсқаларына ауыстырылды. */

.breadcrumb { font-size: 13px; color: var(--ink-soft, #a6a19c); margin-bottom: 14px; }
.breadcrumb a { color: var(--ink-soft, #a6a19c); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ============================================================
   2026-09-16, §65: admin-панельдің сол жақ сайдбары + жоғарғы
   topbar-ы — пайдаланушы ұсынған device-showcase мокабындағыдай
   тұрақты навигация орналасуы. includes/header.php/footer.php
   $isAdminPage+$currentAdmin болғанда осы қаңқаны шығарады;
   қоғамдық беттер (кіру, тикет-формалары) мен my/ қызметкер
   кабинеті бұрынғы жоғарғы қызыл hero-header-де қалады.
   ============================================================ */
body.admin-shell-body { background: var(--paper); }
.admin-shell { display: flex; align-items: stretch; min-height: 100vh; }

.admin-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 236px; z-index: 40;
  background: var(--paper-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow-y: auto;
  padding: 18px 14px;
}
.admin-sidebar-brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
  padding: 4px 8px 16px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
}
.admin-sidebar-logo { height: 30px; width: auto; border-radius: 6px; background: #fff; padding: 3px 6px; }
.admin-sidebar-word { font-size: 14px; font-weight: 800; letter-spacing: -.2px; line-height: 1.2; }
.admin-sidebar-word span { display: block; font-size: 10.5px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-item {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  color: var(--ink-soft); font-size: 13.5px; font-weight: 600;
  padding: 9px 12px; border-radius: 10px; transition: background .15s, color .15s;
}
.admin-nav-icon { display: inline-flex; width: 20px; justify-content: center; flex-shrink: 0; font-size: 15px; }
.admin-nav-item:hover { background: rgba(var(--fg-rgb),.06); color: var(--ink); }
.admin-nav-item.active { background: linear-gradient(155deg, var(--navy), var(--navy-2)); color: #fff; box-shadow: 0 4px 14px -4px rgba(var(--accent-rgb),.45); }
.admin-nav-bottom { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }

.admin-main { flex: 1; min-width: 0; margin-left: 236px; display: flex; flex-direction: column; }
.admin-topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px 24px; background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.admin-topbar-search { flex: 1; max-width: 460px; }
.admin-topbar-search input { width: 100%; }
.admin-topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.admin-bell-wrap {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: rgba(var(--fg-rgb),.06);
  text-decoration: none; flex-shrink: 0; transition: background .15s;
}
.admin-bell-wrap:hover { background: rgba(var(--fg-rgb),.11); }
.admin-bell-icon { font-size: 15px; line-height: 1; }
.admin-bell-badge {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--navy); color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--paper-2);
}
.admin-avatar-wrap { position: relative; }
.admin-avatar-btn-wide {
  display: flex; align-items: center; gap: 9px; border: none; background: none; cursor: pointer;
  padding: 3px 8px 3px 3px; border-radius: 999px; transition: background .15s;
}
.admin-avatar-btn-wide:hover { background: rgba(var(--fg-rgb),.06); }
.admin-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(155deg, var(--navy), var(--navy-2)); color: #fff;
  font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.admin-avatar-idbox { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.admin-avatar-idname { font-size: 13px; font-weight: 700; color: var(--ink); }
.admin-avatar-idrole { font-size: 11px; font-weight: 600; color: var(--ink-faint); }
@media (max-width: 1100px) { .admin-avatar-idbox { display: none; } .admin-avatar-btn-wide { padding: 0; } }
.admin-avatar-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; z-index: 50;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.admin-avatar-menu[hidden] { display: none; }
.admin-avatar-menu-name { padding: 8px 10px 10px; font-size: 13px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.admin-avatar-menu-tag { display: block; font-size: 11px; font-weight: 600; color: var(--amber); margin-top: 3px; }
.admin-avatar-menu a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink-soft); font-size: 13px; }
.admin-avatar-menu a:hover { background: rgba(var(--fg-rgb),.06); color: var(--ink); }

/* view.php-тегі .admin-bar.sticky-bar енді әрқашан жаңа topbar-дың
   астында (JS-мен есептелетін --site-header-h емес, тұрақты мән). */
@media (min-width: 761px) {
  .admin-shell .admin-bar.sticky-bar { top: 72px; }
}

/* 2026-09-16, §67: мобильде (≤900px) сайдбар бұрын МҮЛДЕ display:none
   болатын — модуль тізіміне (Сотрудники, Номера, т.б.) ЕШҚАНДАЙ жол
   қалмаған еді (тек төменгі док-тың 4 иконасы қалатын). Пайдаланушы
   хабарлағаннан кейін түзетілді: сайдбар енді мобильде "тартпа" (drawer)
   ретінде — ☰ батырмасымен ашылып/жабылады, бэкдроппен басқанда жабылады. */
.admin-menu-toggle { display: none; }
.admin-sidebar-backdrop { display: none; }
@media (max-width: 900px) {
  .admin-menu-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--fg-rgb),.06);
    border: none; color: var(--ink); font-size: 18px; cursor: pointer; flex-shrink: 0;
  }
  .admin-menu-toggle:hover { background: rgba(var(--fg-rgb),.11); }
  .admin-sidebar {
    left: -260px; transition: left .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 8px 0 28px rgba(0,0,0,.45); z-index: 70;
  }
  .admin-sidebar.is-open { left: 0; }
  .admin-sidebar-backdrop.is-open {
    display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.55);
  }
  .admin-main { margin-left: 0; }
  .admin-topbar { padding: 10px 16px; flex-wrap: wrap; gap: 10px; }
  .admin-topbar-search { order: 3; max-width: none; flex-basis: 100%; }
}

/* ---------- admin/index.php: жаңа dashboard мазмұны (§65) ----------
   Қош келдіңіз тақырыбы + KPI карталары + "Соңғы жаңартулар" тізімі —
   бұрынғы "барлық модуль" тайл торының орнына (ол енді сайдбарда). */
.dash-welcome { margin-bottom: 20px; }
.dash-welcome h1 { font-size: 21px; margin-bottom: 4px; }
.dash-welcome p { margin: 0; font-size: 13.5px; }
.dash-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.dash-kpi-card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px;
}
.dash-kpi-card .dash-kpi-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 10px;
  background: rgba(var(--accent-rgb),.16); font-size: 16px;
}
.dash-kpi-card .num { font-size: 26px; font-weight: 800; font-family: var(--font-num); color: var(--ink); line-height: 1.1; }
.dash-kpi-card .label { font-size: 11.5px; color: var(--ink-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-top: 6px; }
.dash-kpi-card .delta { font-size: 11.5px; font-weight: 700; margin-top: 4px; color: var(--ok); }
.dash-kpi-card .delta.zero { color: var(--ink-faint); }

/* 2026-09-16, §65: мокаптағыдай — "Соңғы жаңартулар" / "Жылдам әрекеттер" /
   "Бөлім бойынша статистика" үш карточка бір қатарда (тар экранда бағанаға
   жиналады). Әрқайсысы бар-жоғына қарай 1-3 карточка көрінуі мүмкін
   (moderator-ге тек "Жылдам әрекеттер"), сондықтан auto-fit грид қолданамыз. */
.dash-widgets-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 22px; align-items: start; }
.dash-widget { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.dash-widget h2 { font-size: 14px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); }

.dash-recent-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.dash-recent-item:last-child { border-bottom: none; }
.dash-recent-icon {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb),.16); font-size: 14px;
}
.dash-recent-body { min-width: 0; flex: 1; }
.dash-recent-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.dash-recent-title a { color: inherit; text-decoration: none; }
.dash-recent-title a:hover { color: var(--amber); }
.dash-recent-meta { font-size: 12px; color: var(--ink-faint); margin-top: 1px; }

.dash-quick-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 4px; text-decoration: none;
  color: var(--ink); border-bottom: 1px solid var(--line); transition: color .15s;
}
.dash-quick-item:last-child { border-bottom: none; }
.dash-quick-item:hover { color: var(--amber); }
.dash-quick-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb),.16); font-size: 14px;
}
.dash-quick-label { font-size: 13.5px; font-weight: 600; flex: 1; }
.dash-quick-arrow { color: var(--ink-faint); font-size: 16px; }

.dash-dept-total { font-size: 24px; font-weight: 800; font-family: var(--font-num); color: var(--ink); margin-bottom: 14px; }
.dash-dept-total span { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .03em; margin-left: 4px; }
.dash-dept-row { margin-bottom: 10px; }
.dash-dept-row:last-child { margin-bottom: 0; }
.dash-dept-row-top { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.dash-dept-row-top span { color: var(--ink-soft); }
.dash-dept-row-top b { color: var(--ink); font-family: var(--font-num); }
.dash-dept-bar { background: rgba(var(--fg-rgb),.07); border-radius: 4px; height: 8px; overflow: hidden; }
.dash-dept-bar div { height: 100%; background: linear-gradient(90deg, var(--navy), var(--amber)); border-radius: 4px; }

/* ---------- admin/list.php: горизонталь tab-chip сүзгі (§65) — бұрынғы
   тік .module-sidebar орнына, мокаптағыдай. filter_col бойынша топтап
   санау логикасы (PHP жағында) өзгерген жоқ, тек render/CSS ғана. ---------- */
.tab-chips { display: flex; gap: 8px; flex-wrap: wrap; overflow-x: auto; padding-bottom: 2px; margin-bottom: 16px; }
.tab-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  background: rgba(var(--fg-rgb),.05); color: var(--ink-soft); font-size: 13px; font-weight: 700;
  transition: background .15s, color .15s;
}
.tab-chip:hover { background: rgba(var(--fg-rgb),.09); color: var(--ink); }
.tab-chip.active { background: linear-gradient(155deg, var(--navy), var(--navy-2)); color: #fff; }
.tab-chip .cnt { opacity: .8; font-weight: 600; }

/* ---------- admin/view.php: детал бетінің tabs-ы (§65) — Сипаттамалары /
   Байланысты / Тарихы, бұрынғы бір ағынды блоктардың орнына. ---------- */
.detail-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 4px 0 18px; overflow-x: auto; }
.detail-tab-btn {
  border: none; background: none; cursor: pointer; white-space: nowrap;
  padding: 10px 16px; font-size: 13.5px; font-weight: 700; color: var(--ink-faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.detail-tab-btn:hover { color: var(--ink); }
.detail-tab-btn.active { color: var(--ink); border-bottom-color: var(--navy); }
.detail-tab-panel { display: none; }
.detail-tab-panel.active { display: block; }

/* 2026-09-14: Модератордың "назар аудару" тақтасы (index.php) — өз
   региондарындағы мерзімі жақындаған лицензия/жөндеудегі компьютер
   сияқты проактивті ескертулер. */
.mod-attention {
  background: rgba(var(--amber-rgb),.10); border: 1px solid rgba(var(--amber-rgb),.35); border-radius: var(--radius, 14px);
  padding: 14px 18px; margin-bottom: 18px;
}
.mod-attention-title { font-weight: 700; font-size: 13.5px; color: var(--amber, #e2a53a); margin-bottom: 10px; }
.mod-attention-items { display: flex; gap: 10px; flex-wrap: wrap; }
.mod-attention-item {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;
  background: var(--paper-2, #16161a); border-radius: 12px; padding: 10px 16px; min-width: 200px;
  box-shadow: var(--shadow, 0 2px 6px rgba(0,0,0,.35)); transition: transform .15s, box-shadow .15s;
}
.mod-attention-item:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.mod-attention-num { font-family: var(--font-num, var(--font-ui)); font-size: 22px; font-weight: 800; line-height: 1; }
.mod-attention-warn .mod-attention-num { color: var(--err, #e5493a); }
.mod-attention-info .mod-attention-num { color: var(--amber, #e2a53a); }
.mod-attention-item span:last-child { font-size: 12.5px; color: var(--ink-soft, #a6a19c); }

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.menu-tile {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper-2, #16161a); border: 1px solid var(--line, rgba(var(--fg-rgb),.09)); border-radius: 20px;
  padding: 16px 18px; text-decoration: none; color: inherit;
  box-shadow: var(--shadow, 0 2px 6px rgba(0,0,0,.35));
  transition: box-shadow .15s, transform .15s, border-color .15s;
  /* 2026-09-11: карточкалар кезекпен жұмсақ сырғып-пайда болады
     (Kulikov қосымшасындағыдай "тірі" сезім үшін). */
  opacity: 0; animation: si-tile-in .38s cubic-bezier(.22,.61,.36,1) forwards;
}
.menu-tile:hover { box-shadow: 0 4px 18px rgba(0,0,0,.4); transform: translateY(-2px); border-color: var(--amber-2, #f0c168); }
.menu-tile:active { transform: scale(.98); }
.menu-tile .icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(155deg, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.08));
  font-size: 22px; line-height: 1;
}
.menu-tile .name { font-weight: 700; font-size: 15px; font-family: var(--font-ui); }
.menu-tile .count { font-size: 12.5px; color: var(--ink-faint, #726d68); margin-top: 2px; }

@keyframes si-tile-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.menu-grid .menu-tile:nth-child(1) { animation-delay: .02s; }
.menu-grid .menu-tile:nth-child(2) { animation-delay: .05s; }
.menu-grid .menu-tile:nth-child(3) { animation-delay: .08s; }
.menu-grid .menu-tile:nth-child(4) { animation-delay: .11s; }
.menu-grid .menu-tile:nth-child(5) { animation-delay: .14s; }
.menu-grid .menu-tile:nth-child(6) { animation-delay: .17s; }
.menu-grid .menu-tile:nth-child(7) { animation-delay: .2s; }
.menu-grid .menu-tile:nth-child(8) { animation-delay: .23s; }
.menu-grid .menu-tile:nth-child(n+9) { animation-delay: .26s; }
@media (prefers-reduced-motion: reduce) {
  .menu-tile { opacity: 1; animation: none; }
}

.module-layout { display: flex; gap: 22px; align-items: flex-start; }
.module-sidebar {
  width: 220px; flex-shrink: 0; background: var(--paper-2, #16161a); border: 1px solid var(--line, rgba(var(--fg-rgb),.09));
  border-radius: var(--radius, 14px); padding: 10px; max-height: 78vh; overflow-y: auto;
}
/* 2026-09-11: сүзгі тармақтары енді бастапқыдан-ақ жеңіл толтырылған
   "pill" ретінде көрінеді (тек hover-де емес) — Kulikov видеосындағы
   санат-пиллулаларына ұқсас: белсенді емес = жұмсақ қараңғы фон, белсенді
   = толық қанық қызыл фон, ақ мәтін. */
.module-sidebar a {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 7px 12px; border-radius: 999px; text-decoration: none;
  color: var(--ink-soft, #a6a19c); font-size: 13.5px; margin-bottom: 4px;
  background: rgba(var(--fg-rgb),.05);
  transition: background .15s, color .15s;
}
.module-sidebar a:hover { background: rgba(var(--fg-rgb),.09); color: var(--ink, #f4f1ee); }
.module-sidebar a.active { background: var(--navy, #dd2a1b); color: #fff; }
.module-sidebar .cnt { color: var(--ink-faint, #726d68); font-size: 12px; }
.module-sidebar a.active .cnt { color: rgba(255,255,255,.78); }
.module-main { flex: 1; min-width: 0; }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.search-box { flex: 1; min-width: 200px; max-width: 360px; }
.search-box input { width: 100%; padding: 8px 12px; border: 1px solid var(--line, rgba(var(--fg-rgb),.09)); border-radius: 8px; font-size: 13.5px; }
.search-box input:focus { outline: 2px solid var(--amber-2, #f0c168); outline-offset: 1px; border-color: var(--amber-2, #f0c168); }

.data-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line, rgba(var(--fg-rgb),.09)); border-radius: var(--radius, 14px); box-shadow: var(--shadow, 0 2px 6px rgba(0,0,0,.35));
  /* Кестенің оң жағында тағы деректер барын көрсететін жеңіл "көлеңке" —
     тек CSS (JS-сыз): scroll бар кезде ғана шеттен қараңғы сызылады. */
  background-color: var(--paper-2);
  background-image:
    linear-gradient(to right, var(--paper-2) 30%, transparent),
    linear-gradient(to right, transparent, var(--paper-2) 70%) 100% 0,
    linear-gradient(to right, rgba(0,0,0,.4), rgba(0,0,0,0)),
    linear-gradient(to left, rgba(0,0,0,.4), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table th, table.data-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line, rgba(var(--fg-rgb),.09)); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
table.data-table th { background: rgba(var(--fg-rgb),.04); font-weight: 700; color: var(--ink-faint, #726d68); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
table.data-table tbody tr:hover { background: rgba(var(--fg-rgb),.035); }
table.data-table a.row-link { color: var(--navy, #dd2a1b); text-decoration: none; font-weight: 700; }
table.data-table a.row-link:hover { color: var(--navy-2, #b3241a); text-decoration: underline; }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.pagination a, .pagination span { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line, rgba(var(--fg-rgb),.09)); font-size: 13px; text-decoration: none; color: var(--ink-soft, #a6a19c); transition: border-color .15s; }
.pagination a:hover { border-color: var(--amber-2, #f0c168); }
.pagination .current { background: var(--navy, #dd2a1b); color: #fff; border-color: var(--navy, #dd2a1b); font-weight: 700; }

.detail-card { background: var(--paper-2, #16161a); border: 1px solid var(--line, rgba(var(--fg-rgb),.09)); border-radius: var(--radius, 14px); box-shadow: var(--shadow, 0 2px 6px rgba(0,0,0,.35)); padding: 22px 24px; }
.detail-card h1 { margin-top: 0; }
/* 2026-09-11: жалғыз ағынды 2-баған тізімнің орнына — әр өріс өзінің
   шағын карточкасында (Kulikov-тағы "ақпарат карточкалары" үлгісіндей).
   Grid auto-fill өздігінен тар экранда 1 баганға жиналады — бөлек
   мобильді медиа-сұраудың қажеті жоқ. */
.detail-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.detail-fields .df-item {
  display: flex; flex-direction: row; align-items: flex-start; gap: 10px;
  background: rgba(var(--fg-rgb),.04); border: 1px solid var(--line, rgba(var(--fg-rgb),.09)); border-radius: 14px;
  padding: 11px 14px;
}
/* 2026-09-11: мазмұнына сай иконка (ОЗУ/ЦП/IP т.б. — si_field_icon()) —
   Kulikov-тағы карточкалардай әр атрибуттың өз белгішесі бар. */
.detail-fields .df-item .df-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(var(--accent-rgb),.16); color: var(--navy, #dd2a1b);
  margin-top: 1px;
}
.detail-fields .df-item .df-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.detail-fields .df-item .df-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-faint, #726d68); line-height: 1.4;
}
.detail-fields .df-item .df-val { font-size: 14px; font-weight: 600; color: var(--ink, #f4f1ee); white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.detail-fields .df-item.wide { grid-column: 1 / -1; }

/* 2026-09-11: серия нөмірі/IP/MAC сияқты мәтіндік мәндерді бір түртіп
   көшіріп алуға болады — ыңғайлы, жиі керек болатын функция. */
.df-val.df-copyable {
  cursor: pointer; border-radius: 6px; margin: -2px -4px; padding: 2px 4px;
  transition: background .15s ease, color .12s ease;
}
.df-val.df-copyable:hover { background: rgba(var(--accent-rgb),.14); }
.df-val.df-copyable:focus-visible { outline: 2px solid var(--amber-2, #f0c168); outline-offset: 1px; }
.df-val.df-copyable.df-copied { background: rgba(63,179,127,.16); color: var(--ok, #3fb37f); }

.si-copy-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60;
  transform: translate(-50%, 12px); opacity: 0;
  background: #2a2a30; color: #fff; font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; box-shadow: 0 10px 28px -8px rgba(0,0,0,.55);
  max-width: 90vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.si-copy-toast.show { opacity: 1; transform: translate(-50%, 0); }
.si-copy-toast.si-toast-err { background: var(--err, #e5493a); }
@media (max-width: 760px) { .si-copy-toast { bottom: 128px; } }
.df-photo-link { display: inline-block; }
.df-photo { max-width: 260px; max-height: 260px; border-radius: 8px; border: 1px solid var(--line, rgba(var(--fg-rgb),.09)); object-fit: cover; display: block; }
.df-file-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: rgba(var(--fg-rgb),.05); border: 1px solid var(--line, rgba(var(--fg-rgb),.09)); border-radius: 8px; color: var(--err, #e5493a); font-size: 13.5px; text-decoration: none; }
.df-file-link:hover { background: rgba(var(--fg-rgb),.09); }
.list-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line, rgba(var(--fg-rgb),.09)); vertical-align: middle; }

.related-section { margin-top: 26px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 12px; }
.related-card { background: var(--paper-2, #16161a); border: 1px solid var(--line, rgba(var(--fg-rgb),.09)); border-radius: var(--radius, 14px); box-shadow: var(--shadow, 0 2px 6px rgba(0,0,0,.35)); padding: 14px 16px; }
.related-card .rc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.related-card .rc-head .rc-title { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.related-card .rc-head .rc-count { background: rgba(var(--fg-rgb),.08); color: var(--ink-soft, #a6a19c); font-size: 12px; padding: 1px 8px; border-radius: 20px; }
.related-card .rc-row { font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--line, rgba(var(--fg-rgb),.09)); }
.related-card .rc-row:last-child { border-bottom: none; }
.related-card .rc-row a { color: var(--navy, #dd2a1b); text-decoration: none; font-weight: 700; }
.related-card .rc-row a:hover { color: var(--navy-2, #b3241a); text-decoration: underline; }
/* 2026-09-16, §50: заттың негізгі характеристикасы (rc-row астында) —
   flex-wrap болғандықтан, тар экранда (телефон) бір жолға сыймаса, келесі
   жолға өзі түседі, ешбір мәтін қысылмайды/кесілмейді. */
.related-card .rc-specs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; }
.related-card .rc-spec-chip { font-size: 11.5px; color: var(--ink-faint, #726d68); font-weight: 400; white-space: normal; }
.related-card .rc-spec-chip b { color: var(--ink-soft, #a6a19c); font-weight: 600; }
.related-card .rc-empty { font-size: 12.5px; color: var(--ink-faint, #726d68); padding: 6px 0; }
.related-card .rc-more { font-size: 12px; margin-top: 6px; display: inline-block; color: var(--navy, #dd2a1b); font-weight: 700; text-decoration: none; }
.related-card .rc-more:hover { text-decoration: underline; }

.view-actions { display: flex; align-items: center; gap: 8px; }
/* 2026-09-16, §65: пайдаланушы ұсынған мокаптағыдай — карточканың
   ӘРекет батырмалары (Өңдеу, т.б.) тақырыптың жанында ЕМЕС, барлық
   мазмұннан (табтардан) КЕЙІН, карточканың ең төменінде, жоғарғы
   бөлгішпен бөлек орналасады. */
.view-actions-bottom {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
  .view-actions-bottom { flex-direction: column; align-items: stretch; }
  .view-actions-bottom form { display: block !important; }
  .view-actions-bottom .btn { width: 100%; }
}
/* 2026-09-11: view.php-те тақырып+Акт/Өңдеу/Жою жолы ұзын карточка
   тізімін айналдырғанда да қол астында тұратындай "жабысады" — тек
   ені жеткілікті (761px+) экрандарда, себебі мобильде батырмалар
   бағанамен толық енге созылады (3 жол болады), оны тұрақты жабыстыру
   тым көп орын алар еді әрі төмендегі қалқымалы док-пен қатар келер еді.
   .admin-bar (h1 + view-actions) тұтас жабысады — .detail-card биік
   контейнер болғандықтан sticky нақты жұмыс істейді (тек view-actions
   болса, оның өз ата-анасы — жіңішке бір жол — жеткіліксіз биік болар
   еді). */
@media (min-width: 761px) {
  .admin-bar.sticky-bar {
    position: sticky; top: var(--site-header-h, 64px); z-index: 20;
    background: var(--paper-2, #16161a); padding: 10px 14px; margin: -10px -14px 6px;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 2px 0 0 var(--line, rgba(var(--fg-rgb),.09));
  }
}

.form-card { display: block; background: var(--paper-2, #16161a); border: 1px solid var(--line, rgba(var(--fg-rgb),.09)); border-radius: var(--radius, 14px); padding: 24px; max-width: 760px; box-shadow: var(--shadow, 0 2px 6px rgba(0,0,0,.35)); }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.form-grid2 .field.wide { grid-column: 1 / -1; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft, #a6a19c); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line, rgba(var(--fg-rgb),.09)); border-radius: 8px; font-size: 13.5px; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--amber-2, #f0c168); outline-offset: 1px; border-color: var(--amber-2, #f0c168);
}
.field textarea { min-height: 70px; resize: vertical; }
.field input.unique-taken { border-color: var(--err, #e5493a); outline: 2px solid rgba(229,73,58,.3); outline-offset: 1px; }
.field .unique-msg { color: var(--err, #e5493a); font-size: 12px; margin-top: 4px; }

/* 2026-09-14: форма өрісіндегі қатені (міндетті/бірегей емес/регионнан
   тыс) "жансыз" қызыл мәтіннің орнына нақты өрісті шайқап көрсетеді —
   .field-invalid серверде табылған қатеде бірден қойылады,
   .field-shake unique-check.js AJAX тексерісінде (қайталанатын мән
   табылған сәтте) бір рет іске қосылады. */
@keyframes si-field-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.field-invalid input, .field-invalid select, .field-invalid textarea,
.field-shake input, .field-shake select, .field-shake textarea {
  animation: si-field-shake .5s cubic-bezier(.36,.07,.19,.97);
}
.field-invalid input, .field-invalid select, .field-invalid textarea {
  border-color: var(--err, #e5493a); outline: 2px solid rgba(229,73,58,.3); outline-offset: 1px;
}
.field-invalid label { color: var(--err, #e5493a); }
@media (prefers-reduced-motion: reduce) {
  .field-invalid input, .field-invalid select, .field-invalid textarea,
  .field-shake input, .field-shake select, .field-shake textarea {
    animation: none;
  }
}

.badge-tag { display: inline-flex; align-items: center; gap: 5px; background: rgba(63,179,127,.16); color: var(--ok, #3fb37f); border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.badge-warn { display: inline-flex; align-items: center; gap: 5px; background: rgba(var(--amber-rgb),.16); color: var(--amber, #e2a53a); border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.badge-danger { display: inline-flex; align-items: center; gap: 5px; background: rgba(229,73,58,.16); color: var(--err, #e5493a); border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 600; }

/* 2026-09-11: view.php тақырыбының жанындағы статус белгісі — кестенің
   status_inactive_values метадеректеріне негізделген жалпы белгі
   (әр кестенің нақты статус сөздерін білудің қажеті жоқ). */
.status-badge {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 20px;
  margin-left: 8px; letter-spacing: .01em;
}
.status-badge-ok { background: rgba(63,179,127,.16); color: var(--ok, #3fb37f); }
.status-badge-off { background: rgba(229,73,58,.16); color: var(--err, #e5493a); }

/* Қызметкер жеке кабинетіндегі аттестация "Бар / Жоқ" батырмалары. Түсі
   бірден (hover-сыз де) көрінеді — сенсорлық экранда hover болмайды,
   сондықтан жасыл/қызыл межесі бастапқыдан-ақ анық болуы керек. */
.attest-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.attest-actions .btn { padding: 6px 12px; font-size: 12.5px; }
.attest-actions .attest-yes { border-color: rgba(63,179,127,.4); color: var(--ok, #3fb37f); }
.attest-actions .attest-yes:hover { border-color: var(--ok, #3fb37f); background: rgba(63,179,127,.14); }
.attest-actions .attest-no { border-color: rgba(229,73,58,.35); color: var(--err, #e5493a); }
.attest-actions .attest-no:hover { border-color: var(--err, #e5493a); background: rgba(229,73,58,.14); }

/* Динамикалық іздеу (жаза бастағанда бірден нәтиже шығатын ашылмалы тізім) */
.live-search-results {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px;
  background: var(--paper-2, #16161a); border: 1px solid var(--line, rgba(var(--fg-rgb),.09)); border-radius: var(--radius, 14px);
  box-shadow: 0 8px 28px rgba(0,0,0,.45); max-height: 420px; overflow-y: auto;
  z-index: 50; padding: 6px 0; text-align: left;
}
.live-search-results .ls-group { padding: 4px 0; }
.live-search-results .ls-group + .ls-group { border-top: 1px solid var(--line, rgba(var(--fg-rgb),.09)); }
.live-search-results .ls-group-title {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-faint, #726d68); padding: 6px 14px 2px; display: flex; align-items: center; gap: 6px;
}
.live-search-results .ls-count { background: rgba(var(--fg-rgb),.08); color: var(--ink-soft, #a6a19c); font-size: 11px; padding: 0 7px; border-radius: 20px; }
.live-search-results .ls-item { display: flex; flex-direction: column; padding: 7px 14px; text-decoration: none; }
.live-search-results .ls-item:hover { background: rgba(var(--fg-rgb),.05); }
.live-search-results .ls-item-title { font-size: 13.5px; font-weight: 600; color: var(--ink, #f4f1ee); }
.live-search-results .ls-item-sub { font-size: 12px; color: var(--ink-faint, #726d68); }
.live-search-results .ls-empty { padding: 14px; font-size: 13px; color: var(--ink-faint, #726d68); text-align: center; }
.live-search-results .ls-all {
  display: block; text-align: center; padding: 9px; font-size: 12.5px; font-weight: 700;
  color: var(--navy, #dd2a1b); text-decoration: none; border-top: 1px solid var(--line, rgba(var(--fg-rgb),.09)); margin-top: 4px;
}
.live-search-results .ls-all:hover { background: rgba(var(--fg-rgb),.05); }

/* Тізім бетіндегі жаппай әрекет (bulk actions) панелі — таңдалған
   жазба болғанда ғана көрінеді (list.php + bulk-actions.js). */
.bulk-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(var(--amber-rgb),.12); border: 1px solid rgba(var(--amber-rgb),.35); border-radius: var(--radius, 14px);
  padding: 10px 16px; margin-bottom: 14px; font-size: 13.5px; color: var(--amber, #e2a53a);
}
.bulk-toolbar select { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line, rgba(var(--fg-rgb),.09)); }
.bulk-toolbar .btn { padding: 7px 14px; font-size: 13px; }
.btn-danger { background: rgba(229,73,58,.14); color: var(--err, #e5493a); border: 1px solid rgba(229,73,58,.35); }
.btn-danger:hover { background: rgba(229,73,58,.22); }

/* 2026-09-14: базалық (медиа-сұраусыз) ереже МЕДИА-БЛОКТАН БҰРЫН тұруы
   керек — CSS каскадта бірдей специфичность кезінде код тәртібі шешеді,
   сондықтан бұл ереже кейін тұрса, ол max-width:760px ішіндегі
   "display:block"-ты әрдайым жеңіп кетер еді (390px-те де жасырын
   қалдырар еді). */
.mobile-row-list { display: none; } /* десктопта табло көрсетіледі, бұл жасырын */

@media (max-width: 760px) {
  .module-layout { flex-direction: column; }
  /* 2026-09-10: .module-main flex:1 бағаннан (column) кейін де ені
     кестенің (white-space:nowrap) табиғи еніне созылып, бүкіл бетті
     көлденеңінен айналдыратын қате болатын (390px экранда бет 1400px-ге
     дейін созылатын). Енді ен нақты 100%-ға бекітілген — тек кесте ӨЗ
     .data-table-wrap қорабының ішінде ғана көлденең айналады. */
  .module-main { width: 100%; min-width: 0; }
  /* Сол жақ сүзгі тізімі (статус/тип бойынша) тік ұзын блок болудың
     орнына жеңіл, жанап өтетін "чиптер" қатары болады — кестеге дейінгі
     орынды үнемдейді, қазіргі заманғы қосымшаға ұқсас көрінеді. */
  .module-sidebar {
    width: 100%; max-height: none; display: flex; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 8px; white-space: nowrap;
  }
  .module-sidebar a {
    flex: 0 0 auto; margin-bottom: 0;
    padding: 7px 14px;
  }
  .form-grid2 { grid-template-columns: 1fr; }
  .pagination a, .pagination span { padding: 8px 15px; }

  /* iOS Safari өрісті түртіп ашқанда 16px-тен кіші input-ты автоматты
     үлкейтіп (zoom) жібереді — бұл бет "секіріп" кетті деген әсер
     қалдырады. Мобильде барлық форма өрістерін 16px-ке көтеріп, сол
     жайсыз zoom-ды алдын ала болдырмаймыз. */
  .field input, .field select, .field textarea,
  input[type=text], input[type=number], input[type=date], input[type=password], textarea, select {
    font-size: 16px;
  }

  /* Заттың бет-парағындағы (view.php) "Акт/Өңдеу/Жою" батырмалары бір
     тар жолға сыймай, әркелкі биіктікте көрінетін — енді толық енімен,
     бағанамен (әрқайсысы жеке жол) тізіледі: түрту аймағы үлкен әрі
     барлығы бірдей көрінеді. */
  .view-actions { flex-direction: column; align-items: stretch; }
  .view-actions form { display: block !important; }
  .view-actions .btn { width: 100%; }

  /* Ұзын форманы (мыс. компьютердің барлық өрісі) толтырғанда "Сақтау"
     батырмасын іздеп ең төменге дейін айналдырудың орнына — экранның
     түбіне жабысып тұратын панель етіп жасаймыз (собственный қолтаңба-
     блокы бар my/add.php формасында да бірдей жұмыс істейді). */
  .form-card .actions-row {
    position: sticky; bottom: 0; z-index: 5;
    margin: 18px -24px -24px; padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
    background: var(--paper-2, #16161a); border-top: 1px solid var(--line, rgba(var(--fg-rgb),.09));
    box-shadow: 0 -6px 18px -12px rgba(0,0,0,.5);
    border-radius: 0 0 var(--radius, 14px) var(--radius, 14px);
  }
  .form-card .actions-row .btn { flex: 1; }

  /* Тізімдегі check-box-тар — саусақпен түртуге сәл кішкентай еді. */
  .row-check, #select-all-rows { width: 19px; height: 19px; cursor: pointer; }

  /* 2026-09-14: мобильде data-table орнына swipe-карточкалар тізімі
     көрінеді (assets/js/swipe-row.js солға сырғытқанда Акт/Өңдеу
     батырмаларын ашады) — кестенің көлденең айналуының орнына app-
     тәрізді бір бағанды тізім. */
  .desktop-only-table { display: none; }
  .mobile-row-list { display: block; }
}

/* ---------- admin/list.php: мобиль swipe-карточкалары (2026-09-14) ---------- */
.swipe-row {
  position: relative; overflow: hidden; border-radius: 14px; margin-bottom: 8px;
  border: 1px solid var(--line, rgba(var(--fg-rgb),.09)); box-shadow: var(--shadow, 0 2px 6px rgba(0,0,0,.35));
  background: #2a2622; /* swipe-actions астыңғы фон ретінде көрінеді */
}
.swipe-actions { position: absolute; top: 0; right: 0; bottom: 0; display: flex; }
.swipe-act {
  display: flex; align-items: center; justify-content: center; width: 58px;
  color: #fff; text-decoration: none; flex-shrink: 0;
}
.swipe-act-neutral { background: #35302b; }
.swipe-act-edit { background: var(--navy, #dd2a1b); }
.swipe-content {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px;
  background: var(--paper-2, #16161a); padding: 13px 16px; text-decoration: none; color: inherit;
  touch-action: pan-y; will-change: transform;
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
.swipe-row.dragging .swipe-content { transition: none; }
.swipe-title { font-weight: 700; font-size: 14.5px; color: var(--navy, #dd2a1b); }
.swipe-sub { font-size: 12.5px; color: var(--ink-faint, #726d68); }
@media (prefers-reduced-motion: reduce) {
  .swipe-content { transition: none; }
}

/* ---------- admin/scan.php: QR сканер (2026-09-10) ---------- */
.scan-wrap { max-width: 480px; margin: 0 auto; }
.scan-video-box {
  position: relative; width: 100%; aspect-ratio: 3 / 4; background: #08070a;
  border-radius: var(--radius, 14px); overflow: hidden; box-shadow: var(--shadow, 0 2px 6px rgba(0,0,0,.35));
}
.scan-video-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame {
  position: absolute; top: 15%; left: 12%; right: 12%; bottom: 25%;
  border: 3px solid rgba(255,255,255,.75); border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 999px rgba(0,0,0,.35);
}
.scan-flash { position: absolute; inset: 0; pointer-events: none; transition: background-color .15s ease; }
.scan-flash-ok { background: rgba(63,179,127, .35); }
.scan-flash-warn { background: rgba(var(--amber-rgb), .3); }
.scan-status {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px; text-align: center;
  font-size: 14px; font-weight: 600; background: var(--panel-3, #1f1f23); color: var(--ink-soft, #a6a19c);
  border: 1px solid var(--line, rgba(var(--fg-rgb),.09));
}
.scan-status-ok { background: rgba(63,179,127,.16); color: var(--ok, #3fb37f); border-color: rgba(63,179,127,.4); }
.scan-status-warn { background: rgba(var(--amber-rgb),.16); color: var(--amber, #e2a53a); border-color: rgba(var(--amber-rgb),.4); }
.scan-toggle { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--ink-soft, #a6a19c); cursor: pointer; }
.scan-fallback { margin-top: 18px; text-align: center; }
.scan-fallback a { color: var(--navy, #dd2a1b); font-size: 13.5px; text-decoration: none; }
.scan-fallback a:hover { text-decoration: underline; }

/* ---------- §108: төменгі «шыны» док (тек мобильде) ----------
   Жартылай мөлдір шыны (blur + saturate), ішінде баяу жылжитын түсті
   дақтар мен анда-санда өтетін жарқыл. Белсенді батырманың астында
   «тамшы» индикатор — басқан батырмаға серпімді сырғиды. Төмен
   айналдырғанда док жасырылады, жоғары — қайта шығады; пернетақта
   ашылғанда (өріс фокуста) да жасырылады. includes/footer.php шығарады. */
:root {
  --dock-glass: rgba(22, 22, 26, .46);
  --dock-glass-solid: rgba(22, 22, 26, .94);
  --dock-border: rgba(255, 255, 255, .14);
  --dock-hl: rgba(255, 255, 255, .20);
  --dock-ink: rgba(255, 255, 255, .70);
  --dock-pill: rgba(255, 255, 255, .13);
  --dock-blob-a: rgba(var(--accent-rgb), .75);
  --dock-blob-b: rgba(var(--amber-rgb, 226, 165, 58), .55);
  --dock-blob-c: rgba(110, 130, 255, .45);
}
html[data-tone="light"] {
  --dock-glass: rgba(255, 255, 255, .50);
  --dock-glass-solid: rgba(255, 255, 255, .96);
  --dock-border: rgba(255, 255, 255, .75);
  --dock-hl: rgba(255, 255, 255, .95);
  --dock-ink: rgba(28, 26, 30, .66);
  --dock-pill: rgba(255, 255, 255, .70);
  --dock-blob-a: rgba(var(--accent-rgb), .55);
  --dock-blob-b: rgba(var(--amber-rgb, 226, 165, 58), .45);
  --dock-blob-c: rgba(110, 160, 255, .42);
}
.app-dock-row { display: none; }
@media screen and (max-width: 760px) {
  .wrap, .wrap-wide { padding-bottom: 116px; }

  .app-dock-row {
    display: flex; align-items: flex-end; justify-content: center; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 0 12px calc(10px + env(safe-area-inset-bottom));
    pointer-events: none; /* тек ішіндегі элементтер басылсын */
    transition: transform .42s cubic-bezier(.2, .9, .25, 1), opacity .3s ease;
  }
  .app-dock-row.is-hidden { transform: translateY(calc(100% + 14px)); opacity: 0; }

  .app-dock {
    pointer-events: auto; position: relative; isolation: isolate; overflow: hidden;
    flex: 1; max-width: 430px;
    display: flex; align-items: stretch; justify-content: space-between;
    padding: 6px; gap: 2px; border-radius: 26px;
    background: var(--dock-glass);
    -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
    border: 1px solid var(--dock-border);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55), 0 2px 8px -2px rgba(0, 0, 0, .18),
                inset 0 1px 0 var(--dock-hl), inset 0 -1px 0 rgba(0, 0, 0, .10);
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .app-dock { background: var(--dock-glass-solid); }
  }
  /* Жылжитын түсті дақтар — шынының «тірі» фоны */
  .app-dock-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; pointer-events: none; }
  .app-dock-bg i {
    position: absolute; top: -60%; width: 46%; height: 220%; border-radius: 50%;
    filter: blur(16px); opacity: .9; will-change: transform;
  }
  .app-dock-bg i:nth-child(1) { left: -12%; background: radial-gradient(closest-side, var(--dock-blob-a), transparent); animation: dockBlobA 13s ease-in-out infinite alternate; }
  .app-dock-bg i:nth-child(2) { left: 30%;  background: radial-gradient(closest-side, var(--dock-blob-b), transparent); animation: dockBlobB 17s ease-in-out infinite alternate; }
  .app-dock-bg i:nth-child(3) { left: 66%;  background: radial-gradient(closest-side, var(--dock-blob-c), transparent); animation: dockBlobC 15s ease-in-out infinite alternate; }
  /* Шыныдан өтетін жарқыл */
  .app-dock::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .22) 48%, rgba(255, 255, 255, .05) 54%, transparent 62%);
    background-size: 260% 100%; background-position: 130% 0;
    animation: dockShine 9s ease-in-out infinite;
  }
  /* Белсенді батырманың астындағы шыны «тамшы» */
  .app-dock-glow {
    position: absolute; top: 6px; bottom: 6px; left: 0; z-index: -1;
    width: var(--glow-w, 0px); transform: translateX(var(--glow-x, 0px));
    border-radius: 20px; opacity: 0;
    background: linear-gradient(180deg, var(--dock-pill), rgba(255, 255, 255, .04));
    box-shadow: inset 0 1px 0 var(--dock-hl), 0 8px 18px -8px rgba(var(--accent-rgb), .65);
    transition: transform .55s cubic-bezier(.34, 1.45, .55, 1), width .35s ease, opacity .3s ease;
  }
  .app-dock-glow.on { opacity: 1; }

  .app-dock-item {
    flex: 1 1 0; min-width: 0; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 7px 2px 6px; border-radius: 20px;
    color: var(--dock-ink); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease, transform .15s ease;
  }
  .app-dock-item:active { transform: scale(.9); }
  .app-dock-icon { position: relative; display: flex; align-items: center; justify-content: center; height: 30px; }
  .app-dock-icon .ic { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
  .app-dock-label {
    max-width: 100%; font-size: 10.5px; font-weight: 700; letter-spacing: .01em; line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .app-dock-item.active { color: var(--navy, #dd2a1b); }
  .app-dock-item.active .app-dock-icon .ic { transform: translateY(-1px) scale(1.1); }
  .app-dock-badge {
    position: absolute; top: -6px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: var(--navy, #dd2a1b); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
    box-shadow: 0 0 0 2px var(--dock-glass-solid);
    animation: dockBadge 2.4s ease-in-out infinite;
  }
  /* Ортадағы басты әрекет (сканер) — түсті шыны дөңгелек */
  .app-dock-item.is-primary .app-dock-icon {
    width: 40px; height: 30px; align-items: center; justify-content: center; border-radius: 14px;
    color: #fff;
    background: linear-gradient(150deg, rgba(var(--accent-rgb), .95), rgba(var(--accent-rgb), .65));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -6px rgba(var(--accent-rgb), .8);
  }
  .app-dock-item.is-primary .app-dock-icon::after {
    content: ""; position: absolute; inset: -3px; border-radius: 17px; pointer-events: none;
    border: 2px solid rgba(var(--accent-rgb), .55); opacity: 0;
    animation: dockPulse 2.8s ease-out infinite;
  }

  .app-fab {
    pointer-events: auto; flex-shrink: 0; position: absolute; right: 18px; bottom: calc(100% + 2px); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 20px;
    color: #fff; text-decoration: none;
    background: linear-gradient(150deg, rgba(var(--accent-rgb), .92), rgba(var(--accent-rgb), .62));
    -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 28px -10px rgba(var(--accent-rgb), .7);
    transition: transform .15s ease;
  }
  .app-fab::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
    background-size: 260% 100%; background-position: 130% 0;
    animation: dockShine 6s ease-in-out infinite 1.5s;
  }
  .app-fab:active { transform: scale(.9); }

  /* list.php құралдар тақтасындағы "+ Қосу" док-тың "+"-мен қайталанбасын */
  .add-btn-inline { display: none; }
}
@keyframes dockBlobA { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(55%, 8%) scale(1.15); } 100% { transform: translate(120%, -6%) scale(.95); } }
@keyframes dockBlobB { 0% { transform: translate(0, 0) scale(1.1); } 50% { transform: translate(-60%, -8%) scale(.9); } 100% { transform: translate(50%, 6%) scale(1.2); } }
@keyframes dockBlobC { 0% { transform: translate(0, 0) scale(.95); } 50% { transform: translate(-90%, 6%) scale(1.15); } 100% { transform: translate(-30%, -8%) scale(1); } }
@keyframes dockShine { 0%, 62% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
@keyframes dockPulse { 0% { transform: scale(.85); opacity: .9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes dockBadge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .app-dock-bg i, .app-dock::after, .app-fab::after, .app-dock-badge, .app-dock-item.is-primary .app-dock-icon::after { animation: none !important; }
  .app-dock-glow, .app-dock-row { transition: none; }
}

/* ============================================================
   2026-09-16, §66: пайдаланушы таңдаған 3 анимацияланған дизайн
   бағытының (A · Импульс / B · Ағын / C · Кристалл) бәрін біріктіріп,
   admin-панельге "тема сайт" ретінде қосу — пайдаланушы "барлығы
   ұнады, біріктіріп бәрін қолдансаң болады" деп сұрады. Тек CSS
   айнымалылары (--navy/--amber/--paper-2/--line/--radius) арқылы,
   бұрынғы стильдерді АЛМАСТЫРМАЙ, үстіне қосымша ретінде. Барлық
   анимация prefers-reduced-motion кезінде өшеді.
   ============================================================ */

/* --- A · Импульс: сайдбардың жоғарыдан сырғып шығуы + логотип
       пульс сақинасы + қоңырау белгісінің pulse-и --- */
.admin-nav .admin-nav-item, .admin-nav-bottom .admin-nav-item {
  opacity: 0; transform: translateX(-10px);
  animation: si-nav-in .45s ease forwards;
}
.admin-nav .admin-nav-item:nth-child(1) { animation-delay: .03s; }
.admin-nav .admin-nav-item:nth-child(2) { animation-delay: .07s; }
.admin-nav .admin-nav-item:nth-child(3) { animation-delay: .11s; }
.admin-nav .admin-nav-item:nth-child(4) { animation-delay: .15s; }
.admin-nav .admin-nav-item:nth-child(5) { animation-delay: .19s; }
.admin-nav .admin-nav-item:nth-child(6) { animation-delay: .23s; }
.admin-nav .admin-nav-item:nth-child(7) { animation-delay: .27s; }
.admin-nav .admin-nav-item:nth-child(8) { animation-delay: .31s; }
.admin-nav .admin-nav-item:nth-child(9) { animation-delay: .35s; }
.admin-nav .admin-nav-item:nth-child(10) { animation-delay: .39s; }
.admin-nav-bottom .admin-nav-item { animation-delay: .43s; }
@keyframes si-nav-in { to { opacity: 1; transform: translateX(0); } }

.admin-sidebar-logo { animation: si-badge-pulse 2.8s ease-out infinite; }
@keyframes si-badge-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.5); }
  70% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
}
.admin-bell-badge { animation: si-dot-pulse 1.8s ease-in-out infinite; }
@keyframes si-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.7); }
  70% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0); }
}

/* Меню үстінен тінтуірмен өткенде сырғып жүретін "pill" белгісі —
   B · Ағын бағытының сайдбар-индикаторының тірі нұсқасы (нақты
   көп бетті сайтта JS-мен эмуляцияланған "auto-cycle" орнына,
   пайдаланушының тінтуір қимылына нақты ілесетін интерактив). */
.admin-nav, .admin-nav-bottom { position: relative; }
.admin-nav-hover-pill {
  position: absolute; left: 0; right: 0; top: 0; height: 38px; border-radius: 10px;
  background: rgba(var(--fg-rgb),.06); z-index: 0; pointer-events: none; opacity: 0;
  transition: transform .35s cubic-bezier(.65,0,.35,1), opacity .2s ease;
}
.admin-nav-item { position: relative; z-index: 1; }

/* --- C · Кристалл: аврора-дақтар (фон) + шыны карточкалар --- */
.aurora-blob { position: fixed; border-radius: 50%; filter: blur(70px); z-index: 0; pointer-events: none; }
.aurora-blob-1 { width: 520px; height: 460px; top: -120px; left: 300px; background: rgba(var(--accent-rgb),.16); animation: si-drift-1 18s ease-in-out infinite; }
.aurora-blob-2 { width: 440px; height: 440px; bottom: -160px; right: 60px; background: rgba(var(--amber-rgb),.13); animation: si-drift-2 22s ease-in-out infinite; }
.aurora-blob-3 { width: 340px; height: 340px; top: 320px; right: 380px; background: rgba(var(--accent2-rgb),.12); animation: si-drift-3 20s ease-in-out infinite; }
@keyframes si-drift-1 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(70px,50px); } }
@keyframes si-drift-2 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-60px,-40px); } }
@keyframes si-drift-3 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,40px) scale(1.12); } }
.admin-main { position: relative; z-index: 1; }

.dash-kpi-card, .dash-widget, .detail-card, .mod-attention-item, .admin-avatar-menu {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.mod-attention { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* --- A · Импульс: KPI карточкалардың айналмалы градиент жиегі --- */
.dash-kpi-card { position: relative; }
.dash-kpi-card::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px;
  background: linear-gradient(120deg, transparent, rgba(var(--accent-rgb),.65), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  background-size: 220% 220%; animation: si-border-sweep 3.6s linear infinite; pointer-events: none;
}
@keyframes si-border-sweep { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* --- A · Импульс: "Бөлім бойынша статистика" жолақтарының өсіп
       шығуы (JS-сіз — from{width:0} kadr-ы, "to" болмаса, элементтің
       нақты inline width-ін соңғы кадр ретінде қолданады). --- */
.dash-dept-bar div { animation: si-bar-grow 1.1s cubic-bezier(.2,.8,.2,1) both; animation-delay: .15s; }
@keyframes si-bar-grow { from { width: 0; } }

/* --- B · Ағын: "Соңғы жаңартулар" — нақты авто-ауысатын JS-слайдер --- */
.dash-slider { position: relative; overflow: hidden; min-height: 62px; }
.dash-slide-track { display: flex; transition: transform .6s cubic-bezier(.65,0,.35,1); }
.dash-slide { min-width: 100%; }
.dash-slide .dash-recent-item { border-bottom: none; padding: 4px 0 2px; }
.dash-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.dash-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .3s; display: block; }
.dash-dots span.on { background: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .admin-nav .admin-nav-item, .admin-nav-bottom .admin-nav-item,
  .admin-sidebar-logo, .admin-bell-badge, .aurora-blob,
  .dash-kpi-card::before, .dash-dept-bar div { animation: none !important; opacity: 1 !important; transform: none !important; }
  .dash-slide-track { transition: none !important; }
}
@media (max-width: 900px) {
  .aurora-blob { display: none; }
}

/* ============================================================
   2026-09-26, §70: тақырыптар (қара/ақ/қызғылт) + жаңа іздеу өрісі.
   ============================================================ */
/* --- Topbar іздеу өрісі: белгішесі бар, дөңгелек, фокуста жарқырайды --- */
.admin-topbar-search { position: relative; display: flex; align-items: center; }
.admin-topbar-search .tb-search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); pointer-events: none; transition: color .2s ease; z-index: 1;
}
.admin-topbar-search input[type=search] {
  width: 100%; height: 40px; padding: 0 44px 0 40px; border-radius: 12px;
  background: rgba(var(--fg-rgb),.05); border: 1px solid var(--line); color: var(--ink);
  font-size: 13.5px; font-weight: 500; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  -webkit-appearance: none; appearance: none;
}
.admin-topbar-search input[type=search]::placeholder { color: var(--ink-faint); opacity: 1; }
.admin-topbar-search input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
.admin-topbar-search input[type=search]:hover { background: rgba(var(--fg-rgb),.07); }
.admin-topbar-search input[type=search]:focus {
  outline: none; background: var(--paper-2); border-color: rgba(var(--accent-rgb),.6);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.15);
}
.admin-topbar-search:focus-within .tb-search-icon { color: var(--navy); }
.admin-topbar-search .tb-search-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; display: inline-flex;
  align-items: center; justify-content: center; font: 700 11.5px var(--font-num);
  color: var(--ink-faint); background: rgba(var(--fg-rgb),.06); border: 1px solid var(--line);
  pointer-events: none; transition: opacity .15s ease;
}
.admin-topbar-search:focus-within .tb-search-kbd { opacity: 0; }
.admin-topbar-search .live-search-results { margin-top: 8px; animation: si-pop-in .18s ease both; }
@keyframes si-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .admin-topbar-search .tb-search-kbd { display: none; } .admin-topbar-search input[type=search] { padding-right: 14px; } }

/* --- Тақырып ауыстырғыш (үш дөңгелек) --- */
.theme-switch {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 999px;
  background: rgba(var(--fg-rgb),.06); border: 1px solid var(--line);
}
.site-header .theme-switch { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.ts-dot {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; flex: none;
  background: radial-gradient(circle at 35% 35%, var(--sw1, #fff), var(--sw2, #999) 78%);
  transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 0 0 1px rgba(var(--fg-rgb),.25);
}
.ts-dot:hover { transform: scale(1.15); }
/* §103: бір дөңгелек + ашылатын палитра */
.theme-switch { position: relative; }
.ts-current { width: 20px; height: 20px; box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px rgba(var(--accent-rgb),.18); }
.ts-current[aria-expanded="true"] { transform: scale(1.12) rotate(20deg); }
.ts-pop { position: absolute; top: calc(100% + 10px); right: -8px; z-index: 120; width: 272px; padding: 12px; border-radius: 16px;
  background: var(--paper-2); border: 1px solid var(--line); box-shadow: 0 18px 50px -12px rgba(0,0,0,.45);
  transform-origin: top right; animation: si-ts-pop .22s cubic-bezier(.2,.9,.3,1.2) both; }
.ts-pop[hidden] { display: none; }
@keyframes si-ts-pop { from { opacity: 0; transform: translateY(-6px) scale(.94); } to { opacity: 1; transform: none; } }
.ts-pop-h { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 0 2px 8px; }
.ts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ts-opt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 10px; border: 1px solid transparent; background: none;
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.ts-opt:hover { background: rgba(var(--fg-rgb),.06); transform: translateX(2px); }
.ts-opt.active { border-color: rgba(var(--accent-rgb),.55); background: rgba(var(--accent-rgb),.10); }
.ts-opt.active .ts-dot { box-shadow: 0 0 0 2px var(--navy); }
.ts-opt .ts-dot { width: 20px; height: 20px; }
.ts-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-pop .ts-opt:nth-child(n) { animation: si-fade-up .3s cubic-bezier(.2,.8,.2,1) both; }
.ts-pop .ts-opt:nth-child(2n) { animation-delay: .03s; }
.ts-pop .ts-opt:nth-child(3n) { animation-delay: .06s; }
@media (max-width: 560px) { .ts-pop { position: fixed; top: 64px; right: 10px; left: 10px; width: auto; } .ts-grid { grid-template-columns: 1fr 1fr 1fr; } .ts-opt { font-size: 12px; padding: 7px 6px; gap: 6px; } }

/* --- Ақ/қызғылт тақырыптардағы түзетулер --- */
.admin-topbar .lang-switch { background: rgba(var(--fg-rgb),.05); border-color: var(--line); }
.admin-topbar .lang-btn { color: var(--ink-soft); }
.admin-topbar .lang-btn:hover { background: rgba(var(--fg-rgb),.08); color: var(--ink); }
/* §103: барлық жарық тақырыптарға ортақ (data-tone="light") */
html[data-tone="light"] .admin-topbar .lang-btn.active { background: var(--navy); color: #fff; }
html[data-tone="light"] .aurora-blob { opacity: .55; }
html[data-tone="light"] .admin-sidebar { box-shadow: 1px 0 0 var(--line); }
html[data-tone="light"] .btn-ghost { color: var(--ink); }
html[data-tone="light"] body { -webkit-font-smoothing: auto; }
/* Тақырып ауысқанда жұмсақ өту */
body, .admin-sidebar, .admin-topbar, .dash-widget, .dash-kpi-card, .detail-card, .data-table-wrap {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* ============================================================
   2026-09-26, §73: Әкімшілер беті (қызметкерден тағайындау, рөл
   карталары, жиналмалы модератор региондары) + панель ауыстырғыш.
   ============================================================ */
.fade-up { animation: si-fade-up .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes si-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.btn-sm { font-size: 12px !important; padding: 5px 11px !important; }
.btn.is-danger { color: var(--err) !important; }
.btn.is-ok { color: var(--ok) !important; }

.adm-grid { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 18px; align-items: start; margin-bottom: 22px; }
@media (max-width: 1000px) { .adm-grid { grid-template-columns: 1fr; } }
.adm-h2 { font-size: 16px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.adm-sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.5; }
.adm-count { font: 700 12px var(--font-num); background: rgba(var(--accent-rgb),.14); color: var(--navy); padding: 2px 9px; border-radius: 999px; }

.emp-picker { position: relative; }
.emp-picker-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; max-height: 300px; overflow-y: auto;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.25);
  padding: 4px; animation: si-pop-in .15s ease both;
}
.emp-picker-list button {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; border: 0; background: none;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--ink); font: inherit;
}
.emp-picker-list button:hover, .emp-picker-list button:focus { background: rgba(var(--accent-rgb),.1); outline: none; }
.emp-picker-list b { font-size: 13.5px; }
.emp-picker-list small { font-size: 11.5px; color: var(--ink-faint); }
.emp-picker-empty { padding: 12px; font-size: 13px; color: var(--ink-faint); text-align: center; }
.emp-picked {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(var(--accent-rgb),.08); border: 1px solid rgba(var(--accent-rgb),.3); animation: si-pop-in .2s ease both;
}
.emp-picked-ava, .adm-ava {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--navy), var(--navy-2)); color: #fff; font-weight: 800; font-size: 14px; overflow: hidden;
}
.adm-ava img { width: 100%; height: 100%; object-fit: cover; }
.emp-picked-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.emp-picked-txt small { color: var(--ink-faint); font-size: 12px; }
.emp-picked button { border: 0; background: rgba(var(--fg-rgb),.08); color: var(--ink); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 16px; }

.role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-card { position: relative; cursor: pointer; }
.role-card input { position: absolute; opacity: 0; pointer-events: none; }
.role-card-inner {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(var(--fg-rgb),.03); transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.role-card-inner b { font-size: 13px; }
.role-card-inner small { font-size: 11.5px; color: var(--ink-faint); line-height: 1.35; }
.role-card:hover .role-card-inner { transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.4); }
.role-card input:checked + .role-card-inner { border-color: var(--navy); background: rgba(var(--accent-rgb),.1); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12); }
.role-card input:focus-visible + .role-card-inner { outline: 2px solid var(--amber-2); }
.adm-grant .btn[disabled] { opacity: .45; cursor: not-allowed; }

.adm-list { display: flex; flex-direction: column; }
.adm-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.adm-row:last-child { border-bottom: 0; }
.adm-row.is-off { opacity: .55; }
.adm-row:target { background: rgba(var(--accent-rgb),.08); border-radius: 10px; animation: si-flash 1.6s ease 2; }
@keyframes si-flash { 50% { background: rgba(var(--accent-rgb),.2); } }
.adm-who { flex: 1; min-width: 0; }
.adm-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-name a { color: var(--ink); text-decoration: none; }
.adm-name a:hover { color: var(--navy); }
.adm-you { font-size: 11px; font-weight: 600; color: var(--ink-faint); }
.adm-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.adm-type { font-weight: 700; color: var(--ink-soft); }
.adm-type.is-emp { color: var(--ok); }
.adm-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.adm-actions form { margin: 0; }
.role-sel { width: auto !important; font-size: 12.5px !important; padding: 5px 28px 5px 10px !important; border-radius: 999px !important; font-weight: 700; }
.role-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(var(--fg-rgb),.07); color: var(--ink-soft); }
.role-sel.role-root, .role-pill.role-root { background: rgba(var(--accent-rgb),.14); color: var(--navy); border-color: rgba(var(--accent-rgb),.35) !important; }
.role-sel.role-admin, .role-pill.role-admin { color: var(--ok); }
.role-sel.role-moderator, .role-pill.role-moderator { color: var(--amber); }
.role-sel.role-it_specialist, .role-pill.role-it_specialist { color: var(--ok); background: rgba(46,158,91,.10); } /* §102 */
@media (max-width: 640px) { .adm-row { flex-wrap: wrap; } .adm-actions { width: 100%; justify-content: flex-start; padding-left: 48px; } .role-cards { grid-template-columns: 1fr; } }

.adm-newpw {
  border: 1px solid rgba(63,179,127,.45); background: rgba(63,179,127,.1); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px;
}
.adm-newpw-title { font-weight: 800; margin-bottom: 8px; }
.adm-newpw-row { font-size: 14px; margin-bottom: 4px; }
.adm-newpw-row span { color: var(--ink-soft); display: inline-block; min-width: 90px; }
.adm-newpw code { font: 700 15px var(--font-num); background: rgba(var(--fg-rgb),.08); padding: 2px 8px; border-radius: 6px; user-select: all; }
.adm-newpw p { margin: 8px 0 0; font-size: 12.5px; }

/* Модератор региондары — жиналмалы (<details>) карталар */
.mod-acc { padding: 0 !important; margin-bottom: 10px; overflow: hidden; }
.mod-acc > summary {
  list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; user-select: none;
  transition: background .15s ease;
}
.mod-acc > summary::-webkit-details-marker { display: none; }
.mod-acc > summary:hover { background: rgba(var(--fg-rgb),.03); }
.mod-acc-name { font-weight: 700; font-size: 14px; white-space: nowrap; }
.mod-acc-regions { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-acc-count { font: 700 12px var(--font-num); background: rgba(var(--accent-rgb),.14); color: var(--navy); padding: 2px 9px; border-radius: 999px; }
.mod-acc-chev { font-size: 20px; color: var(--ink-faint); transition: transform .25s ease; line-height: 1; }
.mod-acc[open] .mod-acc-chev { transform: rotate(90deg); }
.mod-acc-body { padding: 4px 18px 18px; animation: si-fade-up .3s ease both; }
.adm-standalone > summary { cursor: pointer; list-style: none; }
.adm-standalone > summary::-webkit-details-marker { display: none; }
.adm-standalone > summary::before { content: '›'; display: inline-block; margin-right: 8px; transition: transform .2s ease; }
.adm-standalone[open] > summary::before { transform: rotate(90deg); }

/* Панель ауыстырғыш: Әкімші панелі ⇄ Жеке кабинет */
.panel-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(var(--fg-rgb),.06); border: 1px solid var(--line); }
.panel-switch .ps-item {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--ink-soft); text-decoration: none; transition: background .2s ease, color .2s ease; white-space: nowrap;
}
.panel-switch .ps-item:hover { color: var(--ink); }
.panel-switch .ps-item.active { background: linear-gradient(155deg, var(--navy), var(--navy-2)); color: #fff; box-shadow: 0 4px 12px -4px rgba(var(--accent-rgb),.6); }
.panel-switch.on-red { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.panel-switch.on-red .ps-item { color: #f6e3df; }
.panel-switch.on-red .ps-item.active { background: #fff; color: #b3241a; }
@media (max-width: 1250px) { .admin-topbar .panel-switch .ps-item span { display: none; } }
.hdr-ava { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
/* hidden атрибуты әрқашан жасырады (display:flex класы үстінен басып кетпесін) */
[hidden] { display: none !important; }
.admin-topbar .lang-btn.active { color: #241505; }

/* ============================================================
   2026-09-26, §72: кесте бағандарын басып сұрыптау + Стандартизация
   (филиал/түр чиптері, филиал бойынша топ жолдары).
   ============================================================ */
.th-sort a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.th-sort a:hover { color: var(--ink); }
.th-sort .sort-ind { font-size: 10px; opacity: .35; transition: opacity .15s ease; }
.th-sort a:hover .sort-ind { opacity: .8; }
.th-sort.is-sorted { color: var(--navy); }
.th-sort.is-sorted .sort-ind { opacity: 1; }
tr.grp-row td {
  background: rgba(var(--accent-rgb),.07) !important; color: var(--ink); font-size: 12.5px; font-weight: 600;
  border-top: 1px solid rgba(var(--accent-rgb),.25); padding: 8px 12px !important; letter-spacing: .01em;
}
tr.grp-row .grp-wp { margin-left: 8px; color: var(--ink-faint); font-weight: 500; }
table.data-table tbody tr.grp-row:hover { background: transparent; }
.std-legend { font-size: 12.5px; color: var(--ink-soft); background: rgba(var(--fg-rgb),.03); border: 1px dashed var(--line); border-radius: 10px; padding: 9px 12px; margin-bottom: 10px; }
.std-legend b { color: var(--navy); font-family: var(--font-num); }
.std-chips { margin-bottom: 8px; }
.std-chips .tab-chip b { font-family: var(--font-num); font-size: 11.5px; }
.std-type-chips { margin-bottom: 14px; }

/* ============================================================
   2026-09-26, §76: бас бет (5 KPI, жаңалықтар, түсіндірме) +
   бүкіл сайт бойынша жеңіл анимациялар.
   ============================================================ */
.dash-kpi-row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
a.dash-kpi-card { display: block; text-decoration: none; color: inherit; animation: si-fade-up .5s cubic-bezier(.2,.8,.2,1) both; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.dash-kpi-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(var(--accent-rgb),.55); border-color: rgba(var(--accent-rgb),.45); }
a.dash-kpi-card:hover .dash-kpi-icon { transform: scale(1.1) rotate(-4deg); }
.dash-kpi-card .dash-kpi-icon { transition: transform .25s ease; }
.dash-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dash-widget-head h2 { margin: 0 !important; }
.dash-widget-count { font: 700 11.5px var(--font-num); background: rgba(var(--accent-rgb),.14); color: var(--navy); padding: 2px 9px; border-radius: 999px; }
.dash-widget-desc { font-size: 12.5px; color: var(--ink-faint); margin: -4px 0 12px; line-height: 1.45; }
.dash-news .dash-recent-item { border-bottom: 1px solid var(--line); }
.dash-news .dash-recent-item:last-child { border-bottom: 0; }
.news-in { animation: si-news-in .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes si-news-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.news-verb { font-weight: 500; color: var(--ink-soft); font-size: 12.5px; margin-left: 4px; }
.dash-more-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; padding: 9px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 700; text-decoration: none; color: var(--navy);
  background: rgba(var(--accent-rgb),.08); border: 1px solid rgba(var(--accent-rgb),.25); transition: background .2s ease, gap .2s ease;
}
.dash-more-btn:hover { background: rgba(var(--accent-rgb),.16); gap: 10px; }
.dash-dept-row-top b em { font-style: normal; font-weight: 600; color: var(--ink-faint); font-size: 11.5px; margin-left: 4px; }

/* Жаңалықтар беті */
.news-day { margin-bottom: 18px; }
.news-day-title { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 8px 4px; }
.news-list { padding: 4px 18px !important; }
.news-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.news-item:last-child { border-bottom: 0; }
.news-ico { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb),.12); font-size: 16px; }
.news-body { flex: 1; min-width: 0; }
.news-title { font-size: 14px; font-weight: 700; }
.news-title a { color: var(--ink); text-decoration: none; }
.news-title a:hover { color: var(--navy); }
.news-fields { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.news-fields span { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: rgba(var(--fg-rgb),.06); color: var(--ink-soft); }
.news-meta { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

/* Бүкіл сайт: беттің мазмұны жұмсақ пайда болады + карталар тірі */
.admin-content > * { animation: si-fade-up .45s cubic-bezier(.2,.8,.2,1) both; }
.admin-content > *:nth-child(2) { animation-delay: .04s; }
.admin-content > *:nth-child(3) { animation-delay: .08s; }
.admin-content > *:nth-child(4) { animation-delay: .12s; }
.admin-content > *:nth-child(5) { animation-delay: .16s; }
.admin-content > *:nth-child(n+6) { animation-delay: .2s; }
.dash-widget, .related-card, .detail-grid > * { transition: transform .2s ease, box-shadow .2s ease; }
.dash-widget:hover, .related-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -18px rgba(0,0,0,.45); }
.btn { transition: transform .12s ease, box-shadow .2s ease, background .2s ease, filter .2s ease; }
.btn:active { transform: scale(.97); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 8px 20px -8px rgba(var(--accent-rgb),.7); }
table.data-table tbody tr { transition: background .15s ease; }
.tab-chip { transition: background .15s ease, color .15s ease, transform .15s ease; }
.tab-chip:hover { transform: translateY(-1px); }

/* Беттер арасында ауысқанда жоғарыда жүгіретін жіңішке жолақ */
.page-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; pointer-events: none;
  background: linear-gradient(90deg, var(--navy), var(--amber-2)); box-shadow: 0 0 10px rgba(var(--accent-rgb),.6); opacity: 0; }
.page-progress.run { opacity: 1; animation: si-progress 2.2s cubic-bezier(.1,.7,.2,1) forwards; }
@keyframes si-progress { 0% { width: 0; } 60% { width: 72%; } 100% { width: 92%; } }

@media (prefers-reduced-motion: reduce) {
  .admin-content > *, a.dash-kpi-card, .news-in, .fade-up, .page-progress.run { animation: none !important; }
  .dash-widget:hover, .related-card:hover, a.dash-kpi-card:hover { transform: none; }
}

/* ============================================================
   2026-09-26, §74: профиль суреттері (аватар)
   ============================================================ */
.admin-avatar { overflow: hidden; }
.admin-avatar img, .my-ava img, .view-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.my-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.my-ava-wrap { position: relative; flex-shrink: 0; }
.my-ava {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--navy), var(--navy-2)); color: #fff; font-size: 32px; font-weight: 800;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.18), 0 10px 24px -10px rgba(var(--accent-rgb),.6);
  animation: si-ava-in .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes si-ava-in { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.my-ava-edit {
  position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--paper-2);
  background: var(--amber); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.my-ava-edit:hover { transform: scale(1.1); }
.my-hero-txt { min-width: 0; }
.my-ava-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.my-ava-hint { font-size: 12px; color: var(--ink-faint); }
[data-avatar-upload].is-busy { opacity: .5; pointer-events: none; animation: si-busy 1s ease-in-out infinite alternate; }
@keyframes si-busy { to { opacity: .25; } }
.view-ava { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; vertical-align: middle; margin-right: 4px; box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.35); }
@media (max-width: 560px) { .my-hero { flex-direction: column; text-align: center; } .my-ava-actions { justify-content: center; } }

/* ============================================================
   2026-09-26, §75: баптаулар қойындылары + шаблон редакторы +
   стандартизация префикстері.
   ============================================================ */
.settings-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 18px; padding: 4px; border-radius: 14px; background: rgba(var(--fg-rgb),.04); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.settings-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; text-decoration: none; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); transition: background .2s ease, color .2s ease; }
.settings-tab:hover { color: var(--ink); background: rgba(var(--fg-rgb),.05); }
.settings-tab.active { background: linear-gradient(155deg, var(--navy), var(--navy-2)); color: #fff; box-shadow: 0 6px 16px -8px rgba(var(--accent-rgb),.7); }

.tpl-modules { margin-bottom: 14px; }
.tpl-grid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .tpl-grid { grid-template-columns: 1fr; } }
.tpl-add { position: sticky; top: 84px; }
.tpl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tpl-list { display: flex; flex-direction: column; gap: 6px; }
.tpl-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(var(--fg-rgb),.02); transition: opacity .2s ease, background .2s ease, border-color .2s ease;
}
.tpl-row:hover { border-color: rgba(var(--accent-rgb),.3); }
.tpl-row.is-hidden { opacity: .5; }
.tpl-row.is-custom { border-style: dashed; border-color: rgba(var(--accent-rgb),.35); }
.tpl-row.moved { animation: si-flash .6s ease; }
.tpl-move { display: flex; flex-direction: column; gap: 2px; }
.tpl-move button, .std-move button {
  width: 26px; height: 18px; border: 1px solid var(--line); background: rgba(var(--fg-rgb),.04); color: var(--ink-soft);
  border-radius: 5px; font-size: 9px; cursor: pointer; line-height: 1; padding: 0;
}
.tpl-move button:hover, .std-move button:hover { background: rgba(var(--accent-rgb),.15); color: var(--navy); }
.std-move { white-space: nowrap; }
.std-move button { display: inline-block; margin-right: 2px; height: 22px; }
.tpl-main { flex: 1; min-width: 0; }
.tpl-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpl-label { flex: 1; min-width: 180px; padding: 7px 10px !important; font-size: 13.5px !important; font-weight: 600; }
.tpl-type { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(var(--fg-rgb),.06); color: var(--ink-soft); white-space: nowrap; }
.tpl-badge-new { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(var(--accent-rgb),.14); color: var(--navy); }
.tpl-key { font: 11px var(--font-num); color: var(--ink-faint); }
.tpl-opts { margin-top: 6px; }
.tpl-opts summary { cursor: pointer; font-size: 12.5px; color: var(--amber); font-weight: 700; }
.tpl-opts textarea { margin-top: 6px; font-size: 13px !important; }
.tpl-opts small { display: block; color: var(--ink-faint); font-size: 11.5px; margin-top: 4px; }
.tpl-flags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tpl-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.tpl-switch input { width: 16px; height: 16px; accent-color: var(--navy); }
.tpl-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.std-table input, .std-table select { padding: 6px 9px !important; font-size: 13px !important; }
.std-table .std-prefix { font-family: var(--font-num); font-weight: 700; text-transform: uppercase; max-width: 120px; }
@media (max-width: 700px) { .tpl-row { flex-wrap: wrap; } .tpl-flags { width: 100%; justify-content: flex-start; padding-left: 36px; } }

/* §76: телефонда — KPI екі бағанда, topbar бір жолға сыяды */
@media (max-width: 600px) {
  .dash-kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dash-kpi-card { padding: 13px 14px !important; }
  .dash-kpi-card .num { font-size: 22px; }
  .dash-kpi-card .dash-kpi-icon { width: 30px; height: 30px; margin-bottom: 6px; }
  .admin-topbar { gap: 8px !important; }
  .admin-topbar-right { gap: 6px; flex: 1; justify-content: flex-end; }
  .theme-switch { padding: 3px 5px; gap: 3px; }
  .admin-topbar .lang-btn { min-width: 30px; padding: 5px 6px; font-size: 11px; }
  .admin-bell-wrap, .admin-avatar { width: 32px; height: 32px; }
  .panel-switch .ps-item { padding: 5px 8px; }
  .panel-switch .ps-item span { display: none; }
}

/* §77: "Қызметкер" тізімінің үстіндегі іздеу өрісі */
.emp-select-search { margin-bottom: 6px; padding: 8px 12px !important; font-size: 13px !important; border-radius: 10px !important; background: rgba(var(--fg-rgb),.04) !important; }
select[data-emp-search][size] { padding: 4px; border-radius: 10px; }

/* §78: IT өтінім күйлері (/my/ — "Менің IT өтінімдерім") */
.it-st{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; background:rgba(137,147,168,.16); color:var(--ink-soft, #8993a8); white-space:nowrap; }
.it-st-jana{ background:rgba(59,130,246,.14); color:#3b82f6; }
.it-st-orindalyp_jatyr{ background:rgba(var(--amber-rgb),.16); color:#d8962a; }
.it-st-orindaldy{ background:rgba(72,180,127,.16); color:#2f9e6a; }
.it-st-orindalmady{ background:rgba(226,87,74,.15); color:#e2574a; }
/* §79: push күйі */
.push-state{ font-size:13px; color:var(--ink-soft, #8993a8); }
.push-state.push-on{ color:#2f9e6a; font-weight:600; }

/* ============================================================
   2026-09-26, §84: заманауи анимациялы меню + SVG пиктограммалар
   (смайликтердің орнына — Lucide иконкалары, currentColor).
   ============================================================ */
.ic { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }
.ic-emoji { font-size: 15px; line-height: 1; }
h1 > .ic, h2 > .ic, .page-head h1 .ic { vertical-align: -0.14em; color: var(--amber); margin-right: 2px; }

/* --- Сайдбар --- */
.admin-sidebar { width: 252px; padding: 16px 12px 12px; transition: width .35s cubic-bezier(.65,0,.35,1), padding .35s; scrollbar-width: thin; }
.admin-main { margin-left: 252px; transition: margin-left .35s cubic-bezier(.65,0,.35,1); }
.admin-nav { gap: 1px; }
.admin-nav-sec { margin-top: 10px; }
.admin-nav-sec-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: none; border: 0; cursor: pointer; padding: 6px 12px 4px;
  font: 700 10.5px/1 inherit; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
  transition: color .2s;
}
.admin-nav-sec-head:hover { color: var(--ink); }
.admin-nav-sec.has-active .admin-nav-sec-head { color: var(--amber); }
.admin-nav-sec-chev { transform: rotate(90deg); transition: transform .3s cubic-bezier(.65,0,.35,1); opacity: .7; }
.admin-nav-sec.collapsed .admin-nav-sec-chev { transform: rotate(0deg); }
.admin-nav-sec-body { overflow: hidden; }
.admin-nav-sec.collapsed .admin-nav-sec-body { opacity: 0; }
.admin-nav-sec-body { display: flex; flex-direction: column; gap: 1px; max-height: 1200px; transition: max-height .4s cubic-bezier(.65,0,.35,1), opacity .25s; }
.admin-nav-sec.collapsed .admin-nav-sec-body { max-height: 0; }

.admin-nav-item { gap: 10px; padding: 6px 10px 6px 6px; font-size: 13.5px; border-radius: 12px; transition: background .2s, color .2s, transform .2s; }
.admin-nav-item:active { transform: scale(.98); }
.admin-nav-icon {
  width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--fg-rgb),.05); color: var(--ink-soft); font-size: 15px;
  transition: background .25s, color .25s, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.admin-nav-item:hover .admin-nav-icon { color: var(--amber); background: rgba(var(--accent-rgb),.12); transform: translateY(-1px) rotate(-6deg) scale(1.06); }
.admin-nav-item:hover .admin-nav-icon .ic { animation: si-ic-draw .7s ease both; }
@keyframes si-ic-draw { from { stroke-dasharray: 70; stroke-dashoffset: 70; } to { stroke-dasharray: 70; stroke-dashoffset: 0; } }
.admin-nav-label { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; transition: opacity .2s; }
.admin-bell-icon { display: inline-flex; align-items: center; justify-content: center; }
.admin-menu-toggle { align-items: center; justify-content: center; }
.admin-bell-wrap:hover .admin-bell-icon .ic { animation: si-bell-ring .8s ease; transform-origin: 50% 10%; }
@keyframes si-bell-ring { 0%,100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.admin-nav-item.active { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; box-shadow: 0 8px 22px -10px rgba(var(--accent-rgb),.7); }
.admin-nav-item.active .admin-nav-icon { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.admin-nav-item.active::before {
  content: ""; position: absolute; left: 2px; top: 26%; bottom: 26%; width: 3px; border-radius: 4px;
  background: var(--amber); box-shadow: 0 0 12px rgba(var(--accent-rgb),.9); animation: si-bar-in .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes si-bar-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.admin-nav-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: var(--amber); color: #fff; animation: si-dot-pulse 2.2s ease-in-out infinite;
}
.admin-nav-item.active .admin-nav-badge { background: #fff; color: var(--navy); }
.admin-nav .admin-nav-item { animation-delay: calc(var(--i, 0) * 28ms + 30ms); }

.admin-nav-collapse {
  margin: 10px 4px 0; align-self: flex-end; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transform: rotate(180deg); transition: transform .35s cubic-bezier(.65,0,.35,1), background .2s, color .2s;
}
.admin-nav-collapse:hover { background: rgba(var(--accent-rgb),.12); color: var(--amber); }

/* --- Жиналған (тек иконка) режим — десктоп --- */
@media (min-width: 901px) {
  html.nav-rail .admin-sidebar { width: 78px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
  html.nav-rail .admin-main { margin-left: 78px; }
  html.nav-rail .admin-sidebar-word, html.nav-rail .admin-nav-label, html.nav-rail .admin-nav-sec-head span { opacity: 0; width: 0; pointer-events: none; }
  html.nav-rail .admin-nav-sec-head { padding: 0; height: 1px; margin: 8px 8px; background: var(--line); }
  html.nav-rail .admin-nav-sec-head .ic { display: none; }
  html.nav-rail .admin-nav-sec.collapsed .admin-nav-sec-body { max-height: 1200px; opacity: 1; }
  html.nav-rail .admin-nav-item { justify-content: center; padding: 6px; }
  html.nav-rail .admin-nav-badge { position: absolute; top: 0; right: 2px; min-width: 16px; height: 16px; font-size: 9.5px; padding: 0 4px; }
  html.nav-rail .admin-nav-collapse { transform: rotate(0deg); align-self: center; }
  html.nav-rail .admin-sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  html.nav-rail .admin-nav-item[data-tip]:hover::after {
    content: attr(data-tip); position: fixed; left: 84px; margin-top: 0; padding: 6px 10px; border-radius: 8px;
    background: var(--ink); color: var(--paper); font-size: 12.5px; font-weight: 700; white-space: nowrap; z-index: 100;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,.4); animation: si-tip-in .18s ease both;
  }
  @keyframes si-tip-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 900px) {
  .admin-main { margin-left: 0; }
  .admin-nav-collapse { display: none; }
}

/* --- Бас бет: KPI / жылдам әрекеттер / жаңалықтар иконкалары --- */
.dash-kpi-card .dash-kpi-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--amber); }
.dash-quick-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--amber); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.dash-quick-item:hover .dash-quick-icon { transform: rotate(-8deg) scale(1.12); }
.dash-quick-item:hover .dash-quick-icon .ic, a.dash-kpi-card:hover .dash-kpi-icon .ic { animation: si-ic-draw .7s ease both; }
.dash-quick-arrow { transition: transform .25s; }
.dash-quick-item:hover .dash-quick-arrow { transform: translateX(4px); }
.dash-recent-icon, .news-ico { color: var(--amber); }
.dash-widget h2 .ic { color: var(--amber); }

/* Бас беттегі ескерту жолақтары (IT актілері, кеткендер) */
.dash-alert {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; text-decoration: none;
  color: var(--ink); background: rgba(var(--accent-rgb),.10); border: 1px solid rgba(var(--accent-rgb),.3);
  animation: si-nav-in .5s ease both; transition: transform .2s, box-shadow .2s;
}
.dash-alert span { flex: 1; font-weight: 700; }
.dash-alert .ic:first-child { color: var(--amber); }
.dash-alert:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(var(--accent-rgb),.8); }
.dash-alert:hover .ic:last-child { transform: translateX(4px); }
.dash-alert .ic:last-child { transition: transform .25s; }
.dash-alert-warn { background: rgba(var(--amber-rgb),.12); border-color: rgba(var(--amber-rgb),.35); }
.dash-alert-warn .ic:first-child { color: #d8962a; }

/* Мобильді док иконкалары */

/* Аватар мәзірі */
.admin-avatar-menu a { display: flex; align-items: center; gap: 8px; }

/* --- Жаңа беттер: бет тақырыбы, сегмент қойындылар, KPI, кестелер --- */
.page-head { margin-bottom: 16px; }
.page-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }
.page-sub { color: var(--ink-faint); margin: 0; font-size: 13.5px; max-width: 820px; }
.muted { color: var(--ink-faint); }
.section-h { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 22px 0 10px; }
.seg-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(var(--fg-rgb),.05); margin-bottom: 16px; flex-wrap: wrap; }
.seg-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; text-decoration: none; color: var(--ink-soft); font-weight: 700; font-size: 13px; transition: background .2s, color .2s; }
.seg-tabs a:hover { color: var(--ink); }
.seg-tabs a.active { background: var(--paper-2); color: var(--ink); box-shadow: 0 2px 10px -4px rgba(0,0,0,.3); }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { padding: 14px 16px; border-radius: 14px; background: var(--glass-bg, var(--paper-2)); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; animation: si-nav-in .45s ease both; }
.kpi b { font-size: 22px; letter-spacing: -.3px; }
.kpi small { font-size: 12px; color: var(--ink-faint); }
.kpi-l { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.kpi-bad b { color: #e5493a; } .kpi-warn b { color: #d8962a; } .kpi-muted b { color: var(--ink-faint); }
.lc-bar { position: relative; height: 8px; border-radius: 999px; background: rgba(var(--fg-rgb),.08); overflow: hidden; display: flex; }
.lc-bar span { display: block; height: 100%; width: var(--w); animation: si-bar-grow 1s cubic-bezier(.2,.8,.2,1) both; }
.lc-bar-old { background: #e5493a; } .lc-bar-next { background: #e2a53a; } .lc-bar-cost { background: linear-gradient(90deg, var(--navy), var(--amber)); border-radius: 999px; }
.lc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .lc-two { grid-template-columns: 1fr; } }
.lc-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
.lc-row:last-child { border-bottom: 0; }
.lc-row-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 13.5px; }
.lc-row-sub { font-size: 12px; margin-top: 4px; }
.lc-price { display: flex; align-items: center; gap: 10px; }
.lc-price label { flex: 1; margin: 0; }
.lc-price input { max-width: 160px; text-align: right; }

/* IT актілерінен тіркеу */
.itimp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.itimp-emp { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.itimp-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; vertical-align: middle; margin-right: 8px; }
.itimp-done td { opacity: .75; }
.btn.is-active { background: rgba(var(--accent-rgb),.14); color: var(--amber); }

/* Кеткендер чек-листі */
.dep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.dep-card { padding: 14px; border-radius: 16px; background: var(--glass-bg, var(--paper-2)); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; animation: si-nav-in .45s ease both; transition: transform .2s, box-shadow .2s; }
.dep-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(0,0,0,.5); }
.dep-head { display: flex; align-items: center; gap: 10px; }
.dep-ava { width: 40px !important; height: 40px !important; }
.dep-who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dep-who a { color: var(--ink); text-decoration: none; }
.dep-who .muted { font-size: 12px; }
.dep-count { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: rgba(var(--amber-rgb),.16); color: #d8962a; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.dep-list { list-style: none; margin: 0; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 5px; }
.dep-list li { display: flex; align-items: center; gap: 8px; }
.dep-ic { color: var(--ink-faint); display: inline-flex; }
.dep-list a { color: var(--ink-soft); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dep-list a:hover { color: var(--amber); }
.dep-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* Ақау туралы хабарлау */
.fault-asset { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(var(--fg-rgb),.05); margin-bottom: 16px; }
.fault-asset-ic { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb),.14); color: var(--amber); }
.fault-asset-type { font-size: 12px; color: var(--ink-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.fault-asset-name { font-weight: 800; font-size: 15px; }
.fault-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.fault-kind input { position: absolute; opacity: 0; pointer-events: none; }
.fault-kind span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: 13px; transition: all .2s; }
.fault-kind input:checked + span { border-color: var(--amber); background: rgba(var(--accent-rgb),.12); color: var(--amber); transform: translateY(-1px); }

/* Офлайн белгісі (түгендеу) */
.offline-badge { position: sticky; top: calc(var(--site-header-h, 60px) + 6px); z-index: 20; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #e2a53a; color: #1b1405; font-weight: 800; font-size: 13px; margin-bottom: 12px; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); animation: si-dot-pulse 2s infinite; }
.audit-pending { color: #d8962a; }

/* Меню баптауы — иконка таңдау */
.icon-pick { display: inline-flex; align-items: center; gap: 6px; }
.icon-pick-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--fg-rgb),.04); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.icon-pick-btn:hover { border-color: var(--amber); color: var(--amber); }
.icon-grid-pop { position: fixed; z-index: 200; width: min(420px, 92vw); max-height: 60vh; overflow: auto; padding: 10px; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(0,0,0,.6); display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; animation: si-tip-in .18s ease both; }
.icon-grid-pop input { grid-column: 1 / -1; margin-bottom: 4px; }
.icon-grid-pop button { height: 42px; border-radius: 10px; border: 1px solid transparent; background: rgba(var(--fg-rgb),.04); color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.icon-grid-pop button:hover, .icon-grid-pop button.on { border-color: var(--amber); color: var(--amber); background: rgba(var(--accent-rgb),.12); }

@media (prefers-reduced-motion: reduce) {
  .admin-nav-item:hover .admin-nav-icon, .admin-nav-item:hover .admin-nav-icon .ic, .dash-quick-item:hover .dash-quick-icon .ic,
  .admin-nav-badge, .dash-alert, .kpi, .dep-card, .lc-bar span, .offline-badge { animation: none !important; transform: none !important; }
}

/* §89: растау керек заттар тізімі (/my/) және зат бетіндегі растау блогы */
.attest-need { margin-bottom: 22px; border-radius: 12px; border: 1px solid rgba(var(--amber-rgb),.35); background: rgba(var(--amber-rgb),.10); overflow: hidden; }
.attest-need-banner { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #d8962a; }
.attest-need-banner::-webkit-details-marker { display: none; }
.attest-need-banner > span:nth-child(2) { flex: 1; }
.attest-need-cta { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 13px; white-space: nowrap; }
.attest-need-chev { transition: transform .25s; }
.attest-need[open] .attest-need-chev { transform: rotate(90deg); }
.attest-need-list { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.attest-need-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); animation: si-nav-in .35s ease both; }
.attest-need-name { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; flex: 1; }
.attest-need-name small { display: block; color: var(--ink-faint); font-size: 12px; }
.attest-need-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb),.12); color: var(--amber); flex-shrink: 0; }
.attest-box { margin-top: 18px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--fg-rgb),.04); display: flex; flex-direction: column; gap: 10px; }
.attest-box-q { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.attest-box-q .ic { color: var(--amber); }
.attest-box-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.attest-box-state.ok { color: #2f9e6a; } .attest-box-state.bad { color: #e5493a; } .attest-box-state.warn { color: #d8962a; }
.attest-big { padding: 10px 22px !important; font-size: 14.5px !important; font-weight: 800; }
tr.row-click { cursor: pointer; }
tr.row-click:hover td { background: rgba(var(--accent-rgb),.05); }
.btn.attest-yes.attest-big { background: #2f9e6a; color: #fff; border: 0; box-shadow: 0 8px 18px -10px rgba(47,158,106,.9); }
.btn.attest-no.attest-big { background: transparent; color: #e5493a; border: 1.5px solid rgba(229,73,58,.6); }
.btn.attest-yes.attest-big:hover { filter: brightness(1.08); }
.btn.attest-no.attest-big:hover { background: rgba(229,73,58,.1); }

/* §90: қабылдау-тапсыру актісі */
.act-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 16px; }
@media (max-width: 700px) { .act-modes { grid-template-columns: 1fr; } }
.act-mode input { position: absolute; opacity: 0; pointer-events: none; }
.act-mode span { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); cursor: pointer; transition: all .2s; }
.act-mode span .ic { color: var(--amber); margin-bottom: 2px; }
.act-mode span small { color: var(--ink-faint); font-size: 12.5px; }
.act-mode input:checked + span { border-color: var(--amber); background: rgba(var(--accent-rgb),.10); box-shadow: 0 8px 20px -14px rgba(var(--accent-rgb),.9); }
.act-sig-grid { display: grid; gap: 14px; }
.act-sig-card { padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--fg-rgb),.03); }
.act-sig-card canvas { background: #fff; border-radius: 10px; }
.act-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin: 4px 0; }
.act-saved-img { display: block; max-height: 80px; background: #fff; border-radius: 8px; padding: 4px 10px; margin-top: 4px; }
.act-remote-note { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(var(--accent-rgb),.10); color: var(--ink); font-size: 13.5px; }
.act-pending-box { margin-bottom: 22px; padding: 12px; border-radius: 14px; border: 2px solid rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.08); display: flex; flex-direction: column; gap: 8px; animation: si-nav-in .4s ease both; }
.act-pending-head { display: flex; align-items: center; gap: 8px; color: var(--amber); }
.act-pending-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.act-pending-row > span:nth-child(2) { flex: 1; min-width: 0; }
.act-pending-row small { display: block; color: var(--ink-faint); font-size: 12px; }
.act-item-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 13.5px; }
.act-item-state { font-weight: 800; font-size: 12.5px; } .act-item-state.ok { color: #2f9e6a; } .act-item-state.warn { color: #d8962a; }
.auto-link { word-break: break-all; }

/* 2026-09-27, §91: карточкадағы "схемадағы орны" чипі */
.fp-loc-chip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(63,179,127,.35); background: rgba(63,179,127,.08); color: var(--ink); text-decoration: none; font-size: 13.5px; transition: border-color .15s, background .15s; }
.fp-loc-chip:hover { border-color: rgba(63,179,127,.7); background: rgba(63,179,127,.13); }
.fp-loc-chip > .ic { color: var(--ok); flex: none; }
.fp-loc-chip > span { flex: 1; min-width: 180px; }
.fp-loc-chip em { color: var(--ink-faint); font-style: normal; }
.fp-loc-chip > b { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-size: 12.5px; white-space: nowrap; }
.fp-loc-chip.is-none { border-color: var(--line); background: var(--panel-3); color: var(--ink-soft); }
.fp-loc-chip.is-none > .ic, .fp-loc-chip.is-none > b { color: var(--amber); }

/* 2026-09-28, §92: AnyDesk батырмасы */
.ad-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(239,68,68,.28); background: rgba(239,68,68,.06); }
.ad-pc { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--ink); text-decoration: none; min-width: 120px; }
.ad-pc .ic { color: var(--amber); }
.ad-box { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.ad-id { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 13.5px; margin-right: auto; }
.ad-id b { color: var(--ink); font-family: var(--font-num); letter-spacing: .02em; }
.ad-id .ic { color: #ef4444; }
.ad-box .btn { display: inline-flex; align-items: center; gap: 5px; }
.ad-mini { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #ef4444; background: rgba(239,68,68,.1); text-decoration: none; flex: none; }
.ad-mini:hover { background: rgba(239,68,68,.2); }
.oe-row { border-color: rgba(79,140,255,.3); background: rgba(79,140,255,.06); }
.oe-row .ad-id .ic { color: #4f8cff; }
.data-table .ad-mini { margin-left: 6px; width: 24px; height: 24px; vertical-align: middle; }

/* 2026-09-28, §95: Фирмалар */
.co-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(var(--amber-rgb),.14); color: var(--ink); border: 1px solid rgba(var(--amber-rgb),.45); text-decoration: none; vertical-align: middle; }
.co-chip .ic { color: var(--amber); }
.co-req { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-3); overflow: hidden; }
.co-req-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.co-req-h b { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; }
.co-req-h b .ic { color: var(--amber); }
.co-req-h .btn { display: inline-flex; align-items: center; gap: 5px; }
.co-req pre { margin: 0; padding: 12px 14px; font: 13px/1.6 var(--font-num); white-space: pre-wrap; color: var(--ink); }
.co-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.co-actions .btn { display: inline-flex; align-items: center; gap: 5px; }
.co-matrix th.num, .co-matrix td.num { text-align: center; white-space: nowrap; }
.co-matrix th .ic { vertical-align: -3px; }
.co-matrix td.num a { font-weight: 800; }
.co-matrix tr.co-none td { background: rgba(229,73,58,.06); }
.co-helpers { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 18px; }
.co-card { border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); padding: 16px; }
.co-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 16px; }
.co-card h3 .ic { color: var(--amber); }
.co-card > p { font-size: 13px; margin: 0 0 12px; }
.co-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.co-wp { flex: 1; min-width: 160px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; }
.co-wp small { color: var(--ink-faint); font-weight: 600; }
.co-row select { max-width: 220px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--field-bg); color: var(--ink); }
.co-autofilled { box-shadow: 0 0 0 3px rgba(63,179,127,.45) !important; transition: box-shadow .3s; }

/* 2026-09-29, §98: құн және амортизация */
.av-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.av-kpi { border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.av-kpi span { font-size: 12px; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.av-kpi b { font: 800 22px var(--font-num); }
.av-kpi small { color: var(--ink-faint); font-size: 12px; }
.av-mods { font-size: 12.5px; color: var(--ink-soft); }
.av-mods span { display: inline-block; margin-right: 10px; white-space: nowrap; }
.av-chip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; padding: 9px 14px; border-radius: 12px; border: 1px solid rgba(var(--amber-rgb),.35); background: rgba(var(--amber-rgb),.07); font-size: 13.5px; }
.av-chip .ic { color: var(--amber); }

/* §100: Telegram бот баптауы */
.bot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.bot-grid .co-card { margin: 0; }
.bot-howto { margin: 0; padding-left: 20px; line-height: 1.55; font-size: 14px; }
.bot-howto li { margin-bottom: 6px; }
.bot-howto code { white-space: nowrap; word-break: normal !important; }
.bot-howto code, .bot-grid code { background: var(--field-bg, rgba(127,127,127,.12)); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; word-break: break-all; }
.bot-form label { display: block; font-size: 13px; color: var(--ink-soft); }
.bot-form input[type=password], .bot-form input[type=text] { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--field-bg); color: var(--ink); font-size: 14px; }
.bot-status { display: grid; gap: 6px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 13.5px; }
.bot-status > div { display: flex; justify-content: space-between; gap: 10px; }
.bot-status span { color: var(--ink-soft); }
.bot-status b { text-align: right; word-break: break-all; }
.bot-status b.ok { color: var(--green, #2e9e5b); }
.bot-status b.warn { color: var(--amber, #e2a53a); }
.bot-linked { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.badge-ok { display: inline-flex; align-items: center; gap: 5px; background: rgba(46,158,91,.15); color: var(--green, #2e9e5b); border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 600; }

/* ============================================================
   2026-09-30, §103: беттер арасындағы ауысу және батырма анимациялары.
   1) View Transitions (Chrome/Edge 126+, Safari 18.2+): сайдбар, жоғарғы
      жолақ, төменгі док орнында тұрады — тек мазмұн жұмсақ ауысады;
      «Артқа» басқанда кері бағытта. Қолдамайтын браузерде — кетерде
      мазмұн бәсеңдейді (html.is-leaving), келгенде бұрынғы «fade-up».
   2) Батырмалар: hover-де көтерілу, басқанда «басылу», толқын (ripple),
      негізгі батырмада жылтыр «жарқыл», иконка қозғалысы.
   prefers-reduced-motion қосулы болса — бәрі өшеді.
   ============================================================ */
@view-transition { navigation: auto; }
.admin-sidebar { view-transition-name: si-sidebar; }
.admin-topbar { view-transition-name: si-topbar; }
.app-dock { view-transition-name: si-dock; }
.site-header { view-transition-name: si-header; }
html.ts-switching .admin-sidebar, html.ts-switching .admin-topbar, html.ts-switching .app-dock, html.ts-switching .site-header { view-transition-name: none; }
::view-transition-group(si-sidebar), ::view-transition-group(si-topbar), ::view-transition-group(si-dock), ::view-transition-group(si-header) { animation-duration: 0s; }
::view-transition-old(root) { animation: si-vt-out .2s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: si-vt-in .38s cubic-bezier(.16,1,.3,1) both; }
@keyframes si-vt-out { to { opacity: 0; transform: translateX(-24px) scale(.985); } }
@keyframes si-vt-in { from { opacity: 0; transform: translateX(36px) scale(.985); } }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: si-vt-out-back; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: si-vt-in-back; }
@keyframes si-vt-out-back { to { opacity: 0; transform: translateX(24px) scale(.985); } }
@keyframes si-vt-in-back { from { opacity: 0; transform: translateX(-36px) scale(.985); } }
html:active-view-transition-type(reload)::view-transition-old(root) { animation: si-vt-fade-out .15s ease both; }
html:active-view-transition-type(reload)::view-transition-new(root) { animation: si-vt-fade-in .25s ease both; }
@keyframes si-vt-fade-out { to { opacity: 0; } }
@keyframes si-vt-fade-in { from { opacity: 0; } }
/* Тақырып ауысқанда — жоғарғы оң жақтан дөңгеленіп «құйылу» */
html.ts-switching::view-transition-old(root) { animation: none; }
html.ts-switching::view-transition-new(root) { animation: si-ts-reveal .7s cubic-bezier(.4,0,.2,1) both; }
@keyframes si-ts-reveal { from { clip-path: circle(0% at 92% 4%); } to { clip-path: circle(150% at 92% 4%); } }
/* View Transitions бар кезде ішкі «fade-up» қайталанбасын */
html.vt .admin-content > * { animation: none; }
/* Қолдамайтын браузерлер: кетерде мазмұн бәсеңдейді */
main.wrap, main.wrap-wide { transition: opacity .18s ease, transform .18s ease, filter .18s ease; }
html.is-leaving main.wrap, html.is-leaving main.wrap-wide { opacity: .25; transform: translateY(8px) scale(.995); filter: blur(1px); }

/* --- Батырмалар --- */
.btn { position: relative; isolation: isolate; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.96); transition-duration: .06s; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.35); }
.btn svg, .btn .ic { transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.btn:hover svg, .btn:hover .ic { transform: translateY(-1px) scale(1.12); }
.btn-primary { overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%); transform: translateX(-130%); }
.btn-primary:hover::after { transform: translateX(130%); transition: transform .7s ease; }
.btn-primary:hover { box-shadow: 0 8px 22px -6px rgba(var(--accent-rgb),.65); }
.btn-ghost:hover { background: rgba(var(--fg-rgb),.05); }
.btn:disabled, .btn[disabled] { transform: none !important; }
/* Толқын (ripple) — assets/… footer.php-тегі скрипт қосады */
.si-ripple-host { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
.si-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); animation: si-ripple .6s cubic-bezier(.2,.7,.3,1) forwards; }
.btn-primary .si-ripple { background: #fff; opacity: .35; }
@keyframes si-ripple { to { transform: scale(1); opacity: 0; } }
.admin-nav-item, .app-dock-item, .tab-chip, .ts-opt, .lang-btn, .ps-item { position: relative; }
.admin-nav-item:active, .app-dock-item:active, .tab-chip:active, .lang-btn:active, .ps-item:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.is-leaving main.wrap, html.is-leaving main.wrap-wide { opacity: 1; transform: none; filter: none; }
  .btn:hover, .btn:active { transform: none; }
  .btn-primary::after, .si-ripple, .ts-pop, .ts-opt { animation: none !important; transition: none !important; }
}

/* §103: сайдбар пункттері тек сессиядағы бірінші бетте «кіреді», кейін — тыныш (беттер ауысқанда сайдбар жыпылықтамайды) */
html.nav-seen .admin-nav .admin-nav-item, html.nav-seen .admin-nav-bottom .admin-nav-item { animation: none; opacity: 1; transform: none; }

/* ============================================================
   2026-10-01, §104: «Есептер» бөлімі — қойындылар және ықшам блоктар
   ============================================================ */
.rpt-head { margin-bottom: 10px; }
.rtabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px; margin: 0 0 14px; border-radius: 14px; background: rgba(var(--fg-rgb),.04); border: 1px solid var(--line); scrollbar-width: none; }
.rtabs::-webkit-scrollbar { display: none; }
.rtab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px; color: var(--ink-soft); text-decoration: none; font-weight: 700; font-size: 13.5px; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.rtab:hover { background: rgba(var(--fg-rgb),.06); color: var(--ink); }
.rtab.active { background: var(--navy); color: #fff; box-shadow: 0 4px 14px -6px rgba(var(--accent-rgb),.7); }
.rpt-sub { margin: -4px 0 16px; }
.rpt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.rpt-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass-bg, var(--paper-2)); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; transition: transform .15s ease, border-color .15s ease; }
.rpt-chip:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.5); }
.rpt-chip b { color: var(--navy); font-family: var(--font-num); }
.rpt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; align-items: start; }
.rpt-grid .related-card { margin: 0; }
.rpt-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.rpt-row a { color: var(--navy); text-decoration: none; font-weight: 700; }
.rpt-more summary { cursor: pointer; padding: 8px 0 2px; font-size: 13px; font-weight: 700; color: var(--ink-soft); list-style: none; }
.rpt-more summary::-webkit-details-marker { display: none; }
.rpt-more summary::before { content: '▸ '; }
.rpt-more[open] summary::before { content: '▾ '; }
.rpt-bar { display: grid; grid-template-columns: 110px 1fr 40px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.rpt-bar i { display: block; height: 12px; border-radius: 6px; background: rgba(var(--fg-rgb),.07); overflow: hidden; }
.rpt-bar b { display: block; height: 100%; border-radius: 6px; background: var(--ok); animation: si-bar-grow .8s cubic-bezier(.2,.8,.2,1) both; }
.rpt-bar em { font-style: normal; font-weight: 700; text-align: right; font-family: var(--font-num); }
.rpt-bar a { color: var(--err); font-weight: 700; }
.rpt-note { font-size: 12px; margin: 6px 0 0; }
.rpt-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.rpt-filter select { flex: 1 1 180px; max-width: 280px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--field-bg); color: var(--ink); font: inherit; font-size: 13.5px; }
.rpt-allgood { margin: 4px 0 16px; padding: 10px 14px; border-radius: 12px; background: rgba(63,179,127,.12); border: 1px solid rgba(63,179,127,.35); color: var(--ok); font-weight: 700; font-size: 14px; }
a.kpi-tile { text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease; }
a.kpi-tile:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb),.45); }
.rpt-fold > summary { cursor: pointer; list-style: none; padding: 4px 0 10px; }
.rpt-fold > summary::-webkit-details-marker { display: none; }
.rpt-fold > summary small { font-size: 12px; font-weight: 500; }
@media (max-width: 560px) { .rpt-bar { grid-template-columns: 90px 1fr 34px; } .rpt-filter select { max-width: none; } }

/* §104: Автоматика беті */
.auto-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.auto-col { display: grid; gap: 16px; }
.auto-form fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; margin: 12px 0; }
.auto-form legend { font-weight: 700; font-size: 14.5px; padding: 0 6px; display: inline-flex; align-items: center; gap: 6px; }
.auto-form label { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; line-height: 1.35; cursor: pointer; font-size: 14px; }
.auto-form label input[type=checkbox] { margin-top: 2px; flex: none; width: 17px; height: 17px; accent-color: var(--amber); }
.auto-sub { margin: 4px 0 0 4px; padding-left: 14px; border-left: 2px solid var(--line); }
.auto-sub label { font-size: 13px; }
.auto-sub > .muted { font-size: 12.5px; }
.auto-switch { font-size: 15px; }
.auto-hour { flex-direction: row; align-items: center !important; gap: 10px !important; }
.auto-hour select { width: auto; }
.auto-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.auto-actions select { width: auto; max-width: 100%; }
.auto-inline { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; cursor: pointer; }
.auto-code { display: block; margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: rgba(127,127,127,.12); font-size: 12px; overflow-x: auto; white-space: nowrap; }
.auto-tg { background: rgba(var(--amber-rgb), .08); border: 1px solid rgba(var(--amber-rgb), .2); border-radius: 14px 14px 14px 4px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; }
.auto-tg-kb { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.auto-tg-kb span { flex: 1 1 auto; text-align: center; padding: 6px 10px; border-radius: 8px; background: rgba(127,127,127,.14); font-size: 12.5px; font-weight: 600; }
.auto-files { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.auto-files li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px; border-radius: 8px; }
.auto-files li > a:first-child { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.auto-files li .btn { margin-left: auto; }
.auto-files li.is-new { background: rgba(var(--amber-rgb), .12); }
.auto-runs { width: 100%; border-collapse: collapse; }
.auto-runs td { padding: 7px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-size: 13.5px; }
.auto-runs summary { cursor: pointer; }
.auto-log { margin: 6px 0; padding-left: 18px; font-size: 13px; }
.auto-log li { margin: 2px 0; }
.auto-fixes { width: 100%; border-collapse: collapse; font-size: 13px; }
.auto-fixes td { padding: 5px 6px; border-bottom: 1px solid var(--line-soft); }
.auto-result { margin-bottom: 16px; }
.nowrap { white-space: nowrap; }
@media (max-width: 860px) { .auto-grid { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .rtabs { flex-wrap: wrap; } } /* §104: 8 қойынды — үлкен экранда жасырылмасын */

/* §105: Деректер және сақтық көшірме */
.bk-ok { color: var(--ok, #16a34a); font-size: 13.5px; margin: 0 0 6px; }
.bk-warn { color: var(--danger, #dc2626); font-size: 13.5px; }
.bk-parts td.num { text-align: right; color: var(--ink-soft); }
.bk-total td { border-bottom: 0 !important; }
.bk-pre { white-space: pre-wrap; font-size: 12px; max-height: 160px; overflow: auto; }
.bk-progress { margin: 10px 0; display: grid; gap: 6px; font-size: 13.5px; }
.bk-bar { height: 10px; border-radius: 99px; background: rgba(127,127,127,.18); overflow: hidden; }
.bk-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--amber), var(--accent2, var(--amber))); border-radius: 99px; transition: width .4s ease; }
.bk-form label { margin-bottom: 10px; }
.bk-row { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 6px; }
.bk-row select { width: auto; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--field-bg); color: var(--ink); }
.bk-code-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 6px; }
.bk-code { width: 100%; height: 220px; box-sizing: border-box; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #151922; color: #d7dde8; border-radius: 10px; padding: 10px 12px; border: 1px solid var(--line); white-space: pre; }
.bk-steps li { margin-bottom: 8px; }
/* §104: бот нұсқаулығы */
.bot-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 8px; }
.bot-guide-grid > div { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; background: rgba(var(--fg-rgb), .02); }
.bot-guide-grid h4 { margin: 0 0 8px; font-size: 14.5px; }
.bot-guide-grid ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.bot-guide-grid li { margin-bottom: 5px; }
.bot-guide-grid code { background: var(--field-bg, rgba(127,127,127,.12)); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }
.site-ver { opacity: .6; margin-left: 4px; font-size: 12px; } /* §107 */
/* §107: жаңарту беті */
.upd-drop { display: flex; align-items: center; justify-content: center; text-align: center; padding: 26px 14px; border: 2px dashed var(--line); border-radius: 14px; cursor: pointer; transition: border-color .2s, background .2s; margin-top: 10px; }
.upd-drop:hover, .upd-drop.over { border-color: var(--amber); background: rgba(var(--amber-rgb), .06); }
.upd-drop input { display: none; }
.upd-drop span { display: inline-flex; align-items: center; gap: 8px; }
.upd-sum { margin-top: 12px; font-size: 14px; }
.upd-sum p { margin: 6px 0; }
.bk-restore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.bk-restore-grid > div { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; }
.bk-restore-grid h4 { margin: 0 0 8px; font-size: 14px; }
.auto-files li form { display: inline; }
.agent-link { display: flex; gap: 6px; } .agent-link input { width: 170px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--field-bg); color: var(--ink); }
/* §107: жөндеу, жиынтық */
.rep-card, .kit-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; background: var(--paper-2); }
.rep-open { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.rep-overdue { border-left: 3px solid var(--danger, #dc2626); padding-left: 10px; }
tr.rep-overdue td:first-child { border-left: 3px solid var(--danger, #dc2626); }
.rep-close form, .rep-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 8px; }
.rep-form label { display: flex; flex-direction: column; font-size: 12.5px; color: var(--ink-soft); gap: 3px; }
.rep-form input[type=text], .rep-form input[type=date], .rep-close input, .rep-close select, .kit-edit input[type=text], .kit-edit input[type=number], .kit-edit select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--field-bg); color: var(--ink); font-size: 13.5px; }
.rep-wide { flex: 1 1 240px; } .rep-wide input { width: 100%; box-sizing: border-box; }
.rep-close summary, .rep-new summary { list-style: none; cursor: pointer; display: inline-flex; }
.rep-close summary::-webkit-details-marker, .rep-new summary::-webkit-details-marker { display: none; }
.kit-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.kit-items { display: flex; flex-wrap: wrap; gap: 6px; }
.kit-item { padding: 3px 9px; border-radius: 99px; font-size: 12.5px; border: 1px solid var(--line); }
.kit-item.ok { color: var(--ok, #16a34a); border-color: rgba(22,163,74,.35); }
.kit-item.miss { color: var(--danger, #dc2626); border-color: rgba(220,38,38,.35); }
.kit-row1 { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 8px; }
.kit-row1 label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink-soft); }
.kit-items-t input, .kit-items-t select { width: 100%; box-sizing: border-box; }
.price-search { display: flex; gap: 8px; margin: 0 0 16px; max-width: 640px; }
.price-search input { flex: 1; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--field-bg); color: var(--ink); font-size: 14px; }
.rep-form label.auto-inline { flex-direction: row; align-items: center; color: var(--ink); font-size: 13.5px; padding-bottom: 8px; }

/* ============================================================
   §108: телефон (iPhone/Android) бейімделуі — ештеңе өз блогынан
   шықпауы керек. Сыймайтын кесте/қатар өз ішінде көлденең айналады
   (assets/js/mobile.js сыймағандарын өзі табады), шетінде «тағы бар»
   деген бәсең градиент көрінеді.
   ============================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
main img, main video, main iframe, main canvas { max-width: 100%; }
main img:not([width]):not([height]) { height: auto; }
.x-scroll, .x-scroll-auto {
  overflow-x: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  max-width: 100%; scrollbar-width: thin;
}
.x-scroll { margin-bottom: 12px; }
.x-scroll > table { margin-bottom: 0; }
/* «Тағы бар» белгісі — айналатын блоктың шеттері бәсеңдейді */
.xs-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
.xs-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px); mask-image: linear-gradient(90deg, transparent, #000 30px); }
.xs-l.xs-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent); }
/* Батырма/форма бар кесте ұяшығы кесілмесін (бұрын ellipsis жасырып тастайтын) */
table.data-table td:has(form, .btn, .badge-tag, select, input) { overflow: visible; max-width: none; }
.req-decide-form { flex-wrap: wrap; min-width: 270px; }
.req-decide-form input[type=text] { flex: 1 1 100%; width: auto !important; }
.req-decide-form .btn { flex: 1 1 auto; padding: 7px 10px; white-space: nowrap; }
.pagination { flex-wrap: wrap; }

@media screen and (max-width: 760px) {
  body { overflow-x: clip; }
  .wrap, .wrap-wide { padding-left: 14px; padding-right: 14px; }
  /* Ұзын сөз/сілтеме/ID блоктан шықпасын */
  main p, main li, main h1, main h2, main h3, main label, main dd, main dt, main small,
  .co-card, .detail-card, .form-msg, .df-val, .page-sub { overflow-wrap: break-word; }
  main pre, main code { white-space: pre-wrap; word-break: break-word; }
  pre { max-width: 100%; overflow-x: auto; }
  /* Карточкалар мен бөлімдер — ені экраннан аспасын */
  .co-card, .detail-card, .dash-widget, .form-card, .card, section { min-width: 0; max-width: 100%; }
  .page-head h1 { font-size: clamp(21px, 6.4vw, 28px); line-height: 1.2; }
  /* Кестелер — өз қорабында айналады */
  table.auto-runs td, table.auto-fixes td { word-break: break-word; }
  /* Әрекет қатарлары — бір жолға сыймаса келесі жолға түседі */
  .auto-actions, .toolbar, .page-head, .view-head, .kit-row1, .rep-form, .bk-actions, .upd-actions { flex-wrap: wrap; }
  .kit-row1 { grid-template-columns: 1fr !important; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { min-width: 0; }
  .role-cards { grid-template-columns: 1fr; }
  .role-card input { max-width: 100%; }
  .auto-log { padding-left: 16px; }
  /* Модальді терезелер — экранға сыйсын */
  dialog, .modal, .modal-box { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto; }
  /* Қойындылар қатары айналатын болсын (қысылмасын) */
  .rtabs, .tabs, .tab-row, .detail-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .rtabs > *, .tabs > *, .tab-row > *, .detail-tabs > * { flex: 0 0 auto; }
}
@media screen and (max-width: 380px) {
  .kpi-row, .dash-kpi-row { grid-template-columns: 1fr 1fr; }
  .app-dock-label { font-size: 9.5px; }
}
/* iPhone: 16px-тен кіші өріс фокуста бетті үлкейтіп жібереді — болдырмаймыз */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 760px) { input, select, textarea { font-size: 16px !important; } }
}
@media screen and (max-width: 760px) { .app-dock-row.kb { transform: translateY(calc(100% + 14px)); opacity: 0; } }
@media screen and (max-width: 900px) and (orientation: landscape) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } }
table.data-table .attest-actions { flex-wrap: nowrap; } /* §108: кестеде «Бар/Жоқ» бір қатарда */
@media screen and (max-width: 760px) {
  /* §108: бетте жазылған (inline) flex-қатарлар сыймаса келесі жолға түседі */
  main [style*="display:flex"]:not([style*="overflow"]):not([style*="nowrap"]),
  main [style*="display: flex"]:not([style*="overflow"]):not([style*="nowrap"]) { flex-wrap: wrap; }
  main input[type=date], main input[type=datetime-local], main input[type=month] { min-width: 0; max-width: 100%; }
}

/* §108: баспаға шығарғанда — док, мәзір парағы, айналу белгілері мүлде жоқ */
@media print {
  .app-dock-row, .app-fab, .it-sheet, .it-sheet-backdrop, .admin-sidebar, .admin-topbar, .admin-sidebar-backdrop, .page-progress, .aurora-blob { display: none !important; }
  .x-scroll, .x-scroll-auto { overflow: visible !important; }
  .xs-l, .xs-r { -webkit-mask-image: none !important; mask-image: none !important; }
  .wrap, .wrap-wide { padding-bottom: 0 !important; }
  .admin-main { margin-left: 0 !important; }
}

/* ============ §109: сүзгі жолағы, артқа батырмасы, иелер тарихы ============ */
.field[hidden] { display: none !important; }
.flt-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--fg-rgb), .035); border: 1px solid var(--line); }
.flt-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 1 200px; }
.flt-item > span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-faint, #8a857f); }
.flt-item select { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); font-size: 13.5px; }
.flt-item.flt-dir { flex: 0 0 120px; }
.flt-reset { align-self: flex-end; }
@media screen and (max-width: 760px) {
  .flt-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
  .flt-item { flex: none; }
  .flt-reset { grid-column: 1 / -1; justify-self: start; }
}
.m-grp { margin: 14px 2px 6px; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); letter-spacing: .02em; }
.mobile-row-list .m-grp:first-child { margin-top: 0; }
.nav-back { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; padding: 4px 10px 4px 6px; border-radius: 999px; border: 1px solid var(--line); background: rgba(var(--fg-rgb), .04); color: var(--ink) !important; font-weight: 700; text-decoration: none !important; font-size: 12.5px; transition: background .15s ease, transform .15s ease; }
.nav-back:hover { background: rgba(var(--accent-rgb), .12); }
.nav-back:active { transform: scale(.95); }
.owner-history { padding: 10px 12px; border-radius: 10px; background: rgba(var(--fg-rgb), .04); border: 1px dashed var(--line); font-size: 13.5px; line-height: 1.6; }
.owner-hist-list { margin: 0; padding-left: 20px; }
.owner-hist-list li { margin: 2px 0; }
@media print { .nav-back, .flt-bar { display: none !important; } }
/* §109: техника саны есебі */
.fleet-sec { margin-bottom: 16px; }
.fleet-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.fleet-cat { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--fg-rgb), .03); color: var(--ink); text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.fleet-cat:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .45); }
.fc-h { display: flex; align-items: center; gap: 7px; }
.fc-h em { margin-left: auto; font-style: normal; font-size: 20px; font-weight: 800; }
.fc-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: rgba(var(--fg-rgb), .07); }
.fc-bar i { display: block; min-width: 4px; }
.fs-ok, .fl-ok::before { background: #3fb37f; } .fs-warn, .fl-warn::before { background: #e2a53a; } .fs-idle, .fl-idle::before { background: #8a8f9c; } .fs-off, .fl-off::before { background: #d6453a; }
.fc-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--ink-soft); }
.fc-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.fleet-kpis .fleet-st-ok b { color: #3fb37f; } .fleet-kpis .fleet-st-warn b { color: #e2a53a; } .fleet-kpis .fleet-st-off b { color: #d6453a; }
.fleet-t th.num, .fleet-t td.num { text-align: center; }
.lg-pc { font-size: 12.5px; margin-bottom: 4px; } .login-log td { vertical-align: top; } .ua-raw { font-size: 10.5px; }
/* §109: қойма көлемі */
.st-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
.st-donut-wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.st-donut { width: 180px; height: 180px; flex: 0 0 auto; }
.st-donut circle { transition: stroke-width .2s ease; }
.st-donut circle:hover { stroke-width: 32; }
.st-d-big { font-size: 17px; font-weight: 800; fill: var(--ink); }
.st-d-sm { font-size: 11px; fill: var(--ink-faint, #8a857f); }
.st-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1 1 200px; min-width: 0; }
.st-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 13px; }
.st-legend i { width: 12px; height: 12px; border-radius: 4px; }
.st-legend em { font-style: normal; color: var(--ink-faint); font-size: 12px; min-width: 34px; text-align: right; }
.st-legend-inline { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.st-legend-inline li { grid-template-columns: 10px minmax(0, 1fr) auto; }
.st-side { display: grid; gap: 14px; }
.st-disk-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; margin-bottom: 6px; }
.st-disk-bar, .st-stack { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: rgba(var(--fg-rgb), .08); }
.st-disk-bar i { display: block; background: #3fb37f; border-radius: 99px; } .st-disk-bar i.warn { background: #e2a53a; } .st-disk-bar i.bad { background: #d6453a; }
.st-stack { margin: 6px 0 8px; } .st-stack i { display: block; }
.st-spark { width: 100%; height: 110px; display: block; margin-top: 6px; }
.st-sp-fill { fill: rgba(var(--accent-rgb), .14); } .st-sp-line { fill: none; stroke: var(--navy, #dd2a1b); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.st-sp-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-faint); }
.st-h4 { margin: 18px 0 8px; font-size: 14px; }
.st-bars { display: grid; gap: 7px; }
.st-bar-row { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) 110px; gap: 10px; align-items: center; font-size: 13px; }
.st-bl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-bt { height: 10px; border-radius: 99px; background: rgba(var(--fg-rgb), .06); overflow: hidden; }
.st-bt i { display: block; height: 100%; border-radius: 99px; animation: st-grow .8s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
@keyframes st-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.st-bv { text-align: right; } .st-bv small { display: block; color: var(--ink-faint); font-size: 11px; }
@media screen and (max-width: 900px) { .st-top { grid-template-columns: 1fr; } }
@media screen and (max-width: 560px) { .st-bar-row { grid-template-columns: minmax(0, 1fr) 90px; } .st-bt { grid-column: 1 / -1; grid-row: 2; } }
/* §109: агент */
.agent-cfg { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.agent-cfg label:not(.auto-inline) { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.ag-bt { display: flex; } .ag-bt i { animation: none; }
.ag-rx { background: #3fa7b3; border-radius: 99px 0 0 99px; } .ag-tx { background: #e2a53a; border-radius: 0 99px 99px 0; }
.ag-daily { display: flex; align-items: flex-end; gap: 3px; height: 70px; margin-top: 14px; padding-top: 6px; border-top: 1px dashed var(--line); }
.ag-daily i { flex: 1; background: linear-gradient(180deg, rgba(var(--accent-rgb), .9), rgba(var(--accent-rgb), .35)); border-radius: 4px 4px 0 0; min-width: 3px; }
/* §109: сайт баптаулары */
.ss-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.ss-hub-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--fg-rgb), .03); color: var(--ink); text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.ss-hub-item:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .45); }
.ss-hub-ic { flex: 0 0 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .14); color: var(--navy); }
.ss-hub-item small { display: block; color: var(--ink-faint); font-size: 12px; margin-top: 2px; }
.ss-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 14px; }
.ss-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.ss-item select { max-width: 150px; }
.ss-dock, .ss-defaults { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.ss-dock label, .ss-defaults > label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.ss-rtabs { flex-basis: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
/* §109: жаңарту беті */
.upd-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.upd-compare > div { padding: 12px 14px; border-radius: 12px; background: rgba(var(--fg-rgb), .04); border: 1px solid var(--line); }
.upd-compare > div:last-child { border-color: rgba(63, 179, 127, .45); background: rgba(63, 179, 127, .07); }
.upd-compare p { margin: 4px 0 0; font-size: 13.5px; }
.upd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.upd-step { position: relative; padding: 14px 14px 12px 52px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--fg-rgb), .03); }
.upd-step p { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
.upd-n { position: absolute; left: 12px; top: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(150deg, rgba(var(--accent-rgb), .95), rgba(var(--accent-rgb), .6)); }
@media screen and (max-width: 760px) { .upd-compare, .upd-steps { grid-template-columns: 1fr; } }
table.data-table.login-log td { white-space: normal; max-width: 320px; overflow: visible; } .lg-pc small { overflow-wrap: anywhere; }
/* §110: денсаулық, желі */
.hl-bar { display: inline-block; width: 70px; height: 7px; border-radius: 99px; background: rgba(var(--fg-rgb), .08); overflow: hidden; vertical-align: middle; }
.hl-bar i { display: block; height: 100%; background: #3fb37f; } .hl-bar i.warn { background: #e2a53a; } .hl-bar i.bad { background: #d6453a; }
a.kpi { text-decoration: none; color: inherit; }
.nm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.nm-card { margin: 0; }
.nm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nm-head h3 { margin: 0; font-size: 15px; }
.nm-mon { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.nm-mon-f select { max-width: 170px; font-size: 12.5px; padding: 5px 8px; }
.nm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nm-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(var(--fg-rgb), .03); }
.nm-name { min-width: 0; } .nm-name b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-name small, .nm-meta small { display: block; font-size: 11px; color: var(--ink-faint); }
.nm-meta { text-align: right; }
.nm-act { display: flex; gap: 2px; } .nm-act form { margin: 0; }
.nm-dot { width: 10px; height: 10px; border-radius: 50%; background: #8a8f9c; }
.nm-dot.nm-up { background: #3fb37f; box-shadow: 0 0 0 3px rgba(63, 179, 127, .2); }
.nm-dot.nm-down { background: #d6453a; box-shadow: 0 0 0 3px rgba(214, 69, 58, .25); animation: nmPulse 1.6s ease-in-out infinite; }
@keyframes nmPulse { 50% { box-shadow: 0 0 0 6px rgba(214, 69, 58, .08); } }
.nm-add { margin-top: 10px; } .nm-add summary { cursor: pointer; font-size: 13px; color: var(--navy); font-weight: 700; }
.nm-add-f { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.nm-add-f button { grid-column: 1 / -1; justify-self: start; }
@media screen and (max-width: 760px) { .nm-grid { grid-template-columns: 1fr; } .nm-add-f { grid-template-columns: 1fr; } }

/* ===== §110: Helpdesk ===== */
.hd-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; margin: 6px 0 14px; }
.hd-st { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(var(--fg-rgb),.07); white-space: nowrap; }
.hd-st.st-new { background: rgba(59,130,246,.15); color: #3b82f6; }
.hd-st.st-prog { background: rgba(var(--accent-rgb),.15); color: var(--amber); }
.hd-st.st-wait { background: rgba(168,85,247,.14); color: #a855f7; }
.hd-st.st-done { background: rgba(34,197,94,.15); color: #16a34a; }
.hd-st.st-closed { color: var(--ink-soft); }
.hd-sla { font-size: 12px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.hd-sla.warn { color: var(--amber); }
.hd-sla.bad { color: #ef4444; }
.hd-p-urg td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.hd-p-high td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.hd-p-low { opacity: .85; }
.hd-table tbody tr { cursor: pointer; }
.hd-view { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.hd-side p { margin: 0 0 10px; font-size: 13.5px; }
.hd-side-f { display: grid; gap: 8px; margin-bottom: 12px; }
.hd-side-f label { display: grid; gap: 3px; font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.hd-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.hd-msg { max-width: 82%; align-self: flex-start; }
.hd-msg.mine { align-self: flex-end; text-align: right; }
.hd-bubble { display: inline-block; text-align: left; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--paper-2); border: 1px solid var(--line); font-size: 14px; line-height: 1.45; overflow-wrap: break-word; max-width: 100%; }
.hd-msg.mine .hd-bubble { border-radius: 16px 16px 4px 16px; background: rgba(var(--accent-rgb),.12); border-color: rgba(var(--accent-rgb),.3); }
.hd-msg.internal .hd-bubble { background: repeating-linear-gradient(135deg, rgba(234,179,8,.10) 0 10px, rgba(234,179,8,.04) 10px 20px); border-style: dashed; }
.hd-bubble img { display: block; max-width: 260px; max-height: 260px; border-radius: 10px; margin-top: 8px; }
.hd-msg > small { display: block; font-size: 11px; color: var(--ink-soft); margin: 2px 6px 0; }
.hd-sys { align-self: center; font-size: 12px; color: var(--ink-soft); background: rgba(var(--fg-rgb),.05); padding: 3px 12px; border-radius: 999px; text-align: center; }
.hd-reply { display: grid; gap: 8px; }
.hd-reply textarea { width: 100%; }
.hd-reply .actions-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: flex-end; }
.hd-file { cursor: pointer; }
.hd-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-list { display: grid; gap: 8px; }
.hd-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper-2); text-decoration: none; color: inherit; transition: transform .15s, border-color .15s; }
.hd-row:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.4); }
.hd-row-t { flex: 1; min-width: 0; }
.hd-rate { display: grid; gap: 10px; max-width: 560px; margin-bottom: 14px; }
.hd-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.hd-stars input { position: absolute; opacity: 0; pointer-events: none; }
.hd-stars label { font-size: 30px; color: rgba(var(--fg-rgb),.2); cursor: pointer; transition: color .15s, transform .15s; }
.hd-stars input:checked ~ label, .hd-stars label:hover, .hd-stars label:hover ~ label { color: #f59e0b; }
.hd-stars label:hover { transform: scale(1.15); }
@media screen and (max-width: 860px) {
  .hd-view { grid-template-columns: 1fr; }
  .hd-msg { max-width: 94%; }
  .hd-row { flex-wrap: wrap; }
  .hd-bubble img { max-width: 100%; }
}
.hd-h1 { display: flex; gap: 10px; align-items: flex-start; font-size: clamp(20px, 2.6vw, 28px) !important; line-height: 1.25; }
.hd-h1 svg { flex: none; margin-top: 4px; }
.hd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0 14px; }
.hd-cats .fault-kind { position: relative; display: inline-flex; }
.hd-btns { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: flex-end; }
.hd-rate .hd-btns { justify-content: flex-start; }
/* §110: шығын материалдары */
.cons-low td { background: rgba(239,68,68,.06); }
.cons-qty { font-weight: 800; font-size: 16px; }
.cons-qty.bad { color: #ef4444; }
.cons-move { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.cons-move input[type=number] { width: 58px; }
.cons-move select { max-width: 160px; }
.cons-move .cons-price { width: 80px; }
.cons-move .btn { min-width: 34px; font-weight: 800; font-size: 16px; padding: 4px 10px; }
.cons-in { color: #16a34a; } .cons-out { color: #ef4444; }
.cons-table details summary { cursor: pointer; }
/* §110: доступтар */
.acc-matrix th, .acc-matrix td { text-align: center; }
.acc-matrix th:first-child, .acc-matrix td:first-child { text-align: left; position: sticky; left: 0; background: var(--paper-2); z-index: 1; min-width: 180px; }
.acc-th { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 18px; }
.acc-th small { font-size: 10.5px; font-weight: 600; max-width: 90px; white-space: normal; line-height: 1.15; text-transform: none; letter-spacing: 0; }
.acc-th b { font-size: 11px; color: var(--ink-soft); }
.acc-cell { cursor: pointer; font-weight: 800; color: #16a34a; min-width: 64px; transition: background .15s; user-select: none; }
.acc-cell:hover { background: rgba(var(--accent-rgb),.10); }
.acc-cell.on { background: rgba(34,197,94,.12); }
.acc-cell.busy { opacity: .4; }
.acc-grp td { background: rgba(var(--fg-rgb),.04) !important; font-weight: 700; font-size: 12.5px; text-align: left !important; }
.acc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.acc-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--paper-2); display: grid; gap: 8px; }
.acc-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.acc-check li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; }
.acc-check form { margin: 0; }
.cons-move select { min-width: 140px; }
.cons-table td:last-child { min-width: 430px; }
/* §110: провайдер төлемдері */
.pay-grid th.cur { color: var(--amber); }
.pay-cell { text-align: center; font-weight: 800; cursor: pointer; min-width: 44px; transition: background .15s; }
.pay-cell.paid { background: rgba(34,197,94,.14); color: #16a34a; }
.pay-cell.late { background: rgba(239,68,68,.13); color: #ef4444; }
.pay-cell.soon { background: rgba(245,158,11,.15); color: #d97706; }
.pay-cell.future { opacity: .55; }
.pay-cell:hover { outline: 2px solid rgba(var(--accent-rgb),.5); outline-offset: -2px; }
.pay-cell.busy { opacity: .3; }
.pay-off td { opacity: .5; }
.pay-cfgs { display: grid; gap: 8px; }
.pay-cfg { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pay-cfg > b { min-width: 180px; align-self: center; }
.pay-cfg label { display: grid; gap: 2px; font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }
.pay-cfg input[type=number] { width: 70px; }
.pay-cell.na { opacity: .35; }
/* §110: IT бюджеті */
.bud-table td, .bud-table th { vertical-align: top; }
.bud-in { width: 110px; padding: 4px 8px !important; font-size: 13px; margin-bottom: 4px; }
.bud-f { font-weight: 700; }
.bud-table tfoot th { font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.bud-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bud-add input[type=text][name=amount] { width: 120px; }
.bud-add > input, .bud-add > select { width: auto !important; flex: 0 1 auto; }
.bud-add > input[type=date] { width: 150px !important; }
.bud-add > select { max-width: 200px; }
.bud-add > input[name=description] { flex: 1 1 220px; }
/* §110: AI */
.ai-ask { display: grid; gap: 10px; }
.ai-ask textarea { width: 100%; font-size: 15px; }
.ai-ex { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.ai-ex .chip { border: 1px solid var(--line); background: rgba(var(--fg-rgb),.04); color: var(--ink-soft); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.ai-ex .chip:hover { color: var(--ink); border-color: rgba(var(--accent-rgb),.5); }
.ai-answer { font-size: 16px; line-height: 1.5; padding: 12px 14px; border-radius: 14px; background: rgba(var(--accent-rgb),.08); border: 1px solid rgba(var(--accent-rgb),.25); margin-bottom: 10px; }
.ai-sql { white-space: pre-wrap; font-size: 12px; background: rgba(var(--fg-rgb),.05); padding: 10px; border-radius: 10px; overflow-x: auto; }
.btn.is-loading { opacity: .6; pointer-events: none; }
.hd-cats .fault-kind input { width: 1px !important; height: 1px; }
.hd-grid .field input[type=checkbox] { width: auto !important; }
/* §110.1: AnyDesk сессиясы — «Орындалды ма?» панелі */
.rs-panel { position: fixed; right: 18px; bottom: 18px; z-index: 900; width: 360px; max-width: calc(100vw - 24px); max-height: 70vh; overflow: auto;
  background: var(--paper-2); border: 1px solid rgba(var(--accent-rgb),.45); border-radius: 18px; padding: 12px 14px; box-shadow: 0 18px 50px -12px rgba(0,0,0,.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: rsIn .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes rsIn { from { transform: translateY(20px) scale(.96); opacity: 0; } }
.rs-panel.min { width: auto; padding: 8px 40px 8px 14px; cursor: pointer; }
.rs-pill { font-weight: 700; font-size: 13px; }
.rs-min { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--ink-soft); font-size: 16px; cursor: pointer; padding: 4px 6px; }
.rs-item { display: grid; gap: 8px; padding: 6px 0; }
.rs-item + .rs-item { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; }
.rs-item.busy { opacity: .5; pointer-events: none; }
.rs-h { font-size: 13.5px; padding-right: 22px; line-height: 1.35; }
.rs-t { color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.rs-q { font-weight: 800; font-size: 15px; }
.rs-cats { display: flex; flex-wrap: wrap; gap: 5px; }
.rs-cats button { border: 1px solid var(--line); background: rgba(var(--fg-rgb),.04); color: var(--ink-soft); border-radius: 999px; padding: 3px 9px; font-size: 11.5px; cursor: pointer; font-family: inherit; }
.rs-cats button.on { border-color: var(--amber); color: var(--amber); background: rgba(var(--accent-rgb),.12); }
.rs-note { width: 100%; }
.rs-btns { display: flex; gap: 8px; } .rs-btns .btn { flex: 1; justify-content: center; }
.rs-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 950; background: var(--paper-2); border: 1px solid var(--line); padding: 10px 16px; border-radius: 14px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); font-weight: 600; transition: opacity .5s; }
.rs-toast.out { opacity: 0; }
@media screen and (max-width: 760px) { .rs-panel { right: 12px; left: 12px; width: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } .rs-panel.min { left: auto; } .rs-toast { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } }
@media print { .rs-panel, .rs-toast { display: none !important; } }
/* §111: автоматты түгендеу */
.disc-tabs { flex-wrap: wrap; }
.disc-n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: rgba(var(--accent-rgb),.2); color: var(--amber); font-size: 11px; text-align: center; margin-left: 4px; }
.disc-inline { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.disc-inline select, .disc-inline input[type=text] { width: auto !important; max-width: 220px; }
.disc-cfg { display: grid; gap: 8px; margin-top: 10px; }
.prn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.prn-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--paper-2); display: grid; gap: 8px; }
.prn-card.off { opacity: .6; }
.prn-h { display: grid; gap: 2px; }
.prn-sup { display: grid; grid-template-columns: minmax(0, 1fr) 90px 44px; gap: 8px; align-items: center; font-size: 12.5px; }
.prn-sup span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prn-sup .hl-bar { width: 90px; }
.prn-f { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; }
/* §112: модульдер */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 8px; }
.mod-item { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 13.5px; }
.mod-item:has(input:checked) { border-color: rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.08); }
.mod-item input { width: auto !important; }

/* §113: компьютер карточкасындағы «Агент мәліметі» */
.ac-card{ margin:16px 0; padding:16px 18px; border-radius:16px; border:1px solid var(--line); background: var(--glass-bg, var(--paper-2)); }
.ac-empty{ font-size:13.5px; color: var(--ink-soft); }
.ac-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.ac-head h3{ margin:0; font-size:16px; display:flex; align-items:center; gap:10px; }
.ac-st{ font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; }
.ac-st.on{ background: rgba(22,163,74,.14); color:#16a34a; }
.ac-st.off{ background: rgba(var(--fg-rgb),.08); color: var(--ink-faint); }
.ac-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; }
.ac-grid > div{ padding:9px 11px; border-radius:12px; background: rgba(var(--fg-rgb),.04); min-width:0; }
.ac-grid span{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--ink-faint); margin-bottom:3px; }
.ac-grid b{ font-size:13.5px; word-break:break-word; }
.ac-grid b.ok{ color:#16a34a; } .ac-grid b.bad{ color:#dc2626; }
.ac-bar{ display:block; height:5px; border-radius:5px; background: rgba(var(--fg-rgb),.1); margin-top:6px; overflow:hidden; }
.ac-bar i{ display:block; height:100%; background: var(--amber); border-radius:5px; }
.ac-bar.bad i{ background:#dc2626; }
.ac-traffic{ display:grid; grid-template-columns: auto 1fr; gap:16px; align-items:end; margin-top:14px; }
.ac-tr-nums{ display:flex; gap:10px; flex-wrap:wrap; }
.ac-tr-nums > div{ padding:9px 12px; border-radius:12px; background: rgba(var(--accent-rgb),.07); min-width:110px; }
.ac-tr-nums span{ display:block; font-size:11px; font-weight:700; color: var(--ink-faint); text-transform:uppercase; }
.ac-tr-nums b{ display:block; font-size:17px; }
.ac-tr-nums small{ color: var(--ink-faint); font-size:11.5px; }
.ac-chart{ display:flex; align-items:flex-end; gap:4px; height:64px; padding:4px; border-radius:12px; background: rgba(var(--fg-rgb),.03); }
.ac-chart i{ flex:1; min-width:4px; border-radius:4px 4px 0 0; background: linear-gradient(180deg, var(--navy), var(--navy-2)); opacity:.85; }
.ac-warn{ grid-column:1 / -1; margin:0; color:#dc2626; font-weight:600; font-size:13px; }
.ac-soft{ margin-top:14px; }
.ac-soft summary{ cursor:pointer; font-size:14px; }
.ac-new{ color:#0284c7; font-weight:700; }
.ac-sw-q{ width:100%; margin:10px 0 6px; }
.ac-sw{ list-style:none; margin:0; padding:0; columns:2 280px; column-gap:18px; max-height:360px; overflow:auto; }
.ac-sw li{ break-inside:avoid; padding:4px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.ac-sw li small{ color: var(--ink-faint); }
.ac-sw li em{ font-style:normal; font-size:11px; font-weight:700; color:#0284c7; }
.ac-periph{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.ac-periph span{ font-size:12.5px; padding:4px 10px; border-radius:999px; background: rgba(var(--fg-rgb),.06); }
.ac-more{ margin:10px 0 0; font-size:12px; }
@media (max-width: 700px){ .ac-traffic{ grid-template-columns:1fr; } .ac-grid{ grid-template-columns:1fr 1fr; } }
.ac-bad{ color:#dc2626; font-weight:700; font-size:12px; } .ac-sw li.is-bad b{ color:#dc2626; }
/* §114: толық сипаттама */
.ac-spec{ margin-top:14px; }
.ac-spec summary{ cursor:pointer; font-size:14px; margin-bottom:8px; }
.ac-spec-t{ width:100%; border-collapse:collapse; font-size:13.5px; }
.ac-spec-t th{ text-align:left; vertical-align:top; width:190px; padding:8px 10px 8px 0; color: var(--ink-faint); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--line); }
.ac-spec-t td{ padding:8px 0; border-bottom:1px solid var(--line); line-height:1.55; }
.ac-list{ list-style:none; margin:2px 0 0; padding:0; }
.ac-list li{ padding:2px 0; }
.ac-list small, .ac-spec-t small{ color: var(--ink-faint); }
.ac-slots{ display:inline-flex; gap:3px; vertical-align:middle; margin-right:4px; }
.ac-slots i{ width:22px; height:9px; border-radius:2px; border:1px solid var(--line); background: rgba(var(--fg-rgb),.05); }
.ac-slots i.on{ background: linear-gradient(90deg, #16a34a, #22c55e); border-color:#16a34a; }
.ac-ok{ color:#16a34a; font-weight:600; }
.ac-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:12px; }
.ac-actions form{ display:inline; }
.ac-diff{ width:100%; padding:10px 12px; border-radius:12px; background: rgba(var(--accent-rgb),.07); font-size:13px; }
.ac-diff ul{ margin:6px 0 0; padding-left:18px; }
.ac-diff s{ color: var(--ink-faint); }
@media (max-width: 700px){ .ac-spec-t th{ display:block; width:auto; border:0; padding:8px 0 0; } .ac-spec-t td{ display:block; padding-top:2px; } }
/* §115: пайдаланушылар, атын ауыстыру */
.ac-users{ overflow-x:auto; }
.ac-users table{ width:100%; border-collapse:collapse; font-size:13px; }
.ac-users th{ text-align:left; font-size:11px; color: var(--ink-faint); text-transform:uppercase; padding:4px 8px 4px 0; border-bottom:1px solid var(--line); }
.ac-users td{ padding:6px 8px 6px 0; border-bottom:1px dashed var(--line); vertical-align:top; }
.ac-users tr.is-off td{ opacity:.55; }
.ac-adm{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background: rgba(220,38,38,.12); color:#dc2626; }
.ac-pend{ color: var(--amber); font-weight:600; font-size:13px; }
.ac-rename{ margin-top:6px; }
.ac-rename summary{ cursor:pointer; font-size:12.5px; color: var(--navy); font-weight:600; display:inline-block; }
.ac-rename form{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.ac-rename input[type=text]{ max-width:200px; text-transform:uppercase; }
.ac-rename small{ width:100%; }
.disc-uq{ display:flex; gap:8px; margin:0 0 12px; } .disc-uq input{ flex:1; max-width:380px; } .disc-ur{ padding:2px 0; } .disc-ur.is-off{ opacity:.55; }
.disc-ur{ white-space:normal; word-break:break-word; min-width:200px; }
/* §116: шығарылған күні */
.mk-main{ display:flex; align-items:center; gap:16px; margin-bottom:10px; }
.mk-big{ font-size:30px; font-weight:800; letter-spacing:-.5px; color: var(--amber); min-width:120px; }
.mk-src{ list-style:none; margin:0 0 10px; padding:0; font-size:13.5px; }
.mk-src li{ padding:6px 0; border-bottom:1px dashed var(--line); }
.mk-act{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.mk-act form{ display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; }
.mk-manual label{ display:inline-flex; gap:6px; align-items:center; font-size:13px; font-weight:600; }
.mk-note{ font-size:12px; margin:10px 0 0; }
/* §117: автоматты іске қосылу, құрылғылар */
.ac-task{ font-size:12.5px; margin-top:4px; color: var(--ink-faint); }
.ac-task.ok{ color:#16a34a; } .ac-task.bad{ color:#dc2626; font-weight:600; }
.ac-devs li{ padding:3px 0; }
.ac-dk{ display:inline-block; min-width:150px; color: var(--ink-faint); font-size:12.5px; }
.ac-bus{ font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px; background: rgba(var(--fg-rgb),.08); }
.ac-bus.bt{ background: rgba(37,99,235,.14); color:#3b82f6; }
.ac-head{ flex-direction:column; align-items:flex-start; }
/* §119: Қауіпсіздік / апгрейд */
.fl-ok{ color:#16a34a; } .fl-warn{ color:#d97706; } .fl-bad{ color:#dc2626; } .fl-muted{ color: var(--ink-faint); }
.fl-score{ display:inline-block; min-width:38px; text-align:center; padding:3px 8px; border-radius:999px; font-size:13px; background: rgba(var(--fg-rgb),.06); }
.fl-score.fl-ok{ background: rgba(22,163,74,.14); } .fl-score.fl-warn{ background: rgba(217,119,6,.14); } .fl-score.fl-bad{ background: rgba(220,38,38,.14); }
.fl-sec td.fl-c{ text-align:center; white-space:nowrap; }
.fl-item{ font-size:13px; padding:2px 0; }
.fl-help{ margin:8px 0 0; padding-left:18px; font-size:13.5px; line-height:1.6; }
.fl-checks{ list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:6px 16px; }
.fl-checks li{ font-size:13px; display:flex; gap:8px; align-items:flex-start; }
.fl-checks li small{ color: var(--ink-faint); }
table.data-table td.fl-wrap{ white-space: normal; max-width: 420px; min-width: 260px; overflow: visible; }
table.data-table td.fl-wrap small{ line-height:1.45; }
/* §120: Қашықтан әрекет */
.aa-form{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.aa-form select{ width:auto !important; min-width:220px; }
.aa-form .aa-arg{ width:auto !important; flex:1 1 220px; max-width:420px; }
.aa-hist{ list-style:none; margin:12px 0 0; padding:0; }
.aa-hist li{ font-size:13px; padding:5px 0; border-bottom:1px dashed var(--line); }
.aa-res{ color: var(--ink-soft); font-family: ui-monospace, Consolas, monospace; font-size:11.5px; }
.aa-hosts{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px; }
.aa-wp{ border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.aa-wp-h{ display:block; font-size:13.5px; font-weight:700; padding-bottom:6px; margin-bottom:4px; border-bottom:1px dashed var(--line); }
.aa-host{ display:block; font-size:13px; padding:3px 0; }
.aa-help{ margin-top:8px; }
/* §121: Сайттар мен домендер */
.sw-edit{ padding:8px 4px; }
.sw-form{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin:6px 0; }
.sw-form label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; color: var(--ink-soft); }
.sw-form label.auto-inline{ flex-direction:row; align-items:center; }
.sw-form input[type=text], .sw-form input[type=date]{ width:auto !important; min-width:160px; }
.sw-form .sw-wide{ flex:1 1 260px; } .sw-form .sw-wide input{ width:100% !important; }
.sw-renew{ padding-top:8px; border-top:1px dashed var(--line); align-items:center; }
.sw-renew label{ flex-direction:row; align-items:center; }
tr.is-muted td{ opacity:.55; }
.sw-renew select{ width:auto !important; min-width:150px; flex:0 0 auto; }
.sw-renew small{ flex-basis:100%; }
/* §122: Анықтамалық */
.kb-wrap{ max-width:860px; }
.kb-art{ background: var(--glass-bg, var(--paper-2)); border:1px solid var(--line); border-radius:16px; padding:20px 20px 16px; }
.kb-art h1{ font-size:22px; line-height:1.3; margin:6px 0 10px; }
.kb-cat{ font-size:11.5px; font-weight:700; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; }
.kb-sym{ color: var(--ink-soft); font-size:13.5px; margin:0 0 10px; }
.kb-intro, .kb-outro{ margin:12px 0; line-height:1.6; }
.kb-steps{ list-style:none; margin:14px 0 0; padding:0; }
.kb-step{ display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--line); }
.kb-n{ flex:0 0 32px; height:32px; border-radius:50%; background: var(--amber, #c8102e); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; }
.kb-sbody{ flex:1; min-width:0; line-height:1.6; }
.kb-img img{ display:block; max-width:100%; height:auto; margin-top:10px; border-radius:10px; border:1px solid var(--line); }
.kb-fb{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.kb-search{ display:flex; gap:8px; margin:12px 0; max-width:720px; } .kb-search input{ flex:1; }
.kb-cats{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.kb-cats a{ font-size:13px; padding:5px 12px; border-radius:999px; border:1px solid var(--line); text-decoration:none; color: var(--ink-soft); }
.kb-cats a.active{ background: rgba(var(--accent-rgb),.14); color: var(--ink); border-color: transparent; }
.kb-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; }
.kb-item{ display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:14px; border:1px solid var(--line); text-decoration:none; color:inherit; background: var(--glass-bg, var(--paper-2)); }
.kb-item:hover{ border-color: rgba(var(--accent-rgb),.5); }
.kb-tip{ font-size:13.5px; padding:10px 12px; border-radius:12px; background: rgba(var(--accent-rgb),.08); }
.kb-sugg{ margin-top:8px; padding:10px 12px; border-radius:12px; background: rgba(22,163,74,.1); font-size:14px; }
.kb-sugg [data-list]{ display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.hd-kb{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; padding:10px 12px; border-radius:12px; border:1px dashed var(--line); }
.kb-grid{ display:grid; grid-template-columns:1fr auto; gap:12px 16px; align-items:end; }
.kb-grid label{ display:flex; flex-direction:column; gap:5px; font-weight:600; font-size:13.5px; }
.kb-grid label small{ font-weight:400; }
.kb-grid .kb-full{ grid-column:1 / -1; } .kb-grid .kb-int{ flex-direction:row; font-weight:400; }
.kb-form textarea{ width:100%; }
.kb-estep{ border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin-bottom:10px; }
.kb-estep.is-active{ border-color: rgba(var(--accent-rgb),.6); }
.kb-estep-h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.kb-num{ width:28px; height:28px; border-radius:50%; background: var(--amber, #c8102e); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.kb-drop{ margin-top:8px; padding:10px; border:2px dashed var(--line); border-radius:12px; text-align:center; font-size:13px; color: var(--ink-soft); cursor:text; }
.kb-drop.is-over{ border-color: var(--amber, #c8102e); }
.kb-drop img{ max-width:100%; max-height:360px; border-radius:8px; display:block; margin:0 auto 6px; }
.kb-file{ text-decoration:underline; cursor:pointer; } .kb-file input{ display:none; }
.kb-del{ display:block; font-size:12px; margin-top:4px; }
@media (max-width:700px){ .kb-grid{ grid-template-columns:1fr; } .kb-art{ padding:16px 14px; } }
.net-adv{ list-style:none; margin:10px 0 6px; padding:0; } .net-adv li{ font-size:13.5px; padding:4px 0; }
.pp-bar{ margin:12px 0 0; display:flex; justify-content:flex-end; }
/* §123: Закуп барысы */
.proc-steps{ margin:4px 0 12px; padding-left:22px; } .proc-steps li{ padding:4px 0; font-size:14px; }
.proc-steps li.ok::marker{ color:#16a34a; font-weight:700; } .proc-steps li.ok{ color: var(--ink); }
.zf-bar{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin-bottom:14px; }
.zf-bar .flt-item{ flex:0 0 auto; }
.zf-dates{ display:flex; gap:6px; align-items:center; } .zf-dates input{ width:150px !important; }
.zf-bar select{ width:auto !important; min-width:140px; } .zf-q input{ width:220px !important; }

/* §124: қызметкер заттарын таңдап басқа адамға беру */
.xfer-top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 4px 0 12px; }
.xfer-all { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.xfer-group { border: 1px solid rgba(var(--fg-rgb),.10); border-radius: 14px; padding: 6px; margin-bottom: 10px; background: rgba(var(--fg-rgb),.02); }
.xfer-gh { display: flex; gap: 8px; align-items: center; padding: 6px 8px; cursor: pointer; }
.xfer-gh .rc-count { margin-left: auto; }
.xfer-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.xfer-row:hover { background: rgba(var(--fg-rgb),.05); }
.xfer-row.on { background: rgba(var(--accent-rgb, 220,38,38),.10); }
.xfer-row input, .xfer-gh input, .xfer-all input { width: 18px; height: 18px; flex: none; accent-color: var(--accent, #dc2626); }
.xfer-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.xfer-txt small { color: var(--muted, #888); font-size: 12px; overflow-wrap: anywhere; }
.xfer-open { flex: none; text-decoration: none; opacity: .6; padding: 2px 6px; }
.xfer-open:hover { opacity: 1; }
.xfer-bar { position: sticky; bottom: 8px; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px; margin-top: 12px; border-radius: 14px; background: var(--paper-2, #fff); border: 1px solid var(--line, rgba(var(--fg-rgb),.14)); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.xfer-cnt { align-self: center; white-space: nowrap; }
.xfer-to { flex: 1 1 260px; min-width: 0; }
.xfer-to select { width: 100%; }
.xfer-to .emp-select-search { width: 100%; }
@media (max-width: 640px) { .xfer-bar { bottom: 70px; padding: 10px; gap: 8px; align-items: center; } .xfer-to { order: 3; flex-basis: 100%; } .xfer-bar .btn { margin-left: auto; } }
.emp-flt { display: inline-flex; gap: 6px; flex: 2 1 360px; max-width: 480px; align-items: stretch; }
.emp-flt .emp-select-search { margin-bottom: 0; flex: 1 1 140px; min-width: 0; }
.rpt-filter .emp-flt select { flex: 1 1 180px; max-width: none; min-width: 0; }
#xfer { scroll-margin-top: 140px; }
.xfer-bar .btn:disabled { opacity: .45; cursor: not-allowed; }
.xfer-act { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; align-self: center; font-size: 13px; }

/* §127: қойма, камерамен түсіру, Закуп */
.stock-hint { display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; background: rgba(47,158,106,.12); color: var(--ok, #2f7d52); border: 1px solid rgba(47,158,106,.3); }
.stock-hint a { color: inherit; font-weight: 700; }
.ac-card .stock-hint { margin: 4px 0 10px; }
.stock-tabs { flex-wrap: wrap; margin-bottom: 10px; }
.stock-tabs a b { margin-left: 4px; opacity: .75; }
.proc-cam { font-size: 12.5px; margin-left: 6px; white-space: nowrap; }
.scan-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.scan-add { font-size: 16px; padding: 12px 20px; }
.scan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; min-height: 80px; }
.scan-page { position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.scan-page img { display: block; width: 100%; height: 190px; object-fit: contain; background: #f4f4f4; }
.scan-page > b { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.65); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.scan-act { display: flex; justify-content: space-between; padding: 4px; gap: 4px; }
.scan-act button { flex: 1; border: 1px solid var(--line); background: var(--paper-2); border-radius: 8px; padding: 6px 0; cursor: pointer; color: var(--ink); }
.scan-foot { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.scan-foot .muted { margin-right: auto; }
.pr-month { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 210px; align-items: end; padding-top: 6px; }
.pr-mcol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.pr-mcol i { display: block; width: 70%; max-width: 46px; background: linear-gradient(180deg, var(--accent, #dc2626), rgba(var(--accent-rgb, 220,38,38), .55)); border-radius: 6px 6px 2px 2px; }
.pr-mv { font-size: 11px; color: var(--muted, #888); margin-bottom: 4px; white-space: nowrap; }
.pr-ml { font-size: 12px; margin-top: 6px; color: var(--ink-soft, #666); }
.pr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
@media (max-width: 860px) { .pr-two { grid-template-columns: 1fr; } .pr-mv { display: none; } }
.pr-bars { display: flex; flex-direction: column; gap: 8px; }
.pr-bar { display: grid; grid-template-columns: minmax(90px, 1.2fr) 2fr auto 38px; gap: 10px; align-items: center; font-size: 13px; }
.pr-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-t { height: 10px; background: rgba(var(--fg-rgb), .07); border-radius: 999px; overflow: hidden; }
.pr-t i { display: block; height: 100%; background: var(--accent, #dc2626); border-radius: 999px; }
.pr-bar small { color: var(--muted, #888); text-align: right; }
.bp-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.bp-tile { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
.bp-tile:hover { border-color: var(--accent, #dc2626); }
.rep-boss { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; }
.rep-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: rgba(var(--fg-rgb), .07); font-size: 13px; }
.rep-chip button { border: 0; background: transparent; cursor: pointer; color: var(--ink-soft); padding: 0 4px; }
.hq-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 170px; align-items: end; }
.hq-col { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; font-size: 11.5px; min-width: 0; }
.hq-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.hq-bars i { display: block; width: 34%; max-width: 18px; border-radius: 4px 4px 1px 1px; min-height: 0; }
i.hq-o, span.hq-o { background: rgba(var(--accent-rgb, 220,38,38), .45); color: rgba(var(--accent-rgb, 220,38,38), .6); }
i.hq-s, span.hq-s { background: var(--ok, #2f9e6a); color: var(--ok, #2f9e6a); }
span.hq-o, span.hq-s { background: none; }
.hq-col span { margin-top: 4px; color: var(--ink-soft); } .hq-col small { color: var(--muted); }
.hq-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.hq-list li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.hq-list li b { margin-left: auto; }

/* §129: уақытша беру */
.loan-late td { background: rgba(180,35,24,.06); }
.loan-late-dot { color: var(--err, #b42318); font-weight: 700; margin-left: 4px; }
.xfer-row.dis { opacity: .5; cursor: not-allowed; }
.loan-due { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; align-self: center; }
.loan-due input { width: auto; }
.loan-reason { flex: 1 1 200px; min-width: 0; }
.loan-ext { display: flex; gap: 4px; align-items: center; margin-top: 6px; }
.loan-ext input { width: 140px; padding: 4px 6px; font-size: 12.5px; }
.loan-banner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; margin: 0 0 12px; background: rgba(226,165,58,.12); border: 1px solid rgba(226,165,58,.4); }
.loan-banner.late { background: rgba(180,35,24,.08); border-color: rgba(180,35,24,.35); }
.loan-banner form { margin-left: auto; }
.my-loans { margin: 6px 0 0; padding-left: 18px; }
.my-proc { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 18px; background: var(--paper-2); }
.my-proc-h { margin-bottom: 8px; }
.my-proc-row { padding: 8px 0; border-top: 1px solid var(--line); }
.my-proc-row:first-of-type { border-top: 0; }
.my-proc-t small { margin-left: 4px; }
.my-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 6px 0 0; counter-reset: s; }
.my-steps li { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(var(--fg-rgb), .06); color: var(--muted, #888); }
.my-steps li.ok { background: rgba(47,158,106,.15); color: var(--ok, #2f7d52); font-weight: 700; }
.my-proc-cur.bad { color: var(--err, #b42318); font-weight: 700; margin-top: 4px; }
.bat-bad { color: var(--err, #b42318); } .bat-warn { color: #b7791f; } .bat-ok { color: var(--ok, #2f7d52); }
.pr-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 26px; width: 110px; }
.pr-spark i { flex: 1; background: var(--accent, #dc2626); opacity: .75; border-radius: 2px 2px 0 0; min-height: 1px; }
.loan-banner > span { flex: 1 1 300px; }

/* §130: толық құны */
.tco-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.tco-sum > div { flex: 1 1 120px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.tco-sum span { font-size: 11.5px; color: var(--muted, #888); } .tco-sum b { font-size: 16px; }
.tco-sum .tot { border-color: var(--accent, #dc2626); }
.tco-list { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.tco-list li { display: flex; gap: 8px; align-items: center; }
.tco-list li span { flex: 1; min-width: 0; }
.tco-x { border: 0; background: none; color: var(--muted); cursor: pointer; }
.tco-form { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tco-form input[name=note] { flex: 1 1 200px; }
.tco-form input[name=amount] { width: 130px; }
.room-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.room-it { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); }
.room-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--accent-rgb, 220,38,38), .1); color: var(--accent, #dc2626); }
.room-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .room-tx small { color: var(--muted, #888); overflow-wrap: anywhere; }
.offb-sec h3 { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.offb-sec { margin-bottom: 12px; }
.offb-row { display: flex; gap: 8px; align-items: flex-start; padding: 6px 4px; font-size: 14px; cursor: pointer; }
.offb-row input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--accent, #dc2626); }
.offb-to { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 14px; }
.offb-to select { min-width: 240px; max-width: 100%; }

/* §132: «📨 Директорға хабарлау» және «← Артқа» */
.dn-box { margin: 12px 0; border: 1px solid var(--line, #d8dde6); border-radius: 12px; padding: 0; background: rgba(127,127,127,.04); }
.dn-box > summary { cursor: pointer; padding: 10px 14px; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px; }
.dn-box > summary::-webkit-details-marker { display: none; }
.dn-box > summary::after { content: '▾'; margin-left: auto; opacity: .55; transition: transform .15s; }
.dn-box[open] > summary::after { transform: rotate(180deg); }
.dn-box .dn-cnt { font-weight: 600; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(72,180,127,.18); }
.dn-form, .dn-empty, .dn-hist { margin: 0 14px 12px; }
.dn-form { display: flex; flex-direction: column; gap: 8px; }
.dn-f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.dn-f > span { font-weight: 600; opacity: .8; }
.dn-f select, .dn-f textarea { width: 100% !important; max-width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; }
.dn-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dn-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.dn-chk input { width: auto !important; }
.dn-set { font-size: 12px; margin-left: auto; }
.dn-hist { list-style: none; padding: 8px 0 0; border-top: 1px dashed var(--line, #d8dde6); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.dn-hist small { opacity: .75; }
.dn-hist .dn-err { color: #b3432f; opacity: 1; }
.dn-hist .dn-c { font-style: italic; }
.dn-flash { margin: 10px 0; padding: 9px 14px; border-radius: 10px; font-size: 14px; }
.dn-flash.ok { background: rgba(72,180,127,.14); border: 1px solid rgba(72,180,127,.4); }
.dn-flash.err { background: rgba(179,67,47,.1); border: 1px solid rgba(179,67,47,.35); }
.dn-back { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; padding: 6px 12px; font-size: 14px; vertical-align: middle; }
.dn-h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dn-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hd-side .dn-box { margin: 12px 0 0; }

/* §134: бас беттегі көрсеткіштер — 7 карта (компьютерде 4+3), ескерту түсі */
.dash-kpi-card .delta.warn { color: var(--warn, #b7791f); }
@media (min-width: 900px) { .dash-kpi-row.kpi-n7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dash-kpi-card .label { overflow-wrap: anywhere; }