/* ============================================================
   MySpace classic recreation — global chrome, home, dashboard
   Era: 2005-2006. Palette anchored on MySpace blue #003399.
   ============================================================ */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #000;
  background: #7d94b0; /* desktop around the IE window */
}

a { color: #003399; text-decoration: underline; cursor: pointer; }
a:visited { color: #660099; }
a:hover { color: #003399; text-decoration: none; }
a:active { color: #cc0000; }

img { border: 0; }

input[type=text], input[type=password], textarea, select {
  font-family: Verdana, Arial, sans-serif; font-size: 11px;
  border: 1px solid #7f9db9; padding: 2px 3px; background: #fff; color: #000;
}
input[type=submit], input[type=button], button {
  font-family: Verdana, Arial, sans-serif; font-size: 11px;
  background: #ece9d8; border: 1px solid #7f7f7f; padding: 2px 10px; cursor: pointer;
}
input[type=submit]:hover, button:hover { background: #f5f3ea; }

.hidden { display: none !important; }

/* ---------------- IE6 / WinXP browser frame ---------------- */
.ie-frame { display: none; }
@media (min-width: 980px) {
  body { padding: 16px 0 24px; }
  .ie-frame {
    display: block; width: 940px; margin: 0 auto;
    border: 2px solid #0831d9; border-radius: 8px 8px 0 0;
    background: #fff;
    box-shadow: 4px 6px 18px rgba(0,0,0,.45);
  }
  .ie-titlebar {
    background: linear-gradient(to bottom, #0997ff 0%, #0053ee 8%, #0050ee 40%, #06f 88%, #0044dd 100%);
    color: #fff; font-family: Tahoma, Verdana, sans-serif; font-weight: bold; font-size: 12px;
    padding: 4px 6px 5px 8px; border-radius: 5px 5px 0 0;
    display: flex; align-items: center; text-shadow: 1px 1px 1px rgba(0,0,40,.6);
    user-select: none;
  }
  .ie-titlebar .ie-ico { width: 15px; height: 15px; margin-right: 6px; border-radius: 2px; }
  .ie-titlebar .ie-winbtns { margin-left: auto; display: flex; gap: 2px; }
  .ie-titlebar .ie-winbtns span {
    display: inline-block; width: 21px; height: 21px; line-height: 19px; text-align: center;
    border: 1px solid rgba(255,255,255,.7); border-radius: 3px; font-size: 11px; cursor: pointer;
    background: linear-gradient(to bottom, #4a8ff7, #1662e0);
  }
  .ie-titlebar .ie-winbtns span.ie-close { background: linear-gradient(to bottom, #f79d7a, #d94f2a); }
  .ie-toolbar {
    background: #ece9d8; border-bottom: 1px solid #aca899; padding: 3px 6px;
    font-family: Tahoma, sans-serif; font-size: 11px; color: #333;
    display: flex; align-items: center; gap: 2px;
  }
  .ie-toolbar .tbtn {
    border: 1px solid transparent; padding: 3px 7px; cursor: pointer; border-radius: 2px; color: #444;
  }
  .ie-toolbar .tbtn:hover { border-color: #9db9d5; background: #dbe9f7; }
  .ie-toolbar .tsep { width: 1px; height: 18px; background: #aca899; margin: 0 4px; }
  .ie-address {
    background: #ece9d8; border-bottom: 1px solid #aca899; padding: 3px 6px;
    display: flex; align-items: center; gap: 6px; font-family: Tahoma, sans-serif; font-size: 11px; color: #333;
  }
  .ie-address .addr-box {
    flex: 1; background: #fff; border: 1px solid #7f9db9; padding: 3px 5px;
    font-family: Verdana, sans-serif; font-size: 11px; color: #003399;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ie-content { height: 76vh; overflow: auto; background: #fff; position: relative; }
  .ie-statusbar {
    background: #ece9d8; border-top: 1px solid #fff; box-shadow: inset 0 1px 0 #aca899;
    font-family: Tahoma, sans-serif; font-size: 11px; color: #333;
    display: flex; align-items: center; padding: 2px 4px; gap: 8px; user-select: none;
  }
  .ie-statusbar .st-text { flex: 1; padding-left: 4px; }
  .ie-statusbar .st-zone { border-left: 1px solid #aca899; padding: 1px 8px; display: flex; align-items: center; gap: 4px; }
  .ie-progress { width: 110px; height: 11px; border: 1px solid #aca899; background: #fff; display: none; }
  .ie-progress.on { display: block; }
  .ie-progress i { display: block; height: 9px; width: 0; background: repeating-linear-gradient(90deg, #1e7d1e 0 8px, transparent 8px 11px); }

  /* XP-ish scrollbars inside the fake window */
  .ie-content::-webkit-scrollbar { width: 15px; }
  .ie-content::-webkit-scrollbar-track { background: #ece9d8; }
  .ie-content::-webkit-scrollbar-thumb { background: #c8d4e4; border: 1px solid #9db9d5; }
  .ie-content::-webkit-scrollbar-thumb:hover { background: #aec6e4; }
}

/* plain view (small screens): no frame chrome, content flows full-page */
.ie-content { min-height: 60vh; }
@media (max-width: 979px) {
  body { background: #fff; padding: 0; }
  .ie-frame { display: block; border: 0; }
  .ie-titlebar, .ie-toolbar, .ie-address, .ie-statusbar { display: none; }
  .ie-content { height: auto; overflow: visible; }
}

/* ---------------- global MySpace chrome ---------------- */
.ms-topstrip {
  background: #fff; border-bottom: 1px solid #99badd;
  padding: 4px 10px; font-size: 10px; display: flex; align-items: center; gap: 8px;
}
.ms-topstrip .right { margin-left: auto; }
.ms-topstrip input[type=text] { width: 170px; font-size: 10px; }
.ms-topstrip input[type=submit] { font-size: 10px; padding: 1px 8px; }

.ms-nav {
  background: #003399; padding: 5px 10px; text-align: center;
  font-size: 11px; font-weight: bold; letter-spacing: .2px;
}
.ms-nav a, .ms-nav a:visited { color: #fff; text-decoration: none; margin: 0 5px; }
.ms-nav a:hover { text-decoration: underline; color: #ffcc66; }

.ms-footer {
  border-top: 1px solid #99badd; margin-top: 14px; padding: 8px 10px;
  font-size: 9.5px; color: #555; text-align: center; line-height: 1.7; background: #fff;
}
.ms-footer a { color: #003399; font-size: 9.5px; }

/* ---------------- logged-out home page ---------------- */
.home-wrap { background: #fff; }
.home-mast {
  background: linear-gradient(to bottom, #2a5db0 0%, #003399 70%);
  padding: 26px 34px 22px; color: #fff; position: relative;
}
.home-logo { font-size: 44px; font-weight: bold; letter-spacing: -2px; color: #fff; line-height: 1; }
.home-logo .com { font-size: 20px; font-weight: normal; }
.home-tag { font-style: italic; font-size: 17px; color: #cfe0ff; margin-top: 2px; }
.home-mast .toplinks { position: absolute; top: 10px; right: 16px; font-size: 10px; }
.home-mast .toplinks a { color: #cfe0ff; }

.home-cols { display: flex; gap: 18px; padding: 18px 26px; align-items: flex-start; }
.home-left { width: 300px; flex: none; }
.home-right { flex: 1; }

.login-box { border: 2px solid #003399; background: #eaf1fa; }
.login-box h3 { margin: 0; background: #003399; color: #fff; font-size: 12px; padding: 4px 8px; }
.login-box .lb-in { padding: 10px 12px; }
.login-box label { font-size: 10px; font-weight: bold; display: block; margin: 6px 0 2px; }
.login-box input[type=text], .login-box input[type=password] { width: 100%; }
.login-box .btnrow { margin-top: 10px; }
.login-box .forgot { display: block; margin-top: 8px; font-size: 9.5px; }

.btn-orange {
  background: linear-gradient(to bottom, #ffb45c, #ff8c1a) !important;
  border: 1px solid #c66a00 !important; color: #fff !important; font-weight: bold !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,.25);
}

.signup-pitch { border: 1px solid #99badd; padding: 14px 16px; background: #f4f8fd; }
.signup-pitch h2 { margin: 0 0 6px; font-size: 17px; color: #003399; }
.signup-pitch ul { margin: 8px 0 12px 18px; padding: 0; line-height: 1.9; font-size: 12px; }
.signup-pitch .btn-orange { font-size: 15px !important; padding: 6px 22px !important; }

.home-section { border-top: 1px solid #cdddf0; padding: 12px 26px; }
.home-section h3 { margin: 0 0 8px; font-size: 13px; color: #003399; }
.cool-people { display: flex; gap: 14px; }
.cool-people .cp { width: 96px; text-align: center; font-size: 10px; }
.cool-people img { width: 90px; height: 116px; border: 1px solid #999; object-fit: cover; }

/* ---------------- dashboard (logged-in home) ---------------- */
.dash-wrap { background: #fff; padding: 10px 14px; display: flex; gap: 12px; align-items: flex-start; }
.dash-left { width: 300px; flex: none; }
.dash-main { flex: 1; }
.dash-right { width: 230px; flex: none; }

.dbox { border: 1px solid #99badd; margin-bottom: 10px; }
.dbox > h4 { margin: 0; background: #dce9f8; color: #003399; font-size: 11px; padding: 3px 7px; border-bottom: 1px solid #99badd; }
.dbox .db-in { padding: 7px 8px; }

.hello-box { border: 1px solid #99badd; margin-bottom: 10px; }
.hello-box .hb-in { padding: 8px; display: flex; gap: 9px; }
.hello-box img { width: 90px; height: 116px; border: 1px solid #999; }
.hello-box h2 { margin: 0 0 4px; font-size: 14px; color: #000; }
.hello-box .hlinks { line-height: 1.8; font-size: 10px; }

.mail-counts { line-height: 2.0; }
.mail-counts .n { font-weight: bold; color: #cc0000; }

.bulletin-item { padding: 4px 0; border-bottom: 1px dotted #b9cde6; }
.bulletin-item .subj { font-weight: bold; }
.bulletin-item .meta { color: #777; font-size: 9.5px; }

.announce { background: #fef9d8; border: 1px solid #e0d27a; padding: 7px 9px; margin-bottom: 10px; font-size: 10px; }

/* ---------------- generic boxes, confirm bars, modals ---------------- */
.confirm-bar {
  background: #e9f6e0; border: 1px solid #86bb6a; color: #2f6b12;
  padding: 6px 9px; margin: 8px 0; font-weight: bold;
}
.warn-bar { background: #fdeaea; border: 1px solid #d88; color: #8a1a1a; padding: 6px 9px; margin: 8px 0; }

.ms-modal-veil {
  position: fixed; inset: 0; background: rgba(0,0,30,.45); z-index: 9000;
  display: flex; align-items: center; justify-content: center;
}
.ms-modal {
  width: 380px; background: #fff; border: 2px solid #003399; border-radius: 6px 6px 0 0;
  box-shadow: 5px 6px 16px rgba(0,0,0,.4); font-size: 11px;
}
.ms-modal .mm-title {
  background: linear-gradient(to bottom, #2a5db0, #003399); color: #fff; font-weight: bold;
  padding: 4px 8px; display: flex; border-radius: 3px 3px 0 0;
}
.ms-modal .mm-title .x { margin-left: auto; cursor: pointer; color: #fff; }
.ms-modal .mm-body { padding: 10px 12px; }
.ms-modal textarea { width: 100%; height: 90px; }
.ms-modal .mm-row { margin: 7px 0; }
.ms-modal label { font-weight: bold; display: block; margin-bottom: 2px; }

/* era glitter text: animated sparkle headline */
.glitter-name {
  background: linear-gradient(90deg, #ff2e88, #ffe14d, #31c4ff, #b06bff, #ff2e88);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: glitterShift 3.5s linear infinite;
  text-shadow: 0 0 6px rgba(255,255,255,.35);
}
@keyframes glitterShift { to { background-position: 300% 0; } }

.glitter-comment { position: relative; }
.glitter-comment::after {
  content: ''; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px;
  background: url('../assets/sparkle.svg') no-repeat center/contain;
  animation: sparkleBlink 1.1s steps(2) infinite; pointer-events: none;
}
@keyframes sparkleBlink { 50% { opacity: .1; transform: rotate(35deg) scale(.7); } }

/* custom era cursors */
body.cur-star, body.cur-star a { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 1 L13.4 8.2 L21 8.6 L15 13 L17.2 20.4 L11 16 L4.8 20.4 L7 13 L1 8.6 L8.6 8.2 Z' fill='%23ffe14d' stroke='%23b8860b'/%3E%3C/svg%3E") 11 11, auto; }
body.cur-heart, body.cur-heart a { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 20 C4 14 1 10 1 6.5 C1 3 4 1 6.5 1 C8.5 1 10 2 11 4 C12 2 13.5 1 15.5 1 C18 1 21 3 21 6.5 C21 10 18 14 11 20 Z' fill='%23ff5fa2' stroke='%23b8005c'/%3E%3C/svg%3E") 11 11, auto; }
body.cur-sparkle, body.cur-sparkle a { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 0 L13.5 8.5 L22 11 L13.5 13.5 L11 22 L8.5 13.5 L0 11 L8.5 8.5 Z' fill='%2331c4ff' stroke='%230a5d86'/%3E%3C/svg%3E") 11 11, auto; }

/* simple pages */
.page-plain { padding: 12px 16px; background: #fff; min-height: 300px; }
.page-plain h2 { color: #003399; font-size: 15px; margin: 4px 0 10px; }
.page-plain h2 .sub { font-size: 10px; color: #777; font-weight: normal; }

table.browse-table { border-collapse: collapse; width: 100%; }
table.browse-table td { border: 1px solid #c5d8ef; padding: 6px; vertical-align: top; }
table.browse-table img { width: 90px; height: 116px; border: 1px solid #999; }

/* error page — the classic */
.err-wrap { padding: 60px 30px; text-align: center; font-size: 12px; background: #fff; min-height: 320px; }
.err-wrap .err-sorry { font-size: 17px; font-weight: bold; color: #000; margin-bottom: 10px; }
.err-wrap a { font-size: 12px; }