:root {
  --bg: #08111f;
  --panel: #101d31;
  --panel-2: #13243d;
  --panel-3: #0d182b;
  --border: rgba(142, 177, 215, 0.18);
  --text: #eef6ff;
  --muted: #93a8c2;
  --accent: #39a7ff;
  --accent-2: #46e0b2;
  --warning: #ffd166;
  --danger: #ff6b6b;
  --shadow: 0 24px 80px rgba(0, 0, 0, .36);
  --radius: 18px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: radial-gradient(circle at top left, rgba(57, 167, 255, .18), transparent 34%), var(--bg);
  color: var(--text);
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar {
  width: 300px;
  padding: 22px;
  background: linear-gradient(180deg, #0d1a2d, #08111f 80%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06101d; font-weight: 900; letter-spacing: -.08em;
}
.brand-title { font-weight: 800; }
.brand-subtitle { color: var(--muted); font-size: 13px; margin-top: 3px; }
.nav { display: grid; gap: 8px; }
.nav-item {
  width: 100%; text-align: left; padding: 12px 14px;
  border-radius: 14px; border: 1px solid transparent;
  background: transparent; color: var(--muted);
}
.nav-item:hover, .nav-item.active {
  color: var(--text); border-color: var(--border); background: rgba(255,255,255,.06);
}
.sidebar-card { margin-top: auto; padding: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: var(--radius); }
.tiny-title { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.sidebar-note { color: var(--muted); font-size: 13px; margin-top: 8px; line-height: 1.45; }
.sidebar-footer { display: flex; flex-wrap: wrap; gap: 8px; }
.sidebar-footer a, .quick-links a {
  text-decoration: none; padding: 9px 12px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); background: rgba(255,255,255,.04);
}
.sidebar-footer a:hover, .quick-links a:hover { color: var(--text); border-color: rgba(57,167,255,.45); }

.main { flex: 1; padding: 26px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 24px; }
.topbar h1 { margin: 0; font-size: 30px; letter-spacing: -.03em; }
.topbar p { margin: 8px 0 0; color: var(--muted); }
.top-actions { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; justify-content: flex-end; }
.top-select { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
select, input, textarea {
  border: 1px solid var(--border); background: rgba(255,255,255,.06); color: var(--text);
  border-radius: 12px; padding: 10px 12px; outline: none;
}
select option { color: #111; }
.search-input { min-width: 310px; }
.status-badge, .pill, .badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 999px;
  background: rgba(70,224,178,.12); border: 1px solid rgba(70,224,178,.28); color: #abffe8; font-size: 13px;
}
.status-badge.error { background: rgba(255,107,107,.13); border-color: rgba(255,107,107,.35); color: #ffc5c5; }
.ghost-btn, .primary-btn {
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; color: var(--text); background: rgba(255,255,255,.06);
}
.primary-btn { border-color: rgba(57,167,255,.45); background: linear-gradient(135deg, rgba(57,167,255,.28), rgba(70,224,178,.18)); }

.page { display: none; }
.page.active { display: block; animation: fadeIn .18s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.alert { padding: 14px 16px; margin-bottom: 18px; border-radius: 14px; border: 1px solid rgba(255,209,102,.38); background: rgba(255,209,102,.11); color: #ffe9a6; }
.hidden { display: none !important; }

.hero-panel, .panel, .object-hero {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.hero-panel { padding: 24px; display: flex; justify-content: space-between; gap: 24px; align-items: stretch; margin-bottom: 18px; }
.hero-panel h2 { margin: 6px 0 8px; font-size: 34px; letter-spacing: -.04em; }
.hero-panel p { color: var(--muted); max-width: 850px; line-height: 1.55; }
.eyebrow { color: var(--accent-2); text-transform: uppercase; font-size: 12px; letter-spacing: .12em; font-weight: 800; }
.current-user-card { min-width: 280px; padding: 18px; border-radius: 16px; background: rgba(0,0,0,.16); border: 1px solid var(--border); }
.current-user-card strong { display: block; font-size: 18px; margin-bottom: 6px; }
.current-user-card span { color: var(--muted); display: block; margin-top: 4px; }

.panel { padding: 18px; margin-bottom: 18px; }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; }
.panel-header h2 { margin: 0; font-size: 20px; }
.panel-header span { color: var(--muted); font-size: 13px; }
.section-head { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 18px; }
.section-head h2 { margin: 5px 0 6px; font-size: 30px; }
.section-head p { margin: 0; color: var(--muted); max-width: 760px; }

.main-menu-grid, .registry-grid, .metric-grid, .stats-row { display: grid; gap: 14px; }
.main-menu-grid { grid-template-columns: repeat(5, minmax(160px, 1fr)); }
.menu-card, .registry-card, .metric-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: rgba(255,255,255,.055);
  min-height: 150px; transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.menu-card:hover, .registry-card:hover { transform: translateY(-2px); border-color: rgba(57,167,255,.42); background: rgba(57,167,255,.08); }
.menu-card.locked { opacity: .45; cursor: not-allowed; }
.menu-icon { font-size: 32px; margin-bottom: 12px; }
.menu-card h3, .registry-card h3 { margin: 0 0 8px; }
.menu-card p, .registry-card p, .muted { color: var(--muted); line-height: 1.45; }

.stats-row { grid-template-columns: repeat(4, minmax(140px, 1fr)); margin-bottom: 16px; }
.metric-card strong { display: block; font-size: 28px; margin-top: 8px; }
.metric-card span { color: var(--muted); }
.registry-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.registry-card { cursor: pointer; display: grid; gap: 12px; }
.registry-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.registry-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.count-chip { padding: 9px; border-radius: 12px; background: rgba(0,0,0,.18); border: 1px solid var(--border); text-align: center; }
.count-chip strong { display: block; font-size: 18px; }
.count-chip span { font-size: 12px; color: var(--muted); }

.object-card-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.object-hero { padding: 22px; margin-bottom: 18px; display: grid; grid-template-columns: 1.45fr .55fr; gap: 18px; }
.object-hero h2 { margin: 4px 0 8px; font-size: 32px; }
.object-facts { display: grid; grid-template-columns: repeat(2, minmax(170px, 1fr)); gap: 10px; margin-top: 14px; }
.fact { padding: 12px; background: rgba(0,0,0,.14); border: 1px solid var(--border); border-radius: 14px; }
.fact span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.object-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tab-btn { border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--muted); border-radius: 999px; padding: 9px 12px; }
.tab-btn.active { color: var(--text); border-color: rgba(57,167,255,.45); background: rgba(57,167,255,.13); }
.tab-page { display: none; }
.tab-page.active { display: block; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: #b9cde5; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.045); }
td { color: #e9f4ff; }
.tree-list { display: grid; gap: 8px; }
.tree-node { padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.04); }
.tree-node.child { margin-left: 28px; }

.auth-panel code, .code { color: #b8e7ff; background: rgba(0,0,0,.22); border: 1px solid var(--border); border-radius: 8px; padding: 2px 6px; }
.quick-links { display: flex; flex-wrap: wrap; gap: 10px; }
.stub-panel { display: grid; place-items: center; text-align: center; min-height: 480px; }
.stub-icon { font-size: 54px; }
.locked-badge { background: rgba(255,209,102,.12); border-color: rgba(255,209,102,.32); color: #ffe39a; }
.rights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 8px; }
.right-chip { padding: 9px 10px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--muted); }
.right-chip.on { color: #b7ffea; border-color: rgba(70,224,178,.28); background: rgba(70,224,178,.08); }

@media (max-width: 1180px) {
  .main-menu-grid { grid-template-columns: repeat(2, 1fr); }
  .object-hero, .two-column { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; }
  .topbar, .hero-panel, .section-head { flex-direction: column; align-items: stretch; }
  .main-menu-grid, .stats-row { grid-template-columns: 1fr; }
  .object-facts { grid-template-columns: 1fr; }
}

/* v0.3.2 — participants grouped by company */
.admin-layout { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; }
.admin-users-list { display: grid; gap: 10px; max-height: 680px; overflow: auto; padding-right: 4px; }
.admin-user-row {
  width: 100%; text-align: left; padding: 13px; border-radius: 14px;
  border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text);
  display: grid; gap: 5px;
}
.admin-user-row:hover, .admin-user-row.active { border-color: rgba(57,167,255,.45); background: rgba(57,167,255,.10); }
.admin-user-row span { color: var(--muted); }
.admin-user-row small { color: #7f94af; }
.user-profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.user-profile-head h3 { margin: 0 0 4px; }
.avatar-mark {
  width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(57,167,255,.9), rgba(70,224,178,.8)); color: #07111f;
  font-weight: 900; font-size: 24px;
}
.compact-facts { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
.access-form-grid { display: grid; grid-template-columns: 1.2fr 1.5fr 1.1fr .8fr; gap: 12px; align-items: end; }
.access-form-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.check-line { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.check-line input { width: 17px; height: 17px; }
.danger-text { color: #ffc5c5; border-color: rgba(255,107,107,.32); }
.danger-text:hover { background: rgba(255,107,107,.10); }
@media (max-width: 1180px) {
  .admin-layout, .access-form-grid { grid-template-columns: 1fr; }
  .compact-facts { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

.company-groups {
  display: grid;
  gap: 16px;
}
.company-block {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
  padding: 16px;
}
.company-block-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.company-block-head h3 {
  margin: 0 0 4px;
}
.access-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}


/* v0.4.0 object passport */
.passport-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.fact.wide { grid-column: span 2; }
.compact-facts { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
.passport-panel .fact b { line-height: 1.35; }
.tree-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.tree-children { margin-top: 8px; margin-left: 24px; display: grid; gap: 8px; }
.passport-tree > .tree-node { border-color: rgba(57,167,255,.22); }
.tree-node.level-1 { background: rgba(57,167,255,.045); }
.tree-node.level-2 { background: rgba(70,224,178,.035); }
@media (max-width: 1180px) { .passport-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); } }
@media (max-width: 720px) { .passport-grid, .compact-facts { grid-template-columns: 1fr; } .fact.wide { grid-column: auto; } }


/* v0.4.1: Object passport edit form */
.small-btn { padding: 8px 12px; font-size: 13px; }
.inline-actions { margin: 0; }
.edit-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.edit-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}
.edit-form-grid label.wide { grid-column: 1 / -1; }
.edit-form-grid input,
.edit-form-grid select,
.edit-form-grid textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(7, 18, 32, .72);
  color: var(--text);
  padding: 11px 12px;
  outline: none;
}
.edit-form-grid textarea { resize: vertical; min-height: 86px; }
.edit-form-grid input:focus,
.edit-form-grid select:focus,
.edit-form-grid textarea:focus {
  border-color: rgba(80, 190, 255, .55);
  box-shadow: 0 0 0 3px rgba(80, 190, 255, .10);
}
@media (max-width: 900px) {
  .edit-form-grid { grid-template-columns: 1fr; }
}


/* v0.4.2: editable technological structure */
.tree-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.mini-btn { padding: 6px 9px; font-size: 12px; border-radius: 10px; }
.structure-edit-card {
  margin: 14px 0 18px;
  padding: 16px;
  border: 1px solid rgba(57,167,255,.24);
  border-radius: 18px;
  background: rgba(57,167,255,.075);
}
.structure-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.muted-pill { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); color: var(--muted); }
.ok-pill { background: rgba(70,224,178,.10); border-color: rgba(70,224,178,.28); color: #b7ffea; }
@media (max-width: 900px) {
  .structure-form-grid { grid-template-columns: 1fr; }
  .tree-row { align-items: flex-start; flex-direction: column; }
  .tree-actions { justify-content: flex-start; }
}

/* v0.5.0 — GlobalDataPoint ownership / LocalApp bindings */
.accent-panel { border-color: rgba(70,224,178,.22); }
.module-grid { display: grid; gap: 12px; }
.compact-grid { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.placeholder-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}
.placeholder-card strong { display: block; margin-bottom: 6px; color: #dff6ff; }
.placeholder-card p { margin: 0; color: var(--muted); line-height: 1.45; }
@media (max-width: 1180px) { .compact-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); } }
@media (max-width: 720px) { .compact-grid { grid-template-columns: 1fr; } }


/* v0.5.1 — LocalApp bindings screen */
.localapp-stats { margin: 16px 0 0; }
.localapp-filter-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.localapp-filter-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}
.filter-check { align-self: center; padding: 11px 0; }
.localapp-table-wrap table { min-width: 1260px; }
.node-code {
  display: inline-block;
  max-width: 360px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
.small-text { font-size: 12px; margin-top: 6px; }
.flag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mini-flag {
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 11px;
  color: #b7ffea;
  border: 1px solid rgba(70,224,178,.24);
  background: rgba(70,224,178,.08);
}
.muted-flag { color: var(--muted); border-color: var(--border); background: rgba(255,255,255,.035); }
.warn-pill { background: rgba(255,209,102,.12); border-color: rgba(255,209,102,.32); color: #ffe39a; }
.bad-pill { background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.35); color: #ffcaca; }
.problem-list { display: grid; gap: 4px; margin-top: 8px; }
.problem-list span { color: #ffe39a; font-size: 12px; }
@media (max-width: 1180px) {
  .localapp-filter-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .localapp-filter-grid { grid-template-columns: 1fr; }
}

/* v0.5.2 LocalApp binding review */
.action-cell {
  min-width: 160px;
}
.action-cell .mini-btn {
  display: block;
  width: 100%;
  margin: 4px 0;
  text-align: center;
}
.review-comment {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: #d9e7ff;
  font-size: 12px;
  line-height: 1.35;
}
.edit-panel {
  border-color: rgba(70,224,178,.28);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.wrap-actions {
  flex-wrap: wrap;
  gap: 14px;
}
.full-label {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}
.full-label textarea {
  width: 100%;
  margin-top: 6px;
  resize: vertical;
}

/* v0.5.3 LocalApp import screen */
.import-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.import-actions input[type="file"] {
  border: 1px solid rgba(180, 205, 255, .18);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.json-import-textarea {
  width: 100%;
  min-height: 300px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  border: 1px solid rgba(180, 205, 255, .16);
  border-radius: 14px;
  background: rgba(4, 10, 24, .70);
  color: #dff5ff;
  padding: 14px;
  outline: none;
}
.json-import-textarea:focus {
  border-color: rgba(62, 198, 255, .58);
  box-shadow: 0 0 0 3px rgba(62,198,255,.10);
}
.disabled-btn,
button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.import-errors {
  margin: 10px 0 14px;
}

/* v0.5.7 — LocalApp import normalization and mapping */
.import-wizard {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.wizard-step {
  position: relative;
  min-height: 116px;
  padding: 14px;
  border: 1px solid rgba(180,205,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.wizard-step strong {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(180,205,255,.22);
  background: rgba(180,205,255,.08);
  margin-bottom: 8px;
}
.wizard-step span { display: block; color: #dff6ff; font-weight: 700; }
.wizard-step p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.wizard-step.active {
  border-color: rgba(70,224,178,.34);
  background: rgba(70,224,178,.075);
}
.quality-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.quality-item {
  border: 1px solid rgba(180,205,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  padding: 12px;
}
.quality-item span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.quality-item b { color: #eaf6ff; font-size: 18px; }
.quality-item.ok { border-color: rgba(70,224,178,.26); background: rgba(70,224,178,.06); }
.quality-item.warn { border-color: rgba(255,209,102,.25); background: rgba(255,209,102,.055); }
.quality-item.bad { border-color: rgba(255,107,107,.28); background: rgba(255,107,107,.055); }
.mapping-hints { display: grid; gap: 4px; }
.mapping-hints span {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(70,224,178,.25);
  background: rgba(70,224,178,.08);
  color: #b7ffea;
  font-size: 12px;
}
.bulk-panel { border-color: rgba(57,167,255,.24); }
@media (max-width: 1180px) {
  .import-wizard { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .quality-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 720px) {
  .import-wizard, .quality-grid { grid-template-columns: 1fr; }
}

.verify-result {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
}
.verify-result.success {
  border-color: rgba(70,224,178,.28);
  background: rgba(70,224,178,.08);
}
.verify-result.warn {
  border-color: rgba(255,198,92,.28);
  background: rgba(255,198,92,.08);
}
.verify-result-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.verify-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.verify-result-grid div {
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.16);
}
.verify-result-grid span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.verify-result-grid b {
  font-size: 20px;
}
.compact-list {
  margin-top: 8px;
}


/* v0.6.4 — binding correction layout fix */
.binding-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.binding-edit-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  min-width: 0;
}
.binding-edit-grid label.wide {
  grid-column: 1 / -1;
}
.binding-edit-grid input,
.binding-edit-grid select,
.binding-edit-grid textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(7, 18, 32, .72);
  color: var(--text);
  padding: 11px 12px;
  outline: none;
  box-sizing: border-box;
}
.binding-edit-grid input:focus,
.binding-edit-grid select:focus,
.binding-edit-grid textarea:focus {
  border-color: rgba(80, 190, 255, .55);
  box-shadow: 0 0 0 3px rgba(80, 190, 255, .10);
}
.binding-edit-grid select,
.binding-edit-grid input {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 980px) {
  .binding-edit-grid {
    grid-template-columns: 1fr;
  }
  .binding-edit-grid label.wide {
    grid-column: auto;
  }
}

/* v0.6.5 — LocalApp preparation wizard */
.bulk-prepare-panel {
  border-color: rgba(57,167,255,.24);
}
.prepare-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.prepare-target-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0 16px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.binding-prepare-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.binding-prepare-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  min-width: 0;
}
.binding-prepare-grid input,
.binding-prepare-grid select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(7, 18, 32, .72);
  color: var(--text);
  padding: 11px 12px;
  outline: none;
  box-sizing: border-box;
}
.prepare-kind-row {
  padding: 10px 0 0;
}
.ok-text { color: #b7ffea; }
.selected-row {
  background: rgba(57,167,255,.065);
}
.binding-select-checkbox,
#selectAllVisibleBindingsCheckbox {
  width: 17px;
  height: 17px;
}
@media (max-width: 1320px) {
  .binding-prepare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .binding-prepare-grid { grid-template-columns: 1fr; }
}

/* v0.7.0 — engineering bindings */
.engineering-panel { border-color: rgba(70,224,178,.24); }
.engineering-toolbar {
  display: grid;
  grid-template-columns: 1.35fr .75fr 1fr 1fr 1fr .9fr;
  gap: 12px;
  align-items: end;
  margin: 14px 0;
}
.engineering-toolbar label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  min-width: 0;
}
.engineering-toolbar input,
.engineering-toolbar select {
  width: 100%;
  min-width: 0;
}
.small-btn { padding: 7px 10px; font-size: 13px; border-radius: 10px; }
@media (max-width: 1320px) {
  .engineering-toolbar { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .engineering-toolbar { grid-template-columns: 1fr; }
}

/* v0.7.3 — clean-install bootstrap: create organization + object from UI */
.section-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.empty-state-card {
  min-height: 280px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
}
.empty-state-card h2 { margin: 0; font-size: 26px; }
.empty-state-card p { max-width: 620px; margin: 0 auto 6px; }
.empty-state-icon { font-size: 48px; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(2, 8, 18, .78);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: 22px;
}
.modal-window {
  width: min(1080px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border: 1px solid rgba(142, 177, 215, .28);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18, 34, 57, .98), rgba(9, 18, 32, .98));
  box-shadow: 0 34px 110px rgba(0,0,0,.55);
  padding: 22px;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.modal-header h2 { margin: 5px 0 8px; font-size: 28px; letter-spacing: -.03em; }
.modal-header p { margin: 0; }
.inner-panel {
  box-shadow: none;
  background: rgba(255,255,255,.04);
}
.create-wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}
.step-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 11px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  font-size: 13px;
}
.step-pill.active {
  color: #b7ffea;
  border-color: rgba(70,224,178,.28);
  background: rgba(70,224,178,.10);
}
.mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.compact-create-grid { margin-top: 8px; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
  position: sticky;
  bottom: -22px;
  padding: 16px 0 0;
  background: linear-gradient(180deg, rgba(9,18,32,0), rgba(9,18,32,.98) 32%);
}
button:disabled {
  opacity: .58;
  cursor: not-allowed;
}
@media (max-width: 860px) {
  .modal-window { width: 100%; max-height: 94vh; padding: 16px; }
  .modal-header { flex-direction: column; }
  .section-actions { justify-content: stretch; }
  .section-actions .primary-btn, .section-actions .search-input { width: 100%; }
}

/* v0.7.4 — manual object filling: PLC and GlobalDataPoint UI */
.edit-form-grid label.form-check {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  padding-top: 22px;
}
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 150px;
}
.table-wrap table .code {
  word-break: break-all;
}

/* v0.7.5.1 — GlobalDataPoint required-field validation */
.validation-error-summary {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,107,107,.42);
  border-radius: 14px;
  background: rgba(255,107,107,.10);
  color: #ffd1d1;
}
.validation-error-summary strong {
  display: block;
  margin-bottom: 6px;
}
.validation-error-summary ul {
  margin: 0;
  padding-left: 20px;
}
.validation-error-field {
  border-color: rgba(255,107,107,.80) !important;
  box-shadow: 0 0 0 3px rgba(255,107,107,.12) !important;
}
label.validation-error-field {
  border-radius: 12px;
  outline: 1px solid rgba(255,107,107,.55);
  outline-offset: 4px;
}


/* v0.7.8.1 — compact integration workflow guide */
.integration-workflow-guide {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(57,167,255,.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(57,167,255,.08), rgba(70,224,178,.04));
}
.integration-workflow-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 10px;
}
.integration-workflow-title span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.integration-workflow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.integration-workflow-step {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 46px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(0,0,0,.12);
  color: var(--text);
  cursor: pointer;
}
.integration-workflow-num {
  flex: 0 0 24px;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(57,167,255,.16);
  color: #b8e7ff;
  font-weight: 700;
  font-size: 12px;
}
.integration-workflow-label {
  min-width: 0;
  display: block;
  line-height: 1.12;
}
.integration-workflow-label b,
.integration-workflow-label em {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.integration-workflow-label b {
  font-size: 14px;
  font-style: normal;
}
.integration-workflow-label em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.integration-workflow-step.active {
  border-color: rgba(70,224,178,.50);
  background: rgba(70,224,178,.10);
}
@media (max-width: 1100px) {
  .integration-workflow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integration-workflow-title { display: block; }
  .integration-workflow-title span { display: block; margin-top: 4px; white-space: normal; }
}
@media (max-width: 640px) {
  .integration-workflow-steps { grid-template-columns: 1fr; }
}

/* v0.7.8 — guided LocalApp to MnemoEditor workflow */
.localapp-guide-panel {
  border-color: rgba(70,224,178,.28);
  background: linear-gradient(135deg, rgba(70,224,178,.08), rgba(57,167,255,.06));
}
.workflow-progress-row {
  display: grid;
  grid-template-columns: 110px 1fr 170px;
  gap: 12px;
  align-items: center;
  margin: 12px 0 14px;
}
.workflow-progress-label b {
  display: block;
  font-size: 24px;
  line-height: 1;
}
.workflow-progress-label span,
.workflow-progress-caption {
  color: var(--muted);
  font-size: 13px;
}
.workflow-progress {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.08);
}
.workflow-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(57,167,255,.95), rgba(70,224,178,.95));
}
.workflow-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.workflow-step {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,.14);
}
.workflow-step b {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  margin-right: 8px;
}
.workflow-step span {
  color: var(--muted);
  font-size: 13px;
}
.workflow-step strong {
  display: block;
  font-size: 24px;
  margin-top: 10px;
}
.workflow-step.done {
  border-color: rgba(70,224,178,.38);
  background: rgba(70,224,178,.08);
}
.workflow-step.warn {
  border-color: rgba(255,194,102,.38);
  background: rgba(255,194,102,.08);
}
.workflow-step.active {
  border-color: rgba(57,167,255,.46);
  background: rgba(57,167,255,.10);
}
.quality-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.quality-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
}
.quality-chip.ok { border-color: rgba(70,224,178,.38); background: rgba(70,224,178,.09); }
.quality-chip.warn { border-color: rgba(255,194,102,.38); background: rgba(255,194,102,.08); }
.quality-chip.bad { border-color: rgba(255,107,107,.38); background: rgba(255,107,107,.08); }
@media (max-width: 1100px) {
  .workflow-progress-row { grid-template-columns: 1fr; }
  .workflow-step-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 640px) {
  .workflow-step-grid { grid-template-columns: 1fr; }
}


/* v0.8.0 — MnemoViewer embedded in GlobalHub */
.mnemo-viewer-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.mnemo-viewer-help {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(70,224,178,.18);
  border-radius: 14px;
  background: rgba(70,224,178,.06);
  color: var(--muted);
  line-height: 1.45;
}
.mnemo-viewer-layout { align-items: start; }
.mnemo-link-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mnemo-link-form .wide { grid-column: 1 / -1; }
.mnemo-viewer-frame-panel { padding-bottom: 16px; }
.mnemo-viewer-frame {
  display: block;
  width: 100%;
  min-height: 720px;
  border: 1px solid rgba(57,167,255,.28);
  border-radius: 18px;
  background: #06101b;
}
.row-selected { background: rgba(70,224,178,.08); }
.small-muted { font-size: 12px; margin-top: 4px; }
@media (max-width: 1180px) {
  .mnemo-viewer-status-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 720px) {
  .mnemo-viewer-status-grid, .mnemo-link-form { grid-template-columns: 1fr; }
  .mnemo-viewer-frame { min-height: 520px; }
}

/* v0.8.1 — упрощение навигации GlobalHub: прихожая как меню приложения, объектовое меню внутри карточки */
.shell-without-global-sidebar {
  display: block;
  min-height: 100vh;
}
.global-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 28px;
  background: rgba(8, 17, 31, .88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
.global-brand {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  min-width: 260px;
}
.global-brand:focus-visible {
  outline: 2px solid rgba(57,167,255,.55);
  outline-offset: 6px;
  border-radius: 16px;
}
.global-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.header-link {
  text-decoration: none;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255,255,255,.045);
}
.header-link:hover {
  color: var(--text);
  border-color: rgba(57,167,255,.42);
}
.header-note {
  color: var(--muted);
  font-size: 13px;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shell-without-global-sidebar .main {
  max-width: 1680px;
  margin: 0 auto;
  padding: 24px 28px 34px;
}
.shell-without-global-sidebar .topbar {
  align-items: center;
}

.object-hero-compact {
  grid-template-columns: minmax(0, 1fr) 430px;
  padding: 18px;
}
.object-hero-compact h2 {
  font-size: 28px;
}
.object-facts-compact-row {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}
.object-quick-metrics {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
}
.object-quick-metrics .metric-card {
  min-height: auto;
  padding: 14px;
}
.object-quick-metrics .metric-card strong {
  font-size: 24px;
}
.object-detail-layout {
  display: grid;
  grid-template-columns: 305px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.object-nav-panel {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 112px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  box-shadow: var(--shadow);
}
.object-nav-head h3 {
  margin: 6px 0 5px;
  font-size: 20px;
}
.object-nav-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 13px;
}
.object-nav-tabs {
  display: grid;
  gap: 7px;
  margin: 16px 0;
}
.object-nav-tabs .tab-btn {
  width: 100%;
  min-height: 42px;
  justify-content: flex-start;
  text-align: left;
  border-radius: 12px;
  padding: 10px 12px;
  white-space: normal;
}
.object-nav-tabs .tab-btn.active {
  background: linear-gradient(135deg, rgba(57,167,255,.22), rgba(70,224,178,.10));
}
.object-nav-group-title {
  margin: 10px 0 2px;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 11px;
  font-weight: 900;
}
.object-workspace {
  min-width: 0;
}
.object-workspace > #objectTabContent > .panel:first-child {
  margin-top: 0;
}
.object-nav-workflow {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.object-nav-workflow-line {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.object-nav-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  text-align: left;
}
.object-nav-step span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(57,167,255,.12);
  border: 1px solid rgba(57,167,255,.24);
  color: #b8e7ff;
  font-size: 12px;
  font-weight: 900;
}
.object-nav-step b {
  font-size: 13px;
}
.object-nav-step:hover,
.object-nav-step.active {
  color: var(--text);
  border-color: rgba(57,167,255,.45);
  background: rgba(57,167,255,.10);
}

@media (max-width: 1260px) {
  .object-hero-compact,
  .object-detail-layout {
    grid-template-columns: 1fr;
  }
  .object-nav-panel {
    position: static;
    max-height: none;
  }
  .object-nav-tabs {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
  .object-nav-group-title {
    grid-column: 1 / -1;
  }
  .object-nav-workflow-line {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}
@media (max-width: 860px) {
  .global-header {
    position: static;
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }
  .global-header-actions {
    justify-content: flex-start;
  }
  .shell-without-global-sidebar .main {
    padding: 16px;
  }
  .object-facts-compact-row,
  .object-quick-metrics {
    grid-template-columns: 1fr;
  }
}


/* v0.8.2 — уплотнение и растяжение карточки объекта на всю рабочую ширину */
.shell-without-global-sidebar .main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 18px 22px 28px;
}
.shell-without-global-sidebar .page.active {
  width: 100%;
}
.object-card-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
.object-hero-compact {
  grid-template-columns: minmax(0, 1.7fr) minmax(360px, 0.95fr);
  gap: 16px;
  padding: 16px;
}
.object-facts-compact-row {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}
.object-detail-layout {
  grid-template-columns: 285px minmax(0, 1fr);
  gap: 16px;
}
.object-nav-panel {
  top: 76px;
}
.object-workspace > #objectTabContent {
  display: grid;
  gap: 16px;
}
.object-workspace > #objectTabContent > .panel,
.object-workspace > #objectTabContent > .two-column,
.object-workspace > #objectTabContent > article,
.object-workspace > #objectTabContent > section {
  margin-bottom: 0;
}
.passport-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
}
.two-column {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
.compact-facts {
  display: grid;
}
@media (max-width: 1540px) {
  .passport-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}
@media (max-width: 1360px) {
  .object-hero-compact,
  .object-detail-layout,
  .two-column {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 980px) {
  .passport-grid,
  .object-facts-compact-row,
  .object-quick-metrics,
  .compact-facts {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}
@media (max-width: 720px) {
  .passport-grid,
  .object-facts-compact-row,
  .object-quick-metrics,
  .compact-facts {
    grid-template-columns: 1fr;
  }
}

/* v0.8.3 — сводка объекта и диагностика цепочки данных */
.ops-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 14px;
}
.ops-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  min-height: 170px;
  display: grid;
  align-content: start;
  gap: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
}
.ops-card.ok { border-color: rgba(70,224,178,.28); }
.ops-card.warn { border-color: rgba(255,209,102,.34); }
.ops-card.bad { border-color: rgba(255,107,107,.38); }
.ops-card.neutral { opacity: .86; }
.ops-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}
.ops-card strong {
  display: block;
  font-size: 20px;
  line-height: 1.2;
}
.ops-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  min-height: 42px;
}
.ops-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  white-space: nowrap;
}
.ops-status.ok { background: rgba(70,224,178,.12); border-color: rgba(70,224,178,.30); color: #baffec; }
.ops-status.warn { background: rgba(255,209,102,.12); border-color: rgba(255,209,102,.32); color: #ffe39a; }
.ops-status.bad { background: rgba(255,107,107,.14); border-color: rgba(255,107,107,.38); color: #ffcaca; }
.ops-chain-panel { margin-top: 16px; }
.ops-chain {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}
.ops-chain-step {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,.045);
  color: var(--text);
  text-align: left;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 8px 12px;
  align-items: center;
}
.ops-chain-step b {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(57,167,255,.14);
  border: 1px solid rgba(57,167,255,.28);
  color: #b8e7ff;
}
.ops-chain-step span { font-weight: 900; }
.ops-chain-step em {
  grid-column: 2;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ops-chain-step.ok { border-color: rgba(70,224,178,.30); }
.ops-chain-step.warn { border-color: rgba(255,209,102,.34); }
.ops-chain-step.bad { border-color: rgba(255,107,107,.38); }
.ops-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ops-two-column { margin-top: 16px; }
.compact-alert { margin: 16px 0 0; }
@media (max-width: 1680px) {
  .ops-summary-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}
@media (max-width: 1100px) {
  .ops-summary-grid,
  .ops-chain { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 720px) {
  .ops-summary-grid,
  .ops-chain { grid-template-columns: 1fr; }
}

/* v0.8.4 — аварии, события и журнал объекта */
.alarm-summary-grid {
  grid-template-columns: repeat(4, minmax(220px, 1fr));
}
.alarm-panel { margin-top: 16px; }
.alarm-list {
  display: grid;
  gap: 12px;
}
.alarm-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255,107,107,.34);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,107,107,.09), rgba(255,255,255,.035));
}
.alarm-card.acknowledged {
  border-color: rgba(255,209,102,.32);
  background: linear-gradient(180deg, rgba(255,209,102,.08), rgba(255,255,255,.035));
}
.alarm-title-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.alarm-title-row h3 {
  margin: 0;
  font-size: 18px;
}
.alarm-card-main p {
  margin: 0 0 12px;
  color: var(--muted);
}
.alarm-meta-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 8px;
}
.alarm-meta-grid div {
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.14);
  border: 1px solid var(--border);
}
.alarm-meta-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 4px;
}
.alarm-meta-grid b {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.alarm-card-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.ack-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,209,102,.28);
  color: #ffe39a;
  background: rgba(255,209,102,.08);
}
.compact-empty {
  min-height: 150px;
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--muted);
}
.events-table td small {
  display: inline-block;
  margin-top: 4px;
}
@media (max-width: 1540px) {
  .alarm-meta-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .alarm-summary-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 860px) {
  .alarm-card { grid-template-columns: 1fr; }
  .alarm-card-actions { justify-content: flex-start; }
  .alarm-meta-grid,
  .alarm-summary-grid { grid-template-columns: 1fr; }
}


