:root{
  --primary:#1565c0; --bg:#f3f5f9; --card:#fff; --ink:#1a2333; --muted:#6b7689;
  --line:#e3e8f0; --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Google Sans","Product Sans","Segoe UI",Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#fff;color:var(--ink);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{display:flex;gap:12px;align-items:center}
.brand img{height:40px;background:transparent;padding:0}
.brand strong{display:block;font-size:17px}
.brand span{font-size:12px;color:var(--muted)}
.top-actions .btn{background:#0d1b33;border-color:#0d1b33;color:#fff}
.top-actions .btn.primary{background:#fff;color:var(--primary);border-color:var(--primary)}
.top-actions{display:flex;gap:8px}
.btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 14px;cursor:pointer;font-size:13.5px;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.btn.small{padding:6px 10px;font-size:12.5px}
.btn.dashed{border-style:dashed;width:100%;justify-content:center;color:var(--primary)}
.btn:hover{filter:brightness(.96)}
.layout{display:grid;grid-template-columns:68px 400px 1fr;gap:16px;padding:16px;max-width:1420px;margin:0 auto}
.rail{position:sticky;top:90px;align-self:start;background:#fff;border:1px solid var(--line);border-radius:28px;padding:10px 5px;display:flex;flex-direction:column;gap:4px;box-shadow:0 6px 20px rgba(13,27,51,.08);max-height:calc(100vh - 110px);overflow:auto}
.rail button{border:0;background:transparent;border-radius:18px;padding:8px 1px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;color:#5b6b84;font-size:9px;font-weight:600;font-family:inherit}
.rail button:hover{color:var(--primary)}
.rail button.on{background:transparent;color:var(--primary)}
.editor{display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 90px);overflow:auto;padding-right:4px}
/* Slim invisible scrollbars: scrolling still works, no visible track/thumb */
.rail,.editor,.ipick-menu,.preview-box,pre{scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar,.editor::-webkit-scrollbar,.ipick-menu::-webkit-scrollbar,.preview-box::-webkit-scrollbar,pre::-webkit-scrollbar{width:0;height:0;display:none}
.editor .card{display:none}
.editor .card.show{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.card h3{margin:0 0 10px;font-size:14px;display:flex;align-items:center;gap:7px;color:var(--primary)}
.directory-card{padding:18px}
.directory-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.directory-head h3{font-size:18px;margin:0 0 5px}
.directory-head p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.45}
.directory-count{flex:none;font-size:11px;font-weight:700;color:var(--primary);background:#eef3fb;border-radius:999px;padding:5px 8px}
.bulk-visibility{margin-top:14px;padding:12px;border:1px solid #d7e3f2;border-radius:12px;background:#f7faff}
.bulk-visibility .lbl{margin-top:0}
.bulk-visibility select{width:100%}
.bulk-visibility-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.bulk-visibility-actions .btn{justify-content:center;white-space:nowrap}
.bulk-visibility-status{margin:9px 0 0;color:#42506a;font-size:11.5px;font-weight:600}
.directory-list{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.directory-entry{border:1px solid var(--line);background:#fff;border-radius:13px;padding:11px;transition:border-color .15s,box-shadow .15s}
.directory-entry.selected{border-color:#8ba9d3;box-shadow:0 0 0 2px #e6eef9}
.directory-person{display:flex;gap:10px;align-items:center;min-width:0}
.directory-photo{width:45px;height:45px;flex:none;border-radius:50%;object-fit:cover;background:#dce8f5;border:1px solid #cfdaeb}
.directory-initials{display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:700;font-size:13px}
.directory-identity{min-width:0;flex:1}
.directory-identity strong{display:block;font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.directory-identity small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.directory-details{font-size:11.5px;color:#52617a;line-height:1.5;margin:9px 0 0;overflow-wrap:anywhere}
.directory-certs{display:flex;align-items:center;gap:4px;margin-top:8px;min-height:24px}
.directory-certs img{height:22px;width:auto;max-width:45px;object-fit:contain}
.directory-actions{display:flex;gap:7px;margin-top:9px}
.directory-actions button{flex:1;justify-content:center}
.directory-empty{text-align:center;padding:22px 8px;color:var(--muted);font-size:13px;border:1px dashed var(--line);border-radius:12px}
.lbl{display:block;font-size:12px;font-weight:600;color:#42506a;margin:10px 0 5px}
input[type=text],input:not([type]),input[type=color]+input,textarea{width:100%}
input,textarea{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;width:100%;font-family:inherit}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(23,65,118,.14)}
/* Custom checkboxes/radios: the native control is never visible — a tonal surface
   when off, a solid brand block with a filled check when on. */
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;width:18px;height:18px;flex:none;cursor:pointer;border:0;border-radius:5px;background:#e3eaf4;box-shadow:inset 0 1px 2px rgba(13,27,51,.16);position:relative;transition:background .15s}
input[type=radio]{border-radius:50%}
input[type=checkbox]:checked{background-color:var(--primary);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9.6 16.2 5.4 12 4 13.4 9.6 19 20.2 8.4 18.8 7Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:13px 13px}
input[type=radio]:checked{background-color:var(--primary);box-shadow:inset 0 0 0 4px #fff}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(23,65,118,.28)}
select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7689' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;padding:8px 30px 8px 10px;font-size:13px;font-family:inherit;color:var(--ink)}
input[type=color]{width:46px;height:38px;padding:3px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}
input[type=file]{font-size:12.5px;color:var(--muted)}
input[type=file]::file-selector-button{border:1px solid var(--line);background:#eef3fb;color:var(--primary);font-weight:600;border-radius:8px;padding:7px 12px;margin-right:10px;cursor:pointer;font-family:inherit;font-size:12.5px}
input[type=color]{width:46px;height:36px;padding:2px}
input[type=file]{border:none;padding:4px 0}
textarea{resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.color-row{display:flex;gap:8px;align-items:center}
.swatches{display:flex;gap:7px;margin-top:8px}
.swatches button{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}
.tpl{border:0;background:#f2f6fc;border-radius:12px;padding:8px;cursor:pointer;text-align:left;position:relative;font-family:inherit;box-shadow:0 1px 2px rgba(13,27,51,.07)}
.tpl.active{background:#dbe7f8;box-shadow:0 3px 10px rgba(23,65,118,.22)}
.tpl.active::after{content:'✓';position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 2px 6px rgba(13,27,51,.28)}
.tpl .tname{display:block;font-weight:700;font-size:13px;margin-top:7px}
.tpl .tdesc{font-size:11px;color:var(--muted)}
/* Template thumbnails: wireframes that keep the REAL distribution. Every size is in
   cqw (1 cqw = 1% of the card = 6 px of the real 600 px signature), so the miniature
   keeps those proportions at any card width. */
.sk{container-type:inline-size;display:flex;flex-direction:column;gap:2cqw;padding:3cqw;background:#fff;border-radius:2.4cqw;box-shadow:0 1px 3px rgba(13,27,51,.10);overflow:hidden}
.sk.bleed{padding:0;gap:0}
.sk.split{flex-direction:row;align-items:stretch;padding:0;gap:0}
.sk .skrow{display:flex;align-items:center;gap:2cqw;min-width:0}
.sk .skrow.tight{gap:1.7cqw}
.sk .between{justify-content:space-between}
.sk .col{display:flex;flex-direction:column;gap:1.2cqw;min-width:0}
.sk .colc{align-items:center}
.sk .colr{align-items:flex-end}
.sk .bar{display:block;height:1.2cqw;border-radius:999px;background:#dbe3ee}
.sk .bar.sm{height:.9cqw}
.sk .bar.wh{background:rgba(255,255,255,.92)}
.sk .bar.whs{background:rgba(255,255,255,.55)}
.sk .ph{border-radius:50%;background:#e2eaf5;flex:none}
.sk .logo{border-radius:1cqw;background:#cfdae9;flex:none}
.sk .crow{display:flex;align-items:center;gap:1.4cqw;margin-bottom:1.5cqw}
.sk .crow:last-child{margin-bottom:0}
.sk .cico{width:2.5cqw;height:2.5cqw;border-radius:50%;background:#cfdae9;flex:none}
.sk .dots{display:flex;gap:1.2cqw;flex:none}
.sk .dots i{width:4cqw;height:4cqw;border-radius:50%;background:#cfdae9}
.sk .pill{height:4.6cqw;border-radius:999px;background:var(--primary);opacity:.92;flex:none}
.sk .pill.ghost{background:#fff;opacity:1;box-shadow:inset 0 0 0 1px var(--primary)}
.sk .certs{display:flex;gap:1.4cqw}
.sk .certs i{width:4.4cqw;height:4.4cqw;border-radius:1cqw;background:#dde5f0}
.sk .lg{display:flex;flex-direction:column;align-items:center;gap:1cqw}
.sk .vline{width:.9cqw;align-self:stretch;border-radius:999px;background:#dbe3ee;flex:none}
.sk .hline{height:.9cqw;border-radius:999px;background:var(--primary);opacity:.85}
.sk .band{background:var(--primary);padding:3cqw 3.7cqw;display:flex;flex-direction:column;gap:1.4cqw}
.sk .body{padding:2.7cqw 3.7cqw;display:flex;flex-direction:column;gap:1.6cqw;background:#fff}
.sk .foot{padding:0 3.7cqw 3cqw;display:flex;flex-direction:column;gap:1.6cqw;background:#fff}
.sk .side{width:31.7%;flex:none;background:var(--primary);padding:4cqw 2.7cqw;display:flex;flex-direction:column;align-items:center;gap:1.5cqw}
.sk .panel{flex:1;min-width:0;padding:3.4cqw 3.7cqw;display:flex;flex-direction:column;gap:1.6cqw;background:#fff}
.sk .qr{width:15.3cqw;height:15.3cqw;border-radius:1.4cqw;background:#dde5f0;flex:none}
.sk .qwrap{display:flex;align-items:center;justify-content:center;gap:2cqw}
.presets{display:flex;gap:6px}
#agentSelect{width:100%;border:1px solid var(--line);border-radius:8px}
.row-btns{display:flex;gap:8px;margin-top:10px}
.row-btns .btn{flex:1;justify-content:center}
.db-row{display:flex;gap:8px}
.db-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#b0bac9;margin-right:6px}
.db-dot.ok{background:#2f9e44}
.db-dot.err{background:#e03131}
.hint{font-size:11.5px;color:var(--muted);margin:6px 0 0}
.checks{display:flex;gap:12px;flex-wrap:wrap;font-size:13px}
.checks.col{flex-direction:column;gap:7px}
.checks input{width:auto}
.cert-preview{display:flex;gap:8px;margin-top:10px}
.cert-preview img{height:32px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 4px}
.xlink{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;margin-bottom:6px}
.xlink select{border:1px solid var(--line);border-radius:8px;padding:8px 30px 8px 10px;font-size:13px;background-color:#fff;font-family:inherit}
.xlink-net{grid-template-columns:auto minmax(0,1fr) auto}
.xlink-comm{grid-template-columns:auto minmax(0,1fr) minmax(0,1.25fr) auto;align-items:center}
.xlink-comm input[type=checkbox]{width:18px;height:18px;margin:0}
.ipick{position:relative;min-width:0}
.ipick-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:5px 26px 5px 6px;font-size:13px;cursor:pointer;width:100%;font-family:inherit;color:var(--ink);position:relative;white-space:nowrap}
.ipick-btn::after{content:'▾';position:absolute;right:9px;color:var(--muted);font-size:11px}
.ipick-logo{width:24px;height:24px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ipick-logo img{width:14px;height:14px;display:block}
.ipick-menu{position:absolute;top:calc(100% + 5px);left:0;min-width:200px;max-width:calc(100vw - 16px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(13,27,51,.16);z-index:999;max-height:230px;overflow:auto;padding:5px}
.ipick-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--ink)}
.ipick-item:hover{background:#eef3fb}
.ipick-item.sel{font-weight:700}
.shape-sel{max-width:112px}
.seg{display:flex;gap:8px}
.seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:8px 4px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink);font-family:inherit}
.seg button.on{border-color:var(--primary);background:#eef3fb;color:var(--primary)}
.seg .sv{width:16px;height:16px;flex:none;border-radius:50%}
.seg .sv-solid{background:#174176}
.seg .sv-outline{border:2px solid #174176}
.seg .sv-plain{background:#174176;border-radius:4px}
.seg6{display:grid;grid-template-columns:1fr 1fr 1fr}
.seg .demo{width:22px;height:22px;flex:none;display:inline-flex;align-items:center;justify-content:center}
.seg .demo img{width:13px;height:13px;display:block}
.xlink button{border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer}
.preview-col{min-width:0}
.preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:11px 14px}
.preview-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;overflow:auto}
#sigPreview{display:block;position:relative;overflow:hidden;min-height:30px}
/* Mobile preview: a solid dark shell (no strokes) that locks the signature to a 390 px
   viewport so you can see how it wraps on a phone. */
.vp-seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:#eef3fb}
.vp-seg button{border:0;background:transparent;border-radius:999px;padding:5px 11px;cursor:pointer;color:#5b6b85;display:inline-flex;align-items:center;line-height:1;font-size:15px}
.vp-seg button.on{background:var(--primary);color:#fff;box-shadow:0 3px 8px rgba(23,65,118,.28)}
.vp-seg button:disabled{opacity:.4}
/* Mobile preview: phone frame whose screen is exactly a 390 x 844 px viewport
   (logical size of an iPhone 14/15). Real mobile mail clients squeeze the
   signature to the screen width instead of shrinking it whole, so inside the
   frame the outer table is clamped to the screen and its content reflows —
   exactly the line wraps you will see in Gmail / Outlook on a phone. */
.preview-box.mobile{width:410px;max-width:100%;margin:0 auto;padding:10px;border-radius:44px;background:#0d1b33;box-shadow:0 22px 44px rgba(13,27,51,.26);overflow:hidden;box-sizing:border-box}
.preview-box.mobile #sigPreview{display:block;width:390px;max-width:100%;height:844px;background:#fff;border-radius:34px;overflow:auto;padding:14px;box-sizing:border-box}
.preview-box.mobile #sigPreview > table{width:auto !important;max-width:100% !important}
/* The signature's own media query swaps the Main template's bottom row on a
   phone. The preview does not evaluate it, so the app simulates the swap. */
.preview-box.mobile .cb-desk{display:none !important}
.preview-box.mobile .cb-mob{display:table-row !important}
.preview-box.mobile .cb-name{white-space:normal !important}
.preview-box.mobile .cb-cert-role{display:none !important}
.preview-box.mobile .cb-cert-photo{display:block !important}
.switch{font-size:13px;display:flex;gap:6px;align-items:center;cursor:pointer}
.switch input{width:auto}
.tool-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{font-size:11.5px;font-weight:600;color:#42506a;background:#f1f5fa;border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
.chip.warn{color:#8a5a00;background:#fff6e5;border-color:#f0d9a8}
.btn:disabled{opacity:.4;cursor:default}
.btn.copied{background:#0f7b3f;border-color:#0f7b3f;color:#fff}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(23,65,118,.30)}
pre{background:#0d1b33;color:#cfe0ff;border-radius:12px;padding:14px;overflow:auto;max-height:320px;font-size:11.5px}
.hidden{display:none}
.steps{display:flex;flex-direction:column;gap:4px;margin-top:12px;font-size:13px;color:#42506a;background:#fff;border:1px dashed var(--line);border-radius:12px;padding:12px 14px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:#0d1b33;color:#fff;padding:11px 16px;border-radius:10px;font-size:13.5px;opacity:0;transition:.25s;pointer-events:none;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(13,27,51,.32)}
.toast[data-kind="ok"]{background:#0f4d33}
.toast[data-kind="err"]{background:#7a1f16}
.toast[data-kind="info"]{background:#0d1b33}
.toast-ico{flex:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:1000px){.layout{grid-template-columns:1fr}.editor{max-height:none}.rail{position:static;flex-direction:row;max-height:none;overflow-x:auto;padding:8px}.rail button{flex:1;min-width:64px}}