#pe-ov { position: fixed; inset: 0; z-index: 2147483000; background: #2b2f36; display: flex; flex-direction: column; font-family: var(--tsp-ff, Inter), -apple-system, 'Segoe UI', sans-serif; }
#pe-ov .pe-bar { flex: none; height: 58px; background: #1e2533; display: flex; align-items: center; gap: 8px; padding: 0 12px; padding-top: env(safe-area-inset-top); box-sizing: content-box; }
#pe-ov .pe-act { flex: none; height: 38px; padding: 0 15px; border: 0; border-radius: 19px; font: 700 13px var(--tsp-ff, Inter), sans-serif; color: #fff; cursor: pointer; white-space: nowrap; transition: box-shadow .18s; }
#pe-ov .pe-act:hover:not(:disabled) { box-shadow: 0 4px 10px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.2); }
#pe-ov .pe-act:disabled { opacity: .5; cursor: default; }
#pe-ov .pe-c { background: #3b4a66; } #pe-ov .pe-f { background: #334155; } #pe-ov .pe-r { background: #2563eb; } #pe-ov .pe-d { background: #334155; }
#pe-ov .pe-tools { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
#pe-ov .pe-tools::-webkit-scrollbar { display: none; }
#pe-ov .pe-tb { flex: none; width: 40px; height: 40px; border: 0; border-radius: 11px; background: transparent; color: #cbd5e1; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; font: 800 13px var(--tsp-ff, Inter), sans-serif; }
#pe-ov .pe-tb:hover { background: rgba(255,255,255,.08); }
#pe-ov .pe-tb.on { background: #3b82f6; color: #fff; }
#pe-ov .pe-tb:disabled { opacity: .35; cursor: default; background: transparent; }
#pe-ov .pe-tb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#pe-ov .pe-tb[data-tip]:hover::after { content: attr(data-tip); position: absolute; top: 46px; left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff; font: 600 11px var(--tsp-ff, Inter), sans-serif; padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 5; }
#pe-ov .pe-sep { flex: none; width: 1px; height: 26px; background: rgba(255,255,255,.15); margin: 0 4px; }
#pe-ov .pe-sw { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
#pe-ov .pe-sw.on { border-color: #fff; box-shadow: 0 0 0 2px #3b82f6; }
#pe-ov .pe-cpw { flex: none; position: relative; width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444); cursor: pointer; overflow: hidden; }
#pe-ov .pe-cpw.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b82f6; }
#pe-ov .pe-cp { position: absolute; inset: -6px; width: 36px; height: 36px; opacity: 0; cursor: pointer; border: 0; padding: 0; }
#pe-ov .pe-hd { cursor: nwse-resize; }
#pe-ov .pe-body { flex: 1 1 auto; overflow: auto; position: relative; touch-action: pan-x pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#pe-ov .pe-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 22px 16px 60px; min-width: min-content; }
#pe-ov .pe-pg { position: relative; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.35); flex: none; }
#pe-ov .pe-pg.cur { outline: 3px solid #3b82f6; outline-offset: 3px; }
#pe-ov .pe-pg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#pe-ov .pe-pg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#pe-ov.drawing .pe-pg svg { touch-action: none; cursor: crosshair; }
#pe-ov .pe-pn { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); font: 600 10.5px var(--tsp-ff, Inter), sans-serif; color: #94a3b8; white-space: nowrap; }
#pe-ov .pe-in { position: absolute; z-index: 4; min-width: 120px; border: 2px solid #3b82f6; border-radius: 6px; background: rgba(255,255,255,.96); padding: 2px 6px; outline: none; font-family: Helvetica, Arial, sans-serif; color: #111; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
#pe-ov .pe-sel { fill: none; stroke: #3b82f6; stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
#pe-ov .pe-x { cursor: pointer; }
#pe-ov .pe-msg { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); color: #cbd5e1; font: 600 14px var(--tsp-ff, Inter), sans-serif; text-align: center; }
#pe-ov .pe-zoom { position: absolute; right: 14px; bottom: 14px; z-index: 6; background: rgba(15,23,42,.85); color: #fff; font: 700 12px var(--tsp-ff, Inter), sans-serif; padding: 6px 10px; border-radius: 999px; opacity: 0; transition: opacity .2s; pointer-events: none; }
#pe-ov .pe-zoom.on { opacity: 1; }
#pe-ov .pe-menu { position: absolute; z-index: 10; top: 64px; background: #fff; border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.35); padding: 6px; min-width: 210px; }
#pe-ov .pe-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; border: 0; background: none; border-radius: 8px; padding: 0 10px; font: 600 13px var(--tsp-ff, Inter), sans-serif; color: #1e293b; cursor: pointer; white-space: nowrap; }
#pe-ov .pe-menu button:hover { background: #f1f5f9; }
#pe-ov .pe-menu button:disabled { opacity: .4; cursor: default; }
#pe-ov .pe-menu svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#pe-sig { position: fixed; inset: 0; z-index: 2147483001; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
#pe-sig .ps-box { width: min(560px, 100%); background: #f4f6f9; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100dvh - 32px); font-family: var(--tsp-ff, Inter), sans-serif; }
#pe-sig .ps-hd { background: #fff; border-bottom: 1px solid #e5e9f0; padding: 14px 18px 12px; }
#pe-sig .ps-t { font: 800 17px var(--tsp-ff, Inter), sans-serif; color: #1e293b; } #pe-sig .ps-s { font: 500 12px var(--tsp-ff, Inter), sans-serif; color: #64748b; margin-top: 2px; }
#pe-sig .ps-bd { padding: 12px 14px 14px; overflow: auto; }
#pe-sig .ps-lb { font: 800 10.5px var(--tsp-ff, Inter), sans-serif; color: #64748b; letter-spacing: .06em; text-transform: uppercase; margin: 2px 2px 6px; }
#pe-sig .ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
#pe-sig .ps-it { position: relative; height: 76px; background: #fff; border: 1px solid #e5e9f0; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 6px; transition: box-shadow .18s; }
#pe-sig .ps-it:hover { box-shadow: 0 4px 10px rgba(15,23,42,.10), 0 10px 22px rgba(15,23,42,.08); }
#pe-sig .ps-it img { max-width: 100%; max-height: 100%; }
#pe-sig .ps-it .del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #f1f5f9; color: #64748b; font: 700 12px/22px var(--tsp-ff, Inter), sans-serif; cursor: pointer; }
#pe-sig .ps-new { border-style: dashed; color: #64748b; font: 700 12.5px var(--tsp-ff, Inter), sans-serif; }
#pe-sig .ps-pad { background: #fff; border: 1px solid #dde3ea; border-radius: 12px; touch-action: none; display: block; width: 100%; height: 190px; cursor: crosshair; }
#pe-sig .ps-ft { display: flex; gap: 10px; padding: 12px 14px 14px; background: #fff; border-top: 1px solid #e5e9f0; }
#pe-sig .ps-ft button { height: 42px; border: 0; border-radius: 21px; color: #fff; font: 700 13.5px var(--tsp-ff, Inter), sans-serif; cursor: pointer; }
#pe-sig .ps-ft .c { flex: 0 0 34%; background: #3b4a66; } #pe-sig .ps-ft .ok { flex: 1; background: #1e293b; } #pe-sig .ps-ft .clr { flex: 0 0 auto; padding: 0 16px; background: #475569; }
#pe-sig .ps-empty { font: 500 12.5px var(--tsp-ff, Inter), sans-serif; color: #94a3b8; padding: 6px 2px; }
@media (max-width: 760px) { #pe-ov .pe-bar { flex-wrap: wrap; height: auto; padding: 6px 8px; gap: 6px; } #pe-ov .pe-tools { order: 3; flex: 1 1 100%; justify-content: flex-start; } #pe-ov .pe-act { height: 34px; padding: 0 12px; font-size: 12px; } }