/* v0.8.5 — уведомления, центр внимания и статусы объектов */
.notification-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.notification-btn #notificationCount {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(255,255,255,.10);
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}
.notification-btn.has-notifications #notificationCount {
  background: rgba(255,209,102,.20);
  color: #ffe39a;
  border: 1px solid rgba(255,209,102,.35);
}
.notification-btn.critical #notificationCount {
  background: rgba(255,107,107,.22);
  color: #ffd0d0;
  border-color: rgba(255,107,107,.45);
}
.attention-panel {
  margin: 18px 0;
}
.attention-counters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.attention-list {
  display: grid;
  gap: 10px;
}
.attention-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.attention-item:hover {
  transform: translateY(-1px);
  background: rgba(57,167,255,.08);
  border-color: rgba(57,167,255,.36);
}
.attention-item.bad { border-color: rgba(255,107,107,.34); }
.attention-item.warning { border-color: rgba(255,209,102,.28); }
.attention-item-title {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.attention-item-title h3,
.attention-item p {
  margin: 0;
}
.attention-item p + p {
  margin-top: 5px;
}
.attention-item-side {
  display: grid;
  gap: 8px;
  justify-items: end;
  color: var(--muted);
  font-size: 13px;
}
.attention-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(70,224,178,.22);
  border-radius: 16px;
  background: rgba(70,224,178,.075);
}
.attention-empty h3,
.attention-empty p {
  margin: 0;
}
.attention-empty p {
  color: var(--muted);
  margin-top: 4px;
}
.attention-empty-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(70,224,178,.14);
  border: 1px solid rgba(70,224,178,.25);
  color: #b9ffe9;
  font-weight: 900;
}
.registry-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.registry-card.needs-attention {
  border-color: rgba(255,209,102,.26);
}
.object-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.object-status-chip.ok {
  background: rgba(70,224,178,.10);
  border-color: rgba(70,224,178,.28);
  color: #b7ffea;
}
.object-status-chip.warning {
  background: rgba(255,209,102,.12);
  border-color: rgba(255,209,102,.34);
  color: #ffe39a;
}
.object-status-chip.bad {
  background: rgba(255,107,107,.14);
  border-color: rgba(255,107,107,.38);
  color: #ffcaca;
}
@media (max-width: 760px) {
  .attention-item,
  .registry-card-head {
    grid-template-columns: 1fr;
    display: grid;
  }
  .attention-item-side {
    justify-items: start;
  }
}

