#topbar { position: fixed; top: calc(8px + var(--sat)); left: calc(8px + var(--sal) + var(--hubw)); right: calc(8px + var(--sar)); height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 8px; z-index: 10; }
#topbar .sp { flex: 1; }
#mapName { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; padding-left: 4px; }
#tools { position: fixed; top: calc(60px + var(--sat)); left: calc(8px + var(--sal)); width: 64px; bottom: calc(8px + var(--sab)); max-height: calc(100% - 68px - 188px); overflow-y: auto; padding: 6px 4px; display: flex; flex-direction: column; gap: 4px; z-index: 9; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0; border-radius: 8px; cursor: pointer; border: 1px solid transparent; color: #ddd; background: transparent; font-family: inherit; }
.tool i { font-style: normal; font-size: 20px; line-height: 1; }
.tool span { font-size: 11px; letter-spacing: 1px; }
.tool:hover { background: rgba(255,255,255,.06); }
.tool.on { background: linear-gradient(180deg, rgba(227,185,85,.35), rgba(227,185,85,.1)); border-color: var(--line); color: #fff; }
#props { position: fixed; top: calc(60px + var(--sat)); right: calc(8px + var(--sar)); width: 260px; max-height: calc(100% - 68px - var(--sat) - var(--sab)); overflow-y: auto; padding: 10px; z-index: 9; transition: transform .2s; }
#props.collapsed { transform: translateX(calc(100% + 12px)); }
#propsX { position: sticky; top: 0; float: right; z-index: 2; width: 28px; height: 28px; margin: -4px -4px 0 6px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel2); color: var(--gold2); font-size: 14px; line-height: 1; cursor: pointer; font-family: inherit; }
#propsX:hover { background: rgba(227,185,85,.2); }
/* 工具栏：按钮下方的空白区域可点击 → 退出工具进入浏览模式 */
#tools { cursor: default; }
#tools::after { content: '点空白处\A 浏览'; white-space: pre; text-align: center; font-size: 10px; color: rgba(255,255,255,.28); margin-top: auto; padding: 10px 0 4px; pointer-events: none; line-height: 1.5; }
body.browse #tools::after { content: '浏览中'; color: var(--gold2); opacity: .7; }
.sec { margin-bottom: 10px; }
.sec h4 { font-size: 11px; color: #a99c7c; letter-spacing: 3px; margin: 2px 2px 6px; font-weight: 400; }
.row { display: flex; align-items: center; gap: 8px; margin: 6px 2px; font-size: 12px; }
.row label { width: 46px; color: var(--dim); flex-shrink: 0; }
.row input[type=range] { flex: 1; accent-color: var(--gold); }
.row .v { width: 30px; text-align: right; font-family: monospace; color: var(--gold2); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: #ccc; padding: 5px 9px; border-radius: 14px; font-size: 12px; cursor: pointer; font-family: inherit; }
.chip.on { background: var(--gold); color: #221; border-color: var(--gold); font-weight: 700; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sw { aspect-ratio: 1; border-radius: 8px; border: 2px solid transparent; cursor: pointer; position: relative; overflow: hidden; background-size: cover; }
.sw.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(227,185,85,.35); }
.sw span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; text-align: center; background: rgba(0,0,0,.55); padding: 1px 0; }
.plist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pi { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pi .th { width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; display: block; position: relative;
  background: radial-gradient(circle at 50% 60%, rgba(120,160,90,.35), rgba(20,26,34,.6) 72%); }
.pi .th img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .15s; }
.pi:hover .th img { transform: scale(1.08); }
.pi .th .ld { position: absolute; inset: 35%; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--gold); animation: thspin .8s linear infinite; }
@keyframes thspin { to { transform: rotate(360deg); } }
.pi .nm { line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pi.on .th { box-shadow: inset 0 0 0 2px var(--gold); }
.pi { padding: 4px 4px 5px; border-radius: 7px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 12px; cursor: pointer; text-align: center; color: #ddd; font-family: inherit; }
.pi.on { background: linear-gradient(180deg, rgba(227,185,85,.35), rgba(227,185,85,.1)); border-color: var(--gold); color: #fff; }
.hint { font-size: 11px; color: var(--dim); line-height: 1.6; margin: 4px 2px; }
#mm { position: fixed; left: calc(8px + var(--sal)); bottom: calc(8px + var(--sab)); width: 172px; height: 172px; border: 2px solid var(--line); border-radius: 8px; background: #000; z-index: 9; touch-action: none; }
#status { position: fixed; left: calc(190px + var(--sal)); bottom: calc(10px + var(--sab)); font-size: 11px; color: #cfc; background: rgba(0,0,0,.5); padding: 3px 8px; border-radius: 6px; font-family: monospace; z-index: 8; pointer-events: none; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 60; }
.modal.hide { display: none; }
.modal .box { width: min(440px, 92vw); max-height: 86vh; overflow-y: auto; padding: 16px; }
.modal h3 { color: var(--gold); letter-spacing: 2px; margin-bottom: 10px; font-size: 16px; }
.modal .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.modal input[type=text], .modal textarea, .modal select { width: 100%; background: rgba(0,0,0,.4); color: #eee; border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font-family: inherit; font-size: 13px; }
.modal textarea { min-height: 60px; resize: vertical; }
.modal .lbl { font-size: 11px; color: var(--dim); margin: 8px 0 4px; }
.saved { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; margin-bottom: 5px; font-size: 13px; }
.saved .a { display: flex; gap: 4px; }
body.play #tools, body.play #props { display: none; }
@media (max-width: 900px), (max-height: 500px) {
  #props { width: 220px; padding: 8px; right: calc(8px + var(--sar)); left: auto; max-width: calc(100vw - 90px); box-sizing: border-box; }
  #props .plist { grid-template-columns: repeat(3, 1fr); gap: 4px; } #props .pi { padding: 3px 3px 4px; font-size: 10.5px; }
  #mm { width: 120px; height: 120px; } #status { left: calc(136px + var(--sal)); }
  #tools { max-height: calc(100% - 68px - 136px); width: 58px; }
  .tool i { font-size: 18px; } .tool { padding: 5px 0; }
}
@media (max-width: 560px) { /* 竖屏手机：属性面板在底部 */
  #props { top: auto; bottom: calc(8px + var(--sab)); right: 8px; left: 72px; width: auto; max-height: 42%; }
  #props.collapsed { transform: translateY(calc(100% + 12px)); }
  #mm { display: none; } #status { left: 76px; bottom: auto; top: calc(58px + var(--sat)); }
  #tools { max-height: none; bottom: calc(8px + var(--sab)); }
  #mapName { display: none; }
}

@media (max-height: 500px) and (orientation: landscape) {
  #topbar { height: 38px; } #hubBack { top: calc(11px + var(--sat)) !important; } #tools, #props { top: calc(52px + var(--sat)); }
  #props { max-height: calc(100% - 60px - var(--sab)); }
  #tools { max-height: calc(100% - 60px - 130px); }
}

.mapinfo { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 8px 10px; margin: 2px 0 8px; border-radius: 8px; background: rgba(227,185,85,.08); border: 1px solid rgba(227,185,85,.25); font-size: 12px; color: #ccc; }
.mapinfo b { color: var(--gold); }
.grid2 { display: grid; grid-template-columns: 1fr 1.6fr; gap: 6px; }