/* ==========================================================================
   iYabbr - cozy 2000s social network styles
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --font: Verdana, Tahoma, Geneva, "DejaVu Sans", sans-serif;
  --font-head: "Trebuchet MS", Verdana, sans-serif;

  /* Site chrome (header/footer never change with profile themes) */
  --site-top-1: #3a6fc4;
  --site-top-2: #1d4f9e;
  --site-nav: #6d9ee8;
  --site-nav-edge: #4f82d0;

  /* Content tokens (profile themes override these) */
  --page-bg: #e5ecf6;
  --page-bg-image: none;
  --ink: #1b1b2a;
  --muted: #6b6b7b;
  --link: #003399;
  --link-hover: #cc3300;
  --box-bg: #ffffff;
  --box-border: 1px solid #7fa6e2;
  --box-shadow: none;
  --box-head-bg: #cfe0fa;
  --box-head-ink: #ff6a00;
  --accent-bg: #ffe2c6;
  --accent-ink: #ff6a00;
  --label-bg: #d6e6fa;
  --label-ink: #1d4f9e;
  --contact-bg: #f2f7ff;
  --contact-ink: #1d4f9e;
  --count: #d0021b;
  --online: #1c9a1c;
  --btn-1: #fdfdfd;
  --btn-2: #d9e3f2;
  --btn-border: #7a93bd;
  --btn-ink: #1d3f7a;
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page-bg) var(--page-bg-image);
  color: var(--ink);
  font: 12px/1.5 var(--font);
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
img { border: 0; }
img.px { image-rendering: pixelated; image-rendering: crisp-edges; }
.emo { vertical-align: -3px; }
p { margin: 0 0 8px; }
small { font-size: 10px; }
.muted { color: var(--muted); }
.right { text-align: right; }
.count { color: var(--count); font-weight: bold; }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 10px; }
.page { padding: 12px 0 20px; flex: 1; }
code { font-size: 11px; background: rgba(0, 0, 0, .06); padding: 1px 4px; }

