.sg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.sg-card{background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.04);position:relative;padding-bottom:8px}
.sg-thumb{width:100%;padding-top:56%;background-size:cover;background-position:center}
.sg-title{font-size:16px;margin:10px 12px 6px;line-height:1.4}
.sg-title a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.sg-cmt{font-size:13px;color:#555;margin:0 12px 8px}
.sg-colors{display:flex;gap:6px;margin:0 12px 12px;align-items:center;flex-wrap:wrap}
.sg-colors-label{font-size:12px;color:#6b7280;width:100%}
.sg-colors span{display:inline-block;width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.08)}
.sg-fav-btn{position:absolute;right:8px;top:8px;background:#fff;border:1px solid #eee;border-radius:16px;padding:4px 8px;cursor:pointer}
.sg-fav-btn.is-fav{background:#ffeaa7;border-color:#ffd166}
.sg-ad{display:flex;align-items:center;justify-content:center;min-height:120px;color:#666;font-size:13px}
.sg-pagination{text-align:center;margin:24px 0}
.sg-cat-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.sg-cat-list{columns:2}
.sg-account{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.sg-sortbar .is-active{font-weight:700; text-decoration:underline; text-underline-offset:2px}


/* Lazy thumbs */
.sg-thumb[data-bg] { background-color:#f3f4f6; }
.sg-thumb.is-loaded { transition: background-image .2s ease-in-out; }

/* Favorites page root adopts same grid */
.sgs-root .sg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }


/* Simple Header (Minimal Topbar) */
.sgs-topbar{position:fixed;left:0;right:0;top:0;z-index:100002;border-bottom:1px solid #e5e7eb}
.sgs-topbar__inner{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.sgs-topbar__brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.sgs-topbar__brand img{height:28px;width:auto;display:block}
.sgs-topbar__title{font-weight:700;font-size:16px}
.sgs-topbar__nav{display:flex;align-items:center;gap:10px}
.sgs-topbar__link{padding:6px 10px;border-radius:8px;text-decoration:none;color:inherit}
.sgs-topbar__link:hover{background:#f3f4f6}
.sgs-topbar__catbtn{padding:6px 10px;border-radius:8px;background:#111827;color:#fff;border:0;cursor:pointer}
.sgs-topbar__catbtn:hover{opacity:.9}

/* Overlay close button */
.sgs-overlay__close{position:absolute;top:8px;right:8px;background:#111827;color:#fff;border:0;border-radius:8px;width:30px;height:30px;cursor:pointer}
.sgs-overlay__close:hover{opacity:.9}

/* Prevent background scroll when overlay open */
body.sgs-overlay-open { overflow: hidden; }

/* Robust visibility control */
.sgs-overlay[hidden]{ display:none !important; }
.sgs-overlay.is-open{ display:block; }

/* Strong guard: keep overlay hidden unless .is-open */
#sgs-overlay:not(.is-open){ visibility:hidden; opacity:0; pointer-events:none; }
#sgs-overlay.is-open{ visibility:visible; opacity:1; pointer-events:auto; transition:opacity .12s ease-out; }

/* Visibility guard */
#sgs-overlay[hidden]{ display:none !important; }
#sgs-overlay:not(.is-open){ visibility:hidden; opacity:0; pointer-events:none; }
#sgs-overlay.is-open{ visibility:visible; opacity:1; pointer-events:auto; transition:opacity .12s ease-out; }

/* Emergency visibility rule */
#sgs-overlay.is-open{ display:block !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; }