@import url('./fonts/wenkai-v1.7.0/regular.css');
/* Shared across all themes. The guide sits behind the transparent ink canvas. */
.signature-widget{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.signature-preview{display:block;width:100%;aspect-ratio:2;min-height:0;padding:0;border:0;border-radius:0;background:#fff;cursor:pointer;text-align:initial}
.signature-preview:focus-visible{outline:3px solid var(--navy);outline-offset:-4px}
.signature-surface{display:block;position:relative;flex:none;background:#fff;isolation:isolate;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden}
.signature-name-guide{position:absolute;inset:0;display:block;width:100%;height:100%;font-family:"LXGW WenKai","Kaiti SC","STKaiti","KaiTi","Noto Serif CJK SC",serif;font-weight:400;color:rgba(112,112,112,.22);fill:currentColor;stroke:none;pointer-events:none;user-select:none;-webkit-user-select:none}
.signature-guide-border{fill:none;stroke:rgba(128,140,152,.28);stroke-width:1;vector-effect:non-scaling-stroke}
.signature-guide-cross{fill:none;stroke:rgba(128,140,152,.22);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.signature-surface canvas{display:block;position:absolute;inset:0;width:100%;height:100%;background:transparent;touch-action:none;cursor:crosshair}
.signature-preview canvas{pointer-events:none;cursor:pointer}
.signature-widget-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px;border-top:1px dashed var(--line);background:var(--white)}
.signature-widget-tools button{min-height:44px;display:inline-flex;align-items:center;gap:6px;font-size:13px}
.signature-widget-tools svg{width:16px;height:16px}
.signature-inline-hint{margin-top:11px;font-size:12px;color:var(--muted);line-height:1.7}
html.signature-editor-open{overflow:hidden;overscroll-behavior:none}
dialog.signature-editor{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--white);color:var(--navy-dark);overflow:hidden;box-shadow:none;overscroll-behavior:none}
dialog.signature-editor[open]{display:block}
.signature-editor-layout{display:flex;flex-direction:column;width:100%;height:100%}
dialog.signature-editor.is-rotated .signature-editor-layout{position:absolute;left:50%;top:50%;width:100vh;width:100dvh;height:100vw;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}
.signature-editor::backdrop{background:var(--white);backdrop-filter:none}
.signature-editor-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(16px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 16px max(18px,env(safe-area-inset-left));border-bottom:1px solid var(--line);flex-shrink:0}
.signature-editor-header h2{font-size:19px;margin:0;line-height:1.5}
.signature-editor-header p{font-size:12px;color:var(--muted);line-height:1.7;margin:4px 0 0}
.signature-editor-header .signature-close{flex:none;min-width:44px;min-height:44px;font-size:28px}
.signature-editor-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:18px max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left));background:var(--white)}
.signature-editor-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.signature-rotate-hint{margin:12px 0 0;text-align:center;font-size:12px;line-height:1.6;color:var(--muted)}
.signature-editor-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:14px max(18px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));flex-shrink:0}
.signature-editor-footer>span{font-size:12px;color:var(--muted);line-height:1.6}
.signature-editor-actions{display:flex;gap:10px;flex-shrink:0}
.signature-editor-actions button{min-height:44px;font-size:14px}
dialog.signature-editor.is-rotated .signature-editor-header{padding:8px max(12px,env(safe-area-inset-bottom)) 8px max(12px,env(safe-area-inset-top))}
dialog.signature-editor.is-rotated .signature-editor-header h2{font-size:17px}
dialog.signature-editor.is-rotated .signature-editor-header p{margin-top:0}
dialog.signature-editor.is-rotated .signature-editor-body{padding:10px max(12px,env(safe-area-inset-bottom)) 10px max(12px,env(safe-area-inset-top))}
dialog.signature-editor.is-rotated .signature-editor-footer{padding:8px max(12px,env(safe-area-inset-bottom)) 8px max(12px,env(safe-area-inset-top))}
@media(orientation:landscape) and (max-height:520px){.signature-editor-header{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:8px}.signature-editor-header h2{font-size:17px}.signature-editor-header p{margin-top:0}.signature-editor-body{padding-top:10px;padding-bottom:10px}.signature-rotate-hint{display:none}.signature-editor-footer{padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}}