/* ===== LEFT HAMBURGER BUTTON & SIDE DRAWER ===== */
#btnHamburger {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  background: rgba(13, 15, 20, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: 0.15s;
  flex: none;
}
#btnHamburger:hover { border-color: var(--yellow-border); }
#btnHamburger span {
  display: block;
  width: 17px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

#sideDrawerBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#sideDrawerBackdrop.open {
  opacity: 1;
  pointer-events: auto;
}

#sideDrawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 85vw);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #0d0f14;
  border-right: 1px solid var(--border);
  z-index: 120;
  transform: translateX(-105%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 20px 0 50px rgba(0,0,0,0.6);
}
#sideDrawer.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.drawer-header {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.drawer-brand { display: flex; align-items: center; gap: 10px; }
.drawer-logo {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #FFC700, #E5A800);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: #07080a;
}
.drawer-titles { display: flex; flex-direction: column; }
.drawer-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
}
.drawer-sub {
  font-size: 10.5px;
  color: var(--yellow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.drawer-close {
  width: 32px;
  height: 32px;
  background: var(--bg-card-inner);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--mut);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
}
.drawer-close:hover { color: #ffffff; border-color: var(--border-active); }

.drawer-section { padding: 14px 12px 6px; }
.drawer-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  padding: 0 8px;
}
.drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 10px;
  color: var(--txt);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.drawer-item:hover {
  background: var(--bg-card-hover);
  color: #ffffff;
}
.drawer-item svg {
  width: 18px;
  height: 18px;
  color: var(--yellow);
  flex: none;
}
.drawer-item.green svg { color: var(--emerald); }
.drawer-item.soon { opacity: 0.55; cursor: default; }
.drawer-item.soon svg { color: var(--mut); }
.drawer-footer {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer-footer a { color: var(--yellow); text-decoration: none; }

/* ===== CURVED BOTTOM DOCK ===== */
#curvedDock {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 440px;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 90;
  pointer-events: auto;
}
.dock-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 -2px 8px rgba(0,0,0,0.28));
}
.dock-bar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px calc(env(safe-area-inset-bottom, 0px) + 2px);
}
.dock-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  width: 64px;
  background: none;
  border: none;
  transition: color 0.15s, transform 0.15s;
  white-space: nowrap;
}
.dock-tab span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dock-tab svg { width: 20px; height: 20px; flex: none; }
.dock-tab.active, .dock-tab:hover { color: var(--emerald); }
.dock-tab:active { transform: scale(0.92); }

.dock-fab-wrapper {
  position: relative;
  width: 68px;
  display: flex;
  justify-content: center;
}
#fabScanQR {
  position: absolute;
  top: -34px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border: 3.5px solid var(--bg);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
#fabScanQR:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.6);
}
#fabScanQR:active { transform: scale(0.92); }
#fabScanQR svg { width: 22px; height: 22px; }

