/* Signature Maker — tool-specific styles | © 2026 ToolsFlash.com */
.sig-mode{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.mode-btn{flex:1;min-width:150px;padding:12px 14px;border:2px solid var(--border,#e2e8f0);background:var(--card-bg,#fff);border-radius:12px;cursor:pointer;font-weight:700;font-size:.95rem;color:var(--text,#0f172a);transition:border-color .15s,background .15s;display:flex;flex-direction:column;align-items:center;gap:2px}
.mode-btn .mode-sub{font-size:.72rem;font-weight:500;color:var(--muted,#64748b)}
.mode-btn.active{border-color:var(--primary,#4f46e5);background:var(--primary-soft,rgba(79,70,229,.08))}
.mode-btn.active,.mode-btn.active .mode-sub{color:var(--primary,#4f46e5)}
[data-theme="dark"] .mode-btn{background:#1e293b;border-color:#334155;color:#e2e8f0}
[data-theme="dark"] .mode-btn.active{border-color:#818cf8;background:rgba(129,140,248,.12)}
[data-theme="dark"] .mode-btn.active,[data-theme="dark"] .mode-btn.active .mode-sub{color:#a5b4fc}
.sig-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.sig-colors,.sig-widths{display:flex;gap:8px}
.sig-color{width:30px;height:30px;border-radius:50%;border:2px solid var(--border,#e2e8f0);background:var(--ink);cursor:pointer}
.sig-color.active{box-shadow:0 0 0 3px var(--primary-soft,rgba(79,70,229,.25));border-color:var(--primary,#4f46e5)}
.sig-width{width:42px;height:30px;border-radius:8px;border:2px solid var(--border,#e2e8f0);background:var(--card-bg,#fff);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sig-width span{display:block;width:22px;border-radius:3px;background:var(--text,#0f172a)}
.sig-width.active{border-color:var(--primary,#4f46e5)}
.sig-action{padding:8px 12px;border:2px solid var(--border,#e2e8f0);background:transparent;border-radius:10px;cursor:pointer;font-weight:600;font-size:.82rem;color:var(--text,#0f172a);display:flex;align-items:center;gap:6px}
.sig-action:hover{border-color:var(--primary,#4f46e5);color:var(--primary,#4f46e5)}
[data-theme="dark"] .sig-width{background:#1e293b;border-color:#334155}
[data-theme="dark"] .sig-width span{background:#e2e8f0}
[data-theme="dark"] .sig-action{border-color:#334155;color:#e2e8f0}
.sig-pad-wrap{position:relative;height:260px;border:2px dashed var(--border,#cbd5e1);border-radius:14px;background:var(--card-bg,#fff);overflow:hidden}
#sig-pad{display:block;width:100%;height:100%;cursor:crosshair}
.sig-baseline{position:absolute;left:8%;right:8%;bottom:26%;border-bottom:1.5px solid var(--border,#e2e8f0);pointer-events:none}
.sig-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--muted,#94a3b8);font-size:.95rem;pointer-events:none;display:flex;align-items:center;gap:8px;margin:0}
[data-theme="dark"] .sig-pad-wrap{background:#0f172a;border-color:#334155}
[data-theme="dark"] .sig-baseline{border-color:#334155}
.sig-fonts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:14px}
.sig-font{padding:14px 10px;font-size:1.5rem;border:2px solid var(--border,#e2e8f0);background:var(--card-bg,#fff);border-radius:12px;cursor:pointer;color:var(--text,#0f172a);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sig-font.active{border-color:var(--primary,#4f46e5);background:var(--primary-soft,rgba(79,70,229,.08));color:var(--primary,#4f46e5)}
[data-theme="dark"] .sig-font{background:#1e293b;border-color:#334155;color:#e2e8f0}
[data-theme="dark"] .sig-font.active{border-color:#818cf8;color:#a5b4fc}
.sig-preview-wrap{border:2px dashed var(--border,#cbd5e1);border-radius:14px;background:var(--card-bg,#fff);padding:28px 16px;text-align:center}
.sig-type-preview{font-family:'Dancing Script',cursive;font-size:3rem;color:var(--text,#0f172a);word-break:break-word}
[data-theme="dark"] .sig-preview-wrap{background:#0f172a;border-color:#334155}
[data-theme="dark"] .sig-type-preview{color:#e2e8f0}
.sig-export{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px}
.sig-bg-label{display:flex;align-items:center;gap:8px;font-size:.88rem;cursor:pointer}
.sig-bg-label input{width:16px;height:16px;accent-color:var(--primary,#4f46e5)}
@media (max-width:560px){.sig-pad-wrap{height:200px}.sig-type-preview{font-size:2.2rem}}