:root{
  --primary:#4f46e5; --danger:#e11d48; --bg:#f8fafc; --panel:#ffffff; --border:#cbd5e1;
  --text:#1e293b; --active-bg:#eff6ff;
}
body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family: "Segoe UI", sans-serif; height:100dvh; display:flex; flex-direction:column; overflow:hidden; touch-action: none; /* Prevent default touch actions like browser scroll */ }

/* --- Layout --- */
header { height:48px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 20px; justify-content:space-between; flex-shrink:0; z-index:20; }
h1 { font-size:16px; margin:0; color:var(--primary); font-weight:800; }

.workspace { display:flex; flex:1; overflow:hidden; position:relative; }
.sidebar { width:320px; background:var(--panel); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow-y:auto; flex-shrink:0; z-index:10; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.viewport { flex:1; background:#e2e8f0; position:relative; overflow:hidden; display:flex; flex-direction:column; }

/* --- Components --- */
.section { padding:14px; border-bottom:1px solid #f1f5f9; }
.section-head { font-size:12px; font-weight:700; color:#64748b; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.5px; display:flex; justify-content:space-between; align-items:center; }

.row { display:flex; gap:8px; margin-bottom:8px; align-items:center; }
label { font-size:12px; font-weight:600; color:#475569; display:block; margin-bottom:4px; }

/* Buttons */
button { flex:1; padding:8px; border:1px solid var(--border); background:#fff; border-radius:6px; cursor:pointer; font-weight:600; font-size:12px; transition:all 0.1s; color:#334155; }
button:hover { background:#f8fafc; border-color:#94a3b8; }
button:active { transform:translateY(1px); }
button.primary { background:var(--primary); color:white; border:none; }
button.primary:hover { opacity:0.9; }

button.tool-active { background:var(--primary); color:white; border-color:var(--primary); box-shadow:inset 0 2px 4px rgba(0,0,0,0.1); }
button.danger-active { background:var(--danger); color:white; border-color:var(--danger); animation: pulse 1.5s infinite; }

/* 帮助弹窗标签页 */
.help-tab:hover { color:var(--primary) !important; background:rgba(79,70,229,0.04); }
.help-tab.active { color:var(--primary) !important; border-bottom-color:var(--primary) !important; }

/* Visual Control: D-Pad */
.d-pad { display:flex; flex-direction:column; gap:6px; background:#f1f5f9; padding:10px; border-radius:8px; border:1px solid #e2e8f0; margin-bottom:10px; }
.d-row { display:flex; gap:6px; justify-content:center; }
.d-btn { width:100%; height:28px; display:flex; align-items:center; justify-content:center; font-size:14px; background:white; border:1px solid #cbd5e0; border-radius:6px; cursor:pointer; color:#475569; }
.d-btn:hover { border-color:var(--primary); color:var(--primary); }

/* Visual Control: Stepper */
.stepper { display:flex; align-items:center; gap:4px; margin-bottom:8px; }
.step-btn { width:28px; height:28px; padding:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:bold; }

/* Inputs */
input[type=number], input[type=text], select { width:100%; padding:6px; border:1px solid var(--border); border-radius:4px; font-size:12px; box-sizing:border-box; background:#fff; }
input[type=number]:focus, input[type=text]:focus { border-color:var(--primary); outline:none; }

/* Slider */
input[type=range] { width:100%; cursor:pointer; }

@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(225,29,72,0.4)} 70%{box-shadow:0 0 0 6px rgba(225,29,72,0)} 100%{box-shadow:0 0 0 0 rgba(225,29,72,0)} }

/* --- Canvas Container (Centered Fix) --- */
.canvas-container { 
  flex:1; 
  overflow:auto; 
  position:relative; 
  /* Use Flex + Auto Margin for perfect centering of variable size Content */
  display: flex;
  background-image: linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%, #e2e8f0), linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%, #e2e8f0);
  background-size: 20px 20px; background-position: 0 0, 10px 10px; background-color:#f8fafc;
  touch-action: none; /* Crucial for custom touch handling */
}

/* Stage */
.stage { 
  position: relative; 
  /* Key Fix: margin auto centers it within flex container when smaller than viewport.
     When larger, flex-start behavior + scroll handling takes over. */
  margin: auto; 
  box-shadow: 0 10px 40px rgba(0,0,0,0.15); 
  flex-shrink: 0; /* Prevents squishing */
  /* Width/Height will be set by JS */
}

canvas { display:block; position:absolute; top:0; left:0; image-rendering: pixelated; }
#resLayer  { z-index: 2; opacity: 1; pointer-events:none; }
#gridLayer { z-index: 3; pointer-events:none; }
#uiLayer   { z-index: 4; cursor:crosshair; }

/* --- Mobile Adaptation (Bottom Drawer & Header) --- */
.header-left { display:flex; align-items:center; gap:10px; }
#menuBtn { display:none; border:none; background:none; font-size:20px; cursor:pointer; padding:0; color:var(--text); }

@media (max-width: 768px) {
  .sidebar { 
    position: absolute; 
    left: 0; right: 0;
    top: auto; 
    bottom: 0;
    width: 100%; 
    height: 80vh;
    border-right: none;
    border-top: 2px solid var(--primary);
    box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
    z-index: 100;
    border-radius: 16px 16px 0 0;
    transform: translateY(80vh);
    will-change: transform;
    touch-action: none;
    -webkit-overflow-scrolling: touch;
  }
  
  .drawer-handle {
    display: flex !important;
    width: 100%;
    height: 36px;
    min-height: 36px;
    justify-content: center;
    align-items: center;
    background: #f1f5f9;
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .drawer-handle:active { cursor: grabbing; }
  .drawer-handle-bar {
    width: 40px;
    height: 4px;
    background: #94a3b8;
    border-radius: 2px;
    pointer-events: none;
  }
  
  #menuBtn { display: block; }
  header { padding: 0 10px; }
  h1 { font-size: 14px; }
  .viewport { 
    -webkit-overflow-scrolling: touch; 
    position: relative;
  }
  
  /* 底部上滑提示条 */
  .swipe-hint {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 18px;
    z-index: 99;
    touch-action: none;
  }
}

/* 拖拽区域样式 */
.drop-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 24px;
  font-weight: bold;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drop-zone.active {
  opacity: 1;
  pointer-events: auto;
}

.drop-indicator {
  padding: 40px;
  border: 4px dashed white;
  border-radius: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
}