/* ============================================================
   Arktropix — Constructor Theme (v1)
   Рестайл конструктора под платформу («3D-Showroom / Blueprint»):
   Unbounded для заголовков, JetBrains Mono для значений/размеров,
   pill-кнопки, чертёжные уголки, зерно. ТОЛЬКО CSS-слой —
   логика, id и классы конструктора не тронуты.
   Подключается ПОСЛЕ inline-стилей constructor.html.
   ============================================================ */
:root {
  --ax-display: 'Unbounded Local', 'Unbounded', 'Segoe UI', 'Arial Black', sans-serif;
  --ax-mono: 'JetBrains Mono Local', 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Courier New', monospace;
  --ax-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* зерно поверх сцены — фирменная текстура платформы */
.ax-grain { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); }

/* ============ ШАПКА ============ */
.brand span {
  font-family: var(--ax-display); font-weight: 700; font-size: 16px; letter-spacing: 0.06em;
}
.brand span em { font-style: normal; color: var(--ice); }
.ax-logo-dot { display: inline-block; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%;
  background: var(--ice); box-shadow: 0 0 10px var(--ice); animation: axPulse 2.6s ease-in-out infinite;
  vertical-align: middle; }
@keyframes axPulse { 0%,100%{opacity:.5} 50%{opacity:1} }
.topbar-title { font-family: var(--ax-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }

/* pill-кнопки как на платформе */
.tb-btn { border-radius: 999px; padding: 0 16px; transition: background .15s, border-color .15s, transform .2s var(--ax-ease), filter .2s; }
.tb-btn:hover { transform: translateY(-1px); }
.tb-btn.primary { border: 0; box-shadow: 0 8px 22px rgba(62,124,184,0.4); }
.tb-btn.primary:hover { filter: brightness(1.12); }
.tb-menu { border-radius: 14px; }
.tb-menu button { border-radius: 10px; }

/* ============ СЦЕНА: чертёжные уголки + hint в моно ============ */
.ax-bp { position: absolute; width: 26px; height: 26px; pointer-events: none; z-index: 5; opacity: 0.8; }
.ax-bp::before, .ax-bp::after { content: ''; position: absolute; background: rgba(121,204,237,0.55); }
.ax-bp::before { width: 100%; height: 1.5px; }
.ax-bp::after { width: 1.5px; height: 100%; }
.ax-bp.tl { top: 14px; left: 14px; }
.ax-bp.tr { top: 14px; right: 14px; transform: rotate(90deg); }
.ax-bp.bl { bottom: 14px; left: 14px; transform: rotate(-90deg); }
.ax-bp.br { bottom: 14px; right: 14px; transform: rotate(180deg); }
@media (max-width: 860px) { .ax-bp { display: none; } }

.viewport-hint { font-family: var(--ax-mono); font-size: 10.5px; letter-spacing: 0.06em;
  border-color: rgba(121,204,237,0.28); border-radius: 999px; }
.viewport-hint b { color: var(--ice); }

/* ============ ПАНЕЛИ ============ */
.panel { border-radius: 18px; border-color: rgba(121,204,237,0.16); }
.panel-head h2, .tpl-head h2, .confirm-modal h3 {
  font-family: var(--ax-display); font-weight: 700; letter-spacing: 0.1em;
}
.panel-head h2 { font-size: 11.5px; }
.tpl-head h2 { font-size: 16px; letter-spacing: 0.02em; }
.confirm-modal h3 { font-size: 14.5px; letter-spacing: 0.02em; }
.group-title { font-family: var(--ax-mono); font-size: 10px; letter-spacing: 0.2em; }

/* значения/размеры/единицы — моно, как на платформе */
.num-box { font-family: var(--ax-mono); font-size: 12.5px; border-radius: 10px; }
.unit, .dims-readout, .tpl-badge, .proj-row .current-tag, .sel-bar #selName {
  font-family: var(--ax-mono); }
.dims-readout { font-size: 11.5px; border-radius: 12px; }
.dims-readout b { font-weight: 700; }

/* сегменты и свотчи */
.seg button { border-radius: 999px; font-weight: 700; }
.seg button.active { box-shadow: 0 4px 14px rgba(62,124,184,0.35); }
.swatch { border-radius: 10px; }
.appliance-item { border-radius: 10px; }

/* тулбар и режимы */
.toolbar, .mode-box { border-radius: 16px; border-color: rgba(121,204,237,0.16); }
.tool { border-radius: 12px; }
.mode-btn { border-radius: 999px; }

/* модалки */
.tpl-modal { border-radius: 20px; border-color: rgba(121,204,237,0.3); }
.tpl-card { border-radius: 14px; transition: transform .25s var(--ax-ease), border-color .2s, box-shadow .25s; }
.tpl-card:hover { transform: translateY(-5px); }
.tpl-close { border-radius: 999px; }
.confirm-modal { border-radius: 20px; border-color: rgba(121,204,237,0.3); }
.confirm-icon { border-radius: 14px; }
.type-pick-btn, .source-row { border-radius: 12px; }
.toast { border-radius: 999px; border-color: rgba(121,204,237,0.4); font-family: var(--ax-mono); font-size: 12px; }

/* аутлайнер */
.proj-row.active { border-radius: 10px; }
.obj-row.selected { border-radius: 10px; }

/* доступность / reduced motion */
:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .ax-logo-dot { animation: none; }
  .tb-btn, .tpl-card { transition: none; }
}