/* Paper, signature line, pen cursor and the states of a signature field (empty, drawing, done, too short). */
    .dsig { position: relative; border: 1px solid #d4d4d8; border-radius: var(--dui-radius-md, 12px); background: #fff; touch-action: none; user-select: none; -webkit-user-select: none;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06); transition: border-color .15s, box-shadow .15s; overflow: hidden; }
    .dsig[data-state="drawing"] { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18), inset 0 1px 2px rgba(15, 23, 42, .06); }
    .dsig[data-state="done"] { border-color: #16a34a; }
    .dsig[data-state="short"] { border-color: #dc2626; }
    .dsig canvas { display: block; width: 100%; height: clamp(200px, 42vw, 260px); touch-action: none; position: relative; z-index: 1;
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 25l2.2-6.6L19.6 4a2.1 2.1 0 0 1 3 0l1.4 1.4a2.1 2.1 0 0 1 0 3L9.6 22.8z' fill='%23fff' stroke='%230b1f4d' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M5.2 18.4l4.4 4.4' stroke='%230b1f4d' stroke-width='1.6'/%3E%3Cpath d='M3 25l1.2-3.6 2.4 2.4z' fill='%230b1f4d'/%3E%3C/svg%3E") 3 25, crosshair; }
    .dsig-line { position: absolute; left: 18px; right: 18px; bottom: 46px; border-bottom: 1.5px solid #a1a1aa; pointer-events: none; }
    .dsig-line::before { content: "✕"; position: absolute; left: 0; bottom: 4px; color: #a1a1aa; font-size: 15px; line-height: 1; }
    .dsig-caption { position: absolute; left: 18px; bottom: 22px; font-size: 12px; color: #a1a1aa; pointer-events: none; letter-spacing: .02em; }
    .dsig-hint { position: absolute; left: 18px; top: 14px; color: #71717a; font-size: 15px; pointer-events: none; transition: opacity .2s; }
    .dsig-demo { position: absolute; left: 50%; top: 42%; width: min(62%, 300px); transform: translate(-50%, -50%); pointer-events: none; opacity: .28; transition: opacity .2s; }
    .dsig-demo path { fill: none; stroke: #0b1f4d; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 620; stroke-dashoffset: 620; animation: dsig-write 3.2s ease-in-out infinite; }
    .dsig:not([data-state="empty"]) .dsig-demo, .dsig:not([data-state="empty"]) .dsig-hint { opacity: 0; }
    .dsig-status { position: absolute; right: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
        font-size: 12.5px; font-weight: 600; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; }
    .dsig[data-state="drawing"] .dsig-status-drawing, .dsig[data-state="done"] .dsig-status-done, .dsig[data-state="short"] .dsig-status-short { opacity: 1; transform: none; }
    .dsig-status-drawing { background: #eef2ff; color: #4338ca; }
    .dsig-status-done { background: #dcfce7; color: #166534; }
    .dsig-status-short { background: #fee2e2; color: #991b1b; }
    .dsig-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
    .dsig-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; min-height: 44px; border-radius: var(--dui-radius-md, 10px); border: 1px solid #d4d4d8; background: #fff; color: #18181b;
        font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
    .dsig-btn:hover:not(:disabled) { background: #f4f4f5; border-color: #a1a1aa; }
    .dsig-btn:disabled { opacity: .45; cursor: not-allowed; }
    .dsig-btn svg { width: 18px; height: 18px; flex: none; }
    .dsig-turn { display: none; font-size: 13px; color: #71717a; }
    @media (max-width: 560px) and (orientation: portrait) { .dsig-turn { display: block; } }
    @keyframes dsig-write { 0% { stroke-dashoffset: 620; } 55%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
    @media (prefers-reduced-motion: reduce) { .dsig-demo path { animation: none; stroke-dashoffset: 0; } }
    .dark .dsig-btn { background: rgba(255,255,255,.05); color: #f4f4f5; border-color: rgba(255,255,255,.2); }
    .dark .dsig-btn:hover:not(:disabled) { background: rgba(255,255,255,.1); }