*{box-sizing:border-box;margin:0;padding:0}
/* Scoped to #page (this widget's own container) — NOT :root. These names
   (--bg, --card, --text, --muted, --accent) collide with the site-wide dark
   theme tokens from styles.css; defining them on :root silently overrode
   the whole dashboard page's colors (body background, video-wall cards,
   buttons) with this widget's light theme. */
#page{--card:#ffffff;--text:#1a1a1a;--muted:#888;--accent:var(--brand-blue-deep,#0F63C4);--radius-card:20px;--font-display:'Playfair Display',serif;--font-body:'DM Sans',sans-serif;
  font-family:var(--font-body);
  width:100%;max-width:560px;background:var(--card);border-radius:var(--radius-card);box-shadow:0 8px 40px rgba(0,0,0,.10);overflow:hidden;position:relative;box-sizing:border-box;min-width:0;margin:0 auto}
#frame{width:100%;aspect-ratio:3/1;position:relative;overflow:hidden;background:#c9d6e3;cursor:default}
#bgImg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:120%;min-height:120%;pointer-events:none;transition:transform .05s linear, opacity .2s ease;opacity:1}
#bgImg.loading{opacity:0}
#frame.editing #bgImg{cursor:grab;pointer-events:auto}
#frame.editing{touch-action:none}
#bannerHint{display:none;position:absolute;inset:0;background:rgba(0,0,0,.32);color:#fff;font-size:13px;font-weight:500;letter-spacing:.04em;align-items:center;justify-content:center;gap:8px;pointer-events:none;transition:opacity .2s;font-family:var(--font-body);flex-direction:column}
#bannerHint small{font-size:11px;opacity:.75;font-weight:400}
#frame.editing:hover #bannerHint{display:flex}
#frame.editing{cursor:grab}
.overlay{position:absolute;border-radius:50%;background:#eee;border:3px solid #fff;box-shadow:0 4px 16px rgba(0,0,0,.18);overflow:hidden;z-index:10;user-select:none;touch-action:none}
.overlay img{width:100%;height:100%;object-fit:cover;border-radius:50%;pointer-events:none;transition:opacity .2s ease;opacity:1}
.overlay img.loading{opacity:0}
.overlay .img-hint{display:none;position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.42);color:#fff;font-size:11px;font-weight:600;letter-spacing:.03em;align-items:center;justify-content:center;text-align:center;line-height:1.3;font-family:var(--font-body);pointer-events:none}
.overlay.editable{cursor:grab}
.overlay.editable:hover .img-hint{display:flex}
#info{padding:80px 28px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0}
#bizToggleRow{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:13px;color:var(--text);font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s}
#bizToggleRow.visible{opacity:1;pointer-events:auto}
#bizToggle{width:36px;height:20px;border-radius:10px;background:#ddd;border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;padding:0}
#bizToggle::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
#bizToggle.on{background:var(--accent)}
#bizToggle.on::after{left:19px}
#name{font-family:var(--font-body);font-size:26px;font-weight:700;color:var(--text);outline:none;border-bottom:2px solid transparent;transition:border-color .2s,color .15s;min-width:60px;padding:2px 6px;border-radius:4px}
#name.is-placeholder{color:var(--muted);font-weight:500}
#name[contenteditable="true"]{border-bottom-color:var(--accent);background:#f0f5ff;border-radius:6px;color:#1a1a1a}
#businessSlug{font-family:var(--font-body);font-size:26px;font-weight:700;color:var(--text);outline:none;border-bottom:2px solid transparent;transition:border-color .2s,color .15s;min-width:60px;padding:2px 6px;border-radius:4px}
#businessSlug.is-placeholder{color:var(--muted);font-weight:500}
#businessSlug[contenteditable="true"]{border-bottom-color:var(--accent);background:#f0f5ff;border-radius:6px;color:#1a1a1a}
.contact-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:14px;color:var(--text);font-weight:400}
.contact-row a,.contact-row span{color:var(--text);text-decoration:none}
#phoneGroup{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
#cc{border:none;background:transparent;font-family:var(--font-body);font-size:14px;color:var(--muted);font-weight:500;cursor:pointer;outline:none;padding:2px}
#phone{outline:none;border-bottom:2px solid transparent;transition:border-color .2s;padding:1px 4px;border-radius:3px;min-width:40px}
#phone[contenteditable="true"]{border-bottom-color:var(--accent);background:#f0f5ff;color:#1a1a1a}
#email{color:var(--text);outline:none;border-bottom:2px solid transparent;transition:border-color .2s,color .15s;padding:1px 4px;border-radius:3px;font-size:14px}
#email.is-placeholder{color:var(--muted)}
#email[contenteditable="true"]{border-bottom-color:var(--accent);background:#f0f5ff;color:#1a1a1a}
#desc{margin-top:16px;width:100%;font-size:14px;color:var(--muted);line-height:1.6;outline:none;min-height:44px;padding:8px 10px;border-radius:8px;border:1.5px solid transparent;transition:border-color .2s,background .2s;text-align:center}
#desc[contenteditable="true"]{border-color:#ddd;background:#fafafa;text-align:left;color:#1a1a1a}
#desc a{color:var(--accent)}
#waMsg{width:100%;margin-top:10px;padding:8px 10px;border-radius:8px;border:1.5px solid #e0e0e0;font-family:var(--font-body);font-size:13px;color:#1a1a1a;resize:vertical;min-height:60px;display:none;background:#fafafa;outline:none;transition:border-color .2s}
#waMsg::placeholder{color:var(--muted)}
#waMsg:focus{border-color:var(--accent)}
#waMsg.visible{display:block}
#waLabel{font-size:12px;color:var(--text);margin-top:4px;text-align:left;width:100%;display:none}
#waLabel.visible{display:block}
#aboutView{width:100%;margin-top:10px;padding:8px 10px;border-radius:8px;border:1.5px solid rgba(0,0,0,.12);font-family:var(--font-body);font-size:13px;color:#1a1a1a;background:rgba(255,255,255,.9);line-height:1.6;white-space:pre-wrap;display:none;text-align:left}
#socials{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px;width:100%;box-sizing:border-box}
.soc-item{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;width:100%}
/* Scoped to #socials — a bare .social-btn rule here would also hit the
   auth modal's OAuth buttons (same class name, different markup), since
   this stylesheet loads after styles.css and would otherwise win the cascade. */