/* v0.8.6 — объектовые роли и права */
.rights-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.role-template-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}
.role-template-card strong { display: block; margin-bottom: 5px; }
.role-template-card small { color: var(--accent-2); display: block; margin-bottom: 8px; }
.role-template-card p { margin: 0; color: var(--muted); line-height: 1.35; }
.object-rights-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.object-access-form-grid {
  grid-template-columns: 1.2fr 1fr 1fr .65fr;
}
.access-manage-panel {
  border-color: rgba(57,167,255,.22);
}
@media (max-width: 1180px) {
  .object-access-form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .object-access-form-grid { grid-template-columns: 1fr; }
}

/* v0.8.7 — аудит действий пользователя */
.audit-panel { display: grid; gap: 16px; }
.audit-filters {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: end;
}
.audit-filters label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.audit-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 12px;
}
.audit-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.audit-tag {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  padding: 8px 11px;
}
.audit-tag:hover { color: var(--text); border-color: rgba(57,167,255,.42); }
.audit-list { display: grid; gap: 10px; }
.audit-item {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  padding: 14px;
  display: grid;
  gap: 12px;
}
.audit-item.warning { border-color: rgba(255,209,102,.34); background: rgba(255,209,102,.075); }
.audit-item.access { border-color: rgba(70,224,178,.28); background: rgba(70,224,178,.065); }
.audit-item.danger { border-color: rgba(255,107,107,.32); background: rgba(255,107,107,.07); }
.audit-title-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.audit-title-row strong { font-size: 16px; }
.audit-type {
  color: #b8e7ff;
  border: 1px solid rgba(57,167,255,.28);
  background: rgba(57,167,255,.10);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
}
.audit-item p { margin: 6px 0 0; color: var(--muted); }
.audit-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.audit-meta span {
  border: 1px solid var(--border);
  background: rgba(0,0,0,.14);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 12px;
}
.audit-json summary { color: var(--muted); cursor: pointer; }
.audit-diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.audit-diff-grid span { display: block; color: var(--muted); margin-bottom: 6px; font-size: 12px; }
.audit-diff-grid pre {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: rgba(0,0,0,.18);
  color: #dcecff;
  font-size: 12px;
}
@media (max-width: 1180px) {
  .audit-filters, .audit-summary-grid, .audit-diff-grid { grid-template-columns: 1fr; }
}


