/* ============================================================
   v6 OS module: the social web (2007–2012)
   forum (2007–08) · myPlace (2009) · the wall (2010–12)
   ============================================================ */
#os-gloss {
  position: absolute; inset: 0; display: none;
  background: var(--g-page, #e3e9f2);
  color: var(--g-ink, #2b3a46);
  font-family: Verdana, Tahoma, var(--sans);
  font-size: 13px;
}
#os-gloss.on { display: block; }
.gl-scroll { position: absolute; inset: 0; overflow-y: auto; }
.gl-phase { display: none; min-height: 100%; }
.gl-phase.on { display: block; animation: gl-in .35s ease; }
@keyframes gl-in { from { opacity: 0; } }

/* modal host */
#gl-modal { position: absolute; inset: 0; z-index: 40; background: rgba(20, 26, 34, .5); display: grid; place-items: center; padding: 16px; }

/* ================= FORUM ================= */
#gl-forum { max-width: 860px; margin: 0 auto; padding: 14px 12px 40px; }
.fo-head {
  background: var(--g-head); color: #fff; border-radius: 6px 6px 0 0;
  padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid #4a739e; border-bottom: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.fo-brand b { font-size: 19px; letter-spacing: .02em; }
.fo-brand span { display: block; font-size: 10px; opacity: .85; }
.fo-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.fo-nav button { color: #fff; font-size: 10.5px; font-weight: 700; padding: 6px 8px; border-radius: 3px; }
.fo-nav button:hover { background: rgba(255, 255, 255, .18); }
.fo-crumbs { background: #cdd9ea; border: 1px solid #a8bcd4; font-size: 10.5px; padding: 7px 12px; color: #39618f; }
.fo-posts { border: 1px solid #a8bcd4; border-top: none; }
.fo-post { display: grid; grid-template-columns: 150px 1fr; background: var(--g-body, #fff); border-bottom: 1px solid #cdd9ea; }
.fo-post.cur { outline: 2px solid var(--g-acc); outline-offset: -2px; }
.fo-post.reply .fo-msg, .fo-post.reply .fo-auth { background: #f2f6fb; }
.fo-auth { padding: 12px; border-right: 1px solid #cdd9ea; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.fo-auth b { font-size: 12px; color: #39618f; }
.fo-auth small { font-size: 9.5px; color: #8a97a8; }
.fo-av {
  width: 52px; height: 52px; display: grid; place-items: center;
  background: repeating-conic-gradient(#39618f 0 25%, #6b96c4 0 50%); border-radius: 3px;
  color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 3px;
}
.fo-av.u { background: repeating-conic-gradient(#8a6b3a 0 25%, #c4a56b 0 50%); }
.fo-msg { padding: 12px 14px; min-width: 0; }
.fo-meta { font-size: 9.5px; color: #8a97a8; border-bottom: 1px dotted #cdd9ea; padding-bottom: 5px; margin-bottom: 8px; }
.fo-text { font-size: 12.5px; line-height: 1.65; min-height: 1.4em; overflow-wrap: break-word; }
.fo-sig { margin-top: 12px; padding-top: 6px; border-top: 1px solid #e4ebf4; font-size: 10.5px; color: #9aa7b8; font-style: italic; }
.fo-reply { background: #f2f6fb; border: 1px solid #a8bcd4; border-top: none; padding: 12px 14px; }
.fo-reply-h { font-weight: 700; font-size: 12px; color: #39618f; margin-bottom: 8px; }
.fo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#os-gloss form label { display: grid; gap: 4px; font-size: 10px; color: #6a7789; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
#os-gloss form input, #os-gloss form textarea {
  border: 1px solid #a8bcd4; background: #fff; color: #223; padding: 8px 9px;
  font: inherit; font-size: 13px; border-radius: 2px; outline: none; width: 100%;
}
#os-gloss form input:focus, #os-gloss form textarea:focus { border-color: var(--g-acc); }
#os-gloss form textarea { min-height: 64px; resize: vertical; }
.fo-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fo-btn {
  background: var(--g-head); color: #fff; font-weight: 700; font-size: 12px;
  padding: 8px 18px; border-radius: 4px; border: 1px solid #4a739e; min-height: 38px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.fo-btn:hover { filter: brightness(1.07); }
.fo-note { font-size: 11px; color: #2f7a2f; font-weight: 700; }
.f-err { color: #c0392b !important; font-size: 10.5px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.fo-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 10px; color: #8a97a8; padding: 10px 4px; }
.fo-counter { font-family: var(--mono); }
@media (max-width: 560px) {
  .fo-post { grid-template-columns: 1fr; }
  .fo-auth { flex-direction: row; align-items: center; gap: 8px; border-right: none; border-bottom: 1px dotted #cdd9ea; padding: 8px 12px; }
  .fo-av { width: 34px; height: 34px; font-size: 12px; margin: 0; }
  .fo-grid { grid-template-columns: 1fr; }
}

/* ================= myPLACE ================= */
#gl-space { max-width: 900px; margin: 0 auto; padding: 12px 12px 40px; }
.sp-head { background: var(--g-head); color: #fff; padding: 10px 14px; border-radius: 4px; display: flex; align-items: baseline; gap: 12px; }
.sp-head b { font-size: 20px; font-style: italic; }
.sp-head span { font-size: 10.5px; opacity: .8; }
.sp-cols { display: grid; grid-template-columns: 240px 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 620px) { .sp-cols { grid-template-columns: 1fr; } }
.sp-card { background: #fff; border: 1px solid #b8c4d4; margin-bottom: 12px; padding: 10px; }
.sp-card-h { background: #ffb84d; color: #7a3a00; font-weight: 700; font-size: 11px; padding: 5px 8px; margin: -10px -10px 8px; text-transform: uppercase; letter-spacing: .04em; }
.sp-name { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.glitter {
  background: linear-gradient(90deg, #c2452e, #d4881c, #3a8a3a, #2a6ac4, #8a2ac4, #c2452e);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: glit 3.5s linear infinite;
}
@keyframes glit { to { background-position: 300% 0; } }
#gl-space image-slot { width: 100%; height: auto; aspect-ratio: var(--slot-ar, 1 / 1); display: block; }
.sp-mood { font-size: 11.5px; margin-top: 8px; }
.sp-login { font-size: 10px; color: #8a97a8; margin-top: 3px; }
.sp-stats { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.sp-stats td { padding: 5px 6px; border-bottom: 1px dotted #dde4ee; }
.sp-stats td:first-child { color: #8a97a8; width: 42%; }
.sp-song { display: flex; gap: 10px; align-items: center; font-size: 11px; }
.sp-song button { width: 34px; height: 34px; flex: none; border: 1px solid #b8c4d4; border-radius: 4px; background: #f2f6fb; font-size: 15px; }
.sp-link { display: block; color: #2a6ac4; font-size: 12px; padding: 4.5px 0; text-decoration: underline; }
.sp-blurb { font-size: 12.5px; line-height: 1.65; }
.sp-bulletin { margin-top: 10px; padding: 9px 10px; background: #fff6d8; border: 1px solid #e0c46b; font-size: 12px; line-height: 1.6; }
.sp-bulletin:empty { display: none; }
.sp-bulletin b { color: #9a6a00; }
.sp-top8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 460px) { .sp-top8 { grid-template-columns: repeat(2, 1fr); } }
.sp-t8 { text-align: center; }
.sp-t8 span {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 4px;
  background: repeating-conic-gradient(#37547a 0 25%, #6b8ab4 0 50%);
  color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 4px;
}
.sp-t8 small { font-size: 9.5px; color: #556; line-height: 1.3; display: block; }
.sp-com { font-size: 12px; padding: 8px 2px; border-bottom: 1px dotted #dde4ee; line-height: 1.5; }
.sp-com b { color: #2a6ac4; display: block; font-size: 11px; }
#sp-form { margin-top: 10px; }

/* ================= the wall ================= */
#gl-book { min-height: 100%; }
.bk-bar {
  position: sticky; top: 0; z-index: 5;
  background: var(--g-head); color: #fff; padding: 8px 14px;
  display: flex; align-items: center; gap: 12px;
}
.bk-bar b { font-size: 19px; letter-spacing: -.02em; }
.bk-search { flex: 1; max-width: 260px; border: none; border-radius: 3px; padding: 6px 9px; font-size: 12px; background: rgba(255, 255, 255, .92); }
.bk-me { margin-left: auto; font-size: 12px; font-weight: 700; }
.bk-cols { display: grid; grid-template-columns: 190px 1fr 190px; gap: 14px; max-width: 940px; margin: 0 auto; padding: 14px 12px 44px; }
@media (max-width: 760px) { .bk-cols { grid-template-columns: 170px 1fr; } .bk-right { display: none; } }
@media (max-width: 540px) { .bk-cols { grid-template-columns: 1fr; } .bk-left { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; } }
#gl-book image-slot { width: 100%; height: 170px; display: block; border: 1px solid #ccd2dc; }
/* wall photo posts: the box follows the photo's natural ratio — no crop */
#gl-book .bk-post image-slot { height: auto; aspect-ratio: var(--slot-ar, 3 / 2); }
@media (max-width: 540px) { .bk-left image-slot { width: 120px; height: 120px; } }
.bk-info { margin-top: 10px; flex: 1; min-width: 140px; }
.bk-inf { font-size: 11.5px; padding: 5px 0; border-bottom: 1px solid #e4e7ec; line-height: 1.45; }
.bk-inf small { display: block; color: #8a919c; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }
.bk-msg-btn {
  width: 100%; margin-top: 10px; background: var(--g-acc); color: #fff; font-weight: 700;
  font-size: 12px; padding: 9px 10px; border-radius: 3px; min-height: 38px;
}
.bk-composer { display: flex; gap: 8px; background: #fff; border: 1px solid #ccd2dc; border-radius: 4px; padding: 10px; }
.bk-composer input { flex: 1; min-width: 0; border: none; outline: none; font: inherit; font-size: 13px; color: #223; }
.bk-btn { background: var(--g-acc); color: #fff; font-weight: 700; font-size: 12px; padding: 7px 14px; border-radius: 3px; min-height: 34px; }
.bk-btn.ghost { background: #e9ebee; color: #4b5568; border: 1px solid #ccd2dc; }
.bk-btn:disabled { opacity: .65; }
.bk-post { background: #fff; border: 1px solid #ccd2dc; border-radius: 4px; margin-top: 12px; padding: 12px; }
.bk-post-h { display: flex; gap: 9px; align-items: center; margin-bottom: 8px; }
.bk-post-h b { font-size: 12.5px; color: var(--g-acc); display: block; }
.bk-post-h small { font-size: 10px; color: #8a919c; }
.bk-av {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 3px;
  background: linear-gradient(160deg, #5a7ab8, #3b5998); color: #fff; font-weight: 700; font-size: 13px;
}
.bk-av.s { width: 24px; height: 24px; font-size: 11px; }
.bk-post-t { font-size: 13px; line-height: 1.6; min-height: 1.3em; }
.bk-post-f { display: flex; gap: 10px; align-items: center; border-top: 1px solid #e4e7ec; margin-top: 10px; padding-top: 8px; }
.bk-like { color: var(--g-acc); font-size: 11.5px; font-weight: 700; padding: 4px 6px; white-space: nowrap; flex: none; }
.bk-like:disabled { color: #8a919c; }
.bk-likes { font-size: 11px; color: #8a919c; }
.bk-comments { margin-top: 6px; }
.bk-com { display: flex; gap: 8px; background: #f2f4f7; border-radius: 3px; padding: 7px 9px; margin-top: 5px; font-size: 12px; line-height: 1.5; }
.bk-com b { color: var(--g-acc); }
.bk-cap { font-size: 11.5px; color: #5b6572; margin-top: 7px; }
.bk-side-card { background: #fff; border: 1px solid #ccd2dc; border-radius: 4px; padding: 11px; margin-bottom: 12px; font-size: 11.5px; line-height: 1.5; }
.bk-side-card b { display: block; font-size: 11.5px; margin-bottom: 8px; color: #333; }

/* message modal + arcade shell */
.bk-modal {
  width: min(400px, 100%); max-height: 100%; background: #fff; border-radius: 6px; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .4);
  display: flex; flex-direction: column;
}
.bk-modal.wide { width: min(620px, 100%); }
.bk-modal-h { flex: none; background: var(--g-head); color: #fff; font-weight: 700; font-size: 13px; padding: 9px 12px; display: flex; justify-content: space-between; align-items: center; }
.bk-modal-h button { color: #fff; font-size: 15px; width: 26px; height: 26px; flex: none; }
.bk-modal-b { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px 14px; }
.bk-modal form { padding: 0; }
.bk-modal.arcade { width: min(340px, 100%); text-align: center; }
#st-cv { display: block; margin: 0 auto; max-width: 100%; border-radius: 4px; touch-action: manipulation; }
.st-hint { font-size: 11px; color: #8a919c; padding: 8px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .glitter { animation: none; color: #c2452e; }
  .gl-phase.on { animation: none; }
}


/* ============================================================
   v7 additions — myPlace nav/IM/pics/blog, lifebook nav/ads/
   chat dock/check-in/comment inputs, era search
   ============================================================ */

/* ---------- myPlace 2009 ---------- */
.sp-topnav {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--g-head); color: #fff; padding: 10px 14px;
}
.sp-topnav > b { font-size: 20px; font-style: italic; letter-spacing: -.5px; }
.sp-topnav .sp-tag { font-size: 11px; opacity: .8; }
.sp-topnav nav { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; }
.sp-topnav nav button { color: #fff; font-size: 11.5px; padding: 6px 8px; border-radius: 3px; }
.sp-topnav nav button:hover { background: rgba(255,255,255,.18); text-decoration: underline; }
.sp-urlbar {
  background: #fff; border-bottom: 1px solid #c6cdd6; padding: 7px 14px;
  font-size: 11.5px; color: #55606e; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.sp-online-dot { color: #2f9e44; font-weight: 700; animation: sp-blink 1.6s steps(1) infinite; }
@keyframes sp-blink { 50% { opacity: .35; } }

.sp-contact .sp-cgrid { display: grid; grid-template-columns: 1fr 1fr; }
.sp-cgrid button {
  display: flex; align-items: center; gap: 6px; padding: 7px 8px;
  font-size: 11px; color: #1c51a8; text-align: left; border-bottom: 1px dotted #d4dae2;
}
.sp-cgrid button:hover { background: #eef3fa; text-decoration: underline; }
.sp-cgrid button i { font-style: normal; }

.sp-eq { display: flex; gap: 2px; align-items: flex-end; height: 22px; margin-top: 8px; opacity: .25; }
.sp-eq.on { opacity: 1; }
.sp-eq i { flex: 1; background: linear-gradient(180deg, #f39c12, #c2452e); height: 30%; }
.sp-eq.on i { animation: sp-eq .7s ease-in-out infinite alternate; }
@keyframes sp-eq { from { height: 15%; } to { height: 95%; } }
.sp-dj {
  display: block; margin-top: 8px; font-size: 11px; font-weight: 700; color: #c2452e;
  text-decoration: none; border: 1px dashed #c2452e; padding: 6px 8px; text-align: center;
}
.sp-dj:hover { background: #c2452e; color: #fff; }

.sp-extended {
  background: #fff7e8; border: 1px solid #e8cf9a; color: #7a5c1e;
  font-size: 12px; font-weight: 700; padding: 9px 12px; text-align: center;
}
.sp-int { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.sp-int td { border: 1px solid #e2e6ec; padding: 6px 8px; vertical-align: top; }
.sp-int td:first-child { background: #f3e2de; color: #8a3324; font-weight: 700; width: 82px; }
.sp-blog { padding: 7px 0; border-bottom: 1px dotted #d4dae2; font-size: 12px; display: grid; gap: 2px; }
.sp-blog b { color: #c2452e; font-size: 11px; }
.sp-com small { color: #98a1ab; font-weight: 400; font-size: 10px; margin-right: 6px; }
.sp-com.you { background: #fdf5ef; }
.sp-pics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.sp-pics figure { display: grid; gap: 5px; min-width: 0; }
.sp-pics image-slot { width: 100%; height: auto; min-width: 0; aspect-ratio: var(--slot-ar, 4 / 3); }
.sp-pics figcaption { font-size: 10.5px; color: #55606e; text-align: center; }

/* ---------- lifebook ---------- */
.bk-bar .bk-search { cursor: text; }
.bk-me { display: flex; align-items: center; gap: 6px; }
.bk-nav { display: grid; margin: 10px 0; }
.bk-nav button {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  font-size: 12.5px; color: #1c2732; text-align: left; border-radius: 3px;
}
.bk-nav button:hover { background: #dfe3ee; }
.bk-nav button i { font-style: normal; width: 18px; text-align: center; }
.bk-nav button em {
  font-style: normal; margin-left: auto; background: #c0392b; color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 8px; padding: 1px 7px;
}
.bk-bday { background: #fffbea; border-color: #ecd98a; }
.bk-ads { display: grid; gap: 8px; }
.bk-ads-h { color: #90949c; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.bk-ad {
  display: grid; gap: 3px; text-align: left; background: #fff; border: 1px solid #dfe3ee;
  border-radius: 3px; padding: 9px 10px;
}
.bk-ad:hover { border-color: #b7c0d8; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.bk-ad b { font-size: 12px; color: #3b5998; }
.bk-ad span { font-size: 11px; color: #4b4f56; }
.bk-ad em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: #5b74a8; border-radius: 3px; padding: 3px 8px; width: max-content; }
.bk-checkin .bk-map {
  display: flex; align-items: center; gap: 10px; background: #eef3e8;
  border: 1px solid #cfdcbe; border-radius: 4px; padding: 12px; position: relative; overflow: hidden;
}
.bk-checkin .bk-map::before {
  content: ""; position: absolute; inset: 0; opacity: .35;
  background:
    linear-gradient(90deg, transparent 48%, #cfdcbe 48% 52%, transparent 52%),
    linear-gradient(0deg, transparent 58%, #cfdcbe 58% 61%, transparent 61%),
    linear-gradient(35deg, transparent 30%, #dee8d2 30% 33%, transparent 33%);
}
.bk-checkin .bk-map > * { position: relative; }
.bk-checkin .bk-map span { font-size: 24px; }
.bk-checkin .bk-map b { font-size: 13px; display: block; }
.bk-checkin .bk-map small { color: #6a7a58; font-size: 11px; }
.bk-checkin .bk-map i { margin-left: auto; font-size: 26px; font-style: normal; }
.bk-cin { display: flex; gap: 6px; align-items: center; padding: 6px 10px; }
.bk-cin input {
  flex: 1; min-width: 0; background: #fff; border: 1px solid #ccd0d5; border-radius: 3px;
  font: 12px/1.4 inherit; padding: 6px 8px; outline: none;
}
.bk-cin input:focus { border-color: #3b5998; }
.bk-com.you { background: #f3f6e8; }
.bk-events { display: grid; gap: 10px; }
.bk-event { display: flex; gap: 10px; align-items: center; border: 1px solid #dfe3ee; border-radius: 4px; padding: 10px; }
.bk-ev-cal {
  width: 44px; height: 44px; border-radius: 4px; background: #c0392b; color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none;
}
.bk-ev-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bk-ev-t b { font-size: 13px; }
.bk-ev-t small { color: #667283; font-size: 11px; }
.bk-friends { display: grid; gap: 6px; }
.bk-friend { display: flex; gap: 10px; align-items: center; padding: 7px 6px; border-bottom: 1px dotted #dfe3ee; }
.bk-friend b { font-size: 12.5px; display: block; }
.bk-friend small { color: #667283; font-size: 11px; }

/* ---------- chat dock + IM (shared) ---------- */
#gl-dock { position: absolute; right: 12px; bottom: 8px; z-index: 8200; display: flex; gap: 10px; align-items: flex-end; }
#os-gloss[data-phase="forum"] #gl-dock .gl-chatbar,
#os-gloss[data-phase="space"] #gl-dock .gl-chatbar { display: none; }
.gl-chatbar { position: relative; }
.gl-chat-h {
  background: var(--g-acc); color: #fff; font-size: 12px; font-weight: 700;
  border-radius: 5px 5px 0 0; padding: 8px 14px; box-shadow: 0 -1px 6px rgba(0,0,0,.18);
}
.gl-chat-list {
  position: absolute; bottom: 100%; right: 0; width: 190px;
  background: #fff; border: 1px solid #b7c0d8; border-radius: 5px 5px 0 0; overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.22); display: grid;
}
.gl-chat-list button { display: flex; gap: 8px; align-items: center; padding: 9px 12px; font-size: 12px; text-align: left; color: #1c2732; }
.gl-chat-list button:hover { background: #eef3fa; }
.gl-chat-list i { width: 8px; height: 8px; border-radius: 50%; background: #2f9e44; }
.gl-chat-list i.idle { background: #e8a44c; }
.gl-im {
  width: min(250px, 68vw); background: #fff; border: 1px solid #9aa7c4; border-radius: 5px 5px 0 0;
  box-shadow: 0 4px 18px rgba(0,0,0,.25); display: grid; grid-template-rows: auto 1fr auto;
  height: 240px;
}
.gl-im-h {
  background: var(--g-head); color: #fff; padding: 7px 10px; font-size: 12px;
  display: flex; justify-content: space-between; align-items: center; border-radius: 4px 4px 0 0;
}
.gl-im-x { color: #fff; font-weight: 700; padding: 0 4px; }
.gl-im-log { overflow: auto; padding: 8px 10px; display: grid; gap: 5px; align-content: flex-start; font-size: 12px; }
.gl-msg b { color: #c2452e; }
.gl-msg.me b { color: #1c51a8; }
.gl-im-in {
  border: none; border-top: 1px solid #d4dae2; padding: 8px 10px; font: 12px inherit; outline: none;
}

/* ---------- era search ---------- */
.gl-q {
  width: 100%; border: 1px solid #b7c0d8; border-radius: 4px; padding: 10px 12px;
  font: 13px inherit; outline: none; margin-bottom: 10px;
  background: #fff; color: #223;
}
.gl-q::placeholder { color: #98a1ab; }
.gl-q:focus { border-color: var(--g-acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--g-acc) 25%, transparent); }
.gl-q-res { display: grid; gap: 4px; max-height: 250px; overflow: auto; }
.gl-q-hit {
  display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: center;
  text-align: left; padding: 8px 10px; border: 1px solid #e4e8f0; border-radius: 4px;
}
.gl-q-hit:hover { background: #eef3fa; border-color: #b7c0d8; }
.gl-q-hit b { color: var(--g-acc); }
.gl-q-hit span { font-size: 12px; color: #4b4f56; }
.gl-q-none { color: #90949c; font-size: 12px; padding: 8px; }

/* modal sizing safety lives in .bk-modal above (flex column, scrolling .bk-modal-b) */

/* ============================================================
   v7.1 — every nav is a real destination: forum pages, myPlace
   browse/film/mail/groups, blocked state, ad payloads, RudaevVille
   ============================================================ */
.sp-pulse { animation: sp-pulse 1.2s ease; }
@keyframes sp-pulse { 25% { box-shadow: 0 0 0 3px #ffb84d; } }

/* forum: FAQ · memberlist · profile */
.fo-faq { display: grid; gap: 10px; }
.fo-faq-i b { display: block; color: #39618f; font-size: 12.5px; margin-bottom: 2px; }
.fo-faq-i span { font-size: 12px; line-height: 1.55; }
.fo-mem { display: grid; gap: 2px; }
.fo-mem-i { display: flex; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px dotted #cdd9ea; }
.fo-mem-i .fo-av { width: 34px; height: 34px; font-size: 12px; margin: 0; flex: none; }
.fo-mem-i b { font-size: 12.5px; color: #39618f; display: block; }
.fo-mem-i small { display: block; font-size: 10px; color: #8a97a8; }
.fo-mem-i em { display: block; font-size: 10.5px; color: #9aa7b8; }
.fo-prof { display: grid; gap: 10px; justify-items: start; }

/* myPlace: browse · film · mail · stars · groups · blocked */
.sp-browse { display: grid; gap: 4px; }
.sp-brow { display: flex; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px dotted #dde4ee; }
.sp-brow .fo-av { width: 34px; height: 34px; font-size: 12px; margin: 0; flex: none; }
.sp-brow b { display: block; font-size: 12.5px; }
.sp-brow small { color: #8a97a8; font-size: 10.5px; }
.sp-brow em { margin-left: auto; font-style: normal; color: #2f9e44; font-size: 10px; font-weight: 700; flex: none; }
.sp-browse-note { font-size: 11px; color: #8a97a8; padding-top: 8px; text-align: center; }
.sp-film-scr { aspect-ratio: 4/3; background: #111; display: grid; place-items: center; border-radius: 3px; overflow: hidden; }
.sp-film-scr button { width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .92); font-size: 20px; color: #222; }
.sp-film-scr.noise { background: repeating-linear-gradient(0deg, #222 0 2px, #555 2px 3px, #333 3px 5px); animation: film-noise .12s steps(2) infinite; }
@keyframes film-noise { to { background-position: 0 6px; } }
.sp-film-cap { font-size: 11.5px; color: #55606e; margin: 8px 0 2px; }
.sp-film-note { font-size: 11px; color: #c2452e; min-height: 1.2em; font-family: var(--mono); margin-bottom: 4px; }
.sp-mail { display: grid; gap: 6px; }
.sp-mail-i { display: grid; text-align: left; gap: 2px; border: 1px solid #dde4ee; border-radius: 4px; padding: 8px 10px; }
.sp-mail-i:hover { background: #eef3fa; }
.sp-mail-i b { font-size: 12px; color: #1c51a8; }
.sp-mail-i span { font-size: 11.5px; }
.sp-mail-b { border: 1px dashed #cdd9ea; border-radius: 4px; padding: 10px; }
.sp-mail-b pre { font: 12px/1.6 inherit; white-space: pre-wrap; margin-bottom: 8px; }
.sp-fb { font-size: 12.5px; line-height: 1.6; margin-bottom: 10px; }
.sp-stars { display: flex; gap: 4px; justify-content: center; padding: 6px 0 10px; }
.sp-stars button { font-size: 26px; color: #d4881c; width: 40px; height: 40px; }
.sp-fwd { display: grid; gap: 6px; justify-items: start; }
.sp-groups { display: grid; gap: 8px; }
.sp-group { display: flex; gap: 10px; align-items: center; justify-content: space-between; border: 1px solid #dde4ee; border-radius: 4px; padding: 8px 10px; }
.sp-group b { font-size: 12px; display: block; }
.sp-group small { color: #8a97a8; font-size: 10.5px; }
#gl-space.sp-blocked .sp-cols, #gl-space.sp-blocked .sp-urlbar { filter: grayscale(1) opacity(.45); pointer-events: none; }

/* lifebook: request card + ad payloads */
.bk-req-sub { display: block; color: #8a919c; font-size: 10.5px; margin: -4px 0 8px; }
.bk-ad-body { font: 12.5px/1.7 inherit; white-space: pre-wrap; margin-bottom: 10px; }
.bk-stick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.bk-stick button { font-size: 26px; aspect-ratio: 1; border: 1px dashed #ccd2dc; border-radius: 8px; background: #f7f8fa; filter: grayscale(1) opacity(.6); }
.bk-stick button.got { filter: none; border-style: solid; border-color: #8fbf6a; background: #f3f8ee; }

/* RudaevVille */
.fv-hud { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.fv-chip { background: #f0f2e8; border: 1px solid #cfdcbe; border-radius: 999px; padding: 4px 10px; font-size: 11.5px; color: #4a5a38; white-space: nowrap; }
.fv-chip b { color: #2f5a1f; }
.fv-xp { flex: 1; min-width: 70px; height: 8px; border-radius: 6px; background: #e4e7dc; overflow: hidden; border: 1px solid #cfdcbe; }
.fv-xp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8fbf6a, #5a9a3f); transition: width .3s; }
.fv-gifts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: #fffbea; border: 1px solid #ecd98a; border-radius: 6px; padding: 8px; margin-bottom: 10px; }
.fv-gifts > small { color: #9a6a00; font-weight: 700; font-size: 10.5px; flex-basis: 100%; }
.fv-gifts button { display: inline-flex; gap: 6px; align-items: center; border: 1px solid #ecd98a; background: #fff; border-radius: 6px; padding: 6px 9px; font-size: 11.5px; }
.fv-gifts button small { color: #8a919c; font-weight: 400; }
.fv-gifts button i { font-style: normal; }
.fv-gifts button:hover { border-color: #d4881c; }
.fv-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.fv-tool { display: grid; justify-items: center; gap: 1px; border: 1px solid #ccd2dc; background: #fff; border-radius: 8px; padding: 6px 10px; min-width: 72px; }
.fv-tool i { font-style: normal; font-size: 18px; }
.fv-tool b { font-size: 10.5px; }
.fv-tool small { font-size: 9px; color: #8a919c; }
.fv-tool.on { border-color: #5a9a3f; background: #f3f8ee; box-shadow: 0 0 0 1px #5a9a3f; }
.fv-tool.lock { opacity: .55; }
.fv-grid { display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); gap: 6px; margin-bottom: 10px; }
.fv-plot { aspect-ratio: 1; border: 1.5px dashed #b8a06a; background: #e8d8ae; border-radius: 6px; display: grid; place-items: center; position: relative; font-size: 22px; padding: 0; }
.fv-plot:hover { background: #efe2bd; border-color: #8a6b3a; }
.fv-plot.grow { background: #e2ecc4; border-style: solid; border-color: #a4bd7a; }
.fv-plot.ready { background: #d2eab8; border-style: solid; border-color: #5a9a3f; animation: fv-ready 1.4s ease-in-out infinite; }
@keyframes fv-ready { 50% { box-shadow: 0 0 0 4px rgba(90, 154, 63, .25); } }
.fv-plot.dead { background: #e4e2da; border-color: #b5b2a9; filter: saturate(.4); }
.fv-plot i { font-style: normal; }
.fv-plot em { position: absolute; bottom: 3px; right: 5px; font-style: normal; font-size: 9px; font-family: var(--mono); color: #6a5a2a; }
.fv-expand { border: 1.5px dashed #b8a06a; border-radius: 6px; background: #f4ecd6; padding: 12px; font-size: 12px; color: #6a5a2a; }
.fv-expand:hover { background: #efe2bd; }
.fv-neigh { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; margin-bottom: 8px; }
.fv-neigh > small { flex-basis: 100%; color: #8a919c; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.fv-neigh button { display: grid; gap: 1px; text-align: left; border: 1px solid #ccd2dc; background: #fff; border-radius: 6px; padding: 6px 10px; }
.fv-neigh button b { font-size: 11.5px; color: #3b5998; }
.fv-neigh button small { color: #8a919c; font-size: 10px; }
.fv-neigh button:disabled { opacity: .55; }
.fv-status { font: 11.5px/1.5 var(--mono); color: #4a5a38; background: #f3f8ee; border: 1px solid #cfdcbe; border-radius: 6px; padding: 8px 10px; min-height: 2.4em; }

@media (prefers-reduced-motion: reduce) {
  .fv-plot.ready, .sp-film-scr.noise, .sp-pulse { animation: none; }
}

@media (max-width: 640px) {
  #gl-dock { right: 6px; }
  .sp-topnav nav { margin-left: 0; }
}

/* v7.2: top bar stays sane at any width */
.bk-bar { min-width: 0; }
.bk-bar b { flex: none; }
.bk-bar .bk-search { min-width: 40px; }
@media (max-width: 420px) { .bk-me { display: none; } }