:root{
  --bg:#000;
  --fg:#fff;
  --green:#30cd61;
  --green2:#00c853;
  --panel:#0c0c0c;
  --line:#1b1b1b;
}

*{box-sizing:border-box}
@font-face {
  font-family: "Neue Machina";
  src: url("../assets/fonts/neu_machina/NeueMachina-Regular.woff2") format("woff2"),
       url("../assets/fonts/neu_machina/NeueMachina-Regular.woff") format("woff"),
       url("../assets/fonts/neu_machina/NeueMachina-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: "Neue Machina", sans-serif;
}
.top-header{
  text-align:center;
  padding:16px 12px 8px;
}
.top-header h1{
  margin:0;
  font-size:clamp(18px,2.4vw,24px);
}
.subtitle{
  margin-top:6px;
  color:#ccc;
  font-size:clamp(13px,2vw,16px);
}
.stage{
  max-width:1200px;
  margin:0 auto 32px;
  padding:0 10px;
}
.board-wrap{
  position:relative;
  max-width:min(980px,96vw);
  margin:8px auto 18px;
}
.board{
  width:100%;
  border-radius:12px;
  box-shadow:0 0 24px rgba(0,255,102,.25);
}
.hotspot{
  position:absolute;
  width:38px;
  height:38px;
  border-radius:50%;
  border:2px solid #30cd61;
  background:radial-gradient(circle at 30% 30%, var(--green), var(--green2));
  color:#021;
  font-weight:900;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 0 16px rgba(0,255,102,.8), inset 0 0 18px rgba(0,0,0,.5);
  transition:transform .15s ease, box-shadow .2s ease;
}
.hotspot:hover{
  transform:scale(1.08);
  box-shadow:0 0 30px rgba(0,255,102,1), inset 0 0 22px rgba(0,0,0,.6);
}
@media (max-width:1000px){
  .hotspot{width:35px;height:35px;font-size:20px;}
}
@media (max-width:900px){
  .hotspot{width:30px;height:30px;font-size:18px;}
}
@media (max-width:730px){
  .hotspot{width:24px;height:24px;font-size:14px;}
}
/* Positions handled via inline style on .hotspot-wrap */
/* .hot-mod-1 .hot-mod-2 .hot-kb .hot-sens .hot-sir positions are in devices-config.json */

.table-wrap{
  max-width:min(980px,96vw);
  margin:0 auto;
  background:#070707;
  border-radius:12px;
  border:1px solid #111;
  padding:10px;
}
.table-actions{
  display:flex;
  justify-content:flex-end;
  margin-bottom:6px;
}
.btn{
  background:#101010;
  color:#fff;
  border-radius:8px;
  border:1px solid #222;
  padding:8px 10px;
  cursor:pointer;
  font-size:13px;
}
.btn:hover{background:#181818;}
table{width:100%;border-collapse:collapse;}
th,td{
  padding:8px 6px;
  border-bottom:1px solid #151515;
  font-size:13px;
  text-align:left;
}
th{color:#c0c0c0;font-weight:500;}
.qty input{
  width:60px;
  padding:4px 6px;
  background:#101010;
  color:#fff;
  border-radius:6px;
  border:1px solid #252525;
}
.capacity{
  max-width:min(640px,96vw);
  margin:18px auto 32px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--panel);
  padding:12px 14px;
}
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:6px 0;
  gap:10px;
  flex-wrap:wrap;
  font-size:14px;
}
.row input,.row select{
  background:#101010;
  color:#fff;
  border-radius:8px;
  border:1px solid #252525;
  padding:6px 8px;
}
.row input,.hours{
  width:58px;
}

.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10;
}
.modal.open{display:flex;}
.modal::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.88);
}
.sheet{
  position:relative;
  z-index:1;
  width:min(760px,96vw);
  max-height:90vh;
  background:#0b0b0b;
  border-radius:14px;
  border:1px solid #30cd61;
  box-shadow:0 0 40px rgba(0,255,102,.3);
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
}
.sheet h3{margin:2px 0 10px;}
.close-x{
  position:absolute;
  top:6px;
  right:10px;
  border:none;
  background:transparent;
  color:#999;
  font-size:22px;
  cursor:pointer;
}
.tab-header{
  display:flex;
  gap:8px;
  margin:4px 0 10px;
  font-family: "Neue Machina", sans-serif;
}
.tab{
  flex:1;
  padding:8px;
  border-radius:999px;
  border:1px solid #1a1a1a;
  background:#101010;
  color:#e0e0e0;
  cursor:pointer;
  font-size:14px;
}
.tab.active{
  background:#30cd61;
  color:#001b0b;
  border-color:#30cd61;
  font-weight:600;
}
.tab-body{display:none;}
.tab-body.active{display:block;}
.kb-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
@media (max-width:720px){
  .kb-grid{grid-template-columns:repeat(2,1fr);}
}
.card{
  background:#101010;
  margin-top:5px;
  border-radius:12px;
  border:1px solid #1f1f1f;
  padding:8px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  transition:transform .15s ease,border-color .2s ease,box-shadow .2s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:#30cd61;
  box-shadow:0 0 18px rgba(0,255,102,.35);
}
.card img {
    width: 80%;
    height: 80%;
    object-fit: contain;   /* Вміщує всю картинку, нічого не ріже */
    object-position: center;
    padding: 10px;         /* красивий відступ всередині */
    background: rgba(255,255,255,0.04); /* легка підкладка */
    border-radius: 12px;
}
.card-label{
  font-size:13px;
  font-weight:600;
  text-align:center;
}
.kb-models{
  margin-top:12px;
  border-top:1px solid #151515;
  padding-top:10px;
}
.kb-models-title{
  font-size:14px;
  margin-bottom:6px;
}
.model-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.model-btn{
  border-radius:999px;
  border:1px solid #1f1f1f;
  background:#101010;
  color:#f5f5f5;
  padding:6px 10px;
  font-size:13px;
  cursor:pointer;
}
.model-btn:hover{
  background:#151515;
  border-color:#30cd61;
}

