/* eil-social-badge — reads only --eil-* tokens */
.skinbar{display:flex;gap:8px;align-items:center;padding:10px 16px;font:600 12px/1 sans-serif;letter-spacing:.12em;background:#111;color:#999}
.skinpill{border:1px solid #555;background:none;color:#ddd;border-radius:999px;padding:6px 14px;cursor:pointer}
.skinpill[aria-pressed="true"]{background:#fff;color:#111;border-color:#fff}

.eil-social{background:var(--eil-bg);color:var(--eil-text);font-family:var(--eil-font-body)}
.eil-social-head{max-width:760px;margin:0 auto;padding:var(--eil-pad) clamp(20px,4vw,48px) 12px;text-align:center}
.eil-social h1{font-family:var(--eil-font-display);color:var(--eil-heading);font-size:clamp(1.9rem,1.3rem+2.4vw,3rem);line-height:1.12;margin:0 0 .4em;text-wrap:balance}
.eil-eyebrow{font-weight:600;letter-spacing:var(--eil-eyebrow-tracking);text-transform:var(--eil-eyebrow-transform);color:var(--eil-accent-text);font-size:.8rem;margin:0 0 14px}
.eil-lede{font-size:clamp(1rem,.95rem+.35vw,1.15rem);line-height:1.6;color:var(--eil-text-dim);max-width:56ch;margin:0 auto 14px}
.eil-privacy{font-size:.88rem;color:var(--eil-accent-text);margin:0}

.eil-social-tool{max-width:760px;margin:0 auto;padding:28px clamp(20px,4vw,48px) var(--eil-pad)}
.eil-drop{position:relative;border:2px dashed var(--eil-border);border-radius:var(--eil-radius);padding:44px 20px;text-align:center;background:var(--eil-surface)}
.eil-drop.over{border-color:var(--eil-accent);background:var(--eil-surface-2)}
.eil-drop.has-photo{padding:18px}
.eil-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.eil-drop label{color:var(--eil-text-dim)}
.eil-drop label strong{color:var(--eil-accent-text)}

.eil-preview-wrap{margin-top:22px;display:grid;gap:20px}
#preview{width:100%;max-width:520px;height:auto;margin:0 auto;border-radius:var(--eil-radius);box-shadow:var(--eil-shadow);border:1px solid var(--eil-border)}
.eil-controls{display:grid;gap:16px;justify-items:center}
.eil-controls label{display:flex;gap:12px;align-items:center;color:var(--eil-text-dim);font-size:.92rem}
.eil-controls input[type=range]{width:220px;accent-color:var(--eil-accent)}
.eil-dl{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.eil-btn{font-weight:600;letter-spacing:.05em;padding:12px 22px;border-radius:var(--eil-radius-sm);border:1px solid var(--eil-accent);color:var(--eil-accent-text);background:none;cursor:pointer;font-size:.92rem}
.eil-btn-primary{background:var(--eil-accent);color:var(--eil-accent-ink)}
.eil-btn:focus-visible{outline:3px solid var(--eil-focus);outline-offset:3px}
.eil-fine{font-size:.85rem;color:var(--eil-text-dim);text-align:center;margin:0}