/* v0.8.8 — отчеты по объекту */
.reports-panel { display: grid; gap: 16px; }
.report-period-note {
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.035);
}
.reports-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 12px;
}
.report-kpi {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,.045);
}
.report-kpi span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.report-kpi strong { display: block; font-size: 24px; line-height: 1.1; }
.report-kpi p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.report-kpi.ok { border-color: rgba(70,224,178,.28); background: rgba(70,224,178,.055); }
.report-kpi.warn { border-color: rgba(255,209,102,.32); background: rgba(255,209,102,.06); }
.report-kpi.bad { border-color: rgba(255,107,107,.34); background: rgba(255,107,107,.065); }
.report-kpi.neutral { opacity: .88; }
.reports-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 14px;
}
.report-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: rgba(255,255,255,.04);
}
.report-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.report-card-head h3 { margin: 0; }
.report-card-head span { color: var(--muted); font-size: 13px; }
.report-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.report-mini-grid.three { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
.report-mini-grid div {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(0,0,0,.14);
}
.report-mini-grid span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.report-mini-grid b { font-size: 18px; }
.report-list { display: grid; gap: 8px; }
.report-list div {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.report-list div:last-child { border-bottom: 0; }
.report-list b { font-size: 14px; }
.report-list span { color: var(--muted); font-size: 13px; }
.report-list.compact div { grid-template-columns: minmax(180px, 1fr) auto; align-items: center; }
.report-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.report-status-row:last-of-type { border-bottom: 0; }
.audit-tag.passive { cursor: default; }
@media (max-width: 1500px) {
  .reports-kpi-grid { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
}
@media (max-width: 1080px) {
  .reports-grid { grid-template-columns: 1fr; }
  .reports-kpi-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 640px) {
  .reports-kpi-grid, .report-mini-grid, .report-mini-grid.three { grid-template-columns: 1fr; }
  .report-list.compact div { grid-template-columns: 1fr; }
}

/* v0.8.9 — правила контроля и пороги аварий */
.control-rules-panel .reports-kpi-grid {
  margin: 14px 0;
}
.control-settings-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}
.control-point-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
}
.control-rules-table td {
  vertical-align: top;
}
.control-edit-row td {
  background: rgba(57,167,255,.055);
}
.compact-edit-card {
  margin: 0;
  border: 1px solid rgba(57,167,255,.22);
}
.muted-row {
  opacity: .62;
}
@media (max-width: 1300px) {
  .control-settings-grid,
  .control-point-grid {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }
}
@media (max-width: 720px) {
  .control-settings-grid,
  .control-point-grid {
    grid-template-columns: 1fr;
  }
}


/* v0.9.1 — единая эксплуатационная панель по всем объектам */
.ops-board-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: stretch;
}
.ops-board-hero h2 { margin: 6px 0 8px; font-size: 32px; }
.ops-board-hero p { color: var(--muted); max-width: 900px; line-height: 1.55; }
.ops-board-status {
  border-radius: 18px;
  border: 1px solid var(--border);
  padding: 18px;
  display: grid;
  align-content: center;
  background: rgba(255,255,255,.045);
}
.ops-board-status span,
.ops-board-status em { color: var(--muted); font-style: normal; }
.ops-board-status strong { font-size: 32px; margin: 6px 0; }
.ops-board-status.ok { border-color: rgba(70,224,178,.35); background: rgba(70,224,178,.08); }
.ops-board-status.warning { border-color: rgba(255,209,102,.35); background: rgba(255,209,102,.09); }
.ops-board-status.bad { border-color: rgba(255,107,107,.38); background: rgba(255,107,107,.10); }
.ops-board-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.ops-metric {
  text-align: left;
  cursor: pointer;
}
.ops-metric.active,
.ops-board-filters .active {
  border-color: rgba(57,167,255,.55);
  background: rgba(57,167,255,.13);
}
.ops-metric.ok { border-color: rgba(70,224,178,.22); }
.ops-metric.warning { border-color: rgba(255,209,102,.26); }
.ops-metric.bad { border-color: rgba(255,107,107,.28); }
.ops-board-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.ops-board-toolbar h2 { margin: 0 0 4px; }
.ops-board-filters,
.ops-object-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ops-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
  align-items: start;
}
.ops-object-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}
.ops-object-card,
.ops-event-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.045);
  padding: 16px;
  cursor: pointer;
}
.ops-object-card:hover,
.ops-event-item:hover {
  border-color: rgba(57,167,255,.45);
  background: rgba(57,167,255,.075);
}
.ops-object-card.ok { border-color: rgba(70,224,178,.20); }
.ops-object-card.warning { border-color: rgba(255,209,102,.28); }
.ops-object-card.bad { border-color: rgba(255,107,107,.32); }
.ops-object-card.muted { opacity: .86; }
.ops-object-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.ops-object-head h3,
.ops-event-item h3 { margin: 8px 0 4px; }
.ops-object-head p,
.ops-object-reason { color: var(--muted); margin: 0; }
.ops-object-reason { margin-top: 12px; min-height: 40px; }
.ops-object-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 14px 0;
}
.ops-object-stats span {
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.14);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.ops-events-panel {
  position: sticky;
  top: 82px;
}
.ops-events-list { display: grid; gap: 10px; }
.ops-event-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
}
.ops-event-item.bad { border-color: rgba(255,107,107,.34); }
.ops-event-item.warning { border-color: rgba(255,209,102,.28); }
@media (max-width: 1380px) {
  .ops-board-metrics { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .ops-board-layout { grid-template-columns: 1fr; }
  .ops-events-panel { position: static; }
}
@media (max-width: 860px) {
  .ops-board-hero,
  .ops-board-toolbar { display: block; }
  .ops-board-metrics,
  .ops-object-list,
  .ops-object-stats { grid-template-columns: 1fr; }
  .ops-board-filters,
  .ops-object-actions { justify-content: flex-start; margin-top: 12px; }
}

/* v0.9.1 Auth Service integration */
.auth-token-box { margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.035); }
.auth-token-box label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.auth-token-box textarea { width: 100%; min-height: 78px; resize: vertical; border-radius: 10px; border: 1px solid var(--border); background: rgba(0,0,0,.23); color: var(--text); padding: 10px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; outline: none; }
.auth-token-box textarea:focus { border-color: rgba(79, 212, 255, .55); box-shadow: 0 0 0 3px rgba(79, 212, 255, .12); }

