/* ============================================================
   草莓拼豆图纸生成器 - 复刻版样式
   对应原站 Tailwind 视觉：浅灰背景、白色圆角卡片、蓝色主按钮
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: #f2f3f6; color: #111827; -webkit-font-smoothing: antialiased; }

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
input, select { font-family: inherit; }

.hidden { display: none !important; }

/* ---------- 布局工具 ---------- */
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-2:empty { margin: 0; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-7 { height: 1.75rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-7 { width: 1.75rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-32 { width: 8rem; }
.w-36 { width: 9rem; }
.w-40 { width: 10rem; }
.min-h-0 { min-height: 0; }
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }

.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.px-2 { padding: 0 0.5rem; }
.px-3 { padding: 0 0.75rem; }
.px-4 { padding: 0 1rem; }
.px-6 { padding: 0 1.5rem; }
.py-1 { padding: 0.25rem 0; }
.py-1\.5 { padding: 0.375rem 0; }
.py-2 { padding: 0.5rem 0; }
.py-3 { padding: 0.75rem 0; }
.py-4 { padding: 1rem 0; }
.py-6 { padding: 1.5rem 0; }
.pb-20 { padding-bottom: 5rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pt-4 { padding-top: 1rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.no-underline { text-decoration: none; }

.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

.border { border-width: 1px; }
.border-0 { border: 0; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-200\/60 { border-color: rgba(229, 231, 235, 0.6); }
.border-gray-200\/70 { border-color: rgba(229, 231, 235, 0.7); }
.border-gray-700 { border-color: #374151; }

.bg-white { background: #fff; }
.bg-white\/30 { background: rgba(255, 255, 255, 0.3); }
.bg-white\/50 { background: rgba(255, 255, 255, 0.5); }
.bg-white\/70 { background: rgba(255, 255, 255, 0.7); }
.bg-white\/80 { background: rgba(255, 255, 255, 0.8); }
.bg-white\/85 { background: rgba(255, 255, 255, 0.85); }
.bg-white\/90 { background: rgba(255, 255, 255, 0.9); }
.bg-gray-50 { background: #f9fafb; }
.bg-gray-50\/80 { background: rgba(249, 250, 251, 0.8); }
.bg-gray-100 { background: #f3f4f6; }
.bg-gray-900\/85 { background: rgba(17, 24, 39, 0.85); }
.bg-black\/90 { background: rgba(0, 0, 0, 0.9); }
.bg-indigo-100 { background: #e0e7ff; }
.bg-purple-100 { background: #f3e8ff; }
.bg-emerald-100 { background: #d1fae5; }
.bg-orange-100 { background: #ffedd5; }
.bg-pink-100 { background: #fce7f3; }
.bg-sky-100 { background: #e0f2fe; }
.bg-purple-50 { background: #faf5ff; }

.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #111827; }
.text-white { color: #fff; }
.text-purple-500 { color: #a855f7; }
.text-indigo-500 { color: #6366f1; }
.text-emerald-500 { color: #10b981; }
.text-orange-500 { color: #f97316; }
.text-pink-500 { color: #ec4899; }
.text-sky-500 { color: #0ea5e9; }
.text-\[#1675ec\] { color: #1675ec; }

.text-[11px] { font-size: 11px; }
.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-base { font-size: 16px; }
.text-lg { font-size: 18px; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.whitespace-nowrap { white-space: nowrap; }

.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.inline-flex { display: inline-flex; }
.inline-block { display: inline-block; }
.block { display: block; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-\[60\] { z-index: 60; }
.pointer-events-none { pointer-events: none; }
.object-contain { object-fit: contain; }

.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.backdrop-blur-\[1px\] { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
.backdrop-blur-\[2px\] { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.shadow-none { box-shadow: none; }

.max-w-screen-2xl { max-width: 1536px; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-md { max-width: 28rem; }
.box-border { box-sizing: border-box; }
.antialiased { -webkit-font-smoothing: antialiased; }

/* ---------- 网格布局 ---------- */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 头部按钮 ---------- */
.ios-header-button {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  cursor: pointer;
}
.ios-header-button:hover { background: #f9fafb; }

/* ---------- 头部：蓝紫渐变背景 + 半透明材质按钮（小圆角方形） ---------- */
.app-header {
  background: linear-gradient(135deg, #1e7df0 0%, #7a78e9 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.header-btn {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  padding: 0.6rem 1.25rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
  transition: all 180ms ease;
}
.header-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

/* ---------- 主按钮（蓝色） ---------- */
.ios-primary-button {
  border: 1px solid #1675ec;
  background: #1675ec;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ios-primary-button:hover:not(:disabled) { background: #0e63cd; }
.ios-primary-button:disabled { opacity: 0.5; }

.ios-primary-button-strong {
  border: 1px solid #1675ec;
  background: linear-gradient(180deg, #2b87f5, #1675ec);
  color: #fff;
  box-shadow: 0 1px 2px rgba(22, 117, 236, 0.3);
}
.ios-primary-button-strong:hover { background: linear-gradient(180deg, #1675ec, #0e63cd); }

/* ---------- 滑块 ---------- */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: #d1d5db;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1675ec;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
input[type="range"]:disabled::-webkit-slider-thumb { background: #9ca3af; }
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #1675ec; border: 2px solid #fff; cursor: pointer;
}

/* ---------- 品牌/色号按钮 ---------- */
.brand-btn, .size-btn {
  background: #fff;
  color: #374151;
  border-color: #e5e7eb;
}
.brand-btn:hover, .size-btn:hover { border-color: #60a5fa; }
.brand-btn.active, .size-btn.active {
  border-color: #1675ec;
  background: #1675ec;
  color: #fff;
  box-shadow: 0 1px 2px rgba(22, 117, 236, 0.3);
}

/* ---------- 工作模式按钮 ---------- */
.mode-btn {
  flex: 1; border: 1px solid #e5e7eb; background: #fff; color: #374151;
  border-radius: 0.5rem; padding: 0.5rem 0; font-size: 13px;
  transition: all 150ms;
}
.mode-btn:hover { border-color: #60a5fa; }
.mode-btn.active {
  border-color: #1675ec; background: #1675ec; color: #fff;
  box-shadow: 0 1px 2px rgba(22, 117, 236, 0.3);
}

/* ---------- 处理模式按钮组 ---------- */
.pmode-btn {
  border: 1px solid #e5e7eb; background: #fff; color: #374151;
  border-radius: 0.5rem; padding: 0.45rem 0; font-size: 12px;
  transition: all 150ms;
}
.pmode-btn:hover { border-color: #60a5fa; }
.pmode-btn.active {
  border-color: #1675ec; background: #eaf3ff; color: #1675ec;
}

/* ---------- 工具按钮 ---------- */
.tool-btn {
  border: 1px solid #e5e7eb; background: #fff; color: #374151;
  border-radius: 0.5rem; padding: 0.5rem 0; font-size: 12px;
  transition: all 150ms;
}
.tool-btn:hover { border-color: #60a5fa; }
.tool-btn.active {
  border-color: #1675ec; background: #eaf3ff; color: #1675ec;
}

/* ---------- 专业全屏模式 ---------- */
body.fullscreen-mode #sideColumn { display: none !important; }
body.fullscreen-mode #mainGrid { display: block; }
body.fullscreen-mode .workspace-stage {
  height: calc(100vh - 76px) !important;
  min-height: calc(100vh - 76px) !important;
}
body.fullscreen-mode section,
body.fullscreen-mode footer { display: none !important; }
#btnExitFullscreen {
  position: fixed; top: 76px; right: 16px; z-index: 90;
  border: 1px solid #1675ec; background: #1675ec; color: #fff;
  border-radius: 0.5rem; padding: 0.5rem 1rem; font-size: 13px;
  box-shadow: 0 4px 12px rgba(22, 117, 236, 0.35);
  cursor: pointer;
}
#btnExitFullscreen:hover { background: #0e63cd; }
body.fullscreen-mode #btnExitFullscreen { display: block !important; }

/* ---------- 品牌/色号选中态 ---------- */
.brand-btn.active, .size-btn.active {
  border-color: #1675ec;
  background: #1675ec;
  color: #fff;
  box-shadow: 0 1px 2px rgba(22, 117, 236, 0.3);
}

/* ---------- 弹窗 ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: backdrop-in 180ms ease-out both;
}
.modal-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 26rem;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  animation: dialog-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.modal-card.wide { max-width: 44rem; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid #f3f4f6;
}
.modal-head h3 { font-size: 15px; font-weight: 600; color: #111827; }
.modal-close {
  width: 28px; height: 28px; border-radius: 9999px;
  border: none; background: #f3f4f6; color: #6b7280; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: #e5e7eb; }
.modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; }

/* 表单 */
.form-field { margin-bottom: 0.75rem; }
.form-field label { display: block; font-size: 12px; font-weight: 500; color: #4b5563; margin-bottom: 0.35rem; }
.form-field input {
  width: 100%; padding: 0.55rem 0.75rem; font-size: 13px;
  border: 1px solid #d1d5db; border-radius: 0.5rem; outline: none;
}
.form-field input:focus { border-color: #1675ec; box-shadow: 0 0 0 3px rgba(22, 117, 236, 0.15); }
.form-error { color: #ef4444; font-size: 12px; margin-bottom: 0.5rem; min-height: 1em; }

/* 登录方式切换 */
.auth-tabs { display: flex; background: #f3f4f6; border-radius: 0.75rem; padding: 3px; margin-bottom: 1rem; }
.auth-tabs button {
  flex: 1; padding: 0.45rem 0; font-size: 13px; border: none;
  background: transparent; border-radius: 0.6rem; color: #6b7280;
}
.auth-tabs button.active { background: #fff; color: #1675ec; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

/* 历史记录列表 */
.history-item {
  display: flex; gap: 0.75rem; padding: 0.75rem;
  border: 1px solid #f3f4f6; border-radius: 0.75rem; margin-bottom: 0.6rem;
  cursor: pointer; transition: background 150ms;
}
.history-item:hover { background: #f9fafb; }
.history-item img { width: 64px; height: 64px; border-radius: 0.5rem; border: 1px solid #e5e7eb; object-fit: contain; background: #fff; flex-shrink: 0; }
.history-meta { flex: 1; min-width: 0; }
.history-meta .title { font-size: 13px; font-weight: 500; color: #1f2937; margin-bottom: 2px; }
.history-meta .desc { font-size: 11px; color: #6b7280; }
.history-del {
  border: none; background: transparent; color: #9ca3af; font-size: 13px;
  align-self: flex-start; padding: 4px 6px; border-radius: 6px;
}
.history-del:hover { background: #fee2e2; color: #ef4444; }
.empty-tip { text-align: center; color: #9ca3af; font-size: 13px; padding: 2rem 0; }

/* 色板管理 */
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 0.5rem; }
.palette-item { border: 1px solid #f3f4f6; border-radius: 0.5rem; padding: 0.35rem; cursor: pointer; transition: border-color 150ms; }
.palette-item:hover { border-color: #60a5fa; }
.palette-swatch { height: 34px; border-radius: 0.35rem; border: 1px solid rgba(0,0,0,0.06); margin-bottom: 0.25rem; }
.palette-code { font-size: 10px; color: #6b7280; text-align: center; }

/* 快捷弹窗内容 */
.quick-content p { font-size: 13px; color: #4b5563; line-height: 1.7; margin-bottom: 0.6rem; }
.quick-content .tip-box {
  background: #eaf3ff; border: 1px solid #d5e7ff; color: #1675ec;
  border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 12px; line-height: 1.7;
}
.video-wrap video { width: 100%; border-radius: 0.75rem; background: #000; }

/* 图片裁剪（整页视图） */
.crop-tip {
  font-size: 12px; color: #1675ec;
  background: #eaf3ff; border: 1px solid #d5e7ff;
  border-radius: 0.75rem; padding: 0.5rem 0.75rem;
  text-align: center; line-height: 1.6; flex-shrink: 0;
}
.crop-layout { display: flex; gap: 1.5rem; align-items: center; justify-content: center; }
.crop-stage { flex-shrink: 0; width: 560px; max-width: 100%; }
.crop-stage canvas {
  width: 100%; height: auto; border-radius: 0.75rem;
  border: 1px solid #e5e7eb; background: #fff;
  touch-action: none; cursor: grab; user-select: none;
  -webkit-user-select: none;
}
.crop-side { flex: 1; min-width: 0; max-width: 340px; display: flex; flex-direction: column; gap: 0.9rem; }
.crop-row span { font-size: 12px; color: #4b5563; }
.crop-row b { color: #1675ec; }
.crop-btns { display: flex; gap: 0.5rem; }
.crop-btn {
  flex: 1; border: 1px solid #e5e7eb; background: #fff; color: #374151;
  border-radius: 0.5rem; padding: 0.55rem 0; font-size: 13px;
  transition: all 150ms;
}
.crop-btn:hover { border-color: #60a5fa; }
.crop-primary { border-color: #1675ec; background: #1675ec; color: #fff; }
.crop-primary:hover { background: #0e63cd; }
.crop-hint { font-size: 11px; color: #9ca3af; line-height: 1.6; }
.crop-actions { display: flex; gap: 0.6rem; margin-top: auto; padding-top: 0.75rem; }
/* 裁剪视图撑满可用高度，底部按钮贴底 */
#cropView { min-height: calc(100vh - 92px); }
@media (max-width: 1023px) {
  .crop-layout { flex-direction: column; }
  .crop-stage { width: 100%; }
  .crop-side { max-width: none; width: 100%; }
}

/* 画布教程引导 */
.tutorial-step { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.7rem; }
.tutorial-step p { font-size: 13px; color: #4b5563; line-height: 1.7; }
.step-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 9999px;
  background: #eaf3ff; color: #1675ec; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;
}

/* 下载设置弹窗 */
.download-settings { padding: 0.25rem 0; }
.dl-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0; border-bottom: 1px solid #f3f4f6;
  font-size: 13px; color: #374151;
}
.dl-row:last-of-type { border-bottom: none; }
.dl-input {
  width: 64px; padding: 0.35rem 0.5rem; font-size: 13px;
  border: 1px solid #d1d5db; border-radius: 0.5rem; text-align: center; outline: none;
}
.dl-input:focus { border-color: #1675ec; }
.dl-color {
  width: 44px; height: 30px; border: 1px solid #d1d5db; border-radius: 0.5rem;
  padding: 2px; background: #fff; cursor: pointer;
}
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; background: #d1d5db; border-radius: 9999px;
  transition: background 150ms; cursor: pointer;
}
.switch .slider::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; transition: transform 150ms;
}
.switch input:checked + .slider { background: #1675ec; }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* 画布尺寸与色号提示 */
.canvas-size-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 12;
  padding: 7px 11px;
  border: 1px solid #e7edf5;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.92);
  color: #475569;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  pointer-events: none;
}
.canvas-ruler {
  position: fixed;
  z-index: 16;
  display: block;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.96);
}
.canvas-code-overlay {
  position: fixed;
  z-index: 15;
  display: block;
  pointer-events: none;
}
.canvas-ruler-top {
  height: 28px;
  border-bottom: 1px solid #e2e8f0;
}
.canvas-ruler-left {
  width: 28px;
  border-right: 1px solid #e2e8f0;
}
.canvas-ruler-corner {
  position: fixed;
  z-index: 17;
  width: 28px;
  height: 28px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.98);
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
#canvasWrap.rulers-active .canvas-size-badge { display: none; }
#coordTip {
  position: fixed;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 6px;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.2);
}
#coordTip .coord-tip-swatch {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  flex: 0 0 auto;
}

/* ---------- 画布画笔编辑工具栏 ---------- */
.editor-toolbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(229, 231, 235, 0.8);
  border-radius: 0.75rem;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.editor-tools { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.editor-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border: 1px solid #e5e7eb; background: #fff; color: #374151;
  border-radius: 0.5rem; padding: 0.3rem 0.6rem; font-size: 12px;
  transition: all 150ms;
}
.editor-btn:hover { border-color: #60a5fa; }
.editor-btn.active { border-color: #1675ec; background: #eaf3ff; color: #1675ec; }
.editor-done { border-color: #1675ec; background: #1675ec; color: #fff; }
.editor-done:hover { background: #0e63cd; }
.color-dot {
  display: inline-block; width: 14px; height: 14px; border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.2); background: #000; flex-shrink: 0;
}
.editor-enter-btn {
  position: sticky; top: 0; z-index: 20;
  border: 1px solid #1675ec; background: #1675ec; color: #fff;
  border-radius: 0.75rem; padding: 0.45rem 1rem; font-size: 13px;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(22, 117, 236, 0.3);
}
.editor-enter-btn:hover { background: #0e63cd; }

/* 画笔选色弹窗 */
.color-picker .color-chips {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 0.4rem; max-height: 40vh; overflow-y: auto; margin-bottom: 0.75rem;
}
.color-chip {
  aspect-ratio: 1; border-radius: 0.5rem; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.12); transition: transform 120ms;
}
.color-chip:hover { transform: scale(1.12); border-color: #60a5fa; }
.color-custom { display: flex; align-items: center; gap: 0.6rem; padding-top: 0.6rem; border-top: 1px solid #f3f4f6; }
.color-custom input[type="color"] {
  width: 44px; height: 30px; border: 1px solid #d1d5db; border-radius: 0.5rem;
  padding: 2px; background: #fff; cursor: pointer;
}

/* 下载中状态 */
.loading-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
}
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid #dbeafe; border-top-color: #1675ec;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(14px) scale(0.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* ---------- 玻璃效果（毛玻璃分离） ---------- */
.glass-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.stage-glass {
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
}

/* ---------- 裁剪模式：强制隐藏周边导航，只保留裁剪功能 ---------- */
body.crop-mode #sideColumn,
body.crop-mode #headerActions,
body.crop-mode [data-bottom-tabbar="true"] {
  display: none !important;
}
/* 裁剪时主网格变单列（去掉右侧预留 420px 空位），页面下方区块全部隐藏 */
body.crop-mode #mainGrid { display: block; }
body.crop-mode section { display: none !important; }
body.crop-mode footer { display: none !important; }
/* 裁剪内容整体居中 */
#cropView { align-items: center; }
#cropView .crop-tip { width: 100%; }
#cropView .crop-actions { width: 100%; }

/* ---------- 拼豆效果模式：隐藏下方效果展示等区块（仅首页未上传时显示） ---------- */
body.result-mode section { display: none !important; }
body.result-mode footer { display: none !important; }

/* ---------- 强大功能卡片（高级悬停动效） ---------- */
.feature-card {
  transition: box-shadow 240ms ease,
              border-color 240ms ease;
}
.feature-card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.10);
  border-color: rgba(96, 165, 250, 0.55);
}
.feature-icon {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-card:hover .feature-icon {
  transform: scale(1.12) rotate(-4deg);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .sm\:hidden { display: none !important; }
  .sm\:inline-flex { display: inline-flex !important; }
  .sm\:pb-0 { padding-bottom: 0; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:bg-contain { background-size: contain !important; }
}
@media (max-width: 639px) {
  .ios-header-button.sm\:hidden { display: inline-flex; }
}
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:w-36 { width: 9rem; }
  .md\:grid-cols-\[minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)\] { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .lg\:block { display: block !important; }
  .lg\:hidden { display: none !important; }
  .lg\:w-40 { width: 10rem; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_420px\] { grid-template-columns: minmax(0, 1fr) 420px; }
}
/* 默认（移动端）快捷入口卡片显示 */
.quick-entry-mobile { display: block; }
@media (min-width: 1024px) { .quick-entry-mobile { display: none; } }

/* ---------- 右侧工具栏：独立滚动的白色分组卡片 ---------- */
.sidebar-panel {
  background: #f5f7fa;
  border: 1px solid #e8edf3;
  border-radius: 16px;
  padding: 12px;
  gap: 16px !important;
}
#sideColumn .glass-card {
  background: #ffffff;
  border: 1px solid #e6ebf1;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 16px !important;
}
#sideColumn .glass-card h3 {
  color: #111827;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}
#sideColumn .text-gray-500,
#sideColumn .text-gray-600,
#sideColumn .text-gray-800 { color: #5f6b7a; }

#sideColumn #workModeCard h3 { margin-bottom: 12px; }
.side-mode-stack { display: grid; grid-template-columns: 1fr; gap: 8px; }
#sideColumn .mode-btn {
  min-height: 34px;
  border-color: #dfe5ec;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
}
#sideColumn .mode-btn.active {
  border-color: #2f80ed;
  background: #2f80ed;
  color: #fff;
  box-shadow: 0 2px 4px rgba(47, 128, 237, 0.18);
}

#paramsPanel { gap: 0 !important; }
#sideColumn .side-card-heading,
#sideColumn #paramsPanel .glass-card > :first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
#sideColumn #paramsPanel .space-y-3 > * + * { margin-top: 14px; }
#sideColumn label {
  margin-bottom: 7px !important;
  color: #4b5563;
  font-size: 12px;
  font-weight: 500;
}
#sideColumn input[type="range"] {
  height: 6px;
  border-radius: 999px;
  background: #d2d7de;
}
#sideColumn input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  background: #2f80ed;
  box-shadow: none;
}
#sideColumn input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  background: #2f80ed;
  box-shadow: none;
}
#sideColumn #granularityValue,
#sideColumn #thresholdValue {
  color: #4b5563;
  font-size: 12px;
}
#sideColumn #granularityManual,
#sideColumn #thresholdManual,
#sideColumn #colorLimitManual {
  width: 64px;
  min-height: 28px;
  padding: 0 9px;
  border-color: #dfe5ec;
  border-radius: 5px;
  color: #374151;
}
#sideColumn #paramsPanel .space-y-3 > div > .flex.items-center.gap-2.mt-1 {
  gap: 9px !important;
  min-height: 30px;
}
#sideColumn #paramsPanel .space-y-3 > div > .flex.items-center.gap-2.mt-1 > span {
  line-height: 28px;
}
#sideColumn #btnGranularityOk,
#sideColumn #btnThresholdOk,
#sideColumn #btnColorLimitOn,
#sideColumn #btnColorLimitOff {
  display: inline-flex;
  min-width: 46px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 10px !important;
  border-radius: 5px;
  border-color: #bfdbfe;
  background: #f4f8ff;
  color: #2f80ed;
  box-shadow: none;
}
#sideColumn #btnColorLimitOff {
  border-color: #dfe5ec;
  background: #fff;
  color: #5f6b7a;
}
.side-select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #dfe5ec;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #374151;
  font-size: 13px;
}
.side-select:focus {
  border-color: #2f80ed;
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.12);
}
#sideColumn #paramStatus { font-size: 0; color: #6b7280; }
#sideColumn #paramStatus::after { content: "10-500"; font-size: 12px; }

.palette-settings,
.tool-settings {
  border-top: 1px solid #eef1f5;
  margin-top: 14px;
  padding-top: 12px;
}
.palette-settings summary,
.tool-settings summary {
  color: #667085;
  cursor: pointer;
  font-size: 12px;
  list-style: none;
}
.palette-settings summary::-webkit-details-marker,
.tool-settings summary::-webkit-details-marker { display: none; }
.palette-settings summary::after,
.tool-settings summary::after {
  content: "＋";
  float: right;
  color: #2f80ed;
  font-size: 16px;
  line-height: 12px;
}
.palette-settings[open] summary::after,
.tool-settings[open] summary::after { content: "−"; }
.palette-settings-body { padding-top: 12px; }
#sideColumn .brand-btn,
#sideColumn .size-btn { border-color: #dfe5ec; border-radius: 6px; }
#sideColumn #btnPaletteManage { margin-top: 10px; border-color: #2f80ed; color: #2f80ed; }

#sideColumn .side-card-heading { min-height: 20px; }
#sideColumn .side-card-heading h3 { margin: 0; }
#sideColumn #toolsCard > .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#sideColumn .tool-btn {
  min-height: 34px;
  border-color: #dfe5ec;
  border-radius: 8px;
  background: #fff;
  color: #4b5563;
  font-size: 12px;
  font-weight: 500;
}
#sideColumn .tool-btn:hover { border-color: #9cc5fa; background: #f8fbff; }
#sideColumn .tool-btn.active {
  border-color: #2f80ed;
  background: #2f80ed;
  color: #fff;
  box-shadow: 0 2px 4px rgba(47, 128, 237, 0.16);
}
#sideColumn .tool-settings { margin-top: 12px; }

@media (min-width: 1024px) {
  #mainGrid { grid-template-columns: minmax(0, 1fr) 420px; }
  body.result-mode #mainGrid { height: calc(100vh - 108px); }
  body.result-mode #sideColumn {
    height: 100%;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #8b8b8b transparent;
    scrollbar-width: thin;
  }
  body.result-mode #sideColumn::-webkit-scrollbar { width: 10px; }
  body.result-mode #sideColumn::-webkit-scrollbar-thumb {
    background: #8b8b8b;
    border: 3px solid #f5f7fa;
    border-radius: 999px;
  }
  body.result-mode #sideColumn::-webkit-scrollbar-track { background: transparent; }
  body.result-mode .workspace-stage { height: 100% !important; min-height: 0 !important; }
}
@media (max-width: 1023px) {
  .sidebar-panel { margin-top: 4px; }
}

/* 成品工作台：沿用对标站的轻量白色工作面与紧凑控制。 */
.app-header { background:#fff; border-bottom:1px solid #edf0f4; box-shadow:0 1px 0 rgba(15,23,42,.04); }
.app-header .header-title { color:#1f2937 !important; }
.app-header img { border-color:#e5e7eb !important; }
.header-btn { min-height:31px; padding:0 13px; border-color:#e3e7ed; background:#f7f8fa; color:#475569; box-shadow:none; font-weight:500; }
.header-btn:hover { background:#edf3fb; border-color:#cbd5e1; color:#1d4ed8; box-shadow:none; transform:none; }
body.result-mode { background: #f4f6f8; }
body.result-mode .app-header {
  background: #ffffff;
  border-bottom-color: #edf0f4;
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
body.result-mode .header-title { color: #1f2937 !important; }
body.result-mode .app-header img { border-color: #e5e7eb !important; }
body.result-mode .header-btn {
  min-height: 31px;
  padding: 0 13px;
  border-color: #e3e7ed;
  background: #f7f8fa;
  color: #475569;
  box-shadow: none;
  font-weight: 500;
}
body.result-mode .header-btn:hover { background: #edf3fb; border-color: #cbd5e1; transform: none; }
body.result-mode #btnLoginDesktop,
body.result-mode #btnLoginMobile,
body.result-mode #btnHistory,
body.result-mode #btnKefu { display:none !important; }
body.result-mode #editorToolbar { display:none !important; }
.header-home { width: 34px; padding: 0 !important; font-size: 20px !important; line-height: 1; }
body.result-mode .workspace-stage { background: #fff; border-color: #edf0f3; border-radius: 15px; box-shadow: 0 7px 18px rgba(15,23,42,.10); }
body.result-mode #canvasWrap { background: #fff; }

.color-stats-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.color-stats-head h3 { margin:0; }
.color-stats-head h3 span { color:#64748b; font-weight:500; }
.color-stats-head button { border:0; background:transparent; color:#64748b; font-size:11px; cursor:pointer; padding:0; }
.color-stats-head button:hover { color:#2f80ed; }
.color-stats-summary { display:flex; flex-wrap:wrap; gap:7px; padding-top:12px; }
.color-stat-chip, .color-stat-item { display:inline-flex; align-items:center; gap:6px; border:1px solid #e2e8f0; background:#fff; color:#334155; cursor:pointer; }
.color-stat-chip { min-width:54px; height:27px; padding:0 7px; border-radius:7px; font-size:11px; }
.color-stat-item { width:100%; justify-content:space-between; min-height:37px; padding:0 10px; border-radius:8px; font-size:12px; }
.color-stat-chip:hover, .color-stat-item:hover { border-color:#60a5fa; background:#f8fbff; }
.color-stat-chip i, .color-stat-item i { width:14px; height:14px; flex:0 0 14px; border:1px solid rgba(15,23,42,.13); border-radius:4px; }
.color-stat-item b { font-weight:500; color:#64748b; }
.color-stats-list { max-height:250px; overflow:auto; display:grid; gap:7px; margin-top:12px; padding-top:12px; border-top:1px solid #eef2f6; }
.color-stats-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:12px; }
.color-stats-actions button { min-height:32px; border:1px solid #dbe3ed; border-radius:7px; background:#fff; color:#475569; font-size:12px; }
.color-stats-actions button:hover { border-color:#60a5fa; color:#2f80ed; }

.pro-toolbar { display:none; }
body.fullscreen-mode .app-header { display:none; }
body.fullscreen-mode #btnExitFullscreen { display:none !important; }
body.fullscreen-mode #mainGrid { height:100vh !important; }
body.fullscreen-mode .workspace-stage { height:100vh !important; min-height:100vh !important; border:0; border-radius:0; box-shadow:none; }
body.fullscreen-mode #canvasWrap { padding-top:64px; }
body.fullscreen-mode #proToolbar { position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:90; display:flex; align-items:center; gap:7px; padding:7px; border:1px solid #e5e7eb; border-radius:11px; background:rgba(255,255,255,.95); box-shadow:0 8px 24px rgba(15,23,42,.14); }
.pro-toolbar button { min-height:31px; border:1px solid #e2e8f0; border-radius:7px; background:#fff; color:#334155; padding:0 11px; font-size:12px; cursor:pointer; }
.pro-toolbar button:hover { background:#eff6ff; border-color:#93c5fd; color:#1675ec; }
.pro-toolbar-spacer { width:8px; border-left:1px solid #e5e7eb; height:22px; }

.palette-manage-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid #eef2f6; }
.palette-manage-toolbar input { flex:1 1 180px; height:34px; padding:0 10px; border:1px solid #dfe5ec; border-radius:7px; outline:none; font-size:12px; }
.palette-manage-toolbar input:focus { border-color:#2f80ed; box-shadow:0 0 0 3px rgba(47,128,237,.11); }
.palette-manage-toolbar span { color:#64748b; font-size:12px; }
.palette-manage-toolbar b { color:#2f80ed; }
.palette-manage-toolbar button, .palette-manage-footer button { min-height:30px; padding:0 10px; border:1px solid #dbe3ed; border-radius:7px; background:#fff; color:#475569; font-size:12px; }
.palette-manage-groups { max-height:min(56vh,560px); overflow:auto; padding:12px 2px; display:grid; gap:10px; }
.palette-group { border:1px solid #e7edf3; border-radius:9px; overflow:hidden; }
.palette-group header { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:#f8fafc; color:#475569; font-size:12px; }
.palette-group header label { display:flex; align-items:center; gap:6px; cursor:pointer; }
.palette-group > div { display:flex; flex-wrap:wrap; gap:7px; padding:9px; }
.palette-choice { width:66px; min-height:28px; display:flex; align-items:center; gap:5px; padding:0 6px; border:1px solid #edf1f5; border-radius:6px; color:#475569; font-size:10px; cursor:pointer; }
.palette-choice:hover { border-color:#93c5fd; }
.palette-choice input { accent-color:#2f80ed; }
.palette-choice i { width:13px; height:13px; border-radius:4px; border:1px solid rgba(15,23,42,.14); }
.palette-choice b { font-weight:600; }
.palette-manage-footer { display:flex; justify-content:flex-end; gap:8px; padding-top:12px; border-top:1px solid #eef2f6; }
.palette-manage-footer #paletteApply { border-color:#2f80ed; background:#2f80ed; color:#fff; }
.download-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.download-actions button { min-height:34px; padding:0 16px; border:1px solid #dbe3ed; border-radius:7px; background:#fff; color:#475569; font-size:13px; }
.download-actions .ios-primary-button { border-color:#2f80ed; background:#2f80ed; color:#fff; }
.reference-download-settings { display:grid; gap:12px; }
.ref-setting-row { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:34px; color:#334155; font-size:13px; }
.ref-grid-color { align-items:flex-start; }
#refColorPresets { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:7px; }
#refColorPresets button { width:22px; height:22px; padding:0; border:2px solid transparent; border-radius:6px; background:var(--grid-color); cursor:pointer; }
#refColorPresets button.active { border-color:#1e293b; box-shadow:0 0 0 2px #fff,0 0 0 3px #94a3b8; }
#refColorPresets input { width:28px; height:24px; padding:1px; border:1px solid #dbe3ed; border-radius:6px; background:#fff; }
.ai-intro { margin:0 0 14px; color:#64748b; font-size:13px; line-height:1.7; }
.ai-prompt-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ai-prompt-gallery article { overflow:hidden; border:1px solid #e5eaf0; border-radius:10px; background:#fff; }
.ai-prompt-preview { height:82px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:25px; font-weight:800; letter-spacing:3px; background:linear-gradient(135deg,#4299e1,#8b5cf6); }
.ai-prompt-preview.p1 { background:linear-gradient(135deg,#ec4899,#fb923c); }.ai-prompt-preview.p2 { background:linear-gradient(135deg,#0ea5e9,#14b8a6); }.ai-prompt-preview.p3 { background:linear-gradient(135deg,#f59e0b,#ef4444); }
.ai-prompt-gallery h4 { margin:10px 10px 5px; color:#1e293b; font-size:13px; }.ai-prompt-gallery p { height:54px; overflow:auto; margin:0 10px 10px; color:#64748b; font-size:11px; line-height:1.45; }
.ai-prompt-gallery button { width:calc(100% - 20px); min-height:30px; margin:0 10px 10px; border:1px solid #bfdbfe; border-radius:6px; background:#eff6ff; color:#1675ec; font-size:12px; }
@media (max-width:560px){.ai-prompt-gallery{grid-template-columns:1fr;}}

/* 我的项目 */
.project-header { background:#fff; border-bottom:1px solid #edf0f4; box-shadow:0 1px 0 rgba(15,23,42,.04); }
.project-header .header-title { color:#1f2937 !important; }
.project-header .header-btn { min-height:32px; padding:0 13px; background:#f8fafc; color:#475569; border-color:#e2e8f0; box-shadow:none; }
.project-header .header-btn:hover { background:#eff6ff; color:#1675ec; transform:none; }
.project-shell { max-width:1080px; margin:26px auto; padding:24px; border:1px solid #e7edf3; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.06); }
.project-titlebar { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:22px; border-bottom:1px solid #edf1f5; }.project-titlebar h1 { color:#111827; font-size:20px; line-height:1.25; }.project-titlebar p { margin-top:6px; color:#64748b; font-size:13px; }.project-create { min-height:34px; display:inline-flex; align-items:center; padding:0 13px; border-radius:7px; background:#2f80ed; color:#fff; font-size:13px; text-decoration:none; }
.project-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0 10px; }.project-tabs { display:flex; gap:18px; }.project-tabs button { padding:8px 2px; border:0; border-bottom:2px solid transparent; background:none; color:#64748b; font-size:13px; }.project-tabs button.active { border-bottom-color:#2f80ed; color:#1675ec; font-weight:600; }.project-search { width:220px; height:34px; display:flex; align-items:center; gap:6px; padding:0 10px; border:1px solid #e2e8f0; border-radius:7px; color:#94a3b8; }.project-search input { width:100%; outline:0; border:0; color:#334155; font-size:12px; }.project-info { display:flex; justify-content:space-between; gap:10px; padding:7px 0 14px; color:#94a3b8; font-size:12px; }
.project-card { display:grid; grid-template-columns:92px 1fr auto; gap:14px; align-items:center; padding:12px; border:1px solid #e7edf3; border-radius:10px; background:#fff; cursor:pointer; transition:.16s ease; }.project-card + .project-card { margin-top:10px; }.project-card:hover { border-color:#93c5fd; background:#fbfdff; box-shadow:0 5px 15px rgba(37,99,235,.08); }.project-card img { width:92px; height:92px; border-radius:7px; object-fit:cover; background:#f1f5f9; }.project-card h3 { margin:0; color:#1e293b; font-size:14px; }.project-card p { margin:6px 0 0; color:#64748b; font-size:12px; }.project-card .project-actions { display:flex; gap:7px; }.project-card .project-actions button { min-height:30px; padding:0 10px; border:1px solid #dbe3ed; border-radius:6px; background:#fff; color:#475569; font-size:12px; }.project-card .project-actions button:first-child { border-color:#bfdbfe; background:#eff6ff; color:#1675ec; }.project-card .project-actions button:last-child:hover { border-color:#fecaca; color:#dc2626; }
@media (max-width:640px){.project-shell{margin:12px;padding:16px}.project-controls{align-items:stretch;flex-direction:column}.project-search{width:100%}.project-info{flex-direction:column}.project-card{grid-template-columns:66px 1fr}.project-card img{width:66px;height:66px}.project-card .project-actions{grid-column:1/-1}.project-titlebar{align-items:stretch;flex-direction:column}}

/* ============================================================
   暗黑模式（跟随系统 prefers-color-scheme，复刻原站深色体系：
   页面背景 #0d0f14，深色表面，浅色文字）
   ============================================================ */
@media (prefers-color-scheme: dark) {
  html { color-scheme: dark; }
  body { background: #0d0f14; color: #e5e7eb; }

  /* 文字 */
  .text-gray-900 { color: #f3f4f6; }
  .text-gray-800 { color: #e5e7eb; }
  .text-gray-700 { color: #d1d5db; }
  .text-gray-600 { color: #9ca3af; }
  .text-gray-500 { color: #8b95a5; }
  .text-gray-400 { color: #6b7280; }

  /* 表面 */
  .bg-white { background: #1a1d24; }
  .bg-white\/30 { background: rgba(10, 12, 17, 0.3); }
  .bg-white\/50 { background: rgba(10, 12, 17, 0.5); }
  .bg-white\/70 { background: rgba(10, 12, 17, 0.72); }
  .bg-white\/80 { background: rgba(13, 15, 20, 0.85); }
  .bg-white\/85 { background: rgba(13, 15, 20, 0.88); }
  .bg-white\/90 { background: rgba(13, 15, 20, 0.92); }
  .bg-gray-50 { background: #232733; }
  .bg-gray-50\/80 { background: rgba(35, 39, 51, 0.85); }
  .bg-gray-100 { background: #2a2e3a; }

  /* 边框 */
  .border-gray-200 { border-color: #33384a; }
  .border-gray-200\/60 { border-color: rgba(51, 56, 74, 0.6); }
  .border-gray-200\/70 { border-color: rgba(51, 56, 74, 0.7); }

  /* 头部 / 通用按钮 */
  .ios-header-button { background: #232733; border-color: #33384a; color: #d1d5db; }
  .ios-header-button:hover { background: #2a2e3a; }

  /* 渐变头部暗黑适配（深一档，保持品牌色系） */
  .app-header { background: linear-gradient(135deg, #1359b8 0%, #5b54c9 100%); border-bottom-color: rgba(255, 255, 255, 0.1); }
  .header-btn { background: rgba(255, 255, 255, 0.14); color: #ffffff; border-color: rgba(255, 255, 255, 0.3); }
  .header-btn:hover { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.55); }
  .brand-btn, .size-btn { background: #232733; color: #d1d5db; border-color: #33384a; }
  .brand-btn:hover, .size-btn:hover { border-color: #60a5fa; }
  .mode-btn, .pmode-btn, .tool-btn { background: #232733; color: #d1d5db; border-color: #33384a; }
  .mode-btn:hover, .pmode-btn:hover, .tool-btn:hover { border-color: #60a5fa; }
  .mode-btn.active, .tool-btn.active { background: rgba(22, 117, 236, 0.18); border-color: #1675ec; color: #7fb2f5; }
  .pmode-btn.active { background: rgba(22, 117, 236, 0.18); border-color: #1675ec; color: #7fb2f5; }

  /* 画布编辑工具栏 */
  .editor-btn { background: #232733; border-color: #33384a; color: #d1d5db; }
  .editor-btn.active { background: rgba(22, 117, 236, 0.18); border-color: #1675ec; color: #7fb2f5; }
  .editor-done { background: #1675ec; color: #fff; border-color: #1675ec; }
  .editor-toolbar { background: rgba(26, 29, 36, 0.95); border-color: rgba(51, 56, 74, 0.8); }
  .color-dot { border-color: rgba(255, 255, 255, 0.2); }

  /* 弹窗 */
  .modal-card { background: #1a1d24; }
  .modal-head { border-bottom-color: #2a2e3a; }
  .modal-head h3 { color: #e5e7eb; }
  .modal-close { background: #2a2e3a; color: #9ca3af; }
  .modal-close:hover { background: #33384a; }
  .dl-row { color: #d1d5db; border-bottom-color: #2a2e3a; }
  .dl-input { background: #232733; border-color: #33384a; color: #e5e7eb; }
  .dl-color { background: #232733; border-color: #33384a; }
  .switch .slider { background: #33384a; }

  /* 表单 */
  .form-field label { color: #9ca3af; }
  .form-field input { background: #232733; border-color: #33384a; color: #e5e7eb; }
  .auth-tabs { background: #2a2e3a; }
  .auth-tabs button { color: #9ca3af; }
  .auth-tabs button.active { background: #33384a; color: #7fb2f5; }
  select { background-color: #232733; color: #e5e7eb; border-color: #33384a; }

  /* 历史记录 */
  .history-item { border-color: #2a2e3a; }
  .history-item:hover { background: #232733; }
  .history-meta .title { color: #e5e7eb; }
  .history-meta .desc { color: #9ca3af; }
  .history-item img { border-color: #33384a; }

  /* 色板管理 */
  .palette-item { border-color: #2a2e3a; }
  .palette-code { color: #9ca3af; }

  /* 快捷弹窗 / 教程文字 */
  .quick-content p { color: #c3c9d4; }
  .tip-box { background: rgba(22, 117, 236, 0.15); border-color: rgba(22, 117, 236, 0.35); }
  .tutorial-step p { color: #c3c9d4; }
  .step-num { background: rgba(22, 117, 236, 0.18); color: #7fb2f5; }
  .color-custom { border-top-color: #2a2e3a; }
  .color-custom input[type="color"] { background: #232733; border-color: #33384a; }
  .color-chip { border-color: rgba(255, 255, 255, 0.12); }

  /* 裁剪弹窗暗黑适配 */
  .crop-tip { background: rgba(22, 117, 236, 0.15); border-color: rgba(22, 117, 236, 0.35); color: #7fb2f5; }
  .crop-stage canvas { border-color: #33384a; background: #1a1d24; }
  .crop-row span { color: #9ca3af; }
  .crop-btn { background: #232733; border-color: #33384a; color: #d1d5db; }
  .crop-primary { background: #1675ec; border-color: #1675ec; color: #fff; }
  .crop-hint { color: #6b7280; }

  /* 滑块 / 滚动条 */
  input[type="range"] { background: #33384a; }
  ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); }

  /* 底部导航 */
  .bottom-tabbar { background: rgba(13, 15, 20, 0.95); border-top-color: rgba(51, 56, 74, 0.7); }
  .bottom-tab { color: #6b7280; }
  .bottom-tab.active { color: #7fb2f5; }

  /* 关于我们 / 联系我们 页内联样式覆盖 */
  .page-body .card { background: #1a1d24 !important; border-color: rgba(51, 56, 74, 0.6) !important; }
  .page-body .card h2 { color: #e5e7eb !important; }
  .page-body .card p, .page-body .card li { color: #c3c9d4 !important; }
  .page-body .contact-row { background: #232733 !important; border-color: #2a2e3a !important; color: #d1d5db !important; }
  .page-body .contact-row b { color: #e5e7eb !important; }
  .page-body .copy-btn { background: rgba(22, 117, 236, 0.15); border-color: rgba(22, 117, 236, 0.35); color: #7fb2f5; }
  .page-body .copy-btn:hover { background: rgba(22, 117, 236, 0.25); }
  .page-body .back-link { color: #7fb2f5; }

  /* 玻璃效果暗黑适配 */
  .glass-card { background: rgba(13, 15, 20, 0.55); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
  .stage-glass { background: rgba(10, 12, 17, 0.45); }

  /* 强大功能图标块暗黑适配（深色底 + 亮色图标） */
  .feature-card:hover { box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5); border-color: rgba(96, 165, 250, 0.35); }
  .bg-indigo-100 { background: rgba(99, 102, 241, 0.18); }
  .bg-purple-100 { background: rgba(168, 85, 247, 0.18); }
  .bg-emerald-100 { background: rgba(16, 185, 129, 0.18); }
  .bg-orange-100 { background: rgba(249, 115, 22, 0.18); }
  .bg-pink-100 { background: rgba(236, 72, 153, 0.18); }
  .bg-sky-100 { background: rgba(14, 165, 233, 0.18); }
  .text-indigo-500 { color: #818cf8; }
  .text-purple-500 { color: #a78bfa; }
  .text-emerald-500 { color: #34d399; }
  .text-orange-500 { color: #fb923c; }
  .text-pink-500 { color: #f472b6; }
  .text-sky-500 { color: #38bdf8; }
}

/* ---------- 移动端底部导航（复刻原站 data-bottom-tabbar 逻辑） ---------- */
.bottom-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(229, 231, 235, 0.7);
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.04);
}
@media (max-width: 767px) {
  .bottom-tabbar { display: flex; align-items: stretch; justify-content: space-around; }
}
@media (min-width: 768px) {
  .bottom-tabbar { display: none !important; }
}
.bottom-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: #9ca3af; text-decoration: none; font-size: 10px;
  -webkit-tap-highlight-color: transparent;
}
.bottom-tab.active { color: #1675ec; }
.bottom-tab-icon { font-size: 20px; line-height: 1; }
.bottom-tab-label { line-height: 1; }