:root{--bg:#07111f;--bg2:#0b1728;--card:#101c2f;--card2:#0d1728;--line:rgba(148,163,184,.22);--text:#f8fafc;--muted:#a9b8cc;--brand:#3b82f6;--brand2:#06b6d4;--gold:#f5c76b;--green:#22c55e;--danger:#ef4444;--radius:24px;--shadow:0 22px 70px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 20% -10%,rgba(59,130,246,.22),transparent 36%),radial-gradient(circle at 100% 0%,rgba(6,182,212,.16),transparent 32%),linear-gradient(180deg,#06101f,#0a1220 45%,#050914);min-height:100vh}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}input,select,textarea{width:100%;border:1px solid var(--line);background:rgba(15,23,42,.74);color:var(--text);border-radius:16px;padding:13px 14px;outline:none}textarea{min-height:106px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:rgba(96,165,250,.8);box-shadow:0 0 0 4px rgba(59,130,246,.16)}label{display:block;font-weight:850;font-size:.82rem;color:#dbeafe;margin:0 0 8px}.small,small{color:var(--muted);font-size:.84rem;line-height:1.45}.container{width:min(1180px,calc(100% - 32px));margin:auto}.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(20px);background:rgba(5,9,20,.72);border-bottom:1px solid rgba(148,163,184,.16)}.nav-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px}.logo{display:flex;align-items:center;gap:12px;font-weight:950;letter-spacing:-.04em}.logo-mark{width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;box-shadow:0 14px 36px rgba(37,99,235,.35);font-weight:1000}.logo span{font-size:1.35rem}.nav-links{display:flex;align-items:center;gap:8px}.nav-links a,.pill{border:1px solid rgba(148,163,184,.2);padding:10px 14px;border-radius:999px;color:#dbeafe;background:rgba(15,23,42,.56);font-weight:850;font-size:.86rem}.btn{border:0;cursor:pointer;border-radius:999px;padding:13px 18px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:950;color:white;background:linear-gradient(135deg,#2563eb,#06b6d4);box-shadow:0 18px 40px rgba(37,99,235,.28);transition:.18s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn.secondary{background:rgba(15,23,42,.72);border:1px solid var(--line);box-shadow:none}.btn.gold{background:linear-gradient(135deg,#8a5b12,#f5c76b);color:#120b02}.btn.green{background:linear-gradient(135deg,#16a34a,#22c55e);color:#021407}.btn.danger{background:linear-gradient(135deg,#dc2626,#fb7185)}.btn.full{width:100%}.hero{padding:80px 0 58px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}.kicker{display:inline-flex;gap:8px;align-items:center;color:#67e8f9;font-weight:950;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}h1{font-size:clamp(2.55rem,5vw,5.9rem);line-height:.92;letter-spacing:-.08em;margin:18px 0}h2{font-size:clamp(2rem,3vw,3.3rem);letter-spacing:-.06em;line-height:1;margin:0 0 16px}h3{margin:0 0 10px;font-size:1.18rem;letter-spacing:-.03em}p{color:#c9d7ea;line-height:1.62}.hero p{font-size:1.12rem;max-width:780px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(16,28,47,.92),rgba(7,17,31,.76));border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}.section{padding:54px 0}.icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:rgba(59,130,246,.18);color:#93c5fd;margin-bottom:16px;font-weight:1000}.mockup{display:grid;grid-template-columns:.72fr 1fr;gap:18px;align-items:stretch}.phone{border:10px solid #020617;border-radius:46px;overflow:hidden;background:#07111f;box-shadow:0 35px 80px rgba(0,0,0,.52);min-height:670px}.phone-screen{padding:28px 20px;min-height:100%;background:radial-gradient(circle at top,rgba(96,165,250,.32),transparent 36%),linear-gradient(180deg,#16263c,#07111f 70%);text-align:center}.avatar{width:112px;height:112px;border-radius:999px;margin:20px auto 12px;background:linear-gradient(135deg,#dbeafe,#60a5fa);display:grid;place-items:center;color:#0f172a;font-size:2.2rem;font-weight:1000;border:4px solid rgba(255,255,255,.36)}.contact-btn{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0;padding:13px 14px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;font-weight:850;font-size:.92rem}.contact-btn.primary{background:linear-gradient(135deg,#2563eb,#06b6d4)}.contact-btn.whatsapp{background:linear-gradient(135deg,#128c7e,#25d366)}.demo-stack{display:grid;gap:18px}.signature-demo{background:white;color:#0f172a;border-radius:20px;padding:22px;min-height:180px;display:grid;grid-template-columns:120px 1fr 112px;gap:18px;align-items:center}.qr-demo{width:104px;height:104px;border-radius:12px;background:#fff;padding:8px;border:1px solid #dbeafe}.tablet{min-height:320px;border-radius:28px;border:10px solid #020617;overflow:hidden;background:#eaf2ff;color:#0f172a}.tablet-top{background:#0f172a;color:white;padding:14px 18px;display:flex;justify-content:space-between}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px}.stat{background:white;border-radius:16px;padding:16px;box-shadow:0 8px 20px rgba(15,23,42,.08)}.stat b{display:block;font-size:1.4rem}.footer{border-top:1px solid rgba(148,163,184,.16);padding:28px 0;color:#93a4bc;text-align:center;font-size:.9rem}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.form-grid .full{grid-column:1/-1}hr.sep{border:0;border-top:1px solid var(--line);margin:22px 0}.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(15,23,42,.58);border-radius:999px;padding:8px 12px;font-weight:900;font-size:.8rem;color:#bfdbfe}.notice{border:1px solid rgba(34,197,94,.35);background:rgba(34,197,94,.08);color:#bbf7d0;border-radius:18px;padding:14px 16px;margin:14px 0}.error{border:1px solid rgba(239,68,68,.4);background:rgba(239,68,68,.1);color:#fecaca;border-radius:18px;padding:14px 16px;margin:14px 0}.hidden{display:none!important}.admin-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}.sidebar{border-right:1px solid var(--line);padding:22px;position:sticky;top:0;height:100vh;background:rgba(5,9,20,.72);backdrop-filter:blur(18px)}.sidebar nav{display:grid;gap:10px;margin-top:24px}.sidebar nav a{padding:12px 14px;border-radius:16px;color:#cbd5e1;font-weight:850;border:1px solid transparent}.sidebar nav a.active,.sidebar nav a:hover{background:rgba(59,130,246,.16);border-color:rgba(96,165,250,.24);color:#fff}.main{padding:28px;overflow:hidden}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}.list{display:grid;gap:12px}.row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;border:1px solid var(--line);border-radius:20px;padding:16px;background:rgba(15,23,42,.52)}.row-actions{display:flex;gap:8px;flex-wrap:wrap}.mini-btn{cursor:pointer;border:1px solid var(--line);background:rgba(15,23,42,.72);color:#e2e8f0;border-radius:999px;padding:9px 12px;font-weight:900;font-size:.78rem}.brandkit{border:1px solid rgba(103,232,249,.28);background:linear-gradient(180deg,rgba(8,47,73,.5),rgba(15,23,42,.62));border-radius:24px;padding:18px;margin-top:16px}.palette-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.palette{border:1px solid var(--line);border-radius:18px;padding:12px;cursor:pointer;min-height:112px;background:rgba(15,23,42,.7)}.palette:hover,.palette.active{border-color:#67e8f9;box-shadow:0 0 0 3px rgba(103,232,249,.12)}.swatches{display:flex;gap:5px;margin-top:9px}.swatch{width:18px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.34)}.public-wrap{min-height:100vh;display:grid;place-items:center;padding:30px 16px}.digital-card{width:min(500px,100%);border-radius:36px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 40px 100px rgba(0,0,0,.45);background:linear-gradient(180deg,#12233b,#07111f)}.digital-card-inner{padding:30px;text-align:center}.logo-public{height:58px;object-fit:contain;margin:0 auto 18px}.avatar-public{width:124px;height:124px;border-radius:999px;margin:0 auto 16px;background:linear-gradient(135deg,#eff6ff,#60a5fa);display:grid;place-items:center;color:#0f172a;font-size:2.2rem;font-weight:1000;border:4px solid rgba(255,255,255,.36);overflow:hidden}.public-links{display:grid;gap:10px;margin:22px 0}.public-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-weight:900}.qr-box{background:#fff;border-radius:18px;padding:14px;width:174px;margin:18px auto 0}.directory-hero{text-align:center;padding:56px 0 22px}.directory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 60px}.employee-card{border:1px solid var(--line);border-radius:24px;padding:20px;background:rgba(15,23,42,.64)}.searchbar{max-width:640px;margin:20px auto 0}.signature-box{background:#fff;color:#0f172a;border-radius:24px;padding:22px;overflow:auto}.codebox{background:#020617;border:1px solid rgba(148,163,184,.26);border-radius:18px;padding:16px;white-space:pre-wrap;word-break:break-word;color:#dbeafe;max-height:300px;overflow:auto;font-size:.82rem}
@media(max-width:980px){.hero-grid,.mockup,.grid-3,.grid-2,.form-grid,.directory-grid{grid-template-columns:1fr}.admin-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.signature-demo{grid-template-columns:1fr;text-align:center}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.nav-links a:not(.keep){display:none}.hero{padding:46px 0}.phone{min-height:580px}.main{padding:18px}.palette-grid{grid-template-columns:1fr}h1{font-size:3rem}.row{grid-template-columns:1fr}}

/* =========================================================
   DigiSign.click V1.1 - Premium public card polish
   Fixes dark-on-dark contrast and upgrades the public card UI.
   No DB changes required.
========================================================= */
.public-card-page{background-attachment:fixed;color:#f8fafc}.public-card-page .footer{display:none}.public-card-page .public-wrap{align-items:start;padding:46px 16px 36px}.pro-card{width:min(530px,100%);background:var(--pro-card-bg)!important;color:var(--pro-text)!important;border:1px solid var(--pro-line)!important;box-shadow:var(--pro-shadow)!important;position:relative;overflow:hidden}.pro-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 28%,rgba(255,255,255,.04));pointer-events:none}.pro-card-inner{position:relative;z-index:1;padding:30px 26px 26px;text-align:center}.pro-card-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.pro-logo{height:70px;max-width:190px;margin:0;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(0,0,0,.22))}.pro-logo-text{justify-content:flex-start;letter-spacing:-.04em;color:var(--pro-text)}.pro-badge{border:1px solid var(--pro-line);background:var(--pro-glass);color:var(--pro-muted);border-radius:999px;padding:8px 10px;font-weight:950;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}.pro-avatar{width:126px;height:126px;margin:0 auto 18px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(147,197,253,.88));border:4px solid rgba(255,255,255,.72);box-shadow:0 24px 55px rgba(0,0,0,.24),0 0 0 10px rgba(255,255,255,.06);color:#07111f}.pro-name{color:var(--pro-text)!important;font-size:clamp(2rem,5.8vw,2.75rem);line-height:.96;letter-spacing:-.075em;margin:0 0 8px!important;text-shadow:0 2px 14px rgba(0,0,0,.16)}.pro-title{color:var(--pro-muted)!important;font-size:1.02rem;line-height:1.35;margin:0!important;font-weight:720}.pro-company{color:var(--pro-soft)!important;font-size:.96rem;margin:9px 0 0!important;font-weight:820;letter-spacing:.01em}.public-primary-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0 4px}.pro-primary-action{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:16px;background:linear-gradient(135deg,var(--pro-cta),var(--pro-secondary));color:var(--pro-cta-text)!important;font-weight:1000;box-shadow:0 18px 35px rgba(37,99,235,.22);border:1px solid rgba(255,255,255,.12)}.pro-primary-action.whatsapp-action{background:linear-gradient(135deg,#128c7e,#25d366);color:#fff!important}.pro-primary-action.ghost{background:var(--pro-glass);color:var(--pro-text)!important;box-shadow:none;border-color:var(--pro-line)}.pro-links{gap:11px;margin:18px 0}.pro-contact{color:var(--pro-text)!important;background:var(--pro-glass)!important;border:1px solid var(--pro-line)!important;box-shadow:0 10px 22px rgba(0,0,0,.06);min-height:58px;transition:.18s ease}.pro-contact:hover{background:var(--pro-glass-hover)!important;transform:translateY(-1px)}.contact-left{display:flex;align-items:center;gap:10px;min-width:0}.contact-icon{width:32px;height:32px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid var(--pro-line);font-weight:1000;color:var(--pro-text)}.contact-label{font-weight:1000;letter-spacing:-.02em;color:var(--pro-text)}.contact-value{font-weight:850;color:var(--pro-muted);font-size:.88rem;text-align:right;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pro-contact[data-type="whatsapp"] .contact-icon{background:rgba(37,211,102,.18);color:#22c55e}.pro-contact[data-type="email"] .contact-icon{background:rgba(59,130,246,.18);color:#60a5fa}.pro-contact[data-type="phone"] .contact-icon,.pro-contact[data-type="mobile"] .contact-icon{background:rgba(245,199,107,.16);color:#fbbf24}.pro-section{border:1px solid var(--pro-line);background:var(--pro-glass);border-radius:20px;padding:16px;text-align:left;margin-top:12px;color:var(--pro-text)}.pro-section-title{font-weight:1000;margin-bottom:6px}.pro-section p{color:var(--pro-muted);margin:0 0 10px;line-height:1.55}.save-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.pro-save{background:linear-gradient(135deg,var(--pro-cta),var(--pro-secondary))!important;color:var(--pro-cta-text)!important;box-shadow:0 18px 42px rgba(37,99,235,.25)!important}.pro-share{background:var(--pro-glass)!important;border:1px solid var(--pro-line)!important;color:var(--pro-text)!important}.pro-qr-box{width:188px;background:#fff!important;color:#0f172a;border:1px solid rgba(15,23,42,.1);box-shadow:0 20px 45px rgba(0,0,0,.16)}.pro-qr-box span{display:block;margin-top:8px;font-size:.7rem;font-weight:900;color:#475569;text-transform:uppercase;letter-spacing:.08em}.pro-footer{color:var(--pro-soft)!important;margin:18px 0 0!important}
@media (max-width:720px){.public-card-page .public-wrap{padding:18px 10px}.pro-card{border-radius:30px}.pro-card-inner{padding:22px 16px}.pro-card-top{display:grid;justify-items:center}.pro-logo{margin:auto;height:64px}.pro-badge{font-size:.62rem}.public-primary-actions{grid-template-columns:1fr}.save-row{grid-template-columns:1fr}.contact-value{max-width:48%;font-size:.8rem}.pro-name{font-size:2.08rem}.pro-avatar{width:116px;height:116px}}

/* =========================================================
   DigiSign.click V1.2 - Premium QR, full top ribbon, no-overflow rows
   No DB changes required.
========================================================= */
.pro-card{overflow:hidden!important;max-width:540px}.pro-card-inner{padding-top:0!important}.pro-card-ribbon{margin:0 -26px 22px;padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--pro-line);background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.055));backdrop-filter:blur(16px);color:var(--pro-text);text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;font-weight:1000}.pro-card-ribbon b{letter-spacing:.02em;text-transform:none;font-size:.82rem;color:var(--pro-muted)}.pro-card-top{justify-content:center!important;margin-bottom:18px!important}.pro-logo{height:76px;max-width:230px;object-fit:contain}.pro-logo-text{justify-content:center!important}.pro-badge{display:none!important}.pro-contact{display:grid!important;grid-template-columns:minmax(118px,.86fr) minmax(0,1.14fr);align-items:center;gap:10px;width:100%;text-align:left}.contact-left{min-width:0}.contact-label{white-space:normal;line-height:1.15}.contact-value{max-width:none!important;min-width:0;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;word-break:break-word;text-align:right;line-height:1.25;font-size:.84rem}.pro-contact[data-type="website"] .contact-value,.pro-contact[data-type="email"] .contact-value,.pro-contact[data-type="address"] .contact-value{font-size:.78rem}.pro-qr-card{margin:20px auto 0;border:1px solid var(--pro-line);background:linear-gradient(180deg,var(--pro-glass),rgba(255,255,255,.045));border-radius:28px;padding:16px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;text-align:left;box-shadow:0 18px 40px rgba(0,0,0,.10)}.pro-qr-copy strong{display:block;color:var(--pro-text);font-size:1rem;font-weight:1000;letter-spacing:-.02em}.pro-qr-copy span{display:block;margin-top:3px;color:var(--pro-muted);font-size:.8rem;line-height:1.35;font-weight:760}.pro-qr-box{width:auto!important;margin:0!important;padding:8px!important;border-radius:24px!important;background:linear-gradient(135deg,var(--pro-primary),var(--pro-secondary))!important;box-shadow:0 24px 50px rgba(0,0,0,.20)!important;border:1px solid rgba(255,255,255,.28)!important}.pro-qr-frame{position:relative;background:#fff;border-radius:18px;padding:11px;display:grid;place-items:center;min-width:178px;min-height:178px}.pro-qr-frame canvas,.pro-qr-frame img:not(.pro-qr-logo){display:block!important;border-radius:8px}.pro-qr-logo,.pro-qr-initials{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:12px;background:#fff;border:4px solid #fff;box-shadow:0 8px 18px rgba(15,23,42,.2);object-fit:contain;padding:3px}.pro-qr-initials{display:grid;place-items:center;color:#0f172a;font-weight:1000;font-size:.9rem;padding:0}.public-primary-actions{position:relative}.pro-primary-action{min-width:0;white-space:nowrap}.save-row .btn{min-width:0;white-space:normal;line-height:1.15}.pro-title,.pro-company{overflow-wrap:anywhere}.pro-name{overflow-wrap:anywhere}.public-card-page .public-wrap{overflow-x:hidden}.digital-card-inner{overflow:hidden}
@media (max-width:720px){.pro-card-ribbon{margin-left:-16px;margin-right:-16px;padding:12px 16px}.pro-card-ribbon{display:grid;justify-items:center;gap:3px}.pro-logo{height:68px;max-width:210px}.pro-contact{grid-template-columns:1fr;gap:6px}.contact-value{text-align:left;font-size:.84rem}.pro-qr-card{grid-template-columns:1fr;text-align:center;justify-items:center}.pro-qr-frame{min-width:170px;min-height:170px}.public-primary-actions{grid-template-columns:1fr 1fr}.public-primary-actions .ghost{grid-column:1/-1}.pro-primary-action{min-height:48px}.pro-card{border-radius:28px}}
@media (max-width:420px){.pro-card-inner{padding-left:12px!important;padding-right:12px!important}.pro-card-ribbon{margin-left:-12px;margin-right:-12px}.pro-name{font-size:1.8rem}.pro-avatar{width:104px;height:104px}.pro-contact{padding:13px!important}.contact-icon{width:30px;height:30px}.save-row{grid-template-columns:1fr}.public-primary-actions{grid-template-columns:1fr}.pro-qr-frame{min-width:160px;min-height:160px}.pro-qr-logo,.pro-qr-initials{width:38px;height:38px}}


/* DigiSign.click V1.3 — Premium stacked QR block */
.pro-qr-card.pro-qr-card-stacked{
  grid-template-columns:1fr!important;
  justify-items:center!important;
  text-align:center!important;
  gap:14px!important;
  padding:18px 16px 20px!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.20),transparent 42%),
    linear-gradient(180deg,var(--pro-glass),rgba(255,255,255,.055))!important;
}
.pro-qr-card-stacked .pro-qr-copy{
  width:100%;
  max-width:340px;
  margin:0 auto;
}
.pro-qr-eyebrow{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:auto!important;
  margin:0 0 7px!important;
  padding:6px 10px;
  border:1px solid var(--pro-line);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:var(--pro-soft)!important;
  font-size:.64rem!important;
  font-weight:1000!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
.pro-qr-card-stacked .pro-qr-copy strong{
  font-size:1.12rem!important;
  line-height:1.05;
}
.pro-qr-card-stacked .pro-qr-copy span:not(.pro-qr-eyebrow){
  max-width:280px;
  margin:5px auto 0!important;
  font-size:.82rem!important;
}
.pro-qr-card-stacked .pro-qr-box{
  padding:10px!important;
  border-radius:30px!important;
}
.pro-qr-card-stacked .pro-qr-frame{
  min-width:224px!important;
  min-height:224px!important;
  padding:13px!important;
  border-radius:22px!important;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.06),0 16px 34px rgba(15,23,42,.16);
}
.pro-qr-card-stacked .pro-qr-logo,
.pro-qr-card-stacked .pro-qr-initials{
  width:48px!important;
  height:48px!important;
  border-radius:14px!important;
}
@media (max-width:420px){
  .pro-qr-card.pro-qr-card-stacked{padding:16px 12px 18px!important}
  .pro-qr-card-stacked .pro-qr-frame{min-width:206px!important;min-height:206px!important;padding:11px!important}
  .pro-qr-card-stacked .pro-qr-logo,.pro-qr-card-stacked .pro-qr-initials{width:44px!important;height:44px!important}
}


/* DigiSign.click V1.4 — Single premium QR render fix */
.premium-qr-render{
  width:196px!important;
  height:196px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border-radius:10px!important;
}
.premium-qr-render canvas,
.premium-qr-render img{
  width:196px!important;
  height:196px!important;
  max-width:196px!important;
  max-height:196px!important;
  display:block!important;
  object-fit:contain!important;
  border-radius:10px!important;
}
.premium-qr-render img + canvas,
.premium-qr-render canvas + img,
.pro-qr-frame .premium-qr-render > *:nth-child(n+2){
  display:none!important;
}
.pro-qr-card-stacked .pro-qr-frame{
  width:auto!important;
  height:auto!important;
  min-width:224px!important;
  min-height:224px!important;
  aspect-ratio:1/1;
}
.pro-qr-card-stacked .pro-qr-box{
  width:auto!important;
  max-width:100%!important;
}
.pro-qr-card-stacked .pro-qr-logo,
.pro-qr-card-stacked .pro-qr-initials{
  pointer-events:none;
}
@media (max-width:420px){
  .premium-qr-render,
  .premium-qr-render canvas,
  .premium-qr-render img{
    width:184px!important;
    height:184px!important;
    max-width:184px!important;
    max-height:184px!important;
  }
}


/* DigiSign.click V1.5 — Executive QR upgrade
   Goal: make the QR look like a corporate asset, not a generic sticker.
   No database changes required. */
