/* ===== VARIABLES ===== */
:root {
  --xp-blue-dark: #0a246a;
  --xp-blue: #245edb;
  --xp-blue-light: #3f83ff;
  --xp-sky: #dcecff;
  --xp-panel: #ece9d8;
  --xp-panel-2: #f7f4e9;
  --xp-border: #9db6cf;
  --xp-border-strong: #2b57b7;
  --xp-text: #1e1e1e;
  --xp-link: #153f7d;
  --xp-green-bg: #e2f4dc;
  --xp-green-border: #9cc08d;
  --xp-green-text: #2a6227;
  --geo-yellow: #fff4bd;
  --geo-yellow-border: #cc9a3b;
  --geo-yellow-text: #8a5200;
  --content-width: 1360px;
  --font-ui: Tahoma, Verdana, Arial, sans-serif;
}

/* ===== RESET ===== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--xp-text);
  background: linear-gradient(180deg, #88bdf7 0%, #dcecff 230px, #eef4fb 100%);
  line-height: 1.55;
}

a {
  color: var(--xp-link);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* ===== SKIP LINK ===== */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 999;
  padding: 8px 16px;
  background: var(--xp-blue);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* ===== PAGE / WINDOW ===== */
.page {
  max-width: var(--content-width);
  margin: 14px auto;
  padding: 0 12px 24px;
}

.window {
  border: 1px solid var(--xp-border-strong);
  border-radius: 14px;
  background: var(--xp-panel);
  overflow: hidden;
  box-shadow: 0 0 0 2px #6ba4ff, 0 18px 40px rgba(0,0,0,0.18);
}

/* ===== TITLEBAR ===== */
.titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  color: #fff;
  background: linear-gradient(180deg, var(--xp-blue-light) 0%, var(--xp-blue) 55%, var(--xp-blue-dark) 100%);
}

.titlebar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.logo-img {
  height: 28px;
  width: auto;
  display: block;
  flex: 0 0 auto;
  color: #1f1f1f;
  font-size: 13px;
}

.title {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.controls {
  display: flex;
  gap: 6px;
}

.control {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.7);
  background: linear-gradient(180deg, #ffffff, #c8dbff);
}

/* ===== META ROW ===== */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #bfd0e9;
  background: linear-gradient(180deg, #fbfbfb, #ece9d8);
  font-size: 14px;
}

.meta-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #444;
}

.dot-sep { color: #7b7b7b; }

.status-pill,
.hero-pill,
.story-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-weight: 700;
}

