/* RETROS HUB - dash/profile pages. CRT palette, MySpace-style profile layout. */

.hub-wrap { max-width: 1080px; margin: 24px auto 48px; padding: 0 20px; min-height: 60vh; }

/* ---- panels ---- */
.panel { background: var(--panel, #14141F); border: 1px solid rgba(38,230,255,.18); border-radius: 10px; padding: 18px 20px; margin-bottom: 20px; }
.panel-wide { grid-column: 1 / -1; }
.panel-title { font-size: 10px; color: var(--cyan, #26E6FF); letter-spacing: .14em; margin: 0 0 12px; }
.panel-title:not(:first-child) { margin-top: 22px; }

/* ---- dashboard grid ---- */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 760px) { .dash-grid { grid-template-columns: 1fr; } }

/* ---- profile form ---- */
.profile-form { display: grid; gap: 10px; }
.profile-form label { font-size: 10px; letter-spacing: .12em; color: var(--bone, #F5F3EE); opacity: .85; display: grid; gap: 4px; }
.profile-form input, .profile-form select, .profile-form textarea { background: var(--asphalt, #0B0B12); color: var(--bone, #F5F3EE); border: 1px solid rgba(38,230,255,.25); border-radius: 6px; padding: 8px 10px; font: 500 14px/1.3 "Space Grotesk", sans-serif; }
.profile-form input:focus, .profile-form select:focus, .profile-form textarea:focus { outline: 1px solid var(--cyan, #26E6FF); }
.form-msg { font-size: 10px; color: var(--magenta, #FF2E88); }
.dash-addr { font-size: 11px; opacity: .7; margin: 8px 0 0; word-break: break-all; }

/* ---- badges ---- */
.badge { display: inline-block; font-size: 10px; letter-spacing: .12em; padding: 4px 10px; border-radius: 4px; margin-top: 10px; }
.badge-locked { background: rgba(255,46,136,.15); color: var(--magenta, #FF2E88); border: 1px solid rgba(255,46,136,.4); }
.badge-open { background: rgba(38,230,255,.12); color: var(--cyan, #26E6FF); border: 1px solid rgba(38,230,255,.4); }

/* ---- lists ---- */
.req-list, .friend-list, .member-list, .feed-list { display: grid; gap: 8px; }
.req { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.handle-link { color: var(--cyan, #26E6FF); text-decoration: none; }
.handle-link:hover { text-decoration: underline; }
.friend-pill { display: inline-block; background: rgba(38,230,255,.08); border: 1px solid rgba(38,230,255,.2); color: var(--bone, #F5F3EE); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.friend-pill:hover { border-color: var(--cyan, #26E6FF); }
.member-list, .feed-list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.feed-list { grid-template-columns: 1fr; }
.dim { color: var(--bone, #F5F3EE); opacity: .45; font-size: 13px; }

/* ---- feed ---- */
.feed-item { border: 1px solid rgba(38,230,255,.15); border-radius: 8px; padding: 12px 14px; background: rgba(11,11,18,.6); }
.feed-item header { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; font-size: 12px; flex-wrap: wrap; }
.feed-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.feed-comments, .wall-comments { display: grid; gap: 6px; margin-top: 10px; border-top: 1px dashed rgba(38,230,255,.15); padding-top: 10px; }
.feed-comment, .wall-comment { font-size: 13px; }
.wall-comments { display: none; }
.wall-comments.open { display: grid; }

/* ---- profile page ---- */
.profile-hero { display: flex; gap: 18px; align-items: center; background: var(--panel, #14141F); border: 1px solid rgba(255,46,136,.25); border-radius: 10px; padding: 22px 24px; margin-bottom: 20px; flex-wrap: wrap; }
.profile-avatar { font-size: 64px; line-height: 1; filter: drop-shadow(0 0 12px rgba(255,210,63,.35)); }
.profile-id { flex: 1; min-width: 220px; }
.profile-name { font-family: Anton, sans-serif; font-size: 30px; letter-spacing: .03em; margin: 0 0 4px; color: var(--bone, #F5F3EE); }
.profile-handle { font-size: 13px; opacity: .65; margin: 0 0 8px; }
.profile-bio { font-size: 14px; margin: 0; white-space: pre-wrap; }
.profile-song { font-size: 10px; color: var(--gold, #FFD23F); letter-spacing: .12em; }
.profile-cols { max-width: 720px; }

/* ---- top 8 ---- */
.tf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 6px; }
@media (max-width: 600px) { .tf-grid { grid-template-columns: repeat(2, 1fr); } }
.tf { display: grid; gap: 4px; justify-items: center; text-align: center; text-decoration: none; background: rgba(11,11,18,.55); border: 1px solid rgba(38,230,255,.15); border-radius: 8px; padding: 10px 6px; }
.tf:hover { border-color: var(--magenta, #FF2E88); }
.tf-avatar { font-size: 28px; }
.tf-name { font-size: 12px; color: var(--bone, #F5F3EE); overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }

/* ---- wall + comment forms ---- */
.wall-form { display: grid; gap: 8px; margin-bottom: 16px; }
.comment-form { margin-top: 8px; }
.wall-form textarea { background: var(--asphalt, #0B0B12); color: var(--bone, #F5F3EE); border: 1px solid rgba(38,230,255,.25); border-radius: 6px; padding: 8px 10px; font: 500 14px/1.3 "Space Grotesk", sans-serif; resize: vertical; }
.wall-form textarea:focus { outline: 1px solid var(--cyan, #26E6FF); }
.wall-item { border: 1px solid rgba(38,230,255,.12); border-radius: 8px; padding: 10px 12px; background: rgba(11,11,18,.6); margin-bottom: 10px; }
.wall-item header { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; gap: 8px; flex-wrap: wrap; }
.wall-body { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- themes (MySpace-style body skins) ---- */
body[data-theme="vhs"] { --panel:#161520; }
body[data-theme="arcade"] { --panel:#101426; }
body[data-theme="boombox"] { --panel:#1a1414; }
body[data-theme="goth"] { --panel:#12101a; }
body[data-theme="skater"] { --panel:#141a14; }
body[data-theme="synthwave"] { --panel:#180f26; }
body[data-theme="goth"] .profile-name { text-shadow: 0 0 14px rgba(255,46,136,.5); }
body[data-theme="synthwave"] .profile-name { text-shadow: 0 0 14px rgba(255,46,136,.5); }
/* ---- DMs / inbox ---- */
.inbox-list { display: grid; gap: 8px; }
.dm-thread { text-decoration: none; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 12px; border: 1px solid rgba(38,230,255,.15); border-radius: 8px; background: rgba(11,11,18,.6); }
.dm-thread:hover { border-color: var(--cyan, #26E6FF); }
.dm-thread-name { font-weight: 700; font-size: 13px; }
.dm-thread-preview { color: rgba(245,243,238,.6); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-scroll { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; padding: 10px; border: 1px dashed rgba(38,230,255,.2); border-radius: 8px; margin: 8px 0; }
.dm { display: flex; }
.dm-me { justify-content: flex-end; }
.dm-body { max-width: 75%; padding: 8px 12px; border-radius: 12px; font-size: 13px; }
.dm-me .dm-body { background: rgba(255,45,149,.15); border: 1px solid rgba(255,45,149,.3); }
.dm-them .dm-body { background: rgba(38,230,255,.1); border: 1px solid rgba(38,230,255,.25); }
.dm-form { display: flex; gap: 8px; }
.dm-form input { flex: 1; background: rgba(11,11,18,.8); border: 1px solid rgba(38,230,255,.25); border-radius: 6px; color: var(--bone, #F5F3EE); padding: 10px 12px; font-family: inherit; font-size: 13px; }

/* ---- v10: themes ---- */
body[data-theme="arcade"] { --cyan: #39FF14; }
body[data-theme="goth"] { --cyan: #B24BF3; }
body[data-theme="synthwave"] { --cyan: #FF2D95; --bone: #FFD1F3; }
body[data-theme="skater"] { --cyan: #FFB300; }
body[data-theme="boombox"] { --cyan: #FF5E3A; }

/* ---- v10: photo ---- */
.photo-slot img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 2px solid var(--cyan, #26E6FF); }
.photo-slot [hidden], .panel [hidden] { display:none !important; }
.photo-slot .profile-avatar { display:inline-block; }
.profile-avatar.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
#photo-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
#photo-form input[type=file] { color: rgba(245,243,238,.7); font-size: 12px; max-width: 100%; }

/* ---- v10: notifications ---- */
.note-list { display: grid; gap: 6px; }
.note { text-decoration: none; color: rgba(245,243,238,.75); font-size: 13px; padding: 8px 10px; border-radius: 6px; display: flex; justify-content: space-between; gap: 8px; border: 1px solid transparent; }
.note.unread { color: var(--bone, #F5F3EE); background: rgba(255,45,149,.08); border-color: rgba(255,45,149,.25); }
#nav-bell { text-decoration: none; }
#nav-bell.has-unread { color: var(--magenta, #FF2D95); }

/* ---- v10: online ---- */
.online-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.online-pill { border-color: rgba(57,255,94,.3); }

/* ---- v10: giveaways ---- */
.giveaway-list { display: grid; gap: 10px; }
.giveaway { display: flex; gap: 12px; align-items: flex-start; border: 1px solid rgba(38,230,255,.15); border-radius: 8px; padding: 10px 12px; background: rgba(11,11,18,.6); }
.giveaway-img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.giveaway p { margin: 4px 0 0; font-size: 13px; color: rgba(245,243,238,.75); }
.trophy { font-size: 13px; padding: 4px 0; }

/* ---- v10: top8 drag (legacy, kept for profile grid) ---- */
.tf.dragging { opacity: .4; border: 1px dashed var(--cyan, #26E6FF); }

/* ---- top8 rank editor ---- */
.t8-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.t8-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: rgba(11,11,18,.55); border: 1px solid rgba(38,230,255,.15); border-radius: 6px; }
.t8-row.t8-rest { opacity: .65; }
.t8-rank { font-size: 11px; color: var(--cyan, #26E6FF); min-width: 16px; text-align: right; flex-shrink: 0; }
.t8-name { flex: 1; font-size: 12px; color: var(--bone, #F5F3EE); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t8-up, .t8-dn, .t8-rm { background: none; border: none; color: var(--magenta, #FF2E88); cursor: pointer; font-size: 12px; padding: 0 3px; line-height: 1; }
.t8-up:disabled, .t8-dn:disabled { color: rgba(255,46,136,.25); cursor: default; }
.t8-add { background: none; border: 1px solid rgba(38,230,255,.4); color: var(--cyan, #26E6FF); cursor: pointer; font-size: 11px; padding: 1px 6px; border-radius: 4px; flex-shrink: 0; }
.t8-sep { font-size: 11px; margin: 4px 0 2px; }

/* ---- v10: song button ---- */
#song-btn { cursor: pointer; }
#song-btn:hover { color: var(--cyan, #26E6FF); }

/* ---- v10: mobile ---- */
@media (max-width: 720px) {
  .dash-grid { grid-template-columns: 1fr !important; }
  .profile-hero { flex-direction: column; text-align: center; gap: 10px; }
  .profile-cols { grid-template-columns: 1fr; }
  .tf-grid { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; }
  .tf { min-width: 80px; }
  .dm-form { position: sticky; bottom: 0; background: rgba(11,11,18,.95); padding: 8px 0; }
  .nav-links { flex-wrap: wrap; font-size: 12px; }
}

/* Classic profile rules are consolidated below. */

/* ==== party line (v13) ==== */
.pl-tag { margin:4px 0 10px; font-size:12px; }
.pl-scroll { height:56vh; overflow-y:auto; background:rgba(0,0,0,.35); border:1px solid var(--magenta, #ff2e88); padding:10px; display:flex; flex-direction:column; gap:8px; }
.pl-shout { display:flex; gap:10px; background:rgba(255,255,255,.05); padding:8px; border-left:3px solid var(--cyan, #39FF14); }
.pl-av, .pl-av-img { width:34px; height:34px; flex:0 0 34px; font-size:20px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.4); }
.pl-av-img { object-fit:cover; }
.pl-txt { min-width:0; flex:1; }
.pl-txt .handle-link { font-weight:bold; }
.pl-when { font-size:10px; margin-left:8px; }
.pl-body { margin:2px 0 0; word-wrap:break-word; line-height:1.35; font-size:14px; white-space:pre-wrap; }
.pl-form { display:flex; gap:8px; margin-top:10px; }
.pl-form input { flex:1; }

/* ==== party line: emoticons + pics (v13b) ==== */
.pl-emobtns { display:flex; flex-wrap:wrap; gap:4px; margin:8px 0 6px; }
.pl-emo { background:rgba(255,255,255,.06); color:var(--yellow, #ffe600); border:1px solid rgba(255,255,255,.2); font-family:'Space Grotesk',monospace; font-size:13px; padding:3px 7px; cursor:pointer; }
.pl-emo:hover { background:rgba(255,255,255,.15); }
.pl-attach { display:inline-flex; align-items:center; cursor:pointer; margin:0; }
.pl-img { max-width:100%; max-height:280px; margin-top:6px; border:1px solid rgba(255,255,255,.25); display:block; }
.pl-filemsg { font-size:11px; margin:4px 0 0; min-height:14px; }


/* ---- mobile hamburger nav ---- */
#hub-burger { display: none; background: none; border: 1px solid rgba(38,230,255,.35); color: var(--cyan); font-size: 18px; line-height: 1; padding: 4px 10px; cursor: pointer; }
@media (max-width: 760px) {
  #hub-burger { display: block; }
  header.nav { position: relative; }
  .nav-links {
    display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg, #0b0b12); border-bottom: 1px solid rgba(38,230,255,.3); padding: 10px 16px; z-index: 50;
  }
  .nav-links.open { display: flex; }
  .nav-who-alert { color: #ffd24a; text-shadow: 0 0 6px #ffd24a88; font-weight: bold; }
.nav-who { margin-left: 10px; font-size: 12px; color: #6e6e6e; }
.nav-who-guest { color: #b8860b; text-decoration: underline; }
.nav-links a { padding: 10px 0; font-size: 14px; }
}


/* ---- mobile: profile page goes full MySpace ---- */
@media (max-width: 760px) {
  body[data-page="profile"] { background:#d5e8fb !important; }
  body[data-page="profile"] .scanlines { display:none !important; }
  body[data-page="profile"] header.nav { background:#0a3d62; border-bottom:1px solid #99c4e8; }
  body[data-page="profile"] header.nav .logo-word { color:#fff; }
  body[data-page="profile"] #hub-burger { color:#fff; border-color:#99c4e8; }
  body[data-page="profile"] .nav-links { background:#0a3d62; border-bottom-color:#99c4e8; }
  body[data-page="profile"] .nav-links a { color:#e8f3fd; }
  body[data-page="profile"] .nav-links a:hover, body[data-page="profile"] .nav-links a[aria-current="page"] { color:#fff; text-decoration:underline; }
  body[data-page="profile"] .hub-wrap { padding:0 6px; margin:10px auto 20px; }
  body[data-page="profile"] .mysp { padding:6px; border-radius:0; }
  body[data-page="profile"] .mysp-name { font-size:22px; }
  body[data-page="profile"] .mysp-photo { width:120px; height:120px; }
  body[data-page="profile"] .mysp-fgrid { display:flex; flex-wrap:wrap; gap:6px; }
  body[data-page="profile"] .footer { background:#0a3d62; }
  body[data-page="profile"] .footer * { color:#e8f3fd !important; }
}

/* friend grid real photos */
.mysp-friend-img img { width:100%; height:100%; object-fit:cover; display:block; }
.mysp-friend-img { overflow:hidden; }

/* ---- classic MySpace profile additions ---- */
.mysp-navbar { background:#0a3d62; border-bottom:1px solid #99c4e8; padding:4px 8px; font-size:12px; text-align:center; }
.mysp-navbar-in a { color:#e8f3fd; text-decoration:none; padding:0 2px; }
.mysp-navbar-in a:hover { color:#fff; text-decoration:underline; }
.mysp-stat { font-size:11px; color:#003377; margin:3px 0; text-align:center; }
.mysp-on { color:#cc0000; font-weight:bold; }
.mysp-quote { font-size:12px; color:#003377; font-style:italic; margin:4px 0; }
.mysp-contact { margin:8px 0 0; width:100%; }
.mysp-contact td { padding:2px 0; }
.mysp-contact .mysp-btn { width:150px; display:block; margin:0 auto; }
body[data-page="profile"] .mysp-contact .mysp-btn { background:#e8f3fd; color:#003377; border:1px solid #99c4e8; font-size:11px; }

/* ==== MySpace 1.0 profile: screenshot-led rebuild ==== */
/* 800px era canvas: 310px left / 420px right, with a 16px gutter.
   Screenshot uses blue left panels and peach right panels, not all-blue cards. */
body.retro-default { --mysp-page-bg:#d5e8fb; --mysp-panel-bg:#fff; --mysp-accent:#6699cc; --mysp-accent-dark:#003f87; --mysp-link:#003399; --mysp-header-text:#fff; --mysp-soft:#d5e7fb; --mysp-label:#b2cfef; --mysp-section-bg:#ffcc99; --mysp-section-text:#d56b00; }
body.retro-purple { --mysp-page-bg:#eadcff; --mysp-panel-bg:#fffaff; --mysp-accent:#7f5cc7; --mysp-accent-dark:#4f2d86; --mysp-link:#4c1fa3; --mysp-header-text:#fff; --mysp-soft:#eee3ff; --mysp-label:#d7c2ff; --mysp-section-bg:#f0c2ff; --mysp-section-text:#6f258f; }
body.retro-teal { --mysp-page-bg:#d7f5f0; --mysp-panel-bg:#fbfffe; --mysp-accent:#339f99; --mysp-accent-dark:#006d68; --mysp-link:#006b75; --mysp-header-text:#fff; --mysp-soft:#d9f7f2; --mysp-label:#aee4df; --mysp-section-bg:#bdf0da; --mysp-section-text:#087055; }
body.retro-sunset { --mysp-page-bg:#ffe3d1; --mysp-panel-bg:#fffaf6; --mysp-accent:#e06b4f; --mysp-accent-dark:#9f352c; --mysp-link:#b83622; --mysp-header-text:#fff; --mysp-soft:#ffe1ce; --mysp-label:#ffc0a1; --mysp-section-bg:#ffd187; --mysp-section-text:#9f4f00; }
body.retro-arcade { --mysp-page-bg:#dff7df; --mysp-panel-bg:#fbfffb; --mysp-accent:#28a542; --mysp-accent-dark:#0d6121; --mysp-link:#006fbd; --mysp-header-text:#fff; --mysp-soft:#dcf8e1; --mysp-label:#b7f0c1; --mysp-section-bg:#f7ff8f; --mysp-section-text:#5c7500; }
body.retro-mall { --mysp-page-bg:#ffe2ee; --mysp-panel-bg:#fffafd; --mysp-accent:#d05f96; --mysp-accent-dark:#933a70; --mysp-link:#8e2f8f; --mysp-header-text:#fff; --mysp-soft:#ffe1f0; --mysp-label:#ffc0dc; --mysp-section-bg:#c5e9ff; --mysp-section-text:#286c96; }
body.retro-midnight { --mysp-page-bg:#10182a; --mysp-panel-bg:#f8fbff; --mysp-accent:#445c9a; --mysp-accent-dark:#17213f; --mysp-link:#183fb4; --mysp-header-text:#f4f7ff; --mysp-soft:#dfe8ff; --mysp-label:#b9c9f5; --mysp-section-bg:#c4c7ec; --mysp-section-text:#2f397b; }
body[data-page="profile"] { background:var(--mysp-page-bg,#d5e8fb); color:#000; }
body[data-page="profile"] .scanlines,
body[data-page="profile"] > .mysp-navbar { display:none; }
body[data-page="profile"] > header.nav { display:none; }
body[data-page="profile"] #profile-main { max-width:800px; padding:0; margin:4px auto 28px; min-height:65vh; }
body[data-page="profile"] .footer { background:var(--mysp-page-bg,#d5e8fb); border:0; margin-top:0; }
body[data-page="profile"] .footer-inner { max-width:800px; margin:auto; padding:12px 25px 20px; gap:8px; }
body[data-page="profile"] .footer-copy { font:11px/1.4 Arial,sans-serif; }
body[data-page="profile"] .footer * { color:var(--mysp-accent-dark,#345980); }
.mysp { padding:0; background:var(--mysp-panel-bg,#fff); color:#000; font:11px/1.3 Arial,Helvetica,sans-serif; border-radius:0; overflow-wrap:anywhere; }
.mysp, .mysp * { box-sizing:border-box; }
.mysp [hidden] { display:none !important; }
.mysp a, .mysp .handle-link { color:var(--mysp-link,#003399); text-decoration:none; }
.mysp a:hover, .mysp .handle-link:hover { color:#c00; text-decoration:underline; }
.mysp-unavailable-link { display:inline; padding:0; border:0; border-radius:0; background:none; color:#526b91; font:inherit; cursor:not-allowed; }
.mysp-viewall .mysp-unavailable-link { color:#a65a1a; }
.mysp :focus-visible { outline:2px solid var(--mysp-link,#003399); outline-offset:2px; }
.mysp table { border-collapse:collapse; border-spacing:0; font:inherit; }
.mysp td, .mysp th { padding:0; vertical-align:top; text-align:left; }
.mysp p { margin:0 0 8px; }
.mysp .dim, .mysp-muted { color:#666; font:inherit; opacity:1; }
.mysp-masthead { display:flex; align-items:center; gap:5px; min-height:26px; padding:4px 9px; background:var(--mysp-accent-dark,#003f87); color:var(--mysp-header-text,#fff); font-size:10px; }
.mysp-masthead a { color:var(--mysp-header-text,#fff); white-space:nowrap; }
.mysp-search { display:flex; align-items:center; gap:5px; margin:0 16px 0 auto; }
.mysp-search input { width:165px; min-width:0; height:18px; padding:0 3px; border:1px inset #ccc; border-radius:0; background:#fff; color:#000; font:11px Arial,sans-serif; }
.mysp-search button { padding:0 5px; height:18px; font:10px Arial,sans-serif; color:#000; border:2px outset #eee; border-radius:0; background:#e0e0e0; }
.mysp .mysp-navbar { padding:4px 3px; border:0; background:var(--mysp-accent,#6699cc); text-align:center; color:var(--mysp-header-text,#fff); font:10px/1.4 Arial,sans-serif; }
.mysp .mysp-navbar a { color:var(--mysp-header-text,#fff); padding:0 3px; white-space:nowrap; }
.mysp-guest-note { background:#fff8c4; border:2px solid #d4c060; padding:6px 10px; margin:0; text-align:center; font-size:13px; }
.mysp-search-results { padding:8px 24px; background:var(--mysp-soft,#edf5fc); border-bottom:1px solid var(--mysp-accent,#6699cc); }
.mysp-search-results a { display:inline-block; margin:3px 12px 3px 0; }
.mysp .mysp-layout { table-layout:fixed; width:100%; border-collapse:separate; border-spacing:0; padding:14px 25px 20px; }
.mysp-layout > tbody > tr > .mysp-col-l { width:57%; padding-right:18px; }
  .mysp-layout > tbody > tr > .mysp-col-r { width:43%; }
.mysp .mysp-name { color:#000; font:bold 28px/1.2 Georgia,Times New Roman,serif; letter-spacing:0; margin:0 0 14px; text-shadow:none; }
.mysp-identity { width:100%; table-layout:fixed; margin-bottom:16px; }
.mysp-identity .mysp-photo-cell { width:45%; padding-right:10px; }
.mysp .mysp-photo { display:block; width:100%; height:190px; object-fit:contain; object-position:top center; background:#fff; border:0; outline:0; border-radius:0; }
.mysp .mysp-photo-emoji { display:flex; align-items:center; justify-content:center; font-size:65px; background:var(--mysp-soft,#e5edf5); }
.mysp-viewpics { display:block; margin:4px 0 0; text-align:center; font-weight:bold; text-decoration:underline !important; }
.mysp .mysp-details { padding:5px 0 0; font-size:11px; }
.mysp .mysp-quote { color:#000; font-style:normal; font-size:11px; margin:0 0 16px; }
.mysp .mysp-stat { font-size:10px; text-align:left; margin:10px 0 0; color:#000; }
.mysp .mysp-on { color:#149400; font-size:10px; font-weight:bold; margin:7px 0; }
.mysp-on span { color:#f90; }
.mysp .mysp-rank { font-size:10px; margin-top:6px; color:#b20; }
.mysp .mysp-box { width:100%; background:var(--mysp-panel-bg,#fff); border:1px solid var(--mysp-accent,#6699cc); margin:0 0 14px; table-layout:fixed; }
.mysp .mysp-sec { padding:3px 5px; color:var(--mysp-header-text,#fff); background:var(--mysp-accent,#6699cc); font:bold 12px/1.2 Arial,Helvetica,sans-serif; }
.mysp .mysp-pad { padding:5px; }
.mysp .mysp-contact { margin:0 0 16px; }
.mysp-ctbl { width:100%; table-layout:fixed; }
.mysp .mysp-ctbl td { width:50%; padding:2px 3px; }
.mysp-cbtn { display:flex; align-items:center; gap:5px; width:100%; min-height:22px; padding:1px 3px; background:linear-gradient(#fff,#ececec); border:1px solid; border-color:#fff #b8b8b8 #b8b8b8 #fff; border-radius:0; color:#345980; text-align:left; cursor:pointer; font:10px/1.15 Arial,Helvetica,sans-serif; }
.mysp a.mysp-cbtn { color:#345980; }
.mysp-cbtn:hover:not(:disabled) { background:#e4eef7; color:#003399; }
.mysp-cbtn:active:not(:disabled) { border-color:#999 #fff #fff #999; }
.mysp-cbtn:disabled { color:#777; cursor:not-allowed; }
.mysp-ci { display:inline-block; width:18px; flex:0 0 18px; color:#6a7891; text-align:center; font:bold 17px/1 Arial,sans-serif; text-shadow:1px 1px #ddd; }
.mysp #profile-action-status { margin:4px; font-size:10px; }
.mysp .mysp-url { width:82%; margin:0 auto 18px; padding:3px 5px; border:1px solid var(--mysp-accent,#6699cc); color:#000; font-size:10px; line-height:1.3; }
.mysp-url a { color:#000; }
.mysp .mysp-sbox { display:flex; align-items:center; width:100%; min-height:48px; padding:4px; margin:0 0 14px; border:1px solid #999; background:linear-gradient(#fff,#ccc); cursor:pointer; }
.mysp .mysp-splay { display:flex; align-items:center; justify-content:center; width:39px; height:36px; flex:0 0 39px; border:2px outset #eee; color:#43c600; font-size:26px; background:linear-gradient(#fff,#ddd); text-shadow:1px 1px #267000; }
.mysp .mysp-stitle { display:block; flex:1; min-width:0; margin-left:5px; padding:5px 8px; background:#3b3b3b; color:#fff; font-size:11px; }
.mysp-stitle small { display:block; font-size:9px; margin-top:2px; }
.mysp #song-btn:hover .mysp-splay { background:#e4e4e4; }
.mysp .mysp-interests { border-collapse:separate; border-spacing:2px; }
.mysp-interest-label { width:38%; }
.mysp .mysp-int-lbl { width:38%; padding:5px 6px; color:#315777; background:var(--mysp-label,#b2cfef); font-size:12px; font-weight:bold; border:0; }
.mysp .mysp-int-val { padding:5px 6px; color:#333; background:var(--mysp-soft,#d5e7fb); font-size:10px; border:0; }
.mysp-interests tr:not(:first-child) { height:33px; }
.mysp .mysp-net { display:flex; align-items:center; justify-content:center; min-height:76px; padding:12px 6px; margin:0 0 10px; border:1px solid #000; background:#fff; color:#000; text-align:center; font:bold 19px/1.25 Arial,Helvetica,sans-serif; }
.mysp .mysp-blog { margin:0 0 10px; padding:0 0 2px; font-size:11px; }
.mysp-blog p { margin:0 0 14px; }
.mysp-blog p:last-child { margin:0; font-weight:bold; }
.mysp .mysp-orange { border:0; }
.mysp-orange .mysp-sec { color:var(--mysp-section-text,#d56b00); background:var(--mysp-section-bg,#ffcc99); }
.mysp .mysp-blurb-hdr { color:var(--mysp-section-text,#d56b00); font-size:12px; font-weight:bold; margin:0 0 3px; }
.mysp .mysp-bio { white-space:pre-wrap; }
.mysp .mysp-blurbs { margin-bottom:10px; }
.mysp-blurbs .mysp-pad > p { margin-bottom:3px; }
.mysp-blurbs .mysp-pad > p:last-child { margin-bottom:0; }
.mysp .mysp-details-box { border:1px solid #999; background:#f0f0f0; margin:0 0 10px; }
.mysp-details-box .mysp-sec { background:#b6b6b6; color:#333; border-bottom:1px solid #999; }
.mysp-details-box th, .mysp-details-box td { padding:5px 6px; border-bottom:1px solid #d2d2d2; font:11px Arial,Helvetica,sans-serif; }
.mysp-details-box tr:last-child th, .mysp-details-box tr:last-child td { border-bottom:0; }
.mysp-details-box th { width:36%; color:#333; background:#ddd; font-weight:bold; }
.mysp-details-box td { color:#000; background:#f7f7f7; }
.mysp .mysp-fhdr { font-size:13px; font-weight:bold; margin:0 0 8px; }
.mysp-fhdr a { color:#000; }
.mysp-number { color:#c00; }
.mysp .mysp-fg-tbl { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:3px 6px; }
.mysp .mysp-fc { width:25%; text-align:center; vertical-align:top; padding:0 0 10px; }
.mysp-fg-tbl tr:last-child .mysp-fc { padding-bottom:0; }
.mysp-friend { display:block; width:100%; text-align:center; font-weight:bold; }
.mysp-friend-name { display:block; font-size:11px; margin-bottom:4px; overflow-wrap:anywhere; }
.mysp-friend-img { display:flex; align-items:center; justify-content:center; width:94px; height:94px; margin:0 auto; overflow:hidden; font-size:42px; line-height:94px; background:#0000000d; border:1px solid #b1b1b1; box-sizing:border-box; }
.mysp-friend-img img { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.mysp .mysp-viewall { text-align:right; margin:3px 0 0; font-size:11px; font-weight:bold; color:#d56b00; }
.mysp-viewall a { color:#c60; }
.mysp .mysp-count { margin:0 0 7px; font-size:11px; font-weight:bold; }
.mysp .mysp-comment { width:100%; table-layout:fixed; border:0; border-collapse:separate; border-spacing:2px; background:#fff; margin:0 0 4px; }
.mysp .mysp-comment td { padding:7px; font-size:11px; }
.mysp .mysp-comment-who { width:32%; background:#ff9933; text-align:center; font-weight:bold; }
.mysp-comment-who .mysp-friend-img { margin-top:6px; width:94px; height:94px; }
.mysp .mysp-comment-body { background:#f9d6b4; }
.mysp .mysp-cmeta { margin:0 0 10px; font-size:11px; font-weight:bold; }
.mysp .mysp-ctxt { margin:0 0 9px; padding:4px; border:1px solid #e8b78b; white-space:pre-wrap; overflow-wrap:anywhere; }
.mysp-link { padding:2px 0; background:none; border:0; color:#003399; text-decoration:underline; cursor:pointer; font:10px Arial,sans-serif; }
.mysp .wall-comments { border-top:1px solid #d99c68; margin:5px 0; padding:4px 0; }
.mysp .wall-comment { font-size:11px; overflow-wrap:anywhere; }
.mysp .comment-form { margin-top:7px; }
.mysp .wall-form { margin:14px 0 0; gap:4px; }
.mysp .wall-form label { font-weight:bold; }
.mysp textarea { display:block; width:100%; padding:4px; color:#000; background:#fff; border:1px solid #6699cc; border-radius:0; resize:vertical; font:11px/1.3 Arial,sans-serif; }
.mysp-btn { padding:2px 7px; border:2px outset #eee; border-radius:0; color:#000; background:#e0e0e0; cursor:pointer; font:11px Arial,sans-serif; }
.mysp .wall-form .mysp-btn { justify-self:start; }
.mysp .trophy { font:11px/1.3 Arial,sans-serif; }
.mysp-photo-dialog { width:min(460px,90vw); padding:12px; color:#000; background:#fff; border:2px solid #6699cc; font:12px Arial,sans-serif; }
.mysp-photo-dialog::backdrop { background:rgba(0,0,0,.6); }
.mysp-photo-dialog form { text-align:right; margin-bottom:8px; }
.mysp-photo-dialog img { display:block; max-width:100%; max-height:65vh; margin:auto; object-fit:contain; }
.mysp-photo-dialog p { margin-top:10px; }
/* ==== MySpace theme for dash (user home) - web + mobile ==== */
body[data-page="dash"] { background:#d5e8fb; color:#000; }
body[data-page="dash"] .scanlines { display:none; }
body[data-page="dash"] > header.nav { display:none; }
body[data-page="dash"] .mysp-navbar { display:block; }
body[data-page="dash"] #dash-main { max-width:800px; padding:0; margin:4px auto 28px; min-height:65vh; }
body[data-page="dash"] .footer { background:#d5e8fb; border:0; }
body[data-page="dash"] .footer-inner { max-width:800px; margin:auto; padding:12px 25px 20px; gap:8px; }
body[data-page="dash"] .footer-copy { font:11px/1.4 Arial,sans-serif; }
body[data-page="dash"] .footer * { color:#345980; }
body[data-page="dash"] .dash-grid { gap:12px; }
body[data-page="dash"] .panel,
body[data-page="dash"] .card,
body[data-page="dash"] .hub-panel { background:#fff; border:1px solid #6699cc; border-radius:0; color:#000; }
body[data-page="dash"] .panel h2,
body[data-page="dash"] .panel h3,
body[data-page="dash"] .hub-panel h2,
body[data-page="dash"] .hub-panel h3 { background:#6699cc; color:#fff; font:bold 12px/1.6 Arial,sans-serif; padding:4px 8px; margin:0; }
body[data-page="dash"] .panel *, body[data-page="dash"] .hub-panel * { color:#000; }
body[data-page="dash"] .panel a, body[data-page="dash"] .hub-panel a { color:#003399; }
body[data-page="dash"] .btn { border-radius:0; font:11px Arial,sans-serif; }
body[data-page="dash"] #hub-logout { background:#e8f3fd; color:#003377; border:1px solid #99c4e8; }
body[data-page="dash"] .dim { color:#526b91; }
body[data-page="dash"] input, body[data-page="dash"] textarea, body[data-page="dash"] select { border:1px solid #6699cc; border-radius:0; background:#fff; color:#000; font:11px Arial,sans-serif; }
body[data-page="dash"] .panel .panel-title { font:bold 12px/1.6 Arial,sans-serif; background:#6699cc; color:#fff; letter-spacing:.05em; padding:4px 8px; margin:0 0 10px; }
body[data-page="dash"] .panel .pixel { font-family:Arial,sans-serif; }
body[data-page="dash"] .badge { background:#cc0000; color:#fff; border-radius:0; }
body[data-page="dash"] .profile-hero { background:#fff; border:1px solid #6699cc; border-radius:0; color:#000; }
body[data-page="dash"] .profile-hero * { color:#000; }

/* ==== Arcade ==== */
.arcade-tabs { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.arcade-tab { font:bold 12px 'Press Start 2P',monospace; padding:8px 12px; background:#2121de; color:#fff; border:2px solid #fff; cursor:pointer; }
.arcade-tab-on { background:#ff8800; }
.arcade-cab { background:#111; border:4px solid #6699cc; padding:10px; text-align:center; }
.arcade-cab canvas { width:100%; max-width:760px; max-height:72vh; height:auto; object-fit:contain; image-rendering:pixelated; background:#000; display:block; margin:0 auto; }
.arcade-help { font:11px/1.5 Arial,sans-serif; color:#526b91; margin-top:8px; }
.arcade-pad { display:none; gap:14px; align-items:center; justify-content:center; margin-top:10px; }
.arcade-pad .arcade-fire { background:#c22; width:80px; height:80px; border-radius:50%; touch-action:none; }
.arcade-joy { position:relative; width:130px; height:130px; flex:0 0 auto; touch-action:none; user-select:none; }
.arcade-joy-base { position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 35% 30%, #2a2a8f, #0a0a2a); border:3px solid #2121de; box-shadow:0 0 12px #2121de inset; }
.arcade-joy-stick { position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffe066, #cc8800); border:3px solid #fff3; box-shadow:0 3px 8px #000c; }
.arcade-joy-note { display:none; text-align:center; font:9px/1.6 'Press Start 2P',monospace; color:#6699cc; margin-top:6px; letter-spacing:1px; }
.arcade-scores-panel { background:#111; border:2px solid #6699cc; padding:10px; margin-top:14px; }
.scores-table { width:100%; border-collapse:collapse; }
.scores-table th { font:9px/2 'Press Start 2P',monospace; color:#6699cc; padding:2px 6px; text-align:left; border-bottom:1px solid #333; letter-spacing:1px; }
.scores-table td { font:11px/1.8 'Courier New',monospace; color:#00ff99; padding:1px 6px; }
.scores-table tr.sc-top td { color:#ffd700; }
.scores-table .sc-rank { color:#ff8800; width:26px; }
.scores-table .sc-score { text-align:right; }
.sc-yourbest { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; margin-bottom:8px; border:2px solid #ffd700; background:#1a1400; }
.sc-yourbest .sc-yourname { font:11px/1 'Press Start 2P',monospace; color:#ffd700; letter-spacing:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:55%; }
.sc-yourbest .sc-yourpts { font:10px/1.5 'Courier New',monospace; color:#00ff99; }
.arcade-scores-empty { font:11px Arial,sans-serif; color:#666; text-align:center; padding:8px 0; margin:0; }
@media (max-width:760px) {
  .arcade-pad { display:flex; }
  .arcade-joy-note { display:block; }
  .mysp-page { padding:0 4px; }
}

/* ==== MySpace theme for Party Line (web + mobile) ==== */
body[data-page="partyline"] { background:#d5e8fb; color:#000; }
body[data-page="partyline"] .scanlines { display:none; }
body[data-page="partyline"] > header.nav { display:none; }
body[data-page="partyline"] #partyline-main { max-width:800px; padding:0 10px; margin:4px auto 28px; min-height:65vh; }
body[data-page="partyline"] .footer { background:#d5e8fb; border:0; }
body[data-page="partyline"] .footer * { color:#345980; }
body[data-page="partyline"] .footer .pixel { font-family:Arial,sans-serif; letter-spacing:0; }
body[data-page="partyline"] h1.pixel.panel-title { font:bold 22px Arial,sans-serif; color:#003399; letter-spacing:0; margin:10px 0 4px; }
body[data-page="partyline"] .dim, body[data-page="partyline"] .pl-when { color:#526b91; }
body[data-page="partyline"] .pl-tag { margin:0 0 12px; font:12px Arial,sans-serif; }
body[data-page="partyline"] .pl-scroll { height:56vh; overflow-y:auto; background:#fff; border:1px solid #6699cc; padding:10px; display:flex; flex-direction:column; gap:8px; }
body[data-page="partyline"] .pl-shout { display:flex; gap:10px; background:#f4f9ff; padding:8px; border:1px solid #cfe0f0; border-left:3px solid #6699cc; }
body[data-page="partyline"] .pl-av, body[data-page="partyline"] .pl-av-img { width:34px; height:34px; flex:0 0 34px; font-size:20px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #6699cc; }
body[data-page="partyline"] .pl-txt .handle-link { font-weight:bold; color:#003399 !important; }
body[data-page="partyline"] .pl-body { font:12px/1.5 Arial,sans-serif; color:#000; }
body[data-page="partyline"] .pl-form input[type="text"] { border:1px solid #6699cc; border-radius:0; background:#fff; font:12px Arial,sans-serif; padding:6px; }
body[data-page="partyline"] .pl-emobtns button, body[data-page="partyline"] .pl-attach { border:1px solid #6699cc; border-radius:0; background:#e6f0fb; }
body[data-page="partyline"] .pl-img { border:1px solid #6699cc; }

/* ==== MySpace chrome for Browse/Favorites/Groups/Events/Games/Music pages ==== */
body[data-page="browse"], body[data-page="favorites"], body[data-page="groups"],
body[data-page="events"], body[data-page="games"], body[data-page="music"], body[data-page="bulletins"],
body[data-page="photos"], body[data-page="blog"] { background:#d5e8fb; color:#000; }
body[data-page="browse"] .scanlines, body[data-page="favorites"] .scanlines,
body[data-page="groups"] .scanlines, body[data-page="events"] .scanlines,
body[data-page="games"] .scanlines, body[data-page="music"] .scanlines,
body[data-page="bulletins"] .scanlines,
body[data-page="photos"] .scanlines, body[data-page="blog"] .scanlines { display:none; }
body[data-page="browse"] > header.nav, body[data-page="favorites"] > header.nav,
body[data-page="groups"] > header.nav, body[data-page="events"] > header.nav,
body[data-page="games"] > header.nav, body[data-page="music"] > header.nav,
body[data-page="bulletins"] > header.nav,
body[data-page="photos"] > header.nav, body[data-page="blog"] > header.nav { display:none; }
.mysp-page { max-width:800px; margin:4px auto 28px; padding:0 10px; min-height:65vh; }
.mysp-h1 { font:bold 22px Arial,sans-serif; color:#003399; margin:10px 0 12px; }
.mysp-page .mysp-sec, .mysp-page .mysp-box { border-color:#6699cc; }
.mysp-page-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.mysp-page-card { width:104px; text-align:center; font:11px Arial,sans-serif; }
.mysp-page-card img, .mysp-page-emoji { display:block; width:100px; height:100px; margin:0 auto 4px; border:1px solid #6699cc; background:#fff; }
.mysp-page-emoji { line-height:100px; text-align:center; font-size:36px; }
.mysp-page-name { display:block; color:#003399 !important; font-weight:bold; text-decoration:none; }
.mysp-page-handle { display:block; color:#526b91; font-size:10px; }
.mysp-page .dim { color:#526b91; }
.mysp-page .mysp-search-form { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.mysp-page .mysp-search-form label { font-weight:bold; color:#003377; }
.mysp-page .mysp-search-form input { flex:1; min-width:140px; padding:4px; border:1px solid #6699cc; border-radius:0; font:11px Arial,sans-serif; }
.mysp-group-card, .mysp-event-card { border-bottom:1px solid #cfe0f0; padding:8px 0; font:12px/1.5 Arial,sans-serif; color:#000; }
.mysp-group-card strong, .mysp-event-card strong { color:#003399; }
body[data-page="browse"] .footer, body[data-page="favorites"] .footer,
body[data-page="groups"] .footer, body[data-page="events"] .footer,
body[data-page="games"] .footer, body[data-page="music"] .footer,
body[data-page="bulletins"] .footer,
body[data-page="photos"] .footer, body[data-page="blog"] .footer { background:#d5e8fb; border:0; }
body[data-page="browse"] .footer *, body[data-page="favorites"] .footer *,
body[data-page="groups"] .footer *, body[data-page="events"] .footer *,
body[data-page="games"] .footer *, body[data-page="music"] .footer *,
body[data-page="bulletins"] .footer *,
body[data-page="photos"] .footer *, body[data-page="blog"] .footer * { color:#345980; }
body[data-page="browse"] .footer .pixel, body[data-page="favorites"] .footer .pixel,
body[data-page="groups"] .footer .pixel, body[data-page="events"] .footer .pixel,
body[data-page="games"] .footer .pixel, body[data-page="music"] .footer .pixel,
body[data-page="bulletins"] .footer .pixel,
body[data-page="photos"] .footer .pixel, body[data-page="blog"] .footer .pixel { font-family:Arial,sans-serif; letter-spacing:0; }

.hub-actions { display:block; }
.hub-actions .friend-pill { margin:0 5px 5px 0; border-radius:0; background:#e6f0fb; border-color:#6699cc; color:#003399 !important; }

.bulletin-form { display:grid; gap:8px; font:11px Arial,sans-serif; }
.bulletin-form label { display:grid; gap:3px; color:#003377; font-weight:bold; }
.bulletin-form input, .bulletin-form textarea { border:1px solid #6699cc; border-radius:0; background:#fff; color:#000; padding:4px; font:11px Arial,sans-serif; }
.bulletin-list { display:grid; gap:0; }
.bulletin-row { padding:8px 0; border-bottom:1px solid #cfe0f0; font:11px/1.4 Arial,sans-serif; color:#000; }
.bulletin-row:last-child { border-bottom:0; }
.bulletin-subject-line { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.bulletin-subject { padding:0; border:0; background:none; color:#003399; text-decoration:underline; font:bold 12px Arial,sans-serif; cursor:pointer; }
.bulletin-subject:hover { color:#c00; }
.bulletin-delete { padding:0; border:0; background:none; color:#003399; text-decoration:underline; font:11px Arial,sans-serif; cursor:pointer; }
.bulletin-new { color:#c00; font:bold 10px Arial,sans-serif; }
.bulletin-meta { margin:3px 0; color:#526b91; }
.bulletin-meta a { color:#003399; }
.bulletin-meta span { margin-left:5px; color:#888; }
.bulletin-tease { margin:0; color:#000; overflow-wrap:anywhere; }
.bulletin-full { margin:7px 0 0; padding:7px; background:#f4f9ff; border:1px solid #cfe0f0; }
.bulletin-read-body { white-space:pre-wrap; overflow-wrap:anywhere; color:#000; }

.mysp-status { font:bold 12px/1.4 Arial,sans-serif; color:#cc0000; margin:4px 0; }
.mysp-back { margin:0 0 10px; font:12px Arial,sans-serif; }
.photos-upload { display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:#fff; border:1px solid #6699cc; padding:8px; margin:0 0 12px; }
.photos-upload input[type=file] { max-width:100%; font:11px Arial,sans-serif; color:#000; }
.photos-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
.photo-card { margin:0; background:#fff; border:1px solid #6699cc; padding:6px; min-height:150px; }
.photo-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border:0; background:#e8f3fd; }
.photo-delete { margin-top:6px; border:0; background:transparent; color:#003399; text-decoration:underline; font:11px Arial,sans-serif; cursor:pointer; padding:0; }

.mysp-rankbox { margin:7px 3px 3px; padding:5px; border-top:1px solid var(--mysp-accent,#6699cc); font:11px Arial,sans-serif; }
.mysp-rank-current { margin:0 0 5px; font-weight:bold; color:#000; }
.mysp-rank-form { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.mysp-rank-form label { font-weight:bold; }
.mysp-rank-form select { border:1px solid var(--mysp-accent,#6699cc); border-radius:0; background:#fff; color:#000; font:11px Arial,sans-serif; }

.blog-new { background:#fff; }
.blog-form { display:grid; gap:8px; font:11px Arial,sans-serif; }
.blog-form label { display:grid; gap:3px; color:#003377; font-weight:bold; }
.blog-form input, .blog-form textarea { border:1px solid #6699cc; border-radius:0; background:#fff; color:#000; padding:4px; font:11px Arial,sans-serif; }
.blog-list { display:grid; gap:12px; }
.blog-post { background:#fff; border:1px solid #6699cc; padding:8px; font:12px/1.5 Arial,sans-serif; color:#000; }
.blog-post h2 { margin:0 0 4px; font:bold 16px Arial,sans-serif; letter-spacing:0; }
.blog-post h2 a { color:#003399; }
.blog-meta { margin:0 0 8px; color:#526b91; font-size:11px; }
.blog-body { white-space:pre-wrap; overflow-wrap:anywhere; margin:0 0 8px; }
.blog-delete { padding:0; border:0; background:none; color:#003399; text-decoration:underline; font:11px Arial,sans-serif; cursor:pointer; }

@media (max-width:760px) {
  body[data-page="profile"] > header.nav { display:flex; }
  body[data-page="profile"] #profile-main { margin:8px 6px 20px; padding:0; }
  body[data-page="profile"] .mysp { padding:0; }
  body[data-page="profile"] .footer { background:#0a3d62; }
  .mysp-masthead { flex-wrap:wrap; padding:6px; }
  .mysp-search { order:1; width:100%; margin:3px 0 0; }
  .mysp-search input { flex:1; width:80px; height:25px; }
  .mysp-search button { height:25px; }
  .mysp .mysp-navbar { line-height:1.9; padding:4px; }
  .mysp .mysp-layout { display:block; padding:12px 10px; }
  .mysp-layout > tbody, .mysp-layout > tbody > tr { display:block; }
  .mysp-layout > tbody > tr > .mysp-col-l,
  .mysp-layout > tbody > tr > .mysp-col-r { display:block; width:100%; padding:0; }
  .mysp .mysp-name { font-size:20px; }
  body[data-page="profile"] .mysp-photo { width:100%; height:150px; }
  .mysp .mysp-net { min-height:65px; font-size:17px; }
  .mysp-cbtn { min-height:29px; font-size:11px; }
  .mysp-friend-img { height:80px; line-height:80px; }
  .mysp-friend-name { font-size:10px; }
  .mysp .mysp-comment-who { width:29%; }
  .mysp .mysp-comment td { padding:5px; }
}

/* browse pagination */
.browse-pager { clear: both; text-align: center; padding: 14px 0 4px; }
.browse-pager a { display: inline-block; margin: 2px 4px; padding: 3px 10px; border: 1px solid #889; border-radius: 3px; color: #23548c; text-decoration: none; background: #fff; font-weight: bold; }
.browse-pager a:hover { background: #ffef9e; }
.browse-pager a.cur { background: #23548c; color: #fff; border-color: #23548c; }

/* notifications page */
.notif-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notif-mark-btn { margin-left: auto; flex-shrink: 0; }
.notif-actions { padding: 0 0 6px; }
.notif-table { width: 100%; border-collapse: collapse; }
.notif-row td { padding: 7px 8px; border-bottom: 1px solid #dde; font: 11px Arial,Helvetica,sans-serif; vertical-align: middle; }
.notif-row:last-child td { border-bottom: 0; }
.notif-row.notif-unread td { background: #fffbe6; font-weight: bold; }
.notif-row.notif-unread .notif-when { color: #997700; }
.notif-cell { word-break: break-word; }
.notif-link { color: #003399; text-decoration: none; }
.notif-link:hover { color: #c00; text-decoration: underline; }
.notif-when { color: #888; font-size: 10px; white-space: nowrap; text-align: right; width: 72px; }

/* mobile hub navbar: scrollable instead of squished */
@media (max-width: 640px) {
  .mysp-navbar-in { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mysp-navbar-in a { display: inline-block; padding: 6px 8px; }
}

/* ---- wallet checker + allowlist admin ---- */
.wl-tag { font-family:'Press Start 2P',monospace; font-size:11px; color:#8be9fd; margin:0 0 14px; }
.wl-form { display:flex; gap:8px; flex-wrap:wrap; }
.wl-input { flex:1 1 240px; min-width:0; background:#0a0a12; border:2px solid #333; color:#eee;
  font-family:'Space Grotesk',monospace; font-size:13px; padding:10px 12px; border-radius:4px; }
.wl-input:focus { outline:none; border-color:#8be9fd; }
.wl-btn { background:#c22; color:#fff; border:2px solid #fff; font-family:'Press Start 2P',monospace;
  font-size:11px; padding:10px 16px; border-radius:4px; cursor:pointer; }
.wl-btn:hover { background:#e33; }
.wl-btn:disabled { opacity:.5; cursor:default; }
.wl-result { font-family:'Press Start 2P',monospace; font-size:12px; margin-top:16px; min-height:16px; }
.wl-good { color:#7dff8a; }
.wl-bad { color:#ff6b6b; }
.wl-no { color:#ffd700; }
.wl-foot { font-family:'Press Start 2P',monospace; font-size:8px; color:#666; margin-top:20px; }
.wl-h2 { font-family:'Press Start 2P',monospace; font-size:12px; color:#ff79c6; margin:24px 0 8px; }
.wl-help { color:#999; font-size:13px; }
.wl-textarea { width:100%; box-sizing:border-box; background:#0a0a12; border:2px solid #333; color:#eee;
  font-family:'Space Grotesk',monospace; font-size:12px; padding:10px; border-radius:4px; resize:vertical; }
.wl-row { display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.wl-row label { color:#ccc; font-size:13px; }
.wl-row .wl-input { flex:0 0 160px; }
.wl-list { max-height:360px; overflow-y:auto; border:2px solid #222; border-radius:4px; margin-top:8px; }
.wl-row-item { display:flex; align-items:center; gap:10px; padding:6px 10px; border-bottom:1px solid #1a1a24; }
.wl-row-item:last-child { border-bottom:none; }
.wl-addr { flex:1; font-family:'Space Grotesk',monospace; font-size:12px; color:#8be9fd; word-break:break-all; }
.wl-phase { color:#7dff8a; font-family:'Press Start 2P',monospace; font-size:9px; }
.wl-x { background:none; border:1px solid #553333; color:#ff6b6b; cursor:pointer; border-radius:3px; padding:2px 8px; }
.wl-x:hover { background:#331111; }

/* ---- wallet checker v2 ---- */
.wl-frame { text-align:center; max-width:520px; margin:0 auto; padding:34px 20px 28px; }
.wl-h1 { font-family:'Anton',sans-serif; font-size:44px; letter-spacing:3px; margin:0;
  color:#fff; text-shadow:3px 3px 0 #c22, 6px 6px 0 #400, 0 0 24px rgba(255,60,60,.5); }
.wl-tag { font-family:'Press Start 2P',monospace; font-size:11px; color:#8be9fd; margin:14px 0 20px;
  text-shadow:0 0 10px rgba(139,233,253,.6); }
.wl-panel { background:rgba(10,10,18,.92); border:2px solid #333; box-shadow:0 0 18px rgba(139,233,253,.15), inset 0 0 30px rgba(0,0,0,.6); }
.wl-sub { font-family:'Press Start 2P',monospace; font-size:9px; color:#aaa; margin-top:10px; min-height:12px; }
.wl-result.wl-in { animation:wlPop .35s ease; }
.wl-result.wl-good { color:#7dff8a; text-shadow:0 0 14px rgba(125,255,138,.7); }
.wl-result.wl-no { color:#ffd700; text-shadow:0 0 12px rgba(255,215,0,.5); }
.wl-result.wl-bad { color:#ff6b6b; text-shadow:0 0 12px rgba(255,107,107,.5); }
@keyframes wlPop { 0%{transform:scale(.6);opacity:0} 70%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }
@media (max-width:480px){ .wl-h1{font-size:30px;} }

/* ---- checker v3: myspace theme ---- */
body[data-page="checker"] { background:var(--mysp-page-bg,#d5e8fb); }
.wl-mysp { max-width:640px; margin:0 auto; padding:16px 10px 30px; }
body[data-page="checker"] .wl-hero { border:3px solid #6699cc; background:linear-gradient(180deg,#f7f2e8 0%,#efe4cf 100%) !important; text-align:center; margin-bottom:14px; }
body[data-page="checker"] .wl-hero-h1 { font-family:'Anton',sans-serif; font-size:44px; letter-spacing:3px; margin:12px 0 6px; color:#1a0b2e;
  text-shadow:2px 2px 0 #ffd166, 3px 3px 0 #c22; }
.wl-hero-sub { font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:500; color:#333; margin:0 0 14px; }
.wl-hero-sub b { color:#b03030; }
.wl-check-box { width:100%; border:2px solid var(--mysp-accent,#6699cc); }
.wl-check-box .mysp-pad { background:var(--mysp-panel-bg,#fff); }
.wl-mysp .wl-input { border:2px inset #999; background:#fff; color:#000; font-family:'Space Grotesk',monospace; font-size:14px; padding:9px 10px; flex:1 1 300px; }
.wl-mysp .wl-btn { background:linear-gradient(180deg,#3366cc,#003399); color:#fff; border:2px outset #6699cc;
  font-family:'Press Start 2P',monospace; font-size:10px; padding:12px 18px; cursor:pointer; }
.wl-mysp .wl-btn:hover { background:linear-gradient(180deg,#4477dd,#1144aa); }
.wl-mysp .wl-btn:disabled { opacity:.5; }
.wl-mysp .wl-result { font-family:'Anton',sans-serif; font-size:20px; letter-spacing:1px; margin-top:14px; min-height:18px; text-align:center; }
.wl-mysp .wl-result.wl-good { color:#008800; }
.wl-mysp .wl-result.wl-no { color:#d56b00; }
.wl-mysp .wl-result.wl-bad { color:#cc0000; }
.wl-mysp .wl-result.wl-in { animation:wlPop .35s ease; }
.wl-mysp .wl-sub { font-family:'Space Grotesk',sans-serif; font-size:14px; color:#444; text-align:center; margin-top:8px; min-height:16px; }
.wl-badge { max-width:640px; margin:18px auto 0; }
.wl-badge-card { background:var(--mysp-panel-bg,#fff); border:3px solid var(--mysp-accent,#6699cc); padding:12px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; }
.wl-badge-img { width:280px; border:2px solid #333; display:block; }
.wl-badge-txt { text-align:center; flex:1 1 200px; }
.wl-badge-name { font-family:'Space Grotesk',monospace; font-weight:700; color:var(--mysp-link,#003399); margin:0 0 4px; word-break:break-all; font-size:13px; }
.wl-badge-phase { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color:#008800; margin:0 0 12px; }
.wl-tweet-btn, .wl-dl-btn { display:inline-block; padding:10px 14px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px;
  text-decoration:none; margin:4px; }
.wl-tweet-btn { background:#1da1f2; color:#fff; border:2px outset #55c2ff; }
.wl-tweet-btn:hover { background:#3ab3f5; }
.wl-dl-btn { background:#eee; color:#333; border:2px outset #ccc; }
.wl-mysp .wl-foot { font-family:'Press Start 2P',monospace; font-size:8px; color:#666; text-align:center; margin-top:22px; }
@media (max-width:480px){ .wl-hero-h1{font-size:26px;} .wl-badge-img{width:100%;} }

/* ---- checker partners ---- */
.wl-partners { max-width:640px; }
.wl-partners-h2 { font-family:'Anton',sans-serif; font-size:22px; letter-spacing:1px; color:#b03030; margin:0 0 8px; }
.wl-partners-p { font-family:'Space Grotesk',monospace; font-size:13px; color:#444; margin:0 0 12px; }
.wl-partners-grid { display:flex; flex-wrap:wrap; gap:8px; }
.wl-pt { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; color:#003399; background:#eef; border:2px solid #6699cc;
  padding:8px 10px; text-decoration:none; display:inline-block; }
.wl-pt:hover { background:#dfe; color:#006600; border-color:#008800; }