/* ============================================================
   快脸 · 换底色工具页专属样式（单列布局）
   ============================================================ */

.tool-container {
  display:flex;
  flex-direction:column;
  gap:24px;
  max-width:680px;
  margin:0 auto;
}

/* ----- Upload Zone ----- */
.upload-zone {
  background:var(--surface);
  border:2px dashed var(--border);
  border-radius:var(--radius-lg);
  padding:48px 24px;
  text-align:center;
  cursor:pointer;
  transition:all 0.25s;
  min-height:260px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px;
  position:relative;
  overflow:hidden;
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color:var(--blue-dark);
  background:rgba(67,133,245,0.02);
}

.upload-icon {
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(67,133,245,0.06);
  border:1px solid rgba(67,133,245,0.1);
  display:flex; align-items:center; justify-content:center;
}
.upload-icon svg { width:24px; height:24px; stroke:var(--blue-dark); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.upload-title { font-size:16px; font-weight:600; color:var(--text); }
.upload-hint { font-size:13px; color:var(--text-dim); }

.camera-btn {
  display:none;
  margin-top:12px;
  padding:8px 20px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-muted); font-size:13px;
  cursor:pointer; transition:all 0.2s;
}
.camera-btn:hover { border-color:var(--blue-dark); color:var(--blue-dark); }

/* ----- Preview State ----- */
.preview-state {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}

.preview-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  background:var(--surface-alt);
}

.preview-tabs {
  display:flex; gap:4px;
  background:var(--surface);
  border-radius:var(--radius);
  padding:3px;
  border:1px solid var(--border);
}

.preview-tab {
  padding:6px 16px;
  font-size:13px; font-weight:600;
  border:none; background:none;
  border-radius:6px;
  cursor:pointer;
  color:var(--text-muted);
  transition:all 0.2s;
}
.preview-tab.active {
  background:var(--blue-dark);
  color:#fff;
}
.preview-tab:hover:not(.active) {
  color:var(--text);
}

.re-upload-btn {
  padding:6px 14px;
  font-size:13px; font-weight:500;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius);
  cursor:pointer;
  color:var(--text-muted);
  transition:all 0.2s;
}
.re-upload-btn:hover {
  border-color:var(--blue-dark);
  color:var(--blue-dark);
}

.preview-area {
  display:flex; align-items:center; justify-content:center;
  min-height:320px;
  padding:16px;
  position:relative;
}
.preview-area canvas {
  max-width:100%;
  max-height:520px;
  display:block;
  border-radius:var(--radius);
}

.preview-area .scan-loading {
  position:absolute; top:0; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.85);
  z-index:10;
  border-radius:var(--radius-lg);
}
.preview-area .scan-loading .scan-text { font-size:16px; }

/* ----- Color Section ----- */
.color-section { }
.color-section-title {
  font-size:14px; font-weight:600; color:var(--text); margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}

.color-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}

.color-btn {
  width:60px; height:60px;
  border:2px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:all 0.2s;
  position:relative;
  overflow:hidden;
}
.color-btn:hover {
  border-color:var(--blue-dark);
  transform:scale(1.06);
}
.color-btn.selected {
  border-color:var(--blue-dark);
  box-shadow: 0 0 0 2px var(--blue-glow);
}
.color-btn.selected::after {
  content:''; position:absolute; top:4px; right:4px;
  width:14px; height:14px; border-radius:50%;
  background:var(--blue-dark);
  display:flex; align-items:center; justify-content:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin:round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:10px; background-position:center; background-repeat:no-repeat;
}
.color-btn.color-transparent {
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
                    linear-gradient(-45deg, #ccc 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #ccc 75%),
                    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size:12px 12px;
  background-position:0 0, 0 6px, 6px -6px, -6px 0;
}
.color-btn .color-label {
  position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  font-size:9px; color:#fff; background:rgba(0,0,0,0.5);
  padding:1px 6px; border-radius:3px; white-space:nowrap;
}

/* ----- Action Bar ----- */
.action-bar {
  display:flex; gap:12px; align-items:center;
  flex-wrap:wrap;
}

/* ----- Rate Limit Modal ----- */
.rl-modal {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.rl-modal-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.rl-modal-content {
  position:relative; z-index:1;
  background:var(--surface);
  border-radius:var(--radius-xl);
  padding:40px 36px;
  max-width:440px;
  width:100%;
  text-align:center;
  box-shadow:var(--shadow-xl);
  animation:fadeInUp 0.3s ease;
}
.rl-modal-icon {
  margin-bottom:20px;
}
.rl-modal-content h3 {
  font-size:20px; font-weight:800; color:var(--text);
  margin-bottom:12px;
}
.rl-modal-content p {
  font-size:14px; color:var(--text-muted);
  line-height:1.7; margin-bottom:8px;
}
.rl-modal-content p strong {
  color:var(--orange);
}
.rl-modal-actions {
  display:flex; flex-direction:column; gap:10px;
  margin-top:24px;
}
.rl-modal-actions .btn { width:100%; }

/* ----- Responsive ----- */
@media (max-width: 768px) {
  .tool-container { max-width:100%; gap:20px; }
  .upload-zone { min-height:220px; padding:36px 20px; }
  .camera-btn { display:block; }
  .preview-area { min-height:240px; padding:12px; }
  .preview-area canvas { max-height:400px; }
  .color-btn { width:48px; height:48px; }
  .color-grid { grid-template-columns:repeat(4, 1fr); gap:10px; justify-items:center; }
  .preview-toolbar { padding:8px 12px; }
  .action-bar { flex-direction:column; }
  .action-bar .btn { width:100%; }
  .rl-modal-content { padding:32px 24px; }
}