/* v0.9.1.1 Auth Service strict link */
.auth-user-badge {
  display: inline-flex;
  align-items: center;
  max-width: 360px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,209,102,.32);
  background: rgba(255,209,102,.10);
  color: #ffe39a;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-user-badge.ok {
  border-color: rgba(70,224,178,.30);
  background: rgba(70,224,178,.10);
  color: #b7ffea;
}
.auth-user-badge.warn {
  border-color: rgba(255,209,102,.32);
  background: rgba(255,209,102,.10);
  color: #ffe39a;
}
.auth-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.auth-status-card {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.045);
}
.auth-status-card b { display: block; margin-bottom: 6px; }
.auth-status-card span { color: var(--muted); font-size: 13px; }
.auth-status-card.ok {
  border-color: rgba(70,224,178,.30);
  background: rgba(70,224,178,.08);
}
.auth-status-card.warn {
  border-color: rgba(255,209,102,.32);
  background: rgba(255,209,102,.08);
}
.bad-text { color: #ffcaca; }
@media (max-width: 980px) {
  .auth-status-grid { grid-template-columns: 1fr 1fr; }
  .auth-user-badge { max-width: 100%; }
}
@media (max-width: 640px) {
  .auth-status-grid { grid-template-columns: 1fr; }
}

/* v0.9.2 File Service integration */
.sub-panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}
.sub-panel h3 { margin: 0 0 8px; }
.inline-alert { margin: 12px 0; }
.nowrap { white-space: nowrap; }
.object-files-panel .table-wrap td { vertical-align: top; }

