/* ===== 旋转实验室 样式 ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;display:block;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f0f2f5;color:#333;user-select:none}

/* ===== Top Bar ===== */
#top-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:rgba(255,255,255,0.95);border-bottom:1px solid #e8e8e8;z-index:20;min-height:44px;flex-shrink:0}
#top-bar a{color:#667eea;text-decoration:none;font-size:13px;padding:4px 12px;border-radius:10px;background:rgba(102,126,234,0.1);transition:0.15s}
#top-bar a:hover{background:rgba(102,126,234,0.2)}
#top-bar .title-area{color:#555;font-size:14px;font-weight:bold;display:flex;align-items:center;gap:8px}
#top-bar .title-area .mode-badge{font-size:11px;background:rgba(102,126,234,0.15);color:#667eea;padding:2px 8px;border-radius:8px;font-weight:normal}

/* ===== Main Layout ===== */
#app{display:flex;height:calc(100vh - 44px)}
#left-panel{width:280px;flex-shrink:0;background:#fff;display:flex;flex-direction:column;padding:12px;gap:8px;overflow-y:auto;border-right:1px solid #e8e8e8}
#right-panel{flex:1;position:relative;overflow:hidden}
#scene-container{position:absolute;inset:0}

/* ===== Profile Canvas ===== */
#profile-box{display:flex;justify-content:center;padding:4px;background:#f8f9fc;border-radius:12px;border:1px solid #e8e8e8}
#profile-canvas{width:220px;height:220px}

/* ===== Preset Label ===== */
#preset-label{text-align:center;font-size:1.1rem;font-weight:bold;color:#333}

/* ===== Preset Buttons ===== */
#preset-nav{display:flex;align-items:center;gap:4px}
.preset-arrow{width:28px;height:28px;border-radius:50%;border:1px solid #ddd;background:#fff;color:#667eea;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:0.2s}
.preset-arrow:hover{background:#667eea;color:#fff;border-color:#667eea}
#preset-btns{display:flex;gap:4px;overflow-x:auto;flex:1;padding:2px 0}
#preset-btns::-webkit-scrollbar{height:2px}
#preset-btns::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}
.preset-btn{padding:4px 10px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;color:#666;font-size:12px;cursor:pointer;white-space:nowrap;transition:0.2s;flex-shrink:0}
.preset-btn:hover{border-color:#667eea;color:#667eea}
.preset-btn.active{background:#667eea;color:#fff;border-color:#667eea}

/* ===== Analogy ===== */
#analogy-box{background:#f0f4ff;border-radius:10px;padding:10px 12px;border:1px solid #dde4f5}
#analogy-text{font-size:13px;color:#555;line-height:1.5;text-align:center}

/* ===== Segment Slider ===== */
#segment-box{background:#f8f9fc;border-radius:10px;padding:10px 12px;border:1px solid #e8e8e8}
.segment-header{display:flex;justify-content:space-between;font-size:13px;color:#666;margin-bottom:4px}
#segment-slider{width:100%;accent-color:#667eea;cursor:pointer}
.segment-labels{display:flex;justify-content:space-between;font-size:11px;color:#999}

/* ===== Hint ===== */
#hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:10;color:rgba(0,0,0,0.25);font-size:11px;pointer-events:none}

/* ===== Mobile ===== */
@media(max-width:768px){
  #app{flex-direction:column}
  #left-panel{width:100%;height:45vh;flex-direction:row;flex-wrap:wrap;gap:4px;padding:8px;align-content:flex-start;overflow-y:auto;border-right:none;border-bottom:1px solid #e8e8e8}
  #profile-box{flex:0 0 auto;padding:2px}
  #profile-canvas{width:100px;height:100px}
  #preset-label{flex:0 0 100%;font-size:13px;text-align:center}
  #preset-nav{flex:0 0 100%}
  #preset-btns{overflow-x:auto}
  #analogy-box{flex:0 0 100%;padding:6px 8px}
  #analogy-text{font-size:12px}
  #segment-box{flex:0 0 100%;padding:6px 8px}
  .segment-labels{font-size:10px}
  #right-panel{height:55vh}
}