/* /assets/main.css */
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.container { max-width: 1120px; margin: 0 auto; padding: 16px; }
h1 { margin: 16px 0; font-size: 28px; }
h2 { margin: 8px 0 16px; font-size: 20px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 12px; }
.card { display: block; padding: 16px; border: 1px solid #8883; border-radius: 12px; text-decoration: none; color: inherit; background: #fff1; backdrop-filter: blur(2px); }
.card:hover { border-color: #09f8; box-shadow: 0 2px 10px #0002; }

.center { min-height: 60vh; display: grid; place-items: center; }
.btn { padding: 8px 12px; border-radius: 10px; border: 1px solid #09f; background: #09f; color: #fff; font-weight: 600; cursor: pointer; }
.btn.secondary { background: transparent; color: inherit; border-color: #8886; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.error { color: #c00; }

.small { opacity: .8; font-size: 12px; }
.hidden { display: none !important; }

.guild-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1200px){ .guild-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px){ .guild-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .guild-grid { grid-template-columns: 1fr; } }

.guild-card { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid #8883; background: #fff1; }
.guild-card.manageable { border-color: #2ecc71aa; box-shadow: 0 0 0 2px #2ecc7133 inset; }
.guild-head { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; }
.guild-icon { width: 54px; height: 54px; border-radius: 12px; background: #0002; display: grid; place-items: center; font-weight: 700; }
.guild-name { margin: 0; font-size: 15px; line-height: 1.2; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge { padding: 2px 6px; border-radius: 8px; font-size: 11px; border: 1px solid #8884; }
.badge.mgmt { background: #2ecc7122; border-color: #2ecc7166; }
.guild-meta { font-size: 12px; opacity: .85; display: flex; gap: 10px; }
.actions { display: grid; grid-auto-flow: column; gap: 8px; }

/* ====== Site scrollbar theme ====== */
html { scrollbar-color: #6b7280 transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: #6b7280;         /* slate-500 */
  border-radius: 999px;
  border: 2px solid transparent;     /* ring gap */
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; } /* slate-400 */
*::-webkit-scrollbar-corner { background: transparent; }

/* ====== Overflow guards ====== */
html, body { overflow-x: clip; }

/* media safety for wide embeds */
img, svg, video, canvas, iframe { max-width: 100%; }