/* --- Global Styles & Variables (Dark Theme Default) --- */
:root {
  --bg-color: #1e1e24;
  --primary-surface: #2a2a33;
  --secondary-surface: #383844;
  --tertiary-surface: #4a4a58;
  --text-color: #e8e8e8;
  --text-muted-color: #a0a0a8;
  --accent-color: #5a67d8;
  --accent-hover: #4c51bf;
  --highlight-color: #f6e05e;
  --record-color: #e53e3e;
  --record-active-bg: #c53030;
  --mute-color: #718096;
  --mute-active-bg: #4a5568;
  --handle-color: #a0aec0;
  --border-color: #404048;
  --track-bg: #2f2f37;
  --track-header-bg: #25252d;
  --timeline-grid-color: rgba(255, 255, 255, 0.06);
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --transition-speed-fast: 0.15s;
  --transition-speed-med: 0.25s;
  --shadow-sm: 0 2px 4px rgba(0,0,0, 0.15);
  --shadow-md: 0 5px 10px rgba(0,0,0, 0.2);
}

/* --- General Styles --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 14px;
}

/* ---
--- PAGE LAYOUT STYLES
--- */

/* Style for Homepage Content (Links Box) */
.homepage-content {
  background-color: var(--primary-surface);
  padding: 20px;
  box-sizing: border-box;
  margin-top: 10px;
  width: 98vw;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

/* Nav Grid Styles */
.nav-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 10px;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-item {
  flex-basis: 75px;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.nav-item img {
  display: block;
  max-width: 100%;
  height: 65px;
  margin: 0 auto;
}
.nav-item a { display: block; transition: transform 0.2s ease; }
.nav-item a:hover { transform: scale(1.1); }

/* Ad Area */
.ad-content-area {
  text-align: center;
  background-color: var(--primary-surface);
  padding: 20px 30px;
  box-sizing: border-box;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 98vw;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

/* Text Content Area */
.text-content-area {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  background-color: var(--primary-surface);
  padding: 20px 30px;
  box-sizing: border-box;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 98vw;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}
.text-column {
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.text-content-area .instagram-media {
  flex-shrink: 0;
  margin: 0 !important;
}
.text-column h2 {
  text-align: left;
  margin-bottom: 20px;
  color: var(--accent-color);
  font-size: 1.5em;
}
.text-column h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--text-muted-color);
  font-size: 1.2em;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 5px;
}
.text-column p,
.text-column ul {
  line-height: 1.6;
  margin-bottom: 15px;
  text-align: left;
}
.text-column ul {
  list-style: disc;
  margin-left: 20px;
}
.text-column li {
  margin-bottom: 8px;
}
.text-content-area > h2 {
    text-align: center;
}

/* Comments Section */
.comments-section {
  background-color: var(--primary-surface);
  padding: 20px;
  box-sizing: border-box;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 98vw;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}
.comments-section iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

/* ---
--- BODY THEME DEFINITIONS
--- */

/* Light Theme */
body.theme-light {
  --bg-color: #f0f0f0;
  --primary-surface: #ffffff;
  --secondary-surface: #e0e0e0;
  --tertiary-surface: #d0d0d0;
  --text-color: #1e1e24;
  --text-muted-color: #555;
  --border-color: #ccc;
  --track-bg: #f5f5f5;
  --track-header-bg: #e0e0e0;
  --timeline-grid-color: rgba(0, 0, 0, 0.08);
}

/* Forest Theme */
body.theme-forest {
  --bg-color: #2f3e2f;
  --primary-surface: #3e4d3e;
  --secondary-surface: #4b5a4b;
  --tertiary-surface: #5c6e5c;
  --text-color: #d8e8d8;
  --text-muted-color: #a0b0a0;
  --accent-color: #68d391;
  --accent-hover: #48bb78;
  --handle-color: #b0c0b0;
  --border-color: #5c6e5c;
  --track-bg: #384638;
  --track-header-bg: #2a382a;
  --timeline-grid-color: rgba(200, 220, 200, 0.07);
}

/* Ocean Theme */
body.theme-ocean {
  --bg-color: #2a3a4a;
  --primary-surface: #3a4a5a;
  --secondary-surface: #4a5a6a;
  --tertiary-surface: #5a6a7a;
  --text-color: #cce8ff;
  --text-muted-color: #90a0b0;
  --accent-color: #63b3ed;
  --accent-hover: #4299e1;
  --record-color: #fc8181;
  --record-active-bg: #f56565;
  --handle-color: #b0c0d0;
  --border-color: #5a6a7a;
  --track-bg: #324252;
  --track-header-bg: #253545;
  --timeline-grid-color: rgba(180, 210, 230, 0.08);
}

/* Sunset Theme */
body.theme-sunset {
  --bg-color: #4a2a2a;
  --primary-surface: #5a3a3a;
  --secondary-surface: #6a4a4a;
  --tertiary-surface: #7a5a5a;
  --text-color: #fed7d7;
  --text-muted-color: #b09090;
  --accent-color: #f56565;
  --accent-hover: #e53e3e;
  --highlight-color: #f6ad55;
  --record-color: #fbd38d;
  --record-active-bg: #f6ad55;
  --handle-color: #c0b0b0;
  --border-color: #7a5a5a;
  --track-bg: #523232;
  --track-header-bg: #452525;
  --timeline-grid-color: rgba(240, 200, 200, 0.07);
}

/* Matrix Theme */
body.theme-matrix {
  --bg-color: #0d0d0d;
  --primary-surface: #1a1a1a;
  --secondary-surface: #2a2a2a;
  --tertiary-surface: #3a3a3a;
  --text-color: #39ff14;
  --text-muted-color: #2aaa0e;
  --accent-color: #39ff14;
  --accent-hover: #2aaa0e;
  --highlight-color: #bfffac;
  --record-color: #f87171;
  --record-active-bg: #dc2626;
  --handle-color: #2aaa0e;
  --border-color: #3a3a3a;
  --track-bg: #111111;
  --track-header-bg: #080808;
  --timeline-grid-color: rgba(57, 255, 20, 0.1);
}

/* Grayscale Theme */
body.theme-grayscale {
  --bg-color: #e0e0e0;
  --primary-surface: #f0f0f0;
  --secondary-surface: #d0d0d0;
  --tertiary-surface: #b0b0b0;
  --text-color: #1a1a1a;
  --text-muted-color: #555555;
  --accent-color: #666666;
  --accent-hover: #444444;
  --highlight-color: #333333;
  --record-color: #aa0000;
  --record-active-bg: #880000;
  --handle-color: #777777;
  --border-color: #b0b0b0;
  --track-bg: #e8e8e8;
  --track-header-bg: #d8d8d8;
  --timeline-grid-color: rgba(0, 0, 0, 0.08);
}

/* Dark Theme (Default) */
body.dark-theme {
  --bg-color: #1e1e24;
  --primary-surface: #2a2a33;
  --secondary-surface: #383844;
  --tertiary-surface: #4a4a58;
  --text-color: #e8e8e8;
  --text-muted-color: #a0a0a8;
  --accent-color: #5a67d8;
  --accent-hover: #4c51bf;
  --highlight-color: #f6e05e;
  --border-color: #404048;
  --track-bg: #2f2f37;
  --track-header-bg: #25252d;
  --timeline-grid-color: rgba(255, 255, 255, 0.06);
}

/* Blue Theme */
body.blue-theme {
  --bg-color: #0d1b2a;
  --primary-surface: #1b263b;
  --secondary-surface: #415a77;
  --tertiary-surface: #778da9;
  --text-color: #e0e1dd;
  --text-muted-color: #a9b2c3;
  --accent-color: #e0aaff;
  --accent-hover: #d18bff;
  --highlight-color: #66fcf1;
  --record-color: #c5c6c7;
  --record-active-bg: #d1d2d3;
  --handle-color: #99d1d1;
  --border-color: #1c2833;
  --track-bg: #1c2833;
  --track-header-bg: #0b1120;
  --timeline-grid-color: rgba(255, 255, 255, 0.1);
}

/* High Contrast Theme */
body.high-contrast-theme {
  --bg-color: #000;
  --primary-surface: #222;
  --secondary-surface: #444;
  --tertiary-surface: #666;
  --text-color: #fff;
  --text-muted-color: #ccc;
  --accent-color: #ff0;
  --accent-hover: #cc0;
  --highlight-color: #0f0;
  --record-color: #f00;
  --record-active-bg: #c00;
  --handle-color: #fff;
  --border-color: #fff;
  --track-bg: #333;
  --track-header-bg: #000;
  --timeline-grid-color: rgba(255, 255, 255, 0.2);
}

/* Quantum Fizz Theme */
body.theme-quantum-fizz {
  --bg-color: #1a1a3a;
  --primary-surface: #2a2a4a;
  --secondary-surface: #3a3a5a;
  --tertiary-surface: #4a4a6a;
  --text-color: #e0ffff;
  --text-muted-color: #a0c0c0;
  --accent-color: #39ff14;
  --highlight-color: #00f2ff;
  --record-color: #ff6b6b;
  --record-active-bg: #ee3b3b;
  --handle-color: #a0c0c0;
  --border-color: #4a4a6a;
  --track-bg: #222240;
  --track-header-bg: #151530;
  --timeline-grid-color: rgba(57, 255, 20, 0.08);
}

/* Sunrise Burst Theme */
body.theme-sunrise-burst {
  --bg-color: #6f4e37;
  --primary-surface: #8b5a2b;
  --secondary-surface: #a0522d;
  --tertiary-surface: #b86b3d;
  --text-color: #fff8dc;
  --text-muted-color: #d2b48c;
  --accent-color: #ff7f00;
  --accent-hover: #e66a00;
  --highlight-color: #ffdd00;
  --handle-color: #d2b48c;
  --border-color: #b86b3d;
  --track-bg: #805025;
  --track-header-bg: #654321;
  --timeline-grid-color: rgba(255, 248, 220, 0.09);
}

/* Arctic Chill Theme */
body.theme-arctic-chill {
  --bg-color: #e0f2f7;
  --primary-surface: #ffffff;
  --secondary-surface: #f0f8ff;
  --tertiary-surface: #d6eaf8;
  --text-color: #2a3a4a;
  --text-muted-color: #5a6a7a;
  --accent-color: #87ceeb;
  --accent-hover: #64b5f6;
  --highlight-color: #add8e6;
  --record-color: #ff6b6b;
  --record-active-bg: #f55c5c;
  --handle-color: #a0c4d8;
  --border-color: #c0d0e0;
  --track-bg: #f5fcff;
  --track-header-bg: #e8f5fa;
  --timeline-grid-color: rgba(42, 58, 74, 0.08);
}

/* Nebula Pop Theme */
body.theme-nebula-pop {
  --bg-color: #301934;
  --primary-surface: #482850;
  --secondary-surface: #5d3a6b;
  --tertiary-surface: #724c86;
  --text-color: #e6e6fa;
  --text-muted-color: #b0a0c0;
  --accent-color: #ff00ff;
  --accent-hover: #cc00cc;
  --highlight-color: #7fffd4;
  --record-color: #ff69b4;
  --record-active-bg: #ff1493;
  --handle-color: #c0b0d0;
  --border-color: #724c86;
  --track-bg: #402048;
  --track-header-bg: #301934;
  --timeline-grid-color: rgba(230, 230, 250, 0.08);
}