/* ============================================================
   pages.css — landing, dashboard, world pages, player, dialogs
   ============================================================ */

/* ---------- home / login ---------- */
.homeLanding { }
.homeHero { text-align: center; padding: 14px 0 4px; }
.logoWordmark {
  font: italic bold 44px Georgia, "Times New Roman", serif;
  color: #14365f; letter-spacing: -2px;
  text-shadow: 2px 2px 0 #c6d3e8;
}
.logoWordmark span { font-size: 22px; font-style: normal; letter-spacing: -1px; color: #4677ad; }
.tagline { color: #5c6f8f; font-style: italic; font-size: 13px; margin-top: 2px; }
.homeHero.small .logoWordmark { font-size: 32px; }

.landingCols { display: flex; gap: 16px; margin-top: 12px; align-items: stretch; }
.loginBox, .pitchBox {
  border: 1px solid #9aa9c4; background: #f1f4fb; padding: 14px 16px; flex: 1;
}
.pitchBox { background: #fff; flex: 1.25; }
.loginBox h3, .pitchBox h3 {
  margin: 0 0 10px; color: #16305e;
  font: bold 15px Trebuchet MS;
  border-bottom: 2px solid #b9c6dd; padding-bottom: 4px;
}
.loginBox label { display: block; margin: 7px 0 2px; font-weight: bold; color: #37476b; }
.loginBox input[type=text], .loginBox input[type=password] {
  width: 95%; font: 12px Verdana; border: 1px solid #7f9db9; padding: 4px;
}
.rememberRow { display: flex; align-items: center; gap: 5px; margin: 8px 0; color: #444; }
.linksRow { margin-top: 12px; font-size: 11px; }
.pitchBox ul { margin: 0 0 12px 18px; padding: 0; line-height: 1.9; }
.tinyLegal { font-size: 9px; color: #93a0b4; margin-top: 12px; }

.underBoard {
  display: flex; gap: 14px; margin-top: 18px; padding-top: 10px;
  border-top: 1px solid #d4dae4; flex-wrap: wrap;
}
.ub-col { flex: 1; min-width: 160px; background: #f6f8fc; border: 1px solid #dde3ee; padding: 8px 10px; }
.ub-col h4 { margin: 0 0 4px; font-size: 11px; color: #16305e; }
.ub-col p { margin: 0; font-size: 10px; color: #55606e; }

/* ---------- dashboard ---------- */
.dashTopbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(180deg,#eef2fa,#dbe4f3);
  border: 1px solid #9aa9c4; padding: 7px 10px;
}
.dashHello { font-size: 13px; }
.dim { color: #66738a; }
.unreadAlert { color: #cc0000 !important; font-weight: bold; animation: onlinePulse 2s infinite; }
.dashCounts { margin-left: auto; font-size: 11px; }
.sep { color: #9aa9c4; margin: 0 5px; }

.dashCols { display: grid; grid-template-columns: 168px 1fr 172px; gap: 10px; margin-top: 10px; }
.panelHead {
  background: var(--panelHeadBg, #4677ad); color: #fff; font-weight: bold; font-size: 11px;
  padding: 4px 8px; display: flex; justify-content: space-between;
}
.row2 { margin-top: 10px; }
.row3 { margin-top: 10px; }

.sideBox { border: 1px solid #9aa9c4; background: #f3f6fc; padding: 8px; text-align: center; }
.myFaceBox img { width: 130px; height: auto; border: 1px solid #8894ad; }
.mfName { font-weight: bold; color: #16305e; margin: 5px 0 2px; overflow-wrap: anywhere; }
.viewCt { font-size: 10px; color: #55606e; margin: 4px 0 7px; }
.sideBox .msButton { display: block; margin: 5px 0; width: 100%; text-align: center; }

.tomBox {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
  border: 1px solid #9aa9c4; padding: 8px; margin-top: 10px; background: #fffeec;
}
.tomBox img { border: 1px solid #8894ad; }
.tomNote { font-size: 10px; font-style: italic; color: #55502a; margin: 0; width: 100%; }

.notifPanel, .bulletinBox, .feedBox { border-left: 1px solid #b9c6dd; border-right: 1px solid #b9c6dd; border-bottom: 1px solid #b9c6dd; background: #fff; padding: 4px 8px; }
.notifLine { padding: 4px 2px; border-bottom: 1px dotted #ccd4e2; font-size: 11px; }
.notifLine:last-child { border-bottom: none; }
.nfDot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: transparent; margin-right: 5px; }
.notifLine.unread .nfDot { background: #e23b2e; }
.notifLine.unread a { font-weight: bold; }

.qpost { padding: 8px; background: #fdfbee; border-bottom: 2px dotted #cfd0a9; }
.qpost input, .qpost textarea { width: 98%; font: 11px Verdana; border: 1px solid #7f9db9; margin: 3px 0; padding: 4px; }
.bulletinLine { display: flex; align-items: baseline; gap: 6px; padding: 4px 2px; border-bottom: 1px dotted #dde3ee; font-size: 11px; }
.bulletinLine img { align-self: center; }
.bl-subject { flex: 1; overflow-wrap: anywhere; }
.bl-author { color: #8593a8; white-space: nowrap; }
.bl-when { color: #a3adc0; font-size: 10px; white-space: nowrap; margin-left: auto; }
.bulletinLine.big { padding: 6px 2px; }
.bulletinBox.board .bl-when { margin-left: auto; }

.feedRow { display: flex; gap: 7px; align-items: center; padding: 5px 2px; border-bottom: 1px dotted #dde3ee; font-size: 11px; }
.feedText { flex: 1; }
.feedWhen { color: #a3adc0; font-size: 10px; }

.quickLinksBox { text-align: left; }
.qlTitle { font-weight: bold; color: #16305e; border-bottom: 1px solid #ccd4e2; margin-bottom: 5px; padding-bottom: 3px; }
.quickLinksBox a { display: block; padding: 2.5px 0; font-size: 11px; }
.sideBoxBirthdays { border: 1px solid #b9a9c4; background: #faf3fc; padding: 8px; margin-top: 10px; font-size: 10px; }
.bdList { margin-top: 4px; color: #57435f; }
.statBox {
  border: 1px dashed #b6a24c; background: #fffbe6; padding: 8px; margin-top: 10px;
  font-size: 10px; text-align: center; color: #6a5a10;
}

/* ---------- browse/search ---------- */
.browseFilter { margin: 6px 0 10px; font-size: 11px; }
.filterChip { margin-right: 7px; padding: 2px 8px; border: 1px solid #b9c6dd; background: #f3f6fc; }
.filterChip.on { background: #4677ad; color: #fff; font-weight: bold; text-decoration: none; }
.personGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.personCard {
  border: 1px solid #b9c6dd; background: #fff; padding: 6px; text-align: center; font-size: 10px;
}
.personCard img { width: 100%; max-width: 90px; aspect-ratio: 1; object-fit: cover; }
.pcName { margin: 4px 0 2px; font-weight: normal; overflow-wrap: anywhere; }
.pcAge { color: #55606e; }
.pcCity { color: #8593a8; }
.pcNote { margin-top: 4px; color: #a3805a; font-size: 9px; }
.pagerRow { margin: 14px 0; text-align: center; font-size: 12px; }
.pageNum { color: #8792a5; margin: 0 8px; }

.searchBarBig { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.searchBarBig input { flex: 1; min-width: 220px; font: 13px Verdana; border: 1px solid #7f9db9; padding: 5px; }
.searchFilters { align-self: center; }
.searchEmpty { border: 1px dashed #b9c6dd; padding: 12px; color: #45536e; background: #f6f8fc; }
.searchSect { margin-bottom: 14px; }
.sectTitle { font-weight: bold; color: #16305e; border-bottom: 1px solid #b9c6dd; margin-bottom: 4px; padding-bottom: 2px; }
.searchRow { display: flex; gap: 8px; align-items: center; padding: 5px 2px; border-bottom: 1px dotted #dde3ee; font-size: 11px; }
.searchRow img { border: 1px solid #97a3bb; }
.noResults { padding: 18px; border: 1px solid #e3c1c1; background: #fdf4f4; color: #7d3030; }

/* ---------- bulletins reader ---------- */
.bulletinReader .readerHead {
  background: #4677ad; color: #fff; font-weight: bold; padding: 6px 10px; font-size: 13px;
}
.readerMeta { background: #eef2fa; padding: 5px 10px; border-bottom: 1px solid #ccd4e2; font-size: 10.5px; }
.readerBody { border: 1px solid #ccd4e2; border-top: none; padding: 12px 14px; background: #fff; line-height: 1.6; }
.readerActions { margin: 10px 0; }
.repliesNote { margin: 12px 0 8px; font-size: 10.5px; }
.bulletinReader textarea { width: 99%; border: 1px solid #7f9db9; font: 11px Verdana; }

/* ---------- blogs ---------- */
.blogEntryPreview { border-bottom: 1px dotted #b3bccd; padding: 10px 4px; }
.blogEntryPreview h3 { margin: 0 0 3px; font-size: 14px; color: #16305e; }
.beMeta { font-size: 10px; color: #8593a8; }
.beMeta.full { padding: 6px 10px; background: #f3f6fc; border: 1px solid #dde3ee; }
.beSnip { font-size: 11px; color: #45536e; margin-top: 4px; }
.blogBody { padding: 12px; border: 1px solid #dde3ee; border-top: none; background: #fff; line-height: 1.65; }
.moodChip { font-style: italic; font-weight: bold; color: #743ba6; }
.commentHeading { border-bottom: 2px solid #3c5a89; padding-bottom: 3px; font-size: 13px; }
.blogPostPage textarea { width: 99%; border: 1px solid #7f9db9; font: 11px Verdana; }
.noCommentsYet { padding: 10px; }

/* ---------- music/videos ---------- */
.musicCols, .videoShowcaseWrap {}
.musicMain { }
.featuredArtist { display: flex; gap: 14px; padding: 12px; border: 1px solid #ccd4e2; background: #fff; margin-bottom: 14px; }
.featuredArtist h4 { margin: 0 0 6px; font-size: 17px; }
.chartTable td { vertical-align: middle; }
.playCounterCell { text-align: right; white-space: nowrap; color: #55606e; font-size: 10px; }
.genreCloud { line-height: 2.1; }
.genreCloud a { margin-right: 6px; }
.smallNote { font-size: 10px; }
.musicSide h3, .musicMain h3, .videoListing h3 { border-bottom: 1px solid #ccd4e2; padding-bottom: 3px; font-size: 13px; color: #16305e; }

.flashSkinPlayer { border: 2px solid #333; background: #101014; box-shadow: 3px 3px 0 rgba(0,0,0,.28); }
.playerTopBar { color: #9fe8bd; font: bold 11px "Courier New", monospace; padding: 4px 8px; letter-spacing: .5px; border-bottom: 1px solid #26262e; }
.videoStage { position: relative; display: flex; justify-content: center; min-height: 240px; align-items: center; background: #000; }
.videoStage video { display: none; background: #000; }
.videoBuffer { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: #7dffb0; font: 12px "Courier New", monospace; z-index: 2; }
.spinner {
  width: 26px; height: 26px; border: 3px solid #274; border-top-color: #7dffb0;
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.playerControls { display: flex; gap: 10px; align-items: center; padding: 6px 8px; color: #8fa0b5; font-size: 10.5px; flex-wrap: wrap; }
.playerControls span:first-of-type { color: #cfd8e4; }
.videoThumbList { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.videoThumb { width: 190px; border: 1px solid #ccd4e2; background: #fff; }
.vtFrame { height: 70px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg,#20242c,#20242c 8px,#181b21 8px,#181b21 16px); color: #7dffb0; font-size: 9px; font-family: "Courier New", monospace; }
.vtMeta { padding: 6px 8px; font-size: 10px; color: #45536e; }

/* ---------- mail/favorites/etc ---------- */
.mailList .mailRow { border: 1px solid #ccd4e2; background: #fff; padding: 6px 10px; margin-bottom: 6px; }
.mailRow.sent { border-left: 4px solid #4677ad; }
.mailRow.unread { background: #fffbe2; border-left: 4px solid #d92c2c; }
.mailRow .mr-from { margin-right: 8px; }
.mailRow .mr-subj { font-weight: bold; }
.mailRow .mr-when { float: right; color: #93a0b4; font-size: 10px; }
.mailRow .mr-body { margin-top: 5px; border-top: 1px dotted #dde3ee; padding-top: 5px; white-space: pre-wrap; }
.notifPanelPage { border-left: 1px solid #b9c6dd; border-right: 1px solid #b9c6dd; border-bottom: 1px solid #b9c6dd; padding: 4px 8px; background: #fff; }
.emptyMail { white-space: pre-wrap; }
.emptyFavorites, .noCommentsYet { padding: 14px; border: 1px dashed #b9c6dd; color: #45536e; }

.signupBox { border: 1px solid #9aa9c4; background: #f1f4fb; padding: 14px 16px; flex: 1; }
.signupBox label { display: block; margin: 7px 0 2px; font-weight: bold; color: #37476b; }
.signupBox input, .signupBox select { width: 95%; font: 12px Verdana; border: 1px solid #7f9db9; padding: 4px; }
.inviteCols { display: flex; gap: 16px; align-items: stretch; }
.tosRow { font-weight: normal !important; }

.listCol > div { border-bottom: 1px dotted #ccd4e2; padding: 7px 4px; font-size: 11.5px; }
.simpleBody { padding: 8px 2px; line-height: 1.7; }
.errorPage h2 { color: #7d3030; }

.friendsAllPage table.pageWide { margin-bottom: 10px; }
.endNote { margin: 8px 0 16px; font-size: 10px; }

/* ============================================================
   floating portable player dock
   ============================================================ */
.msplayer {
  position: fixed; left: 12px; bottom: 10px; z-index: 1000;
  width: 332px;
  background: linear-gradient(180deg,#22222a,#121218);
  border: 1px solid #000; box-shadow: 2px 3px 0 rgba(0,0,0,.4), 0 0 0 1px #34343e inset;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.msplayer.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.msp-head { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-bottom: 1px solid #000; background: linear-gradient(180deg,#2c2c36,#17171d); }
.msp-led { width: 7px; height: 7px; background: #59d97b; border-radius: 50%; box-shadow: 0 0 5px #59d97b; animation: onlinePulse 1.6s infinite; }
.msp-title { flex: 1; overflow: hidden; white-space: nowrap; }
.msp-titleText { color: #7dffb0; font: bold 10px "Courier New", monospace; letter-spacing: .5px; }
.msp-btn {
  background: linear-gradient(180deg,#31313a,#17171d);
  border: 1px solid #444; border-radius: 2px; color: #cfd8e4;
  cursor: pointer; font-size: 10px; min-width: 22px; height: 20px;
}
.msp-btn:hover { color: #7dffb0; border-color: #7dffb0; }
.msp-stop:hover { color: #ff8f7d; border-color: #ff8f7d; }
.msp-body { display: flex; align-items: center; gap: 5px; padding: 6px; }
.msp-progress { flex: 1; height: 9px; background: #060609; border: 1px solid #34343e; cursor: pointer; position: relative; }
.msp-progressFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(180deg,#59d97b,#2a8a4b); }
.msp-time { color: #7dffb0; font: 10px "Courier New", monospace; min-width: 30px; text-align: right; }
.msp-vol { width: 56px; accent-color: #59d97b; }
.msp-eq { image-rendering: pixelated; }

/* keep site content clear of the dock */
body.playerOpen #pageRoot { padding-bottom: 110px; }

@media (max-width: 720px) {
  .landingCols, .dashCols, .inviteCols { display: block; }
  .personGrid { grid-template-columns: repeat(3, 1fr); }
  .dashCounts { margin-left: 0; }
  .featuredArtist { flex-direction: column; }
  .msplayer { width: calc(100vw - 20px); left: 10px; bottom: 8px; }
  .msp-vol { display: none; }
  .userLinks a { padding: 3px 2px; display: inline-block; }
  .navStrip a { padding: 5px 7px; font-size: 10px; }
  .ieAddrRow .addrLabel { display: none; }
  .logoWordmark { font-size: 30px; }
  .commentPic { float: left; }
}