.mod-section{
  margin-bottom:10px;
}
.mod-section h4{
  margin:6px 0;
  font-size:14px;
}
.mod-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding: 10px;
}
@media (max-width:720px){
  .mod-grid{grid-template-columns:repeat(2,1fr);}
}

.list-generic{
  max-height:65vh;
  overflow:auto;
}
.item-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 6px;
  border-radius:10px;
  border:1px solid #1a1a1a;
  margin-bottom:6px;
  background:#101010;
}
.item-main{font-size:14px;}
.item-meta{font-size:12px;color:#a6ffcb;}
.add-btn{
  border-radius:10px;
  border:1px solid #30cd61;
  background:#30cd61;
  color:#001b0b;
  padding:6px 10px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
}
.add-btn:hover{background:#30cd61;}

/* v8.4 overflow tweaks */
.sheet{
  max-height:90vh;
  overflow-y:auto;
}
.tab-body{
  max-height:60vh;
  overflow-y:auto;
}


.hotspot.occupied{
  background:#555;
  border-color:#777;
  box-shadow:0 0 12px rgba(0,0,0,.7);
}

/* Заблоковане поле кількості (базовий прилад) */
.qty input.locked{
  background:#151515;
  color:#888;
  cursor:not-allowed;
}

.card.selected{
  outline:2px solid #30cd61;
  box-shadow:0 0 12px #30cd61;
  border-radius:12px;
}
.card.disabled{
  opacity:0.4;
  filter:grayscale(100%);
  cursor:not-allowed;
  pointer-events:none;
}
.card.conflict::after {
  content: "Несумісно";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #aaa;
}


/* Device tabs (main device / extenders) */
.device-tabs{
  display:flex;
  justify-content:center;
  margin:10px 0 4px;
}
.device-tabs-inner{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
#device-type-switch {
  display: none;
}

#device-type-switch[data-visible="true"] {
  display: flex; 
}
.dev-tab-btn{
  background:#050805;
  border:1px solid var(--green);
  color:var(--green);
  padding:6px 14px;
  border-radius:16px;
  cursor:pointer;
  font-size:14px;
  line-height:1.2;
  transition:background .2s,color .2s,transform .15s;
  font-family: "Neue Machina", sans-serif;
}
.dev-tab-btn:hover{
  transform:translateY(-1px);
}
.dev-tab-btn.active{
  background:var(--green);
  color:#000;
  font-family: "Neue Machina", sans-serif;
}

/* Extender pages */
.ext-pages{
  max-width:1100px;
  margin:0 auto 40px;
  font-family: "Neue Machina", sans-serif;
}
.ext-page{
  display:none;
}
.ext-page.active{
  display:block;
}

.ext-board-wrap{
  position:relative;
  display:flex;
  justify-content:center;
  margin:0 auto 20px;
  max-width:min(980px,96vw);
}
.ext-board{
  display:block;
  width:100%;
  max-width:min(980px,96vw);
  border-radius:12px;
  box-shadow:0 0 24px rgba(0,255,102,.25);
}



/* reuse .hotspot base, only position from inline style */
.hotspot.ext{
  z-index:5;
}

.ext-table{
  max-width:min(980px,96vw);
  margin:10px auto 0;
}
.ext-capacity{
  max-width:min(980px,96vw);
  margin:10px auto 0;
}
.ext-actions{
  max-width:min(980px,96vw);
  margin:10px auto 0;
  display:flex;
  justify-content:flex-end;
}
.ext-actions .btn{
  padding-inline:18px;
}

/* Верхня чорна панель */
.tiras-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #000000;
}