/* ---- Header ------------------------------------------------------------- */
/* Glossy "Web 2.0" bars: a light top half over a deeper bottom half */
.site-header { font-family: var(--font); position: relative; z-index: 50; }
.topbar {
  background: linear-gradient(#5a90e0, #3a72c8 48%, #245bb3 52%, #1d4f9e);
  border-bottom: 1px solid #103a7a;
  color: #fff;
}
.topbar-row { display: flex; align-items: center; gap: 14px; height: 50px; }
.logo { display: flex; align-items: center; gap: 5px; color: #fff; text-decoration: none; flex: none; }
.logo:hover { color: #fff; }
.logo img { width: 30px; height: 30px; }
.logo-text {
  font: bold 24px/1 var(--font-head);
  letter-spacing: -1px;
  text-shadow: 0 1px 0 #0f356f, 0 0 8px rgba(255, 255, 255, .3);
}
.logo-text small { font-size: 12px; letter-spacing: 0; font-weight: normal; opacity: .85; }

/* Pill search */
.search {
  flex: 1; max-width: 420px; margin: 0 auto;
  display: flex; align-items: center;
  height: 28px; background: #fff; border: 1px solid #103a7a; border-radius: 14px;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .18), 0 1px 0 rgba(255, 255, 255, .25);
  overflow: hidden;
}
.search select {
  border: 0; border-right: 1px solid #c9d6ea; height: 100%; padding: 0 4px 0 10px;
  font: bold 11px var(--font); color: #1d4f9e; background: #eef4fd; outline-offset: -2px;
}
.search input { flex: 1; min-width: 0; border: 0; height: 100%; padding: 0 8px; font: 12px var(--font); background: transparent; outline-offset: -2px; }
.search button {
  flex: none; width: 34px; height: 100%; border: 0; border-left: 1px solid #c9d6ea; cursor: pointer;
  background: linear-gradient(#fff, #e4ecf8 50%, #d3e0f3 51%, #e6eefa);
  display: grid; place-items: center;
}
.search button:hover { background: linear-gradient(#fff, #fff1dc 50%, #ffdcae 51%, #ffe9c8); }

/* Quick notification buttons + user menu */
.quick { display: flex; align-items: center; gap: 4px; flex: none; }
.quick-btn {
  position: relative; display: grid; place-items: center;
  width: 32px; height: 30px; border-radius: 5px;
  border: 1px solid transparent;
}
.quick-btn:hover, .user-menu summary:hover, .user-menu[open] summary {
  background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, .05) 51%, rgba(255, 255, 255, .15));
  border-color: rgba(255, 255, 255, .35);
}
.badge {
  position: absolute; top: -3px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: linear-gradient(#ff6b6b, #e0101f 55%, #b8000f);
  border: 1.5px solid #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  color: #fff; font: bold 9px/13px var(--font); text-align: center;
}

.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; opacity: .8; }
.user-menu summary {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 3px; margin-left: 4px;
  border: 1px solid transparent; border-radius: 5px; color: #fff; font-weight: bold; font-size: 11px;
}
.user-menu summary img { border: 1px solid #fff; border-radius: 3px; }
.menu-panel {
  position: absolute; z-index: 20; right: 0; top: calc(100% + 6px); min-width: 200px; /* above the navigation bar below it */
  background: #fff; border: 1px solid #7fa6e2; border-radius: 4px;
  box-shadow: 0 6px 18px rgba(16, 58, 122, .3);
  padding: 4px; display: grid; color: var(--ink);
  font-size: 12px; text-align: left; white-space: nowrap;
}
.menu-panel a {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 3px;
  color: #1d3f7a; text-decoration: none;
}
.menu-panel a:hover { background: linear-gradient(#eef4fd, #dbe7f9); color: #1d3f7a; }
.menu-sep { border-top: 1px dotted #b8cbe8; margin-top: 3px; border-radius: 0 0 3px 3px !important; }
.menu-head { display: flex; gap: 8px; align-items: center; padding: 6px 8px 8px; margin-bottom: 3px; border-bottom: 1px dotted #b8cbe8; font-size: 11px; }
.menu-head img:first-child { border: 1px solid #b8cbe8; }

.auth-links { display: flex; gap: 6px; flex: none; }
.btn-glass { --btn-1: rgba(255, 255, 255, .95); --btn-2: #cfdff6; }

/* Nav: compact glossy icon buttons */
.navbar {
  background: linear-gradient(#9dc0f4, #7aa6ea 50%, #6a99e3 51%, #74a2e8);
  border-bottom: 1px solid #4f82d0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 4px rgba(16, 58, 122, .15);
}
.navbar-row { display: flex; align-items: center; gap: 2px; height: 34px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 9px; border-radius: 4px; border: 1px solid transparent;
  color: #fff; font: bold 11px var(--font); text-decoration: none; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(16, 58, 122, .6);
}
.nav-icon { position: relative; display: grid; place-items: center; }
.nav-icon .badge { top: -8px; right: -10px; }
.nav-icon:has(.badge) { margin-right: 7px; }
.nav-item:hover, .nav-more[open] > summary {
  color: #fff;
  background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .08) 51%, rgba(255, 255, 255, .25));
  border-color: rgba(255, 255, 255, .5);
}
.nav-item[aria-current] {
  color: #1d4f9e; text-shadow: none;
  background: linear-gradient(#fff, #f1f6ff 50%, #dfeafb 51%, #eef4fd);
  border-color: #4f82d0;
  box-shadow: 0 1px 2px rgba(16, 58, 122, .25);
}
.nav-more { margin-left: auto; }
.nav-more .caret { margin-left: 1px; }
.nav-more .menu-panel { min-width: 180px; }
.mobile-only { display: none !important; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: #fff; border-top: 1px solid #b8cbe8; padding: 14px 0; text-align: center; font-size: 10px; color: #555; }
.site-footer a { color: #003399; }
.footer-links { margin-bottom: 4px; }

/* On profiles the footer blends into the member's layout: a small box in the layout's own colors. */
.profile-page .site-footer { background: none; border-top: 0; padding: 0 0 16px; }
.profile-page .site-footer .wrap {
  background: var(--box-bg); border: var(--box-border); border-radius: var(--box-radius, 0); box-shadow: var(--box-shadow);
  padding: 8px 10px; color: var(--muted);
}
.profile-page .site-footer a { color: var(--link); }

/* ---- Buttons & forms ---------------------------------------------------- */
.btn {
  display: inline-block;
  font: bold 11px var(--font);
  color: var(--btn-ink);
  background: linear-gradient(var(--btn-1), var(--btn-2));
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  padding: 3px 10px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #fff;
}
.btn:hover { background: linear-gradient(#fff, #c5d6ef); color: var(--btn-ink); }
.btn:active { transform: translateY(1px); }
.btn-small { padding: 2px 8px; }
.btn-orange { --btn-1: #ffc27a; --btn-2: #ff8a1f; --btn-border: #c85a10; --btn-ink: #fff; text-shadow: 0 1px 0 #b34d00; }
.btn-orange:hover { background: linear-gradient(#ffd29a, #ff7a00); color: #fff; }
.btn-big { font-size: 15px; padding: 7px 22px; --btn-1: #ffc27a; --btn-2: #ff8a1f; --btn-border: #c85a10; --btn-ink: #fff; text-shadow: 0 1px 0 #b34d00; }
.btn-big:hover { background: linear-gradient(#ffd29a, #ff7a00); color: #fff; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select {
  font: 12px var(--font);
  border: 1px solid #7f9db9;
  padding: 3px 4px;
  background: #fff;
  color: #1b1b2a;
}
input:focus, textarea:focus, select:focus { outline: 2px solid #ffb35c; outline-offset: 0; }

/* ---- Layout ------------------------------------------------------------- */
.cols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 12px; align-items: start; }
.cols-landing { grid-template-columns: minmax(0, 1fr) 280px; }

/* ---- Boxes -------------------------------------------------------------- */
.box {
  background: var(--box-bg);
  border: var(--box-border);
  border-radius: var(--box-radius, 0);
  box-shadow: var(--box-shadow);
  margin-bottom: 12px;
}
.box > .box-head:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.box-head {
  margin: 0;
  padding: 3px 7px;
  background: var(--box-head-bg);
  color: var(--box-head-ink);
  font: bold 12px/1.5 var(--font);
}
.box-head.accent { background: var(--accent-bg); color: var(--accent-ink); }
.box-head small { font-weight: normal; }
.box-head a { color: var(--link); }
.head-links { float: right; }
.box-body { padding: 8px; margin: 0; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 2px 0; display: flex; align-items: center; gap: 5px; }

/* key/value tables (interests, details) */
.kv { width: 100%; border-collapse: separate; border-spacing: 3px; }
.kv th, .kv td { vertical-align: top; text-align: left; padding: 3px 5px; }
.kv th { width: 92px; background: var(--label-bg); color: var(--label-ink); font-size: 11px; }
.kv td { word-break: break-word; }

/* ==========================================================================
   Profile
   ========================================================================== */

.pf-card { padding: 8px; }
.pf-name { margin: 0 0 6px; font: bold 16px/1.2 var(--font-head); color: var(--ink); word-break: break-word; }
.pf-card-body { display: flex; gap: 10px; }
.pf-photo { flex: none; width: 150px; height: 150px; border: 1px solid rgba(0, 0, 0, .15); }
.pf-facts { font-size: 11px; min-width: 0; }
.pf-headline { font-style: italic; }
.online { color: var(--online); font-weight: bold; display: flex; align-items: center; gap: 3px; font-size: 11px; }
.online.small { font-size: 10px; justify-content: center; margin-top: 3px; }
.last-login { font-size: 10px; color: var(--muted); }
.pf-mood, .pf-viewmy { margin: 6px 0 0; font-size: 11px; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 10px; background: var(--contact-bg); }
.contact-link { display: flex; align-items: center; gap: 6px; font: bold 10px var(--font); color: var(--contact-ink); text-decoration: none; }
.contact-link:hover { text-decoration: underline; color: var(--contact-ink); }

.url-box { padding: 8px; font-size: 11px; word-break: break-all; }

.extended { padding: 22px 12px; text-align: center; font: bold 16px/1.3 var(--font-head); color: var(--ink); }
.status-box { padding: 8px 10px; display: flex; align-items: flex-start; gap: 8px; }
.status-box small { color: var(--muted); margin-left: 4px; }

.blog-list { list-style: none; padding: 0; margin: 0 0 8px; }
.blog-list li { padding: 3px 0; }
.blog-list img { vertical-align: -3px; }
.blog-list small { color: var(--muted); margin-left: 4px; }

.blurbs h3 { margin: 4px 0 6px; font-size: 12px; color: var(--blurb-ink, var(--accent-ink)); }
.blurbs h3 + p { margin-top: 0; }
.blurbs p { word-break: break-word; }

.friend-count { margin-bottom: 10px; }
.top8 { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; text-align: center; }
.top8 a { text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.top8-name { font-size: 11px; font-weight: bold; text-decoration: underline; word-break: break-word; }
.top8 img { width: 90px; height: 90px; max-width: 100%; height: auto; aspect-ratio: 1; border: 1px solid rgba(0, 0, 0, .15); }
.top8 a:hover img { outline: 2px solid var(--box-head-ink); }

.comment-meta { font-size: 11px; }
.comments { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
.comments td { vertical-align: top; padding: 6px; }
.comment-who { width: 118px; background: var(--label-bg); text-align: center; font-size: 11px; font-weight: bold; }
.comment-who a img { margin-top: 3px; width: 80px; height: 80px; }
.comment-body { background: rgba(127, 127, 127, .06); word-break: break-word; }
.comment-date { display: block; font-size: 10px; font-weight: bold; color: var(--muted); margin-bottom: 4px; }
.add-comment { display: grid; gap: 5px; margin-top: 8px; }
.add-comment textarea { width: 100%; resize: vertical; }
.add-comment .btn { justify-self: start; }
.comment-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.comment-actions form { margin: 0; }
.comment-actions .link-btn { font-size: 10px; color: var(--muted); }
.comment-note { margin: 10px 0 0; font-size: 11px; color: var(--muted); }
.emo-picker { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.emo-picker button { border: 1px solid transparent; background: none; padding: 3px; border-radius: 3px; cursor: pointer; line-height: 0; }
.emo-picker button:hover { border-color: #b8cbe8; background: #fff; }
.emo-picker .emo-glitter { line-height: 1.4; font: bold 10px var(--font); color: #ff2fa0; padding: 3px 6px; margin-left: 4px; border-color: #ffc2e2; }

/* ---- Profile song player (click to play, 2006 flash-player style) -------- */
.player { padding: 6px; background: linear-gradient(#f4f4f4, #cfcfcf); border: 1px solid #8c8c8c; }
.player-screen {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(#1a1f14, #0b0e08);
  border: 1px solid #000; border-radius: 3px;
  padding: 6px 8px; color: #9dff6a; font-size: 10px;
  box-shadow: inset 0 0 8px rgba(157, 255, 106, .2);
}
.player-btn {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #555; background: linear-gradient(#fff, #bbb); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.player-btn:hover { background: linear-gradient(#fff, #ddd); }
.i-play { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #222; margin-left: 3px; }
.playing .i-play { width: 10px; height: 12px; border: 0; border-left: 3px solid #222; border-right: 3px solid #222; margin: 0; }
.player-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.player-meta b { color: #d8ffc0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-label { text-transform: uppercase; letter-spacing: 1px; font-size: 9px; opacity: .8; }
.eq { margin-left: auto; display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.eq i { width: 3px; height: 3px; background: #9dff6a; }
.playing .eq i { animation: eq .6s ease-in-out infinite alternate; }
.playing .eq i:nth-child(2) { animation-delay: -.2s; }
.playing .eq i:nth-child(3) { animation-delay: -.4s; }
.playing .eq i:nth-child(4) { animation-delay: -.1s; }
.playing .eq i:nth-child(5) { animation-delay: -.3s; }
@keyframes eq { from { height: 3px; } to { height: 18px; } }
.player-bar { height: 4px; background: #999; margin-top: 6px; border-radius: 2px; overflow: hidden; }
.player-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff8a1f, #ffd42a); }
.playing .player-bar span { animation: progress 30s linear forwards; }
.player-link { display: block; margin-top: 5px; font-size: 10px; font-weight: bold; color: #333; text-align: right; }
.player-frame { margin-top: 6px; border: 1px solid #000; background: #000; }
.player-frame iframe { display: block; width: 100%; border: 0; }

/* Band playlist: the same player with a track list under the screen */
.playlist-tracks { list-style: none; margin: 6px 0 0; padding: 0; background: #fff; border: 1px solid #8c8c8c; max-height: 190px; overflow-y: auto; }
.playlist-tracks li + li { border-top: 1px dotted #ccc; }
.track { display: flex; align-items: baseline; gap: 5px; width: 100%; padding: 4px 6px; border: 0; background: none; font: 11px var(--font); color: #222; text-align: left; cursor: pointer; }
.track:hover { background: #eef3fb; }
.track-no { color: #888; min-width: 16px; }
.track-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track small { color: #888; font-size: 9px; }
.track.is-current { background: #1a1f14; color: #9dff6a; font-weight: bold; }
.track.is-current .track-no, .track.is-current small { color: #7ccf52; }
.playlist:not(.playing) .track.is-current { background: #e4ecd8; color: #2a4a12; }

/* Upcoming shows: little tear-off calendar dates */
.show-list { list-style: none; margin: 0; padding: 0; }
.show-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.show-list li + li { border-top: 1px dotted var(--border, #ccc); }
.show-date {
  flex: none; width: 42px; text-align: center; font-size: 9px; font-weight: bold; line-height: 1.1;
  color: #fff; background: #c8102e; border: 1px solid #8a0a1f; border-radius: 3px; padding-top: 2px; overflow: hidden;
}
.show-date b { display: block; margin-top: 2px; padding: 2px 0; font-size: 16px; color: #222; background: #fff; }
.show-info { flex: 1; min-width: 0; word-break: break-word; }

/* Edit Profile > Band / Artist */
.band-rows { list-style: none; margin: 0 0 10px; padding: 0; }
.band-rows li { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px dotted #ccc; }
.band-rows li > span { flex: 1; min-width: 0; word-break: break-word; }
.band-rows form { display: inline; margin: 0; }
.band-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; align-items: end; }
.band-add label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: bold; }
[data-provider] .i-play { margin-left: 3px; }
[data-provider].playing .i-play { width: 11px; height: 11px; background: #222; border: 0; margin: 0; } /* stop square */
@keyframes progress { to { width: 100%; } }

/* ---- Glitter text ------------------------------------------------------- */
.glitter {
  font-weight: bold;
  background: linear-gradient(90deg, #ff2fa0, #ffae00, #1fa8ff, #9a4ad8, #ff2fa0) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: glitter 3s linear infinite;
  text-shadow: none;
}
@keyframes glitter { to { background-position: 300% 0; } }

/* ==========================================================================
   Profile themes (users will be able to build their own later)
   ========================================================================== */

/* Candy: bold black boxes on a pastel patchwork, like the classic custom layouts */
.theme-candy {
  --page-bg: #ffd9e8;
  --page-bg-image: url("/img/bg/candy.gif");
  --box-border: 4px solid #111;
  --box-head-bg: transparent;
  --box-head-ink: #f29a00;
  --accent-bg: transparent;
  --accent-ink: #f29a00;
  --link: #1f9a1f;
  --link-hover: #ff3d9a;
  --label-bg: #fff4c4;
  --label-ink: #d97800;
  --contact-bg: #fff;
  --contact-ink: #1b1b2a;
  --muted: #7a6a70;
}
.theme-candy .box-head { font-size: 13px; padding-top: 6px; }
.theme-candy .pf-name { color: #f29a00; }

/* Midnight: twinkling stars, glowing pink boxes and glitter headings */
.theme-midnight {
  --page-bg: #0d0d2e;
  --page-bg-image: url("/img/bg/stars.gif");
  --ink: #ecebff;
  --muted: #a9a6d6;
  --link: #7fdcff;
  --link-hover: #ff9be6;
  --box-bg: rgba(13, 13, 46, .88);
  --box-border: 2px solid #ff5ecf;
  --box-shadow: 0 0 10px rgba(255, 94, 207, .45);
  --box-head-bg: rgba(255, 94, 207, .12);
  --box-head-ink: #ff9be6;
  --accent-bg: rgba(127, 220, 255, .1);
  --accent-ink: #7fdcff;
  --label-bg: rgba(255, 255, 255, .07);
  --label-ink: #ff9be6;
  --contact-bg: rgba(255, 255, 255, .04);
  --contact-ink: #ecebff;
  --count: #ff5ecf;
  --online: #7dff7d;
}
.theme-midnight .box-head,
.theme-midnight .pf-name,
.theme-midnight .extended {
  background-image: linear-gradient(90deg, #ff9be6, #fff, #7fdcff, #fff, #ff9be6);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: glitter 4s linear infinite;
}
.theme-midnight .box-head a { -webkit-text-fill-color: var(--link); }
.theme-midnight .comment-body { background: rgba(255, 255, 255, .04); }

/* Bubblegum: pink pixel hearts, dashed bubbly boxes and the most 2006 font ever */
.theme-bubblegum {
  --page-bg: #ffe0ec;
  --page-bg-image: url("/img/bg/hearts.gif");
  --ink: #5a1a3a;
  --muted: #a0607f;
  --link: #e0107a;
  --link-hover: #9a4ad8;
  --box-border: 3px dashed #ff90b4;
  --box-radius: 16px;
  --box-shadow: 0 4px 0 #ffc2da;
  --box-head-bg: #ffe0ec;
  --box-head-ink: #ff2fa0;
  --accent-bg: #f3e6ff;
  --accent-ink: #9a4ad8;
  --label-bg: #fff0f6;
  --label-ink: #e0107a;
  --contact-bg: #fff6fa;
  --contact-ink: #c2185b;
  --count: #ff2fa0;
}
.theme-bubblegum .page { font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive; }
.theme-bubblegum .pf-name { color: #ff2fa0; }
.theme-bubblegum .extended { color: #e0107a; }

/* Scene Kid: zebra stripes, hot pink + lime, glitter */
.theme-scene {
  --page-bg: #000;
  --page-bg-image: url("/img/bg/zebra.gif");
  --ink: #ffffff;
  --muted: #bbbbbb;
  --link: #a6ff00;
  --link-hover: #ff2fa0;
  --box-bg: rgba(0, 0, 0, .93);
  --box-border: 3px solid #ff2fa0;
  --box-shadow: 5px 5px 0 #a6ff00;
  --box-head-bg: #ff2fa0;
  --box-head-ink: #000;
  --accent-bg: #a6ff00;
  --accent-ink: #000;
  --blurb-ink: #a6ff00;
  --label-bg: #1c1c1c;
  --label-ink: #ff2fa0;
  --contact-bg: #111;
  --contact-ink: #fff;
  --count: #a6ff00;
  --online: #a6ff00;
}
.theme-scene .box-head { text-transform: uppercase; letter-spacing: 1px; }
.theme-scene .box-head a { color: #000; }
.theme-scene .pf-name, .theme-scene .extended {
  background-image: linear-gradient(90deg, #ff2fa0, #fff, #a6ff00, #fff, #ff2fa0);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: glitter 3s linear infinite;
}
.theme-scene .comment-body { background: #151515; }

/* Matrix: falling green code */
.theme-matrix {
  --page-bg: #000;
  --page-bg-image: url("/img/bg/matrix.gif");
  --ink: #b6ffb0;
  --muted: #4fbf4f;
  --link: #39ff14;
  --link-hover: #ffffff;
  --box-bg: rgba(0, 0, 0, .9);
  --box-border: 1px solid #39ff14;
  --box-shadow: 0 0 10px rgba(57, 255, 20, .35);
  --box-head-bg: rgba(57, 255, 20, .12);
  --box-head-ink: #39ff14;
  --accent-bg: rgba(57, 255, 20, .12);
  --accent-ink: #39ff14;
  --label-bg: rgba(57, 255, 20, .07);
  --label-ink: #39ff14;
  --contact-bg: transparent;
  --contact-ink: #b6ffb0;
  --count: #39ff14;
  --online: #39ff14;
}
.theme-matrix .page { font-family: "Courier New", Courier, monospace; }
.theme-matrix .box-head::before { content: "> "; }
.theme-matrix .box-head::after { content: "_"; animation: cursor-blink 1s steps(1) infinite; }
.theme-matrix .pf-name { color: #39ff14; text-shadow: 0 0 6px rgba(57, 255, 20, .6); }
.theme-matrix .extended { color: #39ff14; }
.theme-matrix .comment-body { background: rgba(57, 255, 20, .04); }
@keyframes cursor-blink { 50% { opacity: 0; } }

/* Leopard: wild print, chocolate + gold */
.theme-leopard {
  --page-bg: #d9a070;
  --page-bg-image: url("/img/bg/leopard.gif");
  --ink: #3a2410;
  --muted: #7a5a3a;
  --link: #8a3a00;
  --link-hover: #c85a10;
  --box-bg: #fff8ee;
  --box-border: 4px solid #4a2a0c;
  --box-shadow: inset 0 0 0 2px #e0b050, 0 3px 8px rgba(74, 42, 12, .4);
  --box-head-bg: #4a2a0c;
  --box-head-ink: #ffd27a;
  --accent-bg: #6b3d14;
  --accent-ink: #ffe4a8;
  --blurb-ink: #8a3a00;
  --label-bg: #f5e1c0;
  --label-ink: #6b3d14;
  --contact-bg: #fff2dc;
  --contact-ink: #4a2a0c;
  --count: #b8360b;
}
.theme-leopard .box-head a { color: #ffd27a; }
.theme-leopard .pf-name { color: #6b3d14; }

/* Aquarium: deep water, rising bubbles, aqua glass */
.theme-aquarium {
  --page-bg: #0b3d6e;
  --page-bg-image: url("/img/bg/bubbles.gif");
  --ink: #eaffff;
  --muted: #a8d8f0;
  --link: #8fe8ff;
  --link-hover: #ffffff;
  --box-bg: rgba(8, 48, 90, .78);
  --box-border: 1px solid rgba(143, 232, 255, .6);
  --box-radius: 10px;
  --box-shadow: 0 4px 16px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  --box-head-bg: linear-gradient(rgba(143, 232, 255, .35), rgba(143, 232, 255, .12));
  --box-head-ink: #8fe8ff;
  --accent-bg: rgba(255, 224, 138, .15);
  --accent-ink: #ffe08a;
  --label-bg: rgba(255, 255, 255, .08);
  --label-ink: #8fe8ff;
  --contact-bg: rgba(255, 255, 255, .05);
  --contact-ink: #eaffff;
  --count: #ffe08a;
  --online: #7dff9a;
}
.theme-aquarium .page .box { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.theme-aquarium .comment-body { background: rgba(255, 255, 255, .05); }

/* Sunset: a striped pixel sunset */
.theme-sunset {
  --page-bg: #5a1e7a;
  --page-bg-image: linear-gradient(#2b1055 0 11%, #5a1e7a 11% 22%, #8e2a8a 22% 33%, #c83a7a 33% 44%, #f25a5a 44% 55%, #ff8a4a 55% 66%, #ffb347 66% 77%, #ffd56a 77% 88%, #fff0a0 88% 100%);
  --ink: #3a1030;
  --muted: #8a5070;
  --link: #c2185b;
  --link-hover: #ff5e00;
  --box-bg: rgba(255, 248, 240, .94);
  --box-border: 2px solid #fff;
  --box-radius: 6px;
  --box-shadow: 0 4px 0 rgba(90, 30, 122, .35);
  --box-head-bg: linear-gradient(90deg, #ff8a4a, #f25a5a, #c83a7a);
  --box-head-ink: #fff;
  --accent-bg: linear-gradient(90deg, #8e2a8a, #5a1e7a);
  --accent-ink: #ffd56a;
  --blurb-ink: #c83a7a;
  --label-bg: #ffe6d6;
  --label-ink: #c2185b;
  --contact-bg: #fff2e8;
  --contact-ink: #8e2a8a;
  --count: #f25a5a;
}
.theme-sunset { background-attachment: fixed; }
.theme-sunset .box-head a { color: #fff; }
.theme-sunset .pf-name { color: var(--ink); }

/* Y2K Chrome: shiny silver everything */
.theme-chrome {
  --page-bg: #eceef4;
  --page-bg-image: url("/img/bg/chrome.gif");
  --ink: #1a1d26;
  --muted: #5a6070;
  --link: #0050c8;
  --link-hover: #e0107a;
  --box-bg: linear-gradient(#ffffff, #eef0f5);
  --box-border: 1px solid #8a90a0;
  --box-radius: 7px;
  --box-shadow: inset 0 1px 0 #fff, 0 2px 7px rgba(0, 0, 0, .2);
  --box-head-bg: linear-gradient(#f9fafc, #d4d8e1 50%, #bcc2cf 51%, #e0e4eb);
  --box-head-ink: #2a2f3c;
  --accent-bg: linear-gradient(#e8f1ff, #bcd2f2 50%, #a8c3ec 51%, #cfdef6);
  --accent-ink: #0b2a66;
  --label-bg: linear-gradient(#f6f7f9, #dfe2e8);
  --label-ink: #2a2f3c;
  --contact-bg: #f4f5f8;
  --contact-ink: #1a3a7a;
  --count: #e0107a;
}
.theme-chrome .box-head { text-shadow: 0 1px 0 #fff; border-bottom: 1px solid #9aa0ae; }
.theme-chrome .pf-name { background: linear-gradient(#6a7080, #1a1d26); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- More layouts ---------------------------------------------------------- */

/* Punk Plaid: red tartan, black boxes, safety-pin attitude */
.theme-punk {
  --page-bg: #e8323c; --page-bg-image: url("/img/bg/plaid.gif");
  --ink: #f4f4f4; --muted: #b0b0b0; --link: #ffd42a; --link-hover: #ff5e7a;
  --box-bg: #111; --box-border: 3px solid #000; --box-shadow: 4px 4px 0 #ffd42a;
  --box-head-bg: #e8323c; --box-head-ink: #fff; --accent-bg: #ffd42a; --accent-ink: #000; --blurb-ink: #ffd42a;
  --label-bg: #222; --label-ink: #ff5e7a; --contact-bg: #1a1a1a; --contact-ink: #fff; --count: #ffd42a; --online: #a6ff00;
}
.theme-punk .box-head { font-family: Impact, "Arial Black", sans-serif; letter-spacing: 1px; text-transform: uppercase; font-weight: normal; }
.theme-punk .pf-name { font-family: Impact, "Arial Black", sans-serif; color: #e8323c; text-shadow: 2px 2px 0 #000; }
.theme-punk .comment-body { background: #1a1a1a; }

/* Daisy Chain: a meadow with sunny yellow headings */
.theme-daisy {
  --page-bg: #b4ec8c; --page-bg-image: url("/img/bg/daisies.gif");
  --ink: #2d4a1e; --muted: #6a8a5a; --link: #2a8a2a; --link-hover: #e08a00;
  --box-bg: #fffef4; --box-border: 2px solid #5cc84a; --box-radius: 12px; --box-shadow: 0 3px 0 #2a8a2a;
  --box-head-bg: #ffd42a; --box-head-ink: #5a3a00; --accent-bg: #e0ffd8; --accent-ink: #2a8a2a; --blurb-ink: #2a8a2a;
  --label-bg: #f4ffe8; --label-ink: #2a8a2a; --contact-bg: #fffbe0; --contact-ink: #5a3a00; --count: #e08a00;
}
.theme-daisy .pf-name { color: #2a8a2a; }
.theme-daisy .box-head { border-radius: 10px 10px 0 0; }

/* Army Camo: olive, khaki and stencil type */
.theme-camo {
  --page-bg: #a89a5c; --page-bg-image: url("/img/bg/camo.gif");
  --ink: #2a2e18; --muted: #5a5e40; --link: #4a5a1a; --link-hover: #c85a10;
  --box-bg: #e9e4c8; --box-border: 3px solid #3d4a24; --box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  --box-head-bg: #3d4a24; --box-head-ink: #e9e4c8; --accent-bg: #6b7a3a; --accent-ink: #fff; --blurb-ink: #4a5a1a;
  --label-bg: #d8d0a8; --label-ink: #3d4a24; --contact-bg: #f2eed8; --contact-ink: #2a2e18; --count: #c85a10;
}
.theme-camo .page { font-family: "Courier New", Courier, monospace; }
.theme-camo .box-head { text-transform: uppercase; letter-spacing: 2px; }
.theme-camo .pf-name { color: #3d4a24; text-transform: uppercase; }

/* Surf's Up: rolling waves, white boxes, turquoise */
.theme-surf {
  --page-bg: #3f8ee8; --page-bg-image: url("/img/bg/waves.gif");
  --ink: #0b3d6e; --muted: #5a7fa0; --link: #0a8aa8; --link-hover: #ff8a1f;
  --box-bg: rgba(255, 255, 255, .95); --box-border: 2px solid #fff; --box-radius: 14px; --box-shadow: 0 4px 12px rgba(11, 61, 110, .35);
  --box-head-bg: linear-gradient(90deg, #40d0e0, #3f8ee8); --box-head-ink: #fff; --accent-bg: #fff6b0; --accent-ink: #c85a10; --blurb-ink: #0a8aa8;
  --label-bg: #e2f6fb; --label-ink: #0a6a88; --contact-bg: #f0fbff; --contact-ink: #0b3d6e; --count: #ff8a1f;
}
.theme-surf .box-head { border-radius: 12px 12px 0 0; }
.theme-surf .box-head a { color: #fff; }
.theme-surf .pf-name { color: #0a8aa8; }

/* Synthwave: a neon grid under a purple night */
.theme-synthwave {
  --page-bg: #0d0d2e; --page-bg-image: url("/img/bg/grid.gif");
  --ink: #f0e6ff; --muted: #a890d0; --link: #40d0e0; --link-hover: #ff2fa0;
  --box-bg: rgba(35, 20, 70, .9); --box-border: 2px solid #ff2fa0; --box-shadow: 0 0 12px rgba(255, 47, 160, .55), inset 0 0 8px rgba(64, 208, 224, .25);
  --box-head-bg: linear-gradient(90deg, #ff2fa0, #9a4ad8, #40d0e0); --box-head-ink: #fff; --accent-bg: rgba(64, 208, 224, .15); --accent-ink: #40d0e0; --blurb-ink: #ff8ad0;
  --label-bg: rgba(255, 255, 255, .06); --label-ink: #ff8ad0; --contact-bg: rgba(255, 255, 255, .04); --contact-ink: #f0e6ff; --count: #ffd42a; --online: #39ff14;
}
.theme-synthwave .box-head { font-style: italic; letter-spacing: 2px; text-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }
.theme-synthwave .box-head a { color: #fff; }
.theme-synthwave .pf-name { color: #ff2fa0; font-style: italic; text-shadow: 0 0 8px #ff2fa0, 3px 3px 0 #40d0e0; }
.theme-synthwave .comment-body { background: rgba(255, 255, 255, .04); }

/* Hot Pink Polka: loud pink dots with black & white boxes */
.theme-polka {
  --page-bg: #ff2fa0; --page-bg-image: url("/img/bg/polka.gif");
  --ink: #1b1b2a; --muted: #7a5a6a; --link: #e0107a; --link-hover: #9a4ad8;
  --box-bg: #fff; --box-border: 3px solid #1b1b2a; --box-radius: 4px; --box-shadow: 4px 4px 0 #1b1b2a;
  --box-head-bg: #1b1b2a; --box-head-ink: #fff; --accent-bg: #ffe0ec; --accent-ink: #e0107a; --blurb-ink: #e0107a;
  --label-bg: #ffe0ec; --label-ink: #1b1b2a; --contact-bg: #fff4f9; --contact-ink: #e0107a; --count: #ff2fa0;
}
.theme-polka .box-head a { color: #ff90b4; }
.theme-polka .pf-name { color: #ff2fa0; text-shadow: 2px 2px 0 #1b1b2a; }

/* Goth Princess: skulls & bows, black lace and purple */
.theme-goth {
  --page-bg: #000; --page-bg-image: url("/img/bg/skulls.gif");
  --ink: #e8e0f0; --muted: #9a8aa8; --link: #ff90b4; --link-hover: #c79aff;
  --box-bg: rgba(10, 5, 15, .94); --box-border: 2px double #9a4ad8; --box-shadow: 0 0 10px rgba(154, 74, 216, .4);
  --box-head-bg: #2a0a3a; --box-head-ink: #ff90b4; --accent-bg: #3a1050; --accent-ink: #ffe0ec; --blurb-ink: #c79aff;
  --label-bg: #1a0a24; --label-ink: #ff90b4; --contact-bg: #120818; --contact-ink: #e8e0f0; --count: #ff2fa0; --online: #c79aff;
}
.theme-goth .page { font-family: Georgia, "Times New Roman", serif; }
.theme-goth .box-head { font-style: italic; letter-spacing: 1px; }
.theme-goth .pf-name { color: #ff90b4; font-style: italic; text-shadow: 0 0 6px #9a4ad8; }
.theme-goth .comment-body { background: #1a0a24; }

/* Cherry Pie: cherries on a pink check */
.theme-cherry {
  --page-bg: #ffe0ec; --page-bg-image: url("/img/bg/cherries.gif");
  --ink: #4a1020; --muted: #9a6070; --link: #c8102e; --link-hover: #2a8a2a;
  --box-bg: #fff; --box-border: 2px solid #e8323c; --box-radius: 10px; --box-shadow: 0 3px 0 #9c1520;
  --box-head-bg: #e8323c; --box-head-ink: #fff; --accent-bg: #e0ffd8; --accent-ink: #2a8a2a; --blurb-ink: #c8102e;
  --label-bg: #fff0f3; --label-ink: #c8102e; --contact-bg: #fff6f8; --contact-ink: #9c1520; --count: #e8323c;
}
.theme-cherry .box-head { border-radius: 8px 8px 0 0; }
.theme-cherry .box-head a { color: #fff; }
.theme-cherry .pf-name { color: #c8102e; }

/* Mixtape: music notes, lavender and purple */
.theme-mixtape {
  --page-bg: #ece0ff; --page-bg-image: url("/img/bg/notes.gif");
  --ink: #2a1a4a; --muted: #7a6a9a; --link: #7a2ac8; --link-hover: #ff2fa0;
  --box-bg: #fff; --box-border: 2px solid #9a4ad8; --box-radius: 6px; --box-shadow: 0 3px 0 #6a2c91;
  --box-head-bg: linear-gradient(#b27aea, #9a4ad8); --box-head-ink: #fff; --accent-bg: #ffe0ec; --accent-ink: #c2185b; --blurb-ink: #7a2ac8;
  --label-bg: #f4ecff; --label-ink: #6a2c91; --contact-bg: #faf6ff; --contact-ink: #6a2c91; --count: #ff2fa0;
}
.theme-mixtape .box-head a { color: #fff; }
.theme-mixtape .pf-name { color: #7a2ac8; }

/* Cherry Blossom: soft pink petals falling */
.theme-sakura {
  --page-bg: #ffc8dc; --page-bg-image: url("/img/bg/sakura.gif");
  --ink: #5a2a3a; --muted: #a07080; --link: #d0306a; --link-hover: #8a5424;
  --box-bg: rgba(255, 255, 255, .92); --box-border: 1px solid #ff90b4; --box-radius: 16px; --box-shadow: 0 4px 14px rgba(255, 144, 180, .45);
  --box-head-bg: #ffe0ec; --box-head-ink: #d0306a; --accent-bg: #fff4f8; --accent-ink: #8a5424; --blurb-ink: #d0306a;
  --label-bg: #fff0f5; --label-ink: #d0306a; --contact-bg: #fff8fb; --contact-ink: #5a2a3a; --count: #ff2fa0;
}
.theme-sakura .box-head { border-radius: 14px 14px 0 0; }
.theme-sakura .pf-name { color: #d0306a; }

/* Glitter Bomb: sparkles everywhere and rainbow glitter headings */
.theme-glitter {
  --page-bg: #000; --page-bg-image: url("/img/bg/glitter.gif");
  --ink: #fff; --muted: #c0b0d0; --link: #ff90d8; --link-hover: #8fe8ff;
  --box-bg: rgba(20, 0, 30, .9); --box-border: 2px solid #ff2fa0; --box-radius: 8px; --box-shadow: 0 0 12px rgba(255, 47, 160, .6);
  --box-head-bg: rgba(255, 47, 160, .15); --box-head-ink: #ff90d8; --accent-bg: rgba(143, 232, 255, .12); --accent-ink: #8fe8ff; --blurb-ink: #ffd42a;
  --label-bg: rgba(255, 255, 255, .07); --label-ink: #ff90d8; --contact-bg: rgba(255, 255, 255, .04); --contact-ink: #fff; --count: #ffd42a; --online: #7dff7d;
}
.theme-glitter .box-head, .theme-glitter .pf-name, .theme-glitter .extended {
  background-image: linear-gradient(90deg, #ff2fa0, #ffd42a, #fff, #8fe8ff, #c79aff, #ff2fa0); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: glitter 2.5s linear infinite;
}
.theme-glitter .box-head a { -webkit-text-fill-color: var(--link); }
.theme-glitter .comment-body { background: rgba(255, 255, 255, .04); }

/* Galaxy: purple nebula, see-through space glass */
.theme-galaxy {
  --page-bg: #3a1760; --page-bg-image: url("/img/bg/galaxy.gif");
  --ink: #f0e8ff; --muted: #b8a8e0; --link: #ffd42a; --link-hover: #ff90d8;
  --box-bg: rgba(20, 10, 50, .82); --box-border: 1px solid #c79aff; --box-radius: 8px; --box-shadow: 0 0 14px rgba(199, 154, 255, .45);
  --box-head-bg: linear-gradient(90deg, rgba(154, 74, 216, .6), rgba(35, 35, 90, .6)); --box-head-ink: #fff; --accent-bg: rgba(255, 212, 42, .12); --accent-ink: #ffd42a; --blurb-ink: #c79aff;
  --label-bg: rgba(255, 255, 255, .07); --label-ink: #c79aff; --contact-bg: rgba(255, 255, 255, .04); --contact-ink: #f0e8ff; --count: #ffd42a; --online: #7dff9a;
}
.theme-galaxy .page .box { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.theme-galaxy .box-head a { color: #fff; }
.theme-galaxy .pf-name { color: #fff; text-shadow: 0 0 8px #c79aff, 0 0 16px #9a4ad8; }
.theme-galaxy .comment-body { background: rgba(255, 255, 255, .04); }

/* Daydream: fluffy clouds and baby blue */
.theme-daydream {
  --page-bg: #bcdcff; --page-bg-image: url("/img/bg/clouds.gif");
  --ink: #1d3a5e; --muted: #6a88aa; --link: #1d6fd0; --link-hover: #ff8a1f;
  --box-bg: rgba(255, 255, 255, .9); --box-border: 2px solid #fff; --box-radius: 18px; --box-shadow: 0 4px 12px rgba(29, 79, 158, .2);
  --box-head-bg: #e6f2ff; --box-head-ink: #1d6fd0; --accent-bg: #fff6d0; --accent-ink: #c07a00; --blurb-ink: #1d6fd0;
  --label-bg: #eef6ff; --label-ink: #1d4f9e; --contact-bg: #f6faff; --contact-ink: #1d4f9e; --count: #ff8a1f;
}
.theme-daydream .box-head { border-radius: 16px 16px 0 0; }
.theme-daydream .pf-name { color: #1d6fd0; text-shadow: 0 2px 0 #fff; }

/* Rainbow Road: diagonal rainbow, bold black boxes */
.theme-rainbow {
  --page-bg: #fff; --page-bg-image: url("/img/bg/rainbow.gif");
  --ink: #1b1b2a; --muted: #5a5a6a; --link: #1d4f9e; --link-hover: #e8323c;
  --box-bg: #fff; --box-border: 3px solid #1b1b2a; --box-radius: 0; --box-shadow: 5px 5px 0 rgba(0, 0, 0, .8);
  --box-head-bg: #1b1b2a; --box-head-ink: #fff; --accent-bg: #fff6b0; --accent-ink: #1b1b2a; --blurb-ink: #9a4ad8;
  --label-bg: #f2f2f6; --label-ink: #1b1b2a; --contact-bg: #fafafa; --contact-ink: #1b1b2a; --count: #e8323c;
}
.theme-rainbow .box-head, .theme-rainbow .pf-name {
  background-image: linear-gradient(90deg, #e8323c, #ff8a1f, #ffd42a, #5cc84a, #3f8ee8, #9a4ad8, #e8323c); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: glitter 4s linear infinite;
}
.theme-rainbow .box-head { background-color: #1b1b2a; }
.theme-rainbow .box-head a { -webkit-text-fill-color: #fff; }

/* Skater: pink & black checkerboard */
.theme-checker {
  --page-bg: #000; --page-bg-image: url("/img/bg/checker.gif");
  --ink: #fff; --muted: #c0c0c0; --link: #ff90d8; --link-hover: #a6ff00;
  --box-bg: #111; --box-border: 3px solid #fff; --box-shadow: 4px 4px 0 #ff2fa0;
  --box-head-bg: #fff; --box-head-ink: #000; --accent-bg: #ff2fa0; --accent-ink: #fff; --blurb-ink: #ff90d8;
  --label-bg: #222; --label-ink: #ff90d8; --contact-bg: #1a1a1a; --contact-ink: #fff; --count: #a6ff00; --online: #a6ff00;
}
.theme-checker .box-head { text-transform: uppercase; letter-spacing: 1px; font-style: italic; }
.theme-checker .box-head a { color: #ff2fa0; }
.theme-checker .pf-name { color: #fff; text-shadow: 3px 3px 0 #ff2fa0; font-style: italic; }
.theme-checker .comment-body { background: #1a1a1a; }

/* Retro PC: grey 3D windows on a teal desktop */
.theme-win98 {
  --page-bg: #008080; --page-bg-image: none;
  --ink: #000; --muted: #404040; --link: #0000ee; --link-hover: #800080;
  --box-bg: #c0c0c0; --box-border: 0; --box-radius: 0;
  --box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --box-head-bg: linear-gradient(90deg, #000080, #1084d0); --box-head-ink: #fff; --accent-bg: linear-gradient(90deg, #000080, #1084d0); --accent-ink: #fff; --blurb-ink: #000080;
  --label-bg: #fff; --label-ink: #000; --contact-bg: #d4d0c8; --contact-ink: #000; --count: #800000; --online: #008000;
}
.theme-win98 .page { font-family: Tahoma, "MS Sans Serif", Verdana, sans-serif; }
.theme-win98 .page .box { padding: 3px; }
.theme-win98 .box-head { font-size: 11px; padding: 3px 5px; }
.theme-win98 .box-head::after { content: "_ \25A1 \00D7"; float: right; font-weight: bold; letter-spacing: 3px; }
.theme-win98 .box-head a { color: #fff; }
.theme-win98 .pf-name { color: #000080; }
.theme-win98 .comment-body { background: #fff; }

/* School Notebook: lined paper, doodles and highlighter */
.theme-notebook {
  --page-bg: #fdfdf6; --page-bg-image: repeating-linear-gradient(#fdfdf6 0 21px, #a8c8f0 21px 22px);
  --ink: #1a2a5a; --muted: #6a7a9a; --link: #1d4fd0; --link-hover: #e8323c;
  --box-bg: #fff; --box-border: 1px solid #c8d4e8; --box-radius: 2px; --box-shadow: 2px 3px 0 rgba(0, 0, 0, .12);
  --box-head-bg: #fff6a0; --box-head-ink: #1a2a5a; --accent-bg: #d8ffd0; --accent-ink: #1a2a5a; --blurb-ink: #e8323c;
  --label-bg: #fff; --label-ink: #e8323c; --contact-bg: #fafcff; --contact-ink: #1a2a5a; --count: #e8323c;
}
.theme-notebook .page { font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive; }
.theme-notebook .page .box { border-left: 3px double #f08080; }
.theme-notebook .pf-name { color: #1d4fd0; text-decoration: underline wavy #e8323c; }

/* Bling: black, gold and diamonds */
.theme-bling {
  --page-bg: #0a0a0a; --page-bg-image: url("/img/bg/stars.gif");
  --ink: #f4ecd8; --muted: #a89a7a; --link: #ffd42a; --link-hover: #fff6b0;
  --box-bg: #141210; --box-border: 2px solid #d4a017; --box-radius: 2px; --box-shadow: 0 0 0 1px #000, 0 0 10px rgba(255, 212, 42, .35);
  --box-head-bg: linear-gradient(#fff6b0, #ffd42a 45%, #c8900a 55%, #eaa000); --box-head-ink: #2a1a00; --accent-bg: #2a220e; --accent-ink: #ffd42a; --blurb-ink: #ffd42a;
  --label-bg: #1e1a12; --label-ink: #ffd42a; --contact-bg: #181510; --contact-ink: #f4ecd8; --count: #ffd42a; --online: #7dff7d;
}
.theme-bling .box-head { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.theme-bling .box-head a { color: #2a1a00; }
.theme-bling .pf-name { background: linear-gradient(100deg, #8a5a00 20%, #ffd42a 40%, #fff6b0 50%, #eaa000 60%, #8a5a00 80%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: glitter 3s linear infinite; }
.theme-bling .comment-body { background: #1e1a12; }

/* Haunted: pumpkins and ghosts, orange on black */
.theme-spooky {
  --page-bg: #1b1b2a; --page-bg-image: url("/img/bg/halloween.gif");
  --ink: #f4e8d8; --muted: #a89a8a; --link: #ff8a1f; --link-hover: #a6ff00;
  --box-bg: rgba(20, 12, 24, .94); --box-border: 2px solid #ff8a1f; --box-radius: 4px; --box-shadow: 0 0 10px rgba(255, 138, 31, .4);
  --box-head-bg: #ff8a1f; --box-head-ink: #1b1b2a; --accent-bg: #3a1a4a; --accent-ink: #a6ff00; --blurb-ink: #ff8a1f;
  --label-bg: #24162c; --label-ink: #ff8a1f; --contact-bg: #1c1222; --contact-ink: #f4e8d8; --count: #a6ff00; --online: #a6ff00;
}
.theme-spooky .box-head a { color: #1b1b2a; }
.theme-spooky .pf-name { color: #ff8a1f; text-shadow: 0 0 8px rgba(166, 255, 0, .6); }
.theme-spooky .comment-body { background: #24162c; }

/* Beach Day: sand, sun and seashells */
.theme-beach {
  --page-bg: #ffe8b0; --page-bg-image: url("/img/bg/summer.gif");
  --ink: #3a2a10; --muted: #8a7050; --link: #0a8aa8; --link-hover: #ff5e7a;
  --box-bg: rgba(255, 255, 255, .94); --box-border: 2px solid #40d0e0; --box-radius: 12px; --box-shadow: 0 3px 0 #0a8aa8;
  --box-head-bg: linear-gradient(90deg, #ff8a1f, #ff5e7a); --box-head-ink: #fff; --accent-bg: #e2f8fb; --accent-ink: #0a8aa8; --blurb-ink: #ff5e7a;
  --label-bg: #fff4dc; --label-ink: #c85a10; --contact-bg: #fffaf0; --contact-ink: #0a6a88; --count: #ff5e7a;
}
.theme-beach .box-head { border-radius: 10px 10px 0 0; }
.theme-beach .box-head a { color: #fff; }
.theme-beach .pf-name { color: #ff5e7a; text-shadow: 2px 2px 0 #fff6b0; }

/* Toxic Slime: radioactive lime on black */
.theme-toxic {
  --page-bg: #0a120a; --page-bg-image: none;
  --ink: #e8ffe0; --muted: #8ab080; --link: #a6ff00; --link-hover: #ffd42a;
  --box-bg: #111a10; --box-border: 3px solid #a6ff00; --box-radius: 14px 14px 4px 4px; --box-shadow: 0 0 14px rgba(166, 255, 0, .45), 0 6px 0 #4a8a00;
  --box-head-bg: #a6ff00; --box-head-ink: #0a120a; --accent-bg: #1c2a10; --accent-ink: #a6ff00; --blurb-ink: #a6ff00;
  --label-bg: #1a2616; --label-ink: #a6ff00; --contact-bg: #141e12; --contact-ink: #e8ffe0; --count: #ffd42a; --online: #a6ff00;
}
.theme-toxic .page { font-family: "Trebuchet MS", Verdana, sans-serif; }
.theme-toxic .box-head { text-transform: uppercase; letter-spacing: 1px; }
.theme-toxic .box-head a { color: #0a120a; }
.theme-toxic .pf-name { color: #a6ff00; text-shadow: 0 0 6px #39ff14, 0 3px 0 #4a8a00; }
.theme-toxic .comment-body { background: #1a2616; }

/* ==========================================================================
   Home (logged-in dashboard)
   ========================================================================== */
.hello .box-head { font-size: 14px; }
.hello-body { display: flex; gap: 10px; font-size: 11px; }
.hello-body img { border: 1px solid #b8cbe8; }
.hello-body p { margin-bottom: 6px; }
.url-line { border-top: 1px dotted #b8cbe8; font-size: 11px; padding-top: 6px; word-break: break-all; }

/* Android app Testing Program box */
.app-test-box .box-body > p { margin: 0 0 8px; }
.app-test-done { background: #eaffe0; border: 1px solid #9fd88a; border-radius: 4px; padding: 6px 8px; }
.app-test-info { margin: 0 0 10px; font-size: 11px; }
.app-test-info summary { cursor: pointer; font-weight: bold; color: var(--link); margin-bottom: 6px; }
.app-test-info ol { margin: 6px 0 8px; padding-left: 20px; }
.app-test-info li { margin-bottom: 4px; }
.app-test-info p { margin: 0 0 6px; }
.app-test-form { border-top: 1px dotted #b8cbe8; padding-top: 8px; }
.app-test-row { display: flex; gap: 6px; margin: 4px 0 6px; }
.app-test-row input { flex: 1; min-width: 0; }
.app-test-form .check { display: flex; gap: 6px; align-items: flex-start; font-size: 11px; }

.alerts { list-style: none; margin: 0 0 8px; padding: 0; }
.alerts li { padding: 2px 0; }
.alerts a { color: var(--count); font-weight: bold; display: inline-flex; align-items: center; gap: 5px; }
.alerts a span { color: var(--ink); font-weight: normal; }
.alerts img { animation: nudge 1.6s steps(2, jump-none) infinite; }
@keyframes nudge { 50% { transform: translateY(-1px); } }
.mail-links { font-size: 11px; margin: 0; }

.status-form { display: grid; gap: 6px; }
.status-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.status-line input { flex: 1; min-width: 160px; }
.emo-big { width: 34px; height: 34px; }

.bulletins { width: 100%; border-collapse: collapse; font-size: 11px; }
.bulletins th { text-align: left; background: var(--label-bg); color: var(--label-ink); padding: 3px 6px; }
.bulletins td { padding: 5px 6px; border-bottom: 1px dotted #c6d6ee; vertical-align: middle; }
.bulletins tr:nth-child(even) td { background: #f6f9ff; }
.b-from a { display: flex; align-items: center; gap: 6px; font-weight: bold; }
.b-date { white-space: nowrap; color: var(--muted); font-size: 10px; }

.friend-status { list-style: none; }
.friend-status li { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px dotted #c6d6ee; font-size: 11px; }
.friend-status li:last-child { border-bottom: 0; }
.friend-status img:first-child { flex: none; border: 1px solid #b8cbe8; }
.friend-status small { color: var(--muted); }

.people-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; text-align: center; }
.people-row a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: bold; }
.people-row img { border: 1px solid #b8cbe8; }

/* ==========================================================================
   Landing
   ========================================================================== */
.hero { background: linear-gradient(#fffdf4, #fff3d6); }
.hero-body { display: flex; gap: 16px; padding: 18px; align-items: flex-start; }
.hero h1 { margin: 0 0 8px; font: bold 22px/1.2 var(--font-head); color: #1d4f9e; }
.hero p { font-size: 13px; }
.hero-emo { flex: none; }
.featured { display: flex; gap: 10px; }
.featured img { flex: none; border: 1px solid #b8cbe8; }
.featured p img { border: 0; vertical-align: -3px; }
.login-box form { display: grid; gap: 3px; font-size: 11px; }
.login-box label { font-weight: bold; }
.login-box input[type="email"], .login-box input[type="password"] { width: 100%; margin-bottom: 4px; }
.login-box .check { font-weight: normal; display: flex; align-items: center; gap: 4px; }
.login-actions { display: flex; gap: 6px; margin: 4px 0; }
.start-list li { font-size: 12px; padding: 3px 0; }

/* ==========================================================================
   Forms, notices & account pages
   ========================================================================== */
.wrap.narrow { max-width: 460px; }
.center { text-align: center; }
.notice {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 7px 10px; border: 1px solid; border-radius: 3px; font-size: 12px;
}
.notice span { flex: 1; min-width: 180px; }
.notice-success { background: #eaffdf; border-color: #7cc86a; color: #1f5a12; }
.notice-error { background: #ffe8e8; border-color: #e08a8a; color: #8a1010; }
.notice-warn { background: #fff8d6; border-color: #e3c35a; color: #5a4600; }

.form-stack { display: grid; gap: 4px; }
.form-stack label { font-weight: bold; font-size: 11px; margin-top: 4px; }
.form-stack input[type="text"], .form-stack input[type="email"], .form-stack input[type="password"] { width: 100%; padding: 5px 6px; }
.form-stack .check { font-weight: normal; }
.check { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 0; }
.form-error { background: #ffe8e8; border: 1px solid #e08a8a; color: #8a1010; padding: 6px 8px; font-size: 11px; font-weight: bold; }
.field-error { color: #c0101a; font-size: 11px; font-weight: bold; margin: 3px 0 0; }
.hint { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }

.signup-form .field { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 10px; padding: 7px 0; border-bottom: 1px dotted #d3dff0; }
.signup-form .field:last-child { border-bottom: 0; }
.signup-form .field[hidden] { display: none; }
.signup-form .field > label { font-weight: bold; font-size: 11px; color: var(--label-ink); padding-top: 4px; }
.signup-form input[type="text"], .signup-form input[type="email"], .signup-form input[type="password"] { width: 100%; max-width: 320px; padding: 5px 6px; }
.url-input { display: flex; max-width: 320px; border: 1px solid #7f9db9; background: #fff; }
.url-input span { padding: 5px 0 5px 6px; color: var(--muted); font-size: 12px; background: #f2f6fc; border-right: 1px solid #d3dff0; padding-right: 4px; }
.url-input input { border: 0 !important; flex: 1; min-width: 0; }
.date-row { display: flex; gap: 4px; flex-wrap: wrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.message-box { text-align: center; padding: 26px 18px 16px; }
.message-box h1 { font: bold 17px/1.3 var(--font-head); color: #1d4f9e; margin: 10px 0; }
.small-links { font-size: 11px; margin-top: 14px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.private-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px; }

.menu-panel form { margin: 0; }
.menu-panel button {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: 0; border-radius: 3px; background: none; cursor: pointer;
  font: 12px var(--font); color: #1d3f7a; text-align: left;
}
.menu-panel button:hover { background: linear-gradient(#eef4fd, #dbe7f9); }

/* ---- Edit Profile ------------------------------------------------------- */
.edit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.edit-head h1 { margin: 0; font: bold 18px var(--font-head); color: #1d4f9e; display: flex; align-items: center; gap: 6px; }
.edit-tabs { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #7fa6e2; padding: 0 4px; }
.edit-tabs::-webkit-scrollbar { display: none; }
.edit-tab {
  display: flex; align-items: center; gap: 5px; flex: none;
  padding: 6px 11px 5px; margin-bottom: -1px;
  border: 1px solid #9fbbe6; border-bottom-color: #7fa6e2; border-radius: 5px 5px 0 0;
  background: linear-gradient(#f4f8ff, #dbe7f9 50%, #cddcf5 51%, #dfe9fa);
  color: #1d3f7a; font: bold 11px var(--font); text-decoration: none;
}
.edit-tab:hover { background: linear-gradient(#fff, #eaf1fc); color: #1d3f7a; }
.edit-tab[aria-current] { background: #fff; border-color: #7fa6e2; border-bottom-color: #fff; color: #ff6a00; }
.edit-box { border-top: 0; }
.edit-box > .box-head { display: none; }
.edit-box > .box-head.show-head { display: block; }

.edit-form .field { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 10px; padding: 8px 0; border-bottom: 1px dotted #d3dff0; }
.edit-form .field:last-child { border-bottom: 0; }
.edit-form .field > label { font-weight: bold; font-size: 11px; color: var(--label-ink); padding-top: 4px; }
.edit-form input[type="text"], .edit-form input[type="url"], .edit-form select { width: 100%; max-width: 380px; padding: 5px 6px; }
.edit-form textarea { width: 100%; padding: 6px; line-height: 1.5; resize: vertical; }
.check-row { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.char-count { display: block; text-align: right; font-size: 10px; color: var(--muted); }
.char-count.over { color: #c0101a; font-weight: bold; }

.photo-edit { display: flex; gap: 18px; align-items: flex-start; }
.photo-preview { flex: none; width: 150px; height: 150px; object-fit: cover; border: 1px solid #b8cbe8; background: #f2f6fc; }
.remove-photo { margin: 10px 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; cursor: pointer; font: 11px var(--font); }
.link-btn:hover { color: var(--link-hover); }

.layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 10px; }
.layout-card {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px;
  border: 2px solid #d3dff0; border-radius: 5px; cursor: pointer; background: #fbfdff;
}
.layout-card:hover { border-color: #9fbbe6; }
.layout-card:has(input:checked) { border-color: #ff8a1f; background: #fff8ef; box-shadow: 0 0 0 3px rgba(255, 138, 31, .15); }
.layout-card input { position: absolute; top: 10px; right: 10px; }
.layout-card b { font-size: 13px; }
.layout-card small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.layout-card a { font-size: 10px; }
.layout-swatch { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 1fr; gap: 5px; height: 74px; padding: 7px; border: 1px solid rgba(0, 0, 0, .15); image-rendering: pixelated; }
.layout-swatch i { display: block; }
.layout-swatch i:first-child { grid-row: span 2; }
.swatch-classic { background: #e5ecf6; }
.swatch-classic i { background: #fff; border: 1px solid #7fa6e2; border-top: 5px solid #cfe0fa; }
.swatch-candy { background: #ffd9e8 url("/img/bg/candy.gif"); }
.swatch-candy i { background: #fff; border: 3px solid #111; }
.swatch-midnight { background: #0d0d2e url("/img/bg/stars.gif"); }
.swatch-midnight i { background: rgba(13, 13, 46, .9); border: 1px solid #ff5ecf; box-shadow: 0 0 5px rgba(255, 94, 207, .6); }
.swatch-bubblegum { background: #ffe0ec url("/img/bg/hearts.gif"); }
.swatch-bubblegum i { background: #fff; border: 2px dashed #ff90b4; border-radius: 7px; }
.swatch-scene { background: #000 url("/img/bg/zebra.gif"); }
.swatch-scene i { background: #000; border: 2px solid #ff2fa0; box-shadow: 3px 3px 0 #a6ff00; }
.swatch-matrix { background: #000 url("/img/bg/matrix.gif"); }
.swatch-matrix i { background: rgba(0, 0, 0, .9); border: 1px solid #39ff14; box-shadow: 0 0 5px rgba(57, 255, 20, .5); }
.swatch-leopard { background: #d9a070 url("/img/bg/leopard.gif"); }
.swatch-leopard i { background: #fff8ee; border: 3px solid #4a2a0c; border-top-width: 7px; }
.swatch-aquarium { background: #0b3d6e url("/img/bg/bubbles.gif"); }
.swatch-aquarium i { background: rgba(8, 48, 90, .8); border: 1px solid rgba(143, 232, 255, .7); border-radius: 4px; }
.swatch-sunset { background: linear-gradient(#2b1055 0 20%, #8e2a8a 20% 40%, #f25a5a 40% 60%, #ff8a4a 60% 80%, #ffd56a 80%); }
.swatch-sunset i { background: #fff8f0; border: 1px solid #fff; border-top: 5px solid #f25a5a; border-radius: 3px; }
.swatch-chrome { background: #eceef4 url("/img/bg/chrome.gif"); }
.swatch-chrome i { background: linear-gradient(#fff, #e6e8ee); border: 1px solid #8a90a0; border-top: 5px solid #c4c8d4; border-radius: 3px; }
.swatch-punk { background: #e8323c url("/img/bg/plaid.gif"); }
.swatch-punk i { background: #111; border: 2px solid #000; border-top: 5px solid #e8323c; box-shadow: 2px 2px 0 #ffd42a; }
.swatch-daisy { background: #b4ec8c url("/img/bg/daisies.gif"); }
.swatch-daisy i { background: #fffef4; border: 2px solid #5cc84a; border-top: 5px solid #ffd42a; border-radius: 5px; }
.swatch-camo { background: #a89a5c url("/img/bg/camo.gif"); }
.swatch-camo i { background: #e9e4c8; border: 2px solid #3d4a24; border-top-width: 6px; }
.swatch-surf { background: #3f8ee8 url("/img/bg/waves.gif"); }
.swatch-surf i { background: #fff; border: 1px solid #fff; border-top: 5px solid #40d0e0; border-radius: 6px; }
.swatch-synthwave { background: #0d0d2e url("/img/bg/grid.gif"); }
.swatch-synthwave i { background: rgba(35, 20, 70, .9); border: 1px solid #ff2fa0; box-shadow: 0 0 5px #ff2fa0; }
.swatch-polka { background: #ff2fa0 url("/img/bg/polka.gif"); }
.swatch-polka i { background: #fff; border: 2px solid #1b1b2a; border-top-width: 5px; box-shadow: 2px 2px 0 #1b1b2a; }
.swatch-goth { background: #000 url("/img/bg/skulls.gif"); }
.swatch-goth i { background: #0a050f; border: 3px double #9a4ad8; }
.swatch-cherry { background: #ffe0ec url("/img/bg/cherries.gif"); }
.swatch-cherry i { background: #fff; border: 2px solid #e8323c; border-top-width: 5px; border-radius: 5px; }
.swatch-mixtape { background: #ece0ff url("/img/bg/notes.gif"); }
.swatch-mixtape i { background: #fff; border: 2px solid #9a4ad8; border-top-width: 5px; border-radius: 3px; }
.swatch-sakura { background: #ffc8dc url("/img/bg/sakura.gif"); }
.swatch-sakura i { background: rgba(255, 255, 255, .92); border: 1px solid #ff90b4; border-top: 5px solid #ffe0ec; border-radius: 7px; }
.swatch-glitter { background: #000 url("/img/bg/glitter.gif"); }
.swatch-glitter i { background: rgba(20, 0, 30, .9); border: 1px solid #ff2fa0; box-shadow: 0 0 5px #ff2fa0; border-radius: 3px; }
.swatch-galaxy { background: #3a1760 url("/img/bg/galaxy.gif"); }
.swatch-galaxy i { background: rgba(20, 10, 50, .8); border: 1px solid #c79aff; box-shadow: 0 0 5px #c79aff; border-radius: 3px; }
.swatch-daydream { background: #bcdcff url("/img/bg/clouds.gif"); }
.swatch-daydream i { background: rgba(255, 255, 255, .9); border: 1px solid #fff; border-top: 5px solid #e6f2ff; border-radius: 8px; }
.swatch-rainbow { background: #fff url("/img/bg/rainbow.gif"); }
.swatch-rainbow i { background: #fff; border: 2px solid #1b1b2a; border-top-width: 5px; box-shadow: 2px 2px 0 #000; }
.swatch-checker { background: #000 url("/img/bg/checker.gif"); }
.swatch-checker i { background: #111; border: 2px solid #fff; border-top-width: 5px; box-shadow: 2px 2px 0 #ff2fa0; }
.swatch-win98 { background: #008080; }
.swatch-win98 i { background: #c0c0c0; border-top: 5px solid #000080; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff; }
.swatch-notebook { background: repeating-linear-gradient(#fdfdf6 0 7px, #a8c8f0 7px 8px); }
.swatch-notebook i { background: #fff; border: 1px solid #c8d4e8; border-left: 2px solid #f08080; border-top: 5px solid #fff6a0; }
.swatch-bling { background: #0a0a0a url("/img/bg/stars.gif"); }
.swatch-bling i { background: #141210; border: 1px solid #d4a017; border-top: 5px solid #ffd42a; box-shadow: 0 0 4px rgba(255, 212, 42, .5); }
.swatch-spooky { background: #1b1b2a url("/img/bg/halloween.gif"); }
.swatch-spooky i { background: #140c18; border: 1px solid #ff8a1f; border-top: 5px solid #ff8a1f; }
.swatch-beach { background: #ffe8b0 url("/img/bg/summer.gif"); }
.swatch-beach i { background: #fff; border: 1px solid #40d0e0; border-top: 5px solid #ff8a1f; border-radius: 5px; }
.swatch-toxic { background: #0a120a; }
.swatch-toxic i { background: #111a10; border: 2px solid #a6ff00; border-top-width: 5px; border-radius: 6px 6px 2px 2px; box-shadow: 0 0 5px #a6ff00; }

/* ---- Bulletins ---------------------------------------------------------- */
.reply-count { color: var(--muted); white-space: nowrap; margin-left: 4px; }
.reply-count img { vertical-align: -4px; }
.crumbs { margin: 0 0 8px; font-size: 11px; }
.bulletin-meta { margin: 6px 0; }
.bulletin-meta th { width: 80px; }
.bulletin-meta .b-from a { display: inline-flex; align-items: center; gap: 8px; font-weight: bold; }
.bulletin-meta .b-from img { border: 1px solid #b8cbe8; object-fit: cover; }
.bulletin-body { font-size: 13px; line-height: 1.6; word-break: break-word; }
.bulletin-actions { padding-top: 0; }

/* ---- Info pages (Terms, Privacy...) ------------------------------------- */
.legal .box-body { font-size: 12.5px; line-height: 1.65; padding: 12px 18px 18px; }
.legal h2 { font: bold 14px var(--font-head); color: #1d4f9e; margin: 18px 0 6px; padding-bottom: 3px; border-bottom: 1px dotted #b8cbe8; }
.legal ul { margin: 0 0 10px; padding-left: 20px; }
.legal li { margin-bottom: 4px; }
.legal-updated { color: var(--muted); font-size: 11px; }
.legal-summary { background: #fff8d6; border: 1px solid #e3c35a; padding: 8px 10px; border-radius: 3px; }
.info-nav a[aria-current] { font-weight: bold; color: var(--ink); text-decoration: none; }
.faq dt { font-weight: bold; margin-top: 12px; color: #1d4f9e; }
.faq dd { margin: 4px 0 0 24px; }
.about-hero { display: flex; gap: 14px; align-items: center; font-size: 14px; margin: 6px 0 10px; }
.about-hero p { margin: 0; }
.contact-table th { width: 150px; }

/* ---- Settings ----------------------------------------------------------- */
.narrow-form { max-width: 380px; }
.btn-danger { --btn-1: #ff8a8a; --btn-2: #d0021b; --btn-border: #8a0010; --btn-ink: #fff; text-shadow: 0 1px 0 #8a0010; }
.btn-danger:hover { background: linear-gradient(#ffa0a0, #b8000f); color: #fff; }
.danger-zone { border: 2px dashed #e08a8a; background: #fff6f6; padding: 12px 14px; border-radius: 4px; }

/* ---- Reports & admin ---------------------------------------------------- */
.report-link { margin: 0; padding: 0 10px 8px; font-size: 10px; text-align: right; }
.report-link a, .report-small { color: var(--muted); font-size: 10px; }
.report-link a:hover, .report-small:hover { color: #d0021b; }
.report-preview { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; margin: 4px 0 10px; background: #f6f9ff; border: 1px solid #dde7f6; border-radius: 3px; }
.report-preview img { flex: none; border: 1px solid #b8cbe8; object-fit: cover; }
.report-text { white-space: pre-line; word-break: break-word; }
.reason-list { display: grid; gap: 4px; margin: 2px 0 8px; }
.report-card { border: 1px solid #d3dff0; border-left: 4px solid #d0021b; border-radius: 3px; padding: 10px 12px; margin-bottom: 12px; }
.report-details { font-style: italic; margin: 6px 0; }
.report-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.stat-grid { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat-grid li { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px; background: #f6f9ff; border: 1px solid #dde7f6; border-radius: 4px; }
.stat-grid img { grid-row: span 2; image-rendering: pixelated; }
.stat-grid b { font: bold 20px var(--font-head); color: #1d4f9e; }
.stat-grid span { font-size: 10px; color: var(--muted); }
.stat-grid .stat-alert { background: #fff0f0; border-color: #e08a8a; }
.stat-grid .stat-alert b { color: #d0021b; }
.admin-search { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.admin-search input { flex: 1; max-width: 340px; padding: 5px 6px; }
.admin-users td { vertical-align: middle; }
.admin-users form { margin: 0; }
.admin-users tr.is-banned td { background: #fff0f0 !important; color: #8a1010; }

/* ---- Blog --------------------------------------------------------------- */
.blog-owner { display: flex; gap: 10px; align-items: flex-start; font-size: 11px; }
.blog-owner img { border: 1px solid #b8cbe8; object-fit: cover; }
.blog-entry .box-head a { color: inherit; text-decoration: none; }
.blog-entry .box-head a:hover { text-decoration: underline; }
.blog-entry h1.box-head { font-size: 14px; }
.blog-date { font-size: 10px; font-weight: bold; color: var(--muted); margin-bottom: 8px; }
.blog-body { font-size: 13px; line-height: 1.65; word-break: break-word; }
.blog-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 6px; padding: 6px 8px; background: #f6f9ff; border: 1px dotted #b8cbe8; font-size: 11px; }
.blog-privacy { color: var(--muted); }
.blog-links { font-size: 11px; margin: 0; text-align: right; }
.blog-author { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dotted #d3dff0; }
.blog-author img { border: 1px solid #b8cbe8; object-fit: cover; }

/* ---- Pics (photo albums) ------------------------------------------------ */
.album-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 12px; }
.album-grid li { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.album-grid a { text-decoration: none; display: flex; flex-direction: column; gap: 4px; }
.album-grid a b { text-decoration: underline; word-break: break-word; }
.album-cover {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; background: #f2f6fc;
  border: 1px solid #b8cbe8; box-shadow: 3px 3px 0 #dbe7f9, 6px 6px 0 #c6d6ee; /* a little stack of pics */
}
.album-cover img:not(.px) { width: 100%; height: 100%; object-fit: cover; }
.album-grid a:hover .album-cover { outline: 2px solid var(--box-head-ink); }
.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.photo-grid a { position: relative; display: block; aspect-ratio: 1; border: 1px solid #b8cbe8; background: #f2f6fc; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid a:hover { outline: 2px solid var(--box-head-ink); }
.photo-badge { position: absolute; right: 4px; bottom: 4px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 10px; padding: 0 5px; border-radius: 8px; }
.photo-nav { display: flex; justify-content: space-between; align-items: center; padding: 8px; font-size: 11px; background: var(--box-head-bg); }
.photo-stage { background: #111; display: flex; justify-content: center; align-items: center; padding: 10px; min-width: 0; }
.photo-stage img { display: block; min-width: 0; max-width: 100%; width: auto; height: auto; max-height: 75vh; object-fit: contain; }
.photo-view { overflow: hidden; }
.photo-caption { font-size: 13px; font-weight: bold; margin: 0 0 4px; }
.caption-form { display: flex; gap: 6px; margin: 8px 0; }
.caption-form input { flex: 1; padding: 4px 6px; }
.report-image { max-width: 160px; max-height: 160px; margin: 4px 0; border: 1px solid #b8cbe8; }

/* ---- Browse & search ---------------------------------------------------- */
.browse-form select, .browse-form input[type="text"] { width: 100%; }
.age-row { display: flex; align-items: center; gap: 6px; }
.age-row select { flex: 1; }
.person-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.person-card { display: flex; gap: 10px; padding: 8px; background: #f6f9ff; border: 1px solid #dde7f6; border-radius: 4px; }
.person-card:hover { border-color: #9fbbe6; background: #fff; }
.person-photo img { width: 90px; height: 90px; object-fit: cover; border: 1px solid #b8cbe8; display: block; }
.person-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 11px; }
.person-name { font-weight: bold; font-size: 12px; word-break: break-word; }
.person-facts { color: var(--ink); }
.person-song { color: #8a3aa8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-mood { color: var(--muted); margin-top: auto; }
.online-dot { color: var(--online); font-size: 10px; margin-left: 4px; }
.artist-tag { align-self: flex-start; font-size: 9px; font-weight: bold; color: #fff; background: #8a3aa8; border-radius: 3px; padding: 0 5px; }

/* ---- Admin: news & backups ---------------------------------------------- */
.progress { height: 8px; background: #e3eaf5; border-radius: 4px; overflow: hidden; margin-bottom: 2px; min-width: 90px; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, #ff8a1f, #ffd42a); }
.guide { margin: 0 0 12px; padding-left: 20px; font-size: 12px; line-height: 1.6; }
.guide li { margin-bottom: 6px; }
.code-box { background: #1b1b2a; color: #9dff6a; padding: 8px 10px; border-radius: 3px; font-size: 11px; white-space: pre-wrap; word-break: break-all; margin: 6px 0; }
.code-box b { color: #ffd42a; }
.announcement { margin-bottom: 6px; }

/* ---- Notifications ------------------------------------------------------ */
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list li { border-bottom: 1px dotted #d3dff0; }
.notif-list li:last-child { border-bottom: 0; }
.notif-list a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; color: var(--ink); text-decoration: none; }
.notif-list a:hover { background: #f6f9ff; }
.notif-list li.unread a { background: #fffbe8; }
.notif-avatar { flex: none; border: 1px solid #b8cbe8; object-fit: cover; }
.notif-text { flex: 1; min-width: 0; font-size: 12px; word-break: break-word; }
.notif-text img { vertical-align: -3px; margin-right: 2px; }
.notif-text q { color: var(--muted); font-style: italic; }
.notif-text small { display: block; color: var(--muted); margin-top: 2px; }

/* ---- Mail --------------------------------------------------------------- */
.mail-list .mail-check { width: 28px; text-align: center; }
.mail-list .mail-status { width: 70px; font-size: 10px; }
.mail-list tr.unread td { font-weight: bold; background: #fffbe8; }
.status-new { color: var(--count); font-weight: bold; animation: nudge 1.6s steps(2, jump-none) infinite; display: inline-block; }
.status-replied { color: var(--online); }
.mail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mail-actions form { margin: 0; }
.mail-actions .pager { margin: 0 0 0 auto; }
.bulletin-meta .online.small { display: inline-flex; margin: 0 0 0 8px; vertical-align: middle; }
.quoted { margin: 14px 0 0; padding: 8px 10px; border-left: 3px solid #b8cbe8; background: #f6f9ff; color: var(--muted); font-size: 11px; }
.quoted small { display: block; margin-bottom: 4px; }

/* ---- Layout Editor ------------------------------------------------------ */
.layout-editor { border-top: 2px dashed #d3dff0; margin-top: 6px; }
.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.editor-controls fieldset { border: 1px solid #d3dff0; border-radius: 4px; margin: 0 0 10px; padding: 6px 10px 10px; display: grid; gap: 6px; }
.editor-controls legend { font-weight: bold; font-size: 11px; color: var(--accent-ink); padding: 0 4px; }
.editor-controls label { font-size: 11px; display: grid; gap: 2px; }
.editor-controls label.check { display: flex; }
.editor-controls output { color: var(--muted); font-size: 10px; }
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.color-grid label { display: flex; align-items: center; gap: 6px; }
.color-grid input[type="color"] { width: 34px; height: 24px; padding: 0; border: 1px solid #7f9db9; background: #fff; cursor: pointer; }
.editor-preview { position: sticky; top: 8px; }
.layout-preview { border: 1px solid #b8cbe8; border-radius: 4px; overflow: hidden; }
.lp-page { background: var(--page-bg) var(--page-bg-image); color: var(--ink); padding: 12px; font-size: 11px; min-height: 0; }
.lp-page a { color: var(--link); }
.lp-cols { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; align-items: start; }
.lp-page .box { margin-bottom: 8px; }
.lp-card { padding: 6px; text-align: center; }
.lp-card .pf-name { font-size: 12px; margin-bottom: 4px; }
.lp-card img { border: 1px solid rgba(0, 0, 0, .15); object-fit: cover; }
.lp-small { font-size: 10px; margin: 4px 0 0; }
.lp-glitter-name .pf-name, .lp-glitter-heads .box-head {
  background-image: linear-gradient(90deg, var(--link), var(--box-head-ink), #fff, var(--link)); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: glitter 3s linear infinite;
}

/* ---- IM chat (MySpaceIM / AIM style) ------------------------------------ */
.im-dock { position: fixed; right: 12px; bottom: 0; z-index: 70; display: flex; align-items: flex-end; gap: 8px; font-family: var(--font); pointer-events: none; }
.im-dock > * { pointer-events: auto; }
.im-tab {
  position: relative; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 1px solid #103a7a; border-bottom: 0; border-radius: 6px 6px 0 0; cursor: pointer;
  background: linear-gradient(#5a90e0, #3a72c8 48%, #245bb3 52%, #1d4f9e); color: #fff; font: bold 11px var(--font);
  box-shadow: 0 -2px 8px rgba(16, 58, 122, .25);
}
.im-tab small { font-weight: normal; opacity: .85; }
.im-tab .badge { position: static; margin-left: 2px; }
.im-has-unread { animation: im-pulse 1.4s ease-in-out infinite; }
@keyframes im-pulse { 50% { box-shadow: 0 -2px 14px rgba(255, 138, 31, .9); } }
.im-buddies, .im-window {
  width: 240px; background: #fff; border: 1px solid #103a7a; border-bottom: 0; border-radius: 6px 6px 0 0;
  box-shadow: 0 -2px 12px rgba(16, 58, 122, .3); display: flex; flex-direction: column;
}
.im-side { display: flex; flex-direction: column; align-items: flex-end; }
.im-buddies { max-height: 60vh; border-bottom: 1px solid #103a7a; border-radius: 6px 6px 0 6px; margin-bottom: -1px; }
.im-buddies[hidden] { display: none; }
.im-buddies-head, .im-head {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px 5px 0 0;
  background: linear-gradient(#5a90e0, #3a72c8 48%, #245bb3 52%, #1d4f9e); color: #fff; font-size: 11px;
}
.im-buddies-head b { flex: 1; }
.im-buddies-head button, .im-close { border: 0; background: rgba(255, 255, 255, .2); color: #fff; font: bold 12px/1 var(--font); width: 20px; height: 18px; border-radius: 3px; cursor: pointer; }
.im-buddies-head button:hover, .im-close:hover { background: rgba(255, 255, 255, .4); }
.im-list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; }
.im-empty { padding: 10px; color: var(--muted); font-size: 11px; text-align: center; }
.im-buddy {
  width: 100%; display: flex; align-items: center; gap: 7px; padding: 4px 6px; border: 0; border-radius: 3px;
  background: none; cursor: pointer; text-align: left; font: 11px var(--font); color: #1b1b2a; text-decoration: none;
}
.im-buddy:hover, .im-buddy.is-current { background: linear-gradient(#eef4fd, #dbe7f9); color: #1b1b2a; }
.im-buddy img { flex: none; border: 1px solid #b8cbe8; object-fit: cover; }
.im-buddy span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-buddy:not(.is-online) span { color: #8a8a99; }
.im-buddy.is-online span { font-weight: bold; }
.im-count { background: #e0101f; color: #fff; font-size: 9px; border-radius: 8px; padding: 0 5px; line-height: 15px; }
.im-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #c4c8d4; }
.is-online .im-dot, .im-dot.on { background: #34c724; box-shadow: 0 0 4px #34c724; }
.im-windows { display: flex; align-items: flex-end; gap: 8px; }
.im-window { height: 340px; }
.im-head a { flex: 1; color: #fff; font-weight: bold; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-head a:hover { text-decoration: underline; color: #fff; }
.im-head img { border: 1px solid #fff; border-radius: 2px; }
.im-messages { list-style: none; margin: 0; padding: 8px; flex: 1; overflow-y: auto; background: #fbfdff; font-size: 11px; }
.im-msg { margin-bottom: 6px; word-break: break-word; }
.im-msg b { color: #d0021b; }
.im-msg.mine b { color: #1d4f9e; }
.im-msg small { color: #8a8a99; font-size: 9px; }
.im-msg div p { margin: 0; }
.im-form { display: flex; gap: 4px; padding: 6px; border-top: 1px solid #d3dff0; }
.im-form textarea { flex: 1; resize: none; font: 11px var(--font); padding: 4px; }
.im-status { margin: 0; padding: 0 6px 4px; font-size: 10px; color: #c0101a; }
.im-status:empty { display: none; }
/* Full-page chat (/im) */
.im-page .im-dock { display: none; }
.im-page-list { list-style: none; display: grid; gap: 2px; }
.im-page-chat .im-window { width: 100%; height: 60vh; min-height: 320px; border-bottom: 1px solid #103a7a; border-radius: 6px; }
.im-back { display: none; }

/* ---- Friends ------------------------------------------------------------ */
.contact-grid form { margin: 0; }
button.contact-link { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.contact-highlight { color: var(--count) !important; }
.tab-count { font-size: 10px; background: #dbe7f9; color: #1d4f9e; border-radius: 8px; padding: 0 6px; line-height: 16px; }
.tab-count-new { background: linear-gradient(#ff6b6b, #e0101f); color: #fff; }
.section-title { margin: 4px 0 8px; font-size: 12px; color: var(--accent-ink); }
.section-title + p { margin-bottom: 14px; }

.friend-grid { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 8px; text-align: center; }
.friend-grid li { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.friend-grid a { text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.friend-grid a img { width: 90px; height: 90px; object-fit: cover; border: 1px solid rgba(0, 0, 0, .15); }
.friend-grid a:hover img { outline: 2px solid var(--box-head-ink); }
.friend-grid form { margin: 0; }
.friend-grid .link-btn { font-size: 10px; color: var(--muted); }

.request-list { list-style: none; margin: 0 0 18px; padding: 0; }
.request-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dotted #d3dff0; }
.request-list li:last-child { border-bottom: 0; }
.request-list img { flex: none; width: 60px; height: 60px; object-fit: cover; border: 1px solid #b8cbe8; }
.request-info { flex: 1; min-width: 0; }
.request-info small { display: block; color: var(--muted); }
.request-actions { display: flex; gap: 6px; flex: none; }
.request-actions form { margin: 0; }

.top-picker { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.top-picker li { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 6px; background: #f6f9ff; border: 1px solid #dde7f6; border-radius: 4px; }
.top-picker img { width: 72px; height: 72px; object-fit: cover; border: 1px solid #b8cbe8; background: #fff; }
.top-picker select { width: 100%; font-size: 11px; }
.slot-num { font: bold 13px var(--font-head); color: var(--accent-ink); }

.empty { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.empty p { margin: 0; }
.friends-owner { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px dotted #d3dff0; }
.friends-owner img { border: 1px solid #b8cbe8; object-fit: cover; }
.pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 10px; font-size: 11px; }
.pager span:not(.pager-info) { color: var(--muted); }
.edit-tab .tab-count { margin-left: 2px; }

@media (max-width: 560px) {
  .top-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .request-list li { flex-wrap: wrap; }
  .request-actions { width: 100%; padding-left: 70px; }
}

@media (max-width: 560px) {
  .signup-form .field, .edit-form .field { grid-template-columns: 1fr; }
  .signup-form .field > label, .edit-form .field > label { padding-top: 0; }
  .signup-form .field > span:empty, .edit-form .field > span:empty { display: none; }
  .photo-edit { flex-direction: column; align-items: center; }
  .edit-tab span { display: none; }
  .edit-tab[aria-current] span { display: inline; }
}

/* ==========================================================================
   Style guide & errors
   ========================================================================== */
.sg-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.sg-grid li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; background: #f6f9ff; border: 1px solid #dde7f6; font-size: 11px; }
.sg-grid li img:first-child:not(:last-of-type) { margin-bottom: 2px; }
.error-box { text-align: center; padding: 30px 16px; }
.error-box h1 { font: bold 18px var(--font-head); color: #1d4f9e; }

/* ==========================================================================
   Small screens
   ========================================================================== */
/* ---- Groups & Forum -------------------------------------------------------- */
.tag { display: inline-block; font-size: 9px; font-weight: bold; line-height: 14px; padding: 0 5px; border-radius: 3px; background: #e4ecf8; color: #1d4f9e; border: 1px solid #b8cbe8; vertical-align: 1px; }
.tag-private { background: #fff4d6; color: #7a5200; border-color: #eacb7a; }
.tag-adult { background: #ffe0e0; color: #9c1520; border-color: #eba0a0; }
.tag-pin { background: #fff3a8; color: #6a5200; border-color: #e3cc4e; }
.badge-inline { position: static; display: inline-block; vertical-align: 1px; }

.cat-list { list-style: none; margin: 0; }
.cat-list li + li { border-top: 1px dotted #d4e0f2; }
.cat-list a { display: flex; align-items: center; gap: 5px; padding: 3px 2px; font-size: 11px; }
.cat-list a[aria-current] { font-weight: bold; }

.hot-topics { list-style: none; margin: 0; }
.hot-topics li { padding: 4px 0; font-size: 11px; }
.hot-topics li + li { border-top: 1px dotted #d4e0f2; }
.hot-topics small { display: block; margin-left: 20px; }

.group-list { list-style: none; margin: 0; padding: 0; }
.group-list li { display: flex; gap: 10px; padding: 8px 10px; border-bottom: 1px dotted #c6d6ee; }
.group-list li:nth-child(even) { background: #f6f9ff; }
.group-list img { flex: none; border: 1px solid #b8cbe8; }
.group-list div { min-width: 0; }
.group-list p { margin: 2px 0 0; font-size: 11px; }
.group-name { font-weight: bold; font-size: 13px; }
.group-desc { word-break: break-word; }

.group-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px 8px; }
.group-actions form { margin: 0; }
.group-actions p { margin: 0; font-size: 11px; }

.topics .t-num { width: 60px; text-align: center; }
.topics .t-last { width: 130px; }
.topics td.t-num { font-weight: bold; }
.t-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.t-main img { flex: none; border: 1px solid #b8cbe8; }
.t-main div { min-width: 0; word-break: break-word; }
.topics tr.is-pinned td { background: #fffbe0; }
.topic-view .box-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.member-list { list-style: none; margin: 0; padding: 0; }
.member-list li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px dotted #c6d6ee; }
.member-list li > div:first-of-type { flex: 1; min-width: 0; }
.member-list img { border: 1px solid #b8cbe8; }
.member-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 10px; }
.member-actions form { margin: 0; }

.profile-groups { list-style: none; margin: 0; display: grid; gap: 4px; }
.profile-groups a { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: bold; }
.profile-groups img { flex: none; border: 1px solid rgba(0, 0, 0, .15); }
.profile-groups small { display: block; font-weight: normal; color: var(--muted); }

.slug-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.slug-row span { font-size: 11px; color: var(--muted); }
.slug-row input { flex: 1; min-width: 140px; }
.danger-zone { border-top: 1px dashed #e0a0a0; background: #fff6f6; }

/* ---- Events ------------------------------------------------------------------ */
.event-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.event-filter input { flex: 1; min-width: 160px; }
.event-list { list-style: none; margin: 0; padding: 0; }
.event-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-bottom: 1px dotted #c6d6ee; }
.event-list li:nth-child(even) { background: #f6f9ff; }
.event-list .show-date { text-decoration: none; }
.event-info { flex: 1; min-width: 0; word-break: break-word; }
.event-info p { margin: 2px 0 0; font-size: 11px; }
.event-title { font-weight: bold; font-size: 13px; }
.rsvp-badge { flex: none; font-size: 10px; font-weight: bold; padding: 2px 7px; border-radius: 9px; color: #fff; background: #5a8ad8; }
.rsvp-going { background: #2a8a2a; }
.rsvp-invited { background: #e0101f; }
.show-date.big { width: 58px; font-size: 11px; }
.show-date.big b { font-size: 24px; padding: 4px 0; }
.flyer-date { display: flex; align-items: center; gap: 10px; padding: 10px; font-size: 12px; }
.host-link { display: inline-flex; align-items: center; gap: 5px; font-weight: bold; }
.rsvp-box { padding: 10px; border-top: 1px dotted #c6d6ee; text-align: center; }
.rsvp-box p { margin: 0 0 6px; }
.rsvp-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.rsvp-buttons form { margin: 0; }
.cal-link { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px; }
.event-name { font-size: 15px; }
.event-invites { margin: 0 0 6px; }
.invite-tools { margin: 0 0 6px; font-size: 11px; }
.invite-grid { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px; max-height: 320px; overflow-y: auto; }
.invite-grid label { display: flex; align-items: center; gap: 6px; padding: 3px; font-size: 11px; font-weight: bold; cursor: pointer; border-radius: 3px; }
.invite-grid label:hover { background: #eef3fb; }
.invite-grid span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Badges ----------------------------------------------------------------- */
.rarity-common { --rarity: #8aa4c8; }
.rarity-rare { --rarity: #3f8ee8; }
.rarity-epic { --rarity: #9a4ad8; }
.rarity-legendary { --rarity: #ffb000; }
.badge-row { list-style: none; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.badge-chip { position: relative; display: inline-grid; place-items: center; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, .55); border: 1px solid var(--rarity); box-shadow: inset 0 0 6px color-mix(in srgb, var(--rarity) 45%, transparent); cursor: default; outline: none; }
.badge-chip img { display: block; transition: transform .15s; }
.badge-chip:hover img, .badge-chip:focus img { transform: scale(1.25) rotate(-6deg); }
.badge-chip.rarity-legendary { animation: legend-glow 2.4s ease-in-out infinite; }
@keyframes legend-glow { 50% { box-shadow: 0 0 10px #ffd42a, inset 0 0 6px #ffd42a; } }
.badge-tip {
  position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 50%; transform: translate(calc(-50% + var(--tip-shift, 0px)), 0);
  width: 170px; padding: 6px 8px; border-radius: 6px; background: #1b1b2a; color: #fff; font-size: 10px; line-height: 1.4; text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35); display: none; pointer-events: none;
}
.badge-tip::after { content: ''; position: absolute; top: 100%; left: calc(50% - var(--tip-shift, 0px)); margin-left: -5px; border: 5px solid transparent; border-top-color: #1b1b2a; }
.badge-tip b { display: block; font-size: 11px; }
.badge-tip em { display: block; font-style: normal; font-weight: bold; color: var(--rarity); text-transform: uppercase; letter-spacing: 1px; font-size: 9px; margin-bottom: 2px; }
.badge-tip small { display: block; color: #aab; margin-top: 3px; }
.badge-chip:hover .badge-tip, .badge-chip:focus .badge-tip { display: block; transform: translate(calc(-50% + var(--tip-shift, 0px)), 0); animation: tip-in .15s ease-out; }
@keyframes tip-in { from { opacity: 0; } }
.stats-table th { width: 96px; font-size: 10px; }
.stats-table td { font-size: 11px; }

.book-head { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.progress { flex: 1; height: 10px; border-radius: 5px; background: #dde6f3; overflow: hidden; border: 1px solid #b8cbe8; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, #ffae00, #ffd42a); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.progress.small { height: 6px; margin-top: 4px; width: 100%; flex: none; }
.badge-book { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.book-badge { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #d0dcee; border-top: 4px solid var(--rarity); }
.book-badge p { margin: 2px 0; font-size: 10px; color: var(--muted); }
.book-img { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rarity) 30%, #fff) 0%, #fff 70%); }
.book-badge.is-earned.rarity-legendary .book-img { animation: legend-glow 2.4s ease-in-out infinite; }
.book-badge.is-locked .book-img img { filter: grayscale(1) brightness(.5) contrast(.8); opacity: .55; }
.book-badge.is-locked { background: #f6f8fc; }
.rarity-tag { font-size: 9px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: var(--rarity); }
.book-badge .earned { color: #2a8a2a; font-weight: bold; font-size: 10px; }
.book-badge .how { font-size: 10px; color: #6a7a92; }
.window-tag { display: inline-block; font-size: 9px; font-weight: bold; padding: 0 6px; border-radius: 7px; background: #e4ecf8; color: #1d4f9e; }
.window-now { background: linear-gradient(#ffb347, #ff8a1f); color: #fff; animation: pill-bounce 1.4s ease-in-out infinite; }
.window-over { background: #eee; color: #888; }

/* ---- Photo frames (shop) --------------------------------------------------- */
.pf-frame { flex: none; display: inline-block; line-height: 0; border-radius: 3px; }
.pf-frame img { display: block; }
.frame-fx { padding: 5px; }
.frame-gold { background: linear-gradient(135deg, #8a5a00, #ffd42a, #fff6b0, #eaa000, #8a5a00, #ffd42a) 0 0 / 300% 300%; box-shadow: 0 0 10px rgba(255, 190, 0, .7); animation: frame-shimmer 4s linear infinite; }
.frame-glitter { background: linear-gradient(90deg, #ff2fa0, #ffc2e2, #fff, #ff90b4, #ff2fa0) 0 0 / 300% 100%; box-shadow: 0 0 8px rgba(255, 47, 160, .6); animation: frame-shimmer 2.5s linear infinite; }
.frame-neon { padding: 3px; background: #1b1b2a; box-shadow: 0 0 0 2px #39ff14, 0 0 10px #39ff14, 0 0 22px #ff2fa0; animation: frame-neon 1.6s ease-in-out infinite alternate; margin: 3px; }
.frame-rainbow { background: linear-gradient(90deg, #e8323c, #ff8a1f, #ffd42a, #5cc84a, #3f8ee8, #9a4ad8, #e8323c) 0 0 / 400% 100%; animation: frame-shimmer 3s linear infinite; }
.frame-hearts { padding: 7px; background: #ffe0ec url("/img/bg/hearts.gif"); border: 1px solid #ff90b4; }
.frame-pixel { padding: 0; margin: 9px; box-shadow: 0 0 0 3px #000, 0 0 0 6px #fff, 0 0 0 9px #000; border-radius: 0; }
.frame-ice { background: linear-gradient(135deg, #fff, #bcdcff, #40d0e0, #fff, #bcdcff) 0 0 / 300% 300%; box-shadow: 0 0 10px rgba(64, 208, 224, .7); animation: frame-shimmer 5s linear infinite; }
/* more frames */
.frame-fire { background: linear-gradient(0deg, #9c1520, #e8323c, #ff8a1f, #ffd42a, #ff8a1f, #e8323c, #9c1520) 0 0 / 100% 300%; box-shadow: 0 0 10px rgba(255, 90, 0, .8); animation: frame-rise 1.2s linear infinite; }
.frame-holo { background: linear-gradient(120deg, #ff90b4, #8fe8ff, #ece0ff, #b4ec8c, #fff6b0, #ff90b4) 0 0 / 400% 400%; box-shadow: 0 0 8px rgba(143, 232, 255, .8); animation: frame-shimmer 4s linear infinite; }
.frame-chrome { background: linear-gradient(135deg, #8c8c8c, #fff, #c4c8d4, #fff, #8c8c8c, #eceef4) 0 0 / 300% 300%; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); animation: frame-shimmer 3s linear infinite; }
.frame-candycane { background: repeating-linear-gradient(45deg, #e8323c 0 6px, #fff 6px 12px); box-shadow: 0 0 0 1px #9c1520; animation: frame-stripes 1s linear infinite; }
.frame-toxic { padding: 3px; margin: 3px; background: #1b1b2a; box-shadow: 0 0 0 2px #a6ff00, 0 0 10px #a6ff00; animation: frame-toxic 1.2s ease-in-out infinite alternate; }
.frame-emo { padding: 7px; background: #000; outline: 2px dashed #ff2fa0; outline-offset: -4px; }
.frame-polaroid { padding: 6px 6px 22px; background: #fff; border-radius: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transform: rotate(-2deg); }
.frame-leopard { padding: 7px; background: #d9a070 url("/img/bg/leopard.gif"); box-shadow: 0 0 0 1px #5a3a20; }
.frame-zebra { padding: 7px; background: #fff url("/img/bg/zebra.gif"); box-shadow: 0 0 0 1px #000; }
.frame-galaxy { padding: 7px; background: #3a1760 url("/img/bg/galaxy.gif"); box-shadow: 0 0 10px rgba(154, 74, 216, .7); }
.frame-matrix { padding: 7px; background: #000 url("/img/bg/matrix.gif"); box-shadow: 0 0 8px rgba(57, 255, 20, .6); }
.frame-sakura { padding: 7px; background: #ffc8dc url("/img/bg/sakura.gif"); box-shadow: 0 0 0 1px #ff90b4; }
.frame-camo { padding: 7px; background: #a89a5c url("/img/bg/camo.gif"); box-shadow: 0 0 0 1px #3d4a24; }
.frame-polka { padding: 7px; background: #ff2fa0 url("/img/bg/polka.gif"); box-shadow: 0 0 0 1px #c0006e; }
@keyframes frame-rise { to { background-position: 0 -300%; } }
@keyframes frame-stripes { to { background-position: 17px 0; } }
@keyframes frame-toxic { to { box-shadow: 0 0 0 2px #39ff14, 0 0 22px #39ff14; } }
@keyframes frame-shimmer { to { background-position: 300% 0; } }
@keyframes frame-neon { to { box-shadow: 0 0 0 2px #ff2fa0, 0 0 14px #ff2fa0, 0 0 26px #39ff14; } }

/* ---- Name effects (shop). They win over the layout's name color. ------------ */
.pf-name.name-fx { -webkit-text-fill-color: currentColor; }
.name-fx-rainbow, .name-fx-gold, .name-fx-fire, .name-fx-ocean, .name-fx-pastel, .name-fx-chrome, .name-fx-vaporwave, .name-fx-galaxy, .name-fx-candy, .name-fx-ice, .name-fx-emo {
  background-size: 300% 100% !important; -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; font-weight: bold;
}
.name-fx-rainbow { background-image: linear-gradient(90deg, #e8323c, #ff8a1f, #e0b000, #2a8a2a, #1d4f9e, #9a4ad8, #e8323c) !important; animation: glitter 4s linear infinite !important; }
.name-fx-gold { background-image: linear-gradient(100deg, #8a5a00 20%, #ffd42a 40%, #fff6b0 50%, #eaa000 60%, #8a5a00 80%) !important; animation: glitter 3s linear infinite !important; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
.name-fx-fire { background-image: linear-gradient(0deg, #c8102e, #ff8a1f 40%, #ffd42a 70%, #fff6b0) !important; background-size: 100% 200% !important; animation: fire-flicker .8s ease-in-out infinite alternate !important; filter: drop-shadow(0 0 3px rgba(255, 90, 0, .6)); }
@keyframes fire-flicker { to { background-position: 0 100%; } }
.name-fx-neon { background: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 0 0 3px #fff, 0 0 8px #ff2fa0, 0 0 16px #ff2fa0, 0 0 24px #ff2fa0 !important; animation: neon-flicker 3s infinite !important; }
@keyframes neon-flicker { 0%, 18%, 22%, 60%, 64%, 100% { opacity: 1; } 20%, 62% { opacity: .55; } }
.name-fx-wordart { background: none !important; color: #ffd42a !important; -webkit-text-fill-color: #ffd42a !important; font-style: italic; font-weight: 900; letter-spacing: 1px; animation: none !important;
  text-shadow: 1px 1px 0 #e8323c, 2px 2px 0 #e8323c, 3px 3px 0 #9c1520, 4px 4px 0 #1b1b2a, 5px 5px 3px rgba(0, 0, 0, .3) !important; }
.name-fx-sparkle { background: none !important; color: #ff2fa0 !important; -webkit-text-fill-color: #ff2fa0 !important; animation: none !important; position: relative; }
.name-fx-sparkle::before, .name-fx-sparkle::after { content: '\2726'; -webkit-text-fill-color: #ffd42a; color: #ffd42a; margin: 0 4px; font-size: .8em; animation: twinkle 1.2s ease-in-out infinite; display: inline-block; }
.name-fx-sparkle::after { animation-delay: .6s; }
@keyframes twinkle { 50% { transform: scale(.4) rotate(45deg); opacity: .4; } }
.name-fx-ocean { background-image: linear-gradient(90deg, #0b3d6e, #3f8ee8, #8fe8ff, #fff, #8fe8ff, #3f8ee8, #0b3d6e) !important; animation: glitter 3s linear infinite !important; }
.name-fx-pastel { background-image: linear-gradient(90deg, #ff90b4, #fff6b0, #b4ec8c, #8fe8ff, #ece0ff, #ff90b4) !important; animation: glitter 5s linear infinite !important; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
.name-fx-chrome { background-image: linear-gradient(180deg, #fff 0%, #c4c8d4 45%, #5a5a6a 50%, #c4c8d4 60%, #fff 100%) !important; background-size: 100% 100% !important; animation: none !important; filter: drop-shadow(0 1px 0 #1b1b2a) drop-shadow(0 0 1px #1b1b2a); }
.name-fx-vaporwave { background-image: linear-gradient(90deg, #ff2fa0, #9a4ad8, #40d0e0, #9a4ad8, #ff2fa0) !important; animation: glitter 4s linear infinite !important; font-style: italic; letter-spacing: 2px; filter: drop-shadow(2px 2px 0 rgba(64, 208, 224, .6)); }
.name-fx-galaxy { background-image: radial-gradient(circle at 20% 40%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 2px), linear-gradient(90deg, #23235a, #9a4ad8, #ff2fa0, #9a4ad8, #23235a) !important; background-size: 30px 30px, 40px 40px, 300% 100% !important; animation: glitter 6s linear infinite !important; }
.name-fx-candy { background-image: repeating-linear-gradient(45deg, #e8323c 0 6px, #fff 6px 9px, #ff90b4 9px 15px, #fff 15px 18px) !important; background-size: 200% 200% !important; animation: glitter 6s linear infinite !important; filter: drop-shadow(0 1px 0 #9c1520); }
.name-fx-ice { background-image: linear-gradient(180deg, #fff, #bcdcff 50%, #40d0e0) !important; background-size: 100% 100% !important; animation: none !important; filter: drop-shadow(0 0 3px rgba(64, 208, 224, .9)) drop-shadow(0 1px 0 #15609e); }
.name-fx-emo { background-image: repeating-linear-gradient(90deg, #ff2fa0 0 8px, #1b1b2a 8px 16px) !important; background-size: 200% 100% !important; animation: glitter 8s linear infinite !important; filter: drop-shadow(0 0 2px #ff2fa0); }
.name-fx-toxic { background: none !important; color: #a6ff00 !important; -webkit-text-fill-color: #a6ff00 !important; text-shadow: 0 0 4px #39ff14, 0 0 10px #39ff14, 0 2px 0 #1b1b2a !important; animation: toxic-drip 1.4s ease-in-out infinite alternate !important; }
@keyframes toxic-drip { to { text-shadow: 0 0 8px #39ff14, 0 0 20px #a6ff00, 0 3px 0 #1b1b2a; } }
.name-fx-glitch { background: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 2px 0 #ff2fa0, -2px 0 #40d0e0, 0 0 2px #000 !important; animation: glitch 2.2s steps(1) infinite !important; }
@keyframes glitch { 0%, 88%, 100% { text-shadow: 2px 0 #ff2fa0, -2px 0 #40d0e0, 0 0 2px #000; transform: none; } 90% { text-shadow: -3px 1px #ff2fa0, 3px -1px #40d0e0, 0 0 2px #000; transform: translateX(2px) skewX(-8deg); } 94% { text-shadow: 3px -1px #39ff14, -3px 1px #ff2fa0, 0 0 2px #000; transform: translateX(-2px); } }
.name-fx-bubble { background: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 900; letter-spacing: 1px; animation: none !important;
  text-shadow: 2px 0 0 #ff2fa0, -2px 0 0 #ff2fa0, 0 2px 0 #ff2fa0, 0 -2px 0 #ff2fa0, 2px 2px 0 #ff2fa0, -2px -2px 0 #ff2fa0, 2px -2px 0 #ff2fa0, -2px 2px 0 #ff2fa0, 4px 4px 0 #9a4ad8 !important; }
.name-fx-shadow { background: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 900; animation: none !important;
  text-shadow: 1px 1px 0 #1b1b2a, 2px 2px 0 #1b1b2a, 3px 3px 0 #23235a, 4px 4px 0 #23235a, 5px 5px 0 #3f8ee8, 6px 6px 0 #3f8ee8, 7px 7px 0 #8fe8ff !important; }

/* ---- Profile backgrounds & cursors (shop) --------------------------------- */
.shop-bg-galaxy { --shop-bg: #3a1760 url("/img/bg/galaxy.gif"); }
.shop-bg-checker { --shop-bg: #000 url("/img/bg/checker.gif"); }
.shop-bg-clouds { --shop-bg: #bcdcff url("/img/bg/clouds.gif"); }
.shop-bg-rainbow { --shop-bg: #fff url("/img/bg/rainbow.gif"); }
.shop-bg-stars { --shop-bg: #0d0d2e url("/img/bg/stars.gif"); }
.shop-bg-hearts { --shop-bg: #ffe0ec url("/img/bg/hearts.gif"); }
.shop-bg-zebra { --shop-bg: #fff url("/img/bg/zebra.gif"); }
.shop-bg-leopard { --shop-bg: #d9a070 url("/img/bg/leopard.gif"); }
.shop-bg-matrix { --shop-bg: #000 url("/img/bg/matrix.gif"); }
.shop-bg-bubbles { --shop-bg: #0b3d6e url("/img/bg/bubbles.gif"); }
.shop-bg-chrome { --shop-bg: #eceef4 url("/img/bg/chrome.gif"); }
.shop-bg-candy { --shop-bg: #ffe0ec url("/img/bg/candy.gif"); }
.shop-bg-plaid { --shop-bg: #e8323c url("/img/bg/plaid.gif"); }
.shop-bg-daisies { --shop-bg: #b4ec8c url("/img/bg/daisies.gif"); }
.shop-bg-camo { --shop-bg: #a89a5c url("/img/bg/camo.gif"); }
.shop-bg-waves { --shop-bg: #3f8ee8 url("/img/bg/waves.gif"); }
.shop-bg-grid { --shop-bg: #0d0d2e url("/img/bg/grid.gif"); }
.shop-bg-polka { --shop-bg: #ff2fa0 url("/img/bg/polka.gif"); }
.shop-bg-skulls { --shop-bg: #000 url("/img/bg/skulls.gif"); }
.shop-bg-cherries { --shop-bg: #ffe0ec url("/img/bg/cherries.gif"); }
.shop-bg-notes { --shop-bg: #ece0ff url("/img/bg/notes.gif"); }
.shop-bg-sakura { --shop-bg: #ffc8dc url("/img/bg/sakura.gif"); }
.shop-bg-glitter { --shop-bg: #000 url("/img/bg/glitter.gif"); }
body.shop-bg { background: var(--shop-bg) !important; }
.bg-swatch { display: block; width: 100%; height: 64px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .2); background: var(--shop-bg); }
.bg-swatch.small { width: 48px; height: 32px; }
.shop-cursor-pink, .shop-cursor-pink * { cursor: url("/img/cursors/pink.gif") 0 0, auto !important; }
.shop-cursor-neon, .shop-cursor-neon * { cursor: url("/img/cursors/neon.gif") 0 0, auto !important; }
.shop-cursor-wand, .shop-cursor-wand * { cursor: url("/img/cursors/wand.gif") 3 3, auto !important; }
.shop-cursor-gold, .shop-cursor-gold * { cursor: url("/img/cursors/gold.gif") 0 0, auto !important; }
.shop-cursor-lime, .shop-cursor-lime * { cursor: url("/img/cursors/lime.gif") 0 0, auto !important; }
.shop-cursor-rainbow, .shop-cursor-rainbow * { cursor: url("/img/cursors/rainbow.gif") 0 0, auto !important; }
.shop-cursor-heart, .shop-cursor-heart * { cursor: url("/img/cursors/heart.gif") 0 0, auto !important; }
.shop-cursor-star, .shop-cursor-star * { cursor: url("/img/cursors/star.gif") 0 0, auto !important; }
.shop-cursor-paw, .shop-cursor-paw * { cursor: url("/img/cursors/paw.gif") 0 0, auto !important; }
.shop-cursor-ghost, .shop-cursor-ghost * { cursor: url("/img/cursors/ghost.gif") 0 0, auto !important; }
.shop-cursor-sword, .shop-cursor-sword * { cursor: url("/img/cursors/sword.gif") 1 1, auto !important; }

/* ---- Credits ---------------------------------------------------------------- */
.coin-btn img { animation: none; }
.menu-credits b { color: #b07800; }
.new-pill { display: inline-block; font-size: 9px; font-weight: bold; line-height: 14px; padding: 0 5px; border-radius: 7px; color: #fff; background: linear-gradient(#ff6b6b, #e0101f); vertical-align: 1px; animation: pill-bounce 1.4s ease-in-out infinite; }
@keyframes pill-bounce { 50% { transform: translateY(-2px); } }
.wallet { text-align: center; padding: 14px 10px 10px; background: radial-gradient(circle at 50% 30%, #fff6b0, #ffd42a 60%, #eaa000); border-color: #c89200; }
.wallet p { margin: 0; }
.wallet-coin img { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .2)); }
.wallet-amount { font: bold 32px/1.1 var(--font-head); color: #6a4a00; text-shadow: 0 1px 0 #fff6b0; }
.wallet-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 14px; background: linear-gradient(#fff6b0, #ffd42a); border: 1px solid #c89200; color: #6a4a00; text-decoration: none; }
.earn-list { list-style: none; margin: 0; }
.earn-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dotted #d4e0f2; font-size: 11px; }
.earn-list b { color: #b07800; white-space: nowrap; }
.earn-list li.is-done { color: var(--muted); }
.earn-list li.is-done b { color: #2a8a2a; }
.streak-strip { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.streak-strip li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding: 6px 2px; min-height: 76px; border-radius: 8px; background: #f2f5fb; border: 1px solid #d0dcee; font-size: 10px; }
.streak-strip li.is-done { background: #e8f8e0; border-color: #8fd07a; }
.streak-strip li.is-done img { filter: grayscale(.3); }
.streak-strip li.is-done b::after { content: ' \2713'; color: #2a8a2a; }
.streak-strip li.is-today { background: #fff6d0; border: 2px solid #ffae00; box-shadow: 0 0 10px rgba(255, 174, 0, .5); animation: pill-bounce 1.4s ease-in-out infinite; }
.streak-strip li.is-bonus { background: linear-gradient(#fff6b0, #ffe680); }
.daily-claim { text-align: center; }
.daily-claim p { margin: 6px 0 0; }
.btn-big { font-size: 14px; padding: 7px 22px; }
.credit-history td.amount { width: 70px; text-align: right; font-weight: bold; }
.credit-history .plus { color: #2a8a2a; }
.credit-history .minus { color: #c8102e; }
.daily-nudge { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: linear-gradient(#fffbe0, #fff0b0); border-color: #e3c24e; }
.daily-nudge div { flex: 1; font-size: 11px; line-height: 1.35; }

/* ---- Shop ------------------------------------------------------------------ */
.shop-grid { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.shop-item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 8px; border-radius: 10px; background: #fff; border: 1px solid #d0dcee; transition: transform .12s, box-shadow .12s; }
.shop-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(29, 79, 158, .15); }
.shop-item.is-equipped { border: 2px solid #2a8a2a; background: #f6fff2; }
.shop-item p { margin: 2px 0; font-size: 10px; color: var(--muted); }
.new-pill.corner { position: absolute; top: -6px; right: -6px; }
.shop-preview { display: grid; place-items: center; width: 100%; min-height: 84px; padding: 6px; border-radius: 6px; background: #f2f5fb; }
.preview-name .pf-name { font: bold 19px var(--font-head); color: #1d4f9e; margin: 0; padding: 0 4px; }
.cursor-swatch { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 4px; border-radius: 4px; border: 1px dashed #b8cbe8; }
.cursor-swatch small { font-size: 9px; color: var(--muted); }
.shop-name { font-size: 12px; margin-top: 4px; }
.shop-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.shop-actions form { margin: 0; }
.price { display: inline-flex; align-items: center; gap: 3px; font-weight: bold; color: #6a4a00; }
.owned-tag { font-size: 10px; font-weight: bold; color: #2a8a2a; }
.center { text-align: center; }

/* ---- Admin: badges & shop --------------------------------------------------- */
.admin-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; border-bottom: 1px solid #d0dcee; }
.admin-form { display: flex; flex-direction: column; gap: 8px; }
.admin-form > label, .form-row label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: bold; }
.form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.form-row label { flex: 1; min-width: 90px; }
.admin-form > label.check { flex-direction: row; align-items: center; font-weight: normal; }
.admin-side form { margin-top: 10px; }
.admin-form fieldset { border: 1px solid #d0dcee; border-radius: 6px; padding: 8px; margin: 0; }
.admin-form legend { font-weight: bold; font-size: 11px; padding: 0 4px; }
.builtin-grid, .effect-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.builtin-grid label { cursor: pointer; }
.builtin-grid input, .effect-pick input { position: absolute; opacity: 0; }
.builtin-grid img { display: block; padding: 3px; border-radius: 6px; border: 2px solid transparent; background: #f2f5fb; }
.builtin-grid input:checked + img, .effect-pick input:checked + .shop-preview { border-color: #ff8a1f; background: #fff3e0; box-shadow: 0 0 0 2px rgba(255, 138, 31, .3); }
.effect-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; cursor: pointer; font-size: 10px; }
.effect-pick .shop-preview { min-height: 58px; border: 2px solid transparent; }
.badge-live { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; background: #f2f5fb; border: 1px solid #d0dcee; border-left: 5px solid var(--rarity); }
.badge-cell { display: flex; align-items: center; gap: 8px; }
.badge-cell img { border-radius: 6px; padding: 2px; background: #fff; border: 1px solid var(--rarity); }
.credit-form { display: flex; gap: 3px; margin-top: 3px; }
.credit-form input[type="number"] { width: 60px; }
.credit-form input[name="note"] { width: 110px; }

/* ---- Share button & teaser pages ----------------------------------------- */
.share { position: relative; display: inline-block; }
.box:has(.share-menu:not([hidden])), .share:has(.share-menu:not([hidden])) { position: relative; z-index: 60; } /* open menu sits above the boxes below it */
.share-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 160px; padding: 4px; border-radius: 6px; background: #fff; border: 1px solid #b8cbe8; box-shadow: 0 6px 18px rgba(29, 79, 158, .2); }
.share-menu a, .share-menu button { display: block; width: 100%; padding: 5px 8px; border: 0; border-radius: 4px; background: none; font: bold 11px var(--font); color: #1d4f9e; text-align: left; text-decoration: none; cursor: pointer; }
.share-menu a:hover, .share-menu button:hover { background: #eef3fb; }
.teaser { max-width: 620px; margin: 10px auto; }
.teaser-top { display: flex; align-items: center; gap: 16px; padding: 16px; }
.teaser-top img { flex: none; border: 1px solid #b8cbe8; border-radius: 4px; }
.teaser-top h1 { margin: 0; font: bold 20px var(--font-head); color: #1d4f9e; word-break: break-word; }
.teaser-top p { margin: 2px 0 0; }
.teaser-kind { text-transform: uppercase; letter-spacing: 1px; font-size: 9px; font-weight: bold; color: #ff8a1f; }
.teaser-desc { border-top: 1px dotted #c6d6ee; }
.teaser-cta { padding: 14px 16px 18px; text-align: center; background: linear-gradient(#f6f9ff, #e8f0fb); border-top: 1px solid #d0dcee; }
.teaser-cta p { margin: 0 0 10px; }
.teaser-cta .btn { margin: 3px; }
.url-box .share { margin-top: 6px; }

/* ---- Invite friends ---------------------------------------------------------- */
.invite-banner { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 0 10px; border-radius: 6px; background: linear-gradient(#fffbe0, #fff0b0); border: 1px solid #e3c24e; font-size: 12px; }
.invite-banner img { flex: none; border: 1px solid #e3c24e; }
.invite-hero { text-align: center; padding: 14px 12px; background: linear-gradient(#e8f6ff, #fff); }
.invite-hero h2 { margin: 6px 0; font: bold 16px var(--font-head); color: #1d4f9e; }
.invite-hero p { margin: 4px 0; font-size: 11px; }
.invite-hero .progress { margin: 8px 0 2px; }
.invite-link { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.invite-link input { flex: 1; min-width: 200px; font-weight: bold; color: #1d4f9e; }

/* ---- Moderation & two-step login -------------------------------------------- */
.word-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.word-list li { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 8px; border-radius: 10px; font-size: 11px; background: #eef3fb; border: 1px solid #b8cbe8; }
.word-list li.word-block { background: #ffe8e8; border-color: #e08a8a; }
.word-list small { color: var(--muted); font-size: 9px; }
.word-list form { margin: 0; }
.status-on { padding: 8px 10px; border-radius: 6px; background: #e8f8e0; border: 1px solid #8fd07a; }
.setup-steps { padding-left: 18px; }
.setup-steps li { margin-bottom: 12px; }
.qr-box { display: block; width: fit-content; margin: 8px 0 4px; padding: 8px; background: #fff; border: 1px solid #b8cbe8; border-radius: 6px; line-height: 0; }
.backup-codes { padding: 10px 12px; margin-bottom: 12px; border-radius: 6px; background: #fffbe0; border: 2px dashed #e3c24e; }
.backup-codes ol { columns: 2; margin: 6px 0 0; }
.backup-codes code { font-size: 13px; font-weight: bold; letter-spacing: 1px; }
.narrow { max-width: 380px; }
.narrow-box { max-width: 420px; margin: 20px auto; }
.inline-form { display: inline; margin: 0; }

/* ---- Leaderboards -------------------------------------------------------------- */
.mini-board { list-style: none; margin: 0; }
.mini-board li { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 11px; }
.mini-board a { display: inline-flex; align-items: center; gap: 5px; font-weight: bold; min-width: 0; }
.place { flex: none; width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; font-weight: bold; font-size: 11px; background: #e4ecf8; color: #1d4f9e; }
.mini-board .place-1 { background: #ffd42a; color: #6a4a00; }
.mini-board .place-2 { background: #d4d4d4; color: #444; }
.mini-board .place-3 { background: #e0a060; color: #fff; }
.board-intro { font-size: 11px; background: #f6f9ff; border-bottom: 1px solid #d0dcee; }
.rank-pill { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 9px; background: #2a8a2a; color: #fff; font-weight: bold; }
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px dotted #c6d6ee; }
.board-list li:nth-child(-n+3) { background: linear-gradient(90deg, #fff9dc, #fff); }
.board-list li.is-me { outline: 2px solid #2a8a2a; outline-offset: -2px; }
.board-list .place { width: 30px; height: 30px; font-size: 16px; background: none; }
.board-list a { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.board-list .score { font: bold 15px var(--font-head); color: #1d4f9e; white-space: nowrap; }
.board-list .score small { font: 10px var(--font); color: var(--muted); }

/* ---- Question of the Day --------------------------------------------------------- */
.question-text { margin: 0 0 8px; font: bold 14px var(--font-head); color: #1d4f9e; }
.poll-options { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.poll-option { flex: 1 1 auto; }
.poll-results { list-style: none; margin: 0 0 4px; padding: 0; }
.poll-results li { position: relative; display: flex; justify-content: space-between; padding: 4px 8px; margin-bottom: 3px; border-radius: 4px; background: #eef3fb; overflow: hidden; font-size: 11px; }
.poll-results li > * { position: relative; }
.poll-results .poll-bar { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #bcdcff, #8fbdf2); }
.poll-results li.is-mine b::after { content: ' \2713'; color: #2a8a2a; }
.my-answer { margin: 0 0 6px; padding: 6px 8px; border-radius: 4px; background: #fffbe0; }
.friend-answers { list-style: none; margin: 6px 0 0; padding: 0; }
.friend-answers li { padding: 4px 0; border-top: 1px dotted #d4e0f2; font-size: 11px; }
.friend-answers a { display: inline-flex; align-items: center; gap: 4px; }
.friend-answers p { display: inline; margin: 0; }
.qa-list { margin: 0; }
.qa-list dt { font-weight: bold; font-size: 11px; color: var(--accent-ink, #1d4f9e); margin-top: 6px; }
.qa-list dd { margin: 0 0 4px 10px; }
.qa-list dd p { margin: 0; }

/* ---- Status likes & replies --------------------------------------------------------- */
.status-actions { display: inline-flex; align-items: center; gap: 10px; margin-top: 3px; font-size: 11px; }
.status-actions form { margin: 0; }
.status-box .status-actions { margin-left: 8px; }
.like-btn { border: 1px solid #f2b6c9; border-radius: 10px; background: #fff; padding: 0 8px; font: bold 11px var(--font); color: #c8102e; cursor: pointer; line-height: 18px; }
.like-btn:hover { background: #fff0f4; }
.like-btn.is-liked { background: #ffe0ec; animation: like-pop .3s ease-out; }
@keyframes like-pop { 50% { transform: scale(1.2); } }
.status-big { display: flex; gap: 12px; align-items: flex-start; }
.status-big img { flex: none; border: 1px solid #b8cbe8; }
.status-big p { margin: 0 0 3px; font-size: 13px; }
.golden-banner { padding: 8px; border-radius: 6px; text-align: center; background: linear-gradient(90deg, #ffe680, #fff6b0, #ffe680); background-size: 200% 100%; animation: glitter 3s linear infinite; border: 1px solid #e3c24e; }
.daily-nudge.is-golden { background: linear-gradient(90deg, #ffe680, #fff6b0, #ffe680); background-size: 200% 100%; animation: glitter 3s linear infinite; border-color: #c89200; }

/* ---- Kudos & PC4PC ----------------------------------------------------------------- */
.kudos-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.kudos-row form { margin: 0; }
.kudo { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 2px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .12); background: rgba(255, 255, 255, .85); font: 11px var(--font); color: #1b1b2a; cursor: pointer; }
.kudo:hover { background: #fff; transform: translateY(-1px); }
.kudo.is-mine { background: #fff3c4; border-color: #e3c24e; box-shadow: 0 0 6px rgba(255, 200, 0, .5); }
.kudo.is-static { cursor: default; }
.kudo-icon { display: block; margin: 1px 0; transition: transform .15s; }
.kudo:hover .kudo-icon { transform: scale(1.15) rotate(-6deg); }
.kudo small { font-size: 8px; line-height: 1.1; color: #5a5a6a; text-align: center; }
.pic-comments { margin: 4px 0 0; font-size: 11px; font-weight: bold; }

/* ---- Layout Gallery ------------------------------------------------------------------- */
.layout-gallery { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.layout-gallery > li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 8px; border-radius: 10px; background: #fff; border: 1px solid #d0dcee; }
.gallery-preview { width: 100%; border-radius: 6px; overflow: hidden; border: 1px solid #b8cbe8; pointer-events: none; }
.gallery-preview .lp-page { padding: 8px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px; align-items: start; }
.gallery-preview .box { margin: 0; }
.gallery-preview .box-head { font-size: 10px; padding: 2px 5px; }
.gallery-preview .box-body { padding: 4px 5px; font-size: 9px; }
.gallery-preview .box-body p { margin: 0; }
.gallery-preview .pf-name { font-size: 10px; margin: 0 0 3px; }
.lp-pic { display: block; width: 40px; height: 40px; margin: 0 auto; background: url("/img/avatars/nopic.gif") center / cover; image-rendering: pixelated; border: 1px solid rgba(0, 0, 0, .15); }
.share-layout { margin: 10px 0; padding: 8px 10px; border-radius: 6px; background: #fff3e0; border: 1px dashed #ff8a1f; font-size: 11px; }
.share-layout .form-row { margin-top: 6px; }
.share-layout input { flex: 1; min-width: 180px; }

/* ---- Group chat ---------------------------------------------------------------------- */
.chat-cols { align-items: stretch; }
.chat-room { display: flex; flex-direction: column; }
.chat-messages { list-style: none; margin: 0; padding: 10px; height: 60vh; min-height: 320px; overflow-y: auto; background: #f6f9ff; }
.chat-msg { display: flex; gap: 8px; padding: 4px 0; font-size: 12px; }
.chat-msg img { flex: none; border: 1px solid #b8cbe8; }
.chat-msg > div { min-width: 0; max-width: 85%; padding: 5px 9px; border-radius: 10px; background: #fff; border: 1px solid #d0dcee; }
.chat-msg.mine { flex-direction: row-reverse; }
.chat-msg.mine > div { background: #e3f0ff; border-color: #a9c8ee; }
.chat-msg small { color: var(--muted); font-size: 9px; }
.chat-body p { margin: 2px 0 0; word-break: break-word; }
.chat-del { float: right; margin-left: 6px; font-size: 13px; line-height: 1; text-decoration: none; }
.chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #d0dcee; }
.chat-form textarea { flex: 1; resize: none; }
.chat-online { list-style: none; margin: 0; }
.chat-online a { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 11px; font-weight: bold; }

/* ---- Push & misc ---------------------------------------------------------------------- */
.push-box { margin-top: 16px; padding-top: 10px; border-top: 1px dashed #c6d6ee; }
.push-state { font-size: 12px; }
.question-admin li { padding: 6px 0; border-bottom: 1px dotted #d4e0f2; }
.question-admin li.is-today { background: #fffbe0; }
.mystery-box { animation: none; }

/* ---- Landing page ------------------------------------------------------------- */
body.landing-page .page { padding-top: 0; }
.landing-hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, #3f8ee8 0%, #2a6fcf 45%, #1d4f9e 100%);
  padding: 34px 0 44px; margin-bottom: 0;
}
.landing-hero::before { /* twinkling pixel stars */
  content: ''; position: absolute; inset: 0; background: url("/img/bg/stars.gif"); opacity: .28; mix-blend-mode: screen; image-rendering: pixelated;
}
.landing-hero::after { /* soft glossy shine at the top, like the header bars */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.hero-kicker { margin: 0 0 6px; font-size: 11px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; color: #ffe680; }
.hero-copy h1 { margin: 0 0 12px; font: bold 44px/1.02 var(--font-head); text-shadow: 0 3px 0 #123a7a, 0 6px 14px rgba(0, 0, 0, .25); letter-spacing: -1px; }
.hero-copy h1 .glitter { background-image: linear-gradient(90deg, #ffd42a, #ff90b4, #fff, #40d0e0, #ffd42a); text-shadow: none; filter: drop-shadow(0 3px 0 #123a7a); }
.hero-sub { max-width: 470px; margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: #e6f0ff; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero-cta .btn-big { font-size: 17px; padding: 10px 26px; box-shadow: 0 4px 0 #b34d00, 0 8px 18px rgba(0, 0, 0, .25); animation: cta-pulse 2.6s ease-in-out infinite; }
.hero-cta .btn-glass { padding: 8px 18px; font-size: 13px; }
@keyframes cta-pulse { 50% { transform: translateY(-2px) scale(1.03); } }
.hero-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.hero-stats li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 14px; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .3); font-size: 11px; }
.hero-stats b { font-size: 13px; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: #5cff4a; box-shadow: 0 0 6px #5cff4a; animation: live-blink 1.4s ease-in-out infinite; }
@keyframes live-blink { 50% { opacity: .35; } }
.hero-early { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 8px 14px 8px 8px; border-radius: 10px; background: rgba(255, 255, 255, .14); border: 1px dashed rgba(255, 230, 128, .7); font-size: 12px; max-width: 470px; }

/* The sample profile card */
.hero-demo { position: relative; justify-self: center; width: 100%; max-width: 380px; }
.demo-card {
  position: relative; padding: 12px; border-radius: 12px; color: var(--ink);
  background: var(--page-bg) var(--page-bg-image); border: 3px solid #fff; transform: rotate(2.5deg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35); animation: card-bob 5s ease-in-out infinite;
}
@keyframes card-bob { 50% { transform: rotate(1deg) translateY(-6px); } }
.demo-top { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 8px; background: var(--box-bg, #fff); border: 2px solid #000; }
.demo-top small { display: block; margin: 2px 0; font-size: 10px; }
.demo-name { font: bold 19px var(--font-head); line-height: 1.1; }
.demo-badges { display: flex; gap: 3px; margin-top: 4px; }
.demo-player { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border-radius: 6px; background: linear-gradient(#1a1f14, #0b0e08); color: #9dff6a; font-size: 10px; }
.demo-player .eq { margin: 0; }
.demo-player .eq i { animation: eq .6s ease-in-out infinite alternate; }
.demo-player .eq i:nth-child(2) { animation-delay: -.2s; }
.demo-player .eq i:nth-child(3) { animation-delay: -.4s; }
.demo-player .eq i:nth-child(4) { animation-delay: -.1s; }
.demo-top8 { margin-top: 8px; padding: 6px 8px; border-radius: 6px; background: var(--box-bg, #fff); border: 2px solid #000; font-size: 10px; }
.demo-top8 div { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin-top: 3px; }
.demo-top8 img { width: 100%; height: auto; border: 1px solid rgba(0, 0, 0, .2); }
.demo-comment { margin-top: 8px; padding: 6px 8px; border-radius: 6px; background: #fff; border: 2px solid #000; font-size: 11px; }
.demo-label { margin: 14px 0 0; text-align: center; font-size: 11px; color: #cfe2ff; font-style: italic; }
.float { position: absolute; z-index: 2; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); animation: floaty 4s ease-in-out infinite; }
.float.f1 { top: -18px; left: -14px; }
.float.f2 { top: 30%; right: -20px; animation-delay: -1s; }
.float.f3 { bottom: 16%; left: -22px; animation-delay: -2s; width: 30px; height: 30px; }
.float.f4 { bottom: 34px; right: 6px; animation-delay: -3s; }
@keyframes floaty { 50% { transform: translateY(-10px) rotate(-8deg); } }

/* Scrolling strip of layouts (an old-school marquee) */
.layout-marquee { overflow: hidden; background: #0d0d2e; border-top: 3px solid #ffd42a; border-bottom: 3px solid #ffd42a; margin-bottom: 14px; }
.marquee-track { display: flex; gap: 10px; width: max-content; padding: 8px 0; animation: marquee 40s linear infinite; }
.layout-marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-item { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 3px; border-radius: 16px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 11px; font-weight: bold; white-space: nowrap; }
.marquee-item i { display: block; width: 44px; height: 24px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .7); image-rendering: pixelated; }

/* Feature cards */
.feature-grid { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.feature-grid li { padding: 12px 10px; border-radius: 10px; background: linear-gradient(#fff, #f3f7ff); border: 1px solid #d0dcee; text-align: center; transition: transform .15s, box-shadow .15s; }
.feature-grid li:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(29, 79, 158, .15); }
.feature-grid li:hover img { animation: feature-hop .5s ease; }
@keyframes feature-hop { 40% { transform: translateY(-6px) rotate(-6deg); } }
.feature-grid b { display: block; margin: 4px 0 2px; font: bold 13px var(--font-head); color: #1d4f9e; }
.feature-grid p { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.4; }

.safe-box { background: linear-gradient(#f4fbf0, #fff); }
.safe-list { list-style: none; margin: 0; }
.safe-list li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 12px; }
.safe-list img { flex: none; margin-top: 2px; }

.steps { counter-reset: step; list-style: none; margin: 0; }
.steps li { counter-increment: step; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding: 5px 0 5px 30px; position: relative; font-size: 12px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#ffc27a, #ff8a1f); color: #fff; font-weight: bold; font-size: 11px; box-shadow: 0 1px 0 #c85a10; }
.steps small { color: var(--muted); font-size: 10px; }
.daily-teaser { text-align: center; padding: 12px; background: linear-gradient(#f3e8ff, #fff); border-color: #c9a8ee; }
.daily-teaser p { margin: 4px 0 8px; font-size: 11px; }
.teaser-badges { display: flex; justify-content: center; gap: 6px; }

.landing-cta { margin-top: 10px; padding: 22px 0; color: #fff; background: linear-gradient(90deg, #ff8a1f, #ff2fa0, #9a4ad8); background-size: 200% 100%; animation: glitter 8s linear infinite; }
.landing-cta .wrap { display: flex; align-items: center; gap: 16px; }
.landing-cta h2 { margin: 0; font: bold 22px var(--font-head); text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.landing-cta p { margin: 2px 0 0; }
.landing-cta .btn-big { margin-left: auto; font-size: 16px; padding: 9px 24px; --btn-1: #fff; --btn-2: #ffe8f4; --btn-border: #fff; --btn-ink: #c8102e; text-shadow: none; }
body.landing-page .page { padding-bottom: 0; }
body.landing-page .site-footer { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .demo-card, .float, .hero-cta .btn-big, .landing-cta { animation: none; }
}

/* ---- Text effects ([big] [rainbow] [marquee] [wave] [blink] [color=...]) ---------------- */
.rt-big { font-size: 1.45em; font-weight: bold; line-height: 1.2; }
.rt-small { font-size: .8em; }
.rt-center { display: block; text-align: center; }
.rt-rainbow { font-weight: bold; background: linear-gradient(90deg, #e8323c, #ff8a1f, #e0b000, #2a8a2a, #1d4f9e, #9a4ad8, #e8323c) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: glitter 4s linear infinite; }
.rt-marquee { display: block; overflow: hidden; white-space: nowrap; }
.rt-marquee > span { display: inline-block; padding-left: 100%; animation: rt-marquee 9s linear infinite; }
@keyframes rt-marquee { to { transform: translateX(-100%); } }
.rt-blink { animation: rt-blink 1.1s steps(2, start) infinite; }
@keyframes rt-blink { to { visibility: hidden; } }
.rt-wave > span { display: inline-block; animation: rt-wave 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.09s); }
@keyframes rt-wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-.28em); } }
@media (prefers-reduced-motion: reduce) { .rt-marquee > span, .rt-blink, .rt-wave > span, .rt-rainbow { animation: none; } .rt-marquee > span { padding-left: 0; } }
.emo-picker .emo-more { font: bold 10px var(--font); color: #1d4f9e; padding: 3px 6px; margin-left: 2px; }
.text-effects { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; width: 100%; margin-top: 4px; padding: 4px; border-radius: 6px; background: #f2f5fb; border: 1px solid #d0dcee; }
.text-effects button { padding: 2px 6px; font: 11px var(--font); line-height: 16px; }
.text-effects .color-dot { padding: 2px 3px; }
.color-dot i { display: block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); }
.dot-pink { background: #ff2fa0; } .dot-red { background: #e8323c; } .dot-orange { background: #ff8a1f; } .dot-gold { background: #d4a017; }
.dot-green { background: #2a8a2a; } .dot-teal { background: #0f9da8; } .dot-blue { background: #1d4f9e; } .dot-purple { background: #9a4ad8; }

/* ---- IM nudges ---------------------------------------------------------------- */
.im-nudge-btn { margin-left: auto; padding: 0 6px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 8px; background: rgba(255, 255, 255, .18); color: inherit; font: bold 9px var(--font); line-height: 16px; cursor: pointer; }
.im-nudge-btn:hover { background: rgba(255, 255, 255, .35); }
.im-nudge-btn + .im-close { margin-left: 4px; }
.im-msg.im-nudge { text-align: center; font-style: italic; color: #c8102e; }
.im-shake { animation: im-shake .5s linear 2; }
@keyframes im-shake { 10%, 50%, 90% { transform: translate(-6px, 2px); } 30%, 70% { transform: translate(6px, -2px); } }

/* ---- Pets ---------------------------------------------------------------------- */
.pet-card { display: flex; align-items: center; gap: 10px; }
.pet-stage { flex: none; width: 100px; height: 100px; display: grid; place-items: end center; border-radius: 10px; background: radial-gradient(ellipse at 50% 90%, rgba(0, 0, 0, .12) 0 30%, transparent 32%), linear-gradient(#e8f6ff, #fff); border: 1px solid rgba(0, 0, 0, .1); }
.pet-info { min-width: 0; font-size: 11px; }
.pet-info .progress { margin: 4px 0; }
.pet-info form, .pet-info .btn { margin-top: 5px; }
.pet-mood { font-weight: bold; }
.pet-mood.mood-happy { color: #2a8a2a; }
.pet-mood.mood-okay { color: #b07800; }
.pet-mood.mood-hungry { color: #c8102e; }
.pet-adopt-teaser { display: flex; align-items: center; gap: 4px; text-decoration: none; font-weight: bold; font-size: 11px; }
.pet-mini { display: flex; align-items: center; gap: 8px; padding: 6px 10px; text-decoration: none; color: inherit; font-size: 11px; background: linear-gradient(#e8f6ff, #fff); }
.pet-mini.mood-hungry { background: linear-gradient(#ffe8e8, #fff); border-color: #e08a8a; }
.pet-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pet-picker label { cursor: pointer; }
.pet-picker input { position: absolute; opacity: 0; }
.pet-picker span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border-radius: 10px; border: 2px solid #d0dcee; background: #fff; transition: transform .12s; }
.pet-picker span:hover { transform: translateY(-2px); }
.pet-picker input:checked + span { border-color: #ff8a1f; background: #fff3e0; box-shadow: 0 0 0 3px rgba(255, 138, 31, .25); }
.adopt-row input { flex: 1; min-width: 180px; font-size: 14px; }
.pet-home { text-align: center; }
.pet-room { padding: 16px 0 6px; background: url("/img/bg/clouds.gif"); border-bottom: 4px solid #5cc84a; image-rendering: pixelated; }
.pet-home.mood-hungry .pet-room { filter: saturate(.6); }
.pet-status { font-size: 14px; margin: 0 0 4px; }
.pet-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pet-actions form { margin: 0; }
.pet-actions .hint { width: 100%; }
.pet-wardrobe { display: flex; flex-wrap: wrap; gap: 6px; }
.pet-wardrobe form { margin: 0; }
.pet-wardrobe button { display: flex; flex-direction: column; align-items: center; padding: 4px 6px; border-radius: 8px; border: 2px solid #d0dcee; background: #fff; cursor: pointer; font: 9px var(--font); }
.pet-wardrobe button.is-on { border-color: #2a8a2a; background: #f0ffe8; }

/* ---- Pokes & suggestions --------------------------------------------------------- */
.poke-list, .pymk { list-style: none; margin: 0; }
.poke-list li, .pymk li { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 11px; }
.poke-list li + li, .pymk li + li { border-top: 1px dotted #d4e0f2; }
.poke-list span, .pymk li > div { flex: 1; min-width: 0; }
.poke-list form, .pymk form { margin: 0; }
.poke-list img, .pymk img { border: 1px solid #b8cbe8; }
.pymk .btn img { border: 0; }
.pokes-box { animation: poke-wiggle 1s ease-in-out 2; }
@keyframes poke-wiggle { 25% { transform: rotate(-1deg); } 75% { transform: rotate(1deg); } }

/* ---- Charts ------------------------------------------------------------------------ */
.chart-list { list-style: none; margin: 0; padding: 0; background: linear-gradient(#1a1f14, #0b0e08); }
.chart-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #2a3322; color: #d8ffc0; }
.chart-list li.playing { background: #1f2a16; }
.chart-rank { width: 26px; text-align: right; font: bold 18px var(--font-head); color: #9dff6a; }
.chart-move { width: 34px; font-size: 10px; font-weight: bold; color: #7f8a70; text-align: center; }
.chart-move.is-up { color: #5cff4a; }
.chart-move.is-down { color: #ff6b6b; }
.chart-move.is-new { color: #ffd42a; }
.chart-song { flex: 1; min-width: 0; font-size: 12px; }
.chart-song .muted, .chart-song small { color: #8fa27a; }
.chart-play { flex: none; }
.chart-list .player-frame { width: 100%; margin: 4px 0 0; }
.chart-artists { list-style: none; margin: 0; }
.chart-artists li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 11px; }
.chart-artists li + li { border-top: 1px dotted #d4e0f2; }
.chart-artists img { border: 1px solid #b8cbe8; }

/* ---- Admin stats -------------------------------------------------------------------- */
.stat-tiles { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.stat-tiles li { padding: 10px; border-radius: 8px; background: linear-gradient(#fff, #f3f7ff); border: 1px solid #d0dcee; }
.stat-tiles li.is-alert { background: #fff0f0; border-color: #e08a8a; }
.stat-tiles b { display: block; font: bold 24px var(--font-head); color: #1d4f9e; line-height: 1.1; }
.stat-tiles span { display: block; font-weight: bold; font-size: 11px; }
.stat-tiles small { color: var(--muted); font-size: 10px; }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bar-chart { margin: 0; }
.bar-chart svg { display: block; width: 100%; height: 150px; background: #f8faff; border: 1px solid #e0e8f5; border-radius: 6px; }
.bar-chart .grid { stroke: #e0e8f5; stroke-width: 1; }
.bar-chart text { font: 10px var(--font); fill: #6a7a92; }
.bar-chart figcaption { font-size: 10px; color: var(--muted); margin-top: 3px; }
.hbar-list { list-style: none; margin: 0 0 12px; padding: 0; }
.hbar-list li { display: grid; grid-template-columns: 140px 1fr 40px; align-items: center; gap: 6px; padding: 2px 0; font-size: 11px; }
.hbar-list i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #ffc27a, #ff8a1f); }
.hbar-list i.green { background: linear-gradient(90deg, #b4ec8c, #2a8a2a); }
.hbar-list b { text-align: right; }

/* ---------------------------------------------------------------------------
   Away messages
   --------------------------------------------------------------------------- */
.im-away-box { border-top: 1px solid #c9d8f0; padding: 6px; background: #f4f8ff; }
.away-form { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; }
.away-label { display: flex; align-items: center; gap: 4px; font-weight: bold; color: #1d4f9e; width: 100%; }
.away-row { display: flex; gap: 4px; width: 100%; }
.away-row input { flex: 1; min-width: 0; font-size: 11px; padding: 3px 5px; }
.away-now { margin: 0; display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.away-now span { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.away-status { color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 3px; margin: 4px 0; }
.away-status i { color: var(--ink); }
.im-buddy.is-away span { color: #7a6a9a; }
.im-away { margin: 0; padding: 4px 8px; background: #fff8d8; border-bottom: 1px solid #eadb9a; color: #6a5200; font-size: 11px; font-style: italic; }
.im-away[hidden] { display: none; }
.im-msg.im-auto { background: #fff8d8; border: 1px dashed #eadb9a; padding: 4px 6px; border-radius: 4px; }
.im-msg.im-auto b { color: #6a5200; }
.im-msg.im-auto div { font-style: italic; }

/* ---------------------------------------------------------------------------
   Gifts
   --------------------------------------------------------------------------- */
.shop-head-links { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.gift-link { font-size: 11px; display: inline-flex; align-items: center; gap: 3px; }
.gift-banner { background: #fff0f6; border: 1px solid #ff90b4; border-radius: 4px; padding: 6px 10px; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.gift-grid { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.gift-card { text-align: center; border: 1px dashed #ff90b4; background: linear-gradient(#fff, #fff0f6); border-radius: 6px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gift-card p { margin: 0; }
.gift-card form { margin: 4px 0 0; }
.gift-note { font-style: italic; color: #9c1520; word-break: break-word; }
.gift-box { width: 64px; height: 64px; }
.gift-history { list-style: none; margin: 0; }
.gift-history li { padding: 4px 0; border-bottom: 1px dotted #d6e2f4; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.gift-reveal { text-align: center; background: linear-gradient(#fffbe0, #fff); }
.gift-burst { font: bold 22px var(--font-head); color: #ff2fa0; margin: 0 0 4px; animation: gift-pop .5s ease-out; }
@keyframes gift-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.gift-item { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.stack-form { display: flex; flex-direction: column; gap: 6px; }
.stack-form select, .stack-form input[type="text"] { max-width: 100%; }

/* ---------------------------------------------------------------------------
   Who viewed my profile
   --------------------------------------------------------------------------- */
.visitor-grid { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 8px; text-align: center; }
.visitor-grid li { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.visitor-grid a { text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 3px; font-weight: bold; }
.visitor-grid img { width: 72px; height: 72px; object-fit: cover; border: 1px solid rgba(0, 0, 0, .15); }

/* ---------------------------------------------------------------------------
   Tags in pics
   --------------------------------------------------------------------------- */
.photo-tags { margin: 8px 0; padding: 6px 8px; background: #f4f8ff; border: 1px solid #d6e2f4; border-radius: 4px; }
.tag-list { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tag-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; background: #fff; border: 1px solid #b8cdea; border-radius: 10px; font-size: 11px; }
.tag-chip.is-pending { border-style: dashed; color: var(--muted); }
.tag-chip form { margin: 0; display: inline; }
.tag-chip .link-btn { color: #9c1520; font-weight: bold; padding: 0 2px; }
.tag-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 11px; }
.tag-requests { list-style: none; margin: 0; }
.tag-requests li { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dotted #d6e2f4; }
.tag-requests p { margin: 0 0 6px; }
.tag-thumb img { width: 100px; height: 100px; object-fit: cover; border: 1px solid rgba(0, 0, 0, .15); display: block; }
.tagged-grid { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; text-align: center; }
.tagged-grid img { width: 120px; height: 120px; object-fit: cover; border: 1px solid rgba(0, 0, 0, .15); display: block; margin: 0 auto 3px; }

/* ---------------------------------------------------------------------------
   Pic of the Week
   --------------------------------------------------------------------------- */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 220px; overflow-y: auto; margin-bottom: 8px; }
.pick-pic { position: relative; cursor: pointer; display: block; }
.pick-pic input { position: absolute; opacity: 0; }
.pick-pic img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: 2px solid transparent; }
.pick-pic input:checked + img { border-color: #ff8a1f; box-shadow: 0 0 0 2px #ffd42a; }
.pick-pic input:focus-visible + img { outline: 2px solid #1d4f9e; }
.contest-winners { list-style: none; margin: 0; }
.contest-winners li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 11px; }
.contest-winners img { width: 48px; height: 48px; object-fit: cover; display: block; }
.contest-winners .place-1 { background: #ffd42a; color: #6a4a00; }
.contest-winners .place-2 { background: #d4d4d4; color: #444; }
.contest-winners .place-3 { background: #e0a060; color: #fff; }
.contest-grid { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.contest-entry { position: relative; border: 1px solid #c9d8f0; background: #fff; padding: 6px; border-radius: 4px; display: flex; flex-direction: column; gap: 4px; }
.contest-entry.is-voted { border-color: #ff90b4; background: #fff5f9; }
.contest-entry.is-mine { border-color: #ffd42a; }
.contest-entry .place { position: absolute; top: -8px; left: -8px; z-index: 1; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.contest-entry .place-1 { background: #ffd42a; color: #6a4a00; }
.contest-entry .place-2 { background: #d4d4d4; color: #444; }
.contest-entry .place-3 { background: #e0a060; color: #fff; }
.contest-pic img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.contest-who { display: flex; align-items: center; gap: 4px; font-weight: bold; font-size: 11px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.contest-vote { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 11px; }
.contest-vote form { margin: 0; }

/* ---------------------------------------------------------------------------
   Graphics Maker (blinkies, buttons, glitter text)
   --------------------------------------------------------------------------- */
img.gfx { vertical-align: middle; max-width: 100%; }
.gfx-maker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.gfx-form .box-body { display: flex; flex-direction: column; gap: 6px; }
.gfx-form input[type="text"] { width: 100%; }
.gfx-set { border: 1px solid #d6e2f4; border-radius: 4px; padding: 6px 8px 8px; margin: 2px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.gfx-set legend { font-weight: bold; color: #1d4f9e; padding: 0 4px; }
.gfx-set label { display: inline-flex; align-items: center; gap: 4px; }
.gfx-color input[type="color"] { width: 30px; height: 22px; padding: 0; border: 1px solid #9fb6d8; background: #fff; cursor: pointer; }
.glitter-picks { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.glitter-pick { position: relative; cursor: pointer; }
.glitter-pick input { position: absolute; opacity: 0; }
.glitter-pick span { display: inline-block; padding: 3px 9px; border-radius: 12px; font-weight: bold; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); text-transform: capitalize; border: 2px solid transparent; }
.glitter-pick input:checked + span { border-color: #1b1b2a; box-shadow: 0 0 0 2px #ffd42a; }
.glitter-pick input:focus-visible + span { outline: 2px solid #1d4f9e; }
.glitter-pink span { background: linear-gradient(#ffb0d4, #d4006a); }
.glitter-gold span { background: linear-gradient(#fff6b0, #b87a00); }
.glitter-silver span { background: linear-gradient(#ffffff, #6a6e7c); }
.glitter-blue span { background: linear-gradient(#bcdcff, #12408a); }
.glitter-purple span { background: linear-gradient(#ecd0ff, #5a1a8a); }
.glitter-green span { background: linear-gradient(#d8ffc0, #1a6a1a); }
.glitter-red span { background: linear-gradient(#ffb0b0, #8a0a10); }
.glitter-rainbow span { background: linear-gradient(90deg, #ff3b3b, #ff8a1f, #ffd42a, #5cc84a, #3f8ee8, #9a4ad8); }
.gfx-stage { display: grid; place-items: center; min-height: 48px; padding: 10px; background: repeating-conic-gradient(#f0f0f6 0% 25%, #ffffff 0% 50%) 0 0 / 12px 12px; border: 1px dashed #c9d8f0; margin-bottom: 8px; overflow: hidden; }
.gfx-stage-big img { transform: scale(2); transform-origin: center; margin: 14px 0; max-width: 50%; }
.gfx-error { color: #9c1520; font-weight: bold; margin: 0 0 6px; }
.gfx-grid { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.gfx-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border: 1px solid #d6e2f4; border-radius: 4px; background: #fff; text-align: center; min-width: 0; }
.gfx-item > img { max-width: 100%; }
.gfx-item.is-new { border-color: #ff8a1f; box-shadow: 0 0 0 2px #ffd42a; }
.gfx-code { width: 100%; font: 11px monospace; text-align: center; padding: 2px 4px; }
.gfx-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; font-size: 10px; }
.gfx-actions form { margin: 0; }
.link-btn.danger { color: #9c1520; }
.blinkie-shelf { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.blinkie-shelf img { max-width: 100%; }

/* ---------------------------------------------------------------------------
   Sticker Wall
   --------------------------------------------------------------------------- */
.sticker-wall { position: relative; height: 170px; margin: 8px; border: 1px solid #d6e2f4; border-radius: 4px; overflow: hidden;
  background: #fffdf4 repeating-linear-gradient(0deg, transparent 0 19px, #e8eefc 19px 20px); }
.sticker-wall.is-placing { cursor: crosshair; }
.sticker { position: absolute; transform: rotate(var(--rot, 0deg)); transition: transform .15s; }
.sticker:hover { transform: rotate(0deg) scale(1.15); z-index: 2; }
.sticker img { display: block; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .25)); }
.sticker form { position: absolute; top: -6px; right: -6px; margin: 0; display: none; }
.sticker:hover form, .sticker:focus-within form { display: block; }
.peel { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #9c1520; background: #fff; color: #9c1520; font: bold 11px/1 var(--font); cursor: pointer; padding: 0; }
.sticker-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #8a7f6a; font-style: italic; pointer-events: none; }
.sticker-ghost { position: absolute; width: 42px; height: 42px; background: center / contain no-repeat; opacity: .6; image-rendering: pixelated; pointer-events: none; outline: 2px dashed #ff8a1f; }
.sticker-ghost[hidden] { display: none; }
.sticker-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 0; }
.sticker-picks { display: flex; flex-wrap: wrap; gap: 2px; width: 100%; }
.sticker-pick { position: relative; cursor: pointer; }
.sticker-pick input { position: absolute; opacity: 0; }
.sticker-pick img { display: block; padding: 2px; border: 2px solid transparent; border-radius: 4px; }
.sticker-pick input:checked + img { border-color: #ff8a1f; background: #fff3e0; }
.sticker-pick input:focus-visible + img { outline: 2px solid #1d4f9e; }
.small-note { font-size: 11px; padding-top: 0; }

/* ---------------------------------------------------------------------------
   Reactions
   --------------------------------------------------------------------------- */
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.reactions form { margin: 0; }
.react-btn { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border: 1px solid #c9d8f0; border-radius: 12px; background: #fff; font: 11px var(--font); color: #1d4f9e; cursor: pointer; }
span.react-btn { cursor: default; }
button.react-btn:hover { background: #eef4ff; }
.react-btn.is-mine { border-color: #ff2fa0; background: #fff0f6; color: #d4006a; }
.react-row { padding-top: 0; }

/* ---------------------------------------------------------------------------
   IM streaks
   --------------------------------------------------------------------------- */
.im-streak { display: inline-flex; align-items: center; gap: 1px; font: bold 10px var(--font); color: #c85a10; }
.im-streak[hidden] { display: none; }
.im-head .im-streak { color: #ffd42a; }
.im-streak.at-risk { animation: streak-pulse 1.2s ease-in-out infinite; }
@keyframes streak-pulse { 50% { opacity: .35; } }

/* ---------------------------------------------------------------------------
   Friendiversaries & birthday cards
   --------------------------------------------------------------------------- */
.party-box { background: linear-gradient(#fffbe0, #fff); }
.party-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dotted #eadb9a; text-decoration: none; color: inherit; }
.party-row:last-child { border-bottom: 0; }
.party-row .btn { margin-top: 4px; }
.party-avatar { object-fit: cover; border: 1px solid rgba(0, 0, 0, .15); }
.my-card:hover b { text-decoration: underline; }
.card-wrap { max-width: 680px; }
.bday-card { border: 3px solid #ff90b4; border-radius: 8px; overflow: hidden; margin-bottom: 12px; box-shadow: 0 3px 0 rgba(0, 0, 0, .1); background: #fff; }
.bday-cover { text-align: center; padding: 18px 10px 12px; background: url(/img/bg/candy.gif) repeat; image-rendering: pixelated; }
.cover-stars .bday-cover { background-image: url(/img/bg/stars.gif); color: #fff; }
.cover-confetti .bday-cover { background-image: url(/img/bg/hearts.gif); }
.bday-cover h1 { margin: 6px auto 0; display: inline-block; padding: 6px 14px; background: rgba(255, 255, 255, .9); border-radius: 8px; font: bold 24px/1.2 var(--font-head); color: #d4006a; }
.bday-cover p { margin: 6px 0 0; }
.cover-stars .bday-cover p { color: #fff6b0; }
.bday-inside { padding: 14px; background: #fffdf4 repeating-linear-gradient(0deg, transparent 0 23px, #f3e8c8 23px 24px); }
.bday-empty { text-align: center; color: var(--muted); font-style: italic; }
.bday-sigs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.bday-sig { position: relative; transform: rotate(var(--tilt)); color: var(--pen); font-family: "Comic Sans MS", "Comic Neue", cursive, var(--font); padding: 4px 18px 4px 4px; }
.bday-msg p { margin: 0 0 4px; }
.bday-from { font-size: 11px; }
.bday-from a { color: inherit; font-weight: bold; }
.bday-sig form { position: absolute; top: 0; right: 0; margin: 0; }
.pen-picks { display: flex; align-items: center; gap: 6px; }
.pen-pick { position: relative; cursor: pointer; }
.pen-pick input { position: absolute; opacity: 0; }
.pen-pick span { display: block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #9fb6d8; }
.pen-pick input:checked + span { box-shadow: 0 0 0 2px #1b1b2a; }
.pen-pick input:focus-visible + span { outline: 2px solid #1d4f9e; outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   My Room
   --------------------------------------------------------------------------- */
.room-wrap { max-width: 1060px; }
.room-head-links { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.room-cols { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 10px; align-items: start; }
.room-main { min-width: 0; }
.room-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; min-height: 26px; flex-wrap: wrap; }
.room-toolbar [aria-pressed="true"] { background: linear-gradient(#ffc27a, #ff8a1f); color: #fff; border-color: #c85a10; }
.room-placebar { display: inline-flex; gap: 4px; }
.room-placebar[hidden] { display: none; }
.room-status { font-size: 11px; color: #1d4f9e; font-weight: bold; }
.room-status.is-error { color: #9c1520; }
.room-frame { position: relative; display: flex; justify-content: center; padding: 10px 0; border-radius: 8px; overflow: hidden; user-select: none;
  background: #1a1030 radial-gradient(circle at 50% 35%, #3a2a66 0%, #1a1030 70%); border: 2px solid #0d0a18; box-shadow: inset 0 0 40px rgba(0, 0, 0, .5); }
.room-scaler { position: relative; }
.room-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; image-rendering: pixelated; }
.room-stage > img, .room-stage > canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; pointer-events: none; }
.room-bg[data-room-wall] { z-index: 0; }
.room-bg[data-room-floor] { z-index: 1; }
.room-hilite { z-index: 2; }
.room-layer { position: absolute; inset: 0; }
.furni, .avatar { position: absolute; image-rendering: pixelated; pointer-events: none; max-width: none; }
.furni.is-mirror, .avatar.is-mirror { transform: scaleX(-1); }
.furni.is-selected { filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); }
.furni.ghost { opacity: .8; }
.furni.ghost.is-bad { opacity: .5; filter: sepia(1) saturate(4) hue-rotate(-40deg); }
.room-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #fff; font-weight: bold; }
[data-room].is-ready .room-loading { display: none; }
.room-gone { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(13, 10, 24, .82); color: #fff; font-weight: bold; text-align: center; padding: 20px; z-index: 20; }
.room-gone[hidden] { display: none; }
.room-bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.bubble { position: absolute; transform: translate(-50%, -100%); width: max-content; max-width: 240px; padding: 3px 8px; background: #fff; border: 2px solid #2a2036; border-radius: 8px;
  font: 11px/1.3 var(--font); color: #1b1b2a; white-space: normal; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); transition: transform .35s ease, opacity .8s; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -5px; border: 5px solid transparent; border-top-color: #2a2036; border-bottom: 0; }
.bubble.is-me { background: #fff6d8; }
.bubble.is-old { opacity: 0; }
.bubble b { color: #1d4f9e; }
.avatar-tag { position: absolute; transform: translate(-50%, -100%); padding: 1px 6px; border-radius: 8px; background: rgba(13, 10, 24, .8); color: #fff; font: bold 10px var(--font); white-space: nowrap; opacity: 0; transition: opacity .15s; }
.avatar-tag.is-shown { opacity: 1; }
.room-card { position: absolute; left: 10px; bottom: 10px; z-index: 15; background: #fff; border: 2px solid #2a2036; border-radius: 6px; padding: 6px 10px; font-size: 11px; box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.room-card[hidden], .room-editbar[hidden] { display: none; }
.room-editbar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 15; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center;
  background: #fff; border: 2px solid #2a2036; border-radius: 6px; padding: 5px 8px; box-shadow: 0 2px 0 rgba(0, 0, 0, .3); font-size: 11px; max-width: calc(100% - 20px); }
.room-editbar [hidden] { display: none; }
.room-chat { display: flex; gap: 6px; margin-top: 6px; }
.room-chat input { flex: 1; min-width: 0; }
.room-visitors { list-style: none; margin: 0; max-height: 140px; overflow-y: auto; font-size: 11px; }
.room-visitors li { padding: 1px 0; }
.room-like { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 0; font-size: 11px; }
.room-like form { margin: 0; }
.room-log { list-style: none; margin: 0; height: 150px; overflow-y: auto; font-size: 11px; word-break: break-word; }
.room-log li { padding: 1px 0; }
.room-log b { color: #1d4f9e; }
.room-settings summary { cursor: pointer; font-weight: bold; color: #1d4f9e; }
.room-settings form { margin-top: 6px; font-size: 11px; }
.room-settings label { display: flex; flex-direction: column; gap: 2px; }
.room-decor .hint { padding: 0 8px 8px; margin: 0; }
.room-inv-tabs { display: flex; gap: 4px; padding: 8px 8px 0; }
.room-inv-tabs [aria-pressed="true"] { background: #dce9fb; border-color: #7fa6e2; }
.room-inventory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px; max-height: 320px; overflow-y: auto; }
.room-inventory p { grid-column: 1 / -1; margin: 4px 0; font-size: 11px; }
.inv-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border: 1px solid #d6e2f4; border-radius: 4px; background: #fff; cursor: pointer; font: 9px/1.2 var(--font); color: #1b1b2a; text-align: center; min-width: 0; }
.inv-item:hover { border-color: #ff8a1f; background: #fff8ee; }
.inv-item img { height: 44px; width: auto; max-width: 100%; object-fit: contain; image-rendering: pixelated; }
.inv-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.inv-item b { position: absolute; top: 2px; right: 3px; font-size: 9px; color: #c85a10; }
.inv-item small { color: #9a4ad8; font-size: 8px; }
.inv-item.is-rare { border-color: #e0b020; background: #fffbe8; }
.inv-item.is-current { border-color: #5cc84a; background: #f0fff0; }
.look-form { display: flex; gap: 10px; align-items: flex-start; }
.look-preview { image-rendering: pixelated; background: #e8eefc; border: 1px solid #c9d8f0; border-radius: 4px; flex: none; }
.look-fields { display: flex; flex-direction: column; gap: 3px; font-size: 11px; flex: 1; min-width: 0; }
.look-fields label { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.look-fields select { max-width: 110px; }
a.room-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-decoration: none; color: var(--ink); background: var(--box-bg); }
a.room-link b { color: var(--link); }
a.room-link small { color: var(--muted); }
a.room-link:hover b { text-decoration: underline; }
a.room-link img { image-rendering: pixelated; }

/* Navigator */
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list li + li { border-top: 1px solid #e4ecf8; }
.nav-room { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 50px; align-items: center; gap: 10px; padding: 8px 12px; text-decoration: none; color: inherit; }
.nav-room:hover { background: #f4f8ff; }
.nav-people { width: 30px; height: 20px; border-radius: 10px; display: grid; place-items: center; background: #d4d4d4; color: #444; font-weight: bold; font-size: 11px; }
.nav-people.is-busy { background: #5cc84a; color: #fff; }
.nav-text { display: flex; flex-direction: column; min-width: 0; }
.nav-text b { color: #1d4f9e; }
.nav-text small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-owner { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.nav-owner img { object-fit: cover; }
.nav-likes { color: #d4006a; font-weight: bold; font-size: 11px; text-align: right; }

/* Catalogue */
.catalogue { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 10px; align-items: start; }
.cat-pages { display: flex; flex-direction: column; gap: 3px; }
.cat-page { display: block; padding: 7px 10px; border: 1px solid #c9d8f0; border-radius: 4px; background: linear-gradient(#fff, #eef4ff); color: #1d4f9e; font-weight: bold; text-decoration: none; }
.cat-page:hover { border-color: #7fa6e2; }
.cat-page[aria-current="page"] { background: linear-gradient(#ffc27a, #ff8a1f); color: #fff; border-color: #c85a10; }
.cat-page.is-limited { background: linear-gradient(#fff6b0, #ffd42a); color: #6a4a00; border-color: #c89200; }
.cat-page.is-limited[aria-current="page"] { background: linear-gradient(#ffe066, #e0a000); color: #fff; }
.cat-grid { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cat-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px; border: 1px solid #d6e2f4; border-radius: 6px; background: #fff; text-align: center; }
.cat-img { flex: 1; min-height: 100px; width: 100%; padding-top: 6px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: radial-gradient(ellipse at 50% 85%, #eef2fb 0%, #fff 70%); }
.cat-img img, .limited-stage img, .hall img { image-rendering: pixelated; max-width: none; }
.cat-img img { flex: none; }
.cat-zoom { zoom: 2; } /* size unknown: show at 2x, keeping its real shape */
.limited-box .box-head { background: linear-gradient(#fff6b0, #ffd42a); color: #6a4a00; }
.limited-main { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.limited-stage { flex: none; width: 220px; height: 240px; display: flex; align-items: flex-end; justify-content: center; border-radius: 8px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #fff6b0 0%, #ffd42a 35%, #6a2c91 100%); animation: rare-glow 3s ease-in-out infinite; }
@keyframes rare-glow { 50% { filter: brightness(1.12); } }
.limited-info { flex: 1; min-width: 200px; }
.limited-info h3 { margin: 0 0 6px; font: bold 20px var(--font-head); color: #6a2c91; }
.sold-out { display: inline-block; padding: 4px 12px; background: #9c1520; color: #fff; font-weight: bold; border-radius: 4px; transform: rotate(-4deg); }
.hall { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; text-align: center; }
.hall li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border: 1px solid #eadb9a; border-radius: 6px; background: #fffdf0; }
.rares-table input[type="number"] { width: 80px; }
.rares-table img { vertical-align: middle; image-rendering: pixelated; }

/* ---- Narrow pages -------------------------------------------------------- */
.wrap.narrow-wrap { max-width: 760px; }
.settings-sub { margin: 16px 0 6px; font: bold 13px var(--font-head); color: var(--accent-ink); display: flex; align-items: center; gap: 5px; }

/* ---- @mentions & #hashtags ---------------------------------------------- */
.rt-mention, .rt-tag { font-weight: bold; text-decoration: none; border-radius: 3px; padding: 0 2px; }
.rt-mention { color: var(--link); background: color-mix(in srgb, var(--link) 10%, transparent); }
.rt-tag { color: #d4006a; background: color-mix(in srgb, #ff2fa0 10%, transparent); }
.rt-mention:hover, .rt-tag:hover { text-decoration: underline; }

/* ---- Staff tags on profiles --------------------------------------------- */
.staff-tags { margin: 0 0 6px; }
.staff-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; font: bold 10px var(--font); letter-spacing: 0.5px; text-transform: uppercase;
  color: #fff; border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 0 rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); cursor: help;
}
.staff-founder { background: linear-gradient(#ffe36b, #e0a000 55%, #c47f00); color: #4a2a00; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.staff-staff { background: linear-gradient(#ff7a7a, #e0101f 55%, #a80010); }
.staff-mod { background: linear-gradient(#7fb4ff, #2a6ee0 55%, #1d4f9e); }
.staff-founder { animation: founder-shine 3s linear infinite; }
@keyframes founder-shine { 0%, 80% { filter: none; } 90% { filter: brightness(1.25); } 100% { filter: none; } }

/* ---- Profile: boxes in the member's own order ---------------------------- */
.profile-page .cols > .col-left, .profile-page .cols > .col-right { display: flex; flex-direction: column; min-width: 0; }
.profile-page .cols > div > * { min-width: 0; }

/* ---- Friends' Activity --------------------------------------------------- */
.activity-list { list-style: none; margin: 0; padding: 0; }
.act-item { display: flex; gap: 8px; padding: 8px; border-bottom: 1px dotted color-mix(in srgb, var(--muted) 45%, transparent); }
.act-item:last-child { border-bottom: 0; }
.act-item:target { background: color-mix(in srgb, var(--accent-ink) 10%, transparent); }
.act-avatar { flex: none; }
.act-main { min-width: 0; flex: 1; }
.act-line { margin: 0 0 4px; font-size: 11px; line-height: 1.5; }
.act-line img { vertical-align: -3px; }
.act-line small { margin-left: 3px; }
.act-thumbs { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0 4px; }
.act-thumbs img { display: block; object-fit: cover; border: 1px solid color-mix(in srgb, var(--muted) 50%, transparent); background: #fff; padding: 1px; }
.act-badge { display: inline-block; margin: 0 0 4px; }
.act-reacts { display: flex; flex-wrap: wrap; gap: 3px; }
.act-reacts form { margin: 0; }
.act-reacts .react-btn { padding: 1px 5px; }

/* ---- On this day ---------------------------------------------------------- */
.memories-box .box-body { background: repeating-linear-gradient(0deg, transparent 0 17px, color-mix(in srgb, var(--link) 7%, transparent) 17px 18px); }
.memory-year + .memory-year { margin-top: 8px; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); }
.memory-when { display: block; color: var(--accent-ink); font-family: var(--font-head); margin-bottom: 3px; }
.memory-row { margin: 2px 0; font-size: 11px; }
.memory-row img { vertical-align: -3px; }

/* ---- Trending & tag pages ------------------------------------------------- */
.trending-list { list-style: none; margin: 0; }
.trending-list li { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 12px; }
.trending-list li a { font-weight: bold; color: #d4006a; }
.trending-list li.is-current a { text-decoration: underline; }
.trending-list .place-1 { background: #ff2fa0; color: #fff; }
.trending-list .place-2 { background: #ff90b4; color: #fff; }
.trending-list .place-3 { background: #ffd0e2; color: #a0005a; }
.tag-posts { list-style: none; margin: 0; }
.tag-posts li { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px dotted color-mix(in srgb, var(--muted) 45%, transparent); }
.tag-posts li:last-child { border-bottom: 0; }
.tag-posts p { margin: 0 0 3px; }
.tag-posts img { vertical-align: -3px; }
.tag-teaser { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }

/* ---- Surveys & quizzes ---------------------------------------------------- */
.survey-picker { list-style: none; margin: 0; }
.survey-picker li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dotted color-mix(in srgb, var(--muted) 45%, transparent); }
.survey-picker li:last-child { border-bottom: 0; }
.survey-actions { display: flex; gap: 4px; flex: none; }
.done-pill { background: linear-gradient(#5cc84a, #2a8a2a); animation: none; }
.survey-questions { margin: 0; padding-left: 28px; }
.survey-questions li { padding: 4px 0; }
.survey-questions label { display: block; font-weight: bold; font-size: 11px; margin-bottom: 2px; }
.survey-questions input { width: 100%; padding: 4px 6px; }
.survey-questions li::marker { color: var(--accent-ink); font-weight: bold; }
.survey-submit { display: grid; gap: 6px; justify-items: start; border-top: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); }
.things-list { margin: 0; padding-left: 30px; }
.things-list li { padding: 3px 0; }
.things-list li::marker { color: var(--accent-ink); font-weight: bold; }
.survey-table th { width: 45%; }
.survey-list { margin-top: 6px; }
.survey-list img { vertical-align: -3px; }
.quiz-teaser { display: flex; align-items: center; gap: 7px; padding: 6px 8px; margin-bottom: 6px; border: 2px dashed #9a4ad8; border-radius: 6px; background: color-mix(in srgb, #9a4ad8 8%, var(--box-bg)); text-decoration: none; }
.quiz-teaser.is-empty { display: block; font-size: 11px; }
.quiz-teaser.is-empty img { vertical-align: -3px; }
a.quiz-teaser:hover b { text-decoration: underline; }
.quiz-promo-body { display: flex; gap: 12px; align-items: center; }
.quiz-promo-body p { margin: 0 0 6px; }
.quiz-questions { margin: 0; padding-left: 24px; }
.quiz-questions > li { padding: 6px 0; }
.quiz-questions > li::marker { color: #9a4ad8; font-weight: bold; }
.quiz-q-text { width: 100%; padding: 5px 6px; font-weight: bold; }
.quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.quiz-opt { display: flex; align-items: center; gap: 4px; }
.quiz-opt input[type="text"], .quiz-opt input:not([type]) { flex: 1; min-width: 0; padding: 3px 5px; }
.quiz-opt input[type="radio"] { accent-color: #2a8a2a; }
.quiz-take fieldset { border: 0; margin: 0; padding: 0; }
.quiz-take legend { padding: 0; margin-bottom: 3px; }
.quiz-pick { display: block; padding: 3px 6px; margin: 2px 0; border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); border-radius: 4px; cursor: pointer; }
.quiz-pick:has(input:checked) { border-color: #9a4ad8; background: color-mix(in srgb, #9a4ad8 12%, var(--box-bg)); font-weight: bold; }
.quiz-score { text-align: center; font: 22px var(--font-head); margin: 4px 0; }
.quiz-score b { font-size: 44px; color: #9a4ad8; }
.quiz-review { margin: 0; padding-left: 24px; }
.quiz-review li { padding: 4px 0; font-size: 11px; }
.quiz-review .is-right { color: #1c7a1c; }
.quiz-review .is-wrong { color: #c0101f; }
.quiz-review b { color: var(--ink); }
.quiz-board li { gap: 8px; }
.quiz-board li.is-me { background: color-mix(in srgb, #9a4ad8 10%, transparent); border-radius: 4px; }
.quiz-bar { flex: 1; min-width: 40px; height: 8px; border: 1px solid color-mix(in srgb, var(--muted) 50%, transparent); background: var(--box-bg); }
.quiz-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff90b4, #9a4ad8); }

/* ---- Rearrange my profile ------------------------------------------------- */
.arrange-cols { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 12px; align-items: start; }
.arrange-fixed { margin: 0 0 6px; padding: 5px 8px; font-size: 11px; color: var(--muted); border: 1px dashed color-mix(in srgb, var(--muted) 50%, transparent); }
.arrange-fixed img { vertical-align: -3px; opacity: 0.6; }
.arrange-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.arrange-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: var(--contact-bg); border: 1px solid color-mix(in srgb, var(--link) 35%, transparent); border-radius: 4px; cursor: grab; user-select: none; }
.arrange-item .check { flex: 1; font-weight: bold; font-size: 11px; cursor: pointer; }
.arrange-item.is-hidden { opacity: 0.55; background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--muted) 12%, transparent) 6px 12px); }
.arrange-item.is-hidden .check { text-decoration: line-through; }
.arrange-item.is-dragging { opacity: 0.4; outline: 2px dashed var(--accent-ink); }
.arrange-grip { color: var(--muted); letter-spacing: -3px; font-size: 12px; }
.arrange-move { display: flex; gap: 2px; }
.arrange-move .btn { padding: 0 5px; min-width: 0; font-size: 9px; line-height: 16px; }
.arrange-form .form-actions { justify-content: center; margin-top: 10px; }

/* ---- Ban appeals -------------------------------------------------------- */
.appeal-reply { padding: 6px 10px; border-left: 3px solid color-mix(in srgb, var(--link) 50%, transparent); font-style: italic; text-align: left; }
.appeal-card { padding: 10px; margin-bottom: 12px; border: 1px solid color-mix(in srgb, var(--link) 35%, transparent); background: var(--contact-bg); }
.appeal-card header small { display: inline-block; margin-left: 4px; }
.appeal-message { margin: 8px 0; padding: 8px 10px; background: var(--box-bg); border-left: 3px solid #ff8a1f; white-space: pre-wrap; overflow-wrap: anywhere; }
.appeal-history { margin: 0 0 8px; }
.status-pill { display: inline-block; padding: 0 6px; border-radius: 7px; font-size: 10px; font-weight: bold; color: #fff; background: #8c8c8c; }
.status-pill.status-banned { background: #c0101f; }
.status-pill.status-suspended { background: #e07000; }

/* ---- Site-wide announcement banner --------------------------------------- */
.site-banner { font-size: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
.site-banner-row { display: flex; align-items: center; gap: 8px; padding-top: 6px; padding-bottom: 6px; }
.site-banner-row span { flex: 1; min-width: 0; }
.site-banner a { font-weight: bold; color: inherit; text-decoration: underline; }
.site-banner-close { flex: none; border: 0; background: rgba(255, 255, 255, 0.4); color: inherit; font: bold 14px/18px var(--font); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; padding: 0; }
.site-banner-close:hover { background: rgba(255, 255, 255, 0.75); }
.banner-info { background: linear-gradient(#e6f0ff, #c8dcfb); color: #0d2f66; }
.banner-warning { background: repeating-linear-gradient(-45deg, #ffcf3f 0 14px, #ffc21a 14px 28px); color: #4a2a00; }
.banner-party { background: linear-gradient(90deg, #ff90b4, #d98cff, #8fd0ff, #ff90b4); background-size: 300% 100%; color: #4a0030; font-weight: bold; animation: banner-party 8s linear infinite; }
@keyframes banner-party { to { background-position: 300% 0; } }
.banner-preview { margin-bottom: 4px; border: 1px solid rgba(0, 0, 0, 0.15); }
.banner-preview .site-banner-row { padding: 5px 8px; }
.bulletins.admin-table tr.is-live td { background: #eaffe0; }

/* ---- Layout of the Week -------------------------------------------------- */
.lotw-box { border-width: 2px; }
.lotw-body { display: flex; gap: 14px; align-items: center; }
.lotw-preview { flex: none; width: 220px; }
.lotw-info p { margin: 0 0 6px; }
.lotw-name { font: bold 16px var(--font-head); display: flex; align-items: center; gap: 6px; }
.lotw-past { margin-top: 8px !important; color: var(--muted); }

/* ---- Settings: login alerts ---------------------------------------------- */
.device-table { margin-bottom: 8px; }
.device-table th { text-align: left; }

/* ---- Webrings ------------------------------------------------------------ */
.webring-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; padding: 5px 8px; margin: 0 0 6px; font-size: 11px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, #9a4ad8 14%, var(--box-bg)) 0 6px, color-mix(in srgb, #ff2fa0 10%, var(--box-bg)) 6px 12px);
  border: 2px ridge color-mix(in srgb, #9a4ad8 55%, var(--box-bg)); }
.webring-bar:last-child { margin-bottom: 0; }
.wr-name { font: bold 12px var(--font-head); color: #9a4ad8; text-align: center; }
.wr-hop { font-weight: bold; white-space: nowrap; }
.webring-bar-big { padding: 10px; font-size: 12px; }
.webring-bar-big .wr-name { font-size: 18px; }
.ring-about { text-align: center; font-style: italic; margin: 8px 0; }
.ring-hero .form-actions { justify-content: center; align-items: center; }
.ring-manage { margin-top: 8px; }
.ring-manage summary { cursor: pointer; font-weight: bold; font-size: 11px; }
.ring-list { list-style: none; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ring-grid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.ring-card { display: grid; gap: 3px; height: 100%; padding: 8px 10px; text-decoration: none; border: 2px ridge color-mix(in srgb, #9a4ad8 45%, var(--box-bg)); background: color-mix(in srgb, #9a4ad8 6%, var(--box-bg)); }
.ring-card:hover { border-color: #ff2fa0; }
.ring-name { font: bold 13px var(--font-head); color: #9a4ad8; }
.ring-desc { font-size: 11px; color: var(--ink); overflow-wrap: anywhere; }
.ring-members li form { margin: 0; text-align: center; }
.ring-members .link-btn { font-size: 10px; }

/* ---- Links in posts + "You're leaving iYabbr" --------------------------- */
.rt-link { overflow-wrap: anywhere; }
.rt-link[target="_blank"]::after { content: " 97"; font-size: 0.85em; }
.out-box { border-width: 2px; }
.out-top { display: flex; gap: 12px; align-items: flex-start; }
.out-top p { margin: 0 0 4px; }
.out-host { font: bold 22px var(--font-head); color: var(--accent-ink); overflow-wrap: anywhere; }
.out-url { font: 11px monospace; color: var(--muted); overflow-wrap: anywhere; }
.out-tips { margin: 10px 0; padding-left: 20px; font-size: 11px; }
.out-tips li { padding: 2px 0; }
.out-actions { justify-content: space-between; }

/* ---- Safety alerts (admin) ------------------------------------------------ */
.safety-card { padding: 10px; margin-bottom: 12px; border: 1px solid color-mix(in srgb, var(--link) 35%, transparent); border-left-width: 5px; background: var(--contact-bg); }
.safety-card.level-2 { border-left-color: #e07000; }
.safety-card.level-3 { border-left-color: #c0101f; }
.safety-card.is-cross-age { background: #fff0f0; }
.safety-card header b { margin: 0 4px; }
.safety-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0; font-size: 11px; }
.age-minor { color: #c0101f; }

/* ---- Accessibility --------------------------------------------------------- */
[hidden] { display: none !important; } /* the hidden attribute always wins over display rules */
.skip-link { position: absolute; left: 8px; top: -40px; z-index: 1000; padding: 6px 12px; background: #fff; color: #1d4f9e; font-weight: bold; border: 2px solid #1d4f9e; border-radius: 4px; }
.skip-link:focus { top: 8px; }
main:focus { outline: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, label:focus-within > input[type="radio"] + * { outline: 2px dashed #ff6a00; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Calm mode (Settings > Preferences) and the system's "reduce motion": nothing blinks, glitters or scrolls. */
body.calm *, body.calm *::before, body.calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body.calm .rt-marquee span { display: inline; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---- Dark mode (site pages; profiles keep their own layout) ------------------ */
body.dark-site { --site-top-1: #26223a; --site-top-2: #17142a; }
body.dark-site .topbar { background: linear-gradient(#2d2946, #1f1b33 50%, #17142a); border-bottom-color: #0c0a18; }
body.dark-site .navbar { background: linear-gradient(#3a3560, #2c2850); border-bottom-color: #1a1733; box-shadow: none; }
body.dark-site:not(.profile-page) {
  --page-bg: #14121f; --page-bg-image: none; --ink: #e8e6f4; --muted: #a09cc0; --link: #9fc3ff; --link-hover: #ffb36b;
  --box-bg: #1f1c30; --box-border: 1px solid #3a3558; --box-head-bg: #2c2848; --box-head-ink: #ffb36b;
  --accent-bg: #3a2c30; --accent-ink: #ffb36b; --label-bg: #2c2848; --label-ink: #c7d8ff; --contact-bg: #262240; --contact-ink: #c7d8ff;
  --btn-1: #34305a; --btn-2: #28244a; --btn-border: #5a5490; --btn-ink: #e8e6f4;
}
body.dark-site:not(.profile-page) input[type="text"], body.dark-site:not(.profile-page) input[type="email"], body.dark-site:not(.profile-page) input[type="password"],
body.dark-site:not(.profile-page) input[type="search"], body.dark-site:not(.profile-page) input[type="time"], body.dark-site:not(.profile-page) input[type="date"],
body.dark-site:not(.profile-page) input[type="datetime-local"], body.dark-site:not(.profile-page) input:not([type]), body.dark-site:not(.profile-page) textarea,
body.dark-site:not(.profile-page) select { background: #15131f; color: #e8e6f4; border-color: #4a4570; }
body.dark-site:not(.profile-page) .stat-grid li, body.dark-site:not(.profile-page) .poll-results li { background: #262240; border-color: #3a3558; }
body.dark-site:not(.profile-page) .bulletins th, body.dark-site:not(.profile-page) .kv th { background: #2c2848; color: #c7d8ff; }
body.dark-site:not(.profile-page) .notice-warn { background: #3a3218; color: #ffe39a; }
body.dark-site:not(.profile-page) .safety-card.is-cross-age { background: #3a1f24; }

/* ---- Warnings from the team -------------------------------------------------- */
.warning-notice { display: flex; align-items: center; gap: 10px; border: 2px solid #e07000; }
.warning-notice span { flex: 1; min-width: 0; }

/* ---- Admin: member page + new pics ------------------------------------------- */
.member-facts th { width: 110px; }
.member-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 10px 0; }
.member-actions > form { padding: 10px; border: 1px solid color-mix(in srgb, var(--link) 25%, transparent); background: var(--contact-bg); }
.member-notes li { padding: 4px 0; border-bottom: 1px dotted color-mix(in srgb, var(--muted) 40%, transparent); }
.inline-form { display: inline; margin-left: 6px; }
.review-grid { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.review-grid li { display: grid; gap: 4px; padding: 6px; border: 1px solid color-mix(in srgb, var(--link) 25%, transparent); background: var(--contact-bg); }
.review-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; }
.review-actions { display: flex; gap: 4px; }
.review-badge { right: auto; left: 4px; background: rgba(224, 112, 0, 0.9); }

/* ---- Circles, polls, reposts, series ------------------------------------------ */
.circle-pill { display: inline-block; padding: 0 6px; margin-left: 4px; font-size: 10px; border-radius: 7px; background: #9a5be0; color: #fff; }
.circle-faces { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.circle-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 10px; max-height: 260px; overflow: auto; padding: 6px; border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); }
.circle-picker img { vertical-align: -5px; }
.circle-box details summary { cursor: pointer; font-weight: bold; font-size: 11px; margin: 4px 0; }
.poll-box { margin: 10px 0; padding: 8px 10px; border: 2px dashed color-mix(in srgb, var(--link) 45%, transparent); border-radius: 6px; }
.poll-q { margin: 0 0 6px; }
.poll-vote { margin-top: 6px; }
.poll-option.is-mine { border-color: #2a8a2a; font-weight: bold; }
.poll-editor summary, .schedule-box summary { cursor: pointer; font-weight: bold; font-size: 11px; }
.poll-editor { display: grid; gap: 3px; }
.poll-editor[open] { padding: 6px 8px; border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); }
.poll-editor input { width: 100%; max-width: 380px; padding: 4px 6px; }
.post-actions { display: grid; gap: 8px; }
.schedule-box .form-row { margin-top: 4px; }
.repost-form { display: flex; align-items: center; gap: 6px; padding-top: 0; }
.series-top { font-size: 11px; color: var(--muted); margin: 0 0 8px; }
.series-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; margin-top: 12px; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--muted) 40%, transparent); font-size: 11px; }
.series-nav > span:last-child { text-align: right; }
.series-nav details summary { cursor: pointer; font-weight: bold; }
.series-nav ol { margin: 4px 0 0; padding-left: 20px; text-align: left; }

/* ---- Testimonials, hit counter, song mixtape -------------------------------- */
.testimonial { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px dotted color-mix(in srgb, var(--muted) 40%, transparent); }
.testimonial:last-child { border-bottom: 0; }
.testimonial-body { margin-top: 3px; padding: 6px 8px; background: color-mix(in srgb, #ff90b4 10%, var(--box-bg)); border-radius: 6px; font-style: italic; }
.testimonial-body p { margin: 0; }
.testimonial-list { list-style: none; margin: 0; }
.testimonial.is-pending { background: color-mix(in srgb, #ffd42a 10%, transparent); }
.counter-box .box-body { display: grid; justify-items: center; gap: 4px; text-align: center; }
.hit-counter { display: inline-flex; gap: 1px; padding: 3px; border-radius: 3px; }
.hit-counter i { font-style: normal; display: inline-block; min-width: 14px; text-align: center; font: bold 16px/22px "Courier New", monospace; }
.counter-odometer { background: #222; border: 2px inset #888; }
.counter-odometer i { background: linear-gradient(#111, #444 50%, #111); color: #fff; }
.counter-lcd { background: #1f2a14; border: 2px inset #556b2f; }
.counter-lcd i { color: #9dff3a; text-shadow: 0 0 4px #9dff3a; background: #182110; }
.counter-neon { background: #120222; border: 2px solid #ff2fa0; box-shadow: 0 0 6px #ff2fa0; }
.counter-neon i { color: #ff8fd0; text-shadow: 0 0 5px #ff2fa0; }
.counter-glitter { background: linear-gradient(135deg, #ffd1e8, #d8c4ff, #c4ecff); border: 2px solid #ff90b4; }
.counter-glitter i { color: #a0005a; background: rgba(255, 255, 255, 0.55); border-radius: 2px; margin: 0 1px; }
.counter-paper { background: #fff; border: 1px solid #999; }
.counter-paper i { color: #111; border-right: 1px solid #ddd; }
.counter-picks { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.counter-pick { display: flex; align-items: center; gap: 6px; font-weight: bold; font-size: 11px; cursor: pointer; }
.counter-pick .hit-counter i { font-size: 12px; line-height: 16px; min-width: 10px; }
.mixtape { margin: 0; padding-left: 26px; }
.mixtape li { padding: 3px 0; }
.mixtape li.is-current b { color: var(--accent-ink); }

/* ---- Home: tour + checklist ------------------------------------------------- */
.tour-box { border-width: 2px; }
.tour-step { display: flex; gap: 12px; align-items: center; }
.tour-step p { margin: 4px 0 6px; }
.tour-step > div { flex: 1; min-width: 0; }
.tour-nav { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.tour-nav .link-btn { margin-left: auto; }
.checklist-bar { position: relative; height: 16px; border: 1px solid color-mix(in srgb, var(--link) 45%, transparent); background: var(--box-bg); border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.checklist-bar span { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(-45deg, #5cc84a 0 6px, #7fdb6c 6px 12px); }
.checklist-bar b { position: relative; display: block; text-align: center; font-size: 10px; line-height: 14px; }
.checklist { list-style: none; margin: 0 0 4px; padding: 0; font-size: 11px; }
.checklist li { padding: 1px 0; }
.checklist li.is-done { color: var(--muted); text-decoration: line-through; }
.checklist-done { font-size: 12px; }

/* ---- Albums: slideshow + reorder --------------------------------------------- */
.album-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.album-tools form { display: flex; gap: 6px; align-items: center; }
.photo-grid li { position: relative; }
.photo-grid.is-reordering li { cursor: grab; outline: 2px dashed color-mix(in srgb, var(--link) 40%, transparent); }
.photo-grid li.is-dragging { opacity: 0.4; }
.reorder-arrows { position: absolute; left: 2px; top: 2px; display: flex; gap: 2px; }
.reorder-arrows button { font-size: 10px; padding: 0 4px; border: 1px solid #333; background: #fff; cursor: pointer; }
.slideshow { position: fixed; inset: 0; z-index: 900; background: rgba(8, 6, 20, 0.92); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; }
.slideshow figure { margin: 0; max-width: min(900px, 80vw); text-align: center; }
.slideshow img { max-width: 100%; max-height: 78vh; border: 4px solid #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }
.slideshow figcaption { color: #fff; margin-top: 6px; font-size: 12px; }
.slideshow button { background: rgba(255, 255, 255, 0.15); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; font-size: 18px; cursor: pointer; padding: 6px 10px; }
.slide-close { position: absolute; top: 12px; right: 12px; }
.slide-play { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 12px !important; }

/* ---- Drafts, capsules, what's new ------------------------------------------- */
.draft-list, .capsule-list, .changelog { list-style: none; margin: 0; padding: 0; }
.draft-list li, .capsule-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dotted color-mix(in srgb, var(--muted) 40%, transparent); }
.draft-list li > div, .capsule-list li > span:first-of-type { flex: 1; min-width: 0; }
.draft-actions { display: flex; gap: 4px; align-items: center; flex: none; }
.draft-kind { display: inline-block; font-size: 9px; font-weight: bold; text-transform: uppercase; padding: 0 5px; border-radius: 6px; background: #9a5be0; color: #fff; }
.capsule-list li.is-new { background: color-mix(in srgb, #ffd42a 12%, transparent); }
.capsule-letter { padding: 14px 16px; margin: 10px 0; background: #fffbea; color: #3a2a10; border: 1px solid #e6d08a; box-shadow: 3px 3px 0 #e6d08a; font-family: "Comic Sans MS", "Trebuchet MS", sans-serif; }
.capsule-meta { display: flex; align-items: center; gap: 8px; }
.changelog li { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px dotted color-mix(in srgb, var(--muted) 40%, transparent); }
.changelog li.is-new { background: color-mix(in srgb, #ffd42a 10%, transparent); }
.changelog-date { font-size: 10px; color: var(--muted); padding-top: 2px; }
.changelog p { margin: 2px 0 0; }

/* ---- Dollz maker ------------------------------------------------------------ */
.dollz-cols { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 12px; align-items: start; }
.dollz-stage img { width: 300px; max-width: 100%; height: auto; border: 3px ridge #ff90b4; background: #fff; }
.dollz-actions { justify-content: center; margin: 8px 0; }
.dollz-group { border: 0; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.dollz-group legend { font-weight: bold; font-size: 11px; margin-bottom: 2px; padding: 0; color: var(--accent-ink); }
.dollz-opt { position: relative; cursor: pointer; }
.dollz-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dollz-opt > span:not(.sr-only) { display: inline-block; padding: 2px 8px; font-size: 11px; border: 1px solid color-mix(in srgb, var(--link) 35%, transparent); border-radius: 10px; background: var(--box-bg); }
.dollz-opt input:checked + span { background: #ff90b4; color: #fff; border-color: #d4006a; font-weight: bold; }
.dollz-opt input:focus-visible + span { outline: 2px dashed #ff6a00; outline-offset: 2px; }
.dollz-opt.is-swatch .swatch { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #888; }
.dollz-opt.is-swatch input:checked + .swatch { box-shadow: 0 0 0 3px #d4006a; background-image: none; }

/* ---- Parent page + error pages ---------------------------------------------- */
.parent-stats li { grid-template-columns: 1fr; text-align: center; }
.error-code { display: flex; align-items: center; justify-content: center; gap: 6px; font: bold 64px/1 var(--font-head); color: #1d4f9e; margin-bottom: 8px; }
.error-search { display: flex; gap: 6px; justify-content: center; margin: 12px 0; }
.error-search input { width: min(280px, 60vw); padding: 5px 8px; }
.error-links { font-size: 11px; }

/* ---- Landing page: calm version ------------------------------------------ */
.hero-note { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 12px; color: #e6f0ff; }
.landing-trio { background: var(--box-bg); padding: 34px 0 26px; border-bottom: 1px solid color-mix(in srgb, var(--link) 20%, transparent); }
.trio { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; text-align: center; }
.trio img { display: block; margin: 0 auto 8px; }
.trio h2 { margin: 0 0 4px; font: bold 16px var(--font-head); color: #1d4f9e; }
.trio p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.trio-safe { max-width: 620px; margin: 26px auto 0; text-align: center; font-size: 11px; color: var(--muted); }
.landing-page .landing-cta { margin-top: 0; }
.landing-page main.page { display: flex; flex-direction: column; padding-bottom: 0; }
.landing-page .landing-trio { flex: 1; display: flex; align-items: center; }
.landing-trio > .wrap { width: 100%; }

/* ==========================================================================
   Emoticon packs (picker + shop preview)
   ========================================================================== */
.emote-packs { flex-basis: 100%; margin-top: 4px; padding: 5px; background: #fff; border: 1px solid #c8d6ee; border-radius: 4px; max-height: 220px; overflow-y: auto; }
.emote-pack { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; padding: 2px 0; border-bottom: 1px dotted #dde6f5; }
.emote-pack:last-of-type { border-bottom: 0; }
.emote-pack small { flex-basis: 100%; font: bold 10px var(--font); color: #1d4f9e; }
.emote-locked { margin: 4px 0 0; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.emote-preview { display: grid; grid-template-columns: repeat(4, 17px); gap: 6px; justify-content: center; }
.emote-preview img { width: 17px; height: 17px; transform: scale(1.4); }
body.dark-site:not(.profile-page) .emote-packs { background: #1f1c30; border-color: #3a3558; }

/* ==========================================================================
   Mood ring calendar
   ========================================================================== */
.moodring-box .box-body { text-align: center; }
.mood-month { display: block; font: bold 12px var(--font); margin-bottom: 4px; }
.mood-grid { border-collapse: separate; border-spacing: 3px; margin: 0 auto; }
.mood-grid th { font: bold 9px var(--font); color: var(--muted); padding: 0; }
.mood-grid td { width: 22px; height: 22px; padding: 0; border-radius: 50%; font: bold 9px/22px var(--font); text-align: center; color: #fff; }
.mood-grid td span { text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.mood-grid .mg-none { background: #eef1f7; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }
.mood-grid .mg-none span { color: #a8b0c4; text-shadow: none; }
.mood-grid .mg-mood { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .75), transparent 45%), var(--mc); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .25), 0 0 4px var(--mc); }
.mood-grid .mg-today { outline: 2px solid #ff6a00; outline-offset: 1px; }
.mood-grid-big td { width: 46px; height: 46px; border-radius: 10px; line-height: 1.1; vertical-align: middle; font-size: 10px; }
.mood-grid-big td span { display: block; }
.mood-grid-big td img { display: block; margin: 2px auto 0; }
.mood-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; font-size: 11px; }
.mood-legend li { display: flex; align-items: center; gap: 3px; }
.mood-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--mc); box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .3); }
.mood-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mood-nav .mood-month { margin: 0; font-size: 14px; }
.mood-nav .is-off { opacity: .35; pointer-events: none; }
.moodring-box .more-link { display: inline-block; margin-top: 6px; font-size: 11px; }
body.dark-site:not(.profile-page) .mood-grid .mg-none { background: #2c2848; }

/* ==========================================================================
   Seasonal themes (Admin > Seasons). Not on profiles (members' own layouts win) and not in dark mode.
   ========================================================================== */
.season-garland { display: none; }
.season-fx { display: none; }
body.season-halloween .season-garland, body.season-christmas .season-garland, body.season-summer .season-garland {
  display: block; height: 28px; margin-bottom: -14px; position: relative; z-index: 40; pointer-events: none;
  background-repeat: repeat-x; background-size: 128px 28px; image-rendering: pixelated;
}
body.season-halloween .season-garland { background-image: url(/img/seasons/garland-halloween.gif); }
body.season-christmas .season-garland { background-image: url(/img/seasons/garland-christmas.gif); }
body.season-summer .season-garland { background-image: url(/img/seasons/garland-summer.gif); }

/* Halloween: night purple + pumpkin orange */
body.season-halloween .topbar { background: linear-gradient(#5a3a8a, #3e2466 48%, #2e1a4e 52%, #25143f); border-bottom-color: #160a28; }
body.season-halloween .navbar { background: linear-gradient(#ff9a3c, #ff7a14 50%, #f06a00 51%, #ff7f1f); border-bottom-color: #b04a00; }
body.season-halloween .nav-item { text-shadow: 0 1px 0 rgba(90, 30, 0, .7); }
body.season-halloween:not(.profile-page):not(.dark-site) { --page-bg: #2a1a3e; --page-bg-image: url(/img/bg/halloween.gif); --box-head-bg: #ffe0c2; --box-head-ink: #8a3a00; --accent-bg: #3e2466; --accent-ink: #ffb347; }

/* Christmas: red + evergreen, snow */
body.season-christmas .topbar { background: linear-gradient(#e04848, #c42828 48%, #a81c1c 52%, #9a1818); border-bottom-color: #5e0c0c; }
body.season-christmas .navbar { background: linear-gradient(#4aa860, #2f8a46 50%, #257a3a 51%, #2e8a44); border-bottom-color: #175a28; }
body.season-christmas .nav-item { text-shadow: 0 1px 0 rgba(10, 50, 20, .7); }
body.season-christmas:not(.profile-page):not(.dark-site) { --page-bg: #1f4a8a; --page-bg-image: url(/img/bg/christmas.gif); --box-head-bg: #e2f2e2; --box-head-ink: #1f6a32; --accent-bg: #c42828; --accent-ink: #fff; }
body.season-christmas .season-fx {
  display: block; position: fixed; inset: 0; z-index: 30; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(3px 3px at 80px 120px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 150px 60px, #fff 50%, transparent 51%), radial-gradient(3px 3px at 210px 170px, rgba(255, 255, 255, .9) 50%, transparent 51%),
    radial-gradient(2px 2px at 260px 90px, #fff 50%, transparent 51%);
  background-size: 300px 220px; opacity: .8; animation: season-snow 14s linear infinite;
}
@keyframes season-snow { from { background-position: 0 0; } to { background-position: 60px 220px; } }
@media (prefers-reduced-motion: reduce) { body.season-christmas .season-fx { display: none; } }
body.calm .season-fx { display: none; }

/* Summer: sky + sunny yellow */
body.season-summer .topbar { background: linear-gradient(#4ec8f0, #22a8e0 48%, #1492cc 52%, #1a8ac0); border-bottom-color: #0a5a86; }
body.season-summer .navbar { background: linear-gradient(#ffe06a, #ffcf2a 50%, #ffc000 51%, #ffd23a); border-bottom-color: #c89400; }
body.season-summer .nav-item { color: #6a3a00; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
body.season-summer:not(.profile-page):not(.dark-site) { --page-bg: #f6e4b0; --page-bg-image: url(/img/bg/summer.gif); --box-head-bg: #d8f2ff; --box-head-ink: #0a6a9a; --accent-bg: #ffe9a8; --accent-ink: #c46200; }

/* Event links + strips */
.season-strips { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.season-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 10px; border-radius: 4px; font-size: 11px; text-decoration: none; color: #fff; border: 1px solid rgba(0, 0, 0, .25); }
.season-strip i { margin-left: auto; font-style: normal; font-weight: bold; text-decoration: underline; }
.season-strip span { opacity: .92; }
.season-strip:hover { color: #fff; filter: brightness(1.08); }
.season-strip-halloween { background: linear-gradient(#5a3a8a, #3e2466); }
.season-strip-christmas { background: linear-gradient(#d83a3a, #a81c1c); }
.season-strip-summer { background: linear-gradient(#34b8ec, #1492cc); }
.menu-panel .season-link { font-weight: bold; }
/* Text that sits right on the dark Halloween/Christmas backgrounds (page titles, crumbs, hints) */
body.season-halloween:not(.profile-page):not(.dark-site) main.page > .wrap > :is(.edit-head, .crumbs, .hint, h1), body.season-halloween:not(.profile-page):not(.dark-site) main.page > .wrap > .edit-head h1,
body.season-christmas:not(.profile-page):not(.dark-site) main.page > .wrap > :is(.edit-head, .crumbs, .hint, h1), body.season-christmas:not(.profile-page):not(.dark-site) main.page > .wrap > .edit-head h1 { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
body.season-halloween:not(.profile-page):not(.dark-site) main.page > .wrap > :is(.edit-head, .crumbs, .hint) a:not(.btn):not(.wallet-pill),
body.season-christmas:not(.profile-page):not(.dark-site) main.page > .wrap > :is(.edit-head, .crumbs, .hint) a:not(.btn):not(.wallet-pill) { color: #ffe28a; }
body.season-halloween:not(.profile-page):not(.dark-site) main.page > .wrap > .edit-head .muted,
body.season-christmas:not(.profile-page):not(.dark-site) main.page > .wrap > .edit-head .muted { color: #e8e8f4; }

/* Event pages */
.season-hero-body { text-align: center; }
.season-hero-body p { max-width: 560px; margin: 6px auto; }
.season-big { image-rendering: pixelated; }
.season-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.candy-bag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; margin-top: 6px; background: #fff3e2; border: 2px dashed #ff8a1f; border-radius: 8px; font-size: 13px; }
.candy-bag img { image-rendering: pixelated; }
.treat-list, .prize-list, .shell-list { list-style: none; margin: 0; padding: 0; }
.treat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.treat-list li { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 6px 4px; border: 1px solid #e3d6f0; border-radius: 4px; background: #fbf7ff; }
.treat-list li a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: bold; text-decoration: none; }
.treat-list li.is-done { opacity: .55; }
.prize-list li { display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dotted #d8dde8; }
.prize-list li img:first-child { max-width: 56px; max-height: 56px; margin: 0 auto; }
.prize-list .price { display: flex; align-items: center; gap: 3px; font-weight: bold; white-space: nowrap; }
.shell-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shell-list li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px; border-radius: 6px; background: #fff8e2; border: 1px solid #f0dca0; font-size: 11px; }
.shell-list li.not-yet img { filter: grayscale(1) brightness(1.3); opacity: .45; }
.dig-form { margin-top: 8px; }
.btn-big { font-size: 14px; padding: 8px 18px; }
.advent-grid { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 640px; }
.advent-door { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; font-size: 10px;
  border-radius: 6px; background: linear-gradient(135deg, #c42828, #8a1414); color: #fff; border: 2px solid #f4d06a; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); }
.advent-door:nth-child(3n) { background: linear-gradient(135deg, #2f8a46, #175a28); }
.advent-door:nth-child(4n) { background: linear-gradient(135deg, #1f4a8a, #122d5a); }
.advent-door .door-num { font: bold 20px var(--font); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.advent-door.is-open { background: #fffaf0; color: #5a3a00; border-style: dashed; }
.advent-door.is-open .door-num { position: absolute; top: 2px; left: 5px; font-size: 11px; text-shadow: none; }
.advent-door.is-open img { max-width: 70%; max-height: 55%; image-rendering: pixelated; }
.advent-door.is-locked, .advent-door.is-missed { opacity: .55; }
.advent-door.is-today { animation: door-glow 1.4s ease-in-out infinite alternate; }
@keyframes door-glow { from { box-shadow: 0 0 2px #ffd84a; } to { box-shadow: 0 0 14px #ffd84a; } }
body.calm .advent-door.is-today { animation: none; box-shadow: 0 0 10px #ffd84a; }
.door-btn { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; justify-content: center; }
.door-btn small { font-weight: bold; }
.door-btn:focus-visible { outline: 2px dashed #fff; outline-offset: -6px; }
.treat-box .box-body { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.treat-box .box-head { background: #3e2466; color: #ffb347; }
.season-admin select { min-width: 150px; }

/* ==========================================================================
   Admin Panel: grouped sidebar + page
   ========================================================================== */
.admin-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; }
.admin-side {
  position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow-y: auto; scrollbar-width: thin;
  background: var(--box-bg, #fff); border: 1px solid #b8cbe8; border-radius: 6px; box-shadow: 0 2px 6px rgba(16, 58, 122, .12);
}
.admin-brand { display: flex; align-items: center; gap: 6px; padding: 9px 10px; color: #fff; border-radius: 5px 5px 0 0;
  background: linear-gradient(#3a6fc4, #1d4f9e); font: bold 13px var(--font-head); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.admin-brand small { margin-left: auto; padding: 1px 6px; border-radius: 8px; background: rgba(255, 255, 255, .22); font: bold 9px var(--font); text-transform: uppercase; letter-spacing: .5px; }
.admin-menu-btn { display: none; }
.admin-groups { padding: 4px 0 6px; }
.admin-group { padding: 2px 0 4px; border-bottom: 1px dotted #d6e1f2; }
.admin-group h2 { margin: 6px 12px 2px; font: bold 9px var(--font); color: #7c8aa6; text-transform: uppercase; letter-spacing: 1px; }
.admin-group a { display: flex; align-items: center; gap: 7px; margin: 0 6px; padding: 5px 7px; border-radius: 4px; color: #1b2a4a; font-size: 12px; text-decoration: none; }
.admin-group a:hover { background: #eef4ff; color: #1d4f9e; }
.admin-group a[aria-current="page"] { background: linear-gradient(#fff3e2, #ffe2c6); color: #b04a00; font-weight: bold; box-shadow: inset 3px 0 0 #ff6a00; }
.admin-count { margin-left: auto; min-width: 18px; padding: 1px 5px; border-radius: 9px; background: #e8323c; color: #fff; font: bold 10px/14px var(--font); font-style: normal; text-align: center; }
.admin-back { display: block; padding: 8px 12px 2px; font-size: 11px; }
.admin-main { min-width: 0; }
.admin-title { display: flex; align-items: center; gap: 7px; margin: 2px 0 10px; }
.admin-title h1 { margin: 0; font: bold 18px var(--font-head); color: #1d4f9e; }
.admin-main > .edit-box:first-of-type, .admin-main > .box { margin-top: 0; }
.admin-hello { margin: -4px 0 10px; font-size: 12px; }
.admin-todo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.admin-todo a { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto auto; column-gap: 10px; align-items: center; height: 100%; box-sizing: border-box;
  padding: 10px; border-radius: 6px; border: 1px solid #dde7f6; background: #f6f9ff; color: inherit; text-decoration: none; }
.admin-todo a:hover { border-color: #7fa6e2; }
.admin-todo img { grid-row: span 2; image-rendering: pixelated; }
.admin-todo b { font: bold 22px var(--font-head); color: #1d4f9e; }
.admin-todo span { font: bold 11px var(--font); }
.admin-todo small { grid-column: 1 / -1; margin-top: 4px; font-size: 10px; color: var(--muted); }
.admin-todo .has-todo a { background: #fff0f0; border-color: #e8a0a0; }
.admin-todo .has-todo b { color: #d0021b; }
.admin-todo .is-clear a { opacity: .75; }
.admin-todo .is-clear b { color: #2a8a2a; }
.admin-dash-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; align-items: start; }
.admin-stats { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin-bottom: 6px; }
.admin-feed { list-style: none; margin: 0 0 6px; padding: 0; font-size: 11px; }
.admin-feed li { padding: 5px 0; border-bottom: 1px dotted #d8dde8; }
.admin-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 12px; }
.admin-now span { display: flex; align-items: center; gap: 5px; }
body.dark-site .admin-side { border-color: #3a3558; }
body.dark-site .admin-group a { color: #e8e6f4; }
body.dark-site .admin-group a:hover { background: #2c2848; color: #fff; }
body.dark-site .admin-todo a { background: #262240; border-color: #3a3558; }
body.dark-site .admin-todo .has-todo a { background: #3a1f24; border-color: #7a3a44; }
body.dark-site .admin-title h1 { color: #c7d8ff; }
body.season-halloween:not(.dark-site) .admin-title h1, body.season-christmas:not(.dark-site) .admin-title h1,
body.season-halloween:not(.dark-site) .admin-hello, body.season-christmas:not(.dark-site) .admin-hello,
body.season-halloween:not(.dark-site) .admin-main > .hint, body.season-christmas:not(.dark-site) .admin-main > .hint { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }

/* ==========================================================================
   Currently... + Countdown (profile boxes)
   ========================================================================== */
.currently-list { list-style: none; margin: 0; padding: 6px 8px; font-size: 11px; }
.currently-list li { display: flex; align-items: baseline; gap: 5px; padding: 3px 0; border-bottom: 1px dotted rgba(0, 0, 0, .12); }
.currently-list li:last-child { border-bottom: 0; }
.currently-list img { align-self: center; flex: none; }
.currently-list span { min-width: 0; overflow-wrap: anywhere; }
.countdown-box .box-body { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.cd-digits { display: inline-flex; gap: 3px; }
.cd-digits i { display: inline-block; width: 22px; padding: 4px 0; font: bold 20px/1 "Courier New", monospace; font-style: normal; color: #7dff7a;
  background: linear-gradient(#1a1a26, #2c2c3c 50%, #1a1a26 51%, #24243a); border: 1px solid #000; border-radius: 3px; text-shadow: 0 0 4px #3dff3a; }
.cd-label { font-size: 12px; }
.cd-today { font: bold 16px var(--font-head); color: #ff2fa0; }

/* ==========================================================================
   Guestbook
   ========================================================================== */
.gb-form { display: flex; flex-direction: column; gap: 6px; }
.gb-form textarea { width: 100%; box-sizing: border-box; }
.gb-stamps { border: 1px dashed #c8d6ee; border-radius: 6px; padding: 4px 8px 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.gb-stamps legend { font-size: 11px; font-weight: bold; padding: 0 4px; }
.gb-stamps label { cursor: pointer; }
.gb-stamps input { position: absolute; opacity: 0; }
.gb-stamps img { display: block; padding: 3px; border: 2px solid transparent; border-radius: 6px; image-rendering: pixelated; }
.gb-stamps input:checked + img { border-color: #ff6a00; background: #fff3e2; }
.gb-stamps input:focus-visible + img { outline: 2px dashed #1d4f9e; }
.gb-list { list-style: none; margin: 0; padding: 0; }
.gb-entry { display: flex; gap: 10px; padding: 10px; margin-bottom: 8px; border-radius: 6px; background: repeating-linear-gradient(#fffdf4, #fffdf4 19px, #e8e2c8 20px); border: 1px solid #e0d6b0; }
.gb-stamp-big { flex: none; transform: rotate(-8deg); image-rendering: pixelated; }
.gb-main { min-width: 0; flex: 1; }
.gb-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; }
.gb-head a { display: inline-flex; align-items: center; gap: 4px; }
.gb-head form { margin-left: auto; }
.gb-body { margin-top: 4px; font-size: 12px; overflow-wrap: anywhere; }
.gb-body p { margin: 0 0 4px; }
.gb-mini { font-size: 11px; padding: 3px 0; border-bottom: 1px dotted rgba(0, 0, 0, .12); overflow-wrap: anywhere; }
.gb-mini p { display: inline; margin: 0; }
.gb-stamp { vertical-align: middle; }
.guestbook-box .more-link { display: inline-block; margin-top: 6px; font-size: 11px; }

/* ==========================================================================
   Ask me
   ========================================================================== */
.ask-form { display: flex; gap: 6px; }
.ask-form input[type="text"] { flex: 1; min-width: 0; }
.ask-item { padding: 8px 0; border-bottom: 1px dotted rgba(0, 0, 0, .15); }
.ask-item:last-child { border-bottom: 0; }
.ask-q { margin: 0 0 4px; font-size: 11px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ask-q i { font-size: 12px; }
.ask-a { position: relative; margin-left: 30px; padding: 6px 9px; background: #eef4ff; border: 1px solid #c8d6ee; border-radius: 8px; font-size: 12px; }
.ask-a p { margin: 0 0 4px; }
.ask-a p:last-child { margin: 0; }
.ask-card { padding: 10px; margin-bottom: 10px; border: 1px solid #dde7f6; border-radius: 6px; background: #f8faff; }
.ask-card.is-pending { border-color: #ffc98a; background: #fff8ee; }
.ask-card .ask-q { align-items: flex-start; }
.ask-answer textarea { width: 100%; box-sizing: border-box; }
.ask-answer .form-actions { display: flex; gap: 10px; align-items: center; }

/* ==========================================================================
   Pen pals
   ========================================================================== */
.penpal-form { display: flex; flex-direction: column; gap: 8px; }
.tag-picks { border: 1px solid #dde7f6; border-radius: 6px; padding: 4px 8px 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.tag-picks legend { font-weight: bold; font-size: 11px; padding: 0 4px; }
.tag-pick input { position: absolute; opacity: 0; }
.tag-pick span { display: inline-block; padding: 3px 9px; border-radius: 12px; border: 1px solid #b8cbe8; background: #fff; font-size: 11px; cursor: pointer; }
.tag-pick input:checked + span { background: #1d4f9e; border-color: #1d4f9e; color: #fff; }
.tag-pick input:focus-visible + span { outline: 2px dashed #ff6a00; }
.penpal-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.penpal-list li { display: flex; gap: 10px; padding: 10px; border: 1px solid #dde7f6; border-radius: 6px; background: #f8faff; }
.penpal-list li > div { min-width: 0; }
.penpal-note { margin: 3px 0; font-size: 11px; font-style: italic; overflow-wrap: anywhere; }
.penpal-tags { margin: 4px 0 6px; display: flex; flex-wrap: wrap; gap: 3px; }
.penpal-tags span { padding: 1px 6px; border-radius: 9px; background: #e6edf8; font-size: 10px; }
.penpal-tags .is-shared { background: #ff8a1f; color: #fff; font-weight: bold; }

/* ==========================================================================
   Saved for later
   ========================================================================== */
.save-btn { display: inline-block; margin: 0 0 0 6px; vertical-align: middle; }
.save-btn .is-saved { --btn-1: #fff6d8; --btn-2: #ffe28a; }
.react-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.saved-list { list-style: none; margin: 0 0 12px; padding: 0; }
.saved-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dotted #d8dde8; }
.saved-list li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.saved-list img { border: 1px solid #c8d6ee; object-fit: cover; }

/* ==========================================================================
   Year in iYabbr
   ========================================================================== */
.recap-hero { --mc: #3f8ee8; text-align: center; padding: 22px 14px 18px; margin-bottom: 12px; border-radius: 8px; color: #fff;
  background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, .35), transparent 60%), linear-gradient(135deg, var(--mc), #1d4f9e);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.recap-hero h1 { margin: 6px 0 2px; font: bold 22px var(--font-head); }
.recap-hero h1 b { font-size: 28px; }
.recap-hero p { margin: 0; font-size: 12px; }
.recap-avatar { border: 3px solid #fff; border-radius: 6px; background: #fff; }
.recap-bigmood { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; }
.recap-bigmood b { font: bold 18px var(--font-head); text-transform: capitalize; }
.recap-bars { list-style: none; margin: 0; padding: 0; }
.recap-bars li { display: grid; grid-template-columns: 110px 1fr 36px; align-items: center; gap: 6px; font-size: 11px; padding: 2px 0; }
.recap-bars li span { display: flex; align-items: center; gap: 4px; }
.recap-bars i { display: block; height: 12px; width: var(--w); background: var(--mc); border-radius: 6px; box-shadow: inset 0 -2px 2px rgba(0, 0, 0, .2); }
.recap-stats { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: 8px; margin: 0; }
.recap-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.recap-fans { margin: 0; padding: 8px 8px 8px 28px; }
.recap-fans li { padding: 3px 0; }
.recap-fans a { display: inline-flex; align-items: center; gap: 5px; }
.recap-badges { list-style: none; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.recap-badges li { display: flex; flex-direction: column; align-items: center; width: 72px; text-align: center; font-size: 10px; }
.crumbs a[aria-current="page"] { font-weight: bold; text-decoration: none; color: var(--ink); }
.recap-strip { background: linear-gradient(90deg, #ff2fa0, #9a4ad8, #3f8ee8); }

/* ==========================================================================
   Safety tip (mail from someone new, under 18)
   ========================================================================== */
.safety-tip { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; padding: 10px 12px; border-radius: 6px; background: #eef8ee; border: 2px solid #5cc84a; font-size: 12px; }
.safety-tip img { flex: none; image-rendering: pixelated; }
.safety-tip ul { margin: 4px 0 6px 18px; padding: 0; }
.safety-tip form { margin-top: 4px; }

/* ==========================================================================
   Text size + keyboard shortcuts
   ========================================================================== */
body.text-large { zoom: 1.12; }
body.text-xl { zoom: 1.25; }
.text-size-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.size-opt { display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; }
.size-opt input { position: absolute; opacity: 0; }
.size-opt span { display: block; min-width: 38px; padding: 4px 8px; text-align: center; border: 2px solid #c8d6ee; border-radius: 6px; background: #fff; font-weight: bold; line-height: 1; }
.size-normal span { font-size: 12px; } .size-large span { font-size: 15px; } .size-xl span { font-size: 19px; }
.size-opt small { font-size: 10px; color: var(--muted); }
.size-opt input:checked + span { border-color: #ff6a00; background: #fff3e2; }
.size-opt input:focus-visible + span { outline: 2px dashed #1d4f9e; }
kbd { display: inline-block; min-width: 14px; padding: 1px 5px; font: bold 10px/1.4 var(--font); text-align: center; border: 1px solid #9fb2d4; border-bottom-width: 2px; border-radius: 3px; background: #fff; color: #1b2a4a; }
.kbd-help { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(12, 20, 40, .55); }
.kbd-help[hidden] { display: none !important; }
.kbd-card { width: 100%; max-width: 360px; margin: 0; }
.kbd-card .box-head { display: flex; align-items: center; }
.kbd-close { margin-left: auto; border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: inherit; }
.kbd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.kbd-table td { padding: 4px 8px; border-bottom: 1px dotted #d8dde8; }
.kbd-table td:first-child { white-space: nowrap; width: 90px; }
.parent-freq { display: block; margin: 4px 0 0 24px; font-size: 12px; }
body.dark-site:not(.profile-page) .ask-a, body.dark-site:not(.profile-page) .ask-card, body.dark-site:not(.profile-page) .penpal-list li,
body.dark-site:not(.profile-page) .tag-pick span, body.dark-site:not(.profile-page) .size-opt span { background: #262240; border-color: #3a3558; color: #e8e6f4; }
body.dark-site:not(.profile-page) .gb-entry { background: #262240; border-color: #3a3558; }
body.dark-site:not(.profile-page) .safety-tip { background: #1f3322; }

/* ==========================================================================
   Wide & compact: pages use the width of the screen, with tighter spacing everywhere
   ========================================================================== */
.wrap { max-width: 1680px; padding: 0 14px; }
.wrap.narrow-wrap { max-width: 1100px; }
body { line-height: 1.45; }
p { margin-bottom: 6px; }
.box { margin-bottom: 8px; }
.box-head { padding: 2px 7px; }
.box-body { padding: 6px 8px; }
.cols { grid-template-columns: 290px minmax(0, 1fr); gap: 8px; }
.cols-landing { grid-template-columns: minmax(0, 1fr) 280px; }
.kv { border-spacing: 2px; }
.kv th, .kv td { padding: 2px 5px; }
.edit-head { margin-bottom: 6px; }
main.page { padding-top: 8px; }
.notice { margin-bottom: 8px; }
/* Profiles on wide screens: the right column puts smaller boxes side by side (two per row). */
@media (min-width: 1200px) {
  .profile-page .cols { grid-template-columns: 320px minmax(0, 1fr); }
  .profile-page .cols > .col-right { flex-direction: row; flex-wrap: wrap; column-gap: 8px; align-content: flex-start; }
  .profile-page .cols > .col-right > * { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .profile-page .cols > .col-right > .extended,
  .profile-page .cols > .col-right > [data-box="status"],
  .profile-page .cols > .col-right > [data-box="blurbs"],
  .profile-page .cols > .col-right > [data-box="friends"],
  .profile-page .cols > .col-right > [data-box="stickers"],
  .profile-page .cols > .col-right > [data-box="comments"] { flex-basis: 100%; }
  .profile-page .top8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* The "More" menu: groups in columns */
.nav-more .menu-panel.more-panel {
  display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 2px 10px; align-items: start;
  width: min(720px, calc(100vw - 24px)); padding: 8px; white-space: normal;
}
.more-group { display: flex; flex-direction: column; min-width: 0; }
.more-group > b { margin: 0 0 3px; padding: 0 6px 3px; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: #7c8aa6; border-bottom: 1px dotted #c8d6ee; }
.more-panel a { padding: 3px 6px; gap: 6px; font-size: 11px; line-height: 1.3; }
.more-panel .new-pill { margin-left: auto; }
.more-group.mobile-only { display: none; }

/* ==========================================================================
   Room avatars (Habbo-style pixel art) + the Wardrobe
   ========================================================================== */
.room-wrap { max-width: 1680px; }
.room-stage .avatar { image-rendering: pixelated; }
.room-small .room-stage .avatar { image-rendering: auto; }
.my-look-body { display: flex; gap: 10px; align-items: center; }
.my-look .look-preview { image-rendering: pixelated; width: 64px; height: 128px; background: linear-gradient(#e8f0fc, #cfdcf2); border: 1px solid #b8cbe8; border-radius: 6px; flex: none; }
.my-look .hint { margin: 0 0 6px; }
.wardrobe { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(10, 16, 36, .6); }
.wardrobe[hidden] { display: none !important; }
.wardrobe-card { width: 100%; max-width: 880px; max-height: calc(100vh - 24px); margin: 0; display: flex; flex-direction: column; }
.wardrobe-card > .box-head { display: flex; align-items: center; font-size: 13px; }
.wd-x { margin-left: auto; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; }
.wardrobe-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; padding: 10px; min-height: 0; flex: 1; overflow: hidden; }
.wd-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wd-floor { width: 100%; display: flex; justify-content: center; padding: 14px 0 6px; border-radius: 8px;
  background: radial-gradient(ellipse at 50% 88%, #9cc07a 0 34%, transparent 35%), linear-gradient(#bfe0ff, #e8f4ff 70%); border: 2px solid #9fb8dc; }
.wd-floor img { width: 128px; height: 256px; image-rendering: pixelated; }
.wd-floor img.is-mirror { transform: scaleX(-1); }
.wd-stage-tools { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.wd-stage-tools [aria-pressed="true"] { --btn-1: #fff3e2; --btn-2: #ffd8a8; }
.wd-main { display: flex; flex-direction: column; min-height: 0; }
.wd-tabs { display: flex; flex-wrap: wrap; gap: 3px; border-bottom: 2px solid #7fa6e2; padding-bottom: 4px; margin-bottom: 6px; }
.wd-tab { border: 1px solid #b8cbe8; background: linear-gradient(#fff, #e6eefa); border-radius: 4px 4px 0 0; padding: 4px 10px; font: bold 11px var(--font); color: #1d4f9e; cursor: pointer; }
.wd-tab[aria-pressed="true"] { background: linear-gradient(#ff9a3c, #ff7a14); border-color: #d05a00; color: #fff; }
.wd-panel { overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; }
.wd-group { margin-bottom: 10px; }
.wd-group h3 { margin: 0 0 4px; font: bold 11px var(--font); color: #5a6a8a; text-transform: uppercase; letter-spacing: .5px; }
.wd-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 5px; }
.wd-style { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px; border: 2px solid #d6e1f2; border-radius: 6px; background: #f6f9ff; cursor: pointer; font: 10px var(--font); color: #1b2a4a; }
.wd-style:hover { border-color: #7fa6e2; }
.wd-style[aria-pressed="true"] { border-color: #ff6a00; background: #fff3e2; }
.wd-thumb { display: block; width: 64px; height: 84px; overflow: hidden; }
.wd-thumb img { display: block; width: 64px; height: 128px; image-rendering: pixelated; margin-top: -32px; }
.wd-style.is-head .wd-thumb { height: 52px; }
.wd-style.is-head .wd-thumb img { width: 64px; height: 128px; margin: -2px 0 0 0; }
.wd-colors { display: flex; flex-wrap: wrap; gap: 4px; }
.wd-color { width: 24px; height: 24px; border-radius: 5px; border: 2px solid rgba(0, 0, 0, .25); cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), inset 0 2px 0 rgba(255, 255, 255, .35); }
.wd-color[aria-pressed="true"] { outline: 3px solid #ff6a00; outline-offset: 1px; }
.wd-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 10px; border-top: 1px solid #d6e1f2; }
.wd-foot .link-btn { margin-right: auto; }

@media (max-width: 760px) {
  .wardrobe { padding: 0; align-items: stretch; }
  .wardrobe-card { max-height: 100vh; border-radius: 0; }
  .wardrobe-body { grid-template-columns: 1fr; overflow-y: auto; }
  .wd-floor img { width: 96px; height: 192px; }
  .wd-panel { overflow: visible; }

  .wrap { padding: 0 8px; }
  .cols { grid-template-columns: 1fr; }
  body.has-tabbar .nav-more .menu-panel.more-panel {
    position: fixed; left: 8px; right: 8px; bottom: calc(64px + env(safe-area-inset-bottom)); top: auto; width: auto;
    grid-template-columns: 1fr 1fr; gap: 6px 8px; max-height: 70vh; overflow-y: auto;
  }
  .more-group.mobile-only { display: flex !important; grid-column: 1 / -1; }
  .more-group.mobile-only { flex-direction: row; flex-wrap: wrap; }
  .more-group.mobile-only > b { flex-basis: 100%; }
  .more-panel a { padding: 6px; font-size: 12px; }

  .recap-cols { grid-template-columns: 1fr; }
  .recap-bars li { grid-template-columns: 90px 1fr 32px; }
  .penpal-list { grid-template-columns: 1fr; }
  .ask-a { margin-left: 0; }
  body.text-large, body.text-xl { zoom: 1.08; }

  .admin-layout { grid-template-columns: 1fr; gap: 10px; }
  .admin-side { position: static; max-height: none; overflow: visible; }
  .admin-brand { display: none; }
  .admin-menu-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; cursor: pointer;
    background: linear-gradient(#3a6fc4, #1d4f9e); color: #fff; font: bold 12px var(--font); text-align: left; }
  .admin-menu-btn b { display: flex; align-items: center; gap: 5px; margin-left: auto; padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
  .admin-menu-btn .admin-count { margin-left: 0; }
  .admin-side.is-open .admin-menu-btn { border-radius: 6px 6px 0 0; }
  .admin-groups { display: none; }
  .admin-side.is-open .admin-groups { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-side.is-open .admin-group { border-right: 1px dotted #d6e1f2; }
  .admin-group a { padding: 8px 7px; }
  .admin-back { grid-column: 1 / -1; padding-bottom: 6px; }
  .admin-title h1 { font-size: 16px; }
  .admin-todo { grid-template-columns: 1fr 1fr; }
  .admin-dash-cols { grid-template-columns: 1fr; }

  .season-cols { grid-template-columns: 1fr; }
  .advent-grid { grid-template-columns: repeat(4, 1fr); }
  .shell-list { grid-template-columns: repeat(2, 1fr); }
  .mood-grid-big td { width: 38px; height: 40px; }
  .season-strip span { display: none; }

  .trio { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hero-note { justify-content: center; text-align: left; }
  .dollz-cols { grid-template-columns: minmax(0, 1fr); }
  .series-nav { grid-template-columns: 1fr 1fr; }
  .series-nav details { grid-column: 1 / -1; grid-row: 2; }
  .changelog li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .draft-list li, .capsule-list li { flex-wrap: wrap; }
  .slideshow { padding: 8px; }
  .slide-prev, .slide-next { position: absolute; bottom: 12px; }
  .slide-prev { left: 12px; } .slide-next { right: 12px; }
  .arrange-cols { grid-template-columns: minmax(0, 1fr); }
  .lotw-body { flex-direction: column; align-items: stretch; }
  .lotw-preview { width: auto; }
  .quiz-opts { grid-template-columns: minmax(0, 1fr); }
  .survey-picker li { flex-direction: column; align-items: flex-start; }
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
  .hbar-list li { grid-template-columns: 100px 1fr 32px; }
  .pet-stage { width: 84px; height: 84px; }
  .landing-hero { padding: 22px 0 30px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; text-align: center; }
  .hero-copy h1 { font-size: 34px; }
  .hero-sub, .hero-early { margin-left: auto; margin-right: auto; }
  .hero-cta, .hero-stats { justify-content: center; }
  .hero-demo { max-width: 320px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
  .landing-cta .wrap { flex-direction: column; text-align: center; }
  .landing-cta .btn-big { margin: 6px auto 0; }
  .kudos-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .chat-messages { height: 55vh; }
  .chat-cols .chat-room, .board-main, .charts-page .col-right { order: -1; }
  .contest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 8px; }
  .gfx-maker { grid-template-columns: minmax(0, 1fr); }
  .room-cols, .catalogue { grid-template-columns: minmax(0, 1fr); }
  .room-frame { padding: 4px 0; border-radius: 4px; }
  .cat-pages { flex-direction: row; flex-wrap: wrap; }
  .cat-page { padding: 5px 8px; font-size: 11px; }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 8px; gap: 8px; }
  .cat-img { min-height: 80px; }
  .cat-img img { transform: scale(.75); transform-origin: 50% 100%; }
  .limited-stage { width: 100%; }
  .nav-room { grid-template-columns: 30px minmax(0, 1fr) 44px; }
  .nav-owner { display: none; }
  .gfx-preview-box { order: -1; }
  .gfx-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 8px; }
  .bday-cover h1 { font-size: 20px; }
  .tag-requests li { align-items: flex-start; }
  .tag-thumb img { width: 72px; height: 72px; }
  .backup-codes ol { columns: 1; }
  .admin-split { grid-template-columns: minmax(0, 1fr); }
  .streak-strip { gap: 3px; }
  .streak-strip li { min-height: 64px; font-size: 9px; }
  .shop-grid, .badge-book { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
  .topics .t-last { display: none; }
  .topics .t-num { width: 44px; }
  .member-list li { flex-wrap: wrap; }
  .member-actions { width: 100%; justify-content: flex-start; padding-left: 58px; }
  /* Phones: a round IM button above the tab bar that opens the full-screen /im page */
  .im-dock { right: 12px; bottom: calc(66px + env(safe-area-inset-bottom)); }
  .im-windows, .im-buddies { display: none !important; }
  .im-tab { width: 50px; height: 50px; padding: 0; justify-content: center; border-radius: 50%; border-bottom: 1px solid #103a7a; box-shadow: 0 3px 12px rgba(16, 58, 122, .45); }
  .im-tab img { width: 22px; height: 22px; }
  .im-tab-label, .im-tab small { display: none; }
  .im-tab .badge { position: absolute; top: -4px; right: -4px; margin: 0; }
  .im-hide-on-phone { display: none; }
  .im-back { display: block; }
  .editor-grid { grid-template-columns: minmax(0, 1fr); }
  .editor-preview { position: static; order: -1; }
  body { font-size: 13px; }
  .cols, .cols-landing { grid-template-columns: minmax(0, 1fr); }
  /* Group page on phones: card, then the forum, then members */
  .group-cols .col-left { display: contents; }
  .group-cols .group-extra { order: 2; }
  /* Event page on phones: name + details first, then the date card */
  .event-cols .col-left, .event-cols .col-right { display: contents; }
  .event-cols .event-about { order: -1; }
  .topbar-row { height: auto; flex-wrap: wrap; gap: 6px 8px; padding-top: 6px; padding-bottom: 7px; }
  .quick, .auth-links { margin-left: auto; }
  .user-name { display: none; }
  .search { order: 3; flex: 1 1 100%; max-width: none; height: 32px; border-radius: 16px; }

  /* Logged in: the nav becomes an app-style bottom tab bar */
  body.has-tabbar { padding-bottom: 56px; }
  body.has-tabbar .navbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    border-top: 1px solid #4f82d0; border-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 -2px 8px rgba(16, 58, 122, .2);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.has-tabbar .navbar-row { height: 56px; padding: 0 4px; gap: 2px; }
  body.has-tabbar .nav-item {
    flex: 1; flex-direction: column; justify-content: center; gap: 3px;
    height: 48px; padding: 0 2px; font-size: 10px;
  }
  body.has-tabbar .nav-more { flex: 1; margin-left: 0; }
  body.has-tabbar .nav-more .caret { display: none; }
  body.has-tabbar .nav-more .menu-panel { top: auto; bottom: calc(100% + 8px); }
  .desktop-only { display: none !important; }
  .mobile-only { display: flex !important; }
  .top8 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
  .top8-name { font-size: 10px; }
  .comment-who { width: 90px; }
  .comment-who a img { width: 64px; height: 64px; }
  .b-date { display: none; }
  .hero-body { flex-direction: column; align-items: center; text-align: center; }
}
@media (max-width: 400px) {
  .pf-card-body { flex-direction: column; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}