:root {
  --bg: #0b0f19;
  --bg-grad: radial-gradient(1200px 600px at 10% 10%, #0f1a2b 0%, #0b0f19 60%, #090c13 100%);
  --text: #eaf0ff;
  --panel-bg: rgba(13, 18, 28, 0.55);
  --panel-border: rgba(255, 255, 255, 0.16);
  --panel-shadow: 0 14px 40px rgba(0,0,0,0.35);
  --radius: 12px;
  --control-height: 34px;
  --input-bg: rgba(255,255,255,0.04);
  --input-border: rgba(255,255,255,0.18);
  --button-bg: linear-gradient(135deg, #64d2ff 0%, #26c3ff 100%);
  --button-text: #071024;
  --button-hover: linear-gradient(135deg, #7ae0ff 0%, #39ccff 100%);
  --ghost-bg: rgba(255,255,255,0.10);
  --ghost-bd: rgba(255,255,255,0.18);
  --ghost-hover: rgba(255,255,255,0.16);
  --vh: 1vh;
}
[data-theme="tech"] {
  --bg: #0b0f19;
  --bg-grad: radial-gradient(1200px 600px at 10% 10%, #0f1a2b 0%, #0b0f19 60%, #090c13 100%);
  --text: #eaf0ff;
  --panel-bg: rgba(13, 18, 28, 0.55);
  --panel-border: rgba(255, 255, 255, 0.16);
  --panel-shadow: 0 14px 40px rgba(0,0,0,0.35);
  --input-bg: rgba(255,255,255,0.04);
  --button-bg: linear-gradient(135deg, #64d2ff 0%, #26c3ff 100%);
  --button-hover: linear-gradient(135deg, #7ae0ff 0%, #39ccff 100%);
}
[data-theme="campus"] {
  --bg: #f6f7fb;
  --bg-grad: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, #f6f7fb 60%, #eef1f7 100%);
  --text: #0f1a2b;
  --panel-bg: rgba(255,255,255,0.72);
  --panel-border: rgba(10, 20, 30, 0.10);
  --panel-shadow: 0 14px 40px rgba(10,20,30,0.10);
  --input-bg: rgba(10,20,30,0.04);
  --input-border: rgba(10,20,30,0.14);
  --button-bg: linear-gradient(135deg, #3ec1ff 0%, #2bb7f5 100%);
  --button-text: #002033;
  --button-hover: linear-gradient(135deg, #62d0ff 0%, #3ec1ff 100%);
  --ghost-bg: rgba(10,20,30,0.07);
  --ghost-bd: rgba(10,20,30,0.12);
  --ghost-hover: rgba(10,20,30,0.12);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  background-image: var(--bg-grad);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial,
               "PingFang SC", "Microsoft YaHei", sans-serif;
}

.appRoot {
  position: relative;
  width: 100%;
  height: calc(var(--vh) * 100);
}
@supports (height: 100dvh) {
  .appRoot { height: 100dvh; }
}

/* ===== 背景底图（隐藏，仅用于 naturalWidth / naturalHeight） ===== */
#floorImg{
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ===== Canvas 显示层 ===== */
#overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  transition: transform .2s ease-out;
}

/* 竖屏提示已取消（按产品要求，移动端竖屏为主姿态） */

/* 控制面板 */
#controls{
  position:absolute;
  left:16px;
  bottom: 16px;
  right:12px;

  padding:14px;
  border-radius: var(--radius);

  background: var(--panel-bg);
  backdrop-filter: blur(12px);

  display:flex;
  flex-direction:column;
  gap:10px;

  max-width:520px;
  box-shadow: var(--panel-shadow);

  will-change: left, top;
  border: 1px solid var(--panel-border);
  transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
  z-index: 10000;
}

/* 标题栏 */
#controls .title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
#controls .title .title-icon{ font-size:18px }
#controls .title .title-text{ opacity:.95 }
#controls .title .title-tag{
  margin-left:auto;
  font-size:11px;
  opacity:.75;
  padding:2px 6px;
  border-radius: 8px;
  border:1px solid var(--panel-border);
}
.sheet-toggle{
  display: none;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: var(--ghost-bg);
  cursor: pointer;
  position: relative;
}
.sheet-toggle::before{
  content: "﹀";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 14px;
}
[data-collapsed="true"] .sheet-toggle::before{
  content: "︿";
}

#controls.dragging .title{
  cursor:grabbing;
}

/* 每一行布局 */
#controls .row{
  display:grid;
  grid-template-columns: 64px 1fr 1fr;
  gap:8px;
  align-items:center;
}

/* label */
#controls label{
  font-size:12px;
  opacity:.9;
}

/* 下拉框 / 搜索框 */
#controls select,
#controls .search{
  height: var(--control-height);
  border-radius: var(--radius);

  border:1px solid var(--input-border);
  background: var(--input-bg);

  color: var(--text);
  padding:0 12px;
  font-size:13px;

  outline:none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
#controls select:hover,
#controls .search:hover{
  border-color: rgba(100,210,255,0.5);
  box-shadow: 0 0 0 3px rgba(100,210,255,0.12) inset;
}

/* 按钮行 */
#controls .actions{
  grid-template-columns: 1fr auto auto;
  gap:8px;
}

/* 主按钮 */
#controls button{
  height: var(--control-height);
  border-radius: var(--radius);

  border:none;
  padding:0 14px;

  cursor:pointer;
  background: var(--button-bg);
  color: var(--button-text);

  font-weight:700;
  font-size:13px;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
#controls button:hover{
  background: var(--button-hover);
  box-shadow: 0 6px 18px rgba(38,195,255,0.3);
}
#controls button:active{
  transform: translateY(1px);
}

/* 次级按钮 */
#controls button.ghost{
  background: var(--ghost-bg);
  color: var(--text);
  border:1px solid var(--ghost-bd);
  font-weight:600;
}
#controls button.ghost:hover{
  background: var(--ghost-hover);
}

/* 逐步导航 / 提示区域 */
#result{
  font-size:12px;
  opacity:.98;
  line-height:1.45;
}

/* 移动端布局 */
@media (max-width: 900px), (pointer: coarse) {
  #controls{
    position: fixed;
    left:0;
    right:0;
    bottom: env(safe-area-inset-bottom, 0px);
    max-width: none;
    border-radius: 16px 16px 0 0;
    padding: 12px;
    gap: 8px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-height: 75vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #controls .title{
    font-size:13px;
    padding-bottom:4px;
    position: sticky;
    top: 0;
    z-index: 10001;
    background: var(--panel-bg);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 -1px 0 var(--panel-border);
  }
  #controls .title .title-tag{ display:none; }
  #controls .title .title-icon{ font-size:16px; }
  #controls .title .title-text{ font-weight:800; }
  #controls .title .sheet-toggle{ display:inline-block; margin-left:8px; }
  #controls .title .sheet-toggle{ width:44px; height:44px; border-radius:22px; }

  #controls .row{
    grid-template-columns: 1fr;
    gap:6px;
  }
  #controls label{ margin-bottom:4px; font-size:12px; }
  #controls select, #controls .search{
    height: 36px;
    font-size: 14px;
  }
  #controls .actions{ grid-template-columns: 1fr auto; display: grid; }
  #controls button{
    height: 36px;
    font-size: 14px;
  }
  #result{ font-size: 13px; }

  #controls[data-collapsed="true"] .row:not(.actions){ display:none; }
  #controls[data-collapsed="true"] #result{ display:none; }
  #controls[data-collapsed="true"] .actions .ghost{ display:none; }
  #controls[data-collapsed="true"] .actions{ display: grid; }
}