.pro-qr-card.pro-qr-card-luxury{
  padding:18px 16px 22px!important;
  border:1px solid rgba(148,163,184,.24)!important;
  background:
    radial-gradient(circle at 50% -20%,rgba(37,99,235,.08),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.90),rgba(248,250,252,.78))!important;
  box-shadow:0 24px 55px rgba(15,23,42,.10)!important;
}
.pro-qr-card-luxury .pro-qr-copy{margin-bottom:2px!important}
.pro-qr-card-luxury .pro-qr-eyebrow{
  background:#f8fafc!important;
  border-color:rgba(15,23,42,.10)!important;
  color:#64748b!important;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.pro-qr-card-luxury .pro-qr-copy strong{
  color:#0f172a!important;
  font-size:1.18rem!important;
  letter-spacing:-.035em!important;
}
.pro-qr-card-luxury .pro-qr-copy span:not(.pro-qr-eyebrow){
  color:#475569!important;
  max-width:320px!important;
}
.pro-qr-luxury-shell{
  position:relative;
  width:min(306px,100%)!important;
  padding:12px 12px 13px!important;
  border-radius:30px!important;
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg,var(--pro-primary),var(--pro-secondary),rgba(15,23,42,.16)) border-box!important;
  border:1.5px solid transparent!important;
  box-shadow:0 24px 52px rgba(15,23,42,.16), inset 0 0 0 1px rgba(255,255,255,.92)!important;
}
.pro-qr-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:2px 4px 10px;
  color:#64748b;
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:1000;
}
.pro-qr-topline b{
  color:#0f172a;
  letter-spacing:.02em;
  text-transform:none;
  font-size:.72rem;
}
.pro-qr-card-luxury .pro-qr-frame.pro-qr-frame-luxury{
  position:relative;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:1/1!important;
  padding:18px!important;
  border-radius:24px!important;
  background:#fff!important;
  border:1px solid rgba(15,23,42,.08)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 14px 30px rgba(15,23,42,.08)!important;
}
.pro-qr-corner{
  position:absolute;
  width:30px;height:30px;
  border-color:var(--pro-primary);
  opacity:.72;
  pointer-events:none;
}
.pro-qr-corner.tl{left:10px;top:10px;border-left:3px solid;border-top:3px solid;border-radius:12px 0 0 0}
.pro-qr-corner.tr{right:10px;top:10px;border-right:3px solid;border-top:3px solid;border-radius:0 12px 0 0}
.pro-qr-corner.bl{left:10px;bottom:10px;border-left:3px solid;border-bottom:3px solid;border-radius:0 0 0 12px}
.pro-qr-corner.br{right:10px;bottom:10px;border-right:3px solid;border-bottom:3px solid;border-radius:0 0 12px 0}
.pro-qr-domain{
  margin-top:10px;
  padding:9px 10px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
  color:#334155;
  font-size:.72rem;
  line-height:1.2;
  font-weight:950;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pro-qr-card-luxury .premium-qr-render,
.pro-qr-card-luxury .premium-qr-render canvas,
.pro-qr-card-luxury .premium-qr-render img{
  width:196px!important;
  height:196px!important;
  max-width:196px!important;
  max-height:196px!important;
  border-radius:12px!important;
}
.pro-qr-card-luxury .pro-qr-logo,
.pro-qr-card-luxury .pro-qr-initials{
  width:38px!important;
  height:38px!important;
  border-radius:999px!important;
  border:5px solid #fff!important;
  padding:4px!important;
  box-shadow:0 8px 20px rgba(15,23,42,.22)!important;
}
.pro-qr-card-luxury .pro-qr-initials{padding:0!important;font-size:.82rem!important}
@media (max-width:420px){
  .pro-qr-luxury-shell{width:min(286px,100%)!important;padding:11px!important;border-radius:28px!important}
  .pro-qr-card-luxury .pro-qr-frame.pro-qr-frame-luxury{padding:16px!important;border-radius:22px!important}
  .pro-qr-card-luxury .premium-qr-render,
  .pro-qr-card-luxury .premium-qr-render canvas,
  .pro-qr-card-luxury .premium-qr-render img{
    width:184px!important;height:184px!important;max-width:184px!important;max-height:184px!important;
  }
  .pro-qr-domain{font-size:.68rem}
}


/* DigiSign.click V1.6 — QR Studio integration
   Uses the same qr-code-styling approach as QR Studio Pro:
   H error correction, rounded dots, extra-rounded corners, hide background dots behind the logo,
   and the logo injected by the QR library instead of a separate circle overlay. */
.pro-qr-card.pro-qr-card-clean{
  margin:22px auto 0!important;
  padding:18px 16px 20px!important;
  border-radius:30px!important;
  border:1px solid rgba(148,163,184,.20)!important;
  background:
    radial-gradient(circle at 50% -24%,rgba(37,99,235,.08),transparent 44%),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.84))!important;
  box-shadow:0 24px 56px rgba(15,23,42,.10)!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:center!important;
  text-align:center!important;
  gap:14px!important;
}
.pro-qr-card-clean .pro-qr-copy{max-width:330px;margin:0 auto!important;color:#0f172a!important}
.pro-qr-card-clean .pro-qr-eyebrow{
  display:inline-flex!important;
  margin:0 0 8px!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:#f8fafc!important;
  border:1px solid rgba(15,23,42,.10)!important;
  color:#64748b!important;
  font-size:.62rem!important;
  line-height:1!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  font-weight:1000!important;
}
.pro-qr-card-clean .pro-qr-copy strong{
  display:block!important;
  color:#0f172a!important;
  font-size:1.12rem!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
  font-weight:1000!important;
}
.pro-qr-card-clean .pro-qr-copy span:not(.pro-qr-eyebrow){
  display:block!important;
  color:#475569!important;
  font-size:.8rem!important;
  line-height:1.38!important;
  margin-top:5px!important;
  font-weight:760!important;
}
.pro-qr-native-wrap{
  width:min(294px,100%)!important;
  margin:0 auto!important;
  display:grid!important;
  justify-items:center!important;
  gap:10px!important;
}
.pro-qr-native{
  width:260px!important;
  height:260px!important;
  max-width:100%!important;
  display:grid!important;
  place-items:center!important;
  background:#ffffff!important;
  border-radius:24px!important;
  padding:12px!important;
  border:1px solid rgba(15,23,42,.10)!important;
  box-shadow:
    0 24px 50px rgba(15,23,42,.14),
    inset 0 0 0 1px rgba(255,255,255,.96)!important;
  overflow:hidden!important;
}
.pro-qr-native canvas,
.pro-qr-native svg,
.pro-qr-native img{
  width:236px!important;
  height:236px!important;
  max-width:236px!important;
  max-height:236px!important;
  display:block!important;
  border-radius:16px!important;
}
.pro-qr-native > *:nth-child(n+2){display:none!important}
.pro-qr-card-clean .pro-qr-domain{
  width:100%!important;
  margin:0!important;
  padding:9px 12px!important;
  border-radius:999px!important;
  background:#f8fafc!important;
  border:1px solid rgba(15,23,42,.08)!important;
  color:#334155!important;
  font-size:.72rem!important;
  line-height:1.2!important;
  font-weight:950!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.pro-qr-logo,.pro-qr-initials,.pro-qr-corner,.pro-qr-topline{display:none!important}
@media (max-width:420px){
  .pro-qr-card.pro-qr-card-clean{padding:16px 12px 18px!important;border-radius:26px!important}
  .pro-qr-native{width:238px!important;height:238px!important;padding:10px!important;border-radius:22px!important}
  .pro-qr-native canvas,.pro-qr-native svg,.pro-qr-native img{width:218px!important;height:218px!important;max-width:218px!important;max-height:218px!important}
  .pro-qr-native-wrap{width:min(262px,100%)!important}
}

/* =========================================================
   DigiSign.click V1.7 — Premium public directory fix
   Corporate directory contrast, search and employee cards.
========================================================= */
.directory-page{
  color:var(--dir-text, #f8fafc);
  background-attachment:fixed!important;
  min-height:100vh;
}
.directory-page .nav{
  background:rgba(5,9,20,.72)!important;
  border-bottom:1px solid rgba(148,163,184,.16)!important;
}
.directory-page .logo span{
  color:#f8fafc!important;
  text-shadow:0 1px 18px rgba(0,0,0,.24);
}
.directory-page main.container{
  padding-top:54px;
  padding-bottom:48px;
}
.dir-hero-premium{
  position:relative;
  overflow:hidden;
  border:1px solid var(--dir-line, rgba(255,255,255,.16));
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.12), transparent 34%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--dir-secondary, #06b6d4) 24%, transparent), transparent 34%),
    linear-gradient(135deg, var(--dir-card-bg, rgba(8,17,31,.74)), rgba(255,255,255,.045));
  border-radius:34px;
  box-shadow:var(--dir-shadow, 0 35px 90px rgba(0,0,0,.32));
  padding:38px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:28px;
  align-items:center;
}
.dir-hero-premium:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.12), transparent 28%, rgba(255,255,255,.03));
  pointer-events:none;
}
.dir-brand-lockup,.dir-side-panel{position:relative;z-index:1}.dir-brand-lockup{text-align:center}.dir-logo-wrap{width:min(190px,58vw);min-height:84px;margin:0 auto 16px;display:grid;place-items:center}.dir-logo{max-height:92px;max-width:190px;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.22))}.dir-logo-fallback{width:84px;height:84px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,var(--dir-primary,#2563eb),var(--dir-secondary,#06b6d4));color:var(--dir-cta-text,#fff);font-weight:1000;font-size:1.6rem;box-shadow:0 20px 45px rgba(37,99,235,.28)}.dir-verified-pill{display:inline-flex;align-items:center;justify-content:center;margin:0 auto 12px;padding:7px 12px;border-radius:999px;border:1px solid var(--dir-line,rgba(255,255,255,.16));background:rgba(255,255,255,.09);color:var(--dir-muted,#cbd5e1);font-size:.7rem;font-weight:1000;letter-spacing:.12em;text-transform:uppercase}.dir-hero-premium h1{color:var(--dir-text,#f8fafc)!important;font-size:clamp(2.25rem,5vw,4.7rem)!important;line-height:.94!important;letter-spacing:-.075em!important;margin:0 0 12px!important;text-shadow:0 2px 18px rgba(0,0,0,.18)}.dir-hero-premium p{color:var(--dir-muted,#cbd5e1)!important;font-size:clamp(1rem,2vw,1.24rem)!important;margin:0 auto!important;max-width:820px;line-height:1.55}.dir-hero-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}.dir-hero-btn{min-height:44px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:1000;background:linear-gradient(135deg,var(--dir-cta,#2563eb),var(--dir-secondary,#06b6d4));color:var(--dir-cta-text,#fff)!important;box-shadow:0 18px 36px rgba(37,99,235,.22)}.dir-hero-btn.secondary{background:rgba(255,255,255,.12);border:1px solid var(--dir-line);color:var(--dir-text)!important;box-shadow:none}.dir-hero-btn.ghost{background:transparent;border:1px solid var(--dir-line);color:var(--dir-text)!important;box-shadow:none}.dir-hero-note{color:var(--dir-muted);font-weight:850;font-size:.92rem}.dir-side-panel{display:grid;gap:12px}.dir-stat{border:1px solid var(--dir-line);background:rgba(255,255,255,.085);border-radius:22px;padding:18px}.dir-stat strong{display:block;color:var(--dir-text);font-size:2rem;line-height:1;font-weight:1000;letter-spacing:-.06em}.dir-stat span{display:block;color:var(--dir-muted);font-weight:780;margin-top:7px;font-size:.86rem;line-height:1.35}.dir-visibility{min-height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:1000;letter-spacing:.02em;border:1px solid var(--dir-line)}.dir-visibility.public{background:rgba(34,197,94,.14);color:#86efac}.dir-visibility.private{background:rgba(245,158,11,.15);color:#fcd34d}.dir-private-card,.dir-empty{margin:18px auto 0;border:1px solid var(--dir-line);background:var(--dir-card-bg);border-radius:24px;padding:22px;text-align:center;color:var(--dir-text);box-shadow:0 18px 40px rgba(0,0,0,.10)}.dir-private-card strong,.dir-empty h3{display:block;font-size:1.15rem;font-weight:1000;margin-bottom:6px}.dir-private-card span,.dir-empty p{color:var(--dir-muted)!important;margin:0}.directory-page .searchbar{width:min(760px,100%);margin:28px auto 22px;position:relative}.directory-page .searchbar:before{content:"⌕";position:absolute;left:18px;top:50%;transform:translateY(-50%);z-index:2;color:var(--dir-muted);font-weight:1000}.directory-page #search{min-height:58px;padding-left:48px!important;border-radius:999px!important;border:1px solid var(--dir-line)!important;background:var(--dir-card-bg)!important;color:var(--dir-text)!important;box-shadow:0 18px 42px rgba(0,0,0,.10)}.directory-page #search::placeholder{color:var(--dir-soft,#94a3b8)!important}.directory-page .directory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;align-items:stretch;margin-top:22px}.dir-employee-card{position:relative;overflow:hidden;border:1px solid var(--dir-line);background:linear-gradient(180deg,var(--dir-card-bg-strong),var(--dir-card-bg));border-radius:28px;padding:22px;box-shadow:0 24px 64px rgba(0,0,0,.16);color:var(--dir-text);min-height:238px;display:flex;flex-direction:column;justify-content:space-between}.dir-employee-glow{position:absolute;right:-54px;top:-60px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--dir-secondary,#06b6d4) 24%,transparent),transparent 66%);pointer-events:none}.dir-employee-top{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.dir-avatar{width:78px;height:78px;border-radius:24px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#eff6ff,#93c5fd);border:3px solid rgba(255,255,255,.66);box-shadow:0 18px 38px rgba(15,23,42,.18);color:#07111f;font-size:1.35rem;font-weight:1000;flex:0 0 auto}.dir-avatar img{width:100%;height:100%;object-fit:cover}.dir-card-badge{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid var(--dir-line);color:var(--dir-muted);text-transform:uppercase;letter-spacing:.09em;font-size:.62rem;font-weight:1000;white-space:nowrap}.dir-employee-card h3{position:relative;z-index:1;color:var(--dir-text)!important;font-size:1.45rem;line-height:1.03;letter-spacing:-.045em;margin:0 0 8px!important;overflow-wrap:anywhere}.dir-employee-card p{position:relative;z-index:1;color:var(--dir-muted)!important;margin:0;line-height:1.45;font-weight:760;overflow-wrap:anywhere}.dir-meta-row{position:relative;z-index:1;display:flex;gap:7px;flex-wrap:wrap;min-height:0;margin-top:12px}.dir-meta-pill{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--dir-line);color:var(--dir-muted);font-size:.72rem;font-weight:900}.dir-card-actions{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.dir-mini-btn{min-height:40px;padding:0 13px;border-radius:999px;border:1px solid var(--dir-line);background:rgba(255,255,255,.075);color:var(--dir-text)!important;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:1000}.dir-mini-btn.primary{background:linear-gradient(135deg,var(--dir-cta,#2563eb),var(--dir-secondary,#06b6d4));color:var(--dir-cta-text,#fff)!important;border-color:transparent;box-shadow:0 16px 34px rgba(37,99,235,.18)}
@media(max-width:860px){.dir-hero-premium{grid-template-columns:1fr;padding:28px 20px}.dir-side-panel{grid-template-columns:1fr 1fr}.dir-visibility{grid-column:1/-1}.directory-page main.container{padding-top:28px}.directory-page .directory-grid{grid-template-columns:1fr}.dir-hero-premium h1{font-size:2.55rem!important}}
@media(max-width:520px){.dir-side-panel{grid-template-columns:1fr}.dir-hero-actions{display:grid}.dir-hero-btn{width:100%}.dir-employee-card{padding:18px}.dir-card-actions{display:grid;grid-template-columns:1fr}.dir-mini-btn{width:100%}.directory-page .nav-inner{height:68px}.directory-page .logo span{font-size:1.05rem}}


/* =========================================================
   DigiSign.click V2 — Corporate UI Rebrand
   Scope: global admin, landing, forms, login, directory shell.
   No database or Supabase changes required.
   ========================================================= */
:root{
  --corp-page:#f4f7fb;
  --corp-page-2:#eef4fb;
  --corp-surface:#ffffff;
  --corp-surface-soft:#f8fbff;
  --corp-line:#d8e2ee;
  --corp-line-strong:#cbd8e6;
  --corp-text:#101828;
  --corp-heading:#163b66;
  --corp-muted:#667085;
  --corp-brand:#1d4ed8;
  --corp-brand-2:#2ea3f2;
  --corp-accent:#c7a75d;
  --corp-success:#22c55e;
  --corp-shadow:0 18px 44px rgba(15,23,42,.08);
  --corp-shadow-lg:0 28px 70px rgba(15,23,42,.10);
}
html,body{background:radial-gradient(circle at 0% 0%,rgba(46,163,242,.10),transparent 24%),radial-gradient(circle at 100% 0%,rgba(29,78,216,.08),transparent 22%),linear-gradient(180deg,var(--corp-page),var(--corp-page-2) 52%,#f8fafc)!important;color:var(--corp-text)!important;}
body{min-height:100vh;}
h1,h2,h3,h4,h5,h6{color:var(--corp-heading)!important;text-shadow:none!important;}
p,.small,small{color:var(--corp-muted)!important;}
a{color:inherit}
input,select,textarea{
  background:var(--corp-surface)!important;
  color:var(--corp-text)!important;
  border:1px solid var(--corp-line)!important;
  box-shadow:0 1px 2px rgba(16,24,40,.02);
}
input::placeholder,textarea::placeholder{color:#98a2b3!important;}
input:focus,select:focus,textarea:focus{
  border-color:rgba(29,78,216,.45)!important;
  box-shadow:0 0 0 4px rgba(29,78,216,.10)!important;
}
label{color:#344054!important;letter-spacing:.01em;}
.kicker{color:var(--corp-brand-2)!important;}
.nav{
  background:rgba(255,255,255,.88)!important;
  border-bottom:1px solid rgba(16,24,40,.06)!important;
  box-shadow:0 12px 36px rgba(15,23,42,.06)!important;
}
.logo span{color:var(--corp-heading)!important;}
.logo-mark{
  background:linear-gradient(135deg,var(--corp-brand),var(--corp-brand-2))!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(29,78,216,.24)!important;
}
.nav-links a,.pill{
  background:rgba(255,255,255,.94)!important;
  color:var(--corp-text)!important;
  border-color:var(--corp-line)!important;
}
.btn{
  background:linear-gradient(135deg,var(--corp-brand),var(--corp-brand-2))!important;
  color:#fff!important;
  box-shadow:0 16px 34px rgba(29,78,216,.22)!important;
}
.btn.secondary,.mini-btn,.dir-mini-btn,.pill.ghost{
  background:#fff!important;
  color:var(--corp-text)!important;
  border:1px solid var(--corp-line)!important;
  box-shadow:none!important;
}
.btn.gold{background:linear-gradient(135deg,#8f6a1f,#d8ba6c)!important;color:#1e1404!important;}
.btn.green{background:linear-gradient(135deg,#0f9f52,#22c55e)!important;color:#fff!important;}
.hero{padding:86px 0 60px;}
.hero p{color:var(--corp-muted)!important;}
.card,.row,.employee-card,.signature-box,.dir-private-card,.dir-empty{
  background:linear-gradient(180deg,#ffffff,#f9fbff)!important;
  border:1px solid var(--corp-line)!important;
  box-shadow:var(--corp-shadow)!important;
  color:var(--corp-text)!important;
}
.icon{
  background:rgba(29,78,216,.08)!important;
  color:var(--corp-brand)!important;
}
hr.sep{border-top:1px solid var(--corp-line)!important;}
.notice{
  background:rgba(34,197,94,.08)!important;
  border:1px solid rgba(34,197,94,.24)!important;
  color:#137547!important;
}
.error{
  background:rgba(239,68,68,.08)!important;
  border:1px solid rgba(239,68,68,.24)!important;
  color:#b42318!important;
}
.footer{
  border-top:1px solid rgba(16,24,40,.08)!important;
  color:var(--corp-muted)!important;
  background:transparent!important;
}

/* Admin shell */
.admin-shell{background:transparent!important;}
.sidebar{
  background:linear-gradient(180deg,#fbfdff,#f5f9ff)!important;
  border-right:1px solid var(--corp-line)!important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.8);
}
.sidebar .logo span{color:var(--corp-heading)!important;}
.sidebar nav a{
  color:#475467!important;
  border:1px solid transparent!important;
  background:transparent!important;
}
.sidebar nav a.active,.sidebar nav a:hover{
  background:#eef5ff!important;
  border-color:#d9e8ff!important;
  color:var(--corp-heading)!important;
}
.main{background:transparent!important;}
.topbar{margin-bottom:26px;}
.topbar p{max-width:760px;}
.list .row{
  background:#fff!important;
  border-color:var(--corp-line)!important;
}
.row b,.row strong,.row h3,.row h4{color:var(--corp-heading)!important;}
.row .small,.row p{color:var(--corp-muted)!important;}
.mini-btn{color:var(--corp-heading)!important;}

/* Brand kit/forms */
.brandkit{
  border:1px solid #d9ebfb!important;
  background:linear-gradient(180deg,#fbfdff,#f2f8ff)!important;
  box-shadow:var(--corp-shadow)!important;
}
.brandkit b,.brandkit strong,.brandkit h3{color:var(--corp-heading)!important;}
.brandkit .small{color:var(--corp-muted)!important;}
.palette{
  background:#fff!important;
  border:1px solid var(--corp-line)!important;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
  color:var(--corp-text)!important;
}
.palette:hover,.palette.active{
  border-color:#9cc6ff!important;
  box-shadow:0 0 0 3px rgba(46,163,242,.12)!important;
}
.badge{
  background:#f8fbff!important;
  color:var(--corp-heading)!important;
  border-color:#dce7f5!important;
}

/* Login page */
body:not(.public-card-page):not(.directory-page) .public-wrap{
  min-height:calc(100vh - 74px);
  padding:40px 16px 24px;
}
body:not(.public-card-page):not(.directory-page) .public-wrap .card{
  width:min(520px,100%);
  border-radius:28px!important;
  box-shadow:var(--corp-shadow-lg)!important;
}

/* Directory page */
.directory-page .nav{background:rgba(255,255,255,.92)!important;}
.directory-page .nav-inner{height:74px;}
.directory-page main.container{padding-top:26px;padding-bottom:28px;}
.dir-hero-premium{
  background:linear-gradient(180deg,#ffffff,#f7fbff)!important;
  border:1px solid var(--corp-line)!important;
  box-shadow:var(--corp-shadow-lg)!important;
}
.dir-hero-premium:before{
  background:radial-gradient(circle at 50% -10%,rgba(46,163,242,.14),transparent 42%)!important;
}
.dir-logo{filter:drop-shadow(0 14px 24px rgba(15,23,42,.10))!important;}
.dir-verified-pill{
  background:#f8fbff!important;
  color:#667085!important;
  border-color:#dbe7f5!important;
}
.dir-hero-premium h1{color:var(--corp-heading)!important;text-shadow:none!important;}
.dir-hero-premium p,.dir-hero-note,.dir-stat span,.dir-private-card span,.dir-empty p{color:var(--corp-muted)!important;}
.dir-hero-btn{
  background:linear-gradient(135deg,var(--corp-brand),var(--corp-brand-2))!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(29,78,216,.18)!important;
}
.dir-hero-btn.secondary,.dir-hero-btn.ghost{
  background:#fff!important;
  border:1px solid var(--corp-line)!important;
  color:var(--corp-heading)!important;
}
.dir-stat,.dir-side-panel .dir-stat{
  background:#fff!important;
  border:1px solid var(--corp-line)!important;
  box-shadow:0 10px 28px rgba(15,23,42,.06)!important;
}
.dir-stat strong{color:var(--corp-heading)!important;}
.dir-visibility.public{background:rgba(34,197,94,.10)!important;color:#15803d!important;border-color:rgba(34,197,94,.18)!important;}
.dir-visibility.private{background:rgba(245,158,11,.12)!important;color:#b45309!important;border-color:rgba(245,158,11,.18)!important;}
.directory-page #search{
  background:#fff!important;
  border:1px solid var(--corp-line)!important;
  color:var(--corp-text)!important;
  box-shadow:0 16px 36px rgba(15,23,42,.08)!important;
}
.dir-employee-card{
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  border:1px solid var(--corp-line)!important;
  box-shadow:var(--corp-shadow)!important;
  color:var(--corp-text)!important;
}
.dir-employee-glow{background:radial-gradient(circle,rgba(46,163,242,.14),transparent 66%)!important;}
.dir-card-badge,.dir-meta-pill,.dir-mini-btn{
  background:#fff!important;
  border:1px solid var(--corp-line)!important;
  color:var(--corp-muted)!important;
}
.dir-mini-btn.primary{background:linear-gradient(135deg,var(--corp-brand),var(--corp-brand-2))!important;color:#fff!important;border-color:transparent!important;}
.dir-avatar{
  border-color:#e7f0fb!important;
  box-shadow:0 14px 28px rgba(15,23,42,.12)!important;
}

/* Signature page / code areas */
.signature-box{box-shadow:var(--corp-shadow)!important;}
.codebox{
  background:#f8fafc!important;
  color:#1e293b!important;
  border:1px solid var(--corp-line)!important;
}

/* Public card fine-tune for lighter corporate backdrop */
.public-card-page .footer{color:#64748b!important;}
.public-card-page .digital-card{box-shadow:0 28px 90px rgba(15,23,42,.16)!important;}

@media (max-width:980px){
  .admin-shell{grid-template-columns:1fr!important;}
  .sidebar{position:relative!important;height:auto!important;border-right:0!important;border-bottom:1px solid var(--corp-line)!important;}
  .main{padding:18px!important;}
}


/* =========================================================
   DigiSign.click V2.7.6 — Signature Template Engine
   ========================================================= */
.sig-studio-shell{
  display:grid;
  grid-template-columns:minmax(300px,420px) minmax(420px,1fr);
  gap:22px;
  align-items:start;
}
.sig-template-panel{position:sticky;top:22px;}
.sig-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.sig-panel-head.compact{margin-top:2px}
.sig-panel-head h3{margin:0 0 5px!important}
.sig-template-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.sig-template-card{
  position:relative;
  width:100%;
  text-align:left;
  border:1px solid var(--corp-line,#d8e2ee);
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border-radius:18px;
  padding:14px 14px 14px 58px;
  cursor:pointer;
  min-height:78px;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
  transition:.18s ease;
  color:var(--corp-text,#101828);
}
.sig-template-card:hover{
  transform:translateY(-1px);
  border-color:#9cc6ff;
  box-shadow:0 14px 32px rgba(15,23,42,.08);
}
.sig-template-card.active{
  border-color:#2ea3f2;
  box-shadow:0 0 0 4px rgba(46,163,242,.13),0 14px 32px rgba(15,23,42,.08);
}
.sig-template-number{
  position:absolute;
  left:14px;
  top:14px;
  width:32px;
  height:32px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--corp-brand,#1d4ed8),var(--corp-brand-2,#2ea3f2));
  color:#fff;
  font-weight:950;
  font-size:.78rem;
}
.sig-template-card strong{
  display:block;
  color:var(--corp-heading,#163b66);
  font-size:.95rem;
  letter-spacing:-.02em;
  line-height:1.2;
}
.sig-template-card small{
  display:block;
  color:var(--corp-muted,#667085);
  font-weight:800;
  margin-top:4px;
}
.sig-template-card em{
  display:inline-flex;
  margin-top:7px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(199,167,93,.13);
  color:#8a6518;
  font-style:normal;
  font-weight:950;
  font-size:.68rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.sig-actions-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.sig-note{
  margin-top:14px!important;
  font-size:.84rem;
  line-height:1.5;
}
.sig-preview-panel{
  min-width:0;
}
.sig-preview-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.sig-preview-toolbar h3{margin:0 0 4px!important}
.sig-mode-pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.sig-preview-box{
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  background:
    linear-gradient(45deg,rgba(15,23,42,.025) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(15,23,42,.025) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(15,23,42,.025) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(15,23,42,.025) 75%),
    #ffffff!important;
  background-size:24px 24px!important;
  background-position:0 0,0 12px,12px -12px,-12px 0!important;
}
#signaturePreview{
  max-width:100%;
  overflow:auto;
  padding:18px;
}
.sig-code-details{
  margin-top:16px;
  border:1px solid var(--corp-line,#d8e2ee);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
}
.sig-code-details summary{
  cursor:pointer;
  padding:14px 16px;
  font-weight:950;
  color:var(--corp-heading,#163b66);
}
.sig-code-details .codebox{
  border-radius:0!important;
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;
  margin:0!important;
}
@media(max-width:1100px){
  .sig-studio-shell{grid-template-columns:1fr}
  .sig-template-panel{position:relative;top:auto}
  .sig-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .sig-template-grid{grid-template-columns:1fr}
  .sig-preview-toolbar{align-items:flex-start;flex-direction:column}
}
@media print{
  body *{visibility:hidden!important}
  #signaturePreview,#signaturePreview *{visibility:visible!important}
  #signaturePreview{position:absolute;left:0;top:0;padding:0!important}
}


/* =========================================================
   DigiSign.click V2.7.6 — Official Brand Integration
   ========================================================= */
.logo.brand-logo{
  display:inline-flex!important;
  align-items:center!important;
  gap:0!important;
  min-width:0;
}
.logo.brand-logo img{
  display:block!important;
  height:46px;
  width:auto;
  max-width:260px;
  object-fit:contain;
}
.nav .brand-logo img{height:48px;}
.sidebar .brand-logo img,
.admin-brand-logo img{
  height:44px!important;
  max-width:210px!important;
}
.public-card-page .brand-logo img{height:42px;}
.logo-mark{
  background:linear-gradient(135deg,#1d4ed8,#2ea3f2)!important;
}
.demo-contact-card,
.signature-demo{
  color:#101828!important;
}
.signature-demo a{color:#163B66!important;}
.signature-demo b,
.signature-demo strong{color:#101828!important;}
.signature-demo .demo-email,
.signature-demo [href^="mailto"]{color:#475467!important;}
.mockup .signature-demo{
  border:1px solid #d8e2ee;
  box-shadow:0 18px 44px rgba(15,23,42,.08);
}
@media(max-width:520px){
  .nav .brand-logo img{height:40px;max-width:190px}
  .sidebar .brand-logo img,.admin-brand-logo img{height:38px;max-width:180px!important}
}


/* =========================================================
   DigiSign.click V2.7.6 — Hero Mockup Cleanup
   Fixes compressed phone mockup/bar text issue on index.
   ========================================================= */
.hero-product-preview{
  display:block!important;
  max-width:560px;
  width:100%;
  margin-left:auto;
}
.clean-hero-stack{
  display:grid!important;
  gap:20px!important;
  width:100%;
}
.hero-signature-card{
  min-height:300px;
  padding:26px!important;
  background:rgba(255,255,255,.92)!important;
  border:1px solid #d8e2ee!important;
  box-shadow:0 28px 70px rgba(15,23,42,.10)!important;
}
.demo-card-label{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:0 11px;
  border-radius:999px;
  background:#eef6ff;
  color:#1d4ed8;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.polished-signature-demo{
  grid-template-columns:130px 1fr 108px!important;
  min-height:150px!important;
  border:1px solid #d8e2ee!important;
  box-shadow:0 16px 38px rgba(15,23,42,.06)!important;
  overflow:hidden!important;
}
.sig-company{
  font-weight:1000;
  color:#07172E;
  line-height:1.08;
  font-size:1.05rem;
}
.sig-company span{color:#0ea5e9}
.sig-person{
  display:grid;
  gap:4px;
  min-width:0;
}
.sig-person b{
  color:#07172E!important;
  font-size:1.02rem;
  line-height:1.12;
}
.sig-person small{
  color:#667085!important;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.clean-qr-demo{
  position:relative;
  background:
    linear-gradient(90deg,#0f172a 8px,transparent 8px) 0 0/26px 26px,
    linear-gradient(#0f172a 8px,transparent 8px) 0 0/26px 26px,
    #ffffff!important;
  border:1px solid #dbeafe!important;
}
.clean-qr-demo:after{
  content:"";
  position:absolute;
  inset:36px;
  border-radius:50%;
  background:linear-gradient(135deg,#1d4ed8,#2ea3f2);
  box-shadow:0 0 0 7px #fff;
}
.clean-dashboard-demo{
  min-height:330px!important;
  border-width:9px!important;
  border-color:#07111f!important;
  box-shadow:0 28px 70px rgba(15,23,42,.16)!important;
}
.dashboard-lines{
  display:grid;
  gap:12px;
  padding:10px 18px 0;
}
.dashboard-lines span{
  height:12px;
  border-radius:999px;
  background:linear-gradient(90deg,#dbeafe,#f8fbff);
  display:block;
}
.dashboard-lines span:nth-child(2){width:78%}
.dashboard-lines span:nth-child(3){width:54%}
@media(max-width:980px){
  .hero-product-preview{
    max-width:100%;
    margin:32px 0 0;
  }
  .polished-signature-demo{
    grid-template-columns:1fr!important;
    text-align:left;
  }
  .clean-qr-demo{
    width:108px!important;
    height:108px!important;
  }
}


/* =========================================================
   DigiSign.click V2.7.6 — Hero Polish
   - QR demo refined
   - Dashboard placeholder lines more visible
   ========================================================= */

.clean-qr-demo{
  position:relative;
  width:96px!important;
  height:96px!important;
  border-radius:18px!important;
  border:1px solid #d7e3f2!important;
  background:
    linear-gradient(90deg, #0b1b35 0 6px, transparent 6px 16px, #0b1b35 16px 22px, transparent 22px 32px, #0b1b35 32px 38px, transparent 38px 48px, #0b1b35 48px 54px, transparent 54px 64px, #0b1b35 64px 70px, transparent 70px 80px, #0b1b35 80px 86px, transparent 86px 96px),
    linear-gradient(#0b1b35 0 6px, transparent 6px 16px, #0b1b35 16px 22px, transparent 22px 32px, #0b1b35 32px 38px, transparent 38px 48px, #0b1b35 48px 54px, transparent 54px 64px, #0b1b35 64px 70px, transparent 70px 80px, #0b1b35 80px 86px, transparent 86px 96px),
    #ffffff!important;
  box-shadow:inset 0 0 0 10px #fff, 0 10px 26px rgba(15,23,42,.08)!important;
  overflow:hidden!important;
}
.clean-qr-demo::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:12px;
  background:
    linear-gradient(90deg, transparent 0 22%, rgba(255,255,255,.98) 22% 78%, transparent 78% 100%),
    linear-gradient(transparent 0 22%, rgba(255,255,255,.98) 22% 78%, transparent 78% 100%);
  mix-blend-mode:screen;
}
.clean-qr-demo::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:24px;
  height:24px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:linear-gradient(135deg,#1d4ed8,#2ea3f2);
  box-shadow:0 0 0 6px #ffffff, 0 10px 18px rgba(29,78,216,.18);
}
.clean-dashboard-demo{
  background:linear-gradient(180deg,#f8fbff 0%, #eef4fb 100%)!important;
}
.dashboard-lines{
  display:grid;
  gap:14px;
  padding:22px 22px 0!important;
}
.dashboard-lines span{
  height:14px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg, #d6e4f5 0%, #c8dbf0 55%, #ecf3fb 100%)!important;
  border:1px solid rgba(179, 200, 224, .48);
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset;
  display:block;
}
.dashboard-lines span:nth-child(1){width:100%!important}
.dashboard-lines span:nth-child(2){width:82%!important}
.dashboard-lines span:nth-child(3){width:58%!important}

@media(max-width:980px){
  .clean-qr-demo{
    width:102px!important;
    height:102px!important;
  }
}


/* =========================================================
   DigiSign.click V2.7.6 — QR Real Integration
   Uses real branded QR demo asset in hero signature preview
   ========================================================= */
.clean-qr-demo{
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  background:#ffffff!important;
  border:1px solid #d7e3f2!important;
  border-radius:18px!important;
  box-shadow:0 12px 28px rgba(15,23,42,.08)!important;
  overflow:hidden!important;
}
.clean-qr-demo img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:16px!important;
}
.clean-qr-demo::before,
.clean-qr-demo::after{
  content:none!important;
}


/* =========================================================
   DigiSign.click V2.7.6 — SVG QR Asset Upgrade
   Uses SVG QR for web mockups with PNG fallback.
   ========================================================= */
.clean-qr-demo picture{
  display:block!important;
  width:100%!important;
  height:100%!important;
}
.clean-qr-demo picture img,
.clean-qr-demo picture source{
  display:block;
}
.clean-qr-demo img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:16px!important;
}


/* =========================================================
   DigiSign.click V2.7.6 — Admin Dashboard Pro
   ========================================================= */
.admin-dashboard-pro{
  padding:28px!important;
}
.admin-hero-panel{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:28px;
  border:1px solid var(--corp-line,#d8e2ee);
  border-radius:30px;
  background:
    radial-gradient(circle at 100% 0%,rgba(46,163,242,.12),transparent 34%),
    linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 24px 60px rgba(15,23,42,.08);
  margin-bottom:22px;
}
.admin-hero-panel h2{
  font-size:clamp(2.2rem,4vw,3.8rem)!important;
  margin:8px 0 8px!important;
}
.admin-hero-panel p{
  max-width:840px;
  margin:0!important;
}
.admin-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.dash-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:18px;
}
.dash-stat-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--corp-line,#d8e2ee);
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border-radius:24px;
  padding:20px;
  box-shadow:0 18px 44px rgba(15,23,42,.07);
  min-height:145px;
}
.dash-stat-card:before{
  content:"";
  position:absolute;
  right:-48px;
  top:-54px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(46,163,242,.16),transparent 68%);
}
.dash-stat-card span{
  display:block;
  position:relative;
  z-index:1;
  color:#667085;
  font-weight:900;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.dash-stat-card strong{
  display:block;
  position:relative;
  z-index:1;
  color:#163B66;
  font-size:2.5rem;
  line-height:1;
  letter-spacing:-.06em;
  margin:14px 0 8px;
}
.dash-stat-card small{
  position:relative;
  z-index:1;
  display:block;
  color:#667085!important;
  font-weight:700;
}
.dash-stat-card.skeleton{
  opacity:.75;
}
.dashboard-tools{
  margin-bottom:18px;
  padding:22px!important;
}
.dashboard-tools-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}
.dashboard-tools-head h3{
  margin:0 0 5px!important;
}
.dashboard-filter-pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.filter-pill{
  min-height:38px;
  border-radius:999px;
  border:1px solid #d8e2ee;
  background:#fff;
  color:#475467;
  padding:0 12px;
  cursor:pointer;
  font-weight:900;
  font-size:.78rem;
  transition:.18s ease;
}
.filter-pill:hover,
.filter-pill.active{
  color:#163B66;
  border-color:#9cc6ff;
  background:#eef6ff;
  box-shadow:0 0 0 3px rgba(46,163,242,.10);
}
.dashboard-search-row input{
  min-height:54px!important;
  border-radius:18px!important;
}
.company-pro-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:16px;
  align-items:stretch;
}
.company-pro-card{
  border:1px solid #d8e2ee;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border-radius:28px;
  padding:20px;
  box-shadow:0 20px 52px rgba(15,23,42,.08);
  min-height:300px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
}
.company-card-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.company-avatar{
  width:64px;
  height:64px;
  border-radius:22px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#163B66,#2EA3F2);
  color:#fff;
  font-weight:1000;
  box-shadow:0 16px 34px rgba(29,78,216,.18);
}
.company-title-block{
  min-width:0;
  flex:1;
}
.company-badges{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:8px;
}
.company-status-badge,
.company-directory-badge{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 9px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:1000;
  letter-spacing:.05em;
  text-transform:uppercase;
  border:1px solid #d8e2ee;
  background:#fff;
  color:#667085;
}
.company-status-badge.active{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.22);
  color:#15803d;
}
.company-status-badge.suspended{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.22);
  color:#b42318;
}
.company-status-badge.inactive{
  background:rgba(100,116,139,.10);
  border-color:rgba(100,116,139,.18);
  color:#475569;
}
.company-directory-badge.public{
  background:rgba(46,163,242,.10);
  border-color:rgba(46,163,242,.22);
  color:#075985;
}
.company-directory-badge.private{
  background:rgba(199,167,93,.12);
  border-color:rgba(199,167,93,.24);
  color:#8a6518;
}
.company-pro-card h3{
  margin:0 0 4px!important;
  color:#163B66!important;
  line-height:1.05;
  font-size:1.35rem;
  overflow-wrap:anywhere;
}
.company-pro-card p{
  margin:0!important;
  color:#667085!important;
  overflow-wrap:anywhere;
}
.company-mini-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.company-mini-metrics div{
  background:#fff;
  border:1px solid #e1eaf4;
  border-radius:18px;
  padding:12px 10px;
  min-height:78px;
}
.company-mini-metrics strong{
  display:block;
  color:#163B66;
  font-size:1.22rem;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.04em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.company-mini-metrics span{
  display:block;
  margin-top:7px;
  color:#667085;
  font-size:.72rem;
  font-weight:850;
  line-height:1.2;
}
.company-contact-line{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-height:26px;
}
.company-contact-line span{
  max-width:100%;
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:0 9px;
  border-radius:999px;
  background:#eef6ff;
  color:#475467;
  font-size:.74rem;
  font-weight:850;
  overflow-wrap:anywhere;
}
.company-actions-pro{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.company-actions-pro .mini-btn{
  min-height:38px;
  background:#fff!important;
}
.company-actions-pro .mini-btn.primary{
  background:linear-gradient(135deg,#1d4ed8,#2ea3f2)!important;
  color:#fff!important;
  border-color:transparent!important;
}
.empty-state-card{
  grid-column:1/-1;
  text-align:center;
  padding:42px 22px;
  border:1px solid #d8e2ee;
  background:#fff;
  border-radius:28px;
  box-shadow:0 20px 52px rgba(15,23,42,.07);
}
.empty-icon{
  width:72px;
  height:72px;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:linear-gradient(135deg,#1d4ed8,#2ea3f2);
  color:#fff;
  font-weight:1000;
}
.empty-state-card h3{
  margin:0 0 8px!important;
}
.empty-state-card p{
  max-width:560px;
  margin:0 auto 20px!important;
}

@media(max-width:1180px){
  .dash-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-hero-panel{align-items:flex-start;flex-direction:column}
  .admin-hero-actions{justify-content:flex-start}
}
@media(max-width:720px){
  .admin-dashboard-pro{padding:18px!important}
  .admin-hero-panel{padding:22px}
  .dash-stats-grid{grid-template-columns:1fr}
  .dashboard-tools-head{flex-direction:column}
  .dashboard-filter-pills{justify-content:flex-start}
  .company-pro-grid{grid-template-columns:1fr}
  .company-mini-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:430px){
  .company-card-head{flex-direction:column}
  .company-actions-pro{display:grid;grid-template-columns:1fr}
  .company-actions-pro .mini-btn{width:100%;justify-content:center}
}


/* =========================================================
   DigiSign.click V2.7.6 — Avatar Fallback Fix
   Prevents broken employee photos from showing full name inside avatar.
   ========================================================= */
.avatar-public,
.pro-avatar,
.dir-avatar{
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.avatar-public img,
.pro-avatar img,
.dir-avatar img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  font-size:0!important;
  color:transparent!important;
}
.avatar-public:empty::before,
.pro-avatar:empty::before,
.dir-avatar:empty::before{
  content:attr(data-initials);
}


/* =========================================================
   DigiSign.click V2.7.6 — Smart Brand Kit Controls
   Modern color pickers + explicit Apply Preset button.
   ========================================================= */

.brandkit-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.brandkit-pill{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:0 10px;
  border-radius:999px;
  background:#eef6ff;
  color:#1d4ed8;
  font-size:.72rem;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid #d8e8ff;
}
.brandkit-save-note{
  margin-top:14px;
  padding:12px 14px;
  border-radius:16px;
  background:#ffffff;
  border:1px dashed #cbd8e6;
  color:#667085!important;
}

/* Modern color controls */
.color-control{
  position:relative;
  border:1px solid #d8e2ee;
  border-radius:20px;
  padding:12px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}
.color-control label{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  margin:0 0 9px!important;
}
.color-control input[type="color"]{
  width:100%!important;
  height:52px!important;
  min-height:52px!important;
  padding:5px!important;
  border:1px solid #d8e2ee!important;
  border-radius:16px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.15)),
    var(--picked-color,#2563eb)!important;
  cursor:pointer!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 10px 20px rgba(15,23,42,.05)!important;
  overflow:hidden!important;
}
.color-control input[type="color"]::-webkit-color-swatch-wrapper{
  padding:0!important;
}
.color-control input[type="color"]::-webkit-color-swatch{
  border:0!important;
  border-radius:12px!important;
}
.color-control input[type="color"]::-moz-color-swatch{
  border:0!important;
  border-radius:12px!important;
}
.color-control .color-value{
  display:inline-flex;
  margin-top:8px;
  min-height:26px;
  align-items:center;
  padding:0 9px;
  border-radius:999px;
  background:#eef4fb;
  color:#475467;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.04em;
}
.color-control::after{
  content:"";
  position:absolute;
  right:18px;
  top:47px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--picked-color,#2563eb);
  border:3px solid #fff;
  box-shadow:0 8px 18px rgba(15,23,42,.16);
  pointer-events:none;
}

/* Palette preset cards */
.palette-grid{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
}
.palette{
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  gap:12px!important;
  min-height:156px!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  border:1px solid #d8e2ee!important;
  color:#101828!important;
  box-shadow:0 12px 28px rgba(15,23,42,.05)!important;
}
.palette-topline{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.palette b{
  color:#163B66!important;
  font-size:1rem;
}
.palette .small{
  color:#667085!important;
  margin-top:3px;
}
.palette-mode{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  background:#eef6ff;
  color:#1d4ed8;
  font-size:.64rem;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
}
.palette:hover,
.palette.active{
  border-color:#9cc6ff!important;
  box-shadow:0 0 0 4px rgba(46,163,242,.12),0 16px 34px rgba(15,23,42,.08)!important;
}
.swatches{
  display:flex!important;
  gap:8px!important;
}
.swatch{
  width:24px!important;
  height:24px!important;
  border-radius:999px!important;
  border:2px solid #ffffff!important;
  box-shadow:0 0 0 1px #d8e2ee,0 8px 16px rgba(15,23,42,.08)!important;
}
.palette-apply-btn{
  width:100%;
  min-height:42px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#1d4ed8,#2ea3f2);
  color:white;
  cursor:pointer;
  font-weight:1000;
  box-shadow:0 14px 28px rgba(29,78,216,.18);
}
.palette-apply-btn:hover{
  filter:brightness(1.03);
  transform:translateY(-1px);
}
.palette.active .palette-apply-btn{
  background:linear-gradient(135deg,#163B66,#1d4ed8);
}


/* =========================================================
   DigiSign.click V2.7.6 — Brand Freedom + Public Theme Sync
   More manual controls and real public card/directory color freedom.
   ========================================================= */
.brand-settings-pro-card{
  overflow:visible!important;
}
.logo-preview-modern{
  min-height:92px;
  display:flex;
  align-items:center;
  margin:14px 0 18px!important;
}
.logo-preview-modern img,
#logoPreview img{
  max-height:92px!important;
  max-width:220px!important;
  object-fit:contain!important;
  border-radius:18px!important;
  background:#fff!important;
  padding:12px!important;
  border:1px solid #d8e2ee!important;
  box-shadow:0 12px 28px rgba(15,23,42,.06)!important;
}
.brand-mode-panel{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:16px 0;
  padding:14px;
  border:1px solid #d8e2ee;
  border-radius:22px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
}
.brand-mode-panel select{
  min-height:50px!important;
  border-radius:16px!important;
  background:#fff!important;
}
.brand-color-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.color-control input[type="color"]{
  border-radius:18px!important;
}
.palette-grid{
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;
}
.palette{
  min-height:168px!important;
}
.brandkit-save-note b{
  color:#163B66;
}
@media(max-width:760px){
  .brand-mode-panel,
  .brand-color-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   DigiSign.click V2.7.6 — Preset Auto-Save + Live Preview
   ========================================================= */
.brand-live-preview-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding:12px;
  border-radius:16px;
  background:#ffffff;
  border:1px solid #d8e2ee;
}
.brand-live-preview-links .mini-btn.primary{
  background:linear-gradient(135deg,#1d4ed8,#2ea3f2)!important;
  color:#fff!important;
  border-color:transparent!important;
}
.brand-live-preview-links .small{
  color:#667085!important;
}

/* Make brand changes more noticeable on the live card */
.pro-card{
  border-color:var(--pro-secondary)!important;
}
.pro-card-ribbon{
  border-bottom-color:var(--pro-line)!important;
}
.pro-card-ribbon span{
  color:var(--pro-text)!important;
}
.pro-card-ribbon b{
  color:var(--pro-muted)!important;
}
.pro-avatar{
  background:linear-gradient(135deg,var(--pro-surface-fallback,#ffffff),var(--pro-secondary))!important;
  box-shadow:0 24px 55px rgba(0,0,0,.16),0 0 0 9px color-mix(in srgb, var(--pro-primary) 12%, transparent)!important;
}
.pro-primary-action{
  background:linear-gradient(135deg,var(--pro-primary),var(--pro-secondary))!important;
  color:var(--pro-cta-text)!important;
}
.pro-primary-action.ghost{
  background:var(--pro-glass)!important;
  color:var(--pro-text)!important;
}
.pro-save{
  background:linear-gradient(135deg,var(--pro-cta),var(--pro-secondary))!important;
  color:var(--pro-cta-text)!important;
}
.pro-qr-card-clean{
  border-color:var(--pro-line)!important;
  background:linear-gradient(180deg,var(--pro-glass-hover),var(--pro-glass))!important;
}
.pro-qr-eyebrow{
  color:var(--pro-primary)!important;
}
.dir-hero-btn,
.dir-mini-btn.primary{
  background:linear-gradient(135deg,var(--dir-primary),var(--dir-secondary))!important;
  color:var(--dir-cta-text,#fff)!important;
}


/* =========================================================
   DigiSign.click V2.7.6 — Color Studio Pro
   Premium manual color control with HEX/RGB/HSL.
   ========================================================= */
.color-control{
  cursor:pointer;
  transition:.18s ease;
}
.color-control.active-color-control{
  border-color:#8ec5ff!important;
  box-shadow:0 0 0 4px rgba(46,163,242,.13),0 14px 34px rgba(15,23,42,.08)!important;
}
.color-value-input{
  width:auto!important;
  min-height:30px!important;
  height:30px!important;
  margin-top:8px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  border:1px solid #d8e2ee!important;
  background:#eef4fb!important;
  color:#475467!important;
  font-size:.74rem!important;
  font-weight:950!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  max-width:145px!important;
}
.color-value-input:focus{
  background:#fff!important;
  border-color:#8ec5ff!important;
  box-shadow:0 0 0 3px rgba(46,163,242,.13)!important;
}
.color-control .color-value{
  display:none!important;
}
.color-studio-pro{
  margin:18px 0;
  padding:18px;
  border:1px solid #d8e2ee;
  border-radius:26px;
  background:
    radial-gradient(circle at 100% 0%,rgba(46,163,242,.12),transparent 34%),
    linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 18px 44px rgba(15,23,42,.06);
}
.color-studio-head,
.premium-palette-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.color-studio-head b,
.premium-palette-head b{
  color:#163B66;
  font-size:1.05rem;
}
.color-studio-input-row{
  display:grid;
  grid-template-columns:1fr 2fr auto;
  gap:12px;
  align-items:end;
  margin-bottom:16px;
}
.color-studio-input-row select,
.color-studio-input-row input{
  background:#fff!important;
  color:#101828!important;
  border:1px solid #d8e2ee!important;
  min-height:52px!important;
  border-radius:16px!important;
}
.color-studio-apply{
  min-height:52px!important;
  white-space:nowrap;
}
#manualColorValue.is-valid-color{
  border-color:rgba(34,197,94,.55)!important;
  box-shadow:0 0 0 4px rgba(34,197,94,.10)!important;
}
#manualColorValue.is-invalid-color{
  border-color:rgba(239,68,68,.55)!important;
  box-shadow:0 0 0 4px rgba(239,68,68,.10)!important;
}
.premium-palette-vault{
  padding:14px;
  border-radius:22px;
  border:1px solid #d8e2ee;
  background:#fff;
}
.premium-swatches{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(138px,1fr));
  gap:10px;
}
.premium-swatch-btn{
  min-height:86px;
  padding:10px;
  border:1px solid #d8e2ee;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  cursor:pointer;
  text-align:left;
  transition:.18s ease;
}
.premium-swatch-btn:hover{
  transform:translateY(-1px);
  border-color:#8ec5ff;
  box-shadow:0 0 0 4px rgba(46,163,242,.10),0 12px 28px rgba(15,23,42,.07);
}
.premium-swatch-btn span{
  display:block;
  width:100%;
  height:28px;
  border-radius:12px;
  border:2px solid #fff;
  box-shadow:0 0 0 1px #d8e2ee,0 8px 16px rgba(15,23,42,.08);
  margin-bottom:8px;
}
.premium-swatch-btn b{
  display:block;
  color:#163B66;
  font-size:.78rem;
  line-height:1.15;
}
.premium-swatch-btn small{
  display:block;
  margin-top:2px;
  color:#667085!important;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.04em;
}
@media(max-width:900px){
  .color-studio-input-row{
    grid-template-columns:1fr;
  }
  .color-studio-apply{
    width:100%;
  }
}


/* =========================================================
   DigiSign.click V2.7.6 — Brand Contrast Guardrails
   Protect readability when premium/manual colors are used.
   ========================================================= */

.pro-name{
  color:var(--pro-text)!important;
  text-shadow:none!important;
  letter-spacing:-.085em!important;
}
.pro-title,
.pro-company{
  color:var(--pro-muted)!important;
  text-shadow:none!important;
}
.pro-contact{
  color:var(--pro-text)!important;
}
.pro-contact .contact-label{
  color:var(--pro-contact-label,var(--pro-text))!important;
  font-weight:950!important;
}
.pro-contact .contact-value{
  color:var(--pro-contact-value,var(--pro-text))!important;
  font-weight:950!important;
  opacity:1!important;
}
.pro-links .public-link{
  background:color-mix(in srgb, var(--pro-glass-hover) 88%, var(--pro-primary) 8%)!important;
  border-color:var(--pro-line)!important;
}
.pro-primary-action,
.pro-save,
.dir-hero-btn,
.dir-mini-btn.primary{
  font-weight:1000!important;
}
.pro-primary-action:not(.ghost),
.pro-save{
  color:var(--pro-cta-text)!important;
  text-shadow:none!important;
}
.pro-card-ribbon span,
.pro-card-ribbon b{
  text-shadow:none!important;
}
.contact-icon{
  color:var(--pro-text)!important;
}
.pro-qr-copy strong{
  color:var(--pro-text)!important;
}
.pro-qr-copy span{
  color:var(--pro-muted)!important;
}
.pro-qr-domain{
  color:var(--pro-text)!important;
  opacity:1!important;
}

/* light looks: prevent washed-out gold text */
.digital-card[style*="--pro-text:#07111f"] .contact-value,
.digital-card[style*="--pro-text:#0f172a"] .contact-value,
.digital-card[style*="--pro-text:#111827"] .contact-value{
  color:#334155!important;
}

/* dark looks: keep values bright enough */
.pro-card .public-link .contact-value{
  text-shadow:none!important;
}


/* =========================================================
   DigiSign.click V2.7.6 — Live Brand Preview
   Linkroot-style realtime preview inside company.html.
   ========================================================= */
.live-brand-preview-card{
  position:sticky;
  top:18px;
  z-index:3;
  overflow:hidden!important;
}
.live-preview-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.live-preview-head h3{
  margin:0 0 4px!important;
}
.live-preview-toggle{
  display:flex;
  gap:6px;
  padding:4px;
  border-radius:999px;
  border:1px solid #d8e2ee;
  background:#f8fbff;
}
.live-preview-toggle button{
  min-height:34px;
  border:0;
  border-radius:999px;
  padding:0 12px;
  background:transparent;
  color:#475467;
  font-weight:950;
  font-size:.76rem;
  cursor:pointer;
}
.live-preview-toggle button.active{
  background:linear-gradient(135deg,#1d4ed8,#2ea3f2);
  color:#fff;
  box-shadow:0 10px 20px rgba(29,78,216,.16);
}
.live-brand-preview-mount{
  min-height:520px;
  border-radius:24px;
  padding:18px;
  background:linear-gradient(180deg,#eef6ff,#f8fbff);
  border:1px solid #d8e2ee;
  display:grid;
  place-items:center;
}
.lp-phone-frame{
  width:min(320px,100%);
  border-radius:30px;
  padding:8px;
  background:linear-gradient(180deg,rgba(15,23,42,.12),rgba(15,23,42,.03));
  box-shadow:0 30px 70px rgba(15,23,42,.16);
}
.lp-card{
  overflow:hidden;
  border-radius:24px;
  padding:0 16px 18px;
  background:var(--lp-card-bg);
  border:1px solid color-mix(in srgb, var(--lp-primary) 55%, transparent);
  color:var(--lp-text);
  text-align:center;
}
.lp-ribbon{
  min-height:38px;
  margin:0 -16px 14px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.16);
  color:var(--lp-text);
}
.lp-ribbon span,
.lp-ribbon b{
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:1000;
}
.lp-logo{
  height:56px;
  display:grid;
  place-items:center;
  margin:6px auto 10px;
}
.lp-logo img{
  max-height:56px;
  object-fit:contain;
}
.lp-logo span{
  width:54px;height:54px;border-radius:18px;display:grid;place-items:center;
  background:var(--lp-primary);color:var(--lp-button-text);font-weight:1000;
}
.lp-avatar{
  width:74px;
  height:74px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
  overflow:hidden;
  background:linear-gradient(135deg,#fff,var(--lp-secondary));
  border:4px solid rgba(255,255,255,.75);
  color:var(--lp-text);
  font-weight:1000;
  box-shadow:0 16px 34px rgba(15,23,42,.16);
}
.lp-avatar img{
  width:100%;height:100%;object-fit:cover;
}
.lp-avatar.small{
  width:52px;height:52px;margin:0;
  flex:0 0 auto;
}
.lp-card h4{
  margin:0!important;
  color:var(--lp-text)!important;
  font-size:1.42rem;
  letter-spacing:-.06em;
  line-height:.98;
}
.lp-card p{
  margin:5px 0 0!important;
  color:var(--lp-muted)!important;
  font-size:.75rem;
  font-weight:850;
}
.lp-card small{
  display:block;
  margin-top:6px;
  color:var(--lp-muted)!important;
  font-weight:900;
}
.lp-ctas{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin:16px 0 12px;
}
.lp-ctas span{
  min-height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--lp-button),var(--lp-secondary));
  color:var(--lp-button-text);
  font-size:.72rem;
  font-weight:1000;
}
.lp-ctas .ghost{
  background:rgba(255,255,255,.58);
  color:var(--lp-text);
  border:1px solid rgba(15,23,42,.10);
}
.lp-rows{
  display:grid;
  gap:8px;
}
.lp-rows div{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 10px;
  border-radius:12px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(15,23,42,.10);
}
.lp-rows b{
  color:var(--lp-text);
  font-size:.72rem;
}
.lp-rows span{
  color:var(--lp-text);
  font-size:.62rem;
  font-weight:950;
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lp-qr{
  width:118px;
  height:118px;
  border-radius:18px;
  margin:14px auto 0;
  padding:10px;
  background:#fff;
  box-shadow:0 16px 34px rgba(15,23,42,.10);
}
.lp-qr img{width:100%;height:100%;object-fit:contain}

.lp-directory{
  width:min(390px,100%);
  border-radius:28px;
  padding:18px;
  background:var(--lp-card-bg);
  border:1px solid color-mix(in srgb, var(--lp-primary) 45%, transparent);
  box-shadow:0 26px 60px rgba(15,23,42,.14);
  color:var(--lp-text);
}
.lp-dir-hero{
  text-align:center;
  padding:18px 12px;
}
.lp-logo.dir{
  margin-bottom:8px;
}
.lp-pill{
  display:inline-flex;
  min-height:24px;
  align-items:center;
  padding:0 9px;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  color:var(--lp-primary);
  font-size:.62rem;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.lp-dir-hero h4{
  margin:10px 0 5px!important;
  color:var(--lp-text)!important;
  font-size:1.5rem;
  letter-spacing:-.05em;
}
.lp-dir-hero p{
  margin:0!important;
  color:var(--lp-muted)!important;
  font-weight:850;
}
.lp-dir-search{
  min-height:40px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border-radius:14px;
  background:rgba(255,255,255,.60);
  border:1px solid rgba(15,23,42,.10);
  color:var(--lp-muted);
  font-size:.8rem;
  font-weight:800;
  margin-bottom:12px;
}
.lp-dir-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(15,23,42,.10);
}
.lp-dir-card b{
  display:block;
  color:var(--lp-text);
  font-weight:1000;
}
.lp-dir-card span{
  display:block;
  color:var(--lp-muted);
  font-size:.76rem;
  font-weight:800;
}
.lp-dir-card button{
  margin-left:auto;
  border:0;
  border-radius:999px;
  padding:9px 12px;
  background:linear-gradient(135deg,var(--lp-button),var(--lp-secondary));
  color:var(--lp-button-text);
  font-weight:1000;
  font-size:.72rem;
}
@media(max-width:980px){
  .live-brand-preview-card{
    position:relative;
    top:auto;
  }
}


/* =========================================================
   DigiSign.click V2.7.6 — Brand Studio Layout
   Left controls + right sticky live preview. Company data in accordion.
   ========================================================= */
.company-studio-page{
  padding:28px!important;
}
.company-studio-head{
  align-items:flex-start!important;
  margin-bottom:20px!important;
}
.company-studio-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.78fr);
  gap:20px;
  align-items:start;
}
.studio-editor-panel{
  display:grid;
  gap:18px;
  min-width:0;
}
.studio-preview-panel{
  position:sticky;
  top:18px;
  align-self:start;
  min-width:0;
}
.studio-preview-card{
  position:relative!important;
  top:auto!important;
}
.studio-preview-card .live-brand-preview-mount{
  min-height:760px;
  align-items:start;
  padding:22px;
}
.studio-preview-card .lp-phone-frame{
  width:min(390px,100%);
}
.studio-preview-card .lp-card h4{
  font-size:1.72rem;
}
.company-data-accordion{
  border:1px solid #d8e2ee;
  border-radius:28px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 18px 44px rgba(15,23,42,.06);
  overflow:hidden;
}
.company-data-accordion summary{
  list-style:none;
  min-height:78px;
  padding:18px 20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.company-data-accordion summary::-webkit-details-marker{
  display:none;
}
.company-data-accordion summary b{
  display:block;
  color:#163B66;
  font-size:1.15rem;
}
.company-data-accordion summary small{
  display:block;
  color:#667085!important;
  margin-top:3px;
}
.company-data-accordion summary em{
  font-style:normal;
  display:inline-flex;
  min-height:38px;
  align-items:center;
  padding:0 14px;
  border-radius:999px;
  background:#eef6ff;
  color:#1d4ed8;
  border:1px solid #d8e8ff;
  font-weight:1000;
  font-size:.78rem;
}
.company-data-accordion[open] summary{
  border-bottom:1px solid #d8e2ee;
}
.company-data-form{
  padding:20px;
}
.studio-brand-card{
  margin:0!important;
}
.employees-compact-card{
  margin:0!important;
}
.employees-compact-card .list{
  max-height:360px;
  overflow:auto;
  padding-right:3px;
}
.brand-settings-pro-card{
  padding:22px!important;
}
.company-studio-layout .brand-color-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.company-studio-layout .palette-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.company-studio-layout .premium-swatches{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.company-studio-layout .color-studio-input-row{
  grid-template-columns:1fr 1.5fr auto;
}
@media(max-width:1320px){
  .company-studio-layout{
    grid-template-columns:minmax(0,1fr) minmax(340px,.7fr);
  }
  .company-studio-layout .brand-color-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .company-studio-layout .palette-grid{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:1050px){
  .company-studio-layout{
    grid-template-columns:1fr;
  }
  .studio-preview-panel{
    position:relative;
    top:auto;
    order:-1;
  }
  .studio-preview-card .live-brand-preview-mount{
    min-height:560px;
  }
}
@media(max-width:720px){
  .company-studio-page{
    padding:18px!important;
  }
  .company-studio-layout .brand-color-grid,
  .company-studio-layout .premium-swatches,
  .company-studio-layout .color-studio-input-row{
    grid-template-columns:1fr!important;
  }
  .company-data-accordion summary{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* =========================================================
   DigiSign.click V2.7.6 — Real Device Mockup Preview
   Loads selected employee/company data and removes mockup scrollbars.
   ========================================================= */
.live-preview-controls{
  display:grid;
  gap:8px;
  min-width:220px;
}
#livePreviewEmployeeSelect{
  min-height:38px!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#163B66!important;
  border:1px solid #d8e2ee!important;
  padding:0 12px!important;
  font-weight:900!important;
  font-size:.78rem!important;
}
.studio-preview-card .live-brand-preview-mount{
  min-height:760px;
  overflow:hidden!important;
}
.lp-real-device{
  width:min(390px,100%);
  margin:auto;
  display:grid;
  place-items:center;
}
.lp-device-shell{
  position:relative;
  width:100%;
  max-width:390px;
  aspect-ratio:9/19.5;
  border-radius:46px;
  background:linear-gradient(145deg,#0b1220,#1f2937);
  padding:13px;
  box-shadow:0 30px 90px rgba(15,23,42,.25), inset 0 0 0 1px rgba(255,255,255,.10);
  overflow:hidden!important;
}
.lp-device-screen{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden!important;
  border-radius:34px;
  background:var(--lp-bg);
}
.lp-device-speaker{
  position:absolute;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  width:72px;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  z-index:5;
}
.lp-device-home{
  position:absolute;
  bottom:7px;
  left:50%;
  transform:translateX(-50%);
  width:88px;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
  z-index:5;
}
.lp-real-card{
  width:100%;
  height:100%;
  border-radius:34px!important;
  border:0!important;
  box-shadow:none!important;
  padding:0 14px 14px!important;
  display:flex;
  flex-direction:column;
  overflow:hidden!important;
}
.lp-real-card .lp-ribbon{
  flex:0 0 34px;
  min-height:34px!important;
  margin:0 -14px 9px!important;
  padding:0 13px!important;
}
.lp-real-card .lp-ribbon span,
.lp-real-card .lp-ribbon b{
  font-size:.53rem!important;
}
.lp-real-card .lp-logo{
  height:48px!important;
  margin:1px auto 6px!important;
  flex:0 0 48px;
}
.lp-real-card .lp-logo img{
  max-height:46px!important;
}
.lp-real-card .lp-avatar{
  width:70px!important;
  height:70px!important;
  margin:0 auto 8px!important;
  flex:0 0 70px;
}
.lp-real-card h4{
  font-size:1.36rem!important;
  line-height:.94!important;
  margin:0!important;
  flex:0 0 auto;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lp-real-card p{
  font-size:.66rem!important;
  line-height:1.15!important;
  margin:5px auto 0!important;
  max-width:94%;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.lp-real-card small{
  font-size:.66rem!important;
  margin-top:4px!important;
  max-width:94%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lp-real-card .lp-ctas{
  gap:6px!important;
  margin:10px 0 8px!important;
  flex:0 0 auto;
}
.lp-real-card .lp-ctas span{
  min-height:30px!important;
  font-size:.62rem!important;
  border-radius:11px!important;
}
.lp-real-card .lp-rows{
  gap:6px!important;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden!important;
}
.lp-real-card .lp-rows div{
  min-height:0!important;
  height:34px!important;
  padding:0 9px!important;
  border-radius:11px!important;
}
.lp-real-card .lp-rows b{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:.62rem!important;
  min-width:72px;
}
.lp-real-card .lp-rows b i{
  font-style:normal;
  opacity:.9;
}
.lp-real-card .lp-rows span{
  font-size:.54rem!important;
  max-width:150px!important;
}
.lp-qr-real{
  flex:0 0 112px;
  height:112px;
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr 94px;
  gap:8px;
  align-items:center;
  padding:9px;
  border-radius:16px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(15,23,42,.10);
  overflow:hidden;
}
.lp-qr-real div{
  min-width:0;
  text-align:left;
}
.lp-qr-real b{
  display:block;
  color:var(--lp-text);
  font-size:.7rem;
  line-height:1.05;
}
.lp-qr-real span{
  display:block;
  color:var(--lp-muted);
  margin-top:4px;
  font-size:.52rem;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lp-qr-real img{
  width:94px;
  height:94px;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  padding:5px;
}
.lp-real-directory{
  max-height:680px;
  overflow:hidden!important;
}
.lp-real-directory .lp-dir-card{
  margin-top:8px;
}
@media(max-width:1320px){
  .lp-device-shell{
    max-width:350px;
  }
}
@media(max-width:1050px){
  .studio-preview-card .live-brand-preview-mount{
    min-height:700px;
  }
}
@media(max-width:720px){
  .live-preview-controls{
    width:100%;
  }
}


/* =========================================================
   DigiSign.click V2.7.6 — Visual Mode + Background Exchange
   ========================================================= */
.visual-exchange-hint{
  grid-column:1/-1;
  margin-top:4px;
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:1px dashed #b9d7ff;
  color:#475467;
  font-size:.82rem;
  line-height:1.45;
}
.visual-exchange-hint b{
  color:#163B66;
}
.visual-exchange-hint span{
  display:block;
  margin-top:4px;
  color:#1d4ed8;
  font-weight:900;
}
.brand-mode-panel{
  align-items:end;
}


/* =========================================================
   DigiSign.click V2.7.6 — Color Reset Controls
   ========================================================= */
.brand-reset-panel{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:6px;
  padding:14px;
  border-radius:18px;
  border:1px solid #d8e2ee;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
}
.brand-reset-panel b{
  display:block;
  color:#163B66;
  font-weight:1000;
}
.brand-reset-panel span{
  display:block;
  margin-top:3px;
  color:#667085;
  font-size:.8rem;
  line-height:1.35;
}
.brand-reset-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.brand-reset-actions .mini-btn{
  min-height:36px;
  background:#fff!important;
  border-color:#d8e2ee!important;
  color:#163B66!important;
  cursor:pointer;
}
.brand-reset-actions .mini-btn:hover{
  border-color:#8ec5ff!important;
  box-shadow:0 0 0 4px rgba(46,163,242,.10);
}
.brand-reset-actions .danger-soft{
  background:#07111F!important;
  color:#fff!important;
  border-color:#07111F!important;
}
@media(max-width:760px){
  .brand-reset-panel{
    align-items:flex-start;
    flex-direction:column;
  }
  .brand-reset-actions{
    width:100%;
    justify-content:flex-start;
  }
  .brand-reset-actions .mini-btn{
    flex:1 1 auto;
  }
}


/* =========================================================
   DigiSign.click V2.7.6 — Final Publish Button
   ========================================================= */
.final-publish-panel{
  margin-top:14px;
  padding:14px;
  border-radius:22px;
  border:1px solid #d8e2ee;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 12px 28px rgba(15,23,42,.05);
}
.final-publish-btn{
  min-height:54px!important;
  font-size:1rem!important;
  box-shadow:0 18px 40px rgba(29,78,216,.18)!important;
}
.final-publish-btn:disabled{
  opacity:.7;
  cursor:wait;
}
.final-publish-links{
  margin-top:10px;
  color:#667085!important;
  line-height:1.45;
}
.final-link-title{
  color:#163B66;
  font-weight:1000;
  margin-bottom:8px;
}
.final-link-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
}
.final-link-actions .mini-btn.primary{
  background:linear-gradient(135deg,#1d4ed8,#2ea3f2)!important;
  color:#fff!important;
  border-color:transparent!important;
}
.final-link-note{
  color:#667085;
  font-size:.78rem;
}
.brand-reset-actions .publish-soft{
  background:linear-gradient(135deg,#1d4ed8,#2ea3f2)!important;
  color:#fff!important;
  border-color:transparent!important;
}


/* =========================================================
   DigiSign.click V2.7.6 — Brand Package Library
   ========================================================= */
.brand-package-library{
  display:grid;
  gap:16px;
}
.brand-package-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid #d8e2ee;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
}
.brand-package-head b,
.client-color-builder b{
  display:block;
  color:#163B66;
  font-weight:1000;
}
.brand-package-head span,
.client-color-builder span{
  display:block;
  color:#667085;
  margin-top:3px;
  font-size:.82rem;
  line-height:1.35;
}
.brand-package-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}
.brand-package-card{
  min-height:132px;
  border:1px solid #d8e2ee;
  border-radius:20px;
  padding:12px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
}
.brand-package-card:hover{
  transform:translateY(-1px);
  border-color:#8ec5ff;
  box-shadow:0 0 0 4px rgba(46,163,242,.10),0 14px 30px rgba(15,23,42,.07);
}
.brand-package-title b{
  display:block;
  color:#163B66;
  font-size:.92rem;
  line-height:1.1;
}
.brand-package-title span{
  display:block;
  color:#667085;
  font-size:.72rem;
  font-weight:850;
  margin-top:3px;
}
.brand-package-swatches{
  display:flex;
  gap:6px;
  margin:14px 0 10px;
}
.brand-package-swatches i{
  width:24px;
  height:24px;
  border-radius:999px;
  border:2px solid #fff;
  box-shadow:0 0 0 1px #d8e2ee,0 8px 16px rgba(15,23,42,.08);
}
.brand-package-card small{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:0 9px;
  border-radius:999px;
  background:#eef6ff;
  color:#1d4ed8;
  font-size:.68rem;
  font-weight:1000;
}
.client-color-builder{
  padding:14px;
  border-radius:20px;
  border:1px solid #d8e2ee;
  background:#fff;
}
.client-color-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  margin:12px 0 8px;
}
.client-color-row input{
  min-height:50px!important;
  border-radius:16px!important;
  background:#fff!important;
}
.client-color-row .btn{
  min-height:50px!important;
  white-space:nowrap;
}
@media(max-width:820px){
  .client-color-row{
    grid-template-columns:1fr;
  }
  .client-color-row .btn{
    width:100%;
  }
}


/* =========================================================
   DigiSign.click V2.7.6 — Company Brand Isolation + Manual Freedom
   ========================================================= */
.client-color-builder,
.brand-package-library,
.brand-reset-panel{
  position:relative;
}
.brand-settings-pro-card .small{
  line-height:1.45;
}


/* =========================================================
   DigiSign.click V2.7.6 — Linkroot-style Color Engine
   Manual colors become the source of truth.
   ========================================================= */
.manual-color-lock-badge{
  grid-column:1/-1;
  margin-top:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid #b9d7ff;
  background:linear-gradient(180deg,#eef6ff,#ffffff);
  color:#475467;
}
.manual-color-lock-badge b{
  display:block;
  color:#1d4ed8;
  font-weight:1000;
}
.manual-color-lock-badge span{
  display:block;
  margin-top:3px;
  font-size:.8rem;
  color:#667085;
}
#visual_route option[value="custom"]{
  font-weight:900;
}


/* =========================================================
   DigiSign.click V2.7.6 — True Manual Color Mapping
   Linkroot logic: each manual color controls a visible zone.
   ========================================================= */

/* LIVE MOCKUP EXACT MAPPING */
.lp-real-card,
.lp-card{
  background:var(--lp-card-bg)!important;
  color:var(--lp-text)!important;
}
.lp-real-card .lp-ribbon,
.lp-card .lp-ribbon{
  background:var(--lp-ribbon-bg)!important;
  color:var(--lp-ribbon-text)!important;
  border-bottom-color:var(--lp-accent)!important;
}
.lp-real-card .lp-ribbon span,
.lp-real-card .lp-ribbon b,
.lp-card .lp-ribbon span,
.lp-card .lp-ribbon b{
  color:var(--lp-ribbon-text)!important;
}
.lp-real-card .lp-avatar,
.lp-card .lp-avatar{
  background:linear-gradient(135deg,var(--lp-surface),var(--lp-secondary))!important;
  color:var(--lp-text)!important;
  border-color:var(--lp-accent)!important;
}
.lp-real-card .lp-ctas span,
.lp-card .lp-ctas span{
  background:var(--lp-button)!important;
  color:var(--lp-button-text)!important;
  border-color:var(--lp-button)!important;
}
.lp-real-card .lp-ctas span:nth-child(2),
.lp-card .lp-ctas span:nth-child(2){
  background:var(--lp-secondary)!important;
  color:var(--lp-button-text)!important;
}
.lp-real-card .lp-ctas .ghost,
.lp-card .lp-ctas .ghost{
  background:var(--lp-surface)!important;
  color:var(--lp-text)!important;
  border-color:var(--lp-accent)!important;
}
.lp-real-card .lp-rows div,
.lp-card .lp-rows div,
.lp-dir-card,
.lp-dir-search{
  background:var(--lp-row-bg)!important;
  border-color:var(--lp-accent)!important;
}
.lp-real-card .lp-rows b,
.lp-real-card .lp-rows span,
.lp-card .lp-rows b,
.lp-card .lp-rows span,
.lp-dir-card b,
.lp-dir-card span{
  color:var(--lp-row-text)!important;
}
.lp-real-card .lp-rows b i{
  background:var(--lp-icon-bg)!important;
  color:var(--lp-icon-text)!important;
  border-radius:8px;
  min-width:20px;
  height:20px;
  display:inline-grid;
  place-items:center;
}
.lp-qr-real,
.lp-qr{
  background:var(--lp-qr-bg)!important;
  border-color:var(--lp-qr-border)!important;
}
.lp-qr-real b,
.lp-qr-real span{
  color:var(--lp-text)!important;
}
.lp-device-shell{
  background:linear-gradient(145deg,var(--lp-primary),var(--lp-secondary))!important;
}

/* PUBLIC PROFILE EXACT MAPPING */
.public-card-page{
  background:var(--public-page-bg,#f8fbff)!important;
}
.pro-card{
  background:var(--pro-card-bg)!important;
  color:var(--pro-text)!important;
}
.pro-card:before{
  opacity:.18!important;
}
.pro-card-ribbon{
  background:var(--pro-ribbon-bg)!important;
  color:var(--pro-ribbon-text)!important;
  border-bottom-color:var(--pro-accent)!important;
}
.pro-card-ribbon span,
.pro-card-ribbon b{
  color:var(--pro-ribbon-text)!important;
}
.pro-avatar{
  background:linear-gradient(135deg,var(--pro-surface),var(--pro-secondary))!important;
  border-color:var(--pro-accent)!important;
  color:var(--pro-text)!important;
}
.pro-primary-action{
  background:var(--pro-cta)!important;
  color:var(--pro-cta-text)!important;
  border-color:var(--pro-cta)!important;
}
.pro-primary-action.whatsapp-action{
  background:var(--pro-cta)!important;
  color:var(--pro-cta-text)!important;
}
.pro-primary-action.ghost{
  background:var(--pro-surface)!important;
  color:var(--pro-text)!important;
  border-color:var(--pro-accent)!important;
}
.pro-contact,
.pro-section,
.pro-qr-card,
.pro-share{
  background:var(--pro-row-bg)!important;
  color:var(--pro-row-text)!important;
  border-color:var(--pro-accent)!important;
}
.pro-contact:hover{
  background:var(--pro-row-bg)!important;
  filter:brightness(.98);
}
.contact-label,
.contact-value,
.pro-section-title,
.pro-section p,
.pro-qr-copy strong,
.pro-qr-copy span{
  color:var(--pro-row-text)!important;
}
.contact-icon{
  background:var(--pro-icon-bg)!important;
  color:var(--pro-icon-text)!important;
  border-color:var(--pro-accent)!important;
}
.pro-contact[data-type="whatsapp"] .contact-icon,
.pro-contact[data-type="email"] .contact-icon,
.pro-contact[data-type="phone"] .contact-icon,
.pro-contact[data-type="mobile"] .contact-icon{
  background:var(--pro-icon-bg)!important;
  color:var(--pro-icon-text)!important;
}
.pro-qr-box{
  background:var(--pro-qr-bg)!important;
  border-color:var(--pro-qr-border)!important;
}
.pro-qr-frame{
  background:#fff!important;
}
.pro-footer{
  color:var(--pro-muted)!important;
}

/* Directory also follows manual colors */
.directory-hero,
.directory-card,
.dir-card,
#employees .card{
  background:var(--dir-card-bg-strong,var(--public-surface,#fff))!important;
  border-color:var(--dir-accent,var(--pro-accent,#c7a75d))!important;
}
.dir-hero-btn,
.dir-mini-btn.primary{
  background:var(--dir-cta,var(--pro-cta,#163b66))!important;
  color:var(--dir-cta-text,var(--pro-cta-text,#fff))!important;
}


/* =========================================================
   DigiSign.click V2.7.6 — Gradient Position Control
   ========================================================= */
.is-disabled-control{
  opacity:.55;
}
.is-disabled-control select{
  cursor:not-allowed!important;
}
#gradient_position{
  min-height:50px!important;
  background:#fff!important;
  color:#101828!important;
  border:1px solid #cfe0f2!important;
}


/* DigiSign.click V2.7.6 — Gradient public profile hotfix */


/* =========================================================
   DigiSign.click V2.7.6 — Public / Mockup Visual Parity
   The public card must match the live mockup color zones.
   ========================================================= */
.pro-card{
  background:var(--pro-card-bg)!important;
  border-color:var(--pro-accent)!important;
  box-shadow:var(--pro-shadow)!important;
}
.pro-card-inner{
  background:transparent!important;
}
.pro-card-top,
.pro-card-top:before,
.pro-card-top:after{
  background:transparent!important;
}
.pro-name{
  color:var(--pro-text)!important;
}
.pro-title{
  color:var(--pro-muted)!important;
}
.pro-company{
  color:var(--pro-company,var(--pro-muted))!important;
}
.pro-links{
  background:transparent!important;
}
.pro-contact{
  background:var(--pro-row-bg)!important;
  color:var(--pro-row-text)!important;
  border:1px solid var(--pro-accent)!important;
  box-shadow:none!important;
}
.pro-contact *{
  color:var(--pro-row-text)!important;
}
.pro-contact .contact-icon{
  color:var(--pro-icon-text)!important;
  background:var(--pro-icon-bg)!important;
  border-color:var(--pro-accent)!important;
}
.pro-primary-actions{
  background:transparent!important;
}
.pro-save,
.pro-share{
  background:var(--pro-cta)!important;
  color:var(--pro-cta-text)!important;
  border-color:var(--pro-accent)!important;
}
.pro-share{
  background:var(--pro-surface)!important;
  color:var(--pro-text)!important;
}
.pro-qr-card{
  background:var(--pro-row-bg)!important;
  color:var(--pro-row-text)!important;
  border:1px solid var(--pro-accent)!important;
  box-shadow:none!important;
}
.pro-qr-copy,
.pro-qr-copy span,
.pro-qr-copy strong,
.pro-qr-domain{
  color:var(--pro-row-text)!important;
}
.pro-card-ribbon{
  background:var(--pro-ribbon-bg)!important;
  color:var(--pro-ribbon-text)!important;
  border-bottom:1px solid var(--pro-accent)!important;
}
.pro-card-ribbon *{
  color:var(--pro-ribbon-text)!important;
}
.pro-avatar{
  border-color:var(--pro-accent)!important;
  background:linear-gradient(135deg,var(--pro-surface),var(--pro-secondary))!important;
  color:var(--pro-text)!important;
}
.public-card-page .card,
.public-card-page article{
  scrollbar-width:none;
}
.public-card-page .card::-webkit-scrollbar,
.public-card-page article::-webkit-scrollbar{
  display:none;
}


/* =========================================================
   DigiSign.click V2.7.6 — Linkroot Color Logic Engine
   Same color behavior as Linkroot:
   - background_color controls shell/card background
   - primary/secondary control gradients
   - button_color controls CTA/contact rows
   - text_color controls identity/header text
   - button_text_color controls buttons/contact text
   ========================================================= */

/* Live preview */
.lp-real-card,
.lp-card{
  background:var(--lp-card-bg)!important;
  color:var(--lp-text)!important;
}
.lp-real-card .lp-ribbon,
.lp-card .lp-ribbon{
  background:var(--lp-ribbon-bg)!important;
  color:var(--lp-ribbon-text)!important;
  border-bottom:1px solid var(--lp-row-border)!important;
}
.lp-real-card .lp-ribbon *,
.lp-card .lp-ribbon *{
  color:var(--lp-ribbon-text)!important;
}
.lp-real-card .lp-ctas span,
.lp-card .lp-ctas span,
.lp-real-card .lp-ctas span:nth-child(2),
.lp-card .lp-ctas span:nth-child(2){
  background:var(--lp-row-bg)!important;
  color:var(--lp-row-text)!important;
  border-color:var(--lp-row-border)!important;
  box-shadow:0 10px 24px var(--lp-row-glow)!important;
}
.lp-real-card .lp-ctas .ghost,
.lp-card .lp-ctas .ghost{
  background:transparent!important;
  color:var(--lp-row-text)!important;
  border-color:var(--lp-row-border)!important;
}
.lp-real-card .lp-rows div,
.lp-card .lp-rows div,
.lp-dir-card,
.lp-dir-search{
  background:var(--lp-row-bg)!important;
  color:var(--lp-row-text)!important;
  border-color:var(--lp-row-border)!important;
  box-shadow:inset 0 1px 0 var(--lp-row-sheen)!important;
}
.lp-real-card .lp-rows b,
.lp-real-card .lp-rows span,
.lp-card .lp-rows b,
.lp-card .lp-rows span,
.lp-dir-card b,
.lp-dir-card span{
  color:var(--lp-row-text)!important;
}
.lp-real-card .lp-rows b i{
  background:var(--lp-icon-bg)!important;
  color:var(--lp-icon-text)!important;
}
.lp-qr-real,
.lp-qr{
  background:var(--lp-qr-bg)!important;
  border-color:var(--lp-row-border)!important;
}
.lp-qr-real b,
.lp-qr-real span{
  color:var(--lp-text)!important;
}
.lp-device-shell{
  background:var(--lp-page-bg)!important;
}

/* Public card */
.public-card-page{
  background:var(--public-page-bg,#0a0f1d)!important;
}
.pro-card{
  background:var(--pro-card-bg)!important;
  color:var(--pro-text)!important;
  border-color:var(--pro-row-border,var(--pro-line))!important;
}
.pro-card-ribbon{
  background:var(--pro-ribbon-bg)!important;
  color:var(--pro-ribbon-text)!important;
  border-bottom:1px solid var(--pro-row-border,var(--pro-line))!important;
}
.pro-card-ribbon *{
  color:var(--pro-ribbon-text)!important;
}
.pro-name{
  color:var(--pro-text)!important;
}
.pro-title,
.pro-company{
  color:var(--pro-muted)!important;
}
.pro-primary-action,
.pro-primary-action.whatsapp-action{
  background:var(--pro-row-bg)!important;
  color:var(--pro-row-text)!important;
  border-color:var(--pro-row-border,var(--pro-line))!important;
  box-shadow:0 10px 24px var(--pro-row-glow,rgba(0,0,0,.22))!important;
}
.pro-primary-action.ghost{
  background:transparent!important;
  color:var(--pro-row-text)!important;
  border-color:var(--pro-row-border,var(--pro-line))!important;
}
.pro-contact,
.pro-section,
.pro-qr-card{
  background:var(--pro-row-bg)!important;
  color:var(--pro-row-text)!important;
  border-color:var(--pro-row-border,var(--pro-line))!important;
  box-shadow:inset 0 1px 0 var(--pro-row-sheen,rgba(255,255,255,.12))!important;
}
.pro-contact *,
.pro-section *,
.pro-qr-card *{
  color:var(--pro-row-text)!important;
}
.contact-icon{
  background:var(--pro-icon-bg)!important;
  color:var(--pro-icon-text)!important;
  border-color:var(--pro-row-border,var(--pro-line))!important;
}
.pro-avatar{
  border-color:var(--pro-row-border,var(--pro-line))!important;
  background:var(--pro-row-bg)!important;
  color:var(--pro-row-text)!important;
}
.pro-save{
  background:var(--pro-row-bg)!important;
  color:var(--pro-row-text)!important;
  border-color:var(--pro-row-border,var(--pro-line))!important;
}
.pro-share{
  background:transparent!important;
  color:var(--pro-row-text)!important;
  border-color:var(--pro-row-border,var(--pro-line))!important;
}
.pro-qr-box{
  background:var(--pro-qr-bg)!important;
  border-color:var(--pro-row-border,var(--pro-line))!important;
}


/* =========================================================
   DigiSign.click V2.7.6 — Hide Empty Employee Photo
   If no employee photo exists, remove avatar field/placeholder entirely.
   ========================================================= */
.lp-real-card h4.no-photo{
  margin-top:14px!important;
}
.lp-real-card:not(:has(.lp-avatar)) .lp-logo{
  margin-bottom:14px!important;
}
.pro-card:not(:has(.pro-avatar)) .pro-name{
  margin-top:18px!important;
}
.pro-card:not(:has(.pro-avatar)) .pro-top,
.pro-card:not(:has(.pro-avatar)) .pro-card-top{
  padding-top:18px!important;
}
.lp-dir-card:not(:has(.lp-avatar)),
.dir-card:not(:has(.dir-avatar)),
.employee-card:not(:has(.employee-avatar)){
  grid-template-columns:1fr auto!important;
}


/* =========================================================
   DigiSign.click V2.7.6 — Asset Cache Bust + Publish Sync
   Assets are referenced with ?v=2611 so public card and admin mockup use the same engine.
   ========================================================= */


/* =========================================================
   DigiSign.click V2.7.6 — Linkroot Button Normal-State Fix
   The button color must apply in normal state, not only on hover.
   ========================================================= */

/* Public profile: CTA buttons */
.pro-card .pro-primary-action,
.pro-card a.pro-primary-action,
.pro-card button.pro-primary-action,
.pro-card .whatsapp-action,
.pro-card .pro-save{
  background:var(--pro-row-bg,var(--pro-cta,#163B66))!important;
  background-image:var(--pro-row-bg,var(--pro-cta,#163B66))!important;
  color:var(--pro-row-text,var(--pro-cta-text,#ffffff))!important;
  border:1px solid var(--pro-row-border,rgba(255,255,255,.22))!important;
  box-shadow:inset 0 1px 0 var(--pro-row-sheen,rgba(255,255,255,.16)), 0 12px 28px var(--pro-row-glow,rgba(0,0,0,.18))!important;
}

/* Public profile: contact rows normal state */
.pro-card .pro-contact,
.pro-card a.pro-contact,
.pro-card .contact-row,
.pro-card .pro-section,
.pro-card .pro-qr-card{
  background:var(--pro-row-bg,var(--pro-cta,#163B66))!important;
  background-image:var(--pro-row-bg,var(--pro-cta,#163B66))!important;
  color:var(--pro-row-text,var(--pro-cta-text,#ffffff))!important;
  border:1px solid var(--pro-row-border,rgba(255,255,255,.22))!important;
  box-shadow:inset 0 1px 0 var(--pro-row-sheen,rgba(255,255,255,.16))!important;
  opacity:1!important;
}

/* Keep hover from changing to a different interpretation */
.pro-card .pro-contact:hover,
.pro-card a.pro-contact:hover,
.pro-card .pro-primary-action:hover,
.pro-card .whatsapp-action:hover,
.pro-card .pro-save:hover{
  background:var(--pro-row-bg,var(--pro-cta,#163B66))!important;
  background-image:var(--pro-row-bg,var(--pro-cta,#163B66))!important;
  color:var(--pro-row-text,var(--pro-cta-text,#ffffff))!important;
  filter:brightness(1.04)!important;
  transform:translateY(-1px);
}

/* Make all internal text inherit the Linkroot button text color */
.pro-card .pro-contact *,
.pro-card .pro-primary-action *,
.pro-card .pro-section *,
.pro-card .pro-qr-card *{
  color:var(--pro-row-text,var(--pro-cta-text,#ffffff))!important;
  opacity:1!important;
}

.pro-card .contact-label,
.pro-card .contact-value,
.pro-card .pro-qr-copy strong,
.pro-card .pro-qr-copy span{
  color:var(--pro-row-text,var(--pro-cta-text,#ffffff))!important;
  opacity:1!important;
}

/* Icons follow button text, same as Linkroot-style link icons */
.pro-card .contact-icon,
.pro-card .pro-contact[data-type="phone"] .contact-icon,
.pro-card .pro-contact[data-type="mobile"] .contact-icon,
.pro-card .pro-contact[data-type="whatsapp"] .contact-icon,
.pro-card .pro-contact[data-type="email"] .contact-icon{
  background:var(--pro-icon-bg,rgba(255,255,255,.12))!important;
  color:var(--pro-icon-text,var(--pro-row-text,#ffffff))!important;
  border-color:var(--pro-row-border,rgba(255,255,255,.22))!important;
}

/* Ghost/share button remains intentionally different */
.pro-card .pro-primary-action.ghost,
.pro-card .pro-share{
  background:transparent!important;
  background-image:none!important;
  color:var(--pro-row-text,var(--pro-cta-text,#ffffff))!important;
  border:1px solid var(--pro-row-border,rgba(255,255,255,.22))!important;
}

/* Live mockup: same normal-state behavior */
.lp-real-card .lp-rows div,
.lp-card .lp-rows div,
.lp-real-card .lp-ctas span,
.lp-card .lp-ctas span{
  background:var(--lp-row-bg,var(--lp-button,#163B66))!important;
  background-image:var(--lp-row-bg,var(--lp-button,#163B66))!important;
  color:var(--lp-row-text,var(--lp-button-text,#ffffff))!important;
  border-color:var(--lp-row-border,rgba(255,255,255,.22))!important;
}
.lp-real-card .lp-rows div *,
.lp-card .lp-rows div *,
.lp-real-card .lp-ctas span *,
.lp-card .lp-ctas span *{
  color:var(--lp-row-text,var(--lp-button-text,#ffffff))!important;
}


/* =========================================================
   DigiSign.click V2.7.6 — Clean Linkroot Color Studio
   One color engine: background, gradient, button, text, button text.
   ========================================================= */
.lr-angle-control{grid-column:1/-1;}
.lr-angle-control label{display:flex!important;align-items:center;justify-content:space-between;gap:10px;}
#gradientAngleLabel{display:inline-flex;min-width:64px;height:30px;align-items:center;justify-content:center;border-radius:999px;background:linear-gradient(135deg,#163b66,#2ea3f2);color:#fff;font-size:.82rem;font-weight:1000;}
#gradient_angle{width:100%;height:28px;padding:0!important;border:0!important;background:transparent!important;accent-color:#1d4ed8;cursor:pointer;}
#gradient_angle::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:linear-gradient(90deg,#163b66,#2ea3f2,#7c3aed,#c7a75d);box-shadow:inset 0 0 0 1px rgba(15,39,68,.16);}
#gradient_angle::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:999px;background:#fff;border:5px solid #1d4ed8;margin-top:-8px;box-shadow:0 10px 24px rgba(15,23,42,.22);}
#gradient_angle::-moz-range-track{height:10px;border-radius:999px;background:linear-gradient(90deg,#163b66,#2ea3f2,#7c3aed,#c7a75d);}
#gradient_angle::-moz-range-thumb{width:20px;height:20px;border-radius:999px;background:#fff;border:5px solid #1d4ed8;box-shadow:0 10px 24px rgba(15,23,42,.22);}
.lr-angle-track{display:flex;justify-content:space-between;color:#64748b;font-size:.72rem;font-weight:900;margin-top:4px;}
.is-disabled-control #gradient_angle{opacity:.35;cursor:not-allowed!important;}
.brand-color-grid:before{content:"Color Engine tipo Linkroot: Background + Primary/Secondary gradient + Button + Text + Button text";grid-column:1/-1;padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,#eef6ff,#fff);border:1px solid #cfe0f2;color:#163b66;font-weight:900;font-size:.82rem;}

/* Clean Linkroot state: Button color is normal state, not hover-only */
.pro-card .pro-contact,
.pro-card a.pro-contact,
.pro-card .pro-primary-action,
.pro-card .pro-save,
.lp-real-card .lp-rows div,
.lp-card .lp-rows div,
.lp-real-card .lp-ctas span,
.lp-card .lp-ctas span{
  background:var(--pro-row-bg,var(--lp-row-bg,var(--pro-cta,var(--lp-button,#163B66))))!important;
  background-image:var(--pro-row-bg,var(--lp-row-bg,var(--pro-cta,var(--lp-button,#163B66))))!important;
  color:var(--pro-row-text,var(--lp-row-text,var(--pro-cta-text,var(--lp-button-text,#fff))))!important;
  border-color:var(--pro-row-border,var(--lp-row-border,rgba(255,255,255,.24)))!important;
  opacity:1!important;
}
.pro-card .pro-contact *,
.pro-card .pro-primary-action *,
.pro-card .pro-save *,
.lp-real-card .lp-rows div *,
.lp-card .lp-rows div *,
.lp-real-card .lp-ctas span *,
.lp-card .lp-ctas span *{
  color:var(--pro-row-text,var(--lp-row-text,var(--pro-cta-text,var(--lp-button-text,#fff))))!important;
  opacity:1!important;
}
.pro-card .pro-primary-action.ghost,
.pro-card .pro-share,
.lp-real-card .lp-ctas .ghost,
.lp-card .lp-ctas .ghost{
  background:transparent!important;
  background-image:none!important;
  color:var(--pro-row-text,var(--lp-row-text,var(--pro-cta-text,var(--lp-button-text,#fff))))!important;
  border-color:var(--pro-row-border,var(--lp-row-border,rgba(255,255,255,.24)))!important;
}
.pro-card .pro-contact:hover,
.pro-card .pro-primary-action:hover,
.pro-card .pro-save:hover{
  background:var(--pro-row-bg,var(--pro-cta,#163B66))!important;
  background-image:var(--pro-row-bg,var(--pro-cta,#163B66))!important;
  color:var(--pro-row-text,var(--pro-cta-text,#fff))!important;
  filter:brightness(1.035);
}


/* =========================================================
   DigiSign.click V2.7.6 — Gradient Focus Slider Fix
   The slider now moves the accent/focus color in radial and mesh backgrounds.
   0/360 places the focus near the top/logo area.
   ========================================================= */
.lr-angle-control label:after{
  content:"mueve el brillo / color fuerte";
  font-size:.7rem;
  font-weight:900;
  color:#64748b;
  margin-left:auto;
  margin-right:8px;
}


/* =========================================================
   DigiSign.click V2.7.6 — All Presets Freedom + Publish Fallback
   Every preset remains fully editable. Slider changes are persisted via contrast_mode.
   ========================================================= */
.brand-package-card small::after{
  content:" · editable";
  opacity:.75;
}
.brand-package-card{
  position:relative;
}
.brand-package-card:after{
  content:"100% editable";
  position:absolute;
  top:10px;
  right:10px;
  font-size:.62rem;
  font-weight:1000;
  color:#1d4ed8;
  background:#eef6ff;
  border:1px solid #cfe0f2;
  border-radius:999px;
  padding:4px 7px;
}


/* =========================================================
   DigiSign.click V2.7.6 — Button Color Control System
   Simple mode: all buttons/rows match.
   Advanced mode: main, ghost, contact rows, icons and QR panel are controlled separately.
   ========================================================= */
.button-control-system{
  grid-column:1/-1;
  border:1px solid #cfe0f2;
  border-radius:24px;
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  padding:0;
  overflow:hidden;
  margin:14px 0;
}
.button-control-system summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  align-items:center;
}
.button-control-system summary::-webkit-details-marker{display:none;}
.button-control-system summary b{
  display:block;
  color:#0f2744;
  font-size:1rem;
}
.button-control-system summary small{
  display:block;
  color:#64748b;
  margin-top:3px;
}
.button-control-system summary em{
  font-style:normal;
  font-weight:1000;
  color:#1d4ed8;
  background:#eef6ff;
  border:1px solid #cfe0f2;
  border-radius:999px;
  padding:6px 10px;
  font-size:.72rem;
}
.button-control-mode{
  display:grid;
  grid-template-columns:minmax(240px, 1fr) 1.2fr;
  gap:14px;
  padding:0 20px 16px;
  align-items:end;
}
.button-control-note{
  border:1px dashed #b7cff0;
  background:#f8fbff;
  color:#64748b;
  border-radius:18px;
  padding:12px 14px;
  font-size:.83rem;
}
.button-advanced-grid{
  padding:0 20px 20px;
}
.button-advanced-grid.is-hidden-advanced{
  display:none!important;
}
.button-control-system:not(.is-advanced) summary{
  border-bottom:1px solid #e8f0fa;
}
.button-control-system.is-advanced summary{
  background:linear-gradient(135deg,#f8fbff,#eef6ff);
  border-bottom:1px solid #cfe0f2;
}
@media(max-width:900px){
  .button-control-mode{grid-template-columns:1fr;}
}

/* PUBLIC: separate button zones */
.pro-card .public-primary-actions .pro-primary-action:not(.ghost),
.pro-card .pro-save{
  background:var(--pro-main-button-bg,var(--pro-row-bg,var(--pro-cta,#163B66)))!important;
  background-image:var(--pro-main-button-bg,var(--pro-row-bg,var(--pro-cta,#163B66)))!important;
  color:var(--pro-main-button-text,var(--pro-row-text,var(--pro-cta-text,#fff)))!important;
  border-color:var(--pro-main-button-border,var(--pro-row-border,rgba(255,255,255,.22)))!important;
  box-shadow:0 12px 26px var(--pro-main-button-glow,var(--pro-row-glow,rgba(0,0,0,.18)))!important;
}
.pro-card .public-primary-actions .pro-primary-action.ghost,
.pro-card .pro-share{
  background:var(--pro-ghost-button-bg,var(--pro-main-button-bg,var(--pro-row-bg,#163B66)))!important;
  background-image:var(--pro-ghost-button-bg,var(--pro-main-button-bg,var(--pro-row-bg,#163B66)))!important;
  color:var(--pro-ghost-button-text,var(--pro-main-button-text,var(--pro-row-text,#fff)))!important;
  border-color:var(--pro-ghost-button-border,var(--pro-main-button-border,var(--pro-row-border,rgba(255,255,255,.22))))!important;
  box-shadow:0 12px 26px var(--pro-ghost-button-glow,var(--pro-row-glow,rgba(0,0,0,.18)))!important;
}
.pro-card .pro-contact,
.pro-card a.pro-contact{
  background:var(--pro-row-bg,var(--pro-cta,#163B66))!important;
  background-image:var(--pro-row-bg,var(--pro-cta,#163B66))!important;
  color:var(--pro-row-text,var(--pro-cta-text,#fff))!important;
  border-color:var(--pro-row-border,rgba(255,255,255,.22))!important;
  box-shadow:inset 0 1px 0 var(--pro-row-sheen,rgba(255,255,255,.16))!important;
}
.pro-card .pro-contact *,
.pro-card .pro-contact .contact-label,
.pro-card .pro-contact .contact-value{
  color:var(--pro-row-text,var(--pro-cta-text,#fff))!important;
}
.pro-card .contact-icon{
  background:var(--pro-icon-bg,rgba(255,255,255,.14))!important;
  color:var(--pro-icon-text,var(--pro-row-text,#fff))!important;
  border-color:var(--pro-row-border,rgba(255,255,255,.22))!important;
}
.pro-card .pro-qr-card{
  background:var(--pro-qr-bg,var(--pro-surface,#fff))!important;
  color:var(--pro-qr-text,var(--pro-text,#0f172a))!important;
  border-color:var(--pro-qr-border,var(--pro-row-border,rgba(255,255,255,.22)))!important;
}
.pro-card .pro-qr-card *,
.pro-card .pro-qr-copy,
.pro-card .pro-qr-copy span,
.pro-card .pro-qr-copy strong,
.pro-card .pro-qr-domain{
  color:var(--pro-qr-text,var(--pro-text,#0f172a))!important;
}

/* LIVE PREVIEW: separate zones too */
.lp-real-card .lp-ctas span:not(.ghost),
.lp-card .lp-ctas span:not(.ghost){
  background:var(--lp-main-button-bg,var(--lp-row-bg,var(--lp-button,#163B66)))!important;
  background-image:var(--lp-main-button-bg,var(--lp-row-bg,var(--lp-button,#163B66)))!important;
  color:var(--lp-main-button-text,var(--lp-row-text,var(--lp-button-text,#fff)))!important;
  border-color:var(--lp-main-button-border,var(--lp-row-border,rgba(255,255,255,.22)))!important;
}
.lp-real-card .lp-ctas .ghost,
.lp-card .lp-ctas .ghost{
  background:var(--lp-ghost-button-bg,var(--lp-main-button-bg,var(--lp-row-bg,#163B66)))!important;
  background-image:var(--lp-ghost-button-bg,var(--lp-main-button-bg,var(--lp-row-bg,#163B66)))!important;
  color:var(--lp-ghost-button-text,var(--lp-main-button-text,var(--lp-row-text,#fff)))!important;
  border-color:var(--lp-ghost-button-border,var(--lp-main-button-border,var(--lp-row-border,rgba(255,255,255,.22))))!important;
}
.lp-real-card .lp-rows div,
.lp-card .lp-rows div{
  background:var(--lp-row-bg,var(--lp-button,#163B66))!important;
  background-image:var(--lp-row-bg,var(--lp-button,#163B66))!important;
  color:var(--lp-row-text,var(--lp-button-text,#fff))!important;
  border-color:var(--lp-row-border,rgba(255,255,255,.22))!important;
}
.lp-real-card .lp-rows div *,
.lp-card .lp-rows div *{
  color:var(--lp-row-text,var(--lp-button-text,#fff))!important;
}
.lp-real-card .lp-rows b i,
.lp-card .lp-rows b i{
  background:var(--lp-icon-bg,rgba(255,255,255,.14))!important;
  color:var(--lp-icon-text,var(--lp-row-text,#fff))!important;
}
.lp-qr-real,
.lp-qr{
  background:var(--lp-qr-bg,var(--lp-surface,#fff))!important;
  color:var(--lp-qr-text,var(--lp-text,#0f172a))!important;
  border-color:var(--lp-qr-border,var(--lp-row-border,rgba(255,255,255,.22)))!important;
}
.lp-qr-real *,
.lp-qr *{
  color:var(--lp-qr-text,var(--lp-text,#0f172a))!important;
}


/* =========================================================
   DigiSign.click V2.7.6 — Action Layout Cleanup
   Default layout removes duplicated WhatsApp/Call/Email buttons.
   Contact rows are the primary actions; Save + Share remain at the bottom.
   ========================================================= */
.button-control-mode{
  grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) 1.1fr!important;
}
@media(max-width:1050px){
  .button-control-mode{grid-template-columns:1fr!important;}
}

.pro-card.no-quick-actions .public-primary-actions,
.lp-real-card.no-quick-actions .lp-ctas,
.lp-card.no-quick-actions .lp-ctas{
  display:none!important;
}

.pro-card.no-quick-actions .pro-links{
  margin-top:22px!important;
}
.lp-real-card.no-quick-actions .lp-rows,
.lp-card.no-quick-actions .lp-rows{
  margin-top:22px!important;
}

.pro-card.no-quick-actions .pro-name{
  margin-bottom:8px!important;
}
.pro-card.no-quick-actions .pro-company{
  margin-bottom:18px!important;
}

.pro-card .public-links .pro-contact{
  cursor:pointer;
}
.pro-card .public-links .pro-contact:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
}

/* Save + Share stay visually separated from contact rows */
.pro-card .save-row{
  margin-top:20px!important;
  gap:14px!important;
}
.lp-real-card .lp-actions,
.lp-card .lp-actions{
  margin-top:20px!important;
}

/* Optional quick actions remain available but no longer required */
.pro-card.has-quick-actions .public-primary-actions{
  margin-top:18px!important;
}


/* =========================================================
   DigiSign.click V2.7.6 — Premium Button + Icon System
   Rounded premium buttons + Lucide-style inline SVG icons.
   ========================================================= */
.ds-icon-svg{
  width:18px;
  height:18px;
  display:block;
  flex:0 0 auto;
}
.btn-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  flex:0 0 auto;
}

/* Premium action/contact rows */
.pro-card .pro-contact,
.pro-card a.pro-contact{
  min-height:64px!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) 28px!important;
  align-items:center!important;
  gap:12px!important;
  padding:11px 14px!important;
  border-radius:22px!important;
  text-decoration:none!important;
  overflow:hidden!important;
}
.pro-card .contact-icon{
  width:44px!important;
  height:44px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
}
.pro-card .contact-icon .ds-icon-svg{
  width:20px!important;
  height:20px!important;
}
.pro-card .contact-main{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:2px!important;
}
.pro-card .contact-label{
  display:block!important;
  font-size:.78rem!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
  line-height:1.05!important;
}
.pro-card .contact-value{
  display:block!important;
  font-size:.9rem!important;
  font-weight:760!important;
  line-height:1.2!important;
  opacity:.92!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.pro-card .contact-arrow{
  width:28px!important;
  height:28px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  opacity:.82!important;
  color:var(--pro-row-text,var(--pro-cta-text,#fff))!important;
}
.pro-card .contact-arrow .ds-icon-svg{
  width:16px!important;
  height:16px!important;
}

/* Premium bottom buttons */
.pro-card .public-primary-actions{
  gap:10px!important;
}
.pro-card .pro-primary-action,
.pro-card .pro-save,
.pro-card .pro-share{
  min-height:54px!important;
  border-radius:20px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  padding:13px 16px!important;
  font-weight:950!important;
  letter-spacing:-.01em!important;
  text-decoration:none!important;
}
.pro-card .save-row{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
}
.pro-card .pro-save,
.pro-card .pro-share{
  width:100%!important;
}
.pro-card .pro-save .ds-icon-svg,
.pro-card .pro-share .ds-icon-svg,
.pro-card .pro-primary-action .ds-icon-svg{
  width:18px!important;
  height:18px!important;
}

/* QR card gets softer premium radius */
.pro-card .pro-qr-card{
  border-radius:24px!important;
}

/* Live preview contact rows */
.lp-real-card .lp-rows,
.lp-card .lp-rows{
  display:grid!important;
  gap:8px!important;
}
.lp-real-card .lp-contact-row,
.lp-card .lp-contact-row{
  display:grid!important;
  grid-template-columns:30px auto minmax(0,1fr) 18px!important;
  align-items:center!important;
  gap:8px!important;
  min-height:44px!important;
  padding:8px 10px!important;
  border-radius:16px!important;
}
.lp-real-card .lp-contact-row i,
.lp-card .lp-contact-row i{
  width:30px!important;
  height:30px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  background:var(--lp-icon-bg,rgba(255,255,255,.14))!important;
  color:var(--lp-icon-text,var(--lp-row-text,#fff))!important;
  font-style:normal!important;
}
.lp-real-card .lp-contact-row i .ds-icon-svg,
.lp-card .lp-contact-row i .ds-icon-svg{
  width:15px!important;
  height:15px!important;
}
.lp-real-card .lp-contact-row b,
.lp-card .lp-contact-row b{
  font-size:.75rem!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
.lp-real-card .lp-contact-row span,
.lp-card .lp-contact-row span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:.74rem!important;
  opacity:.92!important;
}
.lp-real-card .lp-contact-row em,
.lp-card .lp-contact-row em{
  display:grid!important;
  place-items:center!important;
  font-style:normal!important;
  opacity:.78!important;
}
.lp-real-card .lp-contact-row em .ds-icon-svg,
.lp-card .lp-contact-row em .ds-icon-svg{
  width:13px!important;
  height:13px!important;
}
.lp-real-card .lp-ctas span,
.lp-card .lp-ctas span{
  border-radius:18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
}
.lp-real-card .lp-ctas .ds-icon-svg,
.lp-card .lp-ctas .ds-icon-svg{
  width:14px!important;
  height:14px!important;
}

@media(max-width:520px){
  .pro-card .save-row{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   DigiSign.click V2.7.6 — Protected Connected Signature Studio
   Signature Studio is opened from company.html and uses the active Supabase session.
   ========================================================= */
.sig-connected-data{
  margin-top:14px;
  border:1px dashed #b7cff0;
  background:linear-gradient(180deg,#f8fbff,#ffffff);
  border-radius:18px;
  padding:12px 14px;
  color:#64748b;
  font-size:.84rem;
}
.sig-connected-data b{
  display:block;
  color:#0f2744;
  margin-bottom:4px;
}
.sig-actions-grid{
  grid-template-columns:1fr 1fr!important;
}
.sig-actions-grid .primary{
  background:linear-gradient(135deg,#2563eb,#2ea3f2)!important;
  color:#fff!important;
  border:0!important;
}
@media(max-width:760px){
  .sig-actions-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   DigiSign.click V2.7.7 — Signature Studio Alias Guard
   signature-studio.html is no longer public/manual; it redirects to protected signature.html.
   ========================================================= */
.signature-alias-page{
  min-height:calc(100vh - 80px);
  display:grid;
  place-items:center;
  padding:30px;
}
.signature-alias-card{
  max-width:760px;
  width:100%;
  padding:34px;
}
.signature-alias-card h1{
  font-size:clamp(2rem,5vw,4rem);
  line-height:.92;
  margin:10px 0 14px;
  letter-spacing:-.075em;
  color:#163b66;
}
.signature-alias-card p{
  color:#64748b;
  font-weight:800;
}


/* =========================================================
   DigiSign.click V2.7.8 — Signature Loader Hardening
   Shows diagnostics instead of an empty preview if employee data fails.
   ========================================================= */
.sig-empty-state{
  border:1px dashed #f59e0b;
  background:#fffbeb;
  border-radius:22px;
  padding:22px;
  color:#78350f;
  max-width:760px;
}
.sig-empty-state h3{
  margin:0 0 8px;
  color:#78350f;
}
.sig-empty-state p{
  margin:6px 0;
  color:#92400e;
  font-weight:700;
}


/* =========================================================
   DigiSign.click V2.7.9 — Email Signature Links
   Every employee/template signature has a protected direct link.
   ========================================================= */
.sig-link-box{
  margin-top:16px;
  border:1px solid #cfe0f2;
  background:linear-gradient(180deg,#f8fbff,#ffffff);
  border-radius:22px;
  padding:14px;
  display:grid;
  gap:10px;
}
.sig-link-box b{
  display:block;
  color:#0f2744;
  font-size:.94rem;
}
.sig-link-box span{
  display:block;
  color:#64748b;
  font-size:.82rem;
  font-weight:800;
}
#signatureLinkInput{
  width:100%;
  border:1px solid #d5e4f5;
  background:#eef6ff;
  color:#0f2744;
  border-radius:14px;
  padding:11px 12px;
  font-size:.78rem;
  font-weight:800;
}
.sig-link-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
@media(max-width:760px){
  .sig-link-actions{grid-template-columns:1fr;}
}


/* =========================================================
   DigiSign.click V2.8.0 — Public Email Signature Preview
   signature.html can be previewed without login. Admin save actions show only when logged in.
   ========================================================= */
body.signature-public-preview .sidebar nav,
body.signature-public-preview .sidebar .sep,
body.signature-public-preview .topbar .row-actions a[href="admin.html"],
body.signature-public-preview #saveTemplateBtn,
body.signature-public-preview #copyShareLinkBtn{
  display:none!important;
}

body.signature-public-preview .sidebar{
  width:260px;
}

body.signature-public-preview .sig-note{
  background:#eef6ff;
  border-color:#cfe0f2;
  color:#163b66;
}

body.signature-public-preview .sig-link-box b::after{
  content:" · Public preview";
  color:#2563eb;
  font-weight:1000;
}

body.signature-public-preview #sigConnectedData{
  background:#f8fbff;
}


/* =========================================================
   DigiSign.click V2.8.1 — Dedicated Public Signature Viewer
   signature-public.html is the shareable public email signature preview.
   ========================================================= */
.public-signature-viewer{
  background:linear-gradient(135deg,#f8fbff,#eaf3ff);
}
.public-signature-page{
  min-height:calc(100vh - 70px);
  display:grid;
  place-items:center;
  padding:30px;
}
.public-signature-card{
  width:min(960px,100%);
  background:#fff;
  border:1px solid #cfe0f2;
  border-radius:28px;
  box-shadow:0 30px 90px rgba(15,39,68,.14);
  padding:28px;
}
.public-signature-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  border-bottom:1px solid #e2edf8;
  padding-bottom:18px;
  margin-bottom:24px;
}
.public-signature-top img{
  width:190px;
  max-height:56px;
  object-fit:contain;
  object-position:left center;
}
.public-signature-top span{
  background:#eef6ff;
  border:1px solid #cfe0f2;
  border-radius:999px;
  color:#2563eb;
  font-weight:1000;
  padding:9px 13px;
}
.public-signature-preview{
  overflow:auto;
  background:
    linear-gradient(45deg,#f8fafc 25%,transparent 25%),
    linear-gradient(-45deg,#f8fafc 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#f8fafc 75%),
    linear-gradient(-45deg,transparent 75%,#f8fafc 75%);
  background-size:22px 22px;
  background-position:0 0,0 11px,11px -11px,-11px 0;
  border:1px solid #dbe8f5;
  border-radius:22px;
  padding:34px;
  min-height:210px;
}
.public-signature-loading{
  color:#64748b;
  font-weight:900;
}
.public-signature-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.public-signature-note{
  color:#64748b;
  font-weight:800;
  font-size:.9rem;
  line-height:1.55;
  margin:18px 0 0;
}
@media(max-width:640px){
  .public-signature-page{padding:16px;}
  .public-signature-card{padding:18px;border-radius:22px;}
  .public-signature-top{display:grid;}
  .public-signature-preview{padding:18px;}
  .public-signature-actions .btn{width:100%;}
}


/* =========================================================
   DigiSign.click V2.8.2 — Signature Public OG Preview
   Share signature-public.php for professional WhatsApp/Open Graph previews.
   ========================================================= */


/* =========================================================
   DigiSign.click V2.8.3 — Signature HTML Redirect to PHP OG
   Share signature-public.php. .htaccess redirects old .html links to PHP.
   ========================================================= */


/* =========================================================
   DigiSign.click V2.8.4 — Employee Photo Remove Control
   Employees can remove an uploaded photo and return to initials/fallback avatar.
   ========================================================= */
.employee-photo-preview{
  min-height:48px;
}
.employee-photo-card{
  display:inline-flex;
  align-items:center;
  gap:12px;
  border:1px solid #cfe0f2;
  background:#f8fbff;
  border-radius:18px;
  padding:10px 12px;
}
.employee-photo-card img{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid #dbe8f5;
  box-shadow:0 12px 24px rgba(15,39,68,.12);
}
.employee-photo-card span{
  color:#64748b;
  font-weight:900;
  font-size:.86rem;
}
.employee-photo-empty{
  border:1px dashed #cfe0f2;
  background:#f8fbff;
  color:#64748b;
  border-radius:16px;
  padding:13px 14px;
  font-weight:800;
  font-size:.9rem;
}
.employee-photo-actions{
  margin:-4px 0 16px;
}
.employee-photo-actions .btn{
  min-width:150px;
}


/* =========================================================
   DigiSign.click V2.8.7 — Premium QR Polish
   Larger, crisper QR, premium white stage, gradient dots and scan-safe logo zone.
   ========================================================= */
.pro-card .pro-qr-card-clean{
  position:relative!important;
  overflow:hidden!important;
}
.pro-card .pro-qr-native-wrap{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:min(100%,318px)!important;
  margin:16px auto 0!important;
  padding:16px!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 20% 0%,rgba(255,255,255,.98),rgba(255,255,255,.86) 38%,rgba(248,251,255,.98) 100%)!important;
  border:1px solid rgba(15,39,68,.10)!important;
  box-shadow:
    0 22px 55px rgba(15,39,68,.12),
    inset 0 1px 0 rgba(255,255,255,.96)!important;
}
.pro-card .pro-qr-native-wrap::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:24px;
  border:1px solid rgba(15,39,68,.055);
  pointer-events:none;
}
.pro-card .pro-qr-native-wrap::after{
  content:"";
  position:absolute;
  width:72px;
  height:5px;
  left:50%;
  top:7px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--qr-accent,rgba(37,99,235,.35)),transparent);
  opacity:.45;
  pointer-events:none;
}
.pro-card .pro-qr-native{
  position:relative!important;
  width:268px!important;
  height:268px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:24px!important;
  background:#fff!important;
  overflow:hidden!important;
}
.pro-card .pro-qr-native canvas,
.pro-card .pro-qr-native svg,
.pro-card .pro-qr-native img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  image-rendering:auto!important;
}
.pro-card .pro-qr-domain,
.lp-card .lp-qr-real span,
.lp-real-card .lp-qr-real span{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  letter-spacing:.01em!important;
  font-weight:950!important;
}
.pro-card .pro-qr-domain{
  margin-top:12px!important;
  width:min(100%,318px)!important;
  padding:10px 14px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.78)!important;
  border:1px solid rgba(15,39,68,.10)!important;
  box-shadow:0 10px 26px rgba(15,39,68,.08)!important;
}
@media(max-width:520px){
  .pro-card .pro-qr-native-wrap{width:min(100%,292px)!important;padding:14px!important;}
  .pro-card .pro-qr-native{width:238px!important;height:238px!important;}
}


/* =========================================================
   DigiSign.click V2.8.8 — Live Preview Matches Public Card
   Admin preview now mirrors the public card layout instead of compact mockup.
   ========================================================= */
.lp-phone-public-match{
  width:min(430px,100%);
  margin:0 auto;
}
.lp-phone-public-match .lp-real-card{
  overflow:hidden;
}
.lp-public-match-card .lp-card-top{
  height:42px;
}
.lp-public-body{
  padding:26px 22px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}
.lp-public-body .lp-logo-wrap{
  display:grid;
  place-items:center;
  width:96px;
  min-height:64px;
  margin:4px auto 18px;
}
.lp-public-body .lp-logo-wrap img{
  max-width:96px;
  max-height:64px;
  object-fit:contain;
}
.lp-public-body .lp-logo-wrap span{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-weight:1000;
  background:rgba(255,255,255,.7);
  color:var(--lp-text,#0f2744);
}
.lp-public-body .lp-avatar{
  margin:-4px auto 14px;
}
.lp-public-body h4{
  margin:0;
  text-align:center;
  font-size:clamp(1.55rem,3.7vw,2.1rem);
  line-height:.96;
}
.lp-public-body p{
  margin:7px 0 0;
  text-align:center;
  font-weight:950;
}
.lp-public-body small{
  display:block;
  text-align:center;
  margin:7px 0 20px;
  font-weight:1000;
}
.lp-public-body .lp-ctas{
  width:100%;
  margin:0 0 16px;
}
.lp-public-body .lp-rows{
  width:100%;
  display:grid;
  gap:12px;
}
.lp-public-body .lp-contact-row{
  min-height:56px;
  border-radius:16px;
}
.lp-save-row{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:18px 0;
}
.lp-save-row button{
  border:0;
  border-radius:16px;
  min-height:50px;
  font-weight:1000;
  color:var(--lp-button-text,#fff);
  background:linear-gradient(135deg,var(--lp-button,#2563eb),var(--lp-secondary,#2ea3f2));
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 14px 26px rgba(37,99,235,.18);
}
.lp-save-row button svg{
  width:18px;
  height:18px;
}
.lp-qr-public-card{
  width:100%;
  border-radius:26px;
  padding:18px 14px;
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 44px rgba(15,39,68,.10);
  border:1px solid rgba(15,39,68,.08);
  margin-top:0;
  text-align:center;
}
.lp-qr-public-card .lp-qr-copy span{
  display:inline-flex;
  border:1px solid rgba(15,39,68,.12);
  border-radius:999px;
  padding:5px 10px;
  font-size:.62rem;
  font-weight:1000;
  letter-spacing:.08em;
  color:var(--lp-muted,#64748b);
  background:#fff;
}
.lp-qr-public-card .lp-qr-copy b{
  display:block;
  margin-top:8px;
  font-size:1.02rem;
  color:var(--lp-text,#0f2744);
}
.lp-qr-public-card .lp-qr-copy em{
  display:block;
  margin:4px auto 12px;
  max-width:240px;
  font-style:normal;
  font-size:.72rem;
  line-height:1.25;
  font-weight:850;
  color:var(--lp-muted,#64748b);
}
.lp-qr-visual{
  display:grid;
  place-items:center;
}
.lp-qr-stack{
  border:1px solid rgba(15,39,68,.10);
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#f8fbff);
  padding:10px 10px 8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
.lp-qr-frame{
  width:178px;
  height:178px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#fff;
}
.lp-qr-frame img{
  width:154px;
  height:154px;
  object-fit:contain;
}
.lp-qr-name{
  margin-top:8px;
  max-width:178px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border:1px solid rgba(15,39,68,.10);
  border-radius:999px;
  padding:6px 9px;
  background:#fff;
  color:var(--lp-text,#0f2744);
  font-size:.62rem;
  font-weight:1000;
}
.lp-card-footer{
  margin:14px 0 0!important;
  max-width:270px;
  color:var(--lp-muted,#64748b)!important;
  text-align:center!important;
  font-size:.68rem!important;
  line-height:1.35!important;
}
@media(max-width:720px){
  .lp-save-row{grid-template-columns:1fr;}
}


/* =========================================================
   DigiSign.click V2.8.9 — QR Style Studio
   Different QR point/corner styles stored with brand backup JSON.
   ========================================================= */
.qr-style-studio{
  border:1px solid #cfe0f2;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border-radius:24px;
  padding:16px;
  margin:18px 0;
}
.qr-style-studio summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  list-style:none;
}
.qr-style-studio summary::-webkit-details-marker{display:none}
.qr-style-studio summary b{
  display:block;
  color:#0f2744;
  font-size:1.02rem;
}
.qr-style-studio summary small{
  display:block;
  color:#64748b;
  font-size:.82rem;
  margin-top:2px;
  font-weight:800;
}
.qr-style-studio summary em{
  font-style:normal;
  background:#eef6ff;
  border:1px solid #cfe0f2;
  color:#2563eb;
  border-radius:999px;
  padding:7px 11px;
  font-size:.74rem;
  font-weight:1000;
}
.qr-style-section{
  border-top:1px solid #e2edf8;
  margin-top:14px;
  padding-top:14px;
}
.qr-style-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:end;
  margin-bottom:12px;
}
.qr-style-title b{
  color:#0f2744;
}
.qr-style-title span{
  color:#64748b;
  font-size:.82rem;
  font-weight:800;
}
.qr-style-options{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}
.qr-style-option{
  border:1px solid #d6e4f5;
  background:#fff;
  border-radius:16px;
  padding:10px 7px;
  min-height:92px;
  display:grid;
  place-items:center;
  gap:7px;
  cursor:pointer;
}
.qr-style-option.is-active{
  border-color:#60a5fa;
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
  background:#f8fbff;
}
.qr-style-option b{
  font-size:.72rem;
  color:#0f2744;
  white-space:nowrap;
}
.qr-mini{
  width:42px;
  height:42px;
  display:block;
  border-radius:10px;
  background:#0b1220;
  position:relative;
  overflow:hidden;
}
.qr-mini::before,
.qr-mini::after{
  content:"";
  position:absolute;
  inset:8px;
  background:repeating-linear-gradient(90deg,#fff 0 4px,transparent 4px 8px),
             repeating-linear-gradient(0deg,#fff 0 4px,transparent 4px 8px);
  mix-blend-mode:screen;
  opacity:.92;
}
.qr-mini-rounded{border-radius:15px}
.qr-mini-rounded::before,.qr-mini-rounded::after{border-radius:10px}
.qr-mini-dots::before,.qr-mini-dots::after{
  background:radial-gradient(circle,#fff 0 2px,transparent 2.5px);
  background-size:8px 8px;
}
.qr-mini-classy{border-radius:12px}
.qr-mini-classy::before{
  background:linear-gradient(135deg,#fff 0 18%,transparent 18% 32%,#fff 32% 45%,transparent 45% 62%,#fff 62% 76%,transparent 76%);
}
.qr-mini-classy-rounded{border-radius:14px}
.qr-mini-extra-rounded{border-radius:18px}
.qr-mini-square{border-radius:4px}
.qr-style-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.qr-style-grid select{
  width:100%;
  border:1px solid #d5e4f5;
  border-radius:16px;
  padding:12px 13px;
  background:#fff;
  font-weight:850;
}
.qr-style-note{
  margin-top:14px;
  border:1px dashed #b7cff0;
  border-radius:18px;
  background:#f8fbff;
  padding:12px 14px;
  color:#64748b;
  font-weight:800;
  line-height:1.45;
}
.qr-style-note b{color:#0f2744}
@media(max-width:900px){
  .qr-style-options{grid-template-columns:repeat(3,1fr)}
  .qr-style-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .qr-style-options{grid-template-columns:repeat(2,1fr)}
}


/* =========================================================
   DigiSign.click V2.9.0 — Live QR Style Preview
   QR Style Studio now renders a real QR in the admin mockup in real time.
   ========================================================= */
.lp-live-qr-frame{
  position:relative;
  overflow:hidden;
}
.lp-live-qr-preview{
  width:154px;
  height:154px;
  display:grid;
  place-items:center;
}
.lp-live-qr-preview svg,
.lp-live-qr-preview canvas{
  width:154px!important;
  height:154px!important;
  display:block;
}
.lp-live-qr-fallback{
  width:154px;
  height:154px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:
    linear-gradient(90deg,#0b1220 12px,transparent 12px 22px,#0b1220 22px 34px,transparent 34px),
    linear-gradient(#0b1220 12px,transparent 12px 22px,#0b1220 22px 34px,transparent 34px);
  color:#fff;
  font-weight:1000;
  font-size:1.3rem;
}


/* =========================================================
   DigiSign.click V2.9.1 — Exact Public Card Preview
   Admin card preview now loads the real card.php inside an iframe.
   ========================================================= */
.exact-public-preview-shell{
  width:100%;
  display:grid;
  place-items:center;
  gap:12px;
}
.exact-public-preview-toolbar{
  width:min(560px,100%);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid #d8e2ee;
  border-radius:999px;
  padding:8px 10px 8px 14px;
  box-shadow:0 10px 24px rgba(15,39,68,.08);
}
.exact-public-preview-toolbar span{
  color:#64748b;
  font-weight:950;
  font-size:.78rem;
}
.exact-public-preview-toolbar .mini-btn{
  white-space:nowrap;
}
.exact-public-card-iframe{
  width:min(560px,100%);
  height:920px;
  border:1px solid #d8e2ee;
  border-radius:28px;
  background:#eef6ff;
  box-shadow:0 26px 70px rgba(15,39,68,.16);
}
.exact-public-preview-note{
  width:min(560px,100%);
  margin:0!important;
  color:#64748b!important;
  font-size:.82rem!important;
  line-height:1.45!important;
  font-weight:800!important;
  text-align:center!important;
}
.exact-public-preview-note b{
  color:#0f2744;
}
.studio-preview-card .live-brand-preview-mount:has(.exact-public-card-iframe){
  min-height:1040px;
  overflow:visible!important;
  align-items:start;
}
@media(max-width:760px){
  .exact-public-card-iframe{
    height:820px;
    border-radius:22px;
  }
  .exact-public-preview-toolbar{
    border-radius:20px;
    flex-direction:column;
    align-items:stretch;
  }
}


/* =========================================================
   DigiSign.click V2.9.2 — QR Renderer Stability Fix
   SVG renderer prevents canvas deformation/cropping in premium QR styles.
   ========================================================= */
.pro-qr-native{
  width:260px!important;
  height:260px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}
.pro-qr-native .digisign-styled-qr,
.pro-qr-native .digisign-fallback-qr,
.pro-qr-native .premium-qr-render{
  width:236px!important;
  height:236px!important;
  max-width:236px!important;
  max-height:236px!important;
  min-width:236px!important;
  min-height:236px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border-radius:16px!important;
}
.pro-qr-native .digisign-styled-qr svg,
.pro-qr-native .digisign-styled-qr canvas,
.pro-qr-native .digisign-styled-qr img,
.pro-qr-native .digisign-fallback-qr canvas,
.pro-qr-native .digisign-fallback-qr img,
.pro-qr-native .premium-qr-render svg,
.pro-qr-native .premium-qr-render canvas,
.pro-qr-native .premium-qr-render img{
  width:236px!important;
  height:236px!important;
  max-width:236px!important;
  max-height:236px!important;
  min-width:236px!important;
  min-height:236px!important;
  display:block!important;
  object-fit:contain!important;
  transform:none!important;
  border-radius:16px!important;
}
.pro-qr-native .digisign-styled-qr > *:nth-child(n+2),
.pro-qr-native .digisign-fallback-qr > *:nth-child(n+2),
.pro-qr-native .premium-qr-render > *:nth-child(n+2){
  display:none!important;
}
@media(max-width:420px){
  .pro-qr-native{
    width:238px!important;
    height:238px!important;
  }
  .pro-qr-native .digisign-styled-qr,
  .pro-qr-native .digisign-fallback-qr,
  .pro-qr-native .premium-qr-render,
  .pro-qr-native .digisign-styled-qr svg,
  .pro-qr-native .digisign-styled-qr canvas,
  .pro-qr-native .digisign-styled-qr img,
  .pro-qr-native .digisign-fallback-qr canvas,
  .pro-qr-native .digisign-fallback-qr img,
  .pro-qr-native .premium-qr-render svg,
  .pro-qr-native .premium-qr-render canvas,
  .pro-qr-native .premium-qr-render img{
    width:218px!important;
    height:218px!important;
    max-width:218px!important;
    max-height:218px!important;
    min-width:218px!important;
    min-height:218px!important;
  }
}


/* =========================================================
   DigiSign.click V2.9.3 — QR Style Studio Live Preview + Apply
   QR Style Studio now previews styles locally and applies when approved.
   ========================================================= */
.qr-style-live-preview-panel{
  margin-top:16px;
  border:1px solid #d5e4f5;
  background:linear-gradient(135deg,#ffffff,#f8fbff);
  border-radius:22px;
  padding:16px;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:16px;
  align-items:center;
}
.qr-style-live-left b{
  display:block;
  color:#0f2744;
  font-size:1rem;
}
.qr-style-live-left span{
  display:block;
  color:#64748b;
  font-weight:800;
  font-size:.84rem;
  line-height:1.4;
  margin-top:3px;
}
.qr-style-status{
  margin-top:10px;
  border:1px dashed #b7cff0;
  background:#eef6ff;
  color:#2563eb;
  border-radius:14px;
  padding:9px 10px;
  font-size:.78rem;
  font-weight:950;
}
.qr-style-live-card{
  width:214px;
  border:1px solid #cfe0f2;
  background:#fff;
  box-shadow:0 18px 38px rgba(15,39,68,.10);
  border-radius:24px;
  padding:14px;
  display:grid;
  place-items:center;
}
.qr-studio-preview{
  width:176px;
  height:176px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#fff;
  overflow:hidden;
}
.qr-studio-preview svg,
.qr-studio-preview canvas,
.qr-studio-preview img{
  width:176px!important;
  height:176px!important;
  display:block!important;
  object-fit:contain!important;
}
.qr-style-live-card small{
  margin-top:10px;
  max-width:180px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  border:1px solid #e2edf8;
  background:#f8fbff;
  border-radius:999px;
  padding:6px 10px;
  color:#0f2744;
  font-size:.68rem;
  font-weight:1000;
  text-transform:capitalize;
}
.qr-style-live-actions{
  display:grid;
  gap:9px;
  min-width:170px;
}
.qr-style-live-actions .btn{
  width:100%;
}
.qr-style-live-actions .btn.primary{
  background:linear-gradient(135deg,#2563eb,#2ea3f2);
  color:#fff;
  border:0;
}
.qr-studio-fallback{
  width:176px;
  height:176px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#0f172a;
  color:#fff;
  font-weight:1000;
}
@media(max-width:980px){
  .qr-style-live-preview-panel{
    grid-template-columns:1fr;
  }
  .qr-style-live-card{
    width:100%;
  }
  .qr-style-live-actions{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:560px){
  .qr-style-live-actions{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   DigiSign.click V2.9.4 — QR Preview Library Load Fix
   company.html now loads QR libraries; fallback renders an actual QR or clean QR pattern.
   ========================================================= */
.qr-studio-basic-fallback canvas,
.qr-studio-basic-fallback img{
  width:176px!important;
  height:176px!important;
  display:block!important;
  object-fit:contain!important;
}
.qr-studio-css-fallback{
  width:176px;
  height:176px;
  padding:18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,1fr);
  gap:8px;
  background:#fff;
  border-radius:18px;
  border:1px solid #e2edf8;
}
.qr-studio-css-fallback span{
  border-radius:7px;
  background:#0f172a;
}
.qr-studio-css-fallback span:nth-child(1),
.qr-studio-css-fallback span:nth-child(4),
.qr-studio-css-fallback span:nth-child(13),
.qr-studio-css-fallback span:nth-child(16){
  background:transparent;
  border:8px solid #0f172a;
  border-radius:12px;
}
.qr-studio-css-fallback span:nth-child(2),
.qr-studio-css-fallback span:nth-child(7),
.qr-studio-css-fallback span:nth-child(10),
.qr-studio-css-fallback span:nth-child(15){
  opacity:.55;
}
.qr-studio-fallback{
  background:#fff!important;
  color:#0f172a!important;
}


/* =========================================================
   DigiSign.click V2.9.5 — Unified Brand Composer + Glass Engine
   One compact control surface for manual colors, premium glass, shine, QR and buttons.
   ========================================================= */
.unified-brand-composer{
  border:1px solid #cfe0f2;
  border-radius:28px;
  padding:18px;
  margin:18px 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(46,163,242,.12), transparent 32%),
    linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 22px 60px rgba(15,39,68,.08);
}
.unified-brand-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  padding-bottom:14px;
  border-bottom:1px solid #e2edf8;
}
.unified-brand-head b{
  display:block;
  color:#0f2744;
  font-size:1.18rem;
}
.unified-brand-head span{
  display:block;
  color:#64748b;
  font-weight:850;
  line-height:1.45;
  margin-top:3px;
}
.unified-brand-head em,
.advanced-brand-tools-wrap summary em{
  font-style:normal;
  background:#eef6ff;
  border:1px solid #cfe0f2;
  color:#2563eb;
  border-radius:999px;
  padding:8px 12px;
  font-size:.72rem;
  font-weight:1000;
  text-transform:uppercase;
  white-space:nowrap;
}
.unified-brand-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:16px;
}
.unified-field{
  border:1px solid #d8e7f8;
  background:#fff;
  border-radius:20px;
  padding:12px;
  display:grid;
  gap:8px;
}
.unified-field label{
  margin:0!important;
  color:#0f2744;
  font-weight:1000;
}
.unified-field input[type="color"]{
  width:100%;
  height:48px;
  border:1px solid #d5e4f5;
  border-radius:15px;
  padding:5px;
  cursor:pointer;
}
.unified-field input[type="text"]{
  border:1px solid #d5e4f5;
  border-radius:14px;
  padding:10px 11px;
  font-weight:900;
  color:#0f2744;
  background:#f8fbff;
}
.unified-brand-options{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:14px;
}
.unified-brand-options > div{
  border:1px solid #d8e7f8;
  background:#fff;
  border-radius:18px;
  padding:12px;
}
.unified-brand-options label,
.unified-shine-control label{
  color:#0f2744;
  font-weight:1000;
}
.unified-brand-options select{
  width:100%;
  margin-top:7px;
  border:1px solid #d5e4f5;
  border-radius:15px;
  padding:12px;
  background:#fff;
  font-weight:900;
}
.unified-shine-control{
  margin-top:14px;
  border:1px solid #d8e7f8;
  background:#fff;
  border-radius:20px;
  padding:14px;
}
.unified-shine-control label{
  display:flex!important;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px!important;
}
.unified-shine-control strong{
  background:#2563eb;
  color:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-size:.78rem;
}
.unified-shine-control input[type="range"]{
  width:100%;
  accent-color:#2563eb;
}
.unified-shine-control div{
  display:flex;
  justify-content:space-between;
  color:#64748b;
  font-size:.76rem;
  font-weight:900;
}
.unified-preview-row{
  display:grid;
  grid-template-columns:260px 220px 1fr;
  gap:14px;
  margin-top:16px;
  align-items:center;
}
.unified-mini-card{
  position:relative;
  min-height:150px;
  border-radius:24px;
  padding:20px;
  overflow:hidden;
  color:var(--u-text,#0f172a);
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb,var(--u-accent,#06b6d4) 28%, transparent) 44%, rgba(255,255,255,.42) 54%, transparent 76%),
    radial-gradient(circle at 55% 45%, color-mix(in srgb,var(--u-accent,#06b6d4) 24%, transparent), transparent 36%),
    linear-gradient(180deg,var(--u-bg,#f8fafc),color-mix(in srgb,var(--u-bg,#f8fafc) 82%, #000 18%));
  border:1px solid rgba(15,39,68,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 18px 42px rgba(15,39,68,.10);
}
.unified-mini-card::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:20px;
  height:44px;
  border-radius:999px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--u-btn,#2563eb) 78%, #fff 22%),var(--u-btn,#2563eb),color-mix(in srgb,var(--u-btn,#2563eb) 72%, #000 28%));
  box-shadow:0 16px 32px color-mix(in srgb,var(--u-btn,#2563eb) 32%, transparent);
}
.unified-mini-card span,
.unified-mini-card b{
  position:relative;
  z-index:2;
  display:block;
}
.unified-mini-card span{
  font-size:.78rem;
  font-weight:1000;
  color:color-mix(in srgb,var(--u-text,#0f172a) 70%, var(--u-accent,#06b6d4) 30%);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.unified-mini-card b{
  margin-top:9px;
  max-width:190px;
  font-size:1.2rem;
  line-height:1;
}
.unified-actions{
  display:grid;
  gap:9px;
}
.unified-actions .btn{
  width:100%;
}
.unified-actions .btn.primary{
  border:0;
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#2ea3f2);
}
.unified-note{
  border:1px dashed #b7cff0;
  background:#f8fbff;
  color:#64748b;
  border-radius:18px;
  padding:14px;
  line-height:1.45;
  font-weight:850;
}
.unified-note b{
  color:#0f2744;
}
.advanced-brand-tools-wrap{
  border:1px solid #cfe0f2;
  background:#fff;
  border-radius:24px;
  margin:16px 0;
  padding:14px;
}
.advanced-brand-tools-wrap summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  cursor:pointer;
  list-style:none;
}
.advanced-brand-tools-wrap summary::-webkit-details-marker{display:none}
.advanced-brand-tools-wrap summary b{
  display:block;
  color:#0f2744;
  font-size:1.04rem;
}
.advanced-brand-tools-wrap summary small{
  display:block;
  color:#64748b;
  margin-top:2px;
  font-weight:850;
}
.advanced-brand-tools-body{
  margin-top:14px;
  display:grid;
  gap:14px;
}
@media(max-width:1100px){
  .unified-brand-grid{grid-template-columns:repeat(2,1fr);}
  .unified-preview-row{grid-template-columns:1fr;}
}
@media(max-width:620px){
  .unified-brand-grid,
  .unified-brand-options{grid-template-columns:1fr;}
}


/* =========================================================
   DigiSign.click V2.9.6 — Realtime Exact Preview
   Admin iframe preview can now use local unsaved brand settings in real time.
   ========================================================= */
.exact-public-preview-toolbar span::after{
  content:" · live";
  color:#16a34a;
  font-weight:1000;
}
.admin-exact-preview-mode .pro-card{
  animation: adminPreviewFadeIn .18s ease-out both;
}
@keyframes adminPreviewFadeIn{
  from{opacity:.92;filter:saturate(.96)}
  to{opacity:1;filter:saturate(1)}
}


/* =========================================================
   DigiSign.click V2.9.7 — Simple Glass Control Panel
   Flat colors only, glass always active, optional background/button gradients.
   ========================================================= */
.simple-glass-panel{
  border:1px solid #cfe0f2;
  border-radius:28px;
  padding:18px;
  margin:18px 0;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 22px 60px rgba(15,39,68,.08);
}
.simple-glass-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid #e2edf8;
}
.simple-glass-head b{
  display:block;
  color:#0f2744;
  font-size:1.2rem;
}
.simple-glass-head span{
  display:block;
  color:#64748b;
  font-weight:850;
  line-height:1.45;
  margin-top:3px;
}
.simple-glass-head em{
  font-style:normal;
  background:#eef6ff;
  border:1px solid #cfe0f2;
  color:#2563eb;
  border-radius:999px;
  padding:8px 12px;
  font-size:.72rem;
  font-weight:1000;
}
.simple-glass-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-top:16px;
}
.simple-glass-color{
  border:1px solid #d8e7f8;
  background:#fff;
  border-radius:18px;
  padding:12px;
  display:grid;
  gap:8px;
}
.simple-glass-color span,
.simple-glass-options label span,
.simple-glass-angle label{
  color:#0f2744;
  font-weight:1000;
}
.simple-glass-color input[type="color"]{
  width:100%;
  height:48px;
  border:1px solid #d5e4f5;
  border-radius:15px;
  padding:5px;
  cursor:pointer;
}
.simple-glass-color input[type="text"]{
  width:100%;
  border:1px solid #d5e4f5;
  border-radius:14px;
  padding:10px 11px;
  background:#f8fbff;
  color:#0f2744;
  font-weight:950;
  text-transform:uppercase;
}
.simple-glass-options{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:14px;
}
.simple-glass-options label{
  border:1px solid #d8e7f8;
  background:#fff;
  border-radius:18px;
  padding:12px;
  display:grid;
  gap:8px;
}
.simple-glass-options select{
  width:100%;
  border:1px solid #d5e4f5;
  border-radius:15px;
  padding:12px;
  background:#fff;
  font-weight:900;
}
.simple-glass-angle{
  margin-top:14px;
  border:1px solid #d8e7f8;
  background:#fff;
  border-radius:18px;
  padding:14px;
}
.simple-glass-angle label{
  display:flex!important;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px!important;
}
.simple-glass-angle strong{
  background:#2563eb;
  color:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-size:.78rem;
}
.simple-glass-angle input[type="range"]{
  width:100%;
  accent-color:#2563eb;
}
.simple-glass-angle div{
  display:flex;
  justify-content:space-between;
  color:#64748b;
  font-size:.76rem;
  font-weight:900;
}
.simple-glass-preview-row{
  display:grid;
  grid-template-columns:260px 220px 1fr;
  gap:14px;
  margin-top:16px;
  align-items:center;
}
.simple-glass-mini{
  min-height:170px;
  border-radius:26px;
  padding:20px;
  color:var(--sg-text,#0f172a);
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb,var(--sg-accent,#06b6d4) 28%, transparent) 44%, rgba(255,255,255,.42) 55%, transparent 76%),
    radial-gradient(circle at 58% 42%, color-mix(in srgb,var(--sg-accent,#06b6d4) 26%, transparent), transparent 35%),
    linear-gradient(180deg,var(--sg-bg,#f8fafc),color-mix(in srgb,var(--sg-bg,#f8fafc) 84%, #000 16%));
  border:1px solid rgba(15,39,68,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 18px 42px rgba(15,39,68,.10);
  display:grid;
  align-content:start;
  gap:12px;
}
.sg-card-top{
  height:7px;
  width:72px;
  border-radius:99px;
  background:rgba(255,255,255,.5);
}
.sg-title{
  font-weight:1000;
  font-size:1.25rem;
}
.sg-line{
  height:12px;
  width:70%;
  border-radius:999px;
  background:rgba(255,255,255,.45);
}
.sg-button{
  margin-top:10px;
  min-height:48px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:var(--sg-btn-text,#fff);
  font-weight:1000;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--sg-btn,#2563eb) 70%, #fff 30%),var(--sg-btn,#2563eb),color-mix(in srgb,var(--sg-btn,#2563eb) 72%, #000 28%));
  box-shadow:0 16px 32px color-mix(in srgb,var(--sg-btn,#2563eb) 30%, transparent);
}
.simple-glass-actions{
  display:grid;
  gap:9px;
}
.simple-glass-actions .btn{
  width:100%;
}
.simple-glass-actions .btn.primary{
  background:linear-gradient(135deg,#2563eb,#2ea3f2);
  color:#fff;
  border:0;
}
.simple-glass-note{
  border:1px dashed #b7cff0;
  background:#f8fbff;
  color:#64748b;
  border-radius:18px;
  padding:14px;
  line-height:1.45;
  font-weight:850;
}
.simple-glass-note b{
  color:#0f2744;
}

/* Hide old scroll-heavy tools from normal flow. They stay in DOM for compatibility. */
.legacy-brand-tool-hidden,
#advancedBrandToolsWrap,
#unifiedBrandComposer,
.brand-reset-panel,
.brand-package-library,
.color-studio-pro,
.brand-color-grid,
#buttonControlSystem,
#qrStyleStudio{
  display:none!important;
}

/* Public card glass polish driven by existing CSS vars */
.pro-contact-row,
.public-primary-actions .pro-primary-action,
.pro-action-row .pro-action-btn{
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--pro-row-bg) 74%, #fff 26%), var(--pro-row-bg), color-mix(in srgb,var(--pro-row-bg) 78%, #000 22%))!important;
  color:var(--pro-row-text)!important;
  box-shadow:0 14px 32px var(--pro-row-glow)!important;
}
.public-primary-actions .pro-primary-action,
.pro-action-row .pro-action-btn{
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--pro-main-button-bg) 72%, #fff 28%), var(--pro-main-button-bg), color-mix(in srgb,var(--pro-main-button-bg) 76%, #000 24%))!important;
  color:var(--pro-main-button-text)!important;
}
.pro-primary-action.ghost,
.pro-action-btn.ghost{
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--pro-ghost-button-bg) 72%, #fff 28%), var(--pro-ghost-button-bg), color-mix(in srgb,var(--pro-ghost-button-bg) 76%, #000 24%))!important;
  color:var(--pro-ghost-button-text)!important;
}
@media(max-width:1100px){
  .simple-glass-grid{grid-template-columns:repeat(2,1fr);}
  .simple-glass-preview-row{grid-template-columns:1fr;}
}
@media(max-width:620px){
  .simple-glass-grid,
  .simple-glass-options{grid-template-columns:1fr;}
}


/* =========================================================
   DigiSign.click V2.9.8 — Complete Live Preview + Simple QR Control
   Exact card preview expands fully; no nested scroll inside preview.
   ========================================================= */
.exact-public-card-iframe{
  height:1480px;
  min-height:1100px;
  overflow:hidden!important;
  scrollbar-width:none!important;
}
.exact-public-card-iframe::-webkit-scrollbar{
  display:none!important;
}
.exact-public-preview-shell{
  overflow:visible!important;
}
.studio-preview-card,
.live-brand-preview-mount{
  overflow:visible!important;
}
.studio-preview-card .live-brand-preview-mount:has(.exact-public-card-iframe){
  min-height:1500px!important;
}
.exact-public-preview-note{
  margin-top:8px!important;
}

/* Simple QR control stays visible because QR control is necessary. */
.simple-qr-panel{
  margin-top:16px;
  border:1px solid #cfe0f2;
  border-radius:24px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  padding:16px;
  display:grid;
  grid-template-columns:1fr 1.35fr 210px;
  gap:14px;
  align-items:center;
}
.simple-qr-copy b{
  display:block;
  color:#0f2744;
  font-size:1rem;
}
.simple-qr-copy span{
  display:block;
  margin-top:4px;
  color:#64748b;
  font-size:.84rem;
  font-weight:850;
  line-height:1.4;
}
.simple-qr-controls{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.simple-qr-controls label{
  display:grid;
  gap:7px;
  margin:0!important;
}
.simple-qr-controls span{
  color:#0f2744;
  font-weight:1000;
  font-size:.82rem;
}
.simple-qr-controls select{
  width:100%;
  border:1px solid #d5e4f5;
  border-radius:14px;
  background:#fff;
  padding:11px 10px;
  font-weight:900;
}
.simple-qr-preview-wrap{
  border:1px solid #d8e7f8;
  background:#fff;
  border-radius:22px;
  padding:12px;
  display:grid;
  place-items:center;
  box-shadow:0 16px 34px rgba(15,39,68,.08);
}
.simple-qr-preview{
  width:160px;
  height:160px;
  display:grid;
  place-items:center;
  border-radius:18px;
  overflow:hidden;
}
.simple-qr-preview svg,
.simple-qr-preview canvas,
.simple-qr-preview img{
  width:160px!important;
  height:160px!important;
  display:block!important;
  object-fit:contain!important;
}
.simple-qr-preview-wrap small{
  margin-top:8px;
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border:1px solid #e2edf8;
  border-radius:999px;
  padding:6px 9px;
  color:#0f2744;
  font-size:.66rem;
  font-weight:1000;
  text-transform:capitalize;
  background:#f8fbff;
}

/* Reduce duplicated color engines on the normal workflow. */
.brand-settings-card > .visual-mode-panel,
.brand-settings-card > .brand-mode-panel,
.brand-settings-card > .brand-visual-panel,
.brand-settings-card .legacy-brand-tool-hidden,
.brand-settings-card #advancedBrandToolsWrap,
.brand-settings-card #unifiedBrandComposer,
.brand-settings-card .brand-reset-panel,
.brand-settings-card .brand-package-library,
.brand-settings-card .color-studio-pro,
.brand-settings-card .brand-color-grid,
.brand-settings-card #buttonControlSystem,
.brand-settings-card #qrStyleStudio{
  display:none!important;
}
@media(max-width:1180px){
  .simple-qr-panel{
    grid-template-columns:1fr;
  }
  .simple-qr-controls{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:560px){
  .simple-qr-controls{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   DigiSign.click V2.9.9 — Button Color Real Apply Fix
   In simple glass mode, the Button color controls all public buttons/rows.
   ========================================================= */
body.admin-exact-preview-mode .pro-card,
body .pro-card{
  --pro-button-glass-base: var(--pro-main-button-bg, var(--pro-button-bg, #2563eb));
  --pro-button-glass-text: var(--pro-main-button-text, var(--pro-button-text, #ffffff));
}

/* Contact rows: use button color, not old black preset */
.pro-card .pro-contact-row,
.pro-card a.pro-contact-row,
.pro-card .public-contact-row,
.pro-card .contact-row{
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--pro-row-bg, var(--pro-button-glass-base)) 72%, #ffffff 28%),
      var(--pro-row-bg, var(--pro-button-glass-base)),
      color-mix(in srgb,var(--pro-row-bg, var(--pro-button-glass-base)) 76%, #000000 24%)
    )!important;
  color:var(--pro-row-text, var(--pro-button-glass-text))!important;
  border-color:color-mix(in srgb,var(--pro-row-bg, var(--pro-button-glass-base)) 76%, #000000 24%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 14px 34px color-mix(in srgb,var(--pro-row-bg, var(--pro-button-glass-base)) 30%, transparent)!important;
}
.pro-card .pro-contact-row *,
.pro-card a.pro-contact-row *,
.pro-card .public-contact-row *,
.pro-card .contact-row *{
  color:var(--pro-row-text, var(--pro-button-glass-text))!important;
}

/* Top/quick buttons and save/share buttons */
.pro-card .pro-primary-action,
.pro-card .public-primary-actions .pro-primary-action,
.pro-card .pro-action-btn,
.pro-card .pro-action-row .pro-action-btn,
.pro-card .save-contact-btn,
.pro-card .share-card-btn,
.pro-card button[data-action],
.pro-card a[data-action]{
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--pro-main-button-bg, var(--pro-button-glass-base)) 72%, #ffffff 28%),
      var(--pro-main-button-bg, var(--pro-button-glass-base)),
      color-mix(in srgb,var(--pro-main-button-bg, var(--pro-button-glass-base)) 76%, #000000 24%)
    )!important;
  color:var(--pro-main-button-text, var(--pro-button-glass-text))!important;
  border-color:color-mix(in srgb,var(--pro-main-button-bg, var(--pro-button-glass-base)) 78%, #000000 22%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 14px 34px color-mix(in srgb,var(--pro-main-button-bg, var(--pro-button-glass-base)) 30%, transparent)!important;
}
.pro-card .pro-primary-action *,
.pro-card .public-primary-actions .pro-primary-action *,
.pro-card .pro-action-btn *,
.pro-card .pro-action-row .pro-action-btn *,
.pro-card .save-contact-btn *,
.pro-card .share-card-btn *,
.pro-card button[data-action] *,
.pro-card a[data-action] *{
  color:var(--pro-main-button-text, var(--pro-button-glass-text))!important;
}

/* Ghost buttons should still follow the chosen button family, just softer */
.pro-card .pro-primary-action.ghost,
.pro-card .pro-action-btn.ghost{
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--pro-ghost-button-bg, var(--pro-main-button-bg)) 74%, #ffffff 26%),
      var(--pro-ghost-button-bg, var(--pro-main-button-bg)),
      color-mix(in srgb,var(--pro-ghost-button-bg, var(--pro-main-button-bg)) 76%, #000000 24%)
    )!important;
  color:var(--pro-ghost-button-text, var(--pro-main-button-text))!important;
}

/* Icon bubbles can keep accent, but text/arrow stays button text */
.pro-card .pro-contact-icon,
.pro-card .contact-icon{
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--pro-icon-bg, var(--pro-secondary)) 76%, #ffffff 24%),
      var(--pro-icon-bg, var(--pro-secondary))
    )!important;
  color:var(--pro-icon-color, var(--pro-row-text, #fff))!important;
}
.pro-card .pro-contact-arrow,
.pro-card .contact-arrow{
  color:var(--pro-row-text, var(--pro-button-glass-text))!important;
  opacity:.95!important;
}


/* =========================================================
   DigiSign.click V2.10.0 — FINAL Button Color Authority Fix
   Real public classes: .pro-contact, .pro-save, .pro-share, .pro-primary-action.
   ========================================================= */

/* The card exposes these variables inline from dsCardTheme. Force them to drive real classes. */
.pro-card{
  --digisign-final-button-bg: var(--pro-main-button-bg, var(--pro-row-bg, #2563eb));
  --digisign-final-button-text: var(--pro-main-button-text, var(--pro-row-text, #ffffff));
  --digisign-final-row-bg: var(--pro-row-bg, var(--digisign-final-button-bg));
  --digisign-final-row-text: var(--pro-row-text, var(--digisign-final-button-text));
}

/* Contact rows */
.pro-card .pro-contact,
.pro-card a.pro-contact,
.pro-card .pro-links .pro-contact,
.pro-card .public-links .pro-contact{
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--digisign-final-row-bg) 72%, #ffffff 28%),
      var(--digisign-final-row-bg),
      color-mix(in srgb, var(--digisign-final-row-bg) 78%, #000000 22%)
    )!important;
  color:var(--digisign-final-row-text)!important;
  border-color:color-mix(in srgb, var(--digisign-final-row-bg) 72%, #000000 28%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 14px 34px color-mix(in srgb, var(--digisign-final-row-bg) 32%, transparent)!important;
}

.pro-card .pro-contact *,
.pro-card a.pro-contact *,
.pro-card .contact-label,
.pro-card .contact-value{
  color:var(--digisign-final-row-text)!important;
}

/* Save / Share buttons */
.pro-card .save-row .btn,
.pro-card .save-row .pro-save,
.pro-card .save-row .pro-share,
.pro-card #saveContact,
.pro-card #shareCard,
.pro-card .pro-save,
.pro-card .pro-share{
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--digisign-final-button-bg) 72%, #ffffff 28%),
      var(--digisign-final-button-bg),
      color-mix(in srgb, var(--digisign-final-button-bg) 78%, #000000 22%)
    )!important;
  color:var(--digisign-final-button-text)!important;
  border-color:color-mix(in srgb, var(--digisign-final-button-bg) 72%, #000000 28%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 14px 34px color-mix(in srgb, var(--digisign-final-button-bg) 32%, transparent)!important;
}

.pro-card .save-row .btn *,
.pro-card .save-row .pro-save *,
.pro-card .save-row .pro-share *,
.pro-card #saveContact *,
.pro-card #shareCard *{
  color:var(--digisign-final-button-text)!important;
}

/* Quick/top buttons if enabled later */
.pro-card .pro-primary-action,
.pro-card a.pro-primary-action,
.pro-card .public-primary-actions .pro-primary-action{
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--digisign-final-button-bg) 72%, #ffffff 28%),
      var(--digisign-final-button-bg),
      color-mix(in srgb, var(--digisign-final-button-bg) 78%, #000000 22%)
    )!important;
  color:var(--digisign-final-button-text)!important;
  border-color:color-mix(in srgb, var(--digisign-final-button-bg) 72%, #000000 28%)!important;
}
.pro-card .pro-primary-action *,
.pro-card a.pro-primary-action *{
  color:var(--digisign-final-button-text)!important;
}

/* Icons stay accent, but readable */
.pro-card .contact-icon,
.pro-card .pro-contact .contact-icon{
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--pro-icon-bg, var(--pro-secondary, #06b6d4)) 76%, #ffffff 24%),
      var(--pro-icon-bg, var(--pro-secondary, #06b6d4))
    )!important;
  color:var(--pro-icon-text, var(--digisign-final-row-text))!important;
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)){
  .pro-card .pro-contact,
  .pro-card .save-row .btn,
  .pro-card .pro-primary-action{
    background:var(--digisign-final-button-bg)!important;
    color:var(--digisign-final-button-text)!important;
  }
}


/* =========================================================
   DigiSign.click V2.10.1 — Separated Color Sets
   Fondo, Botones, Textos and Texto Botones are isolated.
   No gradient variable is used inside color-mix().
   ========================================================= */

.pro-card{
  --zone-bg: var(--pro-bg-solid, #ffffff);
  --zone-surface: var(--pro-surface-solid, #ffffff);
  --zone-button: var(--pro-button-solid, #2563eb);
  --zone-row: var(--pro-row-solid, var(--zone-button));
  --zone-button-text: var(--pro-button-text-solid, #ffffff);
  --zone-interface-text: var(--pro-interface-text, #111827);
  --zone-muted-text: var(--pro-muted-interface, #64748b);
  --zone-accent: var(--pro-accent-solid, #2563eb);
}

/* Interface text only */
.pro-card .pro-name,
.pro-card h1,
.pro-card h2,
.pro-card .pro-qr-copy strong{
  color:var(--zone-interface-text)!important;
}
.pro-card .pro-title,
.pro-card .pro-company,
.pro-card .pro-card-ribbon,
.pro-card .pro-card-ribbon span,
.pro-card .pro-card-ribbon b,
.pro-card .small,
.pro-card .pro-footer,
.pro-card .pro-qr-copy span,
.pro-card .pro-qr-eyebrow{
  color:var(--zone-muted-text)!important;
}

/* Contact rows: button zone only */
.pro-card .pro-contact,
.pro-card a.pro-contact,
.pro-card .pro-links .pro-contact,
.pro-card .public-links .pro-contact{
  background:var(--pro-row-bg)!important;
  background-image:var(--pro-row-bg)!important;
  color:var(--zone-button-text)!important;
  border-color:color-mix(in srgb, var(--zone-row) 72%, #000000 28%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 14px 34px color-mix(in srgb, var(--zone-row) 32%, transparent)!important;
  opacity:1!important;
}
.pro-card .pro-contact *,
.pro-card a.pro-contact *,
.pro-card .contact-label,
.pro-card .contact-value,
.pro-card .contact-arrow{
  color:var(--zone-button-text)!important;
  opacity:1!important;
}

/* Save / Share / Quick buttons: button zone only */
.pro-card .save-row .btn,
.pro-card .save-row .pro-save,
.pro-card .save-row .pro-share,
.pro-card #saveContact,
.pro-card #shareCard,
.pro-card .pro-save,
.pro-card .pro-share,
.pro-card .pro-primary-action,
.pro-card a.pro-primary-action,
.pro-card .public-primary-actions .pro-primary-action{
  background:var(--pro-main-button-bg)!important;
  background-image:var(--pro-main-button-bg)!important;
  color:var(--zone-button-text)!important;
  border-color:color-mix(in srgb, var(--zone-button) 72%, #000000 28%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 14px 34px color-mix(in srgb, var(--zone-button) 32%, transparent)!important;
  opacity:1!important;
}
.pro-card .save-row .btn *,
.pro-card .save-row .pro-save *,
.pro-card .save-row .pro-share *,
.pro-card #saveContact *,
.pro-card #shareCard *,
.pro-card .pro-primary-action *,
.pro-card a.pro-primary-action *{
  color:var(--zone-button-text)!important;
  opacity:1!important;
}

/* Icons: accent zone only */
.pro-card .contact-icon,
.pro-card .pro-contact .contact-icon{
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--zone-accent) 74%, #ffffff 26%),
      var(--zone-accent),
      color-mix(in srgb, var(--zone-accent) 78%, #000000 22%)
    )!important;
  color:var(--zone-button-text)!important;
  border-color:color-mix(in srgb, var(--zone-accent) 70%, #000000 30%)!important;
}

/* QR card uses background/text zones, never button zone */
.pro-card .pro-qr-card,
.pro-card .pro-section.pro-qr-card{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--zone-surface) 92%, #ffffff 8%),
      var(--zone-surface)
    )!important;
  color:var(--zone-interface-text)!important;
  border:1px solid color-mix(in srgb, var(--zone-surface) 72%, #000000 28%)!important;
  box-shadow:0 18px 44px rgba(15,23,42,.10)!important;
}
.pro-card .pro-qr-card *,
.pro-card .pro-qr-card .pro-qr-copy *,
.pro-card .pro-qr-domain{
  color:var(--zone-interface-text)!important;
}
.pro-card .pro-qr-eyebrow{
  color:var(--zone-muted-text)!important;
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)){
  .pro-card .pro-contact,
  .pro-card .save-row .btn,
  .pro-card .pro-primary-action{
    background:var(--zone-button)!important;
    color:var(--zone-button-text)!important;
  }
  .pro-card .pro-qr-card{
    background:var(--zone-surface)!important;
    color:var(--zone-interface-text)!important;
  }
}


/* =========================================================
   DigiSign.click V2.10.2 — Normal State Button Color Fix
   Fix: selected button color was appearing only on hover.
   This layer controls normal state, hover state and visited/focus states.
   ========================================================= */

.pro-card{
  --normal-button-bg: var(--final-button-bg, var(--sg-button-base-color, var(--pro-button-solid, #2563eb)));
  --normal-row-bg: var(--final-row-bg, var(--normal-button-bg));
  --normal-button-text: var(--final-button-text, var(--pro-button-text-solid, #ffffff));
  --normal-icon-bg: var(--final-icon-bg, var(--pro-accent-solid, #2563eb));
  --normal-button-glass:
    linear-gradient(135deg,
      color-mix(in srgb, var(--normal-button-bg) 70%, #ffffff 30%) 0%,
      var(--normal-button-bg) 48%,
      color-mix(in srgb, var(--normal-button-bg) 78%, #000000 22%) 100%);
  --normal-row-glass:
    linear-gradient(135deg,
      color-mix(in srgb, var(--normal-row-bg) 70%, #ffffff 30%) 0%,
      var(--normal-row-bg) 48%,
      color-mix(in srgb, var(--normal-row-bg) 78%, #000000 22%) 100%);
}

/* CONTACT ROWS — NORMAL STATE AUTHORITY */
body .pro-card .pro-links > .pro-contact,
body .pro-card .public-links > .pro-contact,
body .pro-card a.pro-contact,
body .pro-card .premium-contact-row,
body .pro-card a.premium-contact-row,
body .pro-card .pro-contact:not(:hover),
body .pro-card .premium-contact-row:not(:hover),
body .pro-card .pro-contact:link,
body .pro-card .pro-contact:visited{
  background:var(--normal-row-glass)!important;
  background-image:var(--normal-row-glass)!important;
  color:var(--normal-button-text)!important;
  border:1px solid color-mix(in srgb, var(--normal-row-bg) 72%, #000000 28%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 14px 34px color-mix(in srgb, var(--normal-row-bg) 30%, transparent)!important;
  opacity:1!important;
  filter:none!important;
}

/* CONTACT ROWS — HOVER SAME FAMILY, JUST BRIGHTER */
body .pro-card .pro-contact:hover,
body .pro-card a.pro-contact:hover,
body .pro-card .premium-contact-row:hover{
  background:var(--normal-row-glass)!important;
  background-image:var(--normal-row-glass)!important;
  color:var(--normal-button-text)!important;
  filter:brightness(1.045)!important;
  transform:translateY(-1px);
}

/* CONTACT TEXT */
body .pro-card .pro-contact *,
body .pro-card a.pro-contact *,
body .pro-card .premium-contact-row *,
body .pro-card .contact-label,
body .pro-card .contact-value,
body .pro-card .contact-arrow{
  color:var(--normal-button-text)!important;
  opacity:1!important;
  text-shadow:none!important;
}

/* SAVE / SHARE — NORMAL STATE AUTHORITY */
body .pro-card .save-row .btn,
body .pro-card .save-row button,
body .pro-card .save-row a,
body .pro-card .pro-save,
body .pro-card .pro-share,
body .pro-card #saveContact,
body .pro-card #shareCard,
body .pro-card .pro-save:not(:hover),
body .pro-card .pro-share:not(:hover){
  background:var(--normal-button-glass)!important;
  background-image:var(--normal-button-glass)!important;
  color:var(--normal-button-text)!important;
  border:1px solid color-mix(in srgb, var(--normal-button-bg) 72%, #000000 28%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 14px 34px color-mix(in srgb, var(--normal-button-bg) 30%, transparent)!important;
  opacity:1!important;
  filter:none!important;
}

/* SAVE / SHARE — HOVER */
body .pro-card .save-row .btn:hover,
body .pro-card .save-row button:hover,
body .pro-card .save-row a:hover,
body .pro-card .pro-save:hover,
body .pro-card .pro-share:hover,
body .pro-card #saveContact:hover,
body .pro-card #shareCard:hover{
  background:var(--normal-button-glass)!important;
  background-image:var(--normal-button-glass)!important;
  color:var(--normal-button-text)!important;
  filter:brightness(1.045)!important;
}

/* SAVE / SHARE TEXT */
body .pro-card .save-row .btn *,
body .pro-card .save-row button *,
body .pro-card .save-row a *,
body .pro-card .pro-save *,
body .pro-card .pro-share *,
body .pro-card #saveContact *,
body .pro-card #shareCard *{
  color:var(--normal-button-text)!important;
  opacity:1!important;
}

/* QUICK TOP BUTTONS IF ENABLED */
body .pro-card .pro-primary-action,
body .pro-card a.pro-primary-action,
body .pro-card .public-primary-actions .pro-primary-action,
body .pro-card .pro-primary-action:not(:hover){
  background:var(--normal-button-glass)!important;
  background-image:var(--normal-button-glass)!important;
  color:var(--normal-button-text)!important;
  border-color:color-mix(in srgb, var(--normal-button-bg) 72%, #000000 28%)!important;
}
body .pro-card .pro-primary-action *,
body .pro-card a.pro-primary-action *{
  color:var(--normal-button-text)!important;
}

/* ICON BUBBLES — ACCENT SET */
body .pro-card .contact-icon,
body .pro-card .pro-contact .contact-icon,
body .pro-card .premium-contact-row .contact-icon{
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--normal-icon-bg) 74%, #ffffff 26%),
      var(--normal-icon-bg),
      color-mix(in srgb, var(--normal-icon-bg) 78%, #000000 22%)
    )!important;
  color:var(--normal-button-text)!important;
  border-color:color-mix(in srgb, var(--normal-icon-bg) 70%, #000000 30%)!important;
}

/* Browser fallback */
@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)){
  body .pro-card .pro-contact,
  body .pro-card .premium-contact-row,
  body .pro-card .save-row .btn,
  body .pro-card .pro-save,
  body .pro-card .pro-share,
  body .pro-card .pro-primary-action{
    background:var(--normal-button-bg)!important;
    background-image:none!important;
    color:var(--normal-button-text)!important;
  }
}


/* =========================================================
   DigiSign.click V2.10.3 — Serious Glass Background Set
   Background gets its own base + gradient 1 + gradient 2.
   Buttons stay premium glass and do not borrow background gradients.
   ========================================================= */

.simple-glass-grid{
  grid-template-columns:repeat(6,1fr)!important;
}
.simple-glass-panel .simple-glass-color span{
  min-height:2.1em;
  display:flex;
  align-items:end;
}
.simple-glass-mini{
  --sg-bg1: var(--sg-g1, #eaf2ff);
  --sg-bg2: var(--sg-g2, #ffffff);
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb,var(--sg-bg1) 18%, transparent) 38%, rgba(255,255,255,.28) 52%, color-mix(in srgb,var(--sg-bg2) 14%, transparent) 72%, transparent 100%),
    radial-gradient(circle at 58% 42%, color-mix(in srgb,var(--sg-bg1) 18%, transparent), transparent 34%),
    linear-gradient(180deg,var(--sg-bg,#f8fafc),color-mix(in srgb,var(--sg-bg,#f8fafc) 90%, #000 10%))!important;
}
.simple-glass-mini .sg-button{
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--sg-btn,#2563eb) 70%, #ffffff 30%),
      var(--sg-btn,#2563eb),
      color-mix(in srgb,var(--sg-btn,#2563eb) 78%, #000000 22%)
    )!important;
}

/* Public background is serious glass: subtle, corporate, not loud. */
.pro-card{
  --zone-bg-gradient-one: var(--pro-bg-gradient-one, #eaf2ff);
  --zone-bg-gradient-two: var(--pro-bg-gradient-two, #ffffff);
}

/* Let the card background keep the public JS background, but soften overlays with background-only colors. */
.pro-card::before{
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb,var(--zone-bg-gradient-one) 16%, transparent) 38%, rgba(255,255,255,.22) 52%, color-mix(in srgb,var(--zone-bg-gradient-two) 12%, transparent) 74%, transparent 100%)!important;
  opacity:.95!important;
}

/* Buttons remain their own set. No background gradient colors on buttons. */
body .pro-card .pro-contact,
body .pro-card .premium-contact-row,
body .pro-card .save-row .btn,
body .pro-card .pro-save,
body .pro-card .pro-share,
body .pro-card .pro-primary-action{
  background-image:var(--normal-button-glass)!important;
}

@media(max-width:1280px){
  .simple-glass-grid{grid-template-columns:repeat(3,1fr)!important;}
}
@media(max-width:760px){
  .simple-glass-grid{grid-template-columns:repeat(2,1fr)!important;}
}
@media(max-width:520px){
  .simple-glass-grid{grid-template-columns:1fr!important;}
}


/* =========================================================
   DigiSign.click V2.11.0 — Flat Glass Engine
   Only 3 flat color sets: background, buttons and text.
   ========================================================= */
.flat-glass-panel{
  border:1px solid #cfe0f2;
  border-radius:28px;
  padding:18px;
  margin:18px 0;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 22px 60px rgba(15,39,68,.08);
}
.flat-glass-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid #e2edf8;
}
.flat-glass-head b{
  display:block;
  color:#0f2744;
  font-size:1.22rem;
}
.flat-glass-head span{
  display:block;
  color:#64748b;
  font-weight:850;
  line-height:1.45;
  margin-top:3px;
}
.flat-glass-head em{
  font-style:normal;
  background:#eef6ff;
  border:1px solid #cfe0f2;
  color:#2563eb;
  border-radius:999px;
  padding:8px 12px;
  font-size:.72rem;
  font-weight:1000;
}
.flat-glass-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:16px;
}
.flat-glass-color{
  border:1px solid #d8e7f8;
  background:#fff;
  border-radius:20px;
  padding:14px;
  display:grid;
  gap:9px;
}
.flat-glass-color span{
  color:#0f2744;
  font-weight:1000;
}
.flat-glass-color input[type="color"]{
  width:100%;
  height:56px;
  border:1px solid #d5e4f5;
  border-radius:16px;
  padding:6px;
  cursor:pointer;
}
.flat-glass-color input[type="text"]{
  width:100%;
  border:1px solid #d5e4f5;
  border-radius:15px;
  padding:11px 12px;
  background:#f8fbff;
  color:#0f2744;
  font-weight:1000;
  text-transform:uppercase;
}
.flat-glass-preview-row{
  display:grid;
  grid-template-columns:260px 220px 1fr;
  gap:14px;
  margin-top:16px;
  align-items:center;
}
.flat-glass-mini{
  min-height:185px;
  border-radius:26px;
  padding:20px;
  color:var(--fg-text,#111827);
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%),
    linear-gradient(180deg, var(--fg-bg,#ffffff), color-mix(in srgb,var(--fg-bg,#ffffff) 90%, #000 10%));
  border:1px solid rgba(15,39,68,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 18px 42px rgba(15,39,68,.10);
  display:grid;
  align-content:start;
  gap:12px;
}
.fg-logo-dot{
  width:56px;
  height:10px;
  border-radius:99px;
  background:rgba(255,255,255,.55);
}
.flat-glass-mini b{
  font-size:1.25rem;
  line-height:1;
}
.flat-glass-mini span{
  font-weight:850;
  opacity:.76;
}
.fg-button{
  margin-top:8px;
  min-height:50px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:var(--fg-text,#111827);
  font-weight:1000;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--fg-button,#2563eb) 70%, #fff 30%),
      var(--fg-button,#2563eb),
      color-mix(in srgb,var(--fg-button,#2563eb) 78%, #000 22%)
    );
  box-shadow:0 16px 32px color-mix(in srgb,var(--fg-button,#2563eb) 30%, transparent);
}
.flat-glass-actions{
  display:grid;
  gap:10px;
}
.flat-glass-actions .btn{
  width:100%;
}
.flat-glass-actions .btn.primary{
  background:linear-gradient(135deg,#2563eb,#2ea3f2);
  color:#fff;
  border:0;
}
.flat-glass-note{
  border:1px dashed #b7cff0;
  background:#f8fbff;
  color:#64748b;
  border-radius:18px;
  padding:14px;
  line-height:1.45;
  font-weight:850;
}
.flat-glass-note b{
  color:#0f2744;
}

/* Hide previous color-control engines from the normal workflow. */
.simple-glass-panel,
.unified-brand-composer,
.brand-reset-panel,
.brand-package-library,
.color-studio-pro,
.brand-color-grid,
#buttonControlSystem,
#qrStyleStudio,
#simpleQrPanel,
#advancedBrandToolsWrap,
.brand-settings-card > .visual-mode-panel,
.brand-settings-card > .brand-mode-panel,
.brand-settings-card > .brand-visual-panel{
  display:none!important;
}

/* Public card flat glass: serious, clean, no manual gradients. */
.pro-card{
  --flat-bg: var(--pro-bg-solid, #ffffff);
  --flat-button: var(--final-button-bg, var(--pro-button-solid, #2563eb));
  --flat-text: var(--final-button-text, var(--pro-interface-text, #111827));
  --flat-glass-bg:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.24) 50%, transparent 100%),
    linear-gradient(180deg, var(--flat-bg), color-mix(in srgb,var(--flat-bg) 92%, #000 8%));
  --normal-button-glass:
    linear-gradient(135deg,
      color-mix(in srgb, var(--flat-button) 70%, #ffffff 30%) 0%,
      var(--flat-button) 50%,
      color-mix(in srgb, var(--flat-button) 78%, #000000 22%) 100%)!important;
}
.pro-card::before{
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%)!important;
  opacity:.85!important;
}
/* QR panel also uses background/text set only. */
.pro-card .pro-qr-card,
.pro-card .pro-section.pro-qr-card{
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--flat-bg) 92%, #fff 8%), var(--flat-bg))!important;
  color:var(--flat-text)!important;
}
/* Button family stays only from button color. */
body .pro-card .pro-contact,
body .pro-card .premium-contact-row,
body .pro-card .save-row .btn,
body .pro-card .pro-save,
body .pro-card .pro-share,
body .pro-card .pro-primary-action{
  background-image:var(--normal-button-glass)!important;
  color:var(--flat-text)!important;
}
body .pro-card .pro-contact *,
body .pro-card .premium-contact-row *,
body .pro-card .save-row .btn *,
body .pro-card .pro-save *,
body .pro-card .pro-share *,
body .pro-card .pro-primary-action *{
  color:var(--flat-text)!important;
}
@media(max-width:1100px){
  .flat-glass-grid{grid-template-columns:1fr;}
  .flat-glass-preview-row{grid-template-columns:1fr;}
}


/* =========================================================
   DigiSign.click V2.11.1 — True Flat Background Fix
   Fix: card background was still borrowing button/primary color from old gradient engine.
   ========================================================= */

/* Hide old visual/gradient selector in normal workflow. */
.studio-brand-card > .brand-mode-panel,
.studio-brand-card > .legacy-flat-engine-hidden,
.brand-settings-pro-card > .brand-mode-panel,
.brand-settings-pro-card > .legacy-flat-engine-hidden,
.legacy-flat-engine-hidden{
  display:none!important;
}

/* Flat Glass authority: the card background can only use Color de fondo. */
.pro-card{
  --true-flat-bg: var(--flat-bg-real, var(--pro-bg-solid, var(--flat-bg, #ffffff)));
  --true-flat-text: var(--flat-text-real, var(--pro-interface-text, var(--flat-text, #111827)));
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.20) 50%, transparent 100%),
    linear-gradient(180deg, var(--true-flat-bg), color-mix(in srgb, var(--true-flat-bg) 94%, #000 6%))!important;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.20) 50%, transparent 100%),
    linear-gradient(180deg, var(--true-flat-bg), color-mix(in srgb, var(--true-flat-bg) 94%, #000 6%))!important;
  color:var(--true-flat-text)!important;
}

/* Remove any old colored pseudo overlays from presets. */
.pro-card::before,
.pro-card::after{
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%)!important;
  opacity:.35!important;
  pointer-events:none!important;
}

/* Header/ribbon should use background glass only, not button color. */
.pro-card .pro-top,
.pro-card .pro-card-ribbon,
.pro-card .public-card-header,
.pro-card .card-header{
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.08))!important;
  color:var(--true-flat-text)!important;
  border-color:rgba(255,255,255,.25)!important;
}

/* QR card background also uses only fondo. */
.pro-card .pro-qr-card,
.pro-card .pro-section.pro-qr-card{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--true-flat-bg) 88%, #ffffff 12%), var(--true-flat-bg))!important;
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--true-flat-bg) 88%, #ffffff 12%), var(--true-flat-bg))!important;
  color:var(--true-flat-text)!important;
}

/* Keep buttons independent: only button color controls them. */
body .pro-card .pro-contact,
body .pro-card .premium-contact-row,
body .pro-card .save-row .btn,
body .pro-card .pro-save,
body .pro-card .pro-share,
body .pro-card .pro-primary-action{
  background:var(--normal-button-glass)!important;
  background-image:var(--normal-button-glass)!important;
}

/* Browser fallback */
@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)){
  .pro-card{
    background:var(--true-flat-bg)!important;
    background-image:none!important;
  }
  .pro-card .pro-qr-card{
    background:var(--true-flat-bg)!important;
    background-image:none!important;
  }
}


/* =========================================================
   DigiSign.click V2.11.2 — Local Live Preview Fallback
   Preview is rendered locally in company.html, no iframe/card.php dependency.
   ========================================================= */
.exact-public-preview-shell,
.exact-public-card-iframe{
  display:none!important;
}

.lp-local-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border:1px solid #cfe0f2;
  background:#fff;
  border-radius:999px;
  padding:10px 12px 10px 18px;
  margin-bottom:14px;
  font-weight:1000;
  color:#64748b;
}
.lp-local-toolbar span{
  color:#16a34a;
}
.lp-local-card{
  width:min(560px,100%);
  margin:0 auto;
  border-radius:34px;
  overflow:hidden;
  color:var(--lp-text,#111827);
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.24) 50%, transparent 100%),
    linear-gradient(180deg, var(--lp-bg,#ffffff), color-mix(in srgb,var(--lp-bg,#ffffff) 92%, #000 8%));
  border:1px solid color-mix(in srgb,var(--lp-bg,#fff) 70%, #000 30%);
  box-shadow:0 28px 70px rgba(15,23,42,.14);
  padding:0 26px 24px;
}
.lp-local-ribbon{
  min-height:58px;
  margin:0 -26px 24px;
  padding:16px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:linear-gradient(90deg,rgba(255,255,255,.26),rgba(255,255,255,.10));
  border-bottom:1px solid rgba(255,255,255,.28);
  letter-spacing:.08em;
  font-size:.78rem;
}
.lp-local-hero{
  text-align:center;
  display:grid;
  justify-items:center;
  gap:6px;
}
.lp-local-logo{
  max-width:92px;
  max-height:92px;
  object-fit:contain;
  display:block;
}
.lp-local-avatar{
  width:86px;
  height:86px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:1000;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.5);
}
.lp-local-hero h2{
  margin:10px 0 0;
  font-size:2rem;
  line-height:1;
  color:var(--lp-text,#111827);
}
.lp-local-title,
.lp-local-company{
  margin:0;
  font-weight:1000;
  color:color-mix(in srgb,var(--lp-text,#111827) 68%, var(--lp-bg,#fff) 32%);
}
.lp-local-links{
  display:grid;
  gap:12px;
  margin-top:24px;
}
.lp-local-row{
  text-decoration:none;
  min-height:64px;
  border-radius:22px;
  display:grid;
  grid-template-columns:54px 1fr 28px;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  color:var(--lp-text,#111827);
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--lp-button,#2563eb) 70%, #ffffff 30%),
      var(--lp-button,#2563eb),
      color-mix(in srgb,var(--lp-button,#2563eb) 78%, #000000 22%)
    );
  border:1px solid color-mix(in srgb,var(--lp-button,#2563eb) 70%, #000 30%);
  box-shadow:0 14px 34px color-mix(in srgb,var(--lp-button,#2563eb) 30%, transparent);
}
.lp-local-icon{
  width:42px;
  height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.26);
  color:var(--lp-text,#111827);
  font-weight:1000;
}
.lp-local-info{
  display:grid;
  gap:2px;
  min-width:0;
}
.lp-local-info b,
.lp-local-info em,
.lp-local-arrow{
  color:var(--lp-text,#111827);
  font-style:normal;
  font-weight:1000;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lp-local-info em{
  opacity:.92;
}
.lp-local-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:18px;
}
.lp-local-actions button{
  min-height:54px;
  border-radius:20px;
  border:1px solid color-mix(in srgb,var(--lp-button,#2563eb) 70%, #000 30%);
  color:var(--lp-text,#111827);
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--lp-button,#2563eb) 70%, #ffffff 30%),
      var(--lp-button,#2563eb),
      color-mix(in srgb,var(--lp-button,#2563eb) 78%, #000000 22%)
    );
  font-weight:1000;
  box-shadow:0 14px 34px color-mix(in srgb,var(--lp-button,#2563eb) 25%, transparent);
}
.lp-local-qr-card{
  margin-top:22px;
  border-radius:28px;
  padding:20px;
  display:grid;
  justify-items:center;
  gap:8px;
  color:var(--lp-text,#111827);
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.72));
  border:1px solid rgba(15,23,42,.10);
}
.lp-local-qr-card small{
  border:1px solid #dbe6f3;
  border-radius:999px;
  padding:5px 10px;
  font-weight:1000;
  letter-spacing:.08em;
  font-size:.65rem;
}
.lp-local-qr-card b{
  font-size:1.18rem;
}
.lp-local-qr-card span{
  max-width:260px;
  text-align:center;
  font-weight:850;
  opacity:.8;
}
.lp-local-qr{
  width:210px;
  height:210px;
  display:grid;
  place-items:center;
  background:#fff;
  border-radius:24px;
  margin-top:10px;
  padding:10px;
  box-shadow:0 12px 28px rgba(15,23,42,.10);
}
.lp-local-qr svg,
.lp-local-qr canvas,
.lp-local-qr img{
  max-width:190px!important;
  max-height:190px!important;
}
.lp-local-qr-card em{
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border:1px solid #e2edf8;
  border-radius:999px;
  padding:7px 12px;
  font-style:normal;
  font-size:.72rem;
  font-weight:1000;
}
.lp-local-card footer{
  text-align:center;
  margin-top:18px;
  color:color-mix(in srgb,var(--lp-text,#111827) 70%, var(--lp-bg,#fff) 30%);
  font-weight:750;
  font-size:.8rem;
}
@media(max-width:620px){
  .lp-local-card{
    border-radius:24px;
    padding-left:16px;
    padding-right:16px;
  }
  .lp-local-ribbon{
    margin-left:-16px;
    margin-right:-16px;
  }
  .lp-local-actions{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   DigiSign.click V2.11.3 — Uniform Icon Glass Fix
   All contact icon bubbles now use the same premium glass as Website/Address.
   ========================================================= */

.pro-card{
  --uniform-icon-bg: var(--final-icon-bg, var(--normal-button-bg, var(--flat-button, var(--pro-button-solid, #2563eb))));
  --uniform-icon-text: var(--normal-button-text, var(--final-button-text, var(--pro-button-text-solid, #ffffff)));
  --uniform-icon-glass:
    linear-gradient(135deg,
      color-mix(in srgb, var(--uniform-icon-bg) 76%, #ffffff 24%) 0%,
      var(--uniform-icon-bg) 48%,
      color-mix(in srgb, var(--uniform-icon-bg) 80%, #000000 20%) 100%);
}

/* Real public card icon bubble classes */
body .pro-card .contact-icon,
body .pro-card .pro-contact .contact-icon,
body .pro-card .premium-contact-row .contact-icon,
body .pro-card .contact-row .contact-icon,
body .pro-card .public-contact-row .contact-icon,
body .pro-card .pro-contact-icon,
body .pro-card .contact-icon-wrap,
body .pro-card .icon-bubble,
body .pro-card .action-icon,
body .pro-card .row-icon{
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  background:var(--uniform-icon-glass)!important;
  background-image:var(--uniform-icon-glass)!important;
  color:var(--uniform-icon-text)!important;
  border:1px solid color-mix(in srgb, var(--uniform-icon-bg) 70%, #000000 30%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 10px 22px color-mix(in srgb, var(--uniform-icon-bg) 30%, transparent)!important;
  opacity:1!important;
  filter:none!important;
  overflow:hidden!important;
}

/* Make SVG/icon fonts inherit the same color */
body .pro-card .contact-icon *,
body .pro-card .pro-contact .contact-icon *,
body .pro-card .premium-contact-row .contact-icon *,
body .pro-card .pro-contact-icon *,
body .pro-card .contact-icon-wrap *,
body .pro-card .icon-bubble *,
body .pro-card .action-icon *,
body .pro-card .row-icon *,
body .pro-card .contact-icon svg,
body .pro-card .contact-icon i{
  color:var(--uniform-icon-text)!important;
  fill:currentColor!important;
  stroke:currentColor!important;
  opacity:1!important;
}

/* Remove pale/white old overlays specifically on first rows */
body .pro-card .pro-contact:nth-child(1) .contact-icon,
body .pro-card .pro-contact:nth-child(2) .contact-icon,
body .pro-card .pro-contact:nth-child(3) .contact-icon,
body .pro-card .pro-contact:nth-child(4) .contact-icon,
body .pro-card .pro-contact:nth-child(5) .contact-icon,
body .pro-card .pro-contact:nth-child(6) .contact-icon{
  background:var(--uniform-icon-glass)!important;
  background-image:var(--uniform-icon-glass)!important;
  color:var(--uniform-icon-text)!important;
}

/* Save/share small icons follow the same family but stay inside the button */
body .pro-card .pro-save svg,
body .pro-card .pro-share svg,
body .pro-card .save-row svg,
body .pro-card .save-row i{
  color:var(--uniform-icon-text)!important;
  fill:currentColor!important;
  stroke:currentColor!important;
  opacity:1!important;
}

/* Local admin preview icons match the public preview */
.lp-local-icon{
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--lp-button,#2563eb) 76%, #ffffff 24%),
      var(--lp-button,#2563eb),
      color-mix(in srgb,var(--lp-button,#2563eb) 80%, #000000 20%)
    )!important;
  color:var(--lp-text,#111827)!important;
  border:1px solid color-mix(in srgb,var(--lp-button,#2563eb) 70%, #000000 30%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 10px 22px color-mix(in srgb,var(--lp-button,#2563eb) 30%, transparent)!important;
}

/* Browser fallback */
@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)){
  body .pro-card .contact-icon,
  body .pro-card .pro-contact .contact-icon,
  body .pro-card .premium-contact-row .contact-icon,
  body .pro-card .pro-contact-icon,
  body .pro-card .icon-bubble,
  body .pro-card .row-icon{
    background:var(--uniform-icon-bg)!important;
    background-image:none!important;
    color:var(--uniform-icon-text)!important;
  }
}


/* =========================================================
   DigiSign.click V2.11.4 — Flat QR Control Restored
   QR control is back, separate from Flat Glass colors.
   ========================================================= */

.flat-qr-panel{
  display:block!important;
  border:1px solid #cfe0f2;
  border-radius:28px;
  padding:18px;
  margin:18px 0;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 22px 60px rgba(15,39,68,.08);
}
.flat-qr-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid #e2edf8;
}
.flat-qr-head b{
  display:block;
  color:#0f2744;
  font-size:1.18rem;
}
.flat-qr-head span{
  display:block;
  color:#64748b;
  font-weight:850;
  line-height:1.45;
  margin-top:3px;
}
.flat-qr-head em{
  font-style:normal;
  background:#eef6ff;
  border:1px solid #cfe0f2;
  color:#2563eb;
  border-radius:999px;
  padding:8px 12px;
  font-size:.72rem;
  font-weight:1000;
}
.flat-qr-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:16px;
}
.flat-qr-grid label{
  display:grid;
  gap:8px;
  border:1px solid #d8e7f8;
  background:#fff;
  border-radius:18px;
  padding:12px;
}
.flat-qr-grid span{
  color:#0f2744;
  font-weight:1000;
  font-size:.82rem;
}
.flat-qr-grid select{
  width:100%;
  border:1px solid #d5e4f5;
  border-radius:15px;
  background:#fff;
  padding:12px;
  font-weight:900;
}
.flat-qr-preview-line{
  margin-top:16px;
  display:grid;
  grid-template-columns:190px 1fr;
  gap:16px;
  align-items:center;
  border:1px solid #d8e7f8;
  background:#fff;
  border-radius:22px;
  padding:14px;
}
.flat-qr-preview{
  width:170px;
  height:170px;
  border-radius:24px;
  display:grid;
  place-items:center;
  background:#fff!important;
  overflow:hidden;
  padding:8px;
  box-shadow:0 16px 34px rgba(15,39,68,.08);
}
.flat-qr-preview svg,
.flat-qr-preview canvas,
.flat-qr-preview img,
.lp-local-qr svg,
.lp-local-qr canvas,
.lp-local-qr img{
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  display:block!important;
  background:#fff!important;
}
.flat-qr-preview-line b{
  display:block;
  color:#0f2744;
  font-size:1rem;
  text-transform:capitalize;
}
.flat-qr-preview-line span{
  display:block;
  margin-top:5px;
  color:#64748b;
  font-weight:850;
  line-height:1.45;
}
.flat-qr-fallback,
.lp-local-qr-fallback{
  width:120px;
  height:120px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:1000;
  background:var(--qr-color,#2563eb);
}

/* Remove old hiding rule specifically for the new panel. */
#flatQrPanel{
  display:block!important;
}

/* Keep older QR panel hidden so there is only one QR workflow. */
#simpleQrPanel,
#qrStyleStudio{
  display:none!important;
}

@media(max-width:980px){
  .flat-qr-grid{grid-template-columns:repeat(2,1fr);}
  .flat-qr-preview-line{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .flat-qr-grid{grid-template-columns:1fr;}
}


/* =========================================================
   DigiSign.click V2.11.5 — Separate Interface/Button Text Roles
   Botones, texto de botones and texto de interfaz are independent.
   Misc/QR/footer text uses the button color by default.
   ========================================================= */

/* Flat Glass panel now has 4 controls */
.flat-glass-grid{
  grid-template-columns:repeat(4,1fr)!important;
}
.flat-glass-mini{
  color:var(--fg-text,#111827)!important;
}
.flat-glass-mini b,
.flat-glass-mini span{
  color:var(--fg-text,#111827)!important;
}
.fg-button{
  color:var(--fg-btn-text,#ffffff)!important;
}
.fg-button *{
  color:var(--fg-btn-text,#ffffff)!important;
}

/* Role variables */
.pro-card{
  --role-interface-text: var(--flat-interface-text-real, var(--pro-interface-text, var(--true-flat-text, #111827)));
  --role-button-text: var(--flat-button-text-real, var(--normal-button-text, var(--final-button-text, #ffffff)));
  --role-misc-text: var(--flat-misc-text-real, var(--final-button-bg, var(--pro-button-solid, #2563eb)));
}

/* Interface text = employee name, position and company only */
body .pro-card .pro-name,
body .pro-card .profile-name,
body .pro-card h1.pro-name,
body .pro-card h2.pro-name{
  color:var(--role-interface-text)!important;
}
body .pro-card .pro-title,
body .pro-card .profile-title,
body .pro-card .pro-company,
body .pro-card .profile-company{
  color:var(--role-interface-text)!important;
  opacity:.78!important;
}

/* Button text = only text inside contact rows, save/share, quick actions */
body .pro-card .pro-contact,
body .pro-card .premium-contact-row,
body .pro-card .save-row .btn,
body .pro-card .pro-save,
body .pro-card .pro-share,
body .pro-card .pro-primary-action{
  color:var(--role-button-text)!important;
}
body .pro-card .pro-contact *,
body .pro-card .premium-contact-row *,
body .pro-card .save-row .btn *,
body .pro-card .pro-save *,
body .pro-card .pro-share *,
body .pro-card .pro-primary-action *,
body .pro-card .contact-label,
body .pro-card .contact-value,
body .pro-card .contact-arrow{
  color:var(--role-button-text)!important;
  opacity:1!important;
}

/* Contact icon glyphs also use button text */
body .pro-card .contact-icon,
body .pro-card .contact-icon *,
body .pro-card .pro-contact-icon,
body .pro-card .pro-contact-icon *,
body .pro-card .icon-bubble,
body .pro-card .icon-bubble *,
body .pro-card .row-icon,
body .pro-card .row-icon *{
  color:var(--role-button-text)!important;
  fill:currentColor!important;
  stroke:currentColor!important;
}

/* Misc/brand/QR/footer text = button color by default */
body .pro-card .pro-top,
body .pro-card .pro-card-ribbon,
body .pro-card .public-card-header,
body .pro-card .card-header,
body .pro-card .pro-card-ribbon *,
body .pro-card .public-card-header *,
body .pro-card .card-header *,
body .pro-card .digisign-brand,
body .pro-card .brand-tag,
body .pro-card .pro-qr-card,
body .pro-card .pro-qr-card *,
body .pro-card .pro-qr-copy,
body .pro-card .pro-qr-copy *,
body .pro-card .pro-qr-eyebrow,
body .pro-card .pro-qr-domain,
body .pro-card .qr-label,
body .pro-card .qr-caption,
body .pro-card footer,
body .pro-card footer *,
body .pro-card .pro-footer,
body .pro-card .pro-footer *{
  color:var(--role-misc-text)!important;
}

/* Keep QR modules using button color */
body .pro-card .pro-qr-card svg,
body .pro-card .pro-qr-card canvas,
body .pro-card .pro-qr-card img{
  color:var(--role-misc-text)!important;
}

/* Local admin preview roles */
.lp-local-card{
  --lp-interface: var(--lp-interface-text, var(--lp-text,#111827));
  --lp-btn-text: var(--lp-button-text, #ffffff);
  --lp-misc: var(--lp-misc-text, var(--lp-button,#2563eb));
}
.lp-local-hero h2,
.lp-local-title,
.lp-local-company{
  color:var(--lp-interface)!important;
}
.lp-local-row,
.lp-local-row *,
.lp-local-actions button,
.lp-local-actions button *,
.lp-local-icon,
.lp-local-icon *{
  color:var(--lp-btn-text)!important;
}
.lp-local-ribbon,
.lp-local-ribbon *,
.lp-local-qr-card,
.lp-local-qr-card *,
.lp-local-card footer{
  color:var(--lp-misc)!important;
}

@media(max-width:1280px){
  .flat-glass-grid{grid-template-columns:repeat(2,1fr)!important;}
}
@media(max-width:620px){
  .flat-glass-grid{grid-template-columns:1fr!important;}
}


/* =========================================================
   DigiSign.click V2.11.6 — Final Interface Text + Mockup QR Fix
   Published interface text uses Color texto interfaz.
   Admin mockup QR is clean and large; public QR remains stable.
   ========================================================= */

.pro-card{
  --role-interface-text-final: var(--flat-interface-text-real, var(--role-interface-text, var(--pro-interface-text, var(--pro-text, #111827))));
  --role-button-text-final: var(--flat-button-text-real, var(--role-button-text, var(--final-button-text, #ffffff)));
  --role-misc-text-final: var(--flat-misc-text-real, var(--role-misc-text, var(--final-button-bg, #2563eb)));
}

/* Published card: employee identity text only */
body .pro-card .pro-name,
body .pro-card .profile-name,
body .pro-card .employee-name,
body .pro-card .card-name,
body .pro-card .public-name,
body .pro-card .person-name,
body .pro-card .member-name,
body .pro-card .name,
body .pro-card h1,
body .pro-card h1 *,
body .pro-card h2,
body .pro-card h2 *,
body .pro-card [data-field="name"],
body .pro-card [data-role="employee-name"]{
  color:var(--role-interface-text-final)!important;
}

body .pro-card .pro-title,
body .pro-card .profile-title,
body .pro-card .employee-title,
body .pro-card .job-title,
body .pro-card .position,
body .pro-card .title,
body .pro-card [data-field="title"],
body .pro-card [data-field="position"],
body .pro-card [data-role="employee-title"],
body .pro-card .pro-company,
body .pro-card .profile-company,
body .pro-card .employee-company,
body .pro-card .company-name,
body .pro-card .business-name,
body .pro-card .company,
body .pro-card [data-field="company"],
body .pro-card [data-role="company-name"]{
  color:var(--role-interface-text-final)!important;
  opacity:.88!important;
}

/* Do not let misc/footer rules recolor employee identity */
body .pro-card .pro-hero h1,
body .pro-card .pro-hero h2,
body .pro-card .pro-hero .pro-name,
body .pro-card .pro-hero .pro-title,
body .pro-card .pro-hero .pro-company,
body .pro-card .hero h1,
body .pro-card .hero h2,
body .pro-card .hero .name,
body .pro-card .hero .title,
body .pro-card .hero .company{
  color:var(--role-interface-text-final)!important;
}

/* Button text stays separate */
body .pro-card .pro-contact *,
body .pro-card .premium-contact-row *,
body .pro-card .save-row .btn *,
body .pro-card .pro-save *,
body .pro-card .pro-share *{
  color:var(--role-button-text-final)!important;
}

/* Misc text keeps button color */
body .pro-card .pro-card-ribbon,
body .pro-card .pro-card-ribbon *,
body .pro-card .pro-qr-card,
body .pro-card .pro-qr-card *,
body .pro-card .pro-footer,
body .pro-card .pro-footer *,
body .pro-card footer,
body .pro-card footer *{
  color:var(--role-misc-text-final)!important;
}

/* Admin mockup QR: make it look like a clean QR, not a tiny weird stamp. */
.lp-local-qr{
  width:258px!important;
  height:258px!important;
  padding:14px!important;
  border-radius:28px!important;
  background:#ffffff!important;
  box-shadow:0 16px 38px rgba(15,23,42,.11)!important;
}
.lp-local-qr svg,
.lp-local-qr canvas,
.lp-local-qr img{
  width:220px!important;
  height:220px!important;
  max-width:220px!important;
  max-height:220px!important;
  object-fit:contain!important;
  display:block!important;
  background:#ffffff!important;
}
.lp-local-qr-card{
  padding:24px!important;
}
.flat-qr-preview{
  width:190px!important;
  height:190px!important;
  padding:12px!important;
}
.flat-qr-preview svg,
.flat-qr-preview canvas,
.flat-qr-preview img{
  width:166px!important;
  height:166px!important;
  max-width:166px!important;
  max-height:166px!important;
  background:#fff!important;
}


/* =========================================================
   DigiSign.click V2.11.7 — Publish Button + Admin QR Preview Fix
   Bottom "Guardar cambios finales" uses the same publish flow.
   Admin QR preview is larger and cleaner.
   ========================================================= */

/* Bottom publish buttons keep visible, but now same behavior as Publicar cambios. */
#publishFinalBrandChanges,
#quickPublishBrandChanges{
  cursor:pointer!important;
}
#publishFinalBrandChanges:disabled,
#quickPublishBrandChanges:disabled{
  opacity:.68!important;
  cursor:wait!important;
}

/* Admin card mockup QR: clean premium size. Public QR is not changed. */
.lp-local-qr{
  width:292px!important;
  height:292px!important;
  min-width:292px!important;
  min-height:292px!important;
  padding:16px!important;
  border-radius:30px!important;
  background:#ffffff!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 16px 38px rgba(15,23,42,.12)!important;
}
.lp-local-qr > svg,
.lp-local-qr > canvas,
.lp-local-qr > img,
.lp-local-qr svg,
.lp-local-qr canvas,
.lp-local-qr img{
  width:252px!important;
  height:252px!important;
  max-width:252px!important;
  max-height:252px!important;
  min-width:252px!important;
  min-height:252px!important;
  object-fit:contain!important;
  display:block!important;
  background:#ffffff!important;
}
.lp-local-qr-card{
  padding:28px 22px!important;
  gap:10px!important;
}
.lp-local-qr-card span{
  max-width:310px!important;
}

/* QR Control mini preview: readable, not cropped. */
.flat-qr-preview{
  width:226px!important;
  height:226px!important;
  min-width:226px!important;
  min-height:226px!important;
  padding:12px!important;
  border-radius:28px!important;
  background:#fff!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}
.flat-qr-preview > svg,
.flat-qr-preview > canvas,
.flat-qr-preview > img,
.flat-qr-preview svg,
.flat-qr-preview canvas,
.flat-qr-preview img{
  width:206px!important;
  height:206px!important;
  max-width:206px!important;
  max-height:206px!important;
  min-width:206px!important;
  min-height:206px!important;
  object-fit:contain!important;
  display:block!important;
  background:#fff!important;
}

/* Make the QR preview line breathe */
.flat-qr-preview-line{
  grid-template-columns:250px 1fr!important;
  align-items:center!important;
}

@media(max-width:760px){
  .flat-qr-preview-line{
    grid-template-columns:1fr!important;
  }
  .lp-local-qr{
    width:250px!important;
    height:250px!important;
    min-width:250px!important;
    min-height:250px!important;
  }
  .lp-local-qr svg,
  .lp-local-qr canvas,
  .lp-local-qr img{
    width:218px!important;
    height:218px!important;
    min-width:218px!important;
    min-height:218px!important;
    max-width:218px!important;
    max-height:218px!important;
  }
}


/* =========================================================
   DigiSign.click V2.11.8 — QR Real Publish + Admin QR Clean Fix
   QR selector now publishes to card.php and right mockup QR is bigger.
   ========================================================= */

.lp-local-qr{
  width:350px!important;
  height:350px!important;
  min-width:350px!important;
  min-height:350px!important;
  padding:18px!important;
  border-radius:34px!important;
  background:#ffffff!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 20px 48px rgba(15,23,42,.13)!important;
}
.lp-local-qr > svg,
.lp-local-qr > canvas,
.lp-local-qr > img,
.lp-local-qr svg,
.lp-local-qr canvas,
.lp-local-qr img{
  width:310px!important;
  height:310px!important;
  max-width:310px!important;
  max-height:310px!important;
  min-width:310px!important;
  min-height:310px!important;
  object-fit:contain!important;
  display:block!important;
  background:#ffffff!important;
}
.lp-local-qr-card{
  padding:30px 20px!important;
  gap:10px!important;
}
.lp-local-qr-card em{
  max-width:320px!important;
}

/* QR control mini preview */
.flat-qr-preview{
  width:244px!important;
  height:244px!important;
  min-width:244px!important;
  min-height:244px!important;
  padding:14px!important;
  border-radius:30px!important;
}
.flat-qr-preview > svg,
.flat-qr-preview > canvas,
.flat-qr-preview > img,
.flat-qr-preview svg,
.flat-qr-preview canvas,
.flat-qr-preview img{
  width:214px!important;
  height:214px!important;
  max-width:214px!important;
  max-height:214px!important;
  min-width:214px!important;
  min-height:214px!important;
}
.flat-qr-preview-line{
  grid-template-columns:270px 1fr!important;
}

/* Public QR remains stable but now honors selected type. */
.pro-card #qr,
.pro-card .pro-qr-native,
.pro-card .pro-qr-native-wrap{
  overflow:visible!important;
}
.pro-card #qr svg,
.pro-card #qr canvas,
.pro-card #qr img{
  object-fit:contain!important;
}

@media(max-width:760px){
  .lp-local-qr{
    width:280px!important;
    height:280px!important;
    min-width:280px!important;
    min-height:280px!important;
  }
  .lp-local-qr svg,
  .lp-local-qr canvas,
  .lp-local-qr img{
    width:248px!important;
    height:248px!important;
    min-width:248px!important;
    min-height:248px!important;
    max-width:248px!important;
    max-height:248px!important;
  }
  .flat-qr-preview-line{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   DigiSign.click V2.11.9 — QR Consistency Fix
   The QR style now looks consistent in QR Control, admin right preview and card.php.
   ========================================================= */

.flat-qr-preview,
.lp-local-qr,
.pro-card #qr{
  background:#ffffff!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}

.flat-qr-preview{
  width:244px!important;
  height:244px!important;
  padding:14px!important;
  border-radius:30px!important;
}
.flat-qr-preview svg,
.flat-qr-preview canvas,
.flat-qr-preview img{
  width:214px!important;
  height:214px!important;
  max-width:214px!important;
  max-height:214px!important;
  display:block!important;
  object-fit:contain!important;
}

.lp-local-qr{
  width:314px!important;
  height:314px!important;
  padding:14px!important;
  border-radius:32px!important;
}
.lp-local-qr svg,
.lp-local-qr canvas,
.lp-local-qr img{
  width:286px!important;
  height:286px!important;
  max-width:286px!important;
  max-height:286px!important;
  display:block!important;
  object-fit:contain!important;
}

.pro-card #qr{
  width:252px!important;
  height:252px!important;
  min-width:252px!important;
  min-height:252px!important;
  max-width:252px!important;
  max-height:252px!important;
  padding:0!important;
  border-radius:24px!important;
}
.pro-card #qr svg,
.pro-card #qr canvas,
.pro-card #qr img{
  width:252px!important;
  height:252px!important;
  min-width:252px!important;
  min-height:252px!important;
  max-width:252px!important;
  max-height:252px!important;
  display:block!important;
  object-fit:contain!important;
  background:#ffffff!important;
}

.pro-card .pro-qr-native-wrap,
.pro-card .premium-qr-box,
.pro-card .pro-qr-media{
  overflow:visible!important;
}


/* =========================================================
   DigiSign.click V2.12.0 — Global Mobile Identity Polish
   Global card polish: one-line top header, larger logo, premium name.
   ========================================================= */

/* Top ribbon / card header: never split DigiSign.click into a second line on phones. */
body .pro-card .pro-card-ribbon,
body .pro-card .pro-top,
body .pro-card .public-card-header,
body .pro-card .card-header,
body .digital-card.pro-card .pro-card-ribbon,
body .digital-card.pro-card .pro-top{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  white-space:nowrap!important;
  flex-wrap:nowrap!important;
  line-height:1!important;
}

/* Each side stays single-line and compressed instead of wrapping. */
body .pro-card .pro-card-ribbon > *,
body .pro-card .pro-top > *,
body .pro-card .public-card-header > *,
body .pro-card .card-header > *{
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  line-height:1!important;
}

body .pro-card .pro-card-ribbon b,
body .pro-card .pro-top b,
body .pro-card .public-card-header b,
body .pro-card .card-header b{
  flex:1 1 auto!important;
  max-width:68%!important;
}

body .pro-card .pro-card-ribbon span,
body .pro-card .pro-top span,
body .pro-card .public-card-header span,
body .pro-card .card-header span{
  flex:0 0 auto!important;
  max-width:42%!important;
  text-align:right!important;
}

/* Better global header typography. */
body .pro-card .pro-card-ribbon,
body .pro-card .pro-card-ribbon *,
body .pro-card .pro-top,
body .pro-card .pro-top *,
body .pro-card .public-card-header,
body .pro-card .public-card-header *,
body .pro-card .card-header,
body .pro-card .card-header *{
  font-weight:1000!important;
  letter-spacing:.075em!important;
}

/* Logo: bigger, premium presence, without breaking small screens. */
body .pro-card .pro-logo,
body .pro-card .profile-logo,
body .pro-card .company-logo,
body .pro-card .brand-logo,
body .pro-card .public-logo,
body .pro-card .logo,
body .pro-card .pro-hero img,
body .pro-card .hero-logo img,
body .pro-card .profile-photo.logo-mode img{
  width:auto!important;
  max-width:118px!important;
  max-height:118px!important;
  object-fit:contain!important;
  display:block!important;
  margin-left:auto!important;
  margin-right:auto!important;
  filter:drop-shadow(0 14px 24px rgba(15,23,42,.12))!important;
}

/* Specific hero spacing around the logo. */
body .pro-card .pro-hero,
body .pro-card .hero,
body .pro-card .profile-hero,
body .pro-card .card-hero{
  padding-top:26px!important;
  gap:10px!important;
}

/* Employee name: more premium and less basic. */
body .pro-card .pro-name,
body .pro-card .profile-name,
body .pro-card .employee-name,
body .pro-card .card-name,
body .pro-card .public-name,
body .pro-card .person-name,
body .pro-card .member-name,
body .pro-card .name,
body .pro-card h1,
body .pro-card h1 *,
body .pro-card h2,
body .pro-card h2 *,
body .pro-card [data-field="name"],
body .pro-card [data-role="employee-name"]{
  font-weight:1000!important;
  font-size:clamp(2.28rem, 6.2vw, 3.45rem)!important;
  line-height:.92!important;
  letter-spacing:-.078em!important;
  text-wrap:balance!important;
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:antialiased!important;
  margin-top:14px!important;
  margin-bottom:8px!important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.45),
    0 14px 34px rgba(15,23,42,.10)!important;
}

/* Position + company: premium hierarchy under name. */
body .pro-card .pro-title,
body .pro-card .profile-title,
body .pro-card .employee-title,
body .pro-card .job-title,
body .pro-card .position,
body .pro-card .title,
body .pro-card [data-field="title"],
body .pro-card [data-field="position"],
body .pro-card [data-role="employee-title"],
body .pro-card .pro-company,
body .pro-card .profile-company,
body .pro-card .employee-company,
body .pro-card .company-name,
body .pro-card .business-name,
body .pro-card .company,
body .pro-card [data-field="company"],
body .pro-card [data-role="company-name"]{
  font-weight:950!important;
  letter-spacing:-.022em!important;
  line-height:1.15!important;
  text-wrap:balance!important;
}

/* Local admin preview gets same identity polish. */
.lp-local-ribbon{
  display:flex!important;
  flex-direction:row!important;
  justify-content:space-between!important;
  align-items:center!important;
  white-space:nowrap!important;
  flex-wrap:nowrap!important;
}
.lp-local-ribbon > *{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  line-height:1!important;
}
.lp-local-logo{
  max-width:118px!important;
  max-height:118px!important;
  filter:drop-shadow(0 14px 24px rgba(15,23,42,.12))!important;
}
.lp-local-hero h2{
  font-weight:1000!important;
  font-size:clamp(2.28rem, 6.2vw, 3.45rem)!important;
  line-height:.92!important;
  letter-spacing:-.078em!important;
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:antialiased!important;
  margin-top:14px!important;
  margin-bottom:8px!important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.45),
    0 14px 34px rgba(15,23,42,.10)!important;
}
.lp-local-title,
.lp-local-company{
  font-weight:950!important;
  letter-spacing:-.022em!important;
}

/* Mobile-specific refinements. */
@media(max-width:560px){
  body .pro-card{
    border-radius:28px!important;
  }

  body .pro-card .pro-card-ribbon,
  body .pro-card .pro-top,
  body .pro-card .public-card-header,
  body .pro-card .card-header{
    padding-left:16px!important;
    padding-right:16px!important;
    font-size:.66rem!important;
    letter-spacing:.055em!important;
    gap:8px!important;
  }

  body .pro-card .pro-card-ribbon *,
  body .pro-card .pro-top *,
  body .pro-card .public-card-header *,
  body .pro-card .card-header *{
    font-size:.66rem!important;
    letter-spacing:.055em!important;
  }

  body .pro-card .pro-card-ribbon b,
  body .pro-card .pro-top b,
  body .pro-card .public-card-header b,
  body .pro-card .card-header b{
    max-width:62%!important;
  }

  body .pro-card .pro-card-ribbon span,
  body .pro-card .pro-top span,
  body .pro-card .public-card-header span,
  body .pro-card .card-header span{
    max-width:38%!important;
  }

  body .pro-card .pro-logo,
  body .pro-card .profile-logo,
  body .pro-card .company-logo,
  body .pro-card .brand-logo,
  body .pro-card .public-logo,
  body .pro-card .logo,
  body .pro-card .pro-hero img,
  body .pro-card .hero-logo img,
  body .pro-card .profile-photo.logo-mode img{
    max-width:96px!important;
    max-height:96px!important;
  }

  body .pro-card .pro-hero,
  body .pro-card .hero,
  body .pro-card .profile-hero,
  body .pro-card .card-hero{
    padding-top:22px!important;
    gap:9px!important;
  }

  body .pro-card .pro-name,
  body .pro-card .profile-name,
  body .pro-card .employee-name,
  body .pro-card .card-name,
  body .pro-card .public-name,
  body .pro-card .person-name,
  body .pro-card .member-name,
  body .pro-card .name,
  body .pro-card h1,
  body .pro-card h1 *,
  body .pro-card h2,
  body .pro-card h2 *,
  body .pro-card [data-field="name"],
  body .pro-card [data-role="employee-name"]{
    font-size:clamp(2.05rem, 8.7vw, 2.82rem)!important;
    letter-spacing:-.082em!important;
    line-height:.92!important;
    margin-top:12px!important;
    margin-bottom:8px!important;
  }

  .lp-local-ribbon{
    font-size:.66rem!important;
    letter-spacing:.055em!important;
    gap:8px!important;
  }
  .lp-local-ribbon *{
    font-size:.66rem!important;
    letter-spacing:.055em!important;
  }
  .lp-local-logo{
    max-width:96px!important;
    max-height:96px!important;
  }
  .lp-local-hero h2{
    font-size:clamp(2.05rem, 8.7vw, 2.82rem)!important;
    letter-spacing:-.082em!important;
  }
}

/* Ultra-small phones: keep header on one row at all costs. */
@media(max-width:390px){
  body .pro-card .pro-card-ribbon,
  body .pro-card .pro-top,
  body .pro-card .public-card-header,
  body .pro-card .card-header{
    font-size:.58rem!important;
    letter-spacing:.045em!important;
    gap:6px!important;
  }

  body .pro-card .pro-card-ribbon *,
  body .pro-card .pro-top *,
  body .pro-card .public-card-header *,
  body .pro-card .card-header *{
    font-size:.58rem!important;
    letter-spacing:.045em!important;
  }

  body .pro-card .pro-name,
  body .pro-card .profile-name,
  body .pro-card .employee-name,
  body .pro-card .card-name,
  body .pro-card .public-name,
  body .pro-card .person-name,
  body .pro-card .member-name,
  body .pro-card .name,
  body .pro-card h1,
  body .pro-card h1 *,
  body .pro-card h2,
  body .pro-card h2 *{
    font-size:clamp(1.92rem, 8.4vw, 2.55rem)!important;
  }
}


/* =========================================================
   DigiSign.click V2.12.1 — Universal Employee Name Uppercase
   Employee names always display in uppercase, even if typed lowercase.
   ========================================================= */

body .pro-card .pro-name,
body .pro-card .profile-name,
body .pro-card .employee-name,
body .pro-card .card-name,
body .pro-card .public-name,
body .pro-card .person-name,
body .pro-card .member-name,
body .pro-card .name,
body .pro-card [data-field="name"],
body .pro-card [data-role="employee-name"],
body .directory-card .employee-name,
body .directory-card .profile-name,
body .directory-card .person-name,
body .directory-card .member-name,
body .directory-card [data-role="employee-name"],
body .employee-card .employee-name,
body .employee-card .profile-name,
body .employee-card .person-name,
body .employee-card .member-name,
body .employee-list .employee-name,
body .employee-row .employee-name,
body .signature-preview .employee-name,
body .signature-preview .profile-name,
body .signature-preview .person-name,
body .email-signature-preview .employee-name,
body .email-signature-preview .profile-name,
body .email-signature-preview .person-name,
.lp-local-hero h2,
.lp-local-card .employee-name,
.lp-local-card .profile-name{
  text-transform:uppercase!important;
}

/* Stronger targeting for public card headings that are known to be the employee name. */
body .pro-card .pro-hero h1,
body .pro-card .pro-hero h2,
body .pro-card .hero h1,
body .pro-card .hero h2,
body .pro-card .profile-hero h1,
body .pro-card .profile-hero h2,
body .pro-card .card-hero h1,
body .pro-card .card-hero h2{
  text-transform:uppercase!important;
}

/* Input helper: when the field is specifically employee full name, show uppercase while typing. */
input[name="full_name"],
input[name="employee_name"],
input[id="full_name"],
input[id="employee_name"],
input[id="employeeFullName"],
input[id="employee_name"]{
  text-transform:uppercase!important;
}


/* =========================================================
   DigiSign.click V2.12.2 — Header Balance Fix
   DIGITAL BUSINESS CARD stays left. DigiSign.click stays locked right.
   ========================================================= */

body .pro-card .pro-card-ribbon,
body .pro-card .pro-top,
body .pro-card .public-card-header,
body .pro-card .card-header,
body .digital-card.pro-card .pro-card-ribbon,
body .digital-card.pro-card .pro-top,
.lp-local-ribbon{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  width:100%!important;
  gap:14px!important;
  white-space:nowrap!important;
  flex-wrap:nowrap!important;
}

/* Left label */
body .pro-card .pro-card-ribbon > :first-child,
body .pro-card .pro-top > :first-child,
body .pro-card .public-card-header > :first-child,
body .pro-card .card-header > :first-child,
.lp-local-ribbon > :first-child{
  justify-self:start!important;
  text-align:left!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Right label: DigiSign.click */
body .pro-card .pro-card-ribbon > :last-child,
body .pro-card .pro-top > :last-child,
body .pro-card .public-card-header > :last-child,
body .pro-card .card-header > :last-child,
.lp-local-ribbon > :last-child{
  justify-self:end!important;
  text-align:right!important;
  margin-left:auto!important;
  min-width:max-content!important;
  max-width:none!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* Extra targeting for common DigiSign header text spans/links */
body .pro-card .pro-card-ribbon span:last-child,
body .pro-card .pro-top span:last-child,
body .pro-card .public-card-header span:last-child,
body .pro-card .card-header span:last-child,
body .pro-card .pro-card-ribbon a:last-child,
body .pro-card .pro-top a:last-child,
body .pro-card .public-card-header a:last-child,
body .pro-card .card-header a:last-child{
  justify-self:end!important;
  text-align:right!important;
  margin-left:auto!important;
}

/* Mobile: keep both sides balanced without wrapping. */
@media(max-width:560px){
  body .pro-card .pro-card-ribbon,
  body .pro-card .pro-top,
  body .pro-card .public-card-header,
  body .pro-card .card-header,
  .lp-local-ribbon{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }

  body .pro-card .pro-card-ribbon > :first-child,
  body .pro-card .pro-top > :first-child,
  body .pro-card .public-card-header > :first-child,
  body .pro-card .card-header > :first-child,
  .lp-local-ribbon > :first-child{
    max-width:100%!important;
  }

  body .pro-card .pro-card-ribbon > :last-child,
  body .pro-card .pro-top > :last-child,
  body .pro-card .public-card-header > :last-child,
  body .pro-card .card-header > :last-child,
  .lp-local-ribbon > :last-child{
    min-width:max-content!important;
    max-width:none!important;
    transform:translateX(0)!important;
  }
}

@media(max-width:390px){
  body .pro-card .pro-card-ribbon,
  body .pro-card .pro-top,
  body .pro-card .public-card-header,
  body .pro-card .card-header,
  .lp-local-ribbon{
    gap:6px!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
}


/* =========================================================
   DigiSign.click V2.12.3 — Universal Identity Uppercase + QR Preview Lock
   Employee name, position and company display uppercase globally.
   ========================================================= */

/* Employee name already uppercase, now position and company too. */
body .pro-card .pro-name,
body .pro-card .profile-name,
body .pro-card .employee-name,
body .pro-card .card-name,
body .pro-card .public-name,
body .pro-card .person-name,
body .pro-card .member-name,
body .pro-card .name,
body .pro-card [data-field="name"],
body .pro-card [data-role="employee-name"],
body .pro-card .pro-title,
body .pro-card .profile-title,
body .pro-card .employee-title,
body .pro-card .job-title,
body .pro-card .position,
body .pro-card .title,
body .pro-card [data-field="title"],
body .pro-card [data-field="position"],
body .pro-card [data-role="employee-title"],
body .pro-card .pro-company,
body .pro-card .profile-company,
body .pro-card .employee-company,
body .pro-card .company-name,
body .pro-card .business-name,
body .pro-card .company,
body .pro-card [data-field="company"],
body .pro-card [data-role="company-name"],
body .directory-card .employee-name,
body .directory-card .profile-name,
body .directory-card .person-name,
body .directory-card .member-name,
body .directory-card .employee-title,
body .directory-card .position,
body .directory-card .company-name,
body .employee-card .employee-name,
body .employee-card .profile-name,
body .employee-card .person-name,
body .employee-card .member-name,
body .employee-card .employee-title,
body .employee-card .position,
body .employee-card .company-name,
body .employee-list .employee-name,
body .employee-row .employee-name,
body .signature-preview .employee-name,
body .signature-preview .profile-name,
body .signature-preview .person-name,
body .signature-preview .employee-title,
body .signature-preview .position,
body .signature-preview .company-name,
body .email-signature-preview .employee-name,
body .email-signature-preview .profile-name,
body .email-signature-preview .person-name,
body .email-signature-preview .employee-title,
body .email-signature-preview .position,
body .email-signature-preview .company-name,
.lp-local-hero h2,
.lp-local-title,
.lp-local-company,
.lp-local-card .employee-name,
.lp-local-card .profile-name,
.lp-local-card .employee-title,
.lp-local-card .company-name{
  text-transform:uppercase!important;
}

/* Inputs: show employee name, position and company uppercase while typing where applicable. */
input[name="full_name"],
input[name="employee_name"],
input[name="employee_full_name"],
input[id="full_name"],
input[id="employee_name"],
input[id="employeeFullName"],
input[id="employee_full_name"],
input[name="title"],
input[name="position"],
input[name="job_title"],
input[id="title"],
input[id="position"],
input[id="job_title"],
input[id="employeeTitle"],
input[name="company"],
input[name="company_name"],
input[id="company"],
input[id="company_name"],
input[id="employeeCompany"]{
  text-transform:uppercase!important;
}

/* =========================================================
   QR PREVIEW LOCK
   Force right-side admin preview QR to match QR Control preview.
   ========================================================= */

/* QR Control preview and right mockup use the same clean box behavior. */
#flatQrPreview,
#localLiveQrPreview{
  background:#ffffff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

/* QR Control box */
#flatQrPreview{
  width:244px!important;
  height:244px!important;
  min-width:244px!important;
  min-height:244px!important;
  max-width:244px!important;
  max-height:244px!important;
  padding:14px!important;
  border-radius:30px!important;
}

/* Right-side card preview box: slightly larger, same visual render. */
#localLiveQrPreview{
  width:244px!important;
  height:244px!important;
  min-width:244px!important;
  min-height:244px!important;
  max-width:244px!important;
  max-height:244px!important;
  padding:14px!important;
  border-radius:30px!important;
}

/* Kill old QR sizing from previous mockup CSS. */
#flatQrPreview > *,
#localLiveQrPreview > *,
#flatQrPreview svg,
#flatQrPreview canvas,
#flatQrPreview img,
#localLiveQrPreview svg,
#localLiveQrPreview canvas,
#localLiveQrPreview img{
  width:214px!important;
  height:214px!important;
  min-width:214px!important;
  min-height:214px!important;
  max-width:214px!important;
  max-height:214px!important;
  display:block!important;
  object-fit:contain!important;
  background:#ffffff!important;
  margin:0!important;
  transform:none!important;
}

/* QR card content stays centered and does not stretch QR. */
.lp-local-qr-card{
  display:grid!important;
  justify-items:center!important;
  align-items:center!important;
}
.lp-local-qr-card #localLiveQrPreview{
  justify-self:center!important;
  align-self:center!important;
}

/* Some older selectors were forcing big 310px QR; neutralize them globally after all old CSS. */
.lp-local-qr{
  width:244px!important;
  height:244px!important;
  min-width:244px!important;
  min-height:244px!important;
  max-width:244px!important;
  max-height:244px!important;
  padding:14px!important;
  border-radius:30px!important;
}
.lp-local-qr > svg,
.lp-local-qr > canvas,
.lp-local-qr > img,
.lp-local-qr svg,
.lp-local-qr canvas,
.lp-local-qr img{
  width:214px!important;
  height:214px!important;
  min-width:214px!important;
  min-height:214px!important;
  max-width:214px!important;
  max-height:214px!important;
}

@media(max-width:560px){
  #flatQrPreview,
  #localLiveQrPreview,
  .lp-local-qr{
    width:230px!important;
    height:230px!important;
    min-width:230px!important;
    min-height:230px!important;
    max-width:230px!important;
    max-height:230px!important;
    padding:12px!important;
  }
  #flatQrPreview > *,
  #localLiveQrPreview > *,
  #flatQrPreview svg,
  #flatQrPreview canvas,
  #flatQrPreview img,
  #localLiveQrPreview svg,
  #localLiveQrPreview canvas,
  #localLiveQrPreview img,
  .lp-local-qr svg,
  .lp-local-qr canvas,
  .lp-local-qr img{
    width:204px!important;
    height:204px!important;
    min-width:204px!important;
    min-height:204px!important;
    max-width:204px!important;
    max-height:204px!important;
  }
}


/* =========================================================
   DigiSign.click V2.12.4 — QR Center Logo Size Polish
   Logo size is handled by QRCodeStyling imageSize 0.18.
   This keeps containers stable.
   ========================================================= */

#flatQrPreview svg image,
#localLiveQrPreview svg image,
.pro-card #qr svg image{
  transform-box:fill-box!important;
  transform-origin:center!important;
}


/* =========================================================
   DigiSign.click V2.12.5 — Global Digital Card Logo Size
   Main company logo on the digital card is larger globally.
   This does NOT affect the QR center logo.
   ========================================================= */

/* Main card logo / hero logo only */
body .pro-card .pro-hero > img,
body .pro-card .hero > img,
body .pro-card .profile-hero > img,
body .pro-card .card-hero > img,
body .pro-card .hero-logo > img,
body .pro-card .brand-logo-wrap > img,
body .pro-card .company-logo-wrap > img,
body .pro-card .pro-logo,
body .pro-card img.pro-logo,
body .pro-card .profile-logo,
body .pro-card img.profile-logo,
body .pro-card .company-logo,
body .pro-card img.company-logo,
body .pro-card .brand-logo,
body .pro-card img.brand-logo,
body .pro-card .public-logo,
body .pro-card img.public-logo,
body .pro-card .main-logo,
body .pro-card img.main-logo,
.lp-local-logo{
  width:clamp(128px, 22vw, 168px)!important;
  max-width:46%!important;
  height:auto!important;
  max-height:150px!important;
  min-height:auto!important;
  object-fit:contain!important;
  display:block!important;
  margin-left:auto!important;
  margin-right:auto!important;
  transform:none!important;
  filter:
    drop-shadow(0 16px 28px rgba(15,23,42,.16))
    drop-shadow(0 2px 4px rgba(255,255,255,.35))!important;
}

/* If the logo is inside a circular/photo wrapper, let the logo breathe. */
body .pro-card .hero-logo,
body .pro-card .brand-logo-wrap,
body .pro-card .company-logo-wrap,
body .pro-card .logo-wrap,
body .pro-card .profile-photo.logo-mode,
body .pro-card .pro-logo-wrap{
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:none!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
}

/* Add a little more vertical breathing room around the larger logo. */
body .pro-card .pro-hero,
body .pro-card .hero,
body .pro-card .profile-hero,
body .pro-card .card-hero{
  padding-top:30px!important;
  gap:12px!important;
}

/* Keep QR center logo untouched. */
body .pro-card #qr img,
body .pro-card #qr svg image,
body .pro-card .pro-qr-card img,
body .pro-card .pro-qr-native img,
#flatQrPreview img,
#flatQrPreview svg image,
#localLiveQrPreview img,
#localLiveQrPreview svg image{
  width:auto!important;
  max-width:none;
  filter:none!important;
}

/* Mobile: larger than before, but still balanced. */
@media(max-width:560px){
  body .pro-card .pro-hero > img,
  body .pro-card .hero > img,
  body .pro-card .profile-hero > img,
  body .pro-card .card-hero > img,
  body .pro-card .hero-logo > img,
  body .pro-card .brand-logo-wrap > img,
  body .pro-card .company-logo-wrap > img,
  body .pro-card .pro-logo,
  body .pro-card img.pro-logo,
  body .pro-card .profile-logo,
  body .pro-card img.profile-logo,
  body .pro-card .company-logo,
  body .pro-card img.company-logo,
  body .pro-card .brand-logo,
  body .pro-card img.brand-logo,
  body .pro-card .public-logo,
  body .pro-card img.public-logo,
  body .pro-card .main-logo,
  body .pro-card img.main-logo,
  .lp-local-logo{
    width:clamp(112px, 31vw, 142px)!important;
    max-width:52%!important;
    max-height:130px!important;
  }

  body .pro-card .pro-hero,
  body .pro-card .hero,
  body .pro-card .profile-hero,
  body .pro-card .card-hero{
    padding-top:26px!important;
    gap:11px!important;
  }
}

/* Very small phones: do not let the logo eat the name area. */
@media(max-width:390px){
  body .pro-card .pro-hero > img,
  body .pro-card .hero > img,
  body .pro-card .profile-hero > img,
  body .pro-card .card-hero > img,
  body .pro-card .hero-logo > img,
  body .pro-card .brand-logo-wrap > img,
  body .pro-card .company-logo-wrap > img,
  body .pro-card .pro-logo,
  body .pro-card img.pro-logo,
  body .pro-card .profile-logo,
  body .pro-card img.profile-logo,
  body .pro-card .company-logo,
  body .pro-card img.company-logo,
  body .pro-card .brand-logo,
  body .pro-card img.brand-logo,
  body .pro-card .public-logo,
  body .pro-card img.public-logo,
  body .pro-card .main-logo,
  body .pro-card img.main-logo,
  .lp-local-logo{
    width:clamp(104px, 30vw, 128px)!important;
    max-width:50%!important;
    max-height:118px!important;
  }
}


/* =========================================================
   DigiSign.click V2.12.6 — Mobile Main Logo Size Fix
   The main digital card logo stays large on mobile too.
   QR center logo remains untouched.
   ========================================================= */

/* Stronger mobile override, placed after older logo rules. */
@media(max-width:760px){
  body .pro-card .pro-hero > img,
  body .pro-card .hero > img,
  body .pro-card .profile-hero > img,
  body .pro-card .card-hero > img,
  body .pro-card .hero-logo > img,
  body .pro-card .brand-logo-wrap > img,
  body .pro-card .company-logo-wrap > img,
  body .pro-card .pro-logo,
  body .pro-card img.pro-logo,
  body .pro-card .profile-logo,
  body .pro-card img.profile-logo,
  body .pro-card .company-logo,
  body .pro-card img.company-logo,
  body .pro-card .brand-logo,
  body .pro-card img.brand-logo,
  body .pro-card .public-logo,
  body .pro-card img.public-logo,
  body .pro-card .main-logo,
  body .pro-card img.main-logo,
  .lp-local-logo{
    width:clamp(138px, 40vw, 172px)!important;
    max-width:62%!important;
    max-height:158px!important;
    height:auto!important;
    object-fit:contain!important;
  }

  body .pro-card .pro-hero,
  body .pro-card .hero,
  body .pro-card .profile-hero,
  body .pro-card .card-hero{
    padding-top:26px!important;
    gap:12px!important;
  }
}

@media(max-width:560px){
  body .pro-card .pro-hero > img,
  body .pro-card .hero > img,
  body .pro-card .profile-hero > img,
  body .pro-card .card-hero > img,
  body .pro-card .hero-logo > img,
  body .pro-card .brand-logo-wrap > img,
  body .pro-card .company-logo-wrap > img,
  body .pro-card .pro-logo,
  body .pro-card img.pro-logo,
  body .pro-card .profile-logo,
  body .pro-card img.profile-logo,
  body .pro-card .company-logo,
  body .pro-card img.company-logo,
  body .pro-card .brand-logo,
  body .pro-card img.brand-logo,
  body .pro-card .public-logo,
  body .pro-card img.public-logo,
  body .pro-card .main-logo,
  body .pro-card img.main-logo,
  .lp-local-logo{
    width:clamp(132px, 43vw, 162px)!important;
    max-width:64%!important;
    max-height:148px!important;
  }
}

@media(max-width:390px){
  body .pro-card .pro-hero > img,
  body .pro-card .hero > img,
  body .pro-card .profile-hero > img,
  body .pro-card .card-hero > img,
  body .pro-card .hero-logo > img,
  body .pro-card .brand-logo-wrap > img,
  body .pro-card .company-logo-wrap > img,
  body .pro-card .pro-logo,
  body .pro-card img.pro-logo,
  body .pro-card .profile-logo,
  body .pro-card img.profile-logo,
  body .pro-card .company-logo,
  body .pro-card img.company-logo,
  body .pro-card .brand-logo,
  body .pro-card img.brand-logo,
  body .pro-card .public-logo,
  body .pro-card img.public-logo,
  body .pro-card .main-logo,
  body .pro-card img.main-logo,
  .lp-local-logo{
    width:clamp(124px, 42vw, 150px)!important;
    max-width:66%!important;
    max-height:138px!important;
  }
}

/* Keep QR center logo safe and separate. */
body .pro-card #qr img,
body .pro-card #qr svg image,
body .pro-card .pro-qr-card img,
body .pro-card .pro-qr-native img,
#flatQrPreview img,
#flatQrPreview svg image,
#localLiveQrPreview img,
#localLiveQrPreview svg image{
  width:auto!important;
  max-width:none!important;
  max-height:none!important;
  filter:none!important;
}


/* =========================================================
   DigiSign.click V2.12.7 — Mobile Logo Presence+
   Main logo gets a little more premium presence on phones.
   QR center logo remains untouched.
   ========================================================= */

@media(max-width:760px){
  body .pro-card .pro-hero > img,
  body .pro-card .hero > img,
  body .pro-card .profile-hero > img,
  body .pro-card .card-hero > img,
  body .pro-card .hero-logo > img,
  body .pro-card .brand-logo-wrap > img,
  body .pro-card .company-logo-wrap > img,
  body .pro-card .pro-logo,
  body .pro-card img.pro-logo,
  body .pro-card .profile-logo,
  body .pro-card img.profile-logo,
  body .pro-card .company-logo,
  body .pro-card img.company-logo,
  body .pro-card .brand-logo,
  body .pro-card img.brand-logo,
  body .pro-card .public-logo,
  body .pro-card img.public-logo,
  body .pro-card .main-logo,
  body .pro-card img.main-logo,
  .lp-local-logo{
    width:clamp(156px, 46vw, 196px)!important;
    max-width:70%!important;
    max-height:180px!important;
    height:auto!important;
    object-fit:contain!important;
  }

  body .pro-card .pro-hero,
  body .pro-card .hero,
  body .pro-card .profile-hero,
  body .pro-card .card-hero{
    padding-top:28px!important;
    gap:13px!important;
  }
}

@media(max-width:560px){
  body .pro-card .pro-hero > img,
  body .pro-card .hero > img,
  body .pro-card .profile-hero > img,
  body .pro-card .card-hero > img,
  body .pro-card .hero-logo > img,
  body .pro-card .brand-logo-wrap > img,
  body .pro-card .company-logo-wrap > img,
  body .pro-card .pro-logo,
  body .pro-card img.pro-logo,
  body .pro-card .profile-logo,
  body .pro-card img.profile-logo,
  body .pro-card .company-logo,
  body .pro-card img.company-logo,
  body .pro-card .brand-logo,
  body .pro-card img.brand-logo,
  body .pro-card .public-logo,
  body .pro-card img.public-logo,
  body .pro-card .main-logo,
  body .pro-card img.main-logo,
  .lp-local-logo{
    width:clamp(150px, 49vw, 184px)!important;
    max-width:72%!important;
    max-height:170px!important;
  }
}

@media(max-width:390px){
  body .pro-card .pro-hero > img,
  body .pro-card .hero > img,
  body .pro-card .profile-hero > img,
  body .pro-card .card-hero > img,
  body .pro-card .hero-logo > img,
  body .pro-card .brand-logo-wrap > img,
  body .pro-card .company-logo-wrap > img,
  body .pro-card .pro-logo,
  body .pro-card img.pro-logo,
  body .pro-card .profile-logo,
  body .pro-card img.profile-logo,
  body .pro-card .company-logo,
  body .pro-card img.company-logo,
  body .pro-card .brand-logo,
  body .pro-card img.brand-logo,
  body .pro-card .public-logo,
  body .pro-card img.public-logo,
  body .pro-card .main-logo,
  body .pro-card img.main-logo,
  .lp-local-logo{
    width:clamp(142px, 48vw, 170px)!important;
    max-width:72%!important;
    max-height:158px!important;
  }
}

/* Absolute protection: do not affect QR center logo. */
body .pro-card #qr img,
body .pro-card #qr svg image,
body .pro-card .pro-qr-card img,
body .pro-card .pro-qr-native img,
#flatQrPreview img,
#flatQrPreview svg image,
#localLiveQrPreview img,
#localLiveQrPreview svg image{
  width:auto!important;
  max-width:none!important;
  max-height:none!important;
  filter:none!important;
}


/* =========================================================
   DigiSign.click V2.12.8 — Premium Header Typography
   Top header feels more premium: left micro-label, right brand badge.
   ========================================================= */

body .pro-card .pro-card-ribbon,
body .pro-card .pro-top,
body .pro-card .public-card-header,
body .pro-card .card-header,
body .digital-card.pro-card .pro-card-ribbon,
body .digital-card.pro-card .pro-top,
.lp-local-ribbon{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  padding:20px 24px 12px!important;
  white-space:nowrap!important;
  line-height:1!important;
}

/* Left label: premium micro-copy */
body .pro-card .pro-card-ribbon > :first-child,
body .pro-card .pro-top > :first-child,
body .pro-card .public-card-header > :first-child,
body .pro-card .card-header > :first-child,
.lp-local-ribbon > :first-child{
  justify-self:start!important;
  text-align:left!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:.64rem!important;
  font-weight:1000!important;
  letter-spacing:.155em!important;
  text-transform:uppercase!important;
  opacity:.92!important;
  color:var(--role-misc-text-final, var(--final-button-bg, var(--role-misc-text, #2563eb)))!important;
}

/* Right label: DigiSign.click badge */
body .pro-card .pro-card-ribbon > :last-child,
body .pro-card .pro-top > :last-child,
body .pro-card .public-card-header > :last-child,
body .pro-card .card-header > :last-child,
.lp-local-ribbon > :last-child{
  justify-self:end!important;
  text-align:right!important;
  margin-left:auto!important;
  min-width:max-content!important;
  max-width:none!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  font-size:.76rem!important;
  font-weight:1000!important;
  letter-spacing:-.035em!important;
  text-transform:none!important;
  line-height:1!important;
  padding:7px 10px 8px!important;
  border-radius:999px!important;
  color:var(--role-interface-text-final, var(--pro-text, #111827))!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.42))!important;
  border:1px solid rgba(15,23,42,.08)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 24px rgba(15,23,42,.08)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
}

/* If right side is a link or span, keep the badge clean */
body .pro-card .pro-card-ribbon span:last-child,
body .pro-card .pro-top span:last-child,
body .pro-card .public-card-header span:last-child,
body .pro-card .card-header span:last-child,
body .pro-card .pro-card-ribbon a:last-child,
body .pro-card .pro-top a:last-child,
body .pro-card .public-card-header a:last-child,
body .pro-card .card-header a:last-child{
  text-decoration:none!important;
}

/* Local admin preview same style */
.lp-local-ribbon{
  padding:20px 24px 12px!important;
}
.lp-local-ribbon > :last-child{
  color:var(--fgText, #111827)!important;
}

/* Mobile refinement: still one row, no wrap */
@media(max-width:560px){
  body .pro-card .pro-card-ribbon,
  body .pro-card .pro-top,
  body .pro-card .public-card-header,
  body .pro-card .card-header,
  .lp-local-ribbon{
    padding:18px 18px 10px!important;
    gap:8px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  body .pro-card .pro-card-ribbon > :first-child,
  body .pro-card .pro-top > :first-child,
  body .pro-card .public-card-header > :first-child,
  body .pro-card .card-header > :first-child,
  .lp-local-ribbon > :first-child{
    font-size:.58rem!important;
    letter-spacing:.135em!important;
  }

  body .pro-card .pro-card-ribbon > :last-child,
  body .pro-card .pro-top > :last-child,
  body .pro-card .public-card-header > :last-child,
  body .pro-card .card-header > :last-child,
  .lp-local-ribbon > :last-child{
    font-size:.68rem!important;
    padding:6px 9px 7px!important;
  }
}

@media(max-width:390px){
  body .pro-card .pro-card-ribbon,
  body .pro-card .pro-top,
  body .pro-card .public-card-header,
  body .pro-card .card-header,
  .lp-local-ribbon{
    padding-left:16px!important;
    padding-right:16px!important;
    gap:6px!important;
  }

  body .pro-card .pro-card-ribbon > :first-child,
  body .pro-card .pro-top > :first-child,
  body .pro-card .public-card-header > :first-child,
  body .pro-card .card-header > :first-child,
  .lp-local-ribbon > :first-child{
    font-size:.54rem!important;
    letter-spacing:.115em!important;
  }

  body .pro-card .pro-card-ribbon > :last-child,
  body .pro-card .pro-top > :last-child,
  body .pro-card .public-card-header > :last-child,
  body .pro-card .card-header > :last-child,
  .lp-local-ribbon > :last-child{
    font-size:.64rem!important;
    padding:6px 8px 7px!important;
  }
}


/* DigiSign.click V2.13.9 — Stable admin restore + hard public suspend gate */



/* =========================================================
   DigiSign.click V2.14.0 — Stable Company Status Control
   Visible Active / Hold / Suspended / Inactive controls.
   ========================================================= */
.company-status-control-card{
  border:1px solid #d8e7f8;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border-radius:26px;
  padding:18px;
  margin:18px 0;
  box-shadow:0 18px 48px rgba(15,39,68,.08);
}
.company-status-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  border-bottom:1px solid #e2edf8;
  padding-bottom:14px;
  margin-bottom:14px;
}
.company-status-head h3{
  margin:0;
  color:#0f2744;
  font-size:1.2rem;
  font-weight:1000;
}
.company-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:8px 12px;
  font-size:.72rem;
  font-weight:1000;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid transparent;
  white-space:nowrap;
}
.company-status-badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
  margin-right:7px;
}
.company-status-badge.status-active{color:#087f5b;background:#e9fff6;border-color:#b7f2dc}
.company-status-badge.status-hold{color:#946200;background:#fff7db;border-color:#ffe08a}
.company-status-badge.status-suspended{color:#b42318;background:#fff0ed;border-color:#ffc3bb}
.company-status-badge.status-inactive{color:#475569;background:#f1f5f9;border-color:#d8e0ea}
.company-status-actions{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.status-action{
  border:1px solid #d8e7f8;
  border-radius:16px;
  padding:12px 10px;
  background:#fff;
  color:#0f2744;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(15,39,68,.06);
}
.status-action.active{background:#e9fff6;color:#087f5b;border-color:#b7f2dc}
.status-action.hold{background:#fff7db;color:#946200;border-color:#ffe08a}
.status-action.suspended{background:#fff0ed;color:#b42318;border-color:#ffc3bb}
.status-action.inactive{background:#f1f5f9;color:#475569;border-color:#d8e0ea}
.status-action.is-selected{
  outline:3px solid rgba(37,99,235,.20);
  box-shadow:0 0 0 1px rgba(37,99,235,.25),0 14px 30px rgba(15,39,68,.10);
}
.company-status-help{
  margin-top:12px;
  border:1px dashed #bdd2ed;
  background:#f8fbff;
  border-radius:16px;
  padding:12px;
  color:#64748b;
  font-weight:850;
  line-height:1.45;
}
@media(max-width:760px){
  .company-status-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:460px){
  .company-status-actions{grid-template-columns:1fr}
  .company-status-head{flex-direction:column}
}