/* ============================================================
   MySpace Classic — era.css
   Core 2005-2006 visual language: table density, 1px gray borders,
   tiny underlined Verdana links, white-on-blue nav, IE-era chrome.
   ============================================================ */

* { box-sizing: border-box; }

html { }
body.msBody {
  margin: 0;
  background: #ffffff;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #000;
}

img { vertical-align: middle; }

/* ---------- simulated :visited ---------- */
a { color: #03399d; }
a:hover { color: #cc0000; }
a.vvisited { color: #743ba6; }

strongLink {}
.strongLink { font-weight: bold; }

/* ---------- IE-era browser chrome ---------- */
.ieChrome {
  position: sticky; top: 0; z-index: 900;
  background: #ece9d8;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.ieTitleRow {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg,#2a68d9 0%, #3a80ec 8%, #2560ce 40%, #1941a5 88%, #12327e 100%);
  color: #fff; padding: 3px 8px 4px;
  font: bold 12px Trebuchet MS, Tahoma, sans-serif;
  text-shadow: 1px 1px 0 rgba(0,0,0,.45);
}
.ieIcon {
  width: 16px; height: 16px; display: inline-block; border-radius: 2px;
  background:
    radial-gradient(circle at 35% 35%, #ffe98a 0%, #f7c437 55%, #b98510 100%);
  border: 1px solid #6e501a;
}
.ieTitle { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ieWinBtns i.wb {
  display: inline-block; width: 18px; height: 15px; margin-left: 2px;
  border: 1px solid #fff; border-radius: 3px;
  background: linear-gradient(180deg,#7ea4ef,#3057c9);
  position: relative; opacity: .92;
}
i.wb.min::after { content:""; position:absolute; left:4px; right:4px; bottom:3px; height:2px; background:#fff; }
i.wb.max::after { content:""; position:absolute; inset:3px; border:1px solid #fff; border-bottom-width:3px; }
i.wb.close { background: linear-gradient(180deg,#ef9078,#c33b17); }
i.wb.close::before, i.wb.close::after {
  content:""; position:absolute; left:4px; right:4px; top:6px; height:2px; background:#fff;
}
i.wb.close::before { transform: rotate(45deg); }
i.wb.close::after { transform: rotate(-45deg); }

.ieMenuRow {
  background: #ece9d8; padding: 2px 8px 3px; color: #333;
  font: 11px Tahoma, Verdana, sans-serif;
  border-bottom: 1px solid #d4d0c8;
  display: flex; gap: 4px; align-items: center;
}
.modernDot {
  margin-left: auto; font-size: 10px; color: #205da8 !important;
  text-decoration: none; padding: 1px 8px; border-left: 1px solid #d4d0c8;
}
.modernDot:hover { text-decoration: underline; color: #cc0000 !important; }

.ieAddrRow {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 8px; background: #ece9d8;
  border-top: 1px solid #fafaf7;
}
.ieAddrRow button {
  font: 11px Tahoma; min-width: 24px; padding: 2px 6px;
  border: 1px solid #aca899; border-radius: 3px;
  background: linear-gradient(180deg,#fdfdfb,#e3e0d5);
  cursor: pointer;
}
.ieAddrRow button:active { background: #dcd9cb; }
.addrLabel { color: #444; }
#chromeAddr {
  flex: 1 1 auto; font: 11px "Courier New", monospace; color: #000;
  border: 1px solid #7f9db9; padding: 2px 4px; background: #fff;
}
.ieStatusBar {
  display: flex; justify-content: space-between;
  padding: 2px 8px; font: 10px Tahoma; color: #444;
  background: #ece9d8; border-top: 1px solid #fff;
}
#statusText { min-width: 70%; border: 1px inset #d4d0c8; padding: 1px 6px; background: #f6f5f0; }
#zoneText { border: 1px inset #d4d0c8; padding: 1px 18px 1px 6px; background: #f6f5f0; }

/* ---------- era site top bars ---------- */
.eraTopbar {}
.logoStrip {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg,#577fb9 0%, #40669e 55%, #38578a 100%);
  padding: 6px 12px; border-bottom: 1px solid #263c60;
}
.miniLogo {
  font-family: Georgia, serif; font-weight: bold; font-style: italic;
  font-size: 20px; color: #fff; letter-spacing: -0.5px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
.miniLogo span { font-weight: normal; font-size: 12px; font-style: normal; }
#topSearchForm { flex: 0 1 320px; }
#topSearchBox {
  width: 100%; font: 11px Verdana; padding: 2px 4px;
  border: 1px solid #1d3060;
}
.userLinks { margin-left: auto; color: #dbe6f7; font-size: 11px; }
.userLinks a { color: #fff; text-decoration: underline; font-weight: bold; margin-right: 2px; }
.userLinks a:hover { color: #ffd76a; }
.mailBadge {
  display: inline-block; background: #ffcf3f; color: #342700 !important;
  font-weight: bold; border-radius: 6px; padding: 0 5px; margin-left: 3px;
  text-decoration: none !important; font-size: 10px;
}

.navStrip {
  display: flex; flex-wrap: wrap;
  background: #4871ab;
  border-bottom: 1px solid #233c66;
  padding: 0 6px;
}
.navStrip a {
  color: #fff; text-decoration: none; font-weight: bold;
  font-size: 11px; padding: 4px 9px; display: inline-block;
  border-right: 1px solid #5d82b6;
  text-transform: lowercase;
}
.navStrip a:first-child { border-left: 1px solid #5d82b6; }
.navStrip a:hover { background: #5d84bd; color: #ffefa8; text-decoration: underline; }
.navStrip a.currentNav { background: #395a91; color: #ffe89a; }

/* ---------- generic page scaffold ---------- */
#pageRoot { padding: 10px 8px 60px; min-height: 480px; }

.mspage {
  max-width: 800px; margin: 0 auto;
}
.pageHead { display:flex; align-items: baseline; gap:10px; flex-wrap:wrap; border-bottom: 2px solid #3c5a89; margin-bottom: 10px; }
.pageHead h2 {
  font: bold 20px Trebuchet MS, Verdana, sans-serif; color: #14365f;
  margin: 4px 0 6px; letter-spacing: -0.5px;
}
.phCount, .backLink, .ph-link { font-size: 11px; color: #55606e; margin-left: auto; }
.ph-link a { font-weight: bold; }

.adBox { text-align: center; margin: 10px auto; position: relative; }
.adBox.leader img { width: 100%; max-width: 468px; height: auto; image-rendering: auto; }
.adTag {
  display: block; text-align: center; font: 9px Verdana; color: #98a0aa;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px;
}

/* ---------- era widgets ---------- */
.msButton {
  font: 11px Tahoma, Verdana; color: #123;
  padding: 3px 12px; cursor: pointer;
  border: 1px solid #7c96bd; border-radius: 3px;
  background: linear-gradient(180deg,#ffffff 0%, #eef2fa 45%, #dae4f2 100%);
  text-decoration: none !important; display: inline-block;
}
.msButton:hover { border-color: #36609e; background: linear-gradient(180deg,#ffffff,#e2ebfa 60%, #cadbf3); }
.msButton.primary {
  color: #fff; border-color: #14295a; font-weight: bold;
  background: linear-gradient(180deg,#5f86c3 0%, #3a63a3 45%, #29509a 100%);
}
.msButton.primary:hover { background: linear-gradient(180deg,#6d94d1,#3f6bb0 45%, #315db0); }
.msButton.go { background: linear-gradient(180deg,#79b45a,#4d8731 60%, #3f7427); color: #fff; font-weight: bold; border-color: #2c5618; }
.msButton.danger { border-color: #a33; color: #7d1010; }
.msButton.sm { padding: 2px 8px; font-size: 10px; }
.msButton[disabled] { opacity: .55; cursor: wait; }

.formError { color: #b40000; font-weight: bold; margin-top: 6px; min-height: 14px; }
.postStatus { margin: 6px 0; font-size: 11px; color: #1d5c1d; min-height: 14px; }
.actionBanner {
  border: 1px solid #9bb59b; background: #e8f5e0; color: #1d5c1d;
  padding: 6px 9px; font-size: 11px; margin: 4px 0 10px;
  animation: bannerPop .28s ease-out;
}
@keyframes bannerPop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.monoPanel {
  font: 12px/1.5 "Courier New", Courier, monospace;
  background: #101010; color: #d8ffd8;
  padding: 10px 12px; border: 1px solid #2e2e2e;
  white-space: pre-wrap; word-break: break-word;
}
.highContrast { outline-offset: 2px; }
.highContrast:focus-visible { outline: 3px solid #ffb200; }
.onlineNow {
  color: #12aa12; font-weight: bold; font-style: italic; font-size: 12px;
  animation: onlinePulse 2.4s ease-in-out infinite;
}
@keyframes onlinePulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

.dot { color: #8b97a6; }

/* toast */
.msToast {
  position: fixed; bottom: 74px; right: 14px; z-index: 1200;
  background: #232f42; color: #ffe89a; font: bold 12px Verdana;
  padding: 9px 14px; border-radius: 4px; border: 1px solid #6d84ab;
  opacity: 0; transform: translateY(8px); transition: all .25s ease;
  max-width: 300px; pointer-events: none;
}
.msToast.show { opacity: 1; transform: translateY(0); }

/* dialogs */
.msOverlay {
  position: fixed; inset: 0; background: rgba(30,30,30,.55);
  display: flex; align-items: center; justify-content: center; z-index: 1100;
}
.msDialog {
  width: min(430px, 92vw); background: #ece9d8; border: 1px solid #0831d9;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
}
.dialogBar {
  background: linear-gradient(180deg,#2a68d9,#12327e);
  color: #fff; font: bold 12px Trebuchet MS;
  padding: 4px 8px; display: flex; align-items: center;
}
.xpBar { background: linear-gradient(180deg,#2a68d9,#12327e); }
.dialogClose {
  margin-left: auto; background: linear-gradient(180deg,#ef9078,#c33b17);
  border: 1px solid #fff; color: #fff; font-weight: bold; width: 20px; height: 18px;
  cursor: pointer; border-radius: 2px; line-height: 1;
}
.dialogBody { padding: 12px; font: 11px Verdana; }
.dialogBody input[type=text], .dialogBody textarea {
  width: 100%; margin: 4px 0 10px; border: 1px solid #7f9db9; padding: 4px; font: 11px Verdana;
}
.pickRow { display: block; padding: 3px 2px; }
.forwardBlurb { margin-bottom: 8px; }
.forwardBlurb input { width: 100% !important; font-family: "Courier New", monospace; }

.flashIn { animation: flashIn 1.4s ease; }
@keyframes flashIn {
  0% { background: #fff3bf; } 30% { background: #fff3bf; } 100% { background: transparent; }
}

.tickFlash { animation: tickFlash 1.2s ease; display: inline-block; }
@keyframes tickFlash {
  0% { color: #c00; transform: scale(1.14); } 100% { transform: scale(1); }
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */

.profileScope {
  --profHeadBg: #4a6ea9;
  --profTableBg: #ffffff;
  --profText: #000;
  --profLink: #03399d;
  position: relative;
  max-width: 800px; margin: 0 auto; padding: 4px 2px 50px;
  overflow-x: clip; /* containment: user chaos stays inside profile gutter */
  min-height: 620px;
}
.presetChip {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  background: rgba(0,0,0,.65); color: #fff; font: bold 10px Verdana;
  padding: 2px 7px; border-radius: 8px; pointer-events: none;
}

.profileHeader {
  background: #dbe3f0; border: 1px solid #9aa9c4;
  padding: 7px 10px; margin-bottom: 8px;
}
.displayName { font: bold 19px Trebuchet MS, Verdana; color: #16305e; }
.headline { font-style: italic; color: #33436a; margin: 2px 0; }
.moodLine { font-size: 11px; margin: 3px 0; }
.statusUpdate { color: #27571d; font-style: italic; }
.metaLine, .viewsLine { font-size: 10.5px; color: #4a586e; margin-top: 2px; }
.viewsLine b { color: #22538f; }

.safeModeNotice {
  background: #fffbe0; border: 1px dashed #b8a63c; color: #6a5a10;
  padding: 6px 10px; margin-bottom: 8px; font-size: 11px;
}

table.profileLayout { width: 100%; border-collapse: separate; border-spacing: 6px 0; }
.leftCol { width: 178px; vertical-align: top; }
.rightCol { vertical-align: top; }

.picFrame {
  border: 1px solid #8894ad; padding: 3px; background: #fff; width: 170px; margin-bottom: 4px;
}
.mainPic { width: 170px; display: block; height: auto; }
.viewLinks { font-size: 10px; margin: 2px 0 8px; }

.contactTable { border: 1px solid #8894ad; margin-bottom: 8px; background: #f3f5fa; }
.contactHead {
  background: var(--profHeadBg); color: #fff; font-weight: bold; font-size: 11px;
  padding: 3px 6px; text-align: center;
}
.contactBtn {
  display: block; margin: 4px 8px; padding: 3px 4px; text-align: center;
  border: 1px solid #9aa9c4; background: linear-gradient(180deg,#fff, #e6ebf5);
  color: var(--profLink); font-size: 10.5px; text-decoration: underline; cursor: pointer;
}
.contactBtn:hover { background: #fffbe2; border-color: #6d87b0; }
.sideTables { width: 100%; border-collapse: collapse; }
.sideTables td { font-size: 10px; }

.profTable {
  width: 100%; border-collapse: collapse;
  border: 1px solid #8894ad;
  background: var(--profTableBg);
}
.profTable td, .profTable th { border: 1px solid #98a4bb; padding: 5px 7px; font-size: 11px; color: var(--profText); }
.tableHeadRow th.sectionSubHead {
  background: var(--profHeadBg); color: #fff; text-align: left;
  font: bold 12px Verdana; padding: 4px 8px; letter-spacing: .2px;
}
.blurbsHead { text-transform: none; }
.commentsHead { display: table-cell; }
.commentsHead .countLine { float: right; font-weight: normal; font-size: 10px; }
.countLine a { color: #fff; text-decoration: underline; }

.labelCell { background: #cdd7ea; font-weight: bold; width: 120px; color: #21304c; }
td.labelCell { color: #21304c !important; }
.interestLabel { width: 90px; text-align: center; }
.blurbSection { padding: 6px 10px; }
.blurbLabel { display: block; font-size: 11px; color: #30405e; margin-bottom: 3px; }
.blurbsAbout p, .blurbsMeet p { margin: 6px 0; line-height: 1.5; }

.extNetworkBanner {
  height: 44px; border: 1px solid #6c7c97;
  background: linear-gradient(180deg,#b6c2d4 0%, #778caa 55%, #55647f 100%);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.extNetworkBanner span {
  color: #f2f5fa; font: italic 14px Georgia, serif;
  text-shadow: 1px 1px 1px rgba(0,0,0,.45);
}

.top8gridWrap { padding: 8px 10px !important; }
table.top8grid { width: 100%; border-collapse: separate; border-spacing: 5px 0; table-layout: fixed; }
.top8cell { text-align: center; width: 25%; }
.top8frame {
  border: 1px solid #8894ad; padding: 2px; background: #fff; display: inline-block;
  transition: box-shadow .15s ease, transform .15s ease;
}
.top8-labeled:hover { box-shadow: 0 0 0 2px #ffce54; transform: scale(1.02); }
.top8frame img { width: 100%; max-width: 86px; height: 96px; object-fit: cover; display: block; }
.tinyName { font-size: 9.5px; line-height: 1.3; margin: 2px 0 8px; overflow-wrap: anywhere; }
.dname.tiny { font-size: 9.5px; }

.friendsGrid { width: 100%; border-collapse: separate; border-spacing: 4px 0; table-layout: fixed; }
.friendCell { text-align: center; overflow-wrap: anywhere; }
.friendCell img { width: 88%; max-width: 56px; height: 66px; object-fit: cover; border: 1px solid #97a3bb; display: inline-block; }
.friendCountLine { padding: 5px 8px !important; font-size: 11px; }
.viewAllLine { padding: 5px 8px !important; text-align: right; font-size: 11px; }

.editTop8 { font-weight: normal; font-size: 10px; color: #fff !important; text-decoration: underline !important; }
.dimnote { font-weight: normal; font-size: 9px; opacity: .85; text-transform: lowercase; }

/* comments */
.commentsList { max-height: none; }
.commentEntry {
  border-bottom: 1px dotted #b3bccd; padding: 7px 4px; overflow: hidden;
}
.commentEntry:last-child { border-bottom: none; }
.commentPic { float: left; margin-right: 9px; }
.commentPic img { width: 64px; height: 64px; object-fit: cover; border: 1px solid #97a3bb; display: block; }
.commentWho { font-size: 10px; color: #51607a; }
.commentWhen { color: #8593a8; }
.commentText { margin-top: 2px; line-height: 1.45; font-size: 11px; overflow-wrap: anywhere; }
.commentActions { margin-top: 3px; font-size: 9px; color: #93a0b4; }
.commentActions a { color: #6f81a0; }
.selfComment { background: rgba(255,242,179,.35); }

.addCommentForm { margin: 10px 6px 4px; padding: 8px; background: #eef1f8; border: 1px solid #a9b6cf; }
.formNote { font-size: 10px; color: #45536e; margin-bottom: 5px; }
.addCommentForm textarea {
  width: 100%; font: 11px Verdana; border: 1px solid #7f9db9; padding: 5px;
}
.formButtons { margin-top: 6px; display: flex; gap: 8px; align-items: center; }
.commentPreview .pvTag { font-weight: bold; font-size: 10px; margin-top: 6px; }
.commentPreview .pvBox {
  border: 1px dashed #a9b6cf; background: #fff; padding: 6px; margin-top: 4px;
}

/* glitter text + sparkles */
.glitter {
  font-weight: bold; color: #ff2f92;
  background-image: url("../assets/img/glitter_strip.png");
  background-repeat: repeat-x; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: #ff2f92;
  text-shadow: 0 0 5px #ffc4e6;
  animation: glitterShift 0.9s steps(4) infinite;
}
@keyframes glitterShift { from { background-position: 0 0; } to { background-position: 192px 0; } }
.sparkleline {
  display: inline-block; width: 176px; height: 24px; vertical-align: middle;
  background: url("../assets/img/glitter_strip.png") repeat-x 0 0;
  animation: glitterShift 0.7s steps(4) infinite;
}

/* band page hero + big players */
.bandHero { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.bandLogo { width: 240px; border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0,0,0,.25); }
.bandMeta { flex: 1; font-size: 11px; }
.bigPlayerBox { border: 1px solid #000; background: linear-gradient(180deg,#17171b,#202028); padding: 8px; margin-bottom: 10px; }
.bigPlayerTitle { color: #7dffb0; font: bold 11px "Courier New", monospace; letter-spacing: 1px; margin-bottom: 6px; }
.bigPlayerHint { color: #4a5666; font-weight: normal; letter-spacing: 0; }
.songRow { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; color: #cfd8e4; font-size: 11px; border-bottom: 1px solid #2b2b33; }
.songRow.tr td { background: transparent; color: #222; }
.chartPos { color: #888; width: 22px; font-family: "Courier New", monospace; }
.songPlayBtn {
  width: 26px; height: 22px; font-size: 11px; cursor: pointer;
  border: 1px solid #444; border-radius: 3px;
  background: linear-gradient(180deg,#31313a,#17171d); color: #7dffb0;
  flex: 0 0 auto;
}
.songPlayBtn:hover { background: #23232b; color: #b7ffce; }
.songPlayBtn.playingNow { color: #ffce54; border-color: #ffce54; }
.songPlayBtn.bigPlay { width: auto; padding: 4px 12px; font: bold 11px Verdana; }
.songAlbum { color: #6f7a89; font-size: 10px; }
.songPlays { margin-left: auto; color: #8fa0b5; font-size: 10px; white-space: nowrap; }

.miniMusicBox { margin-bottom: 8px; }
.musicBoxHead { background: var(--profHeadBg); color: #fff; font-weight: bold; padding: 4px 8px; }
.musicBoxRow { padding: 6px 8px; display: flex; gap: 8px; align-items: center; background: #fff; }

@media (max-width: 720px) {
  /* mobile pass lives here too — narrow reflow while keeping the vibe */
  table.profileLayout, table.profileLayout tbody,
  table.profileLayout tr, table.profileLayout td { display: block; width: 100% !important; }
  table.profileLayout { border-spacing: 0; }
  .leftCol { margin-bottom: 8px; }
  .bandHero { flex-direction: column; }
  .profileScope { padding-left: 4px; padding-right: 4px; }
  table.profTable { display: block; }
  table.profTable tbody { display: block; }
  table.profTable tr { display: block; }
  table.profTable td, table.profTable th { display: block; width: auto; }
  table.top8grid { border-spacing: 2px; }
  .top8cell { display: inline-block; width: 48% !important; }
  .friendCell { display: inline-block; width: 31%; }
  .friendsGrid, .friendsGrid tbody, .friendsGrid tr { display: block; }
  .commentsHead .countLine { float: none; display: block; }
  .displayName { font-size: 16px; }
  .songRow { flex-wrap: wrap; }
  .commentPic img { width: 48px; height: 48px; }
}