/* Чорний верх */
.tiras-top {
    width: 100%;
    height: 88px;
    align-content: center;
    background: #000;
    padding: 22px 80px;
}

.tiras-logo {
    width: 124px;
    height: 24px;
    border-top-width: 5px;
    margin-top: 10px;
    margin-left: 1px;
    user-select: none;
}
/* Сіра секція з посиланням */
.tiras-back {
    background: #000000;
    padding-top: 9px;
    padding-left: 80px;
    padding-bottom: 9px;
    padding-right: 80px;
    border-bottom: 1px solid #000000;
}

.tiras-back-link {
    font-size: 20px;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

.tiras-back-link:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Editable fields for custom sensors/sirens on ext devices */
.ext-edit{width:160px;padding:3px 6px;background:#101010;border:1px solid #444;color:#fff;border-radius:4px;font-size:12px;}
.ext-edit:focus{border-color:#30cd61;box-shadow:0 0 6px rgba(0,255,102,0.4);outline:none;}

/* Row delete button */
.row-del{
  background:transparent;
  border:none;
  color:#ff4444;
  cursor:pointer;
  font-size:16px;
  padding:4px 8px;
  transition:color 0.2s;
}
.row-del:hover{
  color:#ff6666;
}

/* Used item indicator */
.used-item {
  outline: 2px solid #30cd61 !important;
  box-shadow: 0 0 10px rgba(0,255,0,0.7) !important;
}

/* ============================================================
   MOBILE ACCORDION  (≤ 536px simplified mode)
   ============================================================ */

.mobile-accordion {
  display: none; /* hidden by default, shown at ≤ 536px */
  max-width: 96vw;
  margin: 0 auto 4px;
  padding: 0 10px;
}

@media (max-width: 536px) {
  /* Приберається картинка приладу та розширюча */
  .board-wrap      { display: none !important; }
  .ext-board-wrap  { display: none !important; }
  .mobile-accordion { display: block; }

  /* Cпрощений режим таблиці */
  .table-wrap tbody td:nth-child(2),
  .ext-table tbody td:nth-child(2) { font-size: 13px; }

  /* Caption change for simplified mode */
  .subtitle { display: none; }
  .subtitle-simple { display: block !important; }
}

/* Ext accordion spacing — sits inside ext-page */
.ext-accordion {
  margin-top: 8px;
  margin-bottom: 4px;
}

/* Simple subtitle shown only in accordion mode */
.subtitle-simple {
  display: none;
  margin-top: 6px;
  color: #ccc;
  font-size: clamp(13px, 2vw, 16px);
  text-align: center;
}

/* Accordion item wrapper */
.acc-item {
  border: 1px solid #1c1c1c;
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  background: #090909;
}

/* Accordion header button */
.acc-header {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 13px 14px;
  background: #0f0f0f;
  border: none;
  color: #fff;
  font-family: "Neue Machina", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  gap: 10px;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.acc-header:hover,
.acc-header:focus-visible {
  background: #161616;
}

.acc-label {
  flex: 1;
  min-width: 0;
}

/* Badge shows current selection */
.acc-badge {
  font-size: 11px;
  color: var(--green);
  background: rgba(48, 205, 97, 0.12);
  border: 1px solid rgba(48, 205, 97, 0.28);
  border-radius: 99px;
  padding: 2px 9px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none; /* shown only when has-item */
}

.acc-badge.has-item {
  display: inline-block;
}

.acc-arrow {
  color: var(--green);
  font-size: 11px;
  flex-shrink: 0;
  opacity: 0.8;
}

/* Expanded accordion body */
.acc-body {
  display: none;
  padding: 12px 10px 14px;
  border-top: 1px solid #141414;
  background: #060606;
}

.acc-body.open {
  display: block;
}

/* Card grid inside accordion — 2 columns */
.acc-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

/* Subsection separator (for Keyboards: families + extenders) */
.acc-subsection {
  margin-bottom: 14px;
}

.acc-subsection + .acc-subsection {
  border-top: 1px solid #111;
  padding-top: 12px;
}

/* Sub-section title (e.g. "Клавіатури:" / "Розширювачі:") */
.acc-sub-title {
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

/* Group label inside extenders list */
.acc-group-label {
  font-size: 11px;
  color: #fff;
  margin: 8px 0 4px;
}

/* Model pills box (appears after clicking a keyboard family card) */
.acc-models-box {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #111;
  min-height: 4px;
}

.acc-models-title {
  font-size: 12px;
  color: #fff;
  margin-bottom: 8px;
}

/* Highlight model button briefly after adding */
.model-btn.acc-model-added {
  background: rgba(48, 205, 97, 0.2);
  border-color: var(--green);
  color: var(--green);
}/* ============================================================
   RESPONSIVE — Tablet & Mobile  (calculator pages)
   ============================================================ */

/* ---------- Tablet (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  .stage { padding: 0 8px; }
  .board-wrap,
  .table-wrap,
  .capacity,
  .ext-table,
  .ext-capacity,
  .ext-actions { max-width: 96vw; }
}

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {
  .tiras-back { padding: 8px 14px !important; }
  .tiras-back-link { font-size: 14px !important; }
  .top-header { padding: 12px 12px 6px; }
  .top-header h1 { font-size: clamp(16px, 4vw, 20px); }
  .subtitle { font-size: 13px; padding: 0 4px; }

  .device-tabs-inner { gap: 6px; padding: 0 8px; justify-content: center; }
  .dev-tab-btn { font-size: 13px; padding: 5px 10px; }

  /* Board scales to fit */
  .board-wrap { max-width: 100vw; width: 100%; margin: 6px auto 12px; overflow: visible; }
  .board { width: 100%; height: auto; min-width: unset; }
  .hotspot {
    width: 3.8vw !important; height: 3.8vw !important;
    font-size: 2.2vw !important; min-width: 22px; min-height: 22px;
    border-width: 1.5px !important;
  }

  /* ---- Table: unified card layout ---- */
  .table-wrap {
    max-width: 100vw;
    padding: 8px 6px;
    overflow-x: visible;
  }

  table { width: 100%; border-collapse: collapse; }

  /* Hide header row */
  .table-wrap thead,
  .ext-table  thead { display: none; }

  /* Each <tr> = CSS Grid card
     Columns: [info: 1fr] [qty+action: auto]
     Rows:    type / name / meta                          */
  .table-wrap tbody tr,
  .ext-table  tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "type   type"
      "name   qty"
      "meta   act";
    border: 1px solid #1c1c1c;
    border-radius: 10px;
    margin-bottom: 8px;
    padding: 9px 12px;
    background: #0a0a0a;
    gap: 0 8px;
  }

  .table-wrap tbody td,
  .ext-table  tbody td {
    border: none;
    padding: 0;
    font-size: 13px;
    line-height: 1.4;
  }

  /* td 1 — Type */
  .table-wrap tbody td:nth-child(1),
  .ext-table  tbody td:nth-child(1) {
    grid-area: type;
    font-size: 10px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
  }

  /* td 2 — Name */
  .table-wrap tbody td:nth-child(2),
  .ext-table  tbody td:nth-child(2) {
    grid-area: name;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    align-self: center;
  }

  /* td 3 + td 4 — Norm & Alarm: both sit in "meta" area as inline-flex
     We use a subgrid trick: td3 is meta, td4 overlaps via display:contents parent
     Simplest real solution: td3 takes meta, td4 is absolute or… we use JS row wrapper.
     CLEANEST pure CSS: td3 = meta area, make it flex and use td4 as a sibling
     that we position with negative margin or place in "act" row override.

     Actually: grid-area on td4 can also be "meta" — both in same cell = overlap.
     So instead: put BOTH in a shared flex row by making td3 a flex container
     and using ~ sibling. We can't do that in CSS alone.

     Real fix: make the bottom row a 3-col subgrid spanning both cols.
     We do: td3 spans col1, td4 continues, td6 is at the end.             */

  /* Bottom info row: td3 (norm) + td4 (alarm) + td6 (action) in one line */
  .table-wrap tbody td:nth-child(3),
  .ext-table  tbody td:nth-child(3) {
    grid-column: 1; grid-row: 3;
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: #fff;
    border-top: 1px solid #111;
    padding-top: 6px; margin-top: 4px;
  }
  .table-wrap tbody td:nth-child(3)::before,
  .ext-table  tbody td:nth-child(3)::before {
    content: "Норма, мА:";
    color: #fff; white-space: nowrap;
  }

  /* td 4 — alarm: visually after td3, both in row 3 — use position trick:
     td4 has no grid-area, browser auto-places it after td3 in auto flow.
     We override: put it in col 1 row 3 too — it will stack under td3.
     Better: span td3 across both cols, use flex, hide td4 content via pseudo */

  /* THE CLEAN SOLUTION:
     - td3 spans BOTH columns in row 3, flex-row
     - td4 is removed from grid flow (display:contents or hidden)
     - td4 content shown inside td3 via CSS — NOT POSSIBLE for dynamic values

     VERDICT: use JS to inject a wrapper div around td3+td4 content,
     OR keep grid but accept td4 goes below td3.

     We go with: td3 col1 row3, td4 col1 row4, td6 col2 row3/4 span.
     This gives a clean 2-line meta section with action on the right.     */

  .table-wrap tbody td:nth-child(4),
  .ext-table  tbody td:nth-child(4) {
    grid-column: 1; grid-row: 4;
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: #fff;
    padding-bottom: 2px;
  }
  .table-wrap tbody td:nth-child(4)::before,
  .ext-table  tbody td:nth-child(4)::before {
    content: "Тривога, мА:";
    color: #fff; white-space: nowrap;
  }

  /* td 5 — Quantity: right side, rows 2–3 */
  .table-wrap tbody td:nth-child(5),
  .ext-table  tbody td:nth-child(5) {
    grid-column: 1; grid-row: 5 ;
    display: flex; align-items: center; justify-content: flex-start;
    align-self: center;
    gap: 8px;
    font-size: 11px;
  }

  /* td 6 — Action: right side, rows 3–4 */
  .table-wrap tbody td:nth-child(6),
  .ext-table  tbody td:nth-child(6) {
    grid-column: 2; grid-row: 3 / 5;
    display: flex; align-items: flex-end; justify-content: flex-end;
    padding-bottom: 2px;
  }

  /* Update grid template to include row 4 */
  .table-wrap tbody tr,
  .ext-table  tbody tr {
    grid-template-rows: auto auto auto auto;
  }

  .table-wrap .qty input,
  .ext-table  .qty input {
    width: 58px;
    padding: 5px 6px;
    font-size: 13px;
    text-align: center;
  }

  /* Locked qty */
  .table-wrap tbody td:nth-child(5) input.locked,
  .ext-table  tbody td:nth-child(5) input.locked {
    background: #0d0d0d;
    color: #fff;
    border-color: #1a1a1a;
  }
  .table-wrap tbody tr:has(.qty) td:nth-child(5)::before,
  .ext-table  tbody tr:has(.qty) td:nth-child(5)::before {
    content: "Кількість:"; color: #fff; white-space: nowrap;
  }
  .table-wrap tbody tr:has(.qty) td:nth-child(6),
  .ext-table  tbody tr:has(.qty) td:nth-child(6) {
    grid-column: 2; grid-row: 5;
  }

  /* ── Editable rows (Своє значення) ─────────────── */
  /* Name input: full col-span */
  .table-wrap tbody tr:has(.ext-edit) td:nth-child(2) .ext-edit,
  .ext-table  tbody tr:has(.ext-edit) td:nth-child(2) .ext-edit {
    width: 100%; font-size: 13px; padding: 5px 8px; box-sizing: border-box;
  }

  /* Norm / Alarm inputs */
  .table-wrap tbody tr:has(.ext-edit) td:nth-child(3) .ext-edit,
  .table-wrap tbody tr:has(.ext-edit) td:nth-child(4) .ext-edit,
  .ext-table  tbody tr:has(.ext-edit) td:nth-child(3) .ext-edit,
  .ext-table  tbody tr:has(.ext-edit) td:nth-child(4) .ext-edit {
    width: 72px; font-size: 12px; padding: 4px 6px;
  }

  /* Qty row for custom items */
  .table-wrap tbody tr:has(.ext-edit) td:nth-child(5),
  .ext-table  tbody tr:has(.ext-edit) td:nth-child(5) {
    grid-column: 1; grid-row: 5;
    justify-content: flex-start;
    gap: 8px; font-size: 11px; color: #fff;
  }
  .table-wrap tbody tr:has(.ext-edit) td:nth-child(5)::before,
  .ext-table  tbody tr:has(.ext-edit) td:nth-child(5)::before {
    content: "Кількість:"; color: #fff; white-space: nowrap;
  }
  .table-wrap tbody tr:has(.ext-edit) td:nth-child(6),
  .ext-table  tbody tr:has(.ext-edit) td:nth-child(6) {
    grid-column: 2; grid-row: 5;
  }

  .table-actions { margin-bottom: 8px; }
  .btn { font-size: 12px; padding: 7px 10px; }
  .row-del { font-size: 16px; padding: 2px 4px; color: #ff4444; }
  .add-btn { align-self: flex-end; padding: 5px 12px; font-size: 12px; }
  /* Ext board */
  .ext-board-wrap { width: 100%; overflow: visible; }
  .ext-board { width: 100%; height: auto; min-width: unset; }
  .ext-table, .ext-capacity, .ext-actions { max-width: 98vw; }
}

/* ---------- Mobile portrait (≤ 480px) ---------- */
@media (max-width: 480px) {
  .tiras-back { padding: 7px 10px !important; }
  .device-tabs-inner { flex-wrap: wrap; padding: 0 6px; gap: 5px; }
  .dev-tab-btn { font-size: 12px; padding: 5px 9px; border-radius: 14px; }
  .hotspot { width: 4.5vw !important; height: 4.5vw !important; font-size: 2.6vw !important; }

  /* Card name slightly smaller */
  .table-wrap tbody td:nth-child(2),
  .ext-table  tbody td:nth-child(2) { font-size: 13px; }
  .table-wrap .qty input,
  .ext-table  .qty input { width: 44px; }

  .row { font-size: 12px; }
  .row label { font-size: 11px; }
  .row input, .hours { width: 56px; }

  .sheet { max-height: 90vh; padding: 14px 10px 22px; }
  .tab-body { max-height: 62vh; }
  .mod-grid { padding: 4px; gap: 6px; }
  .mod-section h4 { font-size: 13px; }
  .model-btn { font-size: 12px; padding: 5px 9px; }
  .model-list { gap: 6px; }
  .ext-edit { width: 110px; font-size: 11px; }
}

/* ---------- Very small (≤ 360px) ---------- */
@media (max-width: 360px) {
  .tiras-back-link { font-size: 13px !important; }
  .top-header h1 { font-size: 14px; }
  .subtitle { font-size: 12px; }
  .hotspot { width: 5vw !important; height: 5vw !important; font-size: 3vw !important; min-width: 18px; min-height: 18px; }
  .table-wrap tbody td:nth-child(2),
  .ext-table  tbody td:nth-child(2) { font-size: 12px; }
}


/* ---- Board skeleton loader ---- */
.board-wrap.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0d0d0d 25%, #1a1a1a 50%, #0d0d0d 75%);
  background-size: 200% 100%;
  animation: board-shimmer 1.4s infinite;
  border-radius: 12px;
  z-index: 1;
}
@keyframes board-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.board {
  min-height: 200px;
}

/* ═══════════════════════════════════════════════
   HOTSPOT WRAP + LABELS
═══════════════════════════════════════════════ */
.hotspot-wrap {
  position: absolute;
  width: 40px;
  height: 52px;          /* 🔑 фіксована висота */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hotspot-wrap .hotspot {
  position: static;   /* position now comes from parent wrap */
  pointer-events: all;
  transform: none;
  flex-shrink: 0;
}
.hotspot-wrap .hotspot:hover {
  transform: scale(1.08);
}
.hotspot-label {
  margin-top: 3px;
  font-size: 8px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(0, 255, 102, 0.5);
  pointer-events: none;
  user-select: none;
  transition: opacity 0.2s ease;
}
/* hide label when hotspot is occupied */
.hotspot-wrap:has(.hotspot.occupied) .hotspot-label {
  opacity: 0;
}

/* ── PRO mode: hide all labels ── */
.pro-mode .hotspot-label {
  display: none;
}

/* ═══════════════════════════════════════════════
   PRO MODE TOGGLE
═══════════════════════════════════════════════ */
.pro-toggle {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 8px;
  border-radius: 20px;
  border: 1px solid #2a2a2a;
  background: #111;
  color: #555;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
}
.pro-toggle:hover {
  border-color: #444;
  color: #888;
}
.pro-toggle.active {
  border-color: #30cd61;
  color: #30cd61;
  background: rgba(48, 205, 97, 0.08);
  box-shadow: 0 0 10px rgba(48, 205, 97, 0.2);
}
.pro-icon {
  font-size: 12px;
  line-height: 1;
}
/* hide PRO toggle on mobile (accordion mode) */
@media (max-width: 536px) {
  .pro-toggle { display: none; }
}