/* Socials Unlocked — shared look (owner: Misty). Use these vars in your components. */
@font-face{font-family:Marker;src:url('assets/marker.ttf')}
:root{--blue:#0a4fd6;--blue2:#1d8cff;--ink:#0b2a5b;--muted:#5a7299;--bg:#eef4ff;--line:#dbe7ff;--card:#fff;--ok:#137a3a;--okbg:#e1f7e7;--warn:#93610a;--warnbg:#fff4dc;--danger:#d62f2f;--r:16px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);max-width:520px;margin:0 auto;min-height:100vh}
.su-top{gap:8px;background:linear-gradient(135deg,var(--blue),var(--blue2));padding:16px 18px 64px;color:#fff;display:flex;align-items:center;justify-content:space-between}
.su-brand{font-family:Marker;font-size:clamp(19px,6vw,26px);white-space:nowrap;letter-spacing:1px;text-shadow:2px 2px 0 #072f80}
.su-brand span{color:#bfe0ff}
.su-priv{font-size:11px;white-space:nowrap;flex-shrink:0;background:rgba(255,255,255,.2);padding:5px 9px;border-radius:12px}
.su-main{margin:-50px 14px 20px}
.su-card{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:0 6px 20px rgba(10,79,214,.15);margin-bottom:14px}
.su-h{font-size:12px;letter-spacing:1.5px;color:var(--blue2);margin:16px 0 8px;text-transform:uppercase}
.su-btn{display:block;width:100%;border:0;border-radius:12px;padding:12px;font-weight:700;font-size:14px;background:var(--blue);color:#fff;cursor:pointer}
.su-btn.ghost{background:#fff;color:var(--blue);border:2px dashed var(--blue2)}
.su-btn.danger{background:var(--danger)}
.su-input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px;font-size:14px;margin-bottom:8px}
.su-row{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:9px 11px;margin-bottom:8px}
.su-tag{font-size:10px;font-weight:700;padding:3px 7px;border-radius:8px;background:var(--warnbg);color:var(--warn)}
.su-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.su-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px}
.su-empty{text-align:center;color:var(--muted);font-size:13px;padding:20px}

@media (max-width:359px){.su-priv-t{display:none}.su-top{padding-left:12px;padding-right:12px}.su-brand{font-size:18px}}
.su-gear{width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.2);font-size:18px;cursor:pointer;flex-shrink:0}