* { box-sizing: border-box; }

:root {
  /* ---- constant brand colors: same in light & dark (blue + orange never swap) ---- */
  --brand-navy: #1f3d8a;
  --brand-navy-deep: #10265e;
  --brand-blue-light: #3f66c2;
  --brand-subnav: #2c4fa0;
  --brand-orange: #ff8a00;
  --brand-orange-deep: #e26e00;
  --online-green: #2fa84f;

  /* ---- swappable: white <-> black between themes ---- */
  --bg-body: #ffffff;
  --bg-pattern: #e9edf5;
  --text-color: #000000;
  --link-color: #0000CC;
  --link-hover: #cc0000;

  --wrapper-bg: #ffffff;
  --wrapper-border: #cdd6e6;

  --navbar2-bg: #ffffff;
  --navbar2-text: #23428f;
  --navbar2-border: #dddddd;

  --module-border: #6688bb;
  --modbody-bg: #f5f8fd;
  --modbody-white-bg: #ffffff;

  --placeholder-bg: #dbe4f5;
  --placeholder-border: #23428f;
  --placeholder-text: #6688bb;

  --label-color: #23428f;
  --dotted-border: #cdd6e6;
  --comment-border: #dde5f2;
  --meta-text: #666666;

  --sep-border: #a9bfe0;

  --marquee-bg: #ffff99;
  --marquee-border: #cc9900;
  --marquee-text: #cc3300;

  --toggle-bg: #ffffff;
  --toggle-border: #23428f;

  --url-box-bg: #f5f8fd;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-body: #000000;
    --bg-pattern: #111111;
    --text-color: #f0f0f0;
    --link-color: #6fa8ff;
    --link-hover: #ff8866;

    --wrapper-bg: #000000;
    --wrapper-border: #222222;

    --navbar2-bg: #000000;
    --navbar2-text: #dfe6f5;
    --navbar2-border: #222222;

    --module-border: #33427a;
    --modbody-bg: #0a0a0a;
    --modbody-white-bg: #000000;

    --placeholder-bg: #141414;
    --placeholder-border: #3f66c2;
    --placeholder-text: #8894ad;

    --label-color: #7fb2ff;
    --dotted-border: #222222;
    --comment-border: #1a1a1a;
    --meta-text: #999999;

    --sep-border: #262626;

    --marquee-bg: #332900;
    --marquee-border: #8a6d00;
    --marquee-text: #ffcc66;

    --toggle-bg: #000000;
    --toggle-border: #3f66c2;

    --url-box-bg: #0a0a0a;
  }
}

:root[data-theme="dark"] {
  --bg-body: #000000;
  --bg-pattern: #111111;
  --text-color: #f0f0f0;
  --link-color: #6fa8ff;
  --link-hover: #ff8866;

  --wrapper-bg: #000000;
  --wrapper-border: #222222;

  --navbar2-bg: #000000;
  --navbar2-text: #dfe6f5;
  --navbar2-border: #222222;

  --module-border: #33427a;
  --modbody-bg: #0a0a0a;
  --modbody-white-bg: #000000;

  --placeholder-bg: #141414;
  --placeholder-border: #3f66c2;
  --placeholder-text: #8894ad;

  --label-color: #7fb2ff;
  --dotted-border: #222222;
  --comment-border: #1a1a1a;
  --meta-text: #999999;

  --sep-border: #262626;

  --marquee-bg: #332900;
  --marquee-border: #8a6d00;
  --marquee-text: #ffcc66;

  --toggle-bg: #000000;
  --toggle-border: #3f66c2;

  --url-box-bg: #0a0a0a;
}

:root[data-theme="light"] {
  --bg-body: #ffffff;
  --bg-pattern: #e9edf5;
  --text-color: #000000;
  --link-color: #0000CC;
  --link-hover: #cc0000;

  --wrapper-bg: #ffffff;
  --wrapper-border: #cdd6e6;

  --navbar2-bg: #ffffff;
  --navbar2-text: #23428f;
  --navbar2-border: #dddddd;

  --module-border: #6688bb;
  --modbody-bg: #f5f8fd;
  --modbody-white-bg: #ffffff;

  --placeholder-bg: #dbe4f5;
  --placeholder-border: #23428f;
  --placeholder-text: #6688bb;

  --label-color: #23428f;
  --dotted-border: #cdd6e6;
  --comment-border: #dde5f2;
  --meta-text: #666666;

  --sep-border: #a9bfe0;

  --marquee-bg: #ffff99;
  --marquee-border: #cc9900;
  --marquee-text: #cc3300;

  --toggle-bg: #ffffff;
  --toggle-border: #23428f;

  --url-box-bg: #f5f8fd;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-body);
  background-image:
    repeating-linear-gradient(45deg, var(--bg-pattern) 0, var(--bg-pattern) 2px, var(--bg-body) 2px, var(--bg-body) 40px);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: var(--text-color);
}
a { color: var(--link-color); text-decoration: underline; }
a:hover { color: var(--link-hover); }

