.sign-tool .sign-container { max-width: 1180px; }
  .sign-grid { display: grid; grid-template-columns: minmax(320px, .82fr) minmax(420px, 1.18fr); gap: 22px; margin-top: 22px; align-items: start; }
  .sign-panel, .sign-preview-panel { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 20px; }
  .sign-panel-head, .sign-preview-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
  .sign-panel-head h2, .sign-preview-head h2 { margin:0; font-size:1.05rem; }
  .sign-panel-head p, .sign-preview-head p { margin:4px 0 0; color:var(--muted); font-size:.9rem; }
  .sign-saved-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-top:10px; }
  .sign-saved-item { position:relative; }
  .sign-saved-item .sign-saved-use { width:100%; height:78px; padding:8px; display:grid; place-items:center; background:#fff !important; border:1px solid var(--border) !important; border-radius:10px; box-shadow:none !important; cursor:pointer; }
  .sign-saved-item .sign-saved-use img { max-width:100%; max-height:60px; object-fit:contain; }
  .sign-saved-item.is-active .sign-saved-use { border:2px solid var(--accent) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important; }
  .sign-saved-item .sign-saved-del { position:absolute; top:-8px; right:-8px; width:24px; height:24px; padding:0; border-radius:50%; display:grid; place-items:center; font-size:15px; line-height:1;
    background:var(--card) !important; color:var(--muted) !important; border:1px solid var(--border) !important; box-shadow:none !important; cursor:pointer; }
  .sign-saved-item .sign-saved-del:hover { color:var(--error) !important; border-color:var(--error) !important; }
  .sign-save-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
  .sign-save-row:not(:has(button:not([hidden]))):has(.sign-save-msg:empty) { display:none; }
  .sign-save-msg { color:var(--muted); font-size:.88rem; }
  .sign-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:16px 0 14px; padding:0; border:0; border-radius:0; background:transparent; }
  .sign-tab { background:transparent; color:var(--muted); border:0; border-radius:8px; padding:10px 8px; font-weight:600; cursor:pointer; transition:background .15s ease,color .15s ease; }
  .sign-tab:hover { color:var(--text); background:var(--bg); }
  .sign-tab.is-active { background:color-mix(in srgb, var(--accent) 14%, var(--card)) !important; color:var(--text) !important; border:1px solid var(--accent) !important; box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) !important; }
  .sign-color-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 14px; }
  .sign-color-label { color:var(--muted); font-size:.82rem; font-weight:600; }
  .sign-color-options { display:flex; gap:6px; }
  .sign-color { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; background-color:transparent !important; background-image:linear-gradient(rgb(238, 238, 239) 0%, rgb(213, 214, 217) 100%) !important; color:#17181b !important; border:1px solid #b8bbc0 !important; border-radius:9px; font-size:.8rem; font-weight:600; box-shadow:none !important; }
  .sign-color:hover { color:#17181b !important; border-color:var(--accent) !important; }
  .sign-color.is-active { color:var(--text) !important; border-color:var(--accent) !important; background:color-mix(in srgb, var(--accent) 14%, var(--card)) !important; background-image:none !important; box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) !important; }
  .sign-color-dot { width:12px; height:12px; flex:0 0 12px; border-radius:50%; border:1px solid rgba(0,0,0,.16); }
  .sign-color-dot.black { background:#111827; }
  .sign-color-dot.blue { background:#1557b0; }
  .sign-pad { display:block; width:100%; height:150px; border:1px dashed var(--border); border-radius:14px; background:#fff; cursor:crosshair; touch-action:none; }
  .sign-row { display:flex; align-items:center; gap:10px; margin-top:9px; }
  .sign-hint, .sign-upload-note { color:var(--muted); font-size:.82rem; }
  .sign-field-label { display:block; margin:8px 0 7px; font-size:.9rem; font-weight:600; }
  .sign-text-input { width:100%; padding:12px 13px; font:inherit; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); }
  .sign-typed-preview { min-height:98px; margin-top:10px; display:flex; align-items:center; justify-content:center; border:1px dashed var(--border); border-radius:12px; background:#fff; color:#111827; font:italic 42px "Brush Script MT","Segoe Script","URW Chancery L",cursive; overflow:hidden; white-space:nowrap; padding:12px; }
  .sign-add { width:100%; margin-top:14px; }
  .sign-placement-head { margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
  .sign-pages-nav { display:flex; align-items:center; justify-content:center; gap:12px; margin:12px 0 0; }
  .sign-pages-nav .ghost { min-width:42px; }
  .sign-legal { display:flex; gap:10px; margin-top:18px; padding:12px 13px; border:1px solid var(--border); border-radius:12px; background:var(--bg); color:var(--muted); font-size:.78rem; line-height:1.45; }
  .sign-legal strong { color:var(--text); white-space:nowrap; }
  .sign-confirm { display:flex; align-items:center; gap:8px; margin:12px 0 0; color:var(--muted); font-size:.8rem; font-weight:500; }
  .sign-confirm input { appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:0 0 18px; margin:0; border:1.5px solid var(--border); border-radius:5px; background:var(--bg); display:grid; place-content:center; cursor:pointer; transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .08s ease; }
  .sign-confirm input:hover { border-color:var(--accent); }
  .sign-confirm input:focus-visible { outline:2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset:2px; }
  .sign-confirm input:active { transform:scale(.94); }
  .sign-confirm input:checked { border-color:var(--accent); background:var(--accent); box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 28%, transparent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.2 7.2 12.4 14 5.7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:13px 13px; }
  .sign-preview-panel { min-width:0; }
  .sign-preview-head { align-items:center; }
  .sign-stage-wrap { margin-top:14px; padding:14px; min-height:420px; max-height:72vh; overflow:auto; border-radius:14px; background:var(--bg); border:1px solid var(--border); }
  .sign-stage { position:relative; margin:0 auto; background:#fff; box-shadow:0 2px 14px rgba(0,0,0,.14); }
  .sign-stage > canvas { display:block; max-width:none; }
  .sign-overlay { position:absolute; inset:0; pointer-events:none; }
  .sign-item { position:absolute; box-sizing:border-box; border:1.5px dashed transparent; pointer-events:auto; cursor:move; user-select:none; touch-action:none; transform:rotate(var(--sign-rotation, 0deg)); transform-origin:center center; }
  .sign-item.is-selected { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
  .sign-item img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
  .sign-resize { position:absolute; right:-7px; bottom:-7px; width:14px; height:14px; border-radius:4px; border:2px solid var(--card); background:var(--accent); cursor:nwse-resize; opacity:0; visibility:hidden; pointer-events:none; }
  .sign-control { position:absolute; width:28px; height:28px; border:1px solid var(--card); border-radius:7px; display:grid; place-items:center; padding:0; background:var(--card); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.18); cursor:pointer; z-index:3; transform:rotate(calc(-1 * var(--sign-rotation, 0deg))); opacity:0; visibility:hidden; pointer-events:none; }
  .sign-item.is-selected .sign-control, .sign-item.is-selected .sign-resize { opacity:1; visibility:visible; pointer-events:auto; }
  .sign-control svg { width:15px; height:15px; display:block; }
  .sign-control:hover { color:var(--accent); border-color:var(--accent); }
  .sign-delete { top:-14px; left:-14px; }
  .sign-rotate { top:-14px; right:-14px; cursor:grab; }
  .sign-rotate:active { cursor:grabbing; }
  .sign-footer { display:flex; align-items:center; gap:12px; margin-top:14px; }
  .sign-footer .converter-status { flex:1; min-width:0; }
  .sign-footer button { white-space:nowrap; }
  .sign-upload-note { margin:9px 0 0; }
  @media (max-width: 920px) {
    .sign-grid { grid-template-columns:1fr; }
    .sign-stage-wrap { max-height:none; }
  }
  @media (max-width: 560px) {
    .sign-grid { gap:14px; }
    .sign-panel, .sign-preview-panel { padding:14px; border-radius:14px; }
    .sign-tabs { grid-template-columns:1fr; }
    .sign-footer { align-items:stretch; flex-direction:column; }
    .sign-footer button { width:100%; }
    .sign-preview-head { flex-direction:column; align-items:stretch; }
    .sign-preview-head .ghost { width:100%; }
    .sign-legal { font-size:.74rem; }
  }