/* engine.css — styles for the DOM that engine.js creates dynamically
   (signature modal, cert modals, toasts, tips). Include on any page that
   loads engine.js. Uses its own --se- prefixed tokens so it never clashes
   with a host page's own design tokens. */
:root{
  --se-bg:#f5f7fa;--se-surface:#fff;--se-surface2:#f0f4f8;--se-border:rgba(10,30,60,.08);--se-border-md:rgba(10,30,60,.15);
  --se-text:#0A1A33;--se-text-2:#5b6b85;--se-text-3:#9aa7bd;
  --se-navy:#0A1F3D;--se-cyan:#29B6F6;--se-cyan-dark:#0288D1;--se-cyan-light:#E3F6FF;
  --se-red:#791F1F;--se-red-light:#FCEBEB;--se-green:#3B6D11;
  --se-radius:12px;--se-radius-sm:8px;--se-radius-pill:24px;
}
.se-modal-overlay{position:fixed;inset:0;background:rgba(10,20,40,.5);display:flex;align-items:center;justify-content:center;z-index:2000;padding:16px;font-family:'Inter',sans-serif;}
.se-modal{background:var(--se-surface);border-radius:var(--se-radius);width:100%;max-width:520px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3);color:var(--se-text);}
.se-modal-head{padding:16px 20px;border-bottom:1px solid var(--se-border);display:flex;align-items:center;justify-content:space-between;}
.se-modal-head h3{font-size:15px;font-weight:700;margin:0;}
.se-modal-close{cursor:pointer;color:var(--se-text-3);font-size:18px;}
.se-modal-body{padding:20px;}
.se-modal-foot{padding:14px 20px;border-top:1px solid var(--se-border);display:flex;justify-content:flex-end;gap:8px;}
.se-tabs{display:flex;gap:2px;background:var(--se-surface2);padding:4px;border-radius:var(--se-radius-sm);margin-bottom:16px;}
.se-tab{flex:1;text-align:center;padding:8px;border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--se-text-2);}
.se-tab.active{background:var(--se-surface);color:var(--se-text);border:1px solid var(--se-border);}
.se-pane{display:none;}
.se-pane.active{display:block;}
.se-draw-canvas{width:100%;height:180px;border:1.5px dashed var(--se-border-md);border-radius:var(--se-radius-sm);background:var(--se-surface2);touch-action:none;cursor:crosshair;}
.se-type-input{width:100%;padding:12px 14px;border:1.5px solid var(--se-border-md);border-radius:var(--se-radius-sm);font-size:15px;font-family:inherit;margin-bottom:14px;background:var(--se-surface);color:var(--se-text);}
.se-type-input:focus{outline:none;border-color:var(--se-cyan-dark);}
.se-font-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.se-font-opt{border:1.5px solid var(--se-border-md);border-radius:var(--se-radius-sm);padding:14px 8px;text-align:center;font-size:24px;cursor:pointer;background:var(--se-surface);color:var(--se-text);min-height:56px;display:flex;align-items:center;justify-content:center;}
.se-font-opt.active{border-color:var(--se-cyan-dark);background:var(--se-cyan-light);}
.se-color-row{display:flex;gap:8px;}
.se-color-dot{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;}
.se-color-dot.active{border-color:var(--se-text);}
.se-upload-sig-btn{border:1.5px dashed var(--se-border-md);border-radius:var(--se-radius-sm);padding:22px;text-align:center;cursor:pointer;color:var(--se-text-2);font-size:12.5px;}
.se-upload-sig-btn:hover{border-color:var(--se-cyan-dark);}
.se-hint-box{font-size:12px;color:var(--se-text-2);background:var(--se-surface2);border-radius:var(--se-radius-sm);padding:12px;line-height:1.55;}
.se-hint-box b{color:var(--se-text);}
.se-field-lbl{font-size:11.5px;font-weight:600;color:var(--se-text-2);margin-bottom:5px;display:block;}
.se-pw-input{width:100%;padding:10px 12px;border:1.5px solid var(--se-border-md);border-radius:var(--se-radius-sm);font-size:13px;font-family:inherit;margin-bottom:12px;background:var(--se-surface);color:var(--se-text);}
.se-pw-input:focus{outline:none;border-color:var(--se-cyan-dark);}
.se-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--se-radius-pill);font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid var(--se-border-md);background:var(--se-surface);color:var(--se-text);transition:all .15s;font-family:inherit;white-space:nowrap;}
.se-btn:hover{background:var(--se-surface2);}
.se-btn:disabled{opacity:.45;cursor:not-allowed;}
.se-btn-navy{background:var(--se-navy);color:#fff;border-color:var(--se-navy);}
.se-btn-navy:hover{background:#0D2A4E;}
.se-btn-sm{padding:6px 12px;font-size:12px;}
.se-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:se-spin .7s linear infinite;display:inline-block;}
@keyframes se-spin{to{transform:rotate(360deg)}}
.se-toast{position:fixed;top:20px;right:20px;background:var(--se-navy);color:#fff;padding:12px 18px;border-radius:var(--se-radius-sm);font-size:13px;font-weight:600;z-index:3000;box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;align-items:center;gap:8px;animation:se-toastIn .25s ease both;font-family:'Inter',sans-serif;}
.se-toast.success i{color:#7ee787;}
.se-toast.error{background:var(--se-red);}
@keyframes se-toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.se-tip{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--se-navy);color:#fff;padding:10px 20px;border-radius:var(--se-radius-pill);font-size:12.5px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:1500;display:flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;}
.se-mail-modal{max-width:680px;display:flex;flex-direction:column;max-height:92vh;}
.se-mail-head{padding:12px 20px;border-bottom:1px solid var(--se-border);font-size:12.5px;color:var(--se-text);display:flex;flex-direction:column;gap:4px;background:var(--se-surface2);}
.se-mail-head span{display:inline-block;width:64px;color:var(--se-text-3);font-weight:600;}
.se-mail-frame{width:100%;height:560px;max-height:64vh;border:0;background:#eef2f7;}