/* ===== TIER 1: MASTHEAD (navy, constant both themes) ===== */
#masthead {
  background-color: var(--brand-navy);
  border-bottom: 3px solid var(--brand-navy-deep);
}
#masthead-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  gap: 12px;
  flex-wrap: wrap;
}
#logo {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Segoe Print", Arial, sans-serif;
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: -1px;
  text-decoration: none;
}
#logo span { color: var(--brand-orange); }

#searchbar {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  max-width: 420px;
}
#searchbar input[type="text"] {
  flex: 1;
  padding: 5px 6px;
  font-size: 11px;
  border: 1px solid #99a8cc;
  border-right: none;
  border-radius: 3px 0 0 3px;
}
#searchbar select {
  padding: 5px 4px;
  font-size: 11px;
  border: 1px solid #99a8cc;
  border-right: none;
  border-left: none;
  background: #eef1f9;
}
#searchbar button {
  padding: 5px 14px;
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  background: var(--brand-orange);
  background-image: linear-gradient(#ffa733, var(--brand-orange-deep));
  border: 1px solid var(--brand-orange-deep);
  border-radius: 0 3px 3px 0;
  cursor: pointer;
}
#searchbar button:hover { background: var(--brand-orange-deep); }

#theme-toggle {
  background: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
  color: var(--text-color);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  padding: 5px 9px;
  cursor: pointer;
  border-radius: 2px;
}

/* ===== TIER 2: NAV BAR (white <-> black, swaps with theme) ===== */
#navbar {
  background-color: var(--navbar2-bg);
  border-bottom: 1px solid var(--navbar2-border);
}
#navbar table {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  border-collapse: collapse;
}
#navbar td {
  padding: 6px 12px;
  font-weight: bold;
  color: var(--navbar2-text);
  font-size: 11px;
  white-space: nowrap;
}
#navbar a {
  color: var(--navbar2-text);
  text-decoration: none;
}
#navbar a:hover { color: var(--brand-orange); text-decoration: underline; }
#navbar td.spacer { width: 100%; }
#navbar td.acct a { font-weight: normal; }

/* ===== TIER 3: SUBNAV (blue, constant both themes) ===== */
#subnav {
  background-color: var(--brand-subnav);
  border-bottom: 1px solid var(--brand-navy-deep);
}
#subnav table {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  border-collapse: collapse;
}
#subnav td {
  padding: 5px 10px;
  font-weight: bold;
  color: #ffffff;
  font-size: 11px;
  border-right: 1px solid #4a6bb5;
  white-space: nowrap;
}
#subnav a { color: #ffffff; text-decoration: none; }
#subnav a:hover { color: #ffcc00; text-decoration: underline; }
#subnav td.social a { display: inline-flex; align-items: center; gap: 4px; }
#subnav .navicon { width: 13px; height: 13px; vertical-align: middle; }
#subnav .subnav-label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }

/* ===== MAIN WRAPPER ===== */
#wrapper {
  max-width: 960px;
  margin: 0 auto;
  background: var(--wrapper-bg);
  border-left: 1px solid var(--wrapper-border);
  border-right: 1px solid var(--wrapper-border);
}

/* ===== PROFILE HEAD (name + subtitle, like "Pei Pei / Indie Pop Rock") ===== */
#profilehead { padding: 14px 12px 6px; }
#profilehead .pname {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-color);
  font-family: Arial, Helvetica, sans-serif;
}
#profilehead .psubtitle {
  color: var(--brand-blue-light);
  font-weight: bold;
  font-size: 12px;
  margin-top: 2px;
}
.glitter {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Segoe Print", Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(90deg, #ff00cc, #3333ff, #00ccff, #33ff33, #ffcc00, #ff0066);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
  display: inline-block;
}
.marquee-wrap {
  background: var(--marquee-bg);
  border: 1px dashed var(--marquee-border);
  padding: 2px 4px;
  font-weight: bold;
  color: var(--marquee-text);
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  max-width: 400px;
  vertical-align: middle;
}
.marquee-track {
  display: inline-block;
  padding-left: 100%;
  animation: scrollleft 12s linear infinite;
}
@keyframes scrollleft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.onlinebadge { color: var(--online-green); font-weight: bold; }
.onlinedot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--online-green);
  margin-right: 4px;
  vertical-align: middle;
}
.metaline { margin: 3px 0; }