/* v0.9.2.1 Object/equipment photos and document sections */
.passport-photo-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  margin-bottom: 14px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}
.passport-photo-strip.empty { align-items: center; min-height: 74px; }
.file-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.file-photo-grid.small { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); }
.file-photo-grid.empty { display: block; }
.file-thumb {
  display: block;
  height: 116px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.passport-photo-strip .file-thumb { width: 170px; height: 110px; }
.file-doc-thumb {
  min-height: 90px;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  text-decoration: none;
}
.photo-card {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.photo-card-meta { display: grid; gap: 4px; margin-top: 8px; }
.photo-card-meta b { font-size: 13px; }
.photo-card-meta span { font-size: 12px; color: var(--muted); }
.photo-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.inline-upload-form {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}
.equipment-photo-upload,
.doc-section-create .inline-upload-form,
.doc-upload-form .inline-upload-form { grid-template-columns: minmax(180px,1fr) minmax(180px,1fr) minmax(220px,1.2fr) auto; }
.inline-upload-form input,
.inline-upload-form select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding: 10px;
}
.equipment-photo-groups,
.doc-sections-list { display: grid; gap: 12px; margin-top: 14px; }
.equipment-photo-group,
.doc-section-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}
.equipment-photo-head,
.doc-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.equipment-photo-head span,
.doc-section-head span { color: var(--muted); font-size: 12px; }
.doc-section-create,
.doc-upload-form { margin: 12px 0 16px; }
.doc-section-create h4,
.doc-upload-form h4 { margin: 0 0 8px; }
.compact-header { align-items: flex-start; }
.equipment-row-photos {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.equipment-row-photos .file-thumb {
  width: 58px;
  height: 44px;
  border-radius: 8px;
}
.compact-table table td { vertical-align: top; }
@media (max-width: 980px) {
  .inline-upload-form,
  .equipment-photo-upload,
  .doc-section-create .inline-upload-form,
  .doc-upload-form .inline-upload-form { grid-template-columns: 1fr; }
  .passport-photo-strip .file-thumb { width: 100%; }
}


/* v0.9.2.3 - admin FileService integration settings */
.integration-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.integration-settings-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
.integration-settings-grid input {
  width: 100%;
}
.integration-settings-grid .wide-check {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
}
.integration-status {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
}
.integration-status.ok {
  border-color: rgba(70,224,178,.38);
  background: rgba(70,224,178,.10);
}
.integration-status.warn {
  border-color: rgba(255,201,87,.38);
  background: rgba(255,201,87,.10);
}
.empty-state.compact {
  padding: 14px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}
.good-text { color: #b9ffe9; }
.bad-text { color: #ffcaca; }
@media (max-width: 900px) {
  .integration-settings-grid { grid-template-columns: 1fr; }
}

/* v0.9.2.4 - improved object files workspace */
.files-stats-row { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
.file-dashboard {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 2fr);
  gap: 14px;
  margin: 14px 0 6px;
  align-items: stretch;
}
.file-dashboard-main,
.file-type-chip {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}
.file-dashboard-main {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 16px;
}
.file-dashboard-main b { font-size: 28px; }
.file-dashboard-main span { color: var(--muted); font-size: 13px; }
.file-type-chips {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  gap: 10px;
}
.file-type-chip {
  display: grid;
  gap: 4px;
  padding: 12px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.file-type-chip:hover { border-color: rgba(57,167,255,.42); background: rgba(57,167,255,.08); }
.file-type-chip b { font-size: 20px; }
.file-type-chip span { color: var(--muted); font-size: 12px; }
.document-filter-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.8fr) minmax(145px, .8fr) minmax(190px, 1fr) minmax(160px, .9fr) auto auto;
  gap: 10px;
  align-items: center;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(0,0,0,.12);
}
.document-filter-toolbar input,
.document-filter-toolbar select,
.doc-upload-grid select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding: 10px;
}
.filter-result-count { white-space: nowrap; font-size: 13px; }
.doc-upload-grid { grid-template-columns: minmax(180px,1fr) minmax(210px,1fr) minmax(210px,1fr) minmax(220px,1.15fr) auto !important; }
.document-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 12px;
}
.document-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.document-card:hover { border-color: rgba(57,167,255,.32); background: rgba(255,255,255,.055); }
.document-card-icon {
  display: grid;
  place-items: center;
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(57,167,255,.10);
  font-weight: 800;
  font-size: 13px;
}
.document-card-title {
  font-weight: 800;
  line-height: 1.22;
  overflow-wrap: anywhere;
}
.document-card-description,
.document-card-meta,
.document-card-bind {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
}
.document-card-meta,
.document-card-bind {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.document-card-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.technical-links-panel summary {
  cursor: pointer;
  font-weight: 800;
}
@media (max-width: 1200px) {
  .files-stats-row { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .file-dashboard { grid-template-columns: 1fr; }
  .file-type-chips { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
  .document-filter-toolbar { grid-template-columns: 1fr 1fr; }
  .doc-upload-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 680px) {
  .files-stats-row,
  .file-type-chips,
  .document-filter-toolbar,
  .doc-upload-grid { grid-template-columns: 1fr !important; }
  .document-card { grid-template-columns: 1fr; }
}

/* v0.9.3 — FileService assets for MnemoEditor */
.mnemo-assets-panel,
.mnemo-files-bind-panel {
  border-color: rgba(70, 224, 178, .20);
}
.mnemo-asset-groups {
  display: grid;
  gap: 14px;
}
.mnemo-asset-group {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,.035);
}
.mnemo-asset-card code {
  display: block;
  margin-top: 4px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.mnemo-file-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mnemo-files-form {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}
.mnemo-files-form select {
  min-width: 100%;
}
@media (max-width: 900px) {
  .mnemo-files-form { grid-template-columns: 1fr; }
}

/* v0.9.4 — Object mnemoscheme control from GlobalHub */
.mnemo-command-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(57,167,255,.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(57,167,255,.12), rgba(70,224,178,.055));
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}
.mnemo-command-center h3 {
  margin: 0 0 6px;
  font-size: 18px;
}
.mnemo-command-center p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.mnemo-command-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.mnemo-health-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.mnemo-health-chip {
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035);
}
.mnemo-health-chip span,
.mnemo-health-chip b {
  display: block;
}
.mnemo-health-chip span {
  color: var(--muted);
  font-size: 12px;
}
.mnemo-health-chip b {
  margin-top: 4px;
  font-size: 14px;
}
.mnemo-health-chip.ok { border-color: rgba(70,224,178,.30); background: rgba(70,224,178,.08); }
.mnemo-health-chip.warn { border-color: rgba(255,184,77,.30); background: rgba(255,184,77,.08); }
.mnemo-health-chip.bad { border-color: rgba(255,107,107,.32); background: rgba(255,107,107,.08); }
.table-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 1000px) {
  .mnemo-command-center { align-items: stretch; flex-direction: column; }
  .mnemo-command-actions { justify-content: flex-start; }
  .mnemo-health-row { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 620px) {
  .mnemo-health-row { grid-template-columns: 1fr; }
  .mnemo-command-actions > * { width: 100%; }
}

/* v0.9.5 integration diagnostics center */
.integration-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.integration-cards.two-cols {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.mini-panel {
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 18px;
  background: rgba(15, 23, 42, .42);
  padding: 16px;
  box-shadow: 0 14px 36px rgba(2, 6, 23, .18);
}
.mini-panel h3 {
  margin: 0 0 10px;
  font-size: 16px;
}
.mini-panel p {
  margin: 7px 0;
  color: var(--muted);
}
.mini-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.integration-card.ok { border-color: rgba(70, 224, 178, .32); background: rgba(70, 224, 178, .07); }
.integration-card.warn { border-color: rgba(255, 184, 77, .32); background: rgba(255, 184, 77, .07); }
.integration-card.bad { border-color: rgba(255, 107, 107, .34); background: rgba(255, 107, 107, .08); }
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(148, 163, 184, .24);
  background: rgba(148, 163, 184, .10);
}
.status-pill.ok { border-color: rgba(70, 224, 178, .38); color: #a7f3d0; background: rgba(70, 224, 178, .10); }
.status-pill.warn { border-color: rgba(255, 184, 77, .38); color: #fde68a; background: rgba(255, 184, 77, .10); }
.status-pill.bad { border-color: rgba(255, 107, 107, .38); color: #fecaca; background: rgba(255, 107, 107, .10); }
.compact-stats { margin: 12px 0; }

.technical-details {
  margin-top: 12px;
  border: 1px solid rgba(148, 214, 255, .14);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.035);
}

.technical-details summary {
  cursor: pointer;
  color: #bfefff;
  font-weight: 800;
}


/* CameraService integration v0.9.6 */
.camera-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, .9fr); gap: 18px; align-items: start; }
.camera-main, .camera-side { min-width: 0; }
.camera-section-title { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin: 10px 0 12px; }
.camera-section-title h3 { margin: 0; }
.camera-section-title span { color: var(--muted); font-size: 13px; }
.camera-zone-card { border: 1px solid rgba(148,163,184,.18); border-radius: 18px; background: rgba(15,23,42,.42); padding: 14px; margin-bottom: 14px; }
.camera-zone-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; }
.camera-zone-head strong { display: block; font-size: 16px; }
.camera-zone-head span:not(.pill) { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.camera-equipment-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.camera-equipment-chips .chip { cursor: pointer; }
.camera-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.camera-card { border: 1px solid rgba(148,163,184,.18); border-radius: 16px; background: rgba(2,6,23,.32); padding: 13px; }
.camera-card.online { border-color: rgba(70,224,178,.28); }
.camera-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; margin-bottom: 8px; }
.camera-card-head strong { line-height: 1.25; }
.camera-actions, .camera-viewer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.camera-side { border: 1px solid rgba(148,163,184,.16); border-radius: 18px; background: rgba(15,23,42,.34); padding: 14px; position: sticky; top: 14px; }
.equipment-filter-btn { width: 100%; text-align: left; border: 1px solid rgba(148,163,184,.17); background: rgba(2,6,23,.24); color: inherit; border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.equipment-filter-btn:hover { border-color: rgba(96,165,250,.35); background: rgba(30,64,175,.16); }
.equipment-filter-btn b { display: block; }
.equipment-filter-btn span { color: var(--muted); font-size: 12px; }
.camera-viewer-box iframe { width: 100%; height: 280px; border: 1px solid rgba(148,163,184,.2); border-radius: 14px; background: #020617; }
.soft-separator { border: 0; border-top: 1px solid rgba(148,163,184,.14); margin: 14px 0; }
.empty-state.small { padding: 14px; font-size: 13px; }
.inline-alert { margin: 10px 0; }
@media (max-width: 1100px) { .camera-layout { grid-template-columns: 1fr; } .camera-side { position: static; } }

/* v0.9.6.2 Camera binding helper UI */
.camera-binding-helper-card {
  border: 1px solid rgba(96,165,250,.28);
  border-radius: 22px;
  padding: 18px;
  margin: 14px 0 18px;
  background:
    radial-gradient(circle at 0 0, rgba(59,130,246,.18), transparent 34%),
    linear-gradient(135deg, rgba(15,23,42,.72), rgba(2,6,23,.42));
  box-shadow: 0 18px 45px rgba(2,6,23,.20);
}
.camera-binding-helper-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.camera-binding-helper-head h3 { margin: 4px 0 6px; }
.camera-binding-helper-head p { margin: 0; color: var(--muted); max-width: 780px; line-height: 1.5; }
.camera-binding-route {
  min-width: 250px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  padding: 12px;
  background: rgba(15,23,42,.62);
}
.camera-binding-route span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.camera-binding-route b { display: block; font-size: 14px; line-height: 1.35; }
.camera-binding-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.camera-binding-field {
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 16px;
  padding: 12px;
  background: rgba(2,6,23,.28);
}
.camera-binding-field-head {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}
.copy-value-row, .mini-copy-field div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.copy-value-row code, .mini-copy-field code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 10px;
  padding: 7px 9px;
  background: rgba(15,23,42,.76);
  color: #dbeafe;
  font-size: 12px;
}
.camera-binding-field small { display: block; margin-top: 8px; color: var(--muted); }
.copy-mini-btn {
  border: 1px solid rgba(96,165,250,.32);
  color: #bfdbfe;
  background: rgba(37,99,235,.12);
  padding: 7px 9px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.copy-mini-btn:hover { border-color: rgba(147,197,253,.72); background: rgba(37,99,235,.22); }
.copy-mini-btn.copied { color: #bbf7d0; border-color: rgba(74,222,128,.45); background: rgba(22,163,74,.16); }
.copy-mini-btn:disabled { opacity: .45; cursor: not-allowed; }
.field-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(147,197,253,.45);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
  margin-left: 4px;
  background: rgba(37,99,235,.14);
}
.field-help::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: min(360px, 82vw);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.30);
  background: rgba(2,6,23,.98);
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
}
.field-help:hover::after, .field-help:focus::after { opacity: 1; transform: translateY(0); }
.camera-binding-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.camera-binding-steps div {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 14px;
  padding: 10px;
  background: rgba(15,23,42,.34);
}
.camera-binding-steps b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(59,130,246,.22);
  color: #bfdbfe;
  flex: 0 0 auto;
}
.camera-binding-steps span { color: var(--muted); font-size: 13px; line-height: 1.35; }
.camera-binding-example {
  border: 1px dashed rgba(148,163,184,.22);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 12px 0;
  background: rgba(15,23,42,.28);
}
.camera-binding-example summary { cursor: pointer; color: #bfdbfe; }
.camera-binding-example pre {
  overflow: auto;
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 12px;
  background: rgba(2,6,23,.72);
  color: #dbeafe;
  font-size: 12px;
}
.camera-zone-binding-list { margin-top: 14px; }
.compact-title { margin-top: 0; }
.camera-zone-binding-row {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.6fr);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 16px;
  padding: 12px;
  margin-top: 8px;
  background: rgba(2,6,23,.22);
}
.camera-zone-binding-main strong { display: block; }
.camera-zone-binding-main span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.camera-zone-binding-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mini-copy-field span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.important-field code { border-color: rgba(96,165,250,.34); color: #eff6ff; }
.camera-zone-head .copy-mini-btn { padding: 3px 7px; border-radius: 8px; margin-left: 5px; }
@media (max-width: 1180px) {
  .camera-binding-grid { grid-template-columns: 1fr; }
  .camera-binding-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camera-zone-binding-row { grid-template-columns: 1fr; }
  .camera-zone-binding-fields { grid-template-columns: 1fr; }
  .camera-binding-helper-head { flex-direction: column; }
  .camera-binding-route { width: 100%; min-width: 0; }
}
@media (max-width: 700px) {
  .camera-binding-steps { grid-template-columns: 1fr; }
}

/* v0.9.6.3 Camera binding sidebar UI */
.primary-soft-btn {
  border-color: rgba(96,165,250,.48) !important;
  background: rgba(37,99,235,.18) !important;
  color: #dbeafe !important;
}
.camera-binding-compact-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  margin: 10px 0 14px;
  border: 1px solid rgba(96,165,250,.22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(30,64,175,.14), rgba(2,6,23,.20));
}
.camera-binding-compact-cta b { display: block; margin-bottom: 3px; }
.camera-binding-compact-cta span { color: var(--muted); font-size: 13px; line-height: 1.35; }
.camera-binding-helper-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
  background: rgba(2,6,23,.58);
  backdrop-filter: blur(4px);
}
.camera-binding-helper-sidebar {
  width: min(720px, 94vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(96,165,250,.30);
  background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(2,6,23,.98));
  box-shadow: -28px 0 70px rgba(0,0,0,.42);
  animation: cameraSidebarIn .18s ease-out;
}
@keyframes cameraSidebarIn {
  from { transform: translateX(28px); opacity: .72; }
  to { transform: translateX(0); opacity: 1; }
}
.camera-binding-sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(148,163,184,.14);
}
.camera-binding-sidebar-head h3 { margin: 4px 0 0; }
.close-sidebar-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(15,23,42,.72);
  color: #dbeafe;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.close-sidebar-btn:hover { border-color: rgba(147,197,253,.65); background: rgba(30,64,175,.24); }