#socials .social-btn{width:42px;height:42px;border-radius:12px;background:#f2f2f2;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background .18s,transform .18s;flex-shrink:0}
#socials .social-btn:hover{background:#e6eefe;transform:translateY(-2px)}
#socials .social-btn img{width:20px;height:20px;object-fit:contain}
.soc-input{display:none;width:100%;font-size:11px;padding:4px 6px;border:1.5px solid #ddd;border-radius:6px;font-family:var(--font-body);outline:none;background:#fff;transition:border-color .2s;box-sizing:border-box;min-width:0}
.soc-input:focus{border-color:var(--accent)}
.editing-socials .soc-input{display:block}
#socials .social-btn.hidden-view{display:none}
/* #editToolbar (the "🎨 Card background color" toggle) sits directly above
   #colorRow (the swatches it reveals) — kept as close neighbors inside #info
   so the action and its selectors read as one group, both inside #page so
   they can use the widget's own scoped tokens. */
#editToolbar{display:none;margin-top:20px;justify-content:center}
#editToolbar.visible{display:flex}
#bgColorBtn{font-size:12px;font-weight:600;font-family:var(--font-body);padding:6px 14px;border-radius:20px;border:1.5px solid var(--accent);background:#fff;cursor:pointer;color:var(--accent);transition:background .2s,color .2s}
#bgColorBtn:hover{background:var(--accent);color:#fff}
#colorRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;justify-content:center;max-height:0;overflow:hidden;transition:max-height .3s}
#colorRow.open{max-height:80px}
.cp{width:28px;height:28px;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.15);border:2px solid transparent;transition:transform .15s,border-color .15s}
.cp:hover{transform:scale(1.15)}
.cp.active{border-color:#333}
#customColor{width:28px;height:28px;border-radius:50%;border:2px solid #ddd;cursor:pointer;padding:0;overflow:hidden}
.tool-label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
button.primary{padding:10px 32px;border-radius:12px;border:none;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;background:var(--brand-blue-deep,#0F63C4);color:#fff;cursor:pointer;transition:opacity .2s,transform .15s;letter-spacing:.02em}
button.primary:hover{opacity:.88;transform:translateY(-1px)}

/* #actions (Edit Info / Save) now lives inside #info, at the bottom of the
   white card — it can use #page's scoped tokens directly. Blue-outline
   style so it reads clearly against the white card instead of blending in. */
#actions{margin-top:22px;display:flex;justify-content:center;gap:10px}
button.ghost{padding:10px 24px;border-radius:12px;border:1.5px solid var(--accent);background:#fff;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--accent);cursor:pointer;transition:background .2s,color .2s}
button.ghost:hover{background:var(--accent);color:#fff}
input[type=file]{display:none}
@media(max-width:480px){#page{border-radius:0;box-shadow:none}#info{padding:70px 18px 20px}#name{font-size:22px}}