/* ===== LAYOUT TABLE ===== */
#maincontent { padding: 10px; }
.layout { width: 100%; border-collapse: collapse; }
.layout > tbody > tr > td { vertical-align: top; }
td.leftcol { width: 260px; padding-right: 10px; }
td.rightcol { padding-left: 0; }

/* ===== MODULE BOX (classic beveled table look, blue header - constant) ===== */
.module { margin-bottom: 10px; border: 1px solid var(--module-border); }
.module .modtitle {
  background: var(--brand-navy-deep);
  background-image: linear-gradient(var(--brand-blue-light), var(--brand-navy-deep));
  color: #ffffff;
  font-weight: bold;
  font-size: 12px;
  padding: 4px 7px;
}
/* Orange header variant, used only for "About" - constant both themes */
.module .modtitle.orange {
  background: var(--brand-orange-deep);
  background-image: linear-gradient(var(--brand-orange), var(--brand-orange-deep));
}
.module .modbody { padding: 7px; background: var(--modbody-bg); color: var(--text-color); }
.module .modbody.white { background: var(--modbody-white-bg); }

.placeholderbox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--placeholder-border);
  background: var(--placeholder-bg);
  color: var(--placeholder-text);
  font-size: 11px;
  font-style: italic;
}
.picframe { text-align: center; }

table.infotable { width: 100%; border-collapse: collapse; font-size: 11px; }
table.infotable td { padding: 3px 4px; vertical-align: top; }
table.infotable td.label { font-weight: bold; color: var(--label-color); width: 90px; }
table.infotable tr:nth-child(odd) td { background: var(--placeholder-bg); }

.urlbox {
  border: 1px solid var(--module-border);
  background: var(--url-box-bg);
  padding: 6px 8px;
  margin-bottom: 10px;
  font-size: 11px;
}
.urlbox .urlbox-label { font-weight: bold; color: var(--label-color); display: block; margin-bottom: 2px; }

/* Contacting module - 2 col icon grid */
table.contactgrid { width: 100%; border-collapse: collapse; }
table.contactgrid td { padding: 4px 3px; font-size: 11px; vertical-align: middle; width: 50%; }
.contacticon {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  vertical-align: middle;
}

.stat-row td { padding: 1px 4px; font-size: 11px; border-bottom: 1px dotted var(--dotted-border); }
.stat-row td.k { font-weight: bold; color: var(--label-color); }
.stat-row td.v { text-align: right; }

/* ===== Twitch embed (replaces the music-player widget) ===== */
.twitch-wrap {
  border: 1px solid var(--module-border);
  background: #000000;
}
.twitch-wrap iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: none;
}
.twitch-caption {
  padding: 6px 8px;
  background: var(--modbody-white-bg);
  font-size: 11px;
  color: var(--text-color);
  border-top: 1px solid var(--module-border);
}

/* Friend grid */
.friendgrid { width: 100%; border-collapse: collapse; }
.friendgrid td {
  width: 25%;
  text-align: center;
  padding: 6px;
  font-size: 10px;
  vertical-align: top;
}
.friendthumb {
  width: 90px;
  height: 90px;
  margin: 0 auto 3px;
}
.friendname { color: var(--link-color); font-weight: bold; }
.friendname.plain { color: var(--text-color); font-weight: bold; }

/* Comments */
.comment { border-bottom: 1px solid var(--comment-border); padding: 8px 4px; }
.comment:last-child { border-bottom: none; }
.commentpic {
  width: 60px; height: 60px;
  float: left; margin-right: 8px;
}
.commentmeta { font-size: 10px; color: var(--meta-text); }
.commentname { color: var(--link-color); font-weight: bold; }
.clear { clear: both; }

/* Plain blog block (no boxed header, matches reference) */
.blogblock { padding: 4px 2px 12px; }
.blogblock .blogtitle { font-weight: bold; font-size: 12px; }
.blogblock .blogmeta { color: var(--meta-text); font-size: 10px; margin: 2px 0 4px; }

/* Pics / videos grid pages */
.mediagrid { width: 100%; border-collapse: collapse; }
.mediagrid td {
  width: 33.33%;
  text-align: center;
  padding: 8px;
  vertical-align: top;
}
.mediathumb { width: 100%; height: 140px; }

#footer {
  background: var(--brand-navy-deep);
  color: #b9c8ef;
  text-align: center;
  font-size: 10px;
  padding: 8px;
}
#footer a { color: #ffffff; }
#footer .disclaimer {
  max-width: 640px;
  margin: 8px auto 0;
  padding-top: 8px;
  border-top: 1px solid #2c4d8a;
  font-size: 9px;
  line-height: 1.5;
  color: #93a5cf;
  text-align: center;
}

hr.sep { border: none; border-top: 1px dashed var(--sep-border); margin: 6px 0; }