/* devdock.css — стили Dev-панели + DevDock-инспектора (dev-only). Тёмная тема под лендинг. */

/* feature-flag панель Рика (revealed by quad-click) */
#fz-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 100001; width: 230px; display: none;
  background: #0A0A0F; color: #F0F0F8; border: 1px solid #2E2E3D; border-radius: 14px; padding: 12px 14px;
  font: 400 12.5px/1.45 'Mulish', system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.fz-panel-h { font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.fz-panel-h span { display: block; font-weight: 400; font-size: 10px; color: #5A5A72; margin-top: 2px; }
.fz-flag { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 0; }
.fz-flag input { width: 16px; height: 16px; accent-color: #3B82FF; }
.fz-panel-hint { color: #9191A8; font-size: 11px; margin-top: 8px; }

#fz-firsthint {
  position: fixed; right: 16px; bottom: 16px; z-index: 100002;
  background: #3B82FF; color: #fff; border-radius: 999px; padding: 9px 15px;
  font: 600 12.5px/1 'Mulish', system-ui, sans-serif; box-shadow: 0 6px 18px rgba(59,130,255,.4);
}

/* подсветка размеченных элементов в trace-режиме */
body.fz-trace-on [data-testid] { outline: 1px dashed rgba(59,130,255,.5); outline-offset: 2px; }
body.fz-trace-on [data-testid]:hover { outline: 2px solid #3B82FF; cursor: help; }

#fz-tip {
  position: fixed; z-index: 100000; max-width: 300px; pointer-events: none;
  background: #0A0A0F; color: #F0F0F8; border: 1px solid #2E2E3D; border-radius: 10px;
  padding: 10px 12px; font: 400 12.5px/1.45 'Mulish', system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.fz-tip-id { display: block; font-weight: 700; font-size: 11.5px; letter-spacing: .02em; }
.fz-tip-kind { display: inline-block; margin: 5px 0; padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 700; }
.fz-tip-kind.EL { background: #1e3a8a; color: #cfe0ff; }
.fz-tip-kind.ACT { background: #155e3b; color: #c9f5dd; }
.fz-tip-kind.ST { background: #5a4a14; color: #f5e6b0; }
.fz-tip-kind.unknown { background: #5a1414; color: #f5c0c0; }
.fz-tip-desc { display: block; color: #c9c9d6; }

#fz-gaps {
  position: fixed; left: 16px; bottom: 16px; z-index: 99999; width: 320px; max-height: 46vh; overflow: auto;
  background: #0A0A0F; color: #F0F0F8; border: 1px solid #2E2E3D; border-radius: 12px; padding: 12px 14px;
  font: 400 12px/1.45 'Mulish', system-ui, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
#fz-gaps h4 { font-size: 13px; margin-bottom: 8px; color: #E8C87A; }
#fz-gaps h4 span { display: block; font-weight: 400; font-size: 10.5px; color: #9191A8; margin-top: 2px; }
.fz-gap { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; padding: 6px 0; border-top: 1px solid #1A1A24; }
.fz-gap-k { grid-row: span 2; align-self: start; padding: 1px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; }
.fz-gap-k.EL { background: #1e3a8a; color: #cfe0ff; } .fz-gap-k.ACT { background: #155e3b; color: #c9f5dd; } .fz-gap-k.ST { background: #5a4a14; color: #f5e6b0; }
.fz-gap-id { font-weight: 700; font-size: 11px; }
.fz-gap-desc { grid-column: 2; color: #9191A8; font-size: 11px; }