:root{
  --bg: #ffffff;
  --text: #202124;
  --muted: #5f6368;
  --border: #dfe1e5;
  --shadow: 0 1px 6px rgba(32,33,36,.28);
  --shadowSoft: 0 1px 3px rgba(60,64,67,.18);
  --btn: #f8f9fa;
  --btnBorder: #dadce0;
  --link: #1a0dab;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font: 14px/1.4 Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--bg);
  display:flex;
  flex-direction:column;
}

a{ color: var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

.topbar{
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 16px;
}
.topbar__right{
  display:flex;
  align-items:center;
  gap: 14px;
}
.toplink{
  color: var(--text);
  font-size:13px;
}
.toplink:hover{ text-decoration:underline; }

.iconbtn{
  border:0;
  background:transparent;
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.iconbtn:hover{ background:#f1f3f4; }

.dots{
  width:18px; height:18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:2px;
}
.dots span{
  width:4px; height:4px;
  background:#5f6368;
  border-radius:50%;
}

.avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  border:0;
  cursor:pointer;
  background: #5955d9;
  color:#fff;
  font-weight:700;
}
.avatar span{ position:relative; top:1px; }

.main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top: 120px;
}

.logo{
  font-size: 92px;
  font-weight:700;
  letter-spacing:-1px;
  line-height:1;
  user-select:none;
}
.logo .b{color: #5955d9;}
.logo .r{color: #5955d9;}
.logo .y{color: #5955d9;}
.logo .b2{color: #5955d9;}
.logo .g{/* color: #0F9D58; */}
.logo .r2{/* color:#DB4437; */}

.search{
  width: min(584px, 92vw);
  margin-top: 28px;
}

.search__box{
  height:46px;
  border:1px solid var(--border);
  border-radius: 24px;
  display:flex;
  align-items:center;
  padding: 0 12px;
  gap: 10px;
  background:#fff;
}
.search__box:hover{ box-shadow: var(--shadowSoft); border-color: transparent; }
.search__box:focus-within{ box-shadow: var(--shadow); border-color: transparent; }

.search__icon{
  color: var(--muted);
  display:flex;
  align-items:center;
}
.search__input{
  flex:1;
  border:0;
  outline:none;
  font-size:16px;
  padding: 0;
  background:transparent;
  color: var(--text);
}

.search__mic, .search__lens{
  border:0;
  background:transparent;
  cursor:pointer;
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color: #5955d9;
}
.search__mic:hover, .search__lens:hover{ background:#f1f3f4; }

.actions{
  display:flex;
  justify-content:center;
  gap: 12px;
  margin-top: 24px;
}

.btn{
  background: var(--btn);
  border: 1px solid transparent;
  color: var(--text);
  padding: 10px 16px;
  border-radius: 4px;
  cursor:pointer;
  font-size:14px;
}
.btn:hover{
  border-color: var(--btnBorder);
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.btn:active{ transform: translateY(0.5px); }

.meta{
  margin-top: 18px;
  color: var(--muted);
  font-size:13px;
  text-align:center;
}
.meta__link{ margin-left:8px; }

/* Footer */
.footer{
  color: var(--muted);
  font-size:14px;
}
.footer__row{
  padding: 12px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
}
.footer__row--top{
  justify-content:flex-start;
}
.footer__group{
  display:flex;
  gap: 18px;
  flex-wrap:wrap;
  align-items:center;
}
.footer__group--center{
  flex:1;
  justify-content:center;
}
.footer__group--right{
  justify-content:flex-end;
}
.footer__link{
  color: var(--muted);
  font-size:14px;
}
.footer__link:hover{ text-decoration:underline; }

/* Suggestions dropdown */
.suggest{
  position:relative;
}
.suggest__list{
  list-style:none;
  margin: 6px 0 0;
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  background:#fff;
  overflow:hidden;
}
.suggest__item{
  padding: 10px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  cursor:pointer;
}
.suggest__item:hover,
.suggest__item[aria-selected="true"]{
  background:#f1f3f4;
}
.suggest__item .hint{
  color: var(--muted);
  font-size: 12px;
}

/* Small screens */
@media (max-width: 520px){
  .main{ padding-top: 70px; }
  .logo{ font-size: 70px; }
}


/* User menu (avatar dropdown) */
.userMenu{
  position: fixed;
  top: 58px;
  right: 16px;
  width: 320px;
  max-width: calc(100vw - 24px);
  background:#fff;
  border:1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 60;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.userMenu__hdr{
  display:flex;
  gap: 12px;
  align-items:center;
  padding-bottom: 10px;
}
.userMenu__avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#1a73e8;
  color:#fff;
  font-weight:700;
  font-size:16px;
}
.userMenu__meta{ min-width:0; }
.userMenu__name{ font-weight:700; }
.userMenu__email{
  color: var(--muted);
  font-size: 12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.userMenu__item{
  display:block;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--text);
  text-decoration:none;
}
.userMenu__item:hover{ background:#f1f3f4; text-decoration:none; }
.userMenu__sep{
  height:1px;
  background:#eceff1;
  margin: 8px 0;
}
.userMenu__btn{
  width:100%;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--btnBorder);
  background:#fff;
  cursor:pointer;
  font-weight:600;
}
.userMenu__btn:hover{ box-shadow: 0 1px 3px rgba(60,64,67,.18); }


/* Topbar mobile */
@media (max-width: 520px){
  .topbar__right .toplink{ display:none; }
}


/* Discord-style avatar when logged out */
.avatar--discord{
  background: #5865F2;
}
.avatar__icon{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
}
.avatar__icon svg{ width:18px; height:18px; }


/* Simple utility pages */
.pageShell{
  min-height: 100vh;
  background: var(--bg, #f8f9fa);
  color: var(--text, #202124);
}
.pageTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 18px;
}
.brandLink{
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  color: inherit;
  font-size: 18px;
}
.pageCard{
  max-width: 820px;
  margin: 10px auto 40px;
  background:#fff;
  border: 1px solid rgba(60,64,67,.14);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(60,64,67,.08);
}
.pageCard h1{
  font-size: 20px;
  margin: 0 0 10px;
}
.pageCard p{
  margin: 8px 0;
  color: rgba(32,33,36,.85);
  line-height: 1.5;
}
.kv{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 10px;
  margin-top: 12px;
}
.kv div{
  padding: 10px 12px;
  border: 1px solid rgba(60,64,67,.14);
  border-radius: 14px;
  background: #fff;
}
.kv .k{
  color: rgba(32,33,36,.65);
  font-weight: 700;
}
.btnRow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.btnLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(60,64,67,.14);
  text-decoration:none;
  color: inherit;
  font-weight: 700;
  background:#fff;
}
.btnLink:hover{ box-shadow: 0 1px 3px rgba(60,64,67,.18); }
.btnPrimary{
  background:#5865F2;
  border-color:#5865F2;
  color:#fff;
}
.smallMuted{ color: rgba(32,33,36,.65); font-size: 12px; }

.langSelect{
  margin-left:8px;
  padding:6px 10px;
  border:1px solid #dfe1e5;
  border-radius: 10px;
  background:#fff;
  color:#202124;
  font: 13px Arial, Helvetica, sans-serif;
}

.dLang{
  padding:7px 10px;
  border:1px solid #dfe1e5;
  border-radius: 10px;
  background:#fff;
  color:#202124;
  font: 13px Arial, Helvetica, sans-serif;
}

/* Details layout */
.dHeader{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom: 10px;
}
.dGuildIcon{
  width:56px;height:56px;border-radius:18px;
  border:1px solid rgba(60,64,67,.14);
  background:#f8f9fa;
  overflow:hidden;
  display:grid;place-items:center;
  font-weight:800;
  color:#5865F2;
  flex:0 0 auto;
}
.dGuildIcon img{width:100%;height:100%;object-fit:cover;display:block}
.dTitleWrap{min-width:0}
.dTitleWrap .smallMuted{margin-top:2px}
.dRow{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:12px;
  padding:10px 0;
  border-top:1px solid rgba(60,64,67,.10);
}
.dRow:first-child{border-top:0}
.dKey{color:#5f6368;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.dVal{color:#202124;min-width:0}
.dPills{display:flex;flex-wrap:wrap;gap:8px}
.dPill{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 10px;border:1px solid rgba(60,64,67,.14);
  border-radius:999px;background:#fff;color:#1a0dab;font-weight:700;font-size:12px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dPill:hover{text-decoration:underline}
.dLink{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:12px;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(60,64,67,.14);background:#fff;color:#1a0dab;font-weight:800;
}
.dLinkPrimary{
  background: #1a73e8;
  border-color:#1a73e8;
  color:#fff;
  text-decoration:none;
}
.dLinkPrimary:hover{filter:brightness(.98)}
@media (max-width: 640px){
  .dRow{grid-template-columns: 1fr}
  .dKey{margin-bottom:4px}
}

.pageWrap{max-width:980px;margin:0 auto;padding:24px 16px;}
.pageCard{background:#fff;border:1px solid rgba(60,64,67,.14);border-radius:18px;padding:18px;box-shadow:0 1px 3px rgba(60,64,67,.08);} .pageTitle{margin:0 0 10px;font-size:22px;} .pageBody{color:#202124;line-height:1.6;font-size:14px;}

/* Featured advertisement banner */
.adSlot{max-width:720px;margin:14px auto 0;position:relative;}
.adSlot--results{max-width:920px;margin:12px auto 10px;}
.adBadge{position:absolute;top:-10px;left:14px;background: #5955d9;color:#fff;font-size:12px;padding:4px 8px;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.12);}
.adMain{display:flex;text-decoration: none !important;align-items:center;gap:12px;background:#fff;border:1px solid rgba(60,64,67,.18);border-radius:16px;padding:12px 14px;text-decoration:none;color:#202124;box-shadow:0 1px 3px rgba(60,64,67,.12);}
.adMain:hover{border-color:rgba(26,115,232,.35);text-decoration: none !important;box-shadow:0 2px 10px rgba(26,115,232,.12);}
.adIcon{width:44px;height:44px;border-radius:12px;object-fit:cover;background:#f1f3f4;flex:0 0 auto;}
.adText{flex:1 1 auto;min-width:0;}
.adTitle{font-weight:600;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.adDesc{font-size:13px;color:#5f6368;line-height:1.2;margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.adCta{flex:0 0 auto;background: #5955d9;color:#fff;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:600;}
@media (max-width:720px){
  .adSlot{max-width:calc(100% - 24px);margin-top:10px;}
  .adSlot--results{max-width:calc(100% - 16px);}
  .adMain{border-radius:14px;padding:10px 12px;}
  .adIcon{width:40px;height:40px;border-radius:10px;}
}


/* Icon fallback (when no CDN icon/avatar is available) */
.expItem__icon--fallback{display:flex;align-items:center;justify-content:center;font-weight:900;color:#5f6368;font-size:14px;}