/*
 * 00YM-AI切图系统
 * Author: 柒铖鸿 (QQ: 1003123026)
 * 建议/问题反馈：QQ群 668147536
 * 源码官方下载：www.00ym.com
 * License: 请仅用于合法合规用途
 */
:root {
  --brand: #0ea5e9;
  --brand2: #8b5cf6;
  --brand3: #06b6d4;
  --bg: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --card: #ffffff;
  --border: #e2e8f0;
  --ring: rgba(14,165,233,.15);
}
/* 暗色模式：html.dark 时整体换肤 */
html.dark {
  --bg: #0b1120;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --card: #121a2b;
  --border: #1e293b;
  --ring: rgba(56,189,248,.25);
}
html.dark body { background: var(--bg); color: var(--text); }
html.dark .card { background: var(--card); }
html.dark .text-slate-800 { color: var(--text) !important; }
html.dark .text-slate-700 { color: var(--text) !important; }
html.dark .text-slate-600 { color: var(--muted) !important; }
html.dark .text-slate-500 { color: var(--muted) !important; }
html.dark .bg-slate-100 { background: #0f1828 !important; }
html.dark .border-slate-200 { border-color: var(--border) !important; }
html.dark .drop-zone { background: var(--card); }
html.dark input[type="number"], html.dark input[type="text"], html.dark select, html.dark textarea {
  background: var(--card); color: var(--text); border-color: var(--border);
}
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif; }

.gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.gradient-brand { background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%); }
.gradient-text { background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gradient-bg { background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%); }

/* 卡片 */
.card { background: #fff; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 20px rgba(0,0,0,.04); }

/* 上传区 */
.drop-zone { border: 2px dashed #cbd5e1; transition: all .2s; background: #fff; }
.drop-zone:hover { border-color: var(--brand); background: #fafaff; }
.drop-zone.dragover { border-color: var(--brand); background: #eef2ff; transform: scale(1.01); }

/* 表单控件美化 */
input[type="number"], input[type="text"], input[type="range"], select, textarea {
  font-family: inherit;
}
input[type="number"], input[type="text"], select, textarea {
  border: 1px solid #e2e8f0; border-radius: .6rem; padding: .45rem .7rem;
  font-size: .875rem; color: #1e293b; background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s; width: 100%;
}
input[type="number"]:focus, input[type="text"]:focus, select:focus, textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2)); outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--brand); box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--brand);
  box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer;
}