@media (max-width: 375px) {
  .dock-bar { padding: 0 4px calc(env(safe-area-inset-bottom, 0px) + 2px); }
  .dock-tab { width: 56px; font-size: 9.5px; gap: 2px; }
  .dock-tab svg { width: 18px; height: 18px; }
  .dock-fab-wrapper { width: 58px; }
  #fabScanQR { top: -32px; width: 48px; height: 48px; }
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
#c3d{position:fixed;inset:0;touch-action:none;z-index:1}
#sceneArVideo{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:none;pointer-events:none}
#sceneArBadge{display:none;position:fixed;top:54px;left:50%;transform:translateX(-50%);z-index:7;background:rgba(13,15,20,0.85);backdrop-filter:blur(12px);border:1px solid rgba(56,189,248,0.35);border-radius:22px;padding:5px 12px;color:#38bdf8;font-size:12px;font-weight:600;align-items:center;gap:8px;box-shadow:0 6px 20px rgba(0,0,0,0.45);pointer-events:auto;transition:opacity 0.4s cubic-bezier(0.16,1,0.3,1),transform 0.4s cubic-bezier(0.16,1,0.3,1)}
#sceneArBadge.active{display:flex}
#sceneArBadge.faded{opacity:0.25;transform:translateX(-50%) translateY(-6px) scale(0.92)}
#sceneArBadge:hover,#sceneArBadge:active{opacity:1!important;transform:translateX(-50%) translateY(0) scale(1)!important}
body.shot #sceneArBadge{display:none!important}
/* yuqori panel */
#top{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:7px;padding:calc(env(safe-area-inset-top, 0px) + 6px) 8px 6px;background:transparent;pointer-events:none;z-index:5}
#top a,#top button,#title{pointer-events:auto}
#top a,#top button{background:rgba(13,15,20,0.85);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.08);color:#e5e7eb;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;width:38px;height:38px;min-width:38px;min-height:38px;padding:0;transition:.12s;flex:none}
#top a:active,#top button:active{transform:scale(.92)}
#top button.on{background:#ff8a2a; color:#10141a; border-color:#ff8a2a}
/* Animatsiya tugmasi TOGGLE: yopiq -> ▶, ochiq -> ◼ (bosilsa yopiladi) */
#btnAnimTop .ic-stop{display:none}
#btnAnimTop.on .ic-play{display:none}
#btnAnimTop.on .ic-stop{display:block}
#vcube{position:fixed;top:56px;right:10px;width:68px;height:68px;z-index:6;cursor:pointer;touch-action:none;color:transparent;text-indent:-9999px}
@media (min-width:768px){#vcube{width:88px;height:88px;top:60px;right:14px}}
#menu button.on{color:var(--acc);background:#ff8a2a14}
#top a svg,#top button svg{width:19px;height:19px;display:block}
#top #btnCam{background:var(--acc);color:#1a1006;border-color:transparent;box-shadow:0 3px 12px #ff8a2a40}
#top #btnLang{width:auto;min-width:38px;height:38px;padding:0 9px;font-size:12.5px;font-weight:700;gap:4px;flex:none}
#top #btnLang svg{width:15px;height:15px}
#title{font-size:13px;color:var(--txt);font-weight:600;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 12px;min-width:0;background:rgba(13,15,20,0.78);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.08);border-radius:10px;height:38px;display:flex;align-items:center;justify-content:center;}
#title:empty{display:none!important;}
/* yuqori o'ng menyu */
#menu{position:fixed;top:58px;right:11px;background:#ffffffF5;backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;z-index:9;display:none;overflow:hidden;min-width:216px;box-shadow:0 12px 32px #0000002e}
#menu button,#menu a{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;color:var(--txt);padding:13px 15px;font-size:14.5px;cursor:pointer;text-decoration:none;border-bottom:1px solid #e6eaef;text-align:left}
#menu button:active,#menu a:active{background:#00000010}
#menu button:last-of-type,#menu a:last-of-type{border-bottom:none}
#menu svg{width:19px;height:19px;flex:none;color:var(--acc)}
#menu button.grnicon svg{color:var(--ok)}
#menu button.grnicon.on{background:#1f9d5714}
#menu .mv{padding:9px 15px;font:11px monospace;color:#8a96a2;text-align:center;border-top:1px solid #e6eaef}
/* HALI TAYYOR EMAS (AR, video qo'llanma): kulrang — bosilsa "yaqin orada" ogohlantirishi */
#menu button.soon,#menu a.soon{color:#9aa4ae;cursor:default}
#menu button.soon svg,#menu a.soon svg{color:#b8c0c8}
#menu button.soon:hover,#menu a.soon:hover{background:transparent}
/* rejim almashtirgich */
/* (1·Aniqlash / 2·Teshilish toggle olib tashlandi — teshilish endi info paneldagi tugma orqali) */
/* (kamera/qo'lda tugmalari endi yuqori panelда — #top ichida) */

/* ===== INFO PANEL (Tanlangan detal kartasi) ===== */
#info {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  max-width: 500px;
  margin: 0 auto;
  background: rgba(13, 15, 20, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 10px 12px;
  z-index: 5;
  display: none;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}
#info .des {
  display: inline-block;
  background: var(--acc);
  color: #1a1006;
  font-weight: 800;
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 13.5px;
  margin-right: 7px;
}
#info .nm {
  font-size: 14.5px;
  font-weight: 700;
}
#info .ln {
  color: var(--mut);
  font-size: 11.8px;
  margin-top: 4px;
  line-height: 1.5;
}
#info .sz {
  color: #38bdf8;
  font-weight: 600;
}
/* tugmalar BIR QATORDA (mobilda panel ekranni to'ldirmasin) — 4 ta tugma chiroyli sig'adi */
#info .btns {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  width: 100%;
}
#info .btns button {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 9px;
  padding: 6px 2px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
#info .btns button span {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#info .btns button svg {
  width: 16px;
  height: 16px;
  flex: none;
}
#info .btns button:active {
  transform: scale(0.96);
}
#btnDrill {
  display: none;
  background: #ff8a2a1c;
  color: var(--acc);
  border: 1px solid #ff8a2a55;
}
#btnBazis {
  display: none;
  background: #3b82f61c;
  color: #60a5fa;
  border: 1px solid #3b82f655;
}
#btnIso {
  display: none;
  background: #36c5f01c;
  color: #1f8fc7;
  border: 1px solid #36c5f055;
}
#btnFrame {
  display: none;
  background: #1f9d571c;
  color: var(--ok);
  border: 1px solid #1f9d5755;
}
/* RENTGEN rejim: tanlanganda qolgan detallar xiralashadi. O'chirilsa — oddiy tanlash */
#btnXray {
  display: none;
  background: #8b5cf61c;
  color: #a78bfa;
  border: 1px solid #8b5cf655;
}
#btnXray.off {
  background: #0000000a;
  color: var(--mut);
  border: 1px solid var(--line);
}