.status-pill,
.hero-pill {
  background: var(--xp-green-bg);
  color: var(--xp-green-text);
  border: 1px solid var(--xp-green-border);
  padding: 3px 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid #7f9db9;
  background: linear-gradient(180deg, #fff, #eef3fb);
  font-weight: 700;
  color: #123c7a;
}

.lang-btn.active {
  background: linear-gradient(180deg, #fff, #dbe9fb);
  box-shadow: inset 0 1px 0 #fff;
}

/* ===== HERO ===== */
.hero {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 18px;
  padding: 22px 16px;
  border-bottom: 1px solid #d1d8e4;
  background: linear-gradient(180deg, #fdfdfd, #f1efe3);
}

.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08;
  color: #123c7a;
}

.hero p {
  max-width: 60ch;
  margin: 14px 0 0;
  color: #3b3b3b;
  font-size: 16px;
}

/* ===== BUDDY BOX ===== */
.buddy-box,
.panel,
.module,
.card,
.geo-box {
  border: 1px solid var(--xp-border);
  border-radius: 12px;
  background: linear-gradient(180deg, #fffefa, #efecdf);
  box-shadow: inset 0 1px 0 #fff;
}

.buddy-box {
  background: linear-gradient(180deg, #ffffff, #e8f1ff);
  padding: 14px;
}

.buddy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #c2d4ec;
  border-radius: 10px;
  background: #f7fbff;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.buddy-header strong {
  display: block;
  color: #0f3a78;
  font-size: 14px;
}

.buddy-header span {
  display: block;
  font-size: 12px;
  color: #666;
}

.buddy-count {
  border-radius: 999px;
  border: 1px solid #a3c590;
  background: #e4f3de;
  padding: 3px 8px;
  color: #2a6127;
  font-size: 12px;
  font-weight: 700;
}

.buddy-list {
  display: grid;
  gap: 8px;
}

.buddy-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #cfdbeb;
  border-radius: 8px;
  background: #fff;
  padding: 9px 12px;
  font-size: 14px;
}

.buddy-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.online-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #39a935;
  flex: 0 0 auto;
}

.buddy-name {
  font-weight: 700;
  color: #1e3f74;
}

.buddy-state {
  font-size: 12px;
  color: #777;
  white-space: nowrap;
}

/* ===== NAV ROW ===== */
.nav-row {
  padding: 12px 16px;
  border-bottom: 1px solid #c7d5e4;
  background: linear-gradient(180deg, #fcfcfc, #e6eef9);
}

.nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #7f9db9;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff, #dbe8f9);
  box-shadow: inset 0 1px 0 #fff;
  font-size: 14px;
  font-weight: 700;
  color: #123c7a;
}

.nav-link.active {
  border-color: #b29434;
  background: linear-gradient(180deg, #fff9dc, #ffe39c);
  color: #5a3900;
}

.nav-link:hover {
  text-decoration: none;
  background: linear-gradient(180deg, #fff9dd, #ffe39f);
  color: #573600;
}

/* ===== SEARCH BOX ===== */
.search-box {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}

.search-box input {
  flex: 1;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #7f9db9;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

.search-box button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #7f9db9;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #d9e8fb);
  font: inherit;
  font-weight: 700;
  color: #123c7a;
  cursor: pointer;
}

.search-box button:hover {
  background: linear-gradient(180deg, #fff9dd, #ffe39f);
  color: #573600;
}

/* ===== CONTENT GRID ===== */
.content {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 220px;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(180deg, #f6f4ea, #ece9d8);
}

.stack { display: grid; gap: 16px; }

/* ===== PANELS ===== */
.panel-header {
  padding: 10px 12px;
  border-bottom: 1px solid #b9cbe0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #fdfefe, #d9e8fb);
  color: #103d7e;
  font-size: 14px;
  font-weight: 700;
}

.panel-body {
  padding: 12px;
}

/* ===== QUICK LINKS / PORTAL MODULES ===== */
.quick-links,
.portal-modules {
  display: grid;
  gap: 8px;
}

.quick-links a {
  display: block;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1d4583;
}

.quick-links a:hover {
  border-color: #c8d7ea;
  background: #fff;
  text-decoration: none;
}

/* ===== BADGES ===== */
.new-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 8px;
  border: 1px solid var(--geo-yellow-border);
  border-radius: 6px;
  background: var(--geo-yellow);
  color: var(--geo-yellow-text);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* ===== COUNTER ===== */
.counter-box {
  border: 1px dashed #b9bfd0;
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  text-align: center;
}

.counter-box small {
  display: block;
  margin-bottom: 8px;
  color: #6a6a6a;
  font-size: 12px;
  font-weight: 700;
}

.counter {
  display: inline-flex;
  gap: 4px;
  font-family: "Courier New", monospace;
  font-weight: 700;
}

.counter span {
  min-width: 20px;
  padding: 2px 4px;
  border: 1px solid #666;
  border-radius: 4px;
  background: #111;
  color: #6aff6a;
  text-align: center;
}

/* ===== MAIN STACK ===== */
.main-stack {
  display: grid;
  gap: 16px;
}

/* ===== STORY GRID ===== */
.story-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
}

.story-card,
.hero-visual,
.card {
  padding: 14px;
}

.story-pill {
  padding: 4px 10px;
  border: 1px solid var(--xp-green-border);
  background: var(--xp-green-bg);
  color: var(--xp-green-text);
  font-size: 12px;
  margin-bottom: 10px;
}

.story-card h2 {
  margin: 0;
  color: #143d7b;
  font-size: 2rem;
  line-height: 1.15;
}

.story-card p {
  margin: 14px 0 0;
  color: #3f3f3f;
  font-size: 15px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.tag {
  padding: 5px 10px;
  border: 1px solid #c9d5e5;
  border-radius: 999px;
  background: #fff;
  color: #5a5a5a;
  font-size: 12px;
  font-weight: 700;
}

.hero-visual {
  display: grid;
  place-items: center;
  min-height: 240px;
  border: 1px solid #98b5d6;
  border-radius: 12px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.35) 0 10px, rgba(255,255,255,0.12) 10px 20px),
    linear-gradient(180deg, #e9f2ff, #cbddff);
  text-align: center;
  color: #1b4a8a;
  font-weight: 700;
}

.hero-visual div {
  max-width: 28ch;
}

/* ===== CARDS GRID ===== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.card small {
  display: block;
  margin-bottom: 8px;
  color: #6b6b6b;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card h3 {
  margin: 0;
  color: #153f7d;
  font-size: 1.1rem;
  line-height: 1.35;
}

.card p {
  margin: 10px 0 0;
  color: #424242;
  font-size: 14px;
}

.readmore {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #0f4a9c;
}

/* ===== MODULE CARDS ===== */
.module-card {
  border: 1px solid #d5dfed;
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}

.module-card small {
  display: block;
  color: #6a6a6a;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.module-card strong {
  color: #204786;
  font-size: 14px;
}

/* ===== GEO BOX ===== */
.geo-box {
  border-color: #d3a859;
  background: linear-gradient(180deg, #fff6cf, #ffe7a5);
  color: #5b430e;
}

.geo-box .panel-header {
  background: transparent;
  border-bottom-color: #e1c37a;
  color: #7c4d00;
}

/* ===== FOOTER ===== */
.site-footer {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 20px 16px;
  text-align: center;
  font-size: 13px;
  color: #5a6a80;
}

.footer-inner {
  display: grid;
  gap: 12px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.footer-links a {
  color: #3a5a8a;
}

.footer-retro {
  font-style: italic;
  color: #7a8a9a;
  font-size: 12px;
}

.site-footer .counter-box {
  display: inline-block;
  margin: 0 auto;
  padding: 8px 16px;
}

/* ===== BREADCRUMB ===== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 16px;
  font-size: 13px;
  color: #666;
  background: linear-gradient(180deg, #f6f4ea, #ece9d8);
  border-bottom: 1px solid #d1d8e4;
}

.breadcrumb a {
  color: var(--xp-link);
}

.breadcrumb .sep {
  color: #999;
}

.breadcrumb .current {
  color: var(--xp-text);
  font-weight: 700;
}

/* ===== ARTICLE PAGE ===== */
.article-header {
  padding: 24px 16px 16px;
  background: linear-gradient(180deg, #fdfdfd, #f1efe3);
  border-bottom: 1px solid #d1d8e4;
}

.article-header h1 {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.12;
  color: #123c7a;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 13px;
  color: #666;
}

.article-body {
  max-width: 820px;
  padding: 24px 16px 32px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
  color: var(--xp-text);
}

.article-body h2 {
  margin: 36px 0 14px;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #123c7a;
  border-bottom: 2px solid var(--xp-sky);
  padding-bottom: 6px;
}

.article-body h3 {
  margin: 28px 0 10px;
  font-size: 1.2rem;
  line-height: 1.25;
  color: #1b4a8a;
}

.article-body p {
  margin: 0 0 16px;
}

.article-body ul,
.article-body ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.article-body li {
  margin-bottom: 6px;
}

.article-body blockquote {
  margin: 20px 0;
  padding: 14px 18px;
  border-left: 4px solid var(--xp-blue);
  background: var(--xp-sky);
  border-radius: 0 8px 8px 0;
  color: #1a3f6f;
  font-style: italic;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}

.article-body th,
.article-body td {
  padding: 10px 12px;
  border: 1px solid var(--xp-border);
  text-align: left;
}

.article-body th {
  background: linear-gradient(180deg, #fdfefe, #d9e8fb);
  color: #103d7e;
  font-weight: 700;
}

.article-body td {
  background: #fff;
}

.article-body tr:nth-child(even) td {
  background: #f6f9fd;
}

.article-body img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--xp-border);
  border-radius: 8px;
  cursor: pointer;
}

.article-body figure {
  margin: 20px 0;
}

.article-body figcaption {
  margin-top: 6px;
  font-size: 13px;
  color: #666;
  text-align: center;
}

/* ===== RELATED ARTICLES ===== */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 16px;
}

.related-grid .card {
  padding: 14px;
}

.related-heading {
  padding: 12px 16px 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #103d7e;
}

/* ===== YOUTUBE 2-CLICK EMBED ===== */
.yt-embed {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  margin: 20px auto;
  border: 1px solid var(--xp-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}

.yt-embed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  border-radius: 0;
}

.yt-embed .yt-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.35);
}

.yt-embed .yt-play::after {
  content: "";
  width: 68px;
  height: 48px;
  background: #c00;
  border-radius: 12px;
  clip-path: polygon(38% 25%, 38% 75%, 72% 50%);
}

.yt-embed .yt-notice {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 12px;
  text-align: center;
}

/* ===== BANNER PLACEHOLDER ===== */
.banner-468 {
  width: 468px;
  height: 60px;
  max-width: 100%;
  margin: 20px auto;
  border: 2px dashed #b9bfd0;
  border-radius: 4px;
  background: #f8f6f0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-family: "Courier New", monospace;
  color: #999;
  text-align: center;
}

/* ===== UNDER CONSTRUCTION ===== */
.under-construction {
  padding: 18px;
  margin: 20px 0;
  border: 2px dashed var(--geo-yellow-border);
  border-radius: 12px;
  background: var(--geo-yellow);
  color: var(--geo-yellow-text);
  text-align: center;
  font-weight: 700;
  font-size: 15px;
}

.under-construction::before {
  content: "🚧 ";
}

.under-construction::after {
  content: " 🚧";
}

/* ===== XP EXPLORER LIGHTBOX ===== */
.article-body img { cursor: pointer; }

.xp-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 200;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.xp-lightbox.open { display: flex; }

.xp-lb-window {
  background: var(--xp-panel);
  border: 2px solid #0054e3;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.4);
  max-width: 94vw;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  cursor: default;
  animation: xpLbOpen 0.2s ease-out;
}

@keyframes xpLbOpen {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.xp-lb-titlebar {
  background: linear-gradient(180deg, #0a6af6 0%, #0555d3 8%, #0347b3 20%, #0246b0 50%, #0554d2 80%, #0969f5 100%);
  padding: 3px 4px 3px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px 6px 0 0;
  min-height: 26px;
}

.xp-lb-titlebar-text {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: Tahoma, sans-serif;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}

.xp-lb-btns {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.xp-lb-btn {
  width: 21px;
  height: 21px;
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: Marlett, Tahoma, sans-serif;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #3c8cf8 0%, #1b6ef5 45%, #0b55d3 55%, #1566e8 100%);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.xp-lb-btn:hover {
  background: linear-gradient(180deg, #5ca0ff 0%, #3584f7 45%, #1b6ae5 55%, #3584f7 100%);
}

.xp-lb-btn-close {
  background: linear-gradient(180deg, #c47050 0%, #b5432b 45%, #a1301c 55%, #b94c30 100%);
}

.xp-lb-btn-close:hover {
  background: linear-gradient(180deg, #da8a6e 0%, #cc5e42 45%, #b9442c 55%, #cc5e42 100%);
}

.xp-lb-menubar {
  background: var(--xp-panel);
  padding: 1px 4px;
  font-size: 11px;
  font-family: Tahoma, sans-serif;
  color: #000;
  border-bottom: 1px solid #aaa;
  display: flex;
  gap: 2px;
}

.xp-lb-menubar span {
  padding: 2px 6px;
  border-radius: 2px;
}

.xp-lb-menubar span:first-child {
  text-decoration: underline;
}

.xp-lb-toolbar {
  background: linear-gradient(180deg, #f2f0eb 0%, var(--xp-panel) 100%);
  padding: 2px 6px;
  font-size: 11px;
  font-family: Tahoma, sans-serif;
  color: #666;
  border-bottom: 1px solid #aaa;
  display: flex;
  align-items: center;
  gap: 8px;
}

.xp-lb-toolbar span {
  display: flex;
  align-items: center;
  gap: 2px;
}

.xp-lb-addressbar {
  background: #fff;
  margin: 2px 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-family: Tahoma, sans-serif;
  color: #000;
  border: 1px solid #7f9db9;
  border-radius: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xp-lb-addressbar-label {
  color: #000;
  font-weight: 400;
  flex-shrink: 0;
}

.xp-lb-addressbar-url {
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xp-lb-content {
  background: #fff;
  margin: 0 4px 4px;
  border: 1px solid #7f9db9;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.xp-lb-content img {
  max-width: 88vw;
  max-height: 72vh;
  display: block;
}

.xp-lb-statusbar {
  background: var(--xp-panel);
  padding: 2px 8px;
  font-size: 10px;
  font-family: Tahoma, sans-serif;
  color: #444;
  border-top: 1px solid #aaa;
  display: flex;
  justify-content: space-between;
}

/* ===== GEOCITIES EASTER EGG ===== */
body.geocities-mode {
  background: #000 !important;
  color: #ff69b4 !important;
  font-family: "Comic Sans MS", "Comic Sans", cursive !important;
}

body.geocities-mode .window {
  border-color: #ff00ff !important;
  box-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffff !important;
  background: #111 !important;
}

body.geocities-mode .titlebar {
  background: linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #00ff00, #0000ff, #9900ff) !important;
}

body.geocities-mode a {
  color: #00ffff !important;
}

body.geocities-mode .meta-row,
body.geocities-mode .nav-row,
body.geocities-mode .content {
  background: #111 !important;
  border-color: #333 !important;
}

body.geocities-mode .panel,
body.geocities-mode .card,
body.geocities-mode .buddy-box {
  background: #1a1a1a !important;
  border-color: #ff00ff !important;
  color: #ff69b4 !important;
}

body.geocities-mode .nav-link {
  background: #222 !important;
  border-color: #ff00ff !important;
  color: #00ffff !important;
}

body.geocities-mode .counter span {
  background: #000 !important;
  color: #00ff00 !important;
  border-color: #00ff00 !important;
}

body.geocities-mode .site-footer {
  color: #ff69b4 !important;
}

body.geocities-mode h1,
body.geocities-mode h2,
body.geocities-mode h3 {
  color: #ffff00 !important;
}

body.geocities-mode .status-pill,
body.geocities-mode .hero-pill {
  background: #ff00ff !important;
  color: #fff !important;
  border-color: #ff69b4 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .hero,
  .story-grid,
  .content {
    grid-template-columns: 1fr;
  }

  .content {
    grid-template-areas:
      "main"
      "left"
      "right";
  }

  .left-col { grid-area: left; }
  .main-col { grid-area: main; }
  .right-col { grid-area: right; }
}

@media (max-width: 760px) {
  .page {
    padding: 0 4px 12px;
    margin: 4px auto;
  }

  .window {
    border-radius: 8px;
    box-shadow: 0 0 0 1px #6ba4ff, 0 8px 20px rgba(0,0,0,.15);
  }

  .titlebar {
    padding: 8px 10px;
    gap: 8px;
  }

  .logo-img { height: 22px; }

  .title {
    font-size: 13px;
    white-space: normal;
    line-height: 1.2;
  }

  .controls { display: none; }

  .meta-row {
    padding: 8px 10px;
    font-size: 12px;
    gap: 8px;
  }

  .lang-switch { gap: 4px; }
  .lang-btn { padding: 4px 8px; font-size: 12px; min-width: 36px; }

  .hero {
    grid-template-columns: 1fr;
    padding: 16px 10px;
    gap: 14px;
  }

  .hero h1 { font-size: 1.5rem; }
  .hero p { font-size: 14px; }

  .buddy-box { padding: 10px; }
  .buddy-header { padding: 8px 10px; }
  .buddy-item { padding: 7px 10px; font-size: 13px; }

  .nav-row { padding: 10px; }
  .nav-inner { gap: 8px; }

  .nav-links {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .nav-link {
    width: 100%;
    justify-content: center;
    padding: 8px 6px;
    font-size: 12px;
    min-height: 36px;
  }

  .search-box {
    width: 100%;
    max-width: none;
  }

  .content {
    padding: 10px;
    gap: 12px;
  }

  .story-grid { grid-template-columns: 1fr; gap: 12px; }
  .cards-grid { grid-template-columns: 1fr; gap: 12px; }

  .story-card h2 { font-size: 1.3rem; }
  .hero-visual { min-height: 160px; }

  .panel { border-radius: 8px; }
  .panel-header { padding: 8px 10px; font-size: 13px; }
  .panel-body { padding: 10px; }

  .quick-links a { padding: 6px 8px; font-size: 13px; }

  /* Article pages */
  .article-page { padding: 12px !important; }
  .article-header h1 { font-size: 1.4rem; }
  .article-body { font-size: 14px; }
  .article-body h2 { font-size: 1.15rem; }
  .article-body h3 { font-size: 1rem; }

  .breadcrumb { padding: 8px 10px; font-size: 11px; }

  .banner-468 { max-width: 100%; height: auto; min-height: 40px; font-size: 10px; }

  .related-section .cards-grid { grid-template-columns: 1fr; }

  .meta-keywords { font-size: 11px; padding: 10px; }

  /* Counter */
  .counter-box { padding: 8px; }

  /* Under construction */
  .under-construction { padding: 10px; }
  .uc-text { font-size: 12px; }

  /* Footer */
  .footer { padding: 12px 10px; font-size: 11px; }

  /* Lightbox */
  .xp-lb-menubar, .xp-lb-toolbar { display: none; }
  .xp-lb-content img { max-width: 96vw; max-height: 80vh; }
}

/* ===== PRINT ===== */
@media print {
  body {
    background: #fff;
    color: #000;
    padding: 0;
  }

  .page {
    margin: 0;
    padding: 0;
    max-width: none;
  }

  .window {
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  .titlebar,
  .meta-row,
  .nav-row,
  .controls,
  .skip-link,
  .site-footer .counter-box,
  .buddy-box,
  .left-col,
  .right-col,
  .banner-468,
  .xp-lightbox,
  .search-box,
  .lang-switch {
    display: none !important;
  }

  .content {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .article-body {
    font-size: 12pt;
    max-width: none;
    padding: 0;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #555;
  }

  nav a[href]::after,
  .footer-links a[href]::after {
    content: none;
  }
}

/* ===== META KEYWORDS ===== */
.meta-keywords {
  margin-top: 24px;
  padding: 12px 14px;
  border: 1px dashed var(--xp-border);
  border-radius: 8px;
  background: var(--xp-panel-2);
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}
.meta-keywords strong {
  color: var(--xp-blue-dark);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}