/* 槽位 */
.slot { aspect-ratio: 1/1; position: relative; overflow: hidden; }
.slot-empty { background: repeating-linear-gradient(45deg,#f8fafc,#f8fafc 10px,#eef2f5 10px,#eef2f5 20px); cursor: pointer; }
.slot[draggable="true"] { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.slot.slot-dragging { opacity: .4; }
.slot.slot-dragover { outline: 2px dashed #6366f1; outline-offset: -2px; }
.slot-btn { position: absolute; z-index: 10; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 9999px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; cursor: pointer; line-height: 1; }
.slot-btn.remove-slot { top: 2px; right: 2px; }
.slot-btn:hover { background: rgba(99,102,241,.85); }
.slot-btn:active { transform: scale(.9); }
/* 多图槽：上下左右方向按钮（底部一排） */
.slot-dir { position: absolute; z-index: 10; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; background: rgba(0,0,0,.5); color: #fff; font-size: 9px; cursor: pointer; line-height: 1; }
.slot-dir.move-left { bottom: 2px; left: 2px; }
.slot-dir.move-up { bottom: 2px; left: 20px; }
.slot-dir.move-down { bottom: 2px; left: 38px; }
.slot-dir.move-right { bottom: 2px; left: 56px; }
.slot-dir:hover { background: rgba(99,102,241,.85); }
.slot-dir:active { transform: scale(.9); }
/* 切割框方向微调按钮 */
.crop-dir { width: 34px; height: 34px; border-radius: 10px; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; transition: .15s; line-height: 1; }
.crop-dir:hover { background: #6366f1; color: #fff; border-color: #6366f1; }
.crop-dir:active { transform: scale(.92); }

/* 预览网格 - 0缝隙 */
.preview-grid-9 { display:grid; grid-template-columns: repeat(3,1fr); gap:0; position: relative; }
.preview-grid-4 { display:grid; grid-template-columns: repeat(2,1fr); gap:0; max-width:240px; margin:0 auto; position: relative; }
.preview-grid-n { display:flex; gap:0; overflow-x:auto; padding-bottom:4px; position: relative; }
.preview-grid-n::-webkit-scrollbar { height:4px; }
.preview-grid-n::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:2px; }

/* 预览辅助线：仅显示，不影响导出 */
.preview-grid-9.show-grid-line::after,
.preview-grid-4.show-grid-line::after,
.preview-grid-n.show-grid-line::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(0,0,0,.35) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0,0,0,.35) 1px, transparent 1px);
  background-size: calc(100% / 3) 100%, 100% calc(100% / 3);
  mix-blend-mode: multiply;
  z-index: 10;
}
.preview-grid-4.show-grid-line::after {
  background-size: calc(100% / 2) 100%, 100% calc(100% / 2);
}
.preview-grid-n.show-grid-line::after {
  background-image: linear-gradient(to right, rgba(0,0,0,.35) 1px, transparent 1px);
  background-size: calc(100% / var(--n, 9)) 100%;
}
/* 边框辅助线 */
.preview-grid-9.show-grid-line,
.preview-grid-4.show-grid-line,
.preview-grid-n.show-grid-line {
  outline: 1px solid rgba(0,0,0,.35);
  outline-offset: -1px;
}

/* 缩略图 */
.thumb { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; cursor:pointer; transition: transform .15s, box-shadow .15s; }
/* 长图横切：单张段为矮画布，限制最大高度避免单张视图过高；宽度自适应 */
.preview-single-long .thumb { width:auto; max-height:180px; aspect-ratio:auto; margin:0 auto; }
.thumb:hover { transform: scale(1.03); box-shadow: 0 4px 12px rgba(0,0,0,.12); }

/* 按钮 */
.btn { transition: all .15s; cursor: pointer; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; }
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 4px 14px rgba(99,102,241,.3); }

/* 表单 */
input[type=range] { accent-color: var(--brand); }
input[type=color] { border: none; padding: 0; background: transparent; }

/* 开关 */
.switch { position:relative; width:42px; height:24px; background:#cbd5e1; border-radius:999px; cursor:pointer; transition:.2s; flex-shrink:0; }
.switch.on { background: var(--brand); }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.switch.on::after { left:20px; }

/* 分段控件 */
.seg { background:#f1f5f9; border-radius:10px; padding:3px; display:inline-flex; }
.seg[style*="flex-wrap"] { display:flex; }
.seg button { padding:6px 14px; border-radius:8px; font-size:13px; color:#64748b; cursor:pointer; transition:.15s; white-space:nowrap; }
.seg button.active { background:#fff; color:var(--brand); box-shadow:0 1px 4px rgba(0,0,0,.08); }

/* 动画 */
.fade-in { animation: fade .25s ease; }
@keyframes fade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.pop-in { animation: pop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { from{opacity:0; transform:scale(.9)} to{opacity:1; transform:scale(1)} }

/* 加载中 spinner（上传图片解析等） */
.spinner { width:18px; height:18px; border:2px solid #cbd5e1; border-top-color:#6366f1; border-radius:50%; display:inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 模式 Tab：图标胶囊 + 横向滚动 */
.mode-tabs-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.mode-tabs-scroll::-webkit-scrollbar { display: none; }
.mode-tab { transition: all .15s; cursor: pointer; white-space: nowrap; background: #fff; }
.mode-tab:hover { border-color: var(--brand); color: var(--brand); }
.mode-tab.active { background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(14,165,233,.25); }
.mode-tab.active svg { stroke: #fff; }

/* 标签 */
.tag { display:inline-flex; align-items:center; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:500; }

/* 首页功能卡片 */
.feature-card { transition: all .2s; cursor: pointer; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,.15); }

/* 顶部导航菜单 */
#navMenu { transform-origin: top right; }
#navMenu:not(.hidden) { animation: navMenuIn .18s ease; }
@keyframes navMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
#navMenuBtn[aria-expanded="true"] #navMenuArrow { transform: rotate(180deg); }

/* 移动端优化 */
@media (max-width: 640px) {
  body { font-size: 14px; }
  .card { border-radius: .875rem; }
  .preview-grid-4 { max-width: 200px; }
  .drop-zone { padding: 1rem; }
}

/* 安全区域 */
@supports (padding: env(safe-area-inset-bottom)) {
  footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* Toast */
.toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); background: #1e293b; color: #fff; font-size: 13px; padding: 10px 16px; border-radius: 10px; z-index: 100; box-shadow: 0 4px 14px rgba(0,0,0,.2); max-width: 90vw; text-align: center; }

/* 广告解锁遮罩：移动端适配（动态视口高度 + 安全区） */
#adMask {
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow-y: auto;
}
#adMask.flex { display: flex; align-items: flex-start; justify-content: center; }
#adMask .relative.max-w-sm {
  margin-top: max(24px, env(safe-area-inset-top));
}

/* 长图横切预览：移动端横向滚动优化 */
@media (max-width: 640px) {
  .preview-grid-n { -webkit-overflow-scrolling: touch; }
  .preview-grid-n img { max-height: 140px; width: auto; }
}

/* 表单与上传区在窄屏更好点 */
@media (max-width: 480px) {
  .drop-zone { padding: 0.75rem; }
  #panelArea h2 { font-size: 1.05rem; }
}