:root {
  --bg: #0b1320;
  --bg-2: #101b2a;
  --panel: #1c2a3d;
  --panel-dark: #111b28;
  --text: #f7f9fc;
  --muted: #a9b7c8;

  /* Customizable accent palette */
  --accent: #ff5f93;
  --accent-2: #b188ff;
  --accent-soft: #c7b3ff;
  --accent-deep: #6f478f;

  /* Backward-compatible aliases used throughout the site */
  --panel-blue: var(--accent-deep);
  --border: var(--accent-soft);
  --border-soft: var(--accent-deep);
  --link: var(--accent);
  --cyan: var(--accent);
  --purple: var(--accent-2);
  --win-blue: var(--accent-2);
  --win-blue-dark: var(--accent-deep);

  --cream: #ece9d8;
  --cream-2: #f7f4e8;
  --shadow: 0 18px 48px rgba(0,0,0,.48);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: linear-gradient(180deg, #09111c 0, #0b1421 100%);
  color: var(--text);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  line-height: 1.45;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--link); }
.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 9999;
  background: #fff;
  color: #000;
  padding: 8px 12px;
}
.skip-link:focus { top: 10px; }

/* ===== MAIN PORTFOLIO ===== */
.portal-header {
  min-height: 86px;
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) auto;
  gap: 30px;
  align-items: center;
  padding-block: 14px;
  padding-inline: max(18px, calc((100vw - 1460px) / 2 + 18px));
  background: #16243a;
  border-bottom: 1px solid #233753;
}
.portal-brand { display: flex; align-items: baseline; gap: 18px; white-space: nowrap; }
.portal-brand strong { font-size: clamp(25px, 2.1vw, 32px); letter-spacing: -.8px; color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--accent-2) 28%, transparent); }
.portal-brand span { font-weight: 700; color: color-mix(in srgb, var(--accent-soft) 78%, #fff); font-size: 13px; letter-spacing: .02em; }
.profile-search {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 780px;
  margin-inline: auto;
  width: 100%;
  padding: 0 14px;
  background: #18263a;
  border: 1px solid #45566c;
  border-radius: 11px;
}
.profile-search span { color: #c3d2e5; font-size: 26px; transform: rotate(-15deg); }
.profile-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 18px;
}
.profile-search input::placeholder { color: #8594aa; }
.portal-tools { display: flex; align-items: center; gap: 12px; }
.header-link, .theme-button, .sun-button {
  border: 0;
  color: #fff;
  background: transparent;
  min-height: 44px;
}
.header-link { font-weight: 700; font-size: 17px; }
.theme-button {
  padding: 0 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent-deep) 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 0 0 1px color-mix(in srgb, var(--accent-soft) 38%, transparent);
  font-weight: 700;
}
.sun-button {
  width: 44px;
  border-radius: 50%;
  background: #23334a;
  font-size: 20px;
}
.main-nav {
  min-height: 58px;
  padding-block: 0;
  padding-inline: max(18px, calc((100vw - 1460px) / 2 + 18px));
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 58px);
  background: #24344b;
  border-bottom: 1px solid #304766;
}
.main-nav a, .nav-button {
  color: #fff;
  text-decoration: none;
  border: 0;
  background: transparent;
  font-weight: 600;
  font-size: 16px;
  padding: 18px 0;
}
.main-nav a:hover, .nav-button:hover { color: var(--accent); }

.page-shell { max-width: 1460px; margin: 0 auto; padding: 12px 18px 34px; }
.profile-layout {
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.sidebar-column, .content-column { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.retro-panel {
  border: 2px solid var(--border);
  background: var(--panel);
  color: var(--text);
}
.panel-title {
  background: linear-gradient(90deg, var(--accent-deep) 0%, var(--accent) 100%);
  color: #fff;
  padding: 6px 10px;
  font: 700 17px Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
  border-bottom: 1px solid var(--accent-soft);
}
.panel-content { padding: 14px 16px; }
.profile-card { padding: 15px 16px 16px; }
.profile-heading h1 { margin: 0 0 4px; font-size: 22px; }
.profile-heading p { margin: 0 0 12px; }
.profile-summary-grid { display: grid; grid-template-columns: 104px 1fr; gap: 15px; align-items: start; }
.pixel-avatar-wrap, .mini-avatar {
  position: relative;
  overflow: hidden;
  background: #1b2939;
  border: 2px solid var(--border);
}
.pixel-avatar-wrap { width: 104px; height: 104px; }
.pixel-avatar, .mini-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
.pixel-avatar-fallback, .mini-avatar span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2a3c51, #17202c);
  color: #fff;
  font: 700 30px Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
}
.pixel-avatar { position: relative; z-index: 1; }
.profile-facts p { margin: 0 0 2px; font-size: 14px; }
.view-my { margin: 14px 0 0 119px; }
.text-button, .plain-url, .link-button {
  border: 0;
  padding: 0;
  background: none;
  color: var(--link);
  text-decoration: underline;
}
.contacting-panel { background: color-mix(in srgb, var(--accent-deep) 52%, #172334); }
.contact-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  padding: 14px 16px 16px;
}
.link-button { text-align: left; text-decoration: none; color: var(--accent-soft); }
.link-button:hover { text-decoration: underline; color: #fff; }
.portfolio-url-panel { padding: 14px 16px; }
.plain-url { display: block; margin-top: 7px; text-align: left; overflow-wrap: anywhere; }
.inline-status { min-height: 16px; color: #91efb8; font-size: 12px; }
.skills-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.skills-table th, .skills-table td { padding: 8px 9px; border-top: 1px solid #40536a; vertical-align: top; }
.skills-table th { width: 42%; text-align: left; color: #d2b6ff; font-family: Tahoma, Verdana, "Segoe UI", Arial, sans-serif; }
.network-banner { padding: 15px 20px; text-align: center; }
.network-banner h2 { margin: 0; font-size: 24px; }
.cert-home-list { padding: 6px 14px 14px; }
.cert-home-list > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.cert-home-list a { color: var(--accent); }
.professional-profile h3 { margin: 0 0 6px; font: 700 16px Tahoma, Verdana, "Segoe UI", Arial, sans-serif; }
.prose p { margin: 0 0 9px; font-size: 13px; }
.interest-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.interest-grid span {
  min-width: 112px;
  padding: 10px 14px;
  text-align: center;
  border-radius: 12px;
  background: #1b293b;
  border: 1px solid #42526a;
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.built-with-row { display: flex; flex-wrap: wrap; gap: 8px; }
.built-with-row span { padding: 6px 9px; border-radius: 8px; background: #152235; border: 1px solid #33465e; color: #b6c8dd; }
.wide-panel { margin-top: 10px; }
.section-intro { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.section-intro h2 { margin: 0 0 4px; font-family: Tahoma, Verdana, "Segoe UI", Arial, sans-serif; }
.section-intro p { margin: 0; color: var(--muted); }
.achievement { color: #ffe16f; font: 800 13px Tahoma, Verdana, "Segoe UI", Arial, sans-serif; }

.training-memory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.training-memory-card {
  display: grid;
  grid-template-rows: 150px auto auto;
  gap: 10px;
  padding: 10px;
  background: #111d2b;
  border: 1px solid #4276ae;
}
.training-photo-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #293c58, #172334);
  border: 1px solid #567da8;
  color: #dbe9f8;
}
.training-photo-placeholder span { font-size: 46px; }
.training-photo-placeholder small { color: #a7b9cc; }
.training-memory-copy h3 { margin: 0 0 3px; font-size: 15px; }
.training-memory-copy p { margin: 0 0 3px; color: #d8e3ef; }
.training-memory-copy small { color: #8fa8c0; }
.retro-button, .xp-button, .xp-primary, .legacy-button, .legacy-tool {
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--accent-deep);
  color: #111;
  background: linear-gradient(#fff, #e3dfcf);
  box-shadow: inset 1px 1px #fff, inset -1px -1px #aaa59a;
  text-decoration: none;
}
.xp-primary { color: #fff; font-weight: 700; background: linear-gradient(color-mix(in srgb, var(--accent-2) 72%, #fff), var(--accent-2) 45%, var(--accent-deep)); text-shadow: 1px 1px rgba(40,20,60,.55); border-color: var(--accent-deep); }
.project-list { border-top: 1px solid #35506b; }
.project-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: start; padding: 13px 8px; border-bottom: 1px solid #33465b; }
.project-row h3 { margin: 0 0 4px; font-size: 15px; }
.project-row p { margin: 0 0 3px; color: #d3deea; }
.project-row small { color: var(--accent-soft); }
.project-folder { font-size: 25px; }
.timeline article { display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid #33465b; }
.timeline time { color: var(--accent); font-weight: 700; }
.timeline h3 { margin: 0 0 4px; }
.timeline p { margin: 0; color: #c9d5e2; }
.certification-list > p { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; margin: 0; border-bottom: 1px solid #33465b; }
.certification-list span { color: var(--accent-soft); }
.stack-cloud { min-height: 210px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; padding: 24px; background: radial-gradient(circle, #342247, #0c1420 72%); }
.stack-cloud span { color: var(--accent); text-shadow: 0 0 9px color-mix(in srgb, var(--accent-2) 32%, transparent); font-weight: 800; }
.stack-cloud .xl { font-size: 34px; }.stack-cloud .lg { font-size: 27px; }.stack-cloud .md { font-size: 21px; }.stack-cloud .sm { font-size: 16px; }
.retro-footer { display: flex; justify-content: space-between; gap: 12px; padding: 16px 5vw; color: #8fa2b7; background: #07101a; border-top: 1px solid #23344b; font-size: 12px; }

/* ===== DIALOGS / WINDOWS ===== */
.win-dialog { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; }
.win-dialog::backdrop { background: rgba(2,8,16,.68); backdrop-filter: blur(1px); }
.dialog-window { width: min(690px, calc(100vw - 28px)); background: var(--cream); color: #111; border: 2px solid var(--accent-2); box-shadow: var(--shadow); }
.small-window { width: min(570px, calc(100vw - 28px)); }
.medium-window { width: min(760px, calc(100vw - 28px)); }
.training-window { width: min(850px, calc(100vw - 28px)); }
.resume-window { width: min(1180px, calc(100vw - 20px)); height: min(820px, calc(100vh - 30px)); display: flex; flex-direction: column; }
.win-titlebar, .legacy-ie-titlebar {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 5px 4px 10px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(color-mix(in srgb, var(--accent-2) 78%, #fff) 0%, var(--accent-2) 45%, var(--accent-deep) 100%);
  text-shadow: 1px 1px color-mix(in srgb, var(--accent-deep) 72%, #000);
}
.win-close {
  width:24px;
  height:24px;
  min-width:24px;
  flex:0 0 24px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.95);
  border-radius:1px;
  color:#fff;
  background:linear-gradient(#f07d72,#c7302b);
  box-shadow:inset 1px 1px rgba(255,255,255,.42),inset -1px -1px rgba(0,0,0,.36);
  font-family:Tahoma,Arial,sans-serif;
  font-size:17px;
  font-weight:700;
  line-height:1;
  text-shadow:1px 1px #7b1512;
}
.win-close:hover { filter: brightness(1.08); }
.dialog-padding { padding: 14px; }
.messenger-profile { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 10px; border-bottom: 1px solid #a29d8e; background: #f5f2e6; }
.compact-profile { border: 0; padding: 0 0 10px; background: transparent; }
.mini-avatar { width: 58px; height: 58px; }
.messenger-profile p { margin: 2px 0; }.messenger-profile small { display: block; }.online-text { color: #008500!important; font-size: 18px; }
.xp-form { padding: 10px; background: #d8d4cb; }
.xp-form label { display: block; font-weight: 700; margin-bottom: 10px; }.xp-form label span { font-weight: 400; color: #555; }
.xp-form input, .xp-form textarea { display: block; width: 100%; margin-top: 3px; border: 2px inset #fff; background: #fff; padding: 7px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }.footer-actions { padding: 12px; margin-top: 0; border-top: 1px solid #b6b0a0; background: var(--cream); }
.xp-statusbar, .legacy-statusbar { display: flex; justify-content: space-between; padding: 4px 8px; border-top: 1px solid #b6b0a0; background: #f1eedf; font-size: 12px; color: #111; }
.dialog-status { min-height: 18px; margin: 8px 0 0; color: var(--accent-deep); font-size: 12px; }.muted-italic { color: #666; font-style: italic; }
.subtoolbar, .resume-toolbar { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-bottom: 1px solid #aaa; background: #f1eedf; }
.appointment-table, .contact-table { width: 100%; border-collapse: collapse; background: #fff; }.appointment-table th,.appointment-table td,.contact-table th,.contact-table td { padding: 4px 8px; border-bottom: 1px solid #ddd; text-align: left; }.appointment-table th,.contact-table th { color: #003c74; width: 120px; }
.meeting-option { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--accent-deep); background: #f8f7ef; padding: 10px; margin: 8px 0; }.meeting-option small { display: block; color: #555; margin-top: 4px; }
.resume-stage { flex: 1; overflow: auto; background: #e9edf2; padding: 22px; }.resume-paper { width: min(820px,100%); min-height: 850px; margin: 0 auto; background: #fff; color: #111; padding: 60px 70px; box-shadow: 0 0 0 1px #c9cdd2; }.resume-paper h2 { font-size: 20px; }.resume-paper h3 { margin-top: 25px; font-size: 16px; }
.accessibility-window { width: min(590px, calc(100vw - 28px)); }.access-row,.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 13px 0; border-bottom: 1px solid #bbb; }.toggle-row { cursor: pointer; }.toggle-row>input { position: absolute; opacity: 0; pointer-events: none; }.toggle-row i { width: 54px; height: 28px; border-radius: 14px; background: #bbb; border: 1px solid #888; position: relative; flex: 0 0 auto; }.toggle-row i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid #999; transition: .15s; }.toggle-row>input:checked+i { background: var(--accent-2); }.toggle-row>input:checked+i::after { transform: translateX(25px); }.text-size-controls { display: flex; align-items: center; gap: 8px; }.text-size-controls input { width: 150px; }
.gallery-stage { min-height: 320px; display: grid; place-items: center; margin-top: 14px; background: #d8d5cc; border: 2px inset #fff; overflow: hidden; }.gallery-stage img { max-width: 100%; max-height: 520px; object-fit: contain; }.gallery-placeholder { display: grid; place-items: center; gap: 7px; text-align: center; color: #555; padding: 30px; }.gallery-placeholder span { font-size: 50px; }.gallery-controls { display: flex; justify-content: center; gap: 12px; align-items: center; margin-top: 10px; }.experience-unlocked { color: var(--accent-deep); font: 800 13px Tahoma, Verdana, "Segoe UI", Arial, sans-serif; }
.dialog-kicker { font: 800 12px "Courier New", monospace; color: var(--accent-deep); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(120px); z-index: 9999; padding: 9px 14px; border-radius: 4px; background: #111; color: #fff; opacity: 0; transition: .2s; }.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.accessibility-fab { position: fixed; right: 24px; bottom: 24px; z-index: 70; width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--accent-soft); background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; font-size: 25px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }

/* ===== CAREER ARCHIVE / LEGACY PORTFOLIO ===== */
.archive-dialog { width: min(96vw, 1650px); height: min(94vh, 980px); }
.legacy-browser {
  width: min(96vw, 1650px);
  height: min(94vh, 980px);
  display: flex;
  flex-direction: column;
  color: #111;
  background: var(--cream);
  border: 2px solid var(--accent-2);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.legacy-ie-titlebar { flex: 0 0 34px; font-size: 18px; }
.legacy-ie-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; background: #fff; color: #195fc6; font-weight: 900; font-family: Tahoma, Verdana, "Segoe UI", Arial, sans-serif; }
.legacy-ie-menu, .legacy-ie-toolbar, .legacy-address { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; background: var(--cream); border-bottom: 1px solid #aaa; }
.legacy-ie-menu { padding: 4px 8px; font-size: 12px; }.legacy-ie-toolbar { padding: 5px 8px; }.legacy-address { padding: 4px 8px; }
.legacy-tool { border: 0; background: transparent; color: #666; box-shadow: none; }.legacy-address input { flex: 1; min-width: 0; height: 28px; border: 2px inset #fff; background: #fff; padding: 3px 7px; }
.legacy-page { flex: 1; overflow: auto; background: #19052f; color: #fff; scroll-behavior: smooth; }
.legacy-nav { position: sticky; top: 0; z-index: 3; min-height: 74px; display: flex; align-items: center; gap: 42px; padding: 0 clamp(28px, 6vw, 105px); background: #170326; border-bottom: 1px solid #23083a; }
.legacy-nav button { border: 0; background: transparent; color: #fff; font-size: 17px; font-weight: 700; }.legacy-nav strong { margin-left: auto; padding: 12px 18px; background: #7441cb; box-shadow: 0 0 14px rgba(138,76,237,.45); }.legacy-nav-icon { color: #8b49e5; }
.legacy-section { min-height: 590px; padding: clamp(50px, 7vw, 90px) clamp(28px, 10vw, 150px); }
.legacy-hero { display: grid; grid-template-columns: minmax(280px, 520px) minmax(300px, 520px); justify-content: center; align-items: center; gap: 90px; }
.legacy-portrait { width: min(440px, 40vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 40% 30%, #89558a, #4a2850 65%, #25102e); display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(255,255,255,.05); }
.legacy-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }.legacy-portrait span { font: 800 clamp(54px, 7vw, 90px) "Courier New", monospace; color: #fff; }
.legacy-hero-copy h2, .legacy-section>h2, .legacy-preview-copy h2 { color: var(--cyan); text-shadow: 0 0 12px rgba(56,243,232,.45); font-size: clamp(32px, 3vw, 52px); margin: 0 0 22px; }.legacy-hero-copy p, .legacy-preview-copy p { color: #1dffb0; font-size: 19px; line-height: 1.55; }
.legacy-projects { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 24px 32px; align-content: center; }.legacy-preview-copy { grid-row: 1 / 3; align-self: center; }.legacy-preview-card { min-height: 190px; display: grid; place-items: center; align-content: center; padding: 28px; text-align: center; background: linear-gradient(135deg, rgba(143,99,215,.45), rgba(63,33,91,.8)); border: 1px solid rgba(113,239,235,.25); }.legacy-preview-card strong { color: var(--cyan); font-size: 25px; }.legacy-preview-card p { color: #8bfad2; }.legacy-cta { display: block; max-width: 380px; padding: 11px 18px; margin-top: 12px; text-align: center; color: #fff; font-weight: 700; text-decoration: none; background: #7441cb; border: 2px solid #7441cb; }.legacy-cta.outline { background: transparent; }
.legacy-tools { display: grid; place-items: center; align-content: center; text-align: center; }.legacy-word-cloud { max-width: 720px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; transform: rotate(-1deg); }.legacy-word-cloud span { color: #5beaf0; text-shadow: 0 0 10px rgba(91,234,240,.4); font-weight: 800; font-size: clamp(18px, 2vw, 34px); }.legacy-word-cloud span:nth-child(3n) { color: #72d54e; }.legacy-word-cloud span:nth-child(4n) { color: #42aee8; }
.legacy-resume { display: grid; place-items: center; background: #1a0833; }.legacy-resume-paper { width: min(860px, 90%); min-height: 590px; padding: 58px 70px; background: #fff; color: #153039; box-shadow: 0 0 0 35px #262626; }.legacy-resume-paper h2 { text-align: center; font-size: 24px; }.legacy-resume-paper p { font-size: 16px; }
.legacy-contact { text-align: center; display: grid; align-content: center; }.legacy-contact>p { color: #d16adb; font-size: 18px; }.legacy-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 70px; width: min(900px, 90%); margin: 55px auto 0; }.legacy-contact-item { display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; text-align: left; color: #fff; text-decoration: none; border: 0; background: transparent; font-size: 18px; }.legacy-contact-item:first-letter { font-size: 26px; }.legacy-contact-item strong { color: #fff; }.legacy-contact-item span { color: var(--cyan); grid-column: 2; }
.legacy-footer { display: grid; justify-items: center; gap: 17px; padding: 50px 20px 45px; background: #120020; }.legacy-footer button { border: 0; background: transparent; color: var(--cyan); font-size: 16px; }.legacy-socials { display: flex; gap: 14px; }.legacy-socials a,.legacy-socials button { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; background: var(--cyan); color: #111; font-weight: 900; text-decoration: none; }.legacy-footer small { color: #1b7f88; }
.legacy-statusbar { flex: 0 0 auto; }

/* ===== ACCESSIBILITY / THEME ===== */
body.high-contrast { filter: contrast(1.2); }
body.readable-spacing { letter-spacing: .03em; word-spacing: .06em; }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { scroll-behavior: auto!important; transition: none!important; animation: none!important; }
body.enhanced-focus :focus-visible { outline: 3px solid #ffe44f!important; outline-offset: 3px!important; }
body.light-theme { --bg:#e8edf4; --bg-2:#f2f5f9; --panel:#f9fbfd; --panel-dark:#eef3f8; --text:#132033; --muted:#52657a; background:#dfe6ef; }
body.light-theme .portal-header { background:#d9e3ef; color:#132033; }.light-theme .portal-brand span,.light-theme .header-link { color:#132033; }.light-theme .profile-search { background:#eef3f8; }.light-theme .profile-search input { color:#132033; }.light-theme .main-nav { background:#c7d4e4; }.light-theme .main-nav a,.light-theme .nav-button { color:#132033; }.light-theme .interest-grid span,.light-theme .built-with-row span { background:#eef3f8; color:#1b2c40; }

@media (max-width: 1100px) {
  .portal-header { grid-template-columns: 1fr auto; }.profile-search { grid-column: 1 / -1; grid-row: 2; max-width: none; }.portal-tools { justify-self: end; }
  .profile-layout { grid-template-columns: 360px minmax(0,1fr); }
  .training-memory-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .legacy-hero { gap: 40px; }.legacy-section { padding-inline: 45px; }
}
@media (max-width: 780px) {
  .portal-header { grid-template-columns: 1fr; gap: 14px; }.portal-brand { justify-content: space-between; }.portal-tools { justify-self: start; }.profile-search { grid-column: auto; grid-row: auto; }
  .main-nav { overflow-x: auto; gap: 24px; white-space: nowrap; padding-inline: 18px; }
  .page-shell { padding-inline: 10px; }.profile-layout { grid-template-columns: 1fr; }.view-my { margin-left: 0; }.training-memory-grid { grid-template-columns: 1fr; }.project-row { grid-template-columns: 40px 1fr; }.project-row > button { grid-column: 2; justify-self: start; }.timeline article { grid-template-columns: 1fr; gap: 5px; }.section-intro { flex-direction: column; }
  .legacy-nav { gap: 15px; padding-inline: 16px; overflow-x: auto; }.legacy-nav strong { display: none; }.legacy-section { min-height: auto; padding: 50px 22px; }.legacy-hero { grid-template-columns: 1fr; gap: 34px; text-align: center; }.legacy-portrait { width: min(330px,80vw); margin: 0 auto; }.legacy-projects { grid-template-columns: 1fr; }.legacy-preview-copy { grid-row: auto; }.legacy-contact-grid { grid-template-columns: 1fr; gap: 22px; }.legacy-resume-paper { padding: 35px 28px; box-shadow: none; }
  .resume-paper { padding: 35px 26px; }.access-row,.toggle-row { align-items: flex-start; flex-direction: column; }
}


/* ===== WINDOWS / SYSTEM TYPOGRAPHY ===== */
body,
button,
input,
textarea,
select,
.portal-header,
.main-nav,
.retro-panel,
.panel-title,
.skills-table,
.professional-profile,
.section-intro,
.achievement,
.dialog-window,
.legacy-ie-window {
  font-family: Tahoma, Verdana, "Segoe UI", Arial, sans-serif !important;
}

/* Online presence beside the profile avatar */
.profile-online {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px !important;
  color: #55e56f;
  font-weight: 700;
}
.online-dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #25c83b;
  border: 1px solid #087817;
  box-shadow: 0 0 4px rgba(37, 200, 59, .65);
}

/* Retro selectable chips now inherit the active custom accent palette. */
/* ===== RETRO AVATAR HOVER — no layout changes ===== */
.profile-card .pixel-avatar-wrap {
  overflow: visible;
}

.profile-card .pixel-avatar-wrap::after {
  content: "Hello! I'm Lisandra 👋";
  position: absolute;
  top: -27px;
  left: 68px;
  z-index: 30;
  min-width: max-content;
  padding: 4px 8px;
  border: 2px solid #c7b3ff;
  background: linear-gradient(180deg, #ff6a9a 0%, #ff5f93 58%, #b188ff 100%);
  color: #fff;
  font-family: Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow:
    inset 1px 1px rgba(255,255,255,.38),
    inset -1px -1px rgba(0,0,0,.16),
    2px 2px 0 rgba(0,0,0,.30);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(.96);
  transition: opacity .15s ease, transform .15s ease;
}

.profile-card .pixel-avatar-wrap::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 80px;
  z-index: 31;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #b188ff;
  opacity: 0;
  transition: opacity .15s ease;
}

.profile-card .pixel-avatar-wrap:hover::after,
.profile-card .pixel-avatar-wrap:hover::before {
  opacity: 1;
}

.profile-card .pixel-avatar-wrap:hover::after {
  transform: translateY(0) scale(1);
}

.profile-card .pixel-avatar-wrap:hover .pixel-avatar {
  transform-origin: center bottom;
  animation: lisandraAvatarHello .70s ease-in-out 1;
  filter: brightness(1.06);
}

@keyframes lisandraAvatarHello {
  0%   { transform: translateY(0) rotate(0deg); }
  22%  { transform: translateY(-2px) rotate(-2deg); }
  42%  { transform: translateY(-4px) rotate(3deg); }
  62%  { transform: translateY(-2px) rotate(-2deg); }
  82%  { transform: translateY(-1px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .profile-card .pixel-avatar-wrap:hover .pixel-avatar {
    animation: none;
    filter: none;
  }
}


/* ===== HEADER THEME CUSTOMIZER ===== */
.theme-picker { position: relative; }
.theme-menu[hidden] { display: none !important; }
.theme-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  width: 310px;
  padding: 13px;
  border: 2px solid var(--accent-soft);
  background: #172334;
  color: #fff;
  box-shadow: 0 16px 38px rgba(0,0,0,.45);
}
.theme-menu-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid #34465d;
}
.theme-menu-heading small { color: #9fb0c4; }
.theme-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 11px 0;
}
.theme-swatch {
  min-height: 54px;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid #46566b;
  background: #1c2a3d;
  color: #fff;
  text-align: left;
}
.theme-swatch:hover,
.theme-swatch[aria-pressed="true"] {
  border-color: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-2);
}
.theme-swatch > span {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.12);
}
.theme-swatch.cyber-girl > span { background: linear-gradient(135deg, #ff5f93 0 50%, #b188ff 50%); }
.theme-swatch.classic-blue > span { background: linear-gradient(135deg, #2f6fdb 0 50%, #75a8ee 50%); }
.theme-swatch.cyan-night > span { background: linear-gradient(135deg, #20d9df 0 50%, #7857d8 50%); }
.theme-swatch.violet > span { background: linear-gradient(135deg, #c05cff 0 50%, #7755d9 50%); }
.theme-swatch b { font-size: 12px; }
.custom-theme-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  padding-top: 10px;
  border-top: 1px solid #34465d;
}
.custom-theme-controls > strong,
.custom-theme-controls .theme-apply { grid-column: 1 / -1; }
.custom-theme-controls label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.custom-theme-controls input[type="color"] {
  width: 42px;
  height: 28px;
  padding: 1px;
  border: 1px solid #65758a;
  background: #101b2a;
}
.theme-apply {
  min-height: 32px;
  border: 1px solid var(--accent-soft);
  background: linear-gradient(180deg, var(--accent-2), var(--accent-deep));
  color: #fff;
  font-weight: 700;
}

/* Keep loaded retro avatars above their LD fallback. */
.mini-avatar img {
  position: relative;
  z-index: 2;
}
.mini-avatar [data-avatar-fallback] {
  z-index: 1;
}

/* ===== WINDOWS DIALOG POLISH ===== */
#message-form .dialog-actions {
  min-height: 38px;
  margin: 8px 0 0;
  padding: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
#message-form .xp-primary,
#message-form .xp-button {
  min-width: 86px;
  height: 32px;
  min-height: 32px;
  padding: 0 14px;
  line-height: 30px;
}
#message-form .xp-form textarea,
.xp-form textarea {
  min-height: 128px;
  resize: vertical;
}
.send-im-button {
  box-shadow:
    inset 1px 1px rgba(255,255,255,.34),
    inset -1px -1px rgba(0,0,0,.28);
}


/* ===== INTERESTS + BUILT WITH — RETRO HOVER / SELECT EFFECT ===== */
.interest-grid span,
.built-with-row span {
  position: relative;
  cursor: pointer;
  transform: translateY(0) scale(1);
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    color .16s ease,
    filter .16s ease;
  will-change: transform;
}

/* Hover / keyboard focus */
.interest-grid span:hover,
.built-with-row span:hover,
.interest-grid span:focus-visible,
.built-with-row span:focus-visible {
  color: #fff;
  border-color: var(--accent-soft);
  background: linear-gradient(
    180deg,
    var(--accent-2) 0%,
    var(--accent-deep) 100%
  );

  transform: translateY(-3px) scale(1.04);

  box-shadow:
    inset 0 1px rgba(255,255,255,.24),
    inset 0 -1px rgba(0,0,0,.22),
    0 4px 8px rgba(0,0,0,.28),
    0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent),
    0 0 12px color-mix(in srgb, var(--accent-2) 24%, transparent);

  filter: brightness(1.06);
}

/* Clicked / selected */
.interest-grid span.is-selected,
.built-with-row span.is-selected {
  color: #fff;
  border-color: var(--accent-soft);

  background: linear-gradient(
    180deg,
    var(--accent-2) 0%,
    var(--accent-deep) 100%
  );

  box-shadow:
    inset 0 1px rgba(255,255,255,.24),
    inset 0 -1px rgba(0,0,0,.22),
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 10px color-mix(in srgb, var(--accent-2) 20%, transparent);
}

/* Small press effect */
.interest-grid span:active,
.built-with-row span:active {
  transform: translateY(0) scale(.97);
}

/* Tiny retro highlight line */
.interest-grid span::after,
.built-with-row span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  right: 5px;
  height: 1px;
  background: rgba(255,255,255,.14);
  opacity: 0;
  transition: opacity .16s ease;
  pointer-events: none;
}

.interest-grid span:hover::after,
.built-with-row span:hover::after,
.interest-grid span:focus-visible::after,
.built-with-row span:focus-visible::after,
.interest-grid span.is-selected::after,
.built-with-row span.is-selected::after {
  opacity: 1;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .interest-grid span,
  .built-with-row span {
    transition: none;
  }

  .interest-grid span:hover,
  .built-with-row span:hover,
  .interest-grid span:focus-visible,
  .built-with-row span:focus-visible {
    transform: none;
  }
}


/* Header/page alignment on wide screens */
@media (min-width: 1101px) {
  .portal-header,
  .main-nav {
    padding-inline: max(18px, calc((100vw - 1460px) / 2 + 18px));
  }
}

/* Project Explorer — compact bottom */
.projects-home-panel .panel-content {
  padding-bottom: 0 !important;
}

.projects-home-panel .project-list {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.projects-home-panel .project-row:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 8px;
  border-bottom: 0;
}

/* ===== EDUCATION & TRAINING — RETRO CRT MEMORIES ===== */

/* Five cards across on large screens */
.training-memory-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

/* Remove the old outer blue box. The CRT monitor is now the visual frame. */
.training-memory-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.training-memory-copy {
  padding: 0 4px;
}

.training-memory-copy h3 {
  margin: 0 0 3px;
  font-size: 14px;
  line-height: 1.25;
}

.training-memory-copy p {
  margin: 0 0 3px;
  color: #d8e3ef;
  font-size: 13px;
}

.training-memory-copy small {
  color: color-mix(in srgb, var(--accent-soft) 70%, #9fb5cc);
  font-size: 11px;
}

/* CRT monitor shell */
.retro-crt-monitor {
  position: relative;
  width: 100%;
  padding: 11px 11px 24px;

  border: 2px solid color-mix(in srgb, var(--accent-soft) 52%, #c4c9ce);
  border-radius: 11px 11px 8px 8px;

  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--accent-2) 12%, #a5a8ab) 0%,
      #7a7f84 48%,
      color-mix(in srgb, var(--accent) 9%, #5c6267) 100%
    );

  box-shadow:
    inset 2px 2px rgba(255,255,255,.38),
    inset -3px -3px rgba(0,0,0,.28),
    0 6px 13px rgba(0,0,0,.32);

  overflow: hidden;
}

/* subtle top lip like an old monitor */
.retro-crt-monitor::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 18%;
  right: 18%;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

/* lower bezel */
.retro-crt-bezel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 13px;

  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}

.retro-crt-bezel span {
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: rgba(30,33,36,.50);
  box-shadow: 0 2px rgba(255,255,255,.11);
}

.retro-crt-bezel i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 5px color-mix(in srgb, var(--accent) 65%, transparent),
    inset 1px 1px rgba(255,255,255,.35);
}

/* CRT screen */
.retro-crt-screen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;

  display: grid;
  place-items: center;

  background: #070b10;

  border: 4px solid #272c31;
  border-radius: 9px / 13px;

  box-shadow:
    inset 0 0 0 2px #0b1015,
    inset 0 0 22px rgba(0,0,0,.92),
    0 0 0 1px rgba(255,255,255,.10);
}

/* Preserve full photo */
.retro-crt-screen img {
  position: relative;
  z-index: 1;

  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;
  background: #070b10;

  filter:
    saturate(.92)
    contrast(1.04)
    brightness(.94);

  transition:
    transform .22s ease,
    filter .22s ease;
}

/* Theme tint */
.retro-crt-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 20% 12%,
      color-mix(in srgb, var(--accent) 12%, transparent),
      transparent 46%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent-2) 6%, transparent),
      transparent 42%,
      color-mix(in srgb, var(--accent) 6%, transparent)
    );

  mix-blend-mode: screen;
}

/* Scanlines */
.retro-crt-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .25;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.032) 0,
      rgba(255,255,255,.032) 1px,
      rgba(0,0,0,.065) 2px,
      rgba(0,0,0,.065) 3px
    );
}

/* Hover */
.training-memory-card:hover .retro-crt-monitor {
  border-color: var(--accent-soft);

  box-shadow:
    inset 2px 2px rgba(255,255,255,.40),
    inset -3px -3px rgba(0,0,0,.28),
    0 7px 16px rgba(0,0,0,.38),
    0 0 16px color-mix(in srgb, var(--accent-2) 20%, transparent);
}

.training-memory-card:hover .retro-crt-screen img {
  transform: scale(1.015);
  filter:
    saturate(1)
    contrast(1.06)
    brightness(.97);
}

/* Button integrated with the card */
.training-memory-card .retro-button {
  width: calc(100% - 8px);
  margin: auto 4px 0;
}

/* Training Viewer — same CRT family */
.gallery-stage {
  position: relative;
  min-height: 360px;

  display: grid;
  place-items: center;

  margin-top: 14px;
  padding: 16px 16px 28px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--accent-2) 11%, #a1a5a8),
      #696f74 60%,
      #52585d
    );

  border: 2px solid color-mix(in srgb, var(--accent-soft) 58%, #d0d4d9);
  border-radius: 11px;

  box-shadow:
    inset 2px 2px rgba(255,255,255,.34),
    inset -3px -3px rgba(0,0,0,.28);
}

.gallery-stage img {
  width: 100%;
  height: min(58vh, 520px);

  max-width: 100%;
  max-height: 520px;

  object-fit: contain;

  display: block;
  margin: auto;
  padding: 3px;

  background: #070b10;
  border: 4px solid #252b31;

  filter:
    saturate(.94)
    contrast(1.04)
    brightness(.95);
}

/* Responsive */
@media (max-width: 1350px) {
  .training-memory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .training-memory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .training-memory-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .retro-crt-screen img {
    transition: none;
  }

  .training-memory-card:hover .retro-crt-screen img {
    transform: none;
  }
}


/* ===== TRAINING MEMORIES — V3.5 ALIGNMENT + RETRO BUTTONS ===== */

/* All five cards stay the same height and their buttons align */
.training-memory-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.training-memory-card {
  display: grid;
  grid-template-rows: auto minmax(98px, 1fr) auto;
  gap: 10px;
  min-width: 0;
  height: 100%;
  align-self: stretch;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.training-memory-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 98px;
  padding: 0 4px;
}

.training-memory-copy h3 {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.25;
}

.training-memory-copy p {
  margin: 0 0 4px;
  color: #d8e3ef;
  font-size: 13px;
}

.training-memory-copy small {
  color: color-mix(in srgb, var(--accent-soft) 72%, #9fb5cc);
  font-size: 11px;
  line-height: 1.35;
}

/* Same monitor size for every card */
.retro-crt-monitor {
  width: 100%;
}

.retro-crt-screen {
  width: 100%;
  aspect-ratio: 4 / 3;
}

/* Default preview: fill the CRT nicely */
.retro-crt-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Panama uses panama03 as the outside preview */
.training-card-panama .retro-crt-screen img {
  object-position: center center;
}

/* Costa Rica: show the whole preview instead of cropping it */
.training-card-costarica .retro-crt-screen img {
  object-fit: contain;
  object-position: center center;
  background: #070b10;
}

/* Windows-XP-style retro View Memories buttons */
.training-memory-card .retro-button {
  width: calc(100% - 8px);
  min-height: 36px;
  margin: 0 4px;
  padding: 6px 12px;

  border: 1px solid color-mix(in srgb, var(--accent-deep) 70%, #15355f);
  border-radius: 3px;

  color: #ffffff;
  font-family: Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-shadow: 1px 1px rgba(32, 18, 58, .55);

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent-soft) 52%, #ffffff) 0%,
      color-mix(in srgb, var(--accent-2) 82%, #ffffff) 12%,
      var(--accent-2) 48%,
      var(--accent-deep) 100%
    );

  box-shadow:
    inset 1px 1px rgba(255,255,255,.48),
    inset -1px -1px rgba(0,0,0,.30),
    0 1px 0 rgba(255,255,255,.10);

  transition:
    transform .12s ease,
    filter .12s ease,
    box-shadow .12s ease;
}

.training-memory-card .retro-button::before {
  content: "▣";
  margin-right: 7px;
  color: #ffffff;
  opacity: .95;
}

.training-memory-card .retro-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);

  box-shadow:
    inset 1px 1px rgba(255,255,255,.58),
    inset -1px -1px rgba(0,0,0,.30),
    0 0 10px color-mix(in srgb, var(--accent) 24%, transparent);
}

.training-memory-card .retro-button:active {
  transform: translateY(1px);

  background:
    linear-gradient(
      180deg,
      var(--accent-deep) 0%,
      var(--accent-2) 58%,
      color-mix(in srgb, var(--accent-soft) 60%, #ffffff) 100%
    );

  box-shadow:
    inset 1px 1px rgba(0,0,0,.22),
    inset -1px -1px rgba(255,255,255,.24);
}

/* Responsive */
@media (max-width: 1350px) {
  .training-memory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .training-memory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .training-memory-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== TRAINING MEMORIES — V3.6 HARD ALIGNMENT FIX ===== */

/*
   Important:
   Older rules above this block use align-items:start and generic white
   .retro-button styles. These overrides intentionally win.
*/

.training-memory-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr;
  gap: 16px !important;
  align-items: stretch !important;
}

.training-memory-card {
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  align-self: stretch !important;

  min-width: 0;
  height: 100% !important;

  gap: 10px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/*
  Text area consumes all remaining space.
  This is what pins every button to the exact same bottom line.
*/
.training-memory-copy {
  display: flex !important;
  flex-direction: column;
  align-self: stretch;
  justify-content: flex-start;

  min-height: 105px !important;
  height: 100%;

  padding: 0 4px !important;
}

.training-memory-copy h3 {
  margin: 0 0 4px !important;
  font-size: 14px;
  line-height: 1.25;
}

.training-memory-copy p {
  margin: 0 0 4px !important;
  font-size: 13px;
  line-height: 1.3;
}

.training-memory-copy small {
  margin-top: auto;
  padding-top: 4px;

  font-size: 11px;
  line-height: 1.3;

  color:
    color-mix(
      in srgb,
      var(--accent-soft) 72%,
      #9fb5cc
    );
}

/* Identical CRT height for every preview. */
.retro-crt-monitor {
  width: 100% !important;
  align-self: start;
}

.retro-crt-screen {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
}

/* Panama preview stays panama03 */
.training-card-panama .retro-crt-screen img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* Costa Rica shows the whole image instead of cropping heads/edges. */
.training-card-costarica .retro-crt-screen img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #070b10 !important;
}

/* ===== RETRO VIEW MEMORIES BUTTON ===== */

.training-memory-card > .retro-button {
  align-self: end !important;

  width: calc(100% - 8px) !important;
  min-height: 38px !important;
  height: 38px;

  margin: 0 4px !important;
  padding: 0 12px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent-deep) 74%,
      #163c72
    ) !important;

  border-radius: 3px !important;

  color: #ffffff !important;

  font-family:
    Tahoma,
    Verdana,
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  line-height: 1 !important;

  text-align: center;

  text-shadow:
    1px 1px
    rgba(31, 16, 57, .62);

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent-soft) 58%, #ffffff) 0%,
      color-mix(in srgb, var(--accent-2) 82%, #ffffff) 13%,
      var(--accent-2) 50%,
      var(--accent-deep) 100%
    ) !important;

  box-shadow:
    inset 1px 1px rgba(255,255,255,.55),
    inset -1px -1px rgba(0,0,0,.34),
    0 1px 0 rgba(255,255,255,.12) !important;

  transition:
    transform .12s ease,
    filter .12s ease,
    box-shadow .12s ease;
}

.training-memory-card > .retro-button::before {
  content: "▣";
  display: inline-block;

  margin-right: 7px;

  color: #ffffff;
  opacity: .96;

  font-size: 12px;
}

.training-memory-card > .retro-button:hover {
  filter: brightness(1.10);

  transform:
    translateY(-1px);

  box-shadow:
    inset 1px 1px rgba(255,255,255,.65),
    inset -1px -1px rgba(0,0,0,.32),
    0 0 10px
    color-mix(
      in srgb,
      var(--accent) 28%,
      transparent
    ) !important;
}

.training-memory-card > .retro-button:active {
  transform:
    translateY(1px);

  background:
    linear-gradient(
      180deg,
      var(--accent-deep) 0%,
      var(--accent-2) 58%,
      color-mix(in srgb, var(--accent-soft) 62%, #ffffff) 100%
    ) !important;

  box-shadow:
    inset 1px 1px rgba(0,0,0,.24),
    inset -1px -1px rgba(255,255,255,.26) !important;
}

/* Responsive layouts keep the same bottom-button alignment per row. */
@media (max-width: 1350px) {
  .training-memory-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .training-memory-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .training-memory-grid {
    grid-template-columns:
      1fr !important;
  }
}

/* ===== COMPLETE RESUME PDF VIEWER · V3.8 ===== */

.resume-stage {
  padding: 14px;
  background: linear-gradient(#eef1f5, #dfe4ea);
  overflow: auto;
}

.resume-pdf-pages {
  display: grid;
  gap: 18px;
  justify-items: center;
  width: 100%;
  min-height: 620px;
}

.resume-loading,
.resume-fallback {
  width: min(760px, 100%);
  min-height: 220px;
  margin: 18px auto;
  padding: 28px;
  border: 1px solid #b8bec7;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  display: grid;
  place-items: center;
  gap: 16px;
  text-align: center;
  color: #1d2530;
}

.resume-page-shell {
  width: min(900px, 100%);
  display: grid;
  justify-items: center;
  gap: 6px;
}

.resume-page-label {
  justify-self: start;
  padding: 3px 7px;
  font: 11px/1.2 Tahoma, Verdana, sans-serif;
  color: #4a5260;
  background: rgba(255,255,255,.8);
  border: 1px solid #c7ccd3;
}

.resume-page-canvas {
  display: block;
  max-width: 100%;
  height: auto !important;
  background: #fff;
  border: 1px solid #bfc5cc;
  box-shadow:
    0 1px 2px rgba(0,0,0,.18),
    0 10px 24px rgba(0,0,0,.12);
}

.resume-window {
  width: min(1120px, 94vw);
}

.resume-window .resume-stage {
  height: min(72vh, 820px);
}

@media (max-width: 700px) {
  .resume-stage {
    padding: 7px;
  }

  .resume-pdf-pages {
    gap: 12px;
    min-height: 520px;
  }

  .resume-page-label {
    font-size: 10px;
  }

  .resume-window .resume-stage {
    height: 68vh;
  }
}
/* ===== EXPERIENCE COMPANY LOGOS ===== */

.experience-entry-content {
  min-width: 0;
}

.experience-company {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 7px 0 10px;
}

.experience-logo {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: contain;
  padding: 5px;
  border: 1px solid #b9bec7;
  border-radius: 4px;
  background: #ffffff;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.9),
    1px 1px 2px rgba(0,0,0,.12);
}

.experience-company-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.experience-company-copy strong {
  font-size: 13px;
  line-height: 1.25;
}

.experience-company-copy span {
  font-size: 11px;
  line-height: 1.3;
  color: #667080;
}

body.dark-mode .experience-logo {
  background: #ffffff;
}

body.dark-mode .experience-company-copy span {
  color: #b7c0cf;
}

@media (max-width: 640px) {
  .experience-logo {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .experience-company {
    gap: 9px;
  }
}

/* ===== PROFILE CARD HOTFIX · V4.2 ===== */
/* Strong selectors below intentionally override any older/global image rules. */

.profile-card .profile-summary-grid {
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
}

.profile-card .system-profile-facts {
  min-width: 0;
}

.profile-card .system-profile-row {
  min-height: 18px;
}

.profile-card .flag-system-wrap {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;

  width: 24px !important;
  height: 16px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  flex: 0 0 24px !important;

  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;

  border: 1px solid color-mix(in srgb, var(--accent-soft) 68%, #8ddcff);
  border-radius: 1px;
  background: #fff;

  box-shadow:
    0 0 0 1px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);

  animation: flag-system-glow 4.8s ease-in-out infinite;
}

.profile-card .flag-system-wrap .profile-country-flag {
  position: static !important;
  inset: auto !important;

  display: block !important;

  width: 22px !important;
  height: 14px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  min-height: 14px !important;
  max-height: 14px !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
  object-position: center !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  image-rendering: auto !important;
}

.profile-card .flag-system-wrap::after {
  z-index: 2;
}

.profile-card .profile-location {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-card .profile-terminal-line {
  width: 100%;
  min-height: 34px;
  margin: 12px 0 10px;
  padding: 7px 9px;
  overflow: hidden;

  border-top: 1px solid color-mix(in srgb, var(--accent-soft) 48%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-soft) 32%, transparent);

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.10),
      color-mix(in srgb, var(--accent) 5%, transparent),
      transparent
    );
}

.profile-card .terminal-mini-icon {
  width: 30px;
  height: 20px;
  min-width: 30px;
  font-size: 11px;
}

.profile-card .profile-system-meta {
  gap: 5px;
}

.profile-card .profile-system-meta p {
  min-height: 18px;
  margin: 0;
}

.network-banner.system-network-banner {
  padding: 13px 18px;
}

.network-banner.system-network-banner h2 {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.2;
  letter-spacing: .01em;
}

@media (max-width: 780px) {
  .network-banner.system-network-banner h2 {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-card .flag-system-wrap,
  .profile-card .flag-system-wrap::after {
    animation: none !important;
  }
}

/* ===== ORGANIZED PROFILE CARD · V4.3 ===== */

.profile-card {
  padding: 15px 16px 14px;
}

.profile-card .profile-heading {
  margin-bottom: 12px;
}

.profile-card .profile-heading h1 {
  margin: 0 0 3px;
  font-size: 22px;
  line-height: 1.2;
}

.profile-card .profile-heading p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.profile-card .profile-summary-grid {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.profile-card .system-profile-facts {
  display: grid;
  align-content: start;
  gap: 7px;
  padding-top: 1px;
  min-width: 0;
}

.profile-card .system-profile-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 18px;
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.2;
}

.profile-card .system-profile-icon {
  width: 20px;
  min-width: 20px;
  text-align: center;
}

.profile-card .system-online-icon {
  color: #39e66d;
  font-size: 13px;
}

.profile-card .profile-system-separator {
  height: 1px;
  margin: 13px 0 11px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent-soft) 64%, transparent) 8%,
    color-mix(in srgb, var(--accent-soft) 64%, transparent) 92%,
    transparent
  );
  box-shadow: 0 1px 0 rgba(255,255,255,.03);
}

.profile-card .profile-system-meta {
  display: grid;
  gap: 6px;
  margin: 0;
}

.profile-card .profile-meta-row {
  display: grid;
  grid-template-columns: 20px 88px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  min-height: 20px;
  font-size: 12px;
  line-height: 1.35;
}

.profile-card .profile-meta-label {
  color: color-mix(in srgb, var(--accent-soft) 78%, #ffffff);
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .055em;
  white-space: nowrap;
}

.profile-card .profile-meta-value {
  min-width: 0;
  color: var(--text);
}

.profile-card .profile-meta-value strong {
  color: #ffffff;
}

.profile-card .profile-career-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.045);
  font-size: 13px;
}

.profile-card .profile-career-link .text-button {
  font-size: inherit;
}

/* Disable the old layout rule now that Career Archive has its own wrapper. */
.profile-card .view-my {
  margin: 0 !important;
}

/* Keep the Dominican Republic flag in compact system-icon form. */
.profile-card .flag-system-wrap {
  width: 24px !important;
  height: 16px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  flex: 0 0 24px !important;
}

.profile-card .flag-system-wrap .profile-country-flag {
  width: 22px !important;
  height: 14px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  min-height: 14px !important;
  max-height: 14px !important;
}

@media (max-width: 520px) {
  .profile-card .profile-summary-grid {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 11px;
  }

  .profile-card .pixel-avatar-wrap {
    width: 92px;
    height: 92px;
  }

  .profile-card .profile-meta-row {
    grid-template-columns: 20px 76px minmax(0, 1fr);
    gap: 6px;
  }

  .profile-card .profile-meta-label {
    font-size: 9px;
  }
}

/* ===== V4.4 · PROFILE MICRO-ANIMATIONS + ACCESSIBILITY SPACING ===== */

/* Online LED: visible but calm system-style breathing pulse */
.profile-card .system-online-icon {
  display: inline-block !important;
  color: #39e66d !important;
  opacity: 1;
  transform-origin: center center;
  text-shadow:
    0 0 4px rgba(57,230,109,.62),
    0 0 9px rgba(57,230,109,.24);
  animation: online-led-breathe 2.6s ease-in-out infinite !important;
}

@keyframes online-led-breathe {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
    text-shadow:
      0 0 4px rgba(57,230,109,.62),
      0 0 9px rgba(57,230,109,.24);
  }

  42% {
    opacity: .58;
    transform: scale(.86);
    filter: brightness(.82);
    text-shadow:
      0 0 2px rgba(57,230,109,.30);
  }

  62% {
    opacity: 1;
    transform: scale(1.18);
    filter: brightness(1.38);
    text-shadow:
      0 0 7px rgba(57,230,109,.95),
      0 0 15px rgba(57,230,109,.48);
  }
}


/* Flag: persistent subtle glow + periodic visible shine */
.profile-card .flag-system-wrap {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  animation: flag-visible-glow 4.8s ease-in-out infinite !important;
}

.profile-card .flag-system-wrap::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, #ffffff);
  opacity: .28;
  box-shadow:
    0 0 4px color-mix(in srgb, var(--accent) 38%, transparent),
    inset 0 0 3px rgba(255,255,255,.18);
}

.profile-card .flag-system-wrap::after {
  content: "" !important;
  position: absolute !important;
  top: -32% !important;
  left: -70% !important;
  width: 42% !important;
  height: 170% !important;
  z-index: 5 !important;
  pointer-events: none !important;
  opacity: 0;
  background: linear-gradient(
    102deg,
    transparent 0%,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,.28) 38%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.32) 62%,
    rgba(255,255,255,0) 80%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: flag-visible-shine 4.2s ease-in-out infinite !important;
}

@keyframes flag-visible-shine {
  0%, 56% {
    left: -70%;
    opacity: 0;
  }

  64% {
    opacity: .22;
  }

  74% {
    opacity: .92;
  }

  84% {
    opacity: .34;
  }

  91%, 100% {
    left: 138%;
    opacity: 0;
  }
}

@keyframes flag-visible-glow {
  0%, 100% {
    filter: brightness(1);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.24),
      inset 0 0 0 1px rgba(255,255,255,.32),
      0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
  }

  74% {
    filter: brightness(1.04);
  }

  82% {
    filter: brightness(1.18);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.24),
      inset 0 0 0 1px rgba(255,255,255,.42),
      0 0 10px color-mix(in srgb, var(--accent) 48%, transparent);
  }

  90% {
    filter: brightness(1.04);
  }
}


/* Accessibility dialog: give labels/descriptions proper breathing room */
.accessibility-body .toggle-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 12px 0 !important;
}

.accessibility-body .toggle-row > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  line-height: 1.3;
}

.accessibility-body .toggle-row > span > strong {
  display: block;
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
}

.accessibility-body .toggle-row > span > small {
  display: block;
  margin: 0;
  color: #555;
  font-size: 12px;
  line-height: 1.35;
}

.accessibility-body .toggle-row > i {
  justify-self: end;
}

.accessibility-body .access-row {
  gap: 24px !important;
}

.accessibility-body .access-row > div:first-child {
  display: grid;
  gap: 5px;
}

.accessibility-body .access-row h3,
.accessibility-body .access-row p {
  margin: 0;
}


/* Accessibility: honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .profile-card .system-online-icon,
  .profile-card .flag-system-wrap,
  .profile-card .flag-system-wrap::after {
    animation: none !important;
    transform: none !important;
  }
}

/* ===== V4.6 · FIXED ACCESSIBILITY LAYER + CLEAN FOOTER ===== */

/* Keep High Contrast functional without filtering the entire document.
   filter on body/html can change how position:fixed behaves in browsers. */
body.high-contrast {
  filter: none !important;

  --text: #ffffff;
  --muted: #e7eef8;
  --panel: #101b2a;
  --panel-dark: #07101a;
  --border: #ffffff;
  --border-soft: #d9e7ff;
  --link: #5cffff;
  --cyan: #5cffff;

  color: #ffffff;
}

body.high-contrast .retro-panel,
body.high-contrast .dialog-window {
  border-color: #ffffff;
}


/* Dedicated viewport layer.
   The layer itself never participates in page layout. */
.accessibility-fab-layer {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 2147483000 !important;

  pointer-events: none !important;

  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
}


/* The button is positioned inside the fixed viewport layer. */
.accessibility-fab-layer .accessibility-fab {
  position: absolute !important;

  right: 22px !important;
  bottom: 22px !important;
  top: auto !important;
  left: auto !important;

  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  pointer-events: auto !important;

  z-index: 1 !important;

  border-radius: 50% !important;
  border: 1px solid var(--accent-soft) !important;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent-2) 82%, #ffffff),
      var(--accent)
    ) !important;

  color: #ffffff !important;
  font-size: 24px !important;
  line-height: 1 !important;

  box-shadow:
    inset 0 1px rgba(255,255,255,.28),
    0 7px 18px rgba(0,0,0,.42),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) !important;

  transform: none !important;
}


/* Accessibility dialog: title and description are stacked cleanly. */
.accessibility-body .toggle-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;

  align-items: center !important;

  column-gap: 18px !important;
  row-gap: 0 !important;

  width: 100%;
  padding: 12px 0 !important;
}

.accessibility-body .toggle-row > .toggle-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;

  gap: 4px !important;

  width: 100%;
  min-width: 0;
}

.accessibility-body .toggle-row > .toggle-copy > strong {
  display: block !important;
  width: 100%;

  margin: 0 !important;

  font-size: 14px;
  line-height: 1.25;
}

.accessibility-body .toggle-row > .toggle-copy > small {
  display: block !important;
  width: 100%;

  margin: 0 !important;

  color: #555;
  font-size: 12px;
  line-height: 1.35;

  white-space: normal !important;
}

.accessibility-body .toggle-row > i {
  justify-self: end;
  align-self: center;
}


/* Keep text-size controls tidy without changing page layout. */
.accessibility-body .access-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
}

.accessibility-body .access-row > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.accessibility-body .access-row h3,
.accessibility-body .access-row p {
  margin: 0 !important;
}


/* Footer uses the original site layout again.
   No body flex/grid hacks are used in V4.6. */
.retro-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  min-height: 48px;

  margin: 0;
  padding: 12px 5vw;

  flex: none;

  color: #8fa2b7;
  background: #07101a;
  border-top: 1px solid #23344b;

  font-size: 12px;
}


/* Preserve the exact V4.4 online animation. */
.profile-card .system-online-icon {
  display: inline-block !important;
  color: #39e66d !important;
  opacity: 1;
  transform-origin: center center;

  text-shadow:
    0 0 4px rgba(57,230,109,.62),
    0 0 9px rgba(57,230,109,.24);

  animation: online-led-breathe 2.6s ease-in-out infinite !important;
}


/* Preserve the exact V4.4 flag shine sweep + glow. */
.profile-card .flag-system-wrap {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;

  animation: flag-visible-glow 4.8s ease-in-out infinite !important;
}

.profile-card .flag-system-wrap::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 2;
  pointer-events: none;

  border: 1px solid color-mix(in srgb, var(--accent) 72%, #ffffff);
  opacity: .28;

  box-shadow:
    0 0 4px color-mix(in srgb, var(--accent) 38%, transparent),
    inset 0 0 3px rgba(255,255,255,.18);
}

.profile-card .flag-system-wrap::after {
  content: "" !important;
  position: absolute !important;

  top: -32% !important;
  left: -70% !important;

  width: 42% !important;
  height: 170% !important;

  z-index: 5 !important;
  pointer-events: none !important;

  opacity: 0;

  background: linear-gradient(
    102deg,
    transparent 0%,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,.28) 38%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.32) 62%,
    rgba(255,255,255,0) 80%,
    transparent 100%
  );

  transform: skewX(-18deg);

  animation: flag-visible-shine 4.2s ease-in-out infinite !important;
}


/* Mobile */
@media (max-width: 640px) {
  .accessibility-fab-layer .accessibility-fab {
    right: 14px !important;
    bottom: 14px !important;

    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;

    font-size: 21px !important;
  }

  .accessibility-body .access-row {
    grid-template-columns: 1fr !important;
  }

  .accessibility-body .text-size-controls {
    justify-self: start;
  }
}


/* Accessibility preference: disable animations only when requested. */
@media (prefers-reduced-motion: reduce) {
  .profile-card .system-online-icon,
  .profile-card .flag-system-wrap,
  .profile-card .flag-system-wrap::after {
    animation: none !important;
    transform: none !important;
  }
}

/* ===== FLAG ANIMATION ONLY · RESTORED FROM V4.4 ===== */
/* Shine sweep + subtle glow. Online animation intentionally untouched. */

.profile-card .flag-system-wrap {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  animation: flag-visible-glow 4.8s ease-in-out infinite !important;
}

.profile-card .flag-system-wrap::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, #ffffff);
  opacity: .28;
  box-shadow:
    0 0 4px color-mix(in srgb, var(--accent) 38%, transparent),
    inset 0 0 3px rgba(255,255,255,.18);
}

.profile-card .flag-system-wrap::after {
  content: "" !important;
  position: absolute !important;
  top: -32% !important;
  left: -70% !important;
  width: 42% !important;
  height: 170% !important;
  z-index: 5 !important;
  pointer-events: none !important;
  opacity: 0;
  background: linear-gradient(
    102deg,
    transparent 0%,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,.28) 38%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.32) 62%,
    rgba(255,255,255,0) 80%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: flag-visible-shine 4.2s ease-in-out infinite !important;
}

@keyframes flag-visible-shine {
  0%, 56% {
    left: -70%;
    opacity: 0;
  }

  64% {
    opacity: .22;
  }

  74% {
    opacity: .92;
  }

  84% {
    opacity: .34;
  }

  91%, 100% {
    left: 138%;
    opacity: 0;
  }
}

@keyframes flag-visible-glow {
  0%, 100% {
    filter: brightness(1);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.24),
      inset 0 0 0 1px rgba(255,255,255,.32),
      0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
  }

  74% {
    filter: brightness(1.04);
  }

  82% {
    filter: brightness(1.18);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.24),
      inset 0 0 0 1px rgba(255,255,255,.42),
      0 0 10px color-mix(in srgb, var(--accent) 48%, transparent);
  }

  90% {
    filter: brightness(1.04);
  }
}

/* ===== LIGHT THEME · AUTOMATIC CONTRAST V4.7 ===== */
/* Keeps the active accent palette, but derives darker readable foregrounds automatically. */

body.light-theme {
  --bg: #e3eaf2;
  --bg-2: #eef3f8;
  --panel: #f8fbff;
  --panel-dark: #eaf0f6;

  --text: #102033;
  --muted: #4b5f73;

  --border: color-mix(in srgb, var(--accent) 32%, #65788c);
  --border-soft: color-mix(in srgb, var(--accent-2) 30%, #65788c);

  --link: color-mix(in srgb, var(--accent) 42%, #07394b);
  --cyan: var(--link);
  --purple: color-mix(in srgb, var(--accent-2) 48%, #24304a);

  background: linear-gradient(180deg, #e7edf4 0%, #dfe7f0 100%);
  color: var(--text);
}


/* Header + navigation */
body.light-theme .portal-header {
  background: #d8e2ed;
  color: var(--text);
  border-bottom-color: #9caec0;
}

body.light-theme .portal-brand strong,
body.light-theme .portal-brand span,
body.light-theme .header-link {
  color: #102033;
  text-shadow: none;
}

body.light-theme .profile-search {
  background: #f7faff;
  border-color: #91a4b8;
}

body.light-theme .profile-search span,
body.light-theme .profile-search input,
body.light-theme .profile-search input::placeholder {
  color: #30445a;
}

body.light-theme .main-nav {
  background: #c7d4e4;
  border-bottom-color: #90a5ba;
}

body.light-theme .main-nav a,
body.light-theme .nav-button {
  color: #12243a;
}

body.light-theme .main-nav a:hover,
body.light-theme .nav-button:hover {
  color: var(--link);
}


/* Core panels */
body.light-theme .retro-panel {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
}

body.light-theme .panel-title {
  color: #ffffff;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-deep) 72%, #0d263d) 0%,
    color-mix(in srgb, var(--accent) 54%, #0d263d) 100%
  );
  border-bottom-color: color-mix(in srgb, var(--accent-soft) 48%, #60758a);
  text-shadow: 1px 1px rgba(0,0,0,.25);
}

body.light-theme .network-banner,
body.light-theme .professional-profile,
body.light-theme .portfolio-url-panel {
  color: var(--text);
}


/* Profile card */
body.light-theme .profile-heading h1,
body.light-theme .profile-heading p,
body.light-theme .profile-facts,
body.light-theme .profile-system-meta,
body.light-theme .profile-career-link {
  color: var(--text);
}

body.light-theme .profile-card .profile-meta-label {
  color: color-mix(in srgb, var(--accent-2) 40%, #24384e);
}

body.light-theme .profile-card .profile-meta-value,
body.light-theme .profile-card .profile-meta-value strong {
  color: #102033;
}

body.light-theme .profile-card .profile-online strong {
  color: #08752b;
}

body.light-theme .profile-card .profile-system-separator {
  background: linear-gradient(
    90deg,
    transparent,
    #aebdca 8%,
    #aebdca 92%,
    transparent
  );
}


/* Contact panel */
body.light-theme .contacting-panel {
  background: #edf3f8;
  color: #102033;
}

body.light-theme .contacting-panel .link-button {
  color: var(--link);
}

body.light-theme .contacting-panel .link-button:hover {
  color: color-mix(in srgb, var(--accent-deep) 58%, #102033);
}


/* Skills */
body.light-theme .skills-table {
  color: #102033;
}

body.light-theme .skills-table th,
body.light-theme .skills-table td {
  border-top-color: #c0ccd7;
}

body.light-theme .skills-table th {
  color: color-mix(in srgb, var(--accent-2) 48%, #27384d);
}

body.light-theme .skills-table td {
  color: #17293c;
}


/* Certifications + profile prose */
body.light-theme .cert-home-list > div {
  border-bottom-color: #d2dbe4;
}

body.light-theme .cert-home-list a,
body.light-theme .professional-profile a,
body.light-theme .plain-url,
body.light-theme .text-button {
  color: var(--link);
}

body.light-theme .professional-profile h3,
body.light-theme .prose p,
body.light-theme .professional-profile strong {
  color: #102033;
}


/* Interest / Built With chips */
body.light-theme .interest-grid span,
body.light-theme .built-with-row span {
  background: #eef3f8;
  color: #1a2d42;
  border-color: #899aae;
  box-shadow: inset 0 1px rgba(255,255,255,.92);
}

body.light-theme .interest-grid span:hover,
body.light-theme .built-with-row span:hover,
body.light-theme .interest-grid span:focus-visible,
body.light-theme .built-with-row span:focus-visible,
body.light-theme .interest-grid span.is-selected,
body.light-theme .built-with-row span.is-selected {
  color: #ffffff;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-2) 62%, #21344d) 0%,
    color-mix(in srgb, var(--accent-deep) 68%, #12253c) 100%
  );
  border-color: color-mix(in srgb, var(--accent-soft) 52%, #52677e);
}


/* Projects */
body.light-theme .project-list {
  border-top-color: #bcc9d5;
}

body.light-theme .project-row {
  border-bottom-color: #c7d2dd;
}

body.light-theme .project-row h3 {
  color: #102033;
}

body.light-theme .project-row p {
  color: #31475d;
}

body.light-theme .project-row small {
  color: color-mix(in srgb, var(--accent-2) 46%, #35475b);
}


/* Experience / certifications */
body.light-theme .timeline article,
body.light-theme .certification-list > p {
  border-bottom-color: #c8d3dd;
}

body.light-theme .timeline h3,
body.light-theme .certification-list > p {
  color: #102033;
}

body.light-theme .timeline p {
  color: #40556a;
}

body.light-theme .timeline time {
  color: var(--link);
}

body.light-theme .certification-list span {
  color: color-mix(in srgb, var(--accent-2) 46%, #33475e);
}


/* Training cards: text around CRTs must switch to dark in light mode. */
body.light-theme .training-memory-copy h3 {
  color: #102033;
}

body.light-theme .training-memory-copy p {
  color: #344b61;
}

body.light-theme .training-memory-copy small {
  color: #5b6f83;
}

body.light-theme .section-intro h2 {
  color: #102033;
}

body.light-theme .section-intro p {
  color: #4b5f73;
}


/* Buttons and generic status text */
body.light-theme .inline-status {
  color: #17693a;
}

body.light-theme .achievement {
  color: #705500;
}


/* Keep dark retro subsystems intentionally dark, with their existing contrast. */
body.light-theme .legacy-page,
body.light-theme .legacy-nav,
body.light-theme .legacy-footer,
body.light-theme .stack-cloud,
body.light-theme .retro-crt-screen {
  color-scheme: dark;
}


/* Footer remains a dark system bar by design. */
body.light-theme .retro-footer {
  color: #c4d0dd;
  background: #0b1521;
  border-top-color: #34475a;
}