/* 文件: CrosshairGeneration/css/style.css (最终视觉版 V3.1) */
:root { --background: #fff; --foreground: #111827; --card: #fff; --primary: #111827; --primary-foreground: #fff; --secondary: #f3f4f6; --secondary-foreground: #111827; --muted: #f3f4f6; --muted-foreground: #6b7280; --accent: #f3f4f6; --border: #e5e7eb; --input: #e5e7eb; --ring: #3b82f6; --radius: 0.5rem; }
.dark { --background: #030712; --foreground: #f9fafb; --card: #111827; --primary: #f9fafb; --primary-foreground: #111827; --secondary: #1f2937; --secondary-foreground: #f9fafb; --muted: #1f2937; --muted-foreground: #9ca3af; --accent: #1f2937; --border: #374151; --input: #374151; --ring: #60a5fa; }
* { border-color: hsl(var(--border)); box-sizing: border-box; }
body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.container { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; }
.main-content { display: flex; flex-direction: column; gap: 1.5rem; }
.card { background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }

/* 预览区域 */
.preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.preview-title h2 { font-size: 1.25rem; font-weight: 600; margin: 0; }
.preview-title p { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin: 0.25rem 0 0; }
.preview-actions { display: flex; gap: 0.5rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; }
.btn img { height: 1em; }
.dark .btn-primary img, .dark .btn-secondary img { filter: invert(1); }
.btn-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.dark .btn-primary img { filter: none; }
.btn-secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border-color: hsl(var(--border)); }
.btn:hover { opacity: 0.8; }
.preview-box { position: relative; width: 100%; height: 350px; background-color: #000; border-radius: var(--radius); overflow: hidden; }
.preview-box .bg-image, .preview-box canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.preview-nav { position: absolute; top: 50%; left: 0.5rem; right: 0.5rem; display: flex; justify-content: space-between; transform: translateY(-50%); }
.nav-arrow { width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(0,0,0,0.5); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; }
.nav-arrow:hover { background-color: rgba(0,0,0,0.7); }
.nav-arrow svg { width: 1rem; height: 1rem; }
.preview-dots { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; }
.dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background-color: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.2s; border: none; padding: 0; }
.dot.active { background-color: white; }

/* 设置区域 */
.settings-header { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; }
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; }
.setting-item { display: flex; justify-content: space-between; align-items: center; }
.setting-item label { font-size: 0.875rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.controls { display: flex; align-items: center; gap: 0.75rem; }
input[type="range"] { width: 10rem; }
.value-display { font-family: monospace; background-color: hsl(var(--muted)); color: hsl(var(--foreground)); padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; min-width: 3.5rem; text-align: center; border: 1px solid hsl(var(--border)); }
.dark .value-display { background-color: #111827; color: #f9fafb; border-color: #374151;}
select { width: auto; padding: 0.5rem; background-color: hsl(var(--background)); border: 1px solid hsl(var(--input)); border-radius: 0.375rem; color: hsl(var(--foreground)); }
.color-picker-btn { width: 1.5rem; height: 1.5rem; border: 1px solid hsl(var(--border)); cursor: pointer; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: transparent; padding: 0; }
.color-picker-btn img { height: 100%; width: 100%; border-radius: 50%;}
.switch-toggle { width: 2.5rem; height: 1.5rem; position: relative; }
.switch-toggle input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: hsl(var(--input)); transition: .4s; border-radius: 1.5rem; }
.switch-slider:before { position: absolute; content: ""; height: 1.25rem; width: 1.25rem; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
input:checked + .switch-slider { background-color: #3b82f6; }
.dark input:checked + .switch-slider:before { background-color: hsl(var(--primary-foreground)); }

/* 代码生成区域 */
.generate-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.generate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.code-box { display: flex; flex-direction: column; gap: 0.5rem; }
.code-box-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.5rem; border-bottom: 1px solid hsl(var(--border)); }
.code-box-title { display: flex; align-items: center; gap: 0.5rem; color: hsl(var(--muted-foreground)); font-size: 0.875rem; font-weight: 500; }
.code-box-actions { display: flex; align-items: center; gap: 0.75rem; }
.icon-btn { background: none; border: none; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background-color 0.2s; color: hsl(var(--muted-foreground)); display: flex; align-items: center; font-size: 0.875rem; font-weight: 500; }
.icon-btn:hover { background-color: hsl(var(--accent)); }
.icon-btn img { height: 1rem; width: 1rem; }
.dark .icon-btn img { filter: invert(1); }
.code-box-content { position: relative; }
.code-box textarea { width: 100%; height: 10rem; background-color: hsl(var(--muted)); border: none; border-radius: 0.375rem; padding: 0.75rem; color: hsl(var(--secondary-foreground)); font-family: monospace; resize: none; line-height: 1.5; }

/* 弹窗与提示 */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background-color: hsl(var(--card)); padding: 2rem; border-radius: var(--radius); width: 90%; max-width: 500px; display: flex; flex-direction: column; gap: 1rem; border: 1px solid hsl(var(--border)); }
.modal-content h3 { font-size: 1.25rem; font-weight: 600; margin: 0; }
.modal-content textarea { height: 100px; padding: 0.5rem; font-family: monospace; resize: none; background-color: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: 0.375rem; }
.modal-buttons { display: flex; justify-content: flex-end; gap: 0.5rem; }
.tooltip { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); padding: 0.75rem 1.5rem; border-radius: var(--radius); color: white; font-weight: 500; z-index: 2000; opacity: 0; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; pointer-events: none; }
.tooltip.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.tooltip.success { background-color: #28a745; }
.tooltip.error { background-color: #dc3545; }