.camera-binding-sidebar-note {
  margin: 12px 18px 0;
  padding: 11px 12px;
  border: 1px solid rgba(96,165,250,.22);
  border-radius: 14px;
  background: rgba(37,99,235,.10);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.camera-binding-sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px 22px;
}
.camera-binding-helper-sidebar .camera-binding-helper-card {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.camera-binding-helper-sidebar .camera-binding-helper-head {
  padding: 12px;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 16px;
  background: rgba(2,6,23,.26);
}
.camera-binding-helper-sidebar .camera-binding-grid,
.camera-binding-helper-sidebar .camera-binding-steps,
.camera-binding-helper-sidebar .camera-zone-binding-fields {
  grid-template-columns: 1fr;
}
.camera-binding-helper-sidebar .camera-zone-binding-row {
  grid-template-columns: 1fr;
}
.field-help {
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  line-height: 1;
  padding: 0;
  transform: translateY(0);
}
.camera-binding-field-head .field-help { margin-left: auto; }
.camera-binding-field-head > span,
.mini-copy-field > span,
.camera-zone-head span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mini-copy-field > span .field-help,
.camera-zone-head span .field-help { margin-left: 2px; }
@media (max-width: 760px) {
  .camera-binding-compact-cta { flex-direction: column; align-items: stretch; }
  .camera-binding-helper-sidebar { width: 100vw; }
  .camera-binding-sidebar-head { padding: 16px 14px 10px; }
  .camera-binding-sidebar-note { margin-left: 14px; margin-right: 14px; }
  .camera-binding-sidebar-scroll { padding: 12px 14px 18px; }
}

/* v0.9.7 Camera viewer panel + admin rights */
.camera-layout-viewer-ready .compact-camera-side {
  align-self: start;
}
.camera-viewer-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid rgba(96, 165, 250, .18);
  background: rgba(15, 23, 42, .34);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 12px 0 14px;
}
.camera-viewer-note b { color: #dbeafe; min-width: 112px; }
.camera-viewer-note span { color: var(--muted); line-height: 1.45; font-size: 13px; }
.camera-viewer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(2, 6, 23, .56);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: flex-end;
}
.camera-viewer-sidebar {
  width: min(980px, 82vw);
  height: 100vh;
  background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(2,6,23,.99));
  border-left: 1px solid rgba(148,163,184,.22);
  box-shadow: -24px 0 60px rgba(0,0,0,.42);
  display: flex;
  flex-direction: column;
  animation: cameraViewerIn .18s ease-out;
}
@keyframes cameraViewerIn {
  from { transform: translateX(24px); opacity: .82; }
  to { transform: translateX(0); opacity: 1; }
}
.camera-viewer-sidebar-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px 10px;
  border-bottom: 1px solid rgba(148,163,184,.12);
}
.camera-viewer-sidebar-head h3 { margin: 4px 0 0; }
.camera-viewer-sidebar-note {
  margin: 14px 20px 0;
  padding: 12px 14px;
  border: 1px solid rgba(70,224,178,.18);
  border-radius: 14px;
  background: rgba(8,47,73,.22);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.camera-viewer-sidebar-body {
  padding: 16px 20px 20px;
  overflow: auto;
  min-height: 0;
}
.camera-viewer-sidebar-body iframe {
  width: 100%;
  height: min(68vh, 720px);
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 16px;
  background: #020617;
}
.camera-card .camera-actions .primary-btn { min-width: 96px; }
@media (max-width: 900px) {
  .camera-viewer-sidebar { width: 100vw; }
  .camera-viewer-sidebar-body iframe { height: 56vh; }
  .camera-viewer-note { flex-direction: column; gap: 6px; }
}

/* v0.9.8 — equipment camera context */
.equipment-camera-cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 130px; }
.equipment-camera-cell span { color: var(--muted); font-size: 11px; line-height: 1.25; }
.equipment-camera-context-panel { border: 1px solid rgba(96,165,250,.28); background: linear-gradient(135deg, rgba(14,165,233,.12), rgba(15,23,42,.46)); border-radius: 18px; padding: 14px; margin: 14px 0 16px; box-shadow: 0 18px 45px rgba(2,6,23,.20); }
.equipment-camera-context-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 14px; }
.equipment-camera-context-summary > div { border: 1px solid rgba(148,163,184,.16); border-radius: 14px; background: rgba(2,6,23,.26); padding: 10px 12px; min-width: 0; }
.equipment-camera-context-summary span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.equipment-camera-context-summary b { display: block; color: #e5e7eb; margin-bottom: 5px; line-height: 1.25; overflow-wrap: anywhere; }
.equipment-camera-context-summary code { display: block; color: #bfdbfe; font-size: 11px; overflow-wrap: anywhere; }
.equipment-camera-context-summary small { color: var(--muted); line-height: 1.3; }
.equipment-context-cameras { margin-top: 8px; }
@media (max-width: 1100px) { .equipment-camera-context-summary { grid-template-columns: 1fr; } }

/* v0.9.9 — camera status dashboard */
.camera-status-dashboard {
  border: 1px solid rgba(96,165,250,.22);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(14,165,233,.12), rgba(15,23,42,.38));
  padding: 15px;
  margin: 14px 0 16px;
  box-shadow: 0 18px 45px rgba(2,6,23,.18);
}
.camera-status-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 13px; }
.camera-status-head h3 { margin: 0 0 5px; }
.camera-status-head p { margin: 0; color: var(--muted); line-height: 1.45; max-width: 760px; }
.camera-status-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.camera-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.camera-status-tile { border: 1px solid rgba(148,163,184,.16); border-radius: 16px; background: rgba(2,6,23,.28); padding: 12px; min-width: 0; }
.camera-status-tile.ok { border-color: rgba(52,211,153,.28); background: rgba(6,78,59,.16); }
.camera-status-tile.warn { border-color: rgba(251,191,36,.28); background: rgba(120,53,15,.16); }
.camera-status-tile.bad { border-color: rgba(248,113,113,.30); background: rgba(127,29,29,.16); }
.camera-status-tile.neutral { border-color: rgba(148,163,184,.18); }
.camera-status-tile.wide { grid-column: span 2; }
.camera-status-tile span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.camera-status-tile strong { display: block; color: #e5e7eb; line-height: 1.25; overflow-wrap: anywhere; }
.camera-status-tile small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.camera-status-problems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.camera-status-problems div { border: 1px solid rgba(248,113,113,.20); border-radius: 14px; padding: 9px 11px; background: rgba(127,29,29,.12); }
.camera-status-problems b { display: block; color: #fecaca; font-size: 12px; margin-bottom: 3px; }
.camera-status-problems span { display: block; color: #e5e7eb; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.camera-card.active-stream { box-shadow: 0 0 0 1px rgba(96,165,250,.32), 0 16px 32px rgba(2,6,23,.25); }
.camera-card-badges { display: inline-flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
@media (max-width: 1100px) {
  .camera-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camera-status-head { flex-direction: column; }
  .camera-status-actions { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .camera-status-grid, .camera-status-problems { grid-template-columns: 1fr; }
  .camera-status-tile.wide { grid-column: span 1; }
}


/* v0.9.14 — LocalApp connection helper */
.localapp-connection-helper-card {
  border: 1px solid rgba(56,189,248,.28);
  border-radius: 20px;
  padding: 16px;
  margin: 16px 0 4px;
  background:
    radial-gradient(circle at 0 0, rgba(14,165,233,.16), transparent 34%),
    linear-gradient(135deg, rgba(15,23,42,.72), rgba(2,6,23,.42));
  box-shadow: 0 16px 38px rgba(2,6,23,.18);
}
.localapp-connection-helper-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.localapp-connection-helper-head h3 { margin: 4px 0 6px; }
.localapp-connection-helper-head p { margin: 0; color: var(--muted); max-width: 760px; line-height: 1.5; }
.localapp-connection-route {
  min-width: 230px;
  border: 1px solid rgba(125,211,252,.2);
  border-radius: 14px;
  padding: 11px 12px;
  background: rgba(8,47,73,.28);
}
.localapp-connection-route span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.localapp-connection-route b { display: block; font-size: 14px; line-height: 1.35; }
.localapp-connection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
.localapp-connection-field {
  min-width: 0;
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 15px;
  padding: 11px;
  background: rgba(2,6,23,.28);
}
.localapp-connection-field.important-field { border-color: rgba(56,189,248,.34); background: rgba(3,105,161,.09); }
.localapp-connection-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}
.localapp-connection-field small { display: block; margin-top: 8px; color: var(--muted); }
.localapp-helper-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 12px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(251,191,36,.22);
  border-radius: 13px;
  background: rgba(120,53,15,.12);
  color: #fde68a;
  font-size: 13px;
  line-height: 1.45;
}
.localapp-helper-note span { color: var(--muted); }
.localapp-gateway-section { margin-top: 4px; }
.localapp-gateway-row {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(270px, 1.3fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid rgba(148,163,184,.12);
}
.localapp-gateway-row.disabled { opacity: .62; }
.localapp-gateway-main strong { display: block; margin-bottom: 3px; }
.localapp-gateway-main span { color: var(--muted); font-size: 12px; }
.localapp-helper-empty {
  padding: 13px;
  border: 1px dashed rgba(125,211,252,.3);
  border-radius: 14px;
  background: rgba(14,116,144,.08);
}
.localapp-helper-empty strong, .localapp-helper-empty span { display: block; }
.localapp-helper-empty span { margin-top: 5px; color: var(--muted); line-height: 1.45; }
.localapp-binding-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.localapp-binding-steps > div {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px;
  border: 1px solid rgba(148,163,184,.13);
  border-radius: 12px;
  background: rgba(15,23,42,.38);
  font-size: 12px;
  line-height: 1.4;
}
.localapp-binding-steps b {
  display: inline-flex;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(14,165,233,.18);
  color: #bae6fd;
}
.localapp-auth-note { margin: 12px 0 0; }
@media (max-width: 1100px) {
  .localapp-connection-grid { grid-template-columns: 1fr; }
  .localapp-gateway-row { grid-template-columns: 1fr; }
  .localapp-binding-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .localapp-connection-helper-head { flex-direction: column; }
  .localapp-connection-route { min-width: 0; width: 100%; }
  .localapp-binding-steps { grid-template-columns: 1fr; }
  .localapp-helper-note { flex-direction: column; }
}

/* v0.9.15.1 — LocalApp one-code pairing build fix */
.localapp-one-code-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.localapp-gateway-list { display: grid; gap: 12px; margin-top: 16px; }
.localapp-registered-gateway {
  border: 1px solid rgba(125,211,252,.20);
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(15,23,42,.66), rgba(3,7,18,.38));
}
.localapp-gateway-title { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.localapp-gateway-title strong, .localapp-gateway-title span { display:block; }
.localapp-gateway-title > div > span { color:var(--muted); font-size:12px; margin-top:4px; }
.localapp-gateway-metrics {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;
  margin:12px 0;
}
.localapp-gateway-metrics > div { min-width:0; border:1px solid rgba(148,163,184,.12); border-radius:12px; padding:9px; background:rgba(2,6,23,.28); }
.localapp-gateway-metrics span { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
.localapp-gateway-metrics b, .localapp-gateway-metrics code { display:block; overflow-wrap:anywhere; font-size:12px; }
.localapp-legacy-panel { margin-top:14px; }
.localapp-legacy-panel summary { cursor:pointer; display:flex; gap:10px; align-items:center; justify-content:space-between; }
.localapp-legacy-panel summary span { color:var(--muted); font-size:12px; }
.one-code-empty { margin-top:16px; }
.modal-card {
  width:min(620px, 96vw);
  max-height:92vh;
  overflow:auto;
  position:relative;
  border:1px solid rgba(125,211,252,.30);
  border-radius:24px;
  padding:26px;
  background:linear-gradient(180deg, rgba(18,34,57,.99), rgba(7,15,28,.99));
  box-shadow:0 34px 110px rgba(0,0,0,.60);
  text-align:center;
}
.modal-close { position:absolute; right:14px; top:12px; border:0; background:transparent; color:var(--muted); font-size:30px; cursor:pointer; }
.one-code-modal h2 { margin:8px 0 18px; }
.pairing-code { font:800 clamp(42px, 9vw, 76px)/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing:.12em; color:#e0f2fe; margin:12px 0 18px; text-shadow:0 0 30px rgba(56,189,248,.28); }
.pairing-countdown { margin:14px 0; color:var(--muted); }
.pairing-countdown strong { color:#fde68a; font-variant-numeric:tabular-nums; }
.pairing-instruction { display:grid; gap:5px; border:1px solid rgba(56,189,248,.18); border-radius:14px; padding:12px; background:rgba(3,105,161,.10); text-align:left; }
.pairing-instruction span { color:var(--muted); }
.pairing-wait { margin:15px 0; display:flex; justify-content:center; align-items:center; gap:9px; color:#bae6fd; }
.spinner-dot { width:10px; height:10px; border-radius:50%; background:#38bdf8; box-shadow:0 0 0 0 rgba(56,189,248,.5); animation:pairingPulse 1.35s infinite; }
@keyframes pairingPulse { 70% { box-shadow:0 0 0 10px rgba(56,189,248,0); } 100% { box-shadow:0 0 0 0 rgba(56,189,248,0); } }
.pairing-success { display:grid; gap:6px; margin:16px 0; padding:18px; border:1px solid rgba(74,222,128,.25); border-radius:16px; background:rgba(22,101,52,.16); }
.pairing-success strong { color:#bbf7d0; font-size:24px; }
.inline-error { margin:10px 0; padding:9px 11px; border-radius:12px; background:rgba(127,29,29,.18); color:#fecaca; font-size:12px; }
.danger-btn { border:1px solid rgba(248,113,113,.30); background:rgba(127,29,29,.18); color:#fecaca; border-radius:10px; padding:8px 11px; cursor:pointer; }
.danger-btn:hover { background:rgba(153,27,27,.28); }
@media (max-width:1000px) { .localapp-gateway-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) { .localapp-one-code-steps, .localapp-gateway-metrics { grid-template-columns:1fr; } .pairing-code { letter-spacing:.06em; } }