:root{
  --grad-start:#4F46E5;
  --grad-end:#7C3AED;
  --bg-soft:#F8F9FF;
  --text-main:#1E1B2E;
  --text-sub:#5B5675;
  --border:#E4E1F5;
}
*{box-sizing:border-box;}
body{font-family:'DM Sans',sans-serif;color:var(--text-main);background:var(--bg-soft);margin:0;}
h1,h2,h3{font-family:'Syne',sans-serif;font-weight:700;}
a{color:var(--grad-start);}

.tool-hero{max-width:1100px;margin:0 auto;padding:48px 20px 12px;text-align:center;}
.tool-hero h1{font-size:2.4rem;background:linear-gradient(90deg,var(--grad-start),var(--grad-end));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:12px;}
.tool-hero p{color:var(--text-sub);font-size:1.05rem;max-width:640px;margin:0 auto;}

.security-notice{max-width:1000px;margin:16px auto 0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:0.88rem;color:var(--text-sub);}
.security-notice svg{width:16px;height:16px;color:#2E9E5B;flex-shrink:0;}

.tool-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px;max-width:1080px;margin:32px auto;box-shadow:0 8px 30px rgba(79,70,229,0.06);}

.upload-zone{border:2px dashed #B9B3EE;border-radius:14px;padding:48px 20px;text-align:center;cursor:pointer;transition:all .2s ease;background:var(--bg-soft);}
.upload-zone.dragover{border-color:var(--grad-start);background:#EEEBFF;}
.upload-zone svg{width:44px;height:44px;margin-bottom:12px;color:var(--grad-start);}
.upload-zone h3{margin:0 0 6px;font-size:1.1rem;}
.upload-zone p{color:var(--text-sub);margin:0;font-size:0.9rem;}
.upload-zone .browse-link{color:var(--grad-start);font-weight:600;text-decoration:underline;}

.sign-workspace{display:grid;grid-template-columns:1fr 320px;gap:24px;margin-top:8px;}
@media(max-width:900px){.sign-workspace{grid-template-columns:1fr;}}

.page-stage{background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center;}
.page-stage-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:0.88rem;color:var(--text-sub);}
.page-stage-toolbar .nav-btns{display:flex;gap:6px;}
.page-stage-toolbar button{border:1px solid var(--border);background:#fff;border-radius:6px;width:30px;height:30px;cursor:pointer;}
.page-stage-toolbar button:disabled{opacity:0.35;cursor:not-allowed;}
.page-canvas-wrap{position:relative;display:inline-block;max-width:100%;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,0.08);}
.page-canvas-wrap canvas{display:block;max-width:100%;height:auto;}

.sig-overlay{position:absolute;border:1.5px dashed var(--grad-start);cursor:move;touch-action:none;background:rgba(79,70,229,0.03);}
.sig-overlay img{width:100%;height:100%;display:block;pointer-events:none;}
.sig-overlay .resize-handle{position:absolute;right:-8px;bottom:-8px;width:16px;height:16px;background:var(--grad-start);border:2px solid #fff;border-radius:50%;cursor:nwse-resize;}
.sig-overlay .remove-mini{position:absolute;top:-10px;right:-10px;width:20px;height:20px;background:#fff;border:1px solid var(--border);border-radius:50%;font-size:0.7rem;line-height:1;cursor:pointer;color:#B23A3A;}

.sig-panel{border:1px solid var(--border);border-radius:12px;padding:16px;background:#fff;}
.sig-panel h3{font-size:0.95rem;margin:0 0 12px;}
.sig-tabs{display:flex;gap:6px;margin-bottom:14px;}
.sig-tabs button{flex:1;padding:8px 6px;border:1px solid var(--border);background:var(--bg-soft);border-radius:8px;font-size:0.82rem;font-weight:600;cursor:pointer;color:var(--text-sub);}
.sig-tabs button.active{background:var(--grad-start);color:#fff;border-color:var(--grad-start);}
.sig-pane{display:none;}
.sig-pane.active{display:block;}

.sig-canvas-wrap{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fefefe;}
#drawCanvas{width:100%;height:150px;display:block;touch-action:none;cursor:crosshair;}
.sig-row{display:flex;gap:8px;align-items:center;margin-top:10px;}
.sig-row label{font-size:0.82rem;color:var(--text-sub);}
.sig-row input[type=color]{width:32px;height:32px;border:1px solid var(--border);border-radius:6px;padding:0;}
.sig-row input[type=range]{flex:1;}

.type-input{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;font-size:1.4rem;margin-bottom:10px;}
.font-choice{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.font-choice label{border:1px solid var(--border);border-radius:8px;padding:8px 10px;cursor:pointer;font-size:1.2rem;flex:1;text-align:center;background:var(--bg-soft);}
.font-choice input{display:none;}
.font-choice input:checked + span{color:var(--grad-start);}
.font-choice label:has(input:checked){border-color:var(--grad-start);background:#F1EFFF;}

.upload-sig-zone{border:2px dashed var(--border);border-radius:10px;padding:20px;text-align:center;cursor:pointer;font-size:0.85rem;color:var(--text-sub);}

.control-group{margin-top:14px;}
.control-group label{display:block;font-weight:600;font-size:0.85rem;margin-bottom:6px;}
.control-group select{width:100%;padding:8px;border:1px solid var(--border);border-radius:8px;background:#fff;font-family:inherit;}

.modern-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:10px;border:none;font-weight:700;font-size:0.94rem;cursor:pointer;font-family:'DM Sans',sans-serif;transition:transform .15s ease, box-shadow .15s ease;width:100%;}
.modern-btn-primary{background:linear-gradient(90deg,var(--grad-start),var(--grad-end));color:#fff;box-shadow:0 6px 18px rgba(79,70,229,0.28);}
.modern-btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(79,70,229,0.36);}
.modern-btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none;}
.modern-btn-secondary{background:#fff;border:1px solid var(--border);color:var(--text-main);}
.btn-row{display:flex;gap:10px;margin-top:14px;}
.btn-row .modern-btn{width:auto;flex:1;}

.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,0.5);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none;}
@keyframes spin{to{transform:rotate(360deg);}}

.file-size-info{font-size:0.88rem;color:var(--text-sub);margin-top:10px;text-align:center;}

.info-box, .warning-box{border-radius:12px;padding:16px 18px;margin:20px 0;font-size:0.94rem;}
.info-box{background:#EEF0FF;border-left:4px solid var(--grad-start);}
.warning-box{background:#FFF6E9;border-left:4px solid #E8A33D;}


.comparison-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:0.92rem;}
.comparison-table th,.comparison-table td{border:1px solid var(--border);padding:10px 12px;text-align:left;}
.comparison-table th{background:var(--bg-soft);font-family:'Syne',sans-serif;}

.use-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:22px 0;}
.use-grid .fc-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;}
.use-grid .fc-item h4{margin:0 0 6px;font-family:'Syne',sans-serif;}


.affiliate-cta{max-width:1000px;margin:40px auto;background:linear-gradient(90deg,var(--grad-start),var(--grad-end));border-radius:16px;padding:28px;color:#fff;text-align:center;}
.affiliate-cta a{color:#fff;background:rgba(255,255,255,0.18);padding:10px 22px;border-radius:8px;text-decoration:none;font-weight:700;display:inline-block;margin-top:12px;}

.upload-zone.upload-hidden {
  display: none !important;
}