/* Res Opera Email Signature Builder - front-end (everything scoped to .rosig) */
.rosig{--rs-brand:#1f4e79;--rs-brand2:#2b6cb0;--rs-sel:#2563eb;
  --rs-ink:#1c2330;--rs-muted:#667085;--rs-line:#e3e7ee;--rs-bg:#f5f7fb;--rs-card:#fff;--rs-field:#fff;--rs-shadow:rgba(31,78,121,.14);
  position:relative;box-sizing:border-box;width:100%;max-width:1180px;margin:0 auto;padding:12px 16px 8px;
  background:var(--rs-bg);color:var(--rs-ink);border-radius:16px;
  font:15px/1.5 "Segoe UI",Calibri,-apple-system,Roboto,Arial,sans-serif;color-scheme:light;text-align:left}
.rosig[data-theme="dark"]{--rs-ink:#e6ebf5;--rs-muted:#9aa7bd;--rs-line:#334155;--rs-bg:#0f172a;--rs-card:#1e293b;--rs-field:#0f172a;--rs-shadow:rgba(0,0,0,.45);--rs-sel:#60a5fa;color-scheme:dark}
.rosig *,.rosig *::before,.rosig *::after{box-sizing:border-box}
.rosig[hidden],.rosig [hidden]{display:none!important}
.rosig img{max-width:none;border:0;box-shadow:none}

/* header / footer */
.rosig .rs-hdr{position:relative;text-align:center;padding:26px 52px 6px}
.rosig .rs-hlogo{display:block;height:44px;width:auto;margin:0 auto 10px}
.rosig .rs-title{margin:0;padding:0;font-size:30px;line-height:1.2;letter-spacing:-.3px;color:var(--rs-ink);font-weight:700}
.rosig .rs-sub{margin:8px auto 0;color:var(--rs-muted);max-width:640px}
.rosig .rs-themebtn{position:absolute;top:8px;right:0;width:40px;height:40px;border-radius:50%;border:1px solid var(--rs-line);background:var(--rs-card);color:var(--rs-ink);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.rosig .rs-themebtn:hover{border-color:var(--rs-brand2)}
.rosig .rs-ftr{text-align:center;color:var(--rs-muted);font-size:13px;padding:14px 0 18px}
.rosig .rs-ficon{margin-right:6px}
.rosig .rs-ficon img{height:16px;width:auto;vertical-align:-3px}

/* sections */
.rosig .rs-sec{background:var(--rs-card);border:1px solid var(--rs-line);border-radius:14px;padding:18px;margin:16px 0}
.rosig .rs-h{margin:0 0 12px;padding:0;font-size:16px;line-height:1.3;color:var(--rs-ink);display:flex;align-items:center;gap:8px;font-weight:700}
.rosig .rs-h b{background:var(--rs-brand);color:#fff;border-radius:50%;width:24px;height:24px;display:inline-grid;place-items:center;font-size:13px;flex:none}
.rosig .rs-chips{display:flex;flex-wrap:wrap;gap:10px}
.rosig .rs-chip{border:1.5px solid var(--rs-line);background:var(--rs-card);border-radius:999px;padding:9px 18px;cursor:pointer;font:inherit;font-weight:600;color:var(--rs-ink);line-height:1.2}
.rosig .rs-chip:hover{border-color:var(--rs-brand2)}
.rosig .rs-chip.on{background:var(--rs-brand);border-color:var(--rs-brand);color:#fff}
.rosig .rs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.rosig .rs-card{border:1.5px solid var(--rs-line);border-radius:12px;padding:12px;cursor:pointer;background:var(--rs-card);transition:.15s;text-align:left;font:inherit;color:var(--rs-ink);display:block;width:100%}
.rosig .rs-card:hover{border-color:var(--rs-brand2);box-shadow:0 4px 16px var(--rs-shadow)}
.rosig .rs-card.on{border-color:var(--rs-brand);box-shadow:0 0 0 2px var(--rs-brand) inset}
.rosig .rs-pv{background:#fff;border-radius:8px;padding:10px;pointer-events:none;overflow:hidden;min-height:96px;zoom:.55}
.rosig .rs-nm{font-weight:600;margin-top:8px;font-size:14px}

/* toolbar */
.rosig .rs-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.rosig .rs-sp{flex:1}
.rosig .rs-btn{border:1px solid var(--rs-line);background:var(--rs-card);border-radius:8px;padding:7px 12px;font:inherit;font-size:13px;line-height:1.3;cursor:pointer;color:var(--rs-ink);display:inline-flex;gap:6px;align-items:center;text-decoration:none}
.rosig .rs-btn:hover{border-color:var(--rs-brand2)}
.rosig .rs-btn[disabled]{opacity:.6;cursor:wait}
.rosig .rs-pri{background:var(--rs-brand);color:#fff;border-color:var(--rs-brand);font-weight:600}
.rosig .rs-pri:hover{background:var(--rs-brand2);color:#fff}
.rosig .rs-dng{color:#e0483b}
.rosig .rs-chk{display:inline-flex;gap:6px;align-items:center;font-size:13px;cursor:pointer;color:var(--rs-ink);margin:0}
.rosig .rs-chk input{margin:0}
.rosig .rs-color{width:34px;height:26px;padding:0;border:1px solid var(--rs-line);border-radius:6px;background:var(--rs-field);cursor:pointer}
.rosig .rs-usage{font-size:12.5px;color:var(--rs-muted);background:var(--rs-bg);border:1px solid var(--rs-line);padding:4px 10px;border-radius:999px}
.rosig .rs-usage.low{color:#e0483b;border-color:#e0483b}

/* editor */
.rosig .rs-edit{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px;align-items:start}
.rosig .rs-stage{background:#fff;color:#000;border:1px dashed #b8c2d3;border-radius:10px;padding:26px;min-height:240px;overflow:auto}
.rosig .rs-hint{font-size:12.5px;color:var(--rs-muted);margin:8px 2px 0}
.rosig .rs-panel{border:1px solid var(--rs-line);border-radius:12px;padding:12px;background:var(--rs-bg);position:sticky;top:12px}
.rosig .rs-panel h4{margin:0 0 8px;padding:0;font-size:14px;color:var(--rs-ink);font-weight:700}
.rosig .rs-row{display:grid;grid-template-columns:90px 1fr;gap:6px;align-items:center;margin:6px 0;font-size:13px;color:var(--rs-ink)}
.rosig .rs-panel input[type=text],.rosig .rs-panel input[type=url],.rosig .rs-panel input[type=number],.rosig .rs-panel select,.rosig .rs-panel textarea{width:100%;max-width:100%;padding:5px 7px;margin:0;border:1px solid var(--rs-line);border-radius:6px;font:inherit;font-size:13px;background:var(--rs-field);color:var(--rs-ink);height:auto;min-height:0}
.rosig .rs-panel input[type=color]{width:42px;height:28px;padding:0;border:1px solid var(--rs-line);border-radius:6px;background:var(--rs-field)}
.rosig .rs-panel textarea{margin-bottom:6px;resize:vertical}
.rosig .rs-empty{color:var(--rs-muted);font-size:13px;margin:0 0 8px}
.rosig .rs-seg{display:flex;gap:4px;flex-wrap:wrap}
.rosig .rs-seg button{min-width:32px;border:1px solid var(--rs-line);background:var(--rs-card);color:var(--rs-ink);border-radius:6px;padding:4px 8px;cursor:pointer;font:inherit;font-size:13px;line-height:1.2}
.rosig .rs-seg button.on{background:var(--rs-brand);color:#fff;border-color:var(--rs-brand)}
.rosig .rs-flex{display:flex;gap:6px;align-items:center}

/* the signature table itself (kept neutral so it matches the exported email) */
.rosig table.sig{border-collapse:collapse;border:0;border-spacing:0;width:auto;margin:0;background:transparent;table-layout:fixed}
.rosig table.sig td{border:0;padding:0;margin:0;vertical-align:top;background:transparent;line-height:inherit}
.rosig table.sig tr{background:transparent;border:0}
.rosig .el{position:relative;outline:1px dashed transparent;outline-offset:2px;cursor:grab;white-space:pre-wrap;min-width:6px;word-break:break-word}
.rosig .el.locked{cursor:default;outline:0}
.rosig .rs-stage .el:hover{outline-color:#9db8f5}
.rosig .rs-stage .el.locked:hover{outline-color:transparent}
.rosig .el.sel{outline:2px solid #2563eb}
.rosig .el[contenteditable=true]{cursor:text;outline:2px solid #f59e0b;background:#fffbea;color:#000}
.rosig .el.dropB::before,.rosig .el.dropA::after{content:"";position:absolute;left:0;right:0;height:3px;background:#2563eb;border-radius:2px}
.rosig .el.dropB::before{top:-4px}
.rosig .el.dropA::after{bottom:-4px}
.rosig td.over{background:rgba(37,99,235,.08)}
.rosig .el a{color:inherit;text-decoration:inherit}

/* modal + toast */
.rosig .rs-modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:grid;place-items:center;z-index:99999;padding:16px}
.rosig .rs-modal-box{background:var(--rs-card);color:var(--rs-ink);border-radius:14px;padding:22px;width:min(440px,100%);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.rosig .rs-modal-box h3{margin:0 0 8px;font-size:18px;color:var(--rs-ink)}
.rosig .rs-modal-box p{margin:0 0 16px;color:var(--rs-ink)}
.rosig .rs-modal-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.rosig .rs-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#101828;color:#fff;padding:9px 16px;border-radius:8px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:100000;max-width:90vw;text-align:center}
.rosig .rs-toast.show{opacity:1}

@media(max-width:900px){
  .rosig .rs-edit{grid-template-columns:minmax(0,1fr)}
  .rosig .rs-panel{position:static}
  .rosig .rs-hdr{padding:46px 8px 6px}
  .rosig .rs-title{font-size:24px}
}