/* snowflake-text.html 私有样式 */
.container { max-width: 1400px; }
.main { grid-template-columns: 400px 1fr; }

/* ---- 画布尺寸输入 ---- */
.size-inputs {
    display: flex; align-items: center; gap: 6px;
}
.size-inputs .input-wrap { flex: 1; position: relative; }
.size-inputs .form-control { width: 100%; padding-right: 48px; }
.size-inputs .suffix {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 12px; color: #9ca3af; pointer-events: none; white-space: nowrap;
}
.size-x { color: #9ca3af; font-size: 14px; flex-shrink: 0; }

/* ---- 预览区 ---- */
.preview-area {
    min-height: 380px; display: flex; align-items: center; justify-content: center;
    padding: 15px; background: #f2f3f5;
    background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%),
                      linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%);
    background-size: 20px 20px; background-position: 0 0, 10px 10px;
    border: 1px solid #e5e7eb; border-radius: 0 0 8px 8px;
}
#sfCanvas {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); max-width: 100%; height: auto;
    display: block; margin: 0 auto;
}

/* ---- 颜色行 ---- */
.color-row { display: flex; align-items: center; gap: 8px; }
.color-row input[type="color"] {
    width: 36px; height: 36px; border: 1px solid #d1d5db;
    border-radius: 6px; padding: 2px; cursor: pointer; background: #fff;
}
.color-hex { font-size: 13px; color: #6b7280; font-family: monospace; }

/* ---- 参数行 ---- */
.param-row { display: flex; align-items: center; gap: 10px; }
.param-row input[type="range"] { flex: 1; accent-color: #667eea; cursor: pointer; }
.size-val {
    font-size: 12px; color: #667eea; font-weight: 600; float: right;
    font-variant-numeric: tabular-nums;
}

/* ---- 选项网格 ---- */
.check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.check-item {
    display: flex; align-items: center; gap: 6px; padding: 6px 8px;
    border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb;
    font-size: 12px; color: #374151; cursor: pointer;
}
.check-item input[type="checkbox"] { accent-color: #667eea; cursor: pointer; }
.check-item:has(input:checked) { border-color: #667eea; background: #eef2ff; color: #4338ca; font-weight: 500; }

/* ---- radio-card ---- */
.radio-group { display: flex; gap: 6px; flex-wrap: wrap; }
.radio-card {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 4px; padding: 8px 6px; border: 1px solid #d1d5db; border-radius: 6px;
    background: #fff; font-size: 12px; color: #374151; cursor: pointer;
    text-align: center; transition: all 0.2s;
}
.radio-card input[type="radio"] { accent-color: #667eea; cursor: pointer; }
.radio-card:has(input:checked) { border-color: #667eea; background: #eef2ff; color: #4338ca; font-weight: 500; }

/* ---- GIF 选项区 ---- */
.gif-opts {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px;
    background: #f9fafb; margin-bottom: 4px;
}
.gif-opts .form-group { margin-bottom: 10px; }
.gif-opts .form-group:last-child { margin-bottom: 0; }

/* ---- 响应式 ---- */
@media (max-width: 900px) {
    .main { grid-template-columns: 1fr; }
    .preview-area { min-height: 250px; }
}
@media (max-width: 600px) {
    .check-grid { grid-template-columns: repeat(3, 1fr); }
    .size-inputs { flex-wrap: wrap; }
    .size-inputs .input-wrap { min-width: calc(50% - 16px); }
    .radio-card { flex: 1 1 calc(50% - 3px); }
}