/* signature-draw —— 手写签名业务样式 */

.sd-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    margin-bottom: 20px;
}
.sd-header { margin-bottom: 16px; }
.sd-title { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.sd-hint { font-size: 12px; color: var(--c-text-sub); }

/* 画布 */
.sd-canvas-box {
    position: relative;
    border: 2px dashed var(--c-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--c-surface-soft);
    margin-bottom: 18px;
    touch-action: none; /* 防止触屏滚动干扰 */
}
#sdCanvas {
    display: block;
    width: 100%;
    height: auto;
    cursor: crosshair;
    touch-action: none;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--c-border) 40%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--c-border) 40%, transparent) 1px, transparent 1px);
    background-size: 40px 40px;
}
.sd-canvas-tip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: var(--c-text-sub);
    font-weight: 600;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.sd-canvas-box.drawing .sd-canvas-tip { opacity: 0; }

/* 工具栏 */
.sd-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 14px 16px;
    background: var(--c-surface-soft);
    border-radius: 12px;
    margin-bottom: 16px;
}
.sd-tool-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sd-tool-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-text-sub);
    margin-right: 4px;
}

/* 颜色选择 */
.sd-colors {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sd-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.12s ease;
    padding: 0;
}
.sd-color:hover { transform: scale(1.1); }
.sd-color.active {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 30%, transparent);
}
.sd-color-black  { background: #1a1a1a; }
.sd-color-blue   { background: #1565c0; }
.sd-color-red    { background: #c62828; }
.sd-color-green  { background: #2e7d32; }
.sd-color-purple { background: #7b1fa2; }
.sd-color-orange { background: #e65100; }
.sd-color-custom {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px dashed var(--c-border);
    cursor: pointer;
    background: var(--c-surface-soft);
    padding: 0;
    overflow: hidden;
}

/* 粗细选择 */
.sd-brush-sizes {
    display: flex;
    gap: 4px;
}
.sd-brush {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--c-text);
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.12s ease;
}
.sd-brush span {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--c-text);
}
.sd-brush[data-size="1.5"] span { width: 5px; height: 5px; }
.sd-brush[data-size="3"]   span { width: 9px; height: 9px; }
.sd-brush[data-size="6"]   span { width: 14px; height: 14px; }
.sd-brush[data-size="10"]  span { width: 20px; height: 20px; }
.sd-brush.active {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 8%, transparent);
}

/* checkbox */
.sd-tool-check {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.sd-tool-check input { accent-color: var(--c-primary); cursor: pointer; }

/* 操作按钮 */
.sd-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.sd-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}
.sd-btn-primary {
    background: var(--c-primary);
    color: #fff;
}
.sd-btn-primary:hover { opacity: 0.9; }
.sd-btn-secondary {
    background: transparent;
    color: var(--c-primary);
    border-color: var(--c-primary);
}
.sd-btn-secondary:hover {
    background: color-mix(in srgb, var(--c-primary) 8%, transparent);
}
.sd-btn-ghost {
    background: transparent;
    color: var(--c-text-sub);
    border-color: var(--c-border);
}
.sd-btn-ghost:hover { color: var(--c-text); border-color: var(--c-primary); }
.sd-btn:active { transform: scale(0.97); }

/* 免责 + 简介 */
.sd-disclaim {
    font-size: 13px;
    color: var(--c-text-sub);
    line-height: 1.8;
    padding: 14px 18px;
    background: var(--c-surface-soft);
    border: 1px solid color-mix(in srgb, var(--c-primary) 25%, transparent);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}
.sd-disclaim b { color: var(--c-text); }

.sd-info-block { margin-bottom: 24px; }

@media (max-width: 640px) {
    .sd-tools { gap: 12px; }
    .sd-colors { flex-wrap: wrap; }
    .sd-brush-sizes { flex-wrap: wrap; }
    .sd-actions { flex-direction: column; }
    .sd-btn { width: 100%; }
}