/* public/assets/css/image/grid-splitter.css */
.gridsplit-wrapper { --p-bg: #ffffff; --p-border: #e2e8f0; --p-primary: #8b5cf6; --p-primary-hover: #7c3aed; --p-success: #10b981; --p-text: #0f172a; --p-text-muted: #64748b; width: 100%; max-width: 1200px; margin: 0 auto; background: var(--p-bg); border-radius: 20px; padding: 24px; border: 1px solid var(--p-border); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); box-sizing: border-box; font-family: system-ui, -apple-system, sans-serif; }
.gridsplit-wrapper *, .gridsplit-wrapper *::before, .gridsplit-wrapper *::after { box-sizing: border-box; }

.gridsplit-header { text-align: center; margin-bottom: 24px; border-bottom: 1px solid var(--p-border); padding-bottom: 24px; }
.gridsplit-title { font-size: 1.6rem; font-weight: 800; color: var(--p-text); margin: 0 0 10px 0; }
.gridsplit-subtitle { font-size: 0.95rem; color: var(--p-text-muted); max-width: 800px; margin: 0 auto; line-height: 1.6; }

/* 上传区 */
.gridsplit-upload-area { border: 2px dashed #cbd5e1; border-radius: 16px; padding: 60px 20px; text-align: center; background: #f8fafc; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gridsplit-upload-area:hover, .gridsplit-upload-area.dragover { border-color: var(--p-primary); background: #f5f3ff; }
.gridsplit-upload-icon { font-size: 3.5rem; margin-bottom: 16px; opacity: 0.8; }
.gridsplit-upload-text { font-size: 1.1rem; font-weight: 700; color: var(--p-text); margin-bottom: 8px; }
.gridsplit-upload-hint { font-size: 0.9rem; color: var(--p-text-muted); }

/* 工作区布局 */
.gridsplit-layout { display: flex; flex-direction: row; gap: 24px; align-items: stretch; }
@media (max-width: 900px) { .gridsplit-layout { flex-direction: column; } }

.gridsplit-display-panel { flex: 1.5; display: flex; flex-direction: column; background: #f8fafc; border: 1px solid var(--p-border); border-radius: 16px; overflow: hidden; }
.gridsplit-controls-panel { flex: 1; display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--p-border); border-radius: 16px; overflow: hidden; min-width: 320px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }

.gridsplit-panel-title { font-size: 1.05rem; font-weight: 700; color: var(--p-text); padding: 16px 20px; background: #f1f5f9; border-bottom: 1px solid var(--p-border); margin: 0; }
.gridsplit-controls-body { padding: 24px; display: flex; flex-direction: column; flex: 1; justify-content: space-between; }

/* 预览画板 */
.gridsplit-canvas-container { position: relative; width: 100%; aspect-ratio: 1/1; background: #0f172a; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 20px; }
#gridsplitCanvas { max-width: 100%; max-height: 100%; object-fit: contain; display: block; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }

/* 动态网格遮罩 (通过 JS 改变 var(--grid-cols)) */
.gridsplit-overlay { position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; pointer-events: none; display: grid; grid-template-columns: repeat(var(--grid-cols, 3), 1fr); grid-template-rows: repeat(var(--grid-cols, 3), 1fr); opacity: 0; transition: opacity 0.3s; }
.gridsplit-overlay.show { opacity: 1; }
.gridsplit-overlay-cell { border: 1px dashed rgba(255, 255, 255, 0.9); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.2); background: rgba(255,255,255,0.05); }

/* 结果展示区 (带真实缝隙的相册排版) */
.gridsplit-result-container { width: 100%; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 30px 20px; }
.gridsplit-result-grid { display: grid; grid-template-columns: repeat(var(--grid-cols, 3), 1fr); gap: 6px; width: 100%; max-width: 400px; aspect-ratio: 1/1; background: #ffffff; padding: 6px; border: 1px solid #cbd5e1; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.gridsplit-result-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: 0.2s; cursor: pointer; }
.gridsplit-result-grid img:hover { transform: scale(1.02); z-index: 10; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

/* 表单与按钮 */
.gridsplit-form-group { display: flex; flex-direction: column; gap: 8px; }
.gridsplit-label { font-size: 0.95rem; font-weight: 700; color: #334155; }

.gridsplit-radio-group { display: flex; flex-direction: column; gap: 10px; }
.gridsplit-radio-label { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; font-weight: 600; color: #334155; cursor: pointer; padding: 12px 16px; border: 2px solid #cbd5e1; border-radius: 10px; transition: 0.2s; background: #fff; }
.gridsplit-radio-label:hover { border-color: #94a3b8; }
.gridsplit-radio-label input { width: 18px; height: 18px; accent-color: var(--p-primary); cursor: pointer; }
.gridsplit-radio-label:has(input:checked) { border-color: var(--p-primary); background: #f5f3ff; }

.gridsplit-hint-card { background: #f1f5f9; border-left: 4px solid var(--p-primary); padding: 12px 16px; border-radius: 0 8px 8px 0; font-size: 0.85rem; color: #475569; line-height: 1.5; margin-top: 24px; }

.gridsplit-action-group { display: flex; flex-direction: column; margin-top: auto; padding-top: 32px; }
.gridsplit-btn-primary, .gridsplit-btn-success, .gridsplit-btn-outline { width: 100%; padding: 14px; border-radius: 10px; font-weight: 700; font-size: 1.05rem; cursor: pointer; border: none; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.gridsplit-btn-primary { background: var(--p-primary); color: #ffffff; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); }
.gridsplit-btn-primary:hover { background: var(--p-primary-hover); transform: translateY(-2px); }
.gridsplit-btn-success { background: var(--p-success); color: #ffffff; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.gridsplit-btn-success:hover { background: #059669; transform: translateY(-2px); }
.gridsplit-btn-outline { background: transparent; color: #64748b; border: 2px solid #cbd5e1; }
.gridsplit-btn-outline:hover { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; }

/* 黑夜模式 */
[data-theme="dark"] .gridsplit-wrapper { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .gridsplit-title, [data-theme="dark"] .gridsplit-panel-title, [data-theme="dark"] .gridsplit-upload-text, [data-theme="dark"] .gridsplit-label { color: #f8fafc; }
[data-theme="dark"] .gridsplit-subtitle, [data-theme="dark"] .gridsplit-upload-hint { color: #94a3b8; }
[data-theme="dark"] .gridsplit-upload-area { background: #0f172a; border-color: #475569; }
[data-theme="dark"] .gridsplit-upload-area:hover { background: #1e293b; border-color: var(--p-primary); }
[data-theme="dark"] .gridsplit-display-panel, [data-theme="dark"] .gridsplit-controls-panel { background: #0f172a; border-color: #475569; }
[data-theme="dark"] .gridsplit-panel-title { background: #1e293b; border-color: #475569; }
[data-theme="dark"] .gridsplit-radio-label { border-color: #475569; background: #0f172a; color: #cbd5e1; }
[data-theme="dark"] .gridsplit-radio-label:hover { border-color: #64748b; }
[data-theme="dark"] .gridsplit-radio-label:has(input:checked) { border-color: var(--p-primary); background: rgba(139, 92, 246, 0.15); color: #fff; }
[data-theme="dark"] .gridsplit-hint-card { background: #020617; color: #94a3b8; border-left-color: var(--p-primary); }
[data-theme="dark"] .gridsplit-result-container { background: #0f172a; }
[data-theme="dark"] .gridsplit-result-grid { background: #1e293b; border-color: #475569; }
[data-theme="dark"] .gridsplit-btn-outline { border-color: #475569; color: #cbd5e1; }
[data-theme="dark"] .gridsplit-btn-outline:hover { background: #1e293b; color: #fff; }