:root {
  --c1: hsl(219, 79%, 66%);
  --c2: hsl(319, 100%, 60%);
  --c3: hsl(266, 49%, 25%);
  --c4: hsl(60, 82%, 58%);
  --c5: hsl(0, 67%, 55%);
  --c6: hsl(213, 96%, 11%);
  --c2hsl: 319, 100%, 60%;
  --mtn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300'><path d='M0,200 Q300,50 600,150 T1200,200 L1200,300 L0,300 Z' fill='hsl(266, 49%, 25%)' opacity='0.8'/></svg>");
  --mtn2: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'><path d='M0,150 Q250,40 500,120 T1000,160 L1200,200 L1200,300 L0,300 Z' fill='%231a0f2e' opacity='0.6'/></svg>");
}

@property --outrun {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

@keyframes outrun {
  to { --outrun: 1; }
}

* {
  box-sizing: border-box;
}

html {
  height: 100vh;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Tahoma', sans-serif;
  margin: 0;
  padding: 12px;
  box-sizing: border-box;
  transition: background 0.3s ease;
  position: relative;
  overflow-x: hidden;
  /* Clean professional retro background for default themes */
  background-color: #008080; 
}

h1 {
  font-size: 24px;
  margin: 12px 0 10px 0;
}

/* OUTRUN SYNTHWAVE STRICTLY FOR DOS MODE */
html.dos-mode::before {
  content: "";
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  filter: brightness(1.125);
  animation: outrun 0.6s linear infinite;
  --lgDepth: url("data:image/svg+xml;utf8,<svg width='1808' height='230' xmlns='http://www.w3.org/2000/svg'><path d='M904 -46 L-3616 230 M904 -46 L-3254.4 230 M904 -46 L-2892.8 230 M904 -46 L-2531.2000000000003 230 M904 -46 L-2169.6000000000004 230 M904 -46 L-1808 230 M904 -46 L-1446.4 230 M904 -46 L-1084.8000000000002 230 M904 -46 L-723.2 230 M904 -46 L-361.6 230 M904 -46 L0 230 M904 -46 L361.6 230 M904 -46 L723.2 230 M904 -46 L1084.8000000000002 230 M904 -46 L1446.4 230 M904 -46 L1808 230 M904 -46 L2169.6000000000004 230 M904 -46 L2531.2000000000003 230 M904 -46 L2892.8 230 M904 -46 L3254.4 230 M904 -46 L3616 230 M904 -46 L3977.6000000000004 230 M904 -46 L4339.200000000001 230 M904 -46 L4700.8 230 M904 -46 L5062.400000000001 230 M904 -46 L5424 230' stroke='cornflowerblue' stroke-width='2' vector-effect='non-scaling-stroke' /></svg>") left bottom / 100% 40% no-repeat;
  --outrun: 0;
  --pos: var(--outrun, 0);
  --distance: 0.5%;
  --hor: 60%;
  --l0: var(--hor) + 0 * 0 * var(--distance) + (((0 + 1) * (0 + 1) * var(--distance) - 0 * 0 * var(--distance)) * var(--pos));
  --l1: var(--hor) + 1 * 1 * var(--distance) + (((1 + 1) * (1 + 1) * var(--distance) - 1 * 1 * var(--distance)) * var(--pos));
  --l2: var(--hor) + 2 * 2 * var(--distance) + (((2 + 1) * (2 + 1) * var(--distance) - 2 * 2 * var(--distance)) * var(--pos));
  --l3: var(--hor) + 3 * 3 * var(--distance) + (((3 + 1) * (3 + 1) * var(--distance) - 3 * 3 * var(--distance)) * var(--pos));
  --l4: var(--hor) + 4 * 4 * var(--distance) + (((4 + 1) * (4 + 1) * var(--distance) - 4 * 4 * var(--distance)) * var(--pos));
  --l5: var(--hor) + 5 * 5 * var(--distance) + (((5 + 1) * (5 + 1) * var(--distance) - 5 * 5 * var(--distance)) * var(--pos));
  --l6: var(--hor) + 6 * 6 * var(--distance) + (((6 + 1) * (6 + 1) * var(--distance) - 6 * 6 * var(--distance)) * var(--pos));
  --l7: var(--hor) + 7 * 7 * var(--distance) + (((7 + 1) * (7 + 1) * var(--distance) - 7 * 7 * var(--distance)) * var(--pos));
  --l8: var(--hor) + 8 * 8 * var(--distance) + (((8 + 1) * (8 + 1) * var(--distance) - 8 * 8 * var(--distance)) * var(--pos));
  --l9: var(--hor) + 9 * 9 * var(--distance) + (((9 + 1) * (9 + 1) * var(--distance) - 9 * 9 * var(--distance)) * var(--pos));
  --lgh: linear-gradient(transparent 0px var(--hor), var(--c1) var(--hor) calc(var(--hor) + 2px), transparent calc(var(--hor) + 2px));
  --lg0: linear-gradient(transparent 0px calc(var(--l0)), var(--c1) calc(var(--l0)) calc(var(--l0) + 2px), transparent calc(var(--l0) + 2px));
  --lg1: linear-gradient(transparent 0px calc(var(--l1)), var(--c1) calc(var(--l1)) calc(var(--l1) + 2px), transparent calc(var(--l1) + 2px));
  --lg2: linear-gradient(transparent 0px calc(var(--l2)), var(--c1) calc(var(--l2)) calc(var(--l2) + 2px), transparent calc(var(--l2) + 2px));
  --lg3: linear-gradient(transparent 0px calc(var(--l3)), var(--c1) calc(var(--l3)) calc(var(--l3) + 2px), transparent calc(var(--l3) + 2px));
  --lg4: linear-gradient(transparent 0px calc(var(--l4)), var(--c1) calc(var(--l4)) calc(var(--l4) + 2px), transparent calc(var(--l4) + 2px));
  --lg5: linear-gradient(transparent 0px calc(var(--l5)), var(--c1) calc(var(--l5)) calc(var(--l5) + 2px), transparent calc(var(--l5) + 2px));
  --lg6: linear-gradient(transparent 0px calc(var(--l6)), var(--c1) calc(var(--l6)) calc(var(--l6) + 2px), transparent calc(var(--l6) + 2px));
  --lg7: linear-gradient(transparent 0px calc(var(--l7)), var(--c1) calc(var(--l7)) calc(var(--l7) + 2px), transparent calc(var(--l7) + 2px));
  --lg8: linear-gradient(transparent 0px calc(var(--l8)), var(--c1) calc(var(--l8)) calc(var(--l8) + 2px), transparent calc(var(--l8) + 2px));
  --lg9: linear-gradient(transparent 0px calc(var(--l9)), var(--c1) calc(var(--l9)) calc(var(--l9) + 2px), transparent calc(var(--l9) + 2px));
  background: var(--lgDepth),
              var(--lgh),
              var(--lg0),
              var(--lg1),
              var(--lg2),
              var(--lg3),
              var(--lg4),
              var(--lg5),
              var(--lg6),
              var(--lg7),
              var(--lg8),
              var(--lg9),
              var(--mtn) center 60% / min(75vh, 75vw) no-repeat,
              var(--mtn2) center 60% / min(75vh, 75vw) repeat-x,
              linear-gradient(transparent 20%, var(--c5) 60%, var(--c3) 60% 70%, hsla(var(--c2hsl), 0.75), transparent 150%),
              repeating-linear-gradient(90deg, transparent 0px 2px, var(--c3) 3px 4px),
              radial-gradient(circle at center, transparent min(45vh, 45vw), hsla(var(--c2hsl), 0.75) min(65vh, 65vw), var(--c3) 120%),
              linear-gradient(
                transparent 30vh,
                  var(--c5) 30vh 30.2vh,
                     transparent 30.2vh 35.2vh,
                              var(--c5) 35.2vh 36vh,
                                   transparent 36vh 40vh,
                                          var(--c5) 40vh 41.6vh,
                                             transparent 41.6vh 45.1vh,
                                                      var(--c5) 45.1vh 48.6vh,
                                                           transparent 48.6vh 52.5vh,
                                                                    var(--c5) 52.5vh 57.5vh,
                                                                         transparent 57.5vh
              ),
              radial-gradient(circle at center, var(--c4) min(45vh, 45vw), transparent min(45vh, 45vw)),
              linear-gradient(var(--c5) 60%, var(--c3) 60%, var(--c2) 100%);
}

body.dos-mode {
  background-color: #000080;
  font-family: 'Courier New', monospace;
}

/* Boot Animation Screen */
.boot-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000080;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  font-family: 'Courier New', monospace;
  color: #00ff00;
  animation: fadeOut 0.5s ease-out 3s forwards;
  box-shadow: inset 0 0 30px rgba(0, 255, 0, 0.3);
}

.boot-screen.hidden {
  display: none;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.boot-animation {
  text-align: left;
  width: 90%;
  max-width: 700px;
  padding: 20px;
  border: 2px solid #00ff00;
  box-shadow: 0 0 20px #00ff00;
  z-index: 10000;
  position: relative;
}

.boot-text {
  font-size: 16px;
  margin-bottom: 20px;
  animation: blink 1s infinite;
  text-shadow: 0 0 10px #00ff00;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.7; }
}

.boot-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.boot-line {
  font-size: 14px;
  line-height: 1.6;
  text-shadow: 0 0 5px #00ff00;
  animation: fadeInLine 0.5s ease forwards;
}

.boot-line:nth-child(1) { animation-delay: 0.2s; }
.boot-line:nth-child(2) { animation-delay: 0.4s; }
.boot-line:nth-child(3) { animation-delay: 0.6s; }
.boot-line:nth-child(4) { animation-delay: 0.8s; }
.boot-line:nth-child(5) { animation-delay: 1s; }

@keyframes fadeInLine {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.boot-cursor {
  color: #ffff55;
  margin-right: 8px;
  animation: cursorBlink 1s infinite;
  text-shadow: 0 0 10px #ffff55;
}

@keyframes cursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.3; }
}

body.dos-mode::before {
  --sun-y: 30%;
  --sun-x: 50%;
  box-shadow: inset -400px -150px 100px 60px rgba(255, 200, 0, 0.3), inset -350px -100px 100px 40px rgba(255, 150, 0, 0.15);
}

.main-window {
  width: 100%;
  max-width: 900px;
  z-index: 100;
  animation: slideIn 0.5s ease-out;
  display: none;
  position: relative;
}

.main-window.visible {
  display: block;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* CV Section */
.cv-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.cv-section {
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
  padding: 16px;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  box-shadow: 1px 1px 0 0 #000000, inset 1px 1px 0 0 #ffffff;
}

.cv-section h3 {
  margin: 0 0 12px 0;
  color: #000080;
  font-size: 16px;
  border-bottom: 2px solid #c0c0c0;
  padding-bottom: 8px;
}

.cv-item {
  margin: 12px 0;
}

.cv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.cv-header strong {
  color: #000080;
  font-weight: bold;
}

.cv-date {
  color: #666;
  font-size: 12px;
  white-space: nowrap;
}

.cv-subtitle {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #666;
  font-style: italic;
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-badge {
  display: inline-block;
  padding: 6px 12px;
  background: #2b5dcd;
  color: white;
  border: 1px solid #1c3b82;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
}

.skill-badge:hover {
  background: #3e73eb;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* DOS Mode Base Classes */
body.dos-mode .cv-section,
body.dos-mode .skill-category,
body.dos-mode .platform-card,
body.dos-mode .cert-item,
body.dos-mode .expertise-card,
body.dos-mode .project-item {
  background: black;
  border: 2px solid #00ff00;
  color: #00ff00;
  box-shadow: none;
  text-shadow: 0 0 3px #00ff00;
}

body.dos-mode .cv-section h3,
body.dos-mode .skill-category h4,
body.dos-mode .platform-card h4,
body.dos-mode .cert-item h4,
body.dos-mode .expertise-card h4,
body.dos-mode .project-item h3 {
  color: #ffff55;
  border-color: #00ff00;
  text-shadow: 0 0 3px #ffff55;
}

body.dos-mode .cv-item,
body.dos-mode .cv-header strong,
body.dos-mode .cv-date,
body.dos-mode .cv-subtitle,
body.dos-mode .skill-category ul,
body.dos-mode .platform-card p,
body.dos-mode .cert-item p,
body.dos-mode .expertise-card p,
body.dos-mode .project-item p {
  color: #00ff00;
}

body.dos-mode .skill-badge {
  background: #000080;
  color: #ffff55;
  border: 1px solid #00ff00;
}

body.dos-mode .main-window {
  border: none;
  background: black;
  max-width: 100%;
}

body.dos-mode .window { background: #000080; border: none; }
body.dos-mode .title-bar { background: #00aaaa; color: #000000; border: none; padding: 2px; }
body.dos-mode .title-bar-text { color: #000000; font-weight: bold; font-size: 14px; text-shadow: none; }
body.dos-mode .title-bar-controls { display: none; }

body.dos-mode .window-body {
  background: black;
  color: #00ff00;
  border: 2px solid #00ff00;
  padding: 20px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.8;
  max-height: 80vh;
  overflow-y: auto;
  text-shadow: 0 0 5px #00ff00;
}

body.dos-mode h1,
body.dos-mode h3 { color: #ffff55; text-shadow: 0 0 3px #ffff55; font-weight: bold; }
body.dos-mode h4 { color: #ffff55; }
body.dos-mode p { color: #00ff00; }
body.dos-mode .profile-img { border: 2px solid #00ff00; filter: brightness(1.2); }

body.dos-mode nav ul {
  background: #00aaaa;
  border: none;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}

body.dos-mode nav ul li a {
  color: #000000;
  background: #00aaaa;
  padding: 5px 10px;
  margin: 5px;
  border: 1px solid;
  border-color: #ffffff #555555 #555555 #ffffff;
  font-weight: bold;
}

body.dos-mode nav ul li a:hover {
  transform: scale(1);
  background: #00ffff;
  color: #000000;
  text-shadow: none;
}

body.dos-mode .project-item a,
body.dos-mode .platform-link {
  background: #000080;
  color: #ffff55;
  border: 1px solid #00ff00;
}

body.dos-mode .project-item a:hover,
body.dos-mode .platform-link:hover {
  background: #00ff00;
  color: #000080;
}

body.dos-mode fieldset { border: 2px solid #00ff00; background: black; color: #00ff00; }
body.dos-mode legend { color: #ffff55; background: black; text-shadow: 0 0 3px #ffff55; }
body.dos-mode .status-bar { background: #00aaaa; border: 2px solid #00ff00; color: #000000; }
body.dos-mode .status-bar-field { color: #000000; border-right-color: #00ffff; border-bottom-color: #555555; font-weight: bold; }
body.dos-mode .cert-badge { color: #ffff55; }

body .title-bar-text { color: white; text-shadow: 1px 1px 0 #000080; font-weight: bold; }
body .window-body h1, body fieldset legend { text-shadow: 1px 1px 1px #c0c0c0; }

nav ul {
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 15px;
  background: #ece9d8;
  border: 1px inset white;
  padding: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
  display: inline-block;
  transition: transform 0.2s;
}

.profile-container {
  text-align: center;
  margin-bottom: 20px;
}

.profile-img {
  border: 2px solid #808080;
  padding: 2px;
  background: white;
  width: 100%;
  max-width: 260px;
  height: auto;
  cursor: pointer;
  transition: all 0.3s ease;
}

.profile-img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 15px;
  padding: 0;
}

/* Skills Section */
.skills-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.skill-category {
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
  padding: 16px;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  box-shadow: 1px 1px 0 0 #000000, inset 1px 1px 0 0 #ffffff;
  transition: all 0.2s ease;
}

.skill-category:hover {
  box-shadow: 1px 1px 0 0 #000000, inset 1px 1px 0 0 #ffffff, 0 2px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.skill-category h4 {
  margin: 0 0 12px 0;
  color: #000080;
  font-size: 14px;
  border-bottom: 2px solid #c0c0c0;
  padding-bottom: 8px;
}

.skill-category ul {
  margin: 8px 0;
  padding-left: 20px;
  list-style: disc;
}

.skill-category li {
  margin: 6px 0;
  font-size: 13px;
  color: #333;
}

.platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.platform-card {
  background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
  padding: 16px;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  box-shadow: 1px 1px 0 0 #000000, inset 1px 1px 0 0 #ffffff;
  text-align: center;
  transition: all 0.2s ease;
}

.platform-card:hover {
  box-shadow: 1px 1px 0 0 #000000, inset 1px 1px 0 0 #ffffff, 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
}

.platform-card h4 {
  margin: 0 0 10px 0;
  color: #000080;
  font-size: 16px;
  font-weight: bold;
}

.platform-card p {
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #333;
}

.platform-link {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 16px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.1s;
}

.platform-link:hover { background: #d0d0d0; }
.platform-link:active {
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  box-shadow: inset 1px 1px 0 0 #000;
}

.project-item {
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
  padding: 16px;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  box-shadow: 1px 1px 0 0 #000000, inset 1px 1px 0 0 #ffffff;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.project-item:hover {
  box-shadow: 1px 1px 0 0 #000000, inset 1px 1px 0 0 #ffffff, 0 2px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.project-item h3 {
  margin: 0 0 10px 0;
  color: #000080;
  font-size: 16px;
  border-bottom: 1px dotted #c0c0c0;
  padding-bottom: 8px;
}

.project-item p {
  margin: 8px 0;
  flex-grow: 1;
  line-height: 1.5;
  font-size: 13px;
}

.project-item a {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.1s;
  text-align: center;
}

.project-item a:active {
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  box-shadow: inset 1px 1px 0 0 #000;
}

.project-item a:hover { background: #d0d0d0; }

html[lang="fr"] .lang-en { display: none !important; }
html[lang="en"] .lang-fr { display: none !important; }

.lang-switch-btn {
  float: right;
  margin-bottom: 10px;
  min-width: 80px;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  padding: 2px 4px;
  font-size: 11px;
  height: 22px;
  gap: 4px;
}

.status-bar-field {
  margin: 0;
  padding: 0 6px;
  flex: 1;
  text-align: center;
  border-right: 1px solid #dfdfdf;
  border-bottom: 1px solid #808080;
  color: #000;
}

.status-bar-field:last-child { border-right: none; }

.theme-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.theme-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  animation: slideInCenter 0.3s ease;
}

@keyframes slideInCenter {
  from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.theme-modal-content {
  background: white;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  box-shadow: 1px 1px 0 0 #000000, inset 1px 1px 0 0 #ffffff;
  padding: 20px;
  min-width: 300px;
  max-width: 500px;
  width: 90vw;
}

.theme-modal-content h3 {
  margin: 0 0 20px 0;
  color: #000080;
  font-size: 16px;
  border-bottom: 2px solid #c0c0c0;
  padding-bottom: 10px;
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Tahoma', sans-serif;
  font-weight: bold;
}

.theme-option:hover { background: #dfdfdf; }
.theme-option:active {
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  box-shadow: inset 1px 1px 0 0 #000;
}

.theme-icon { font-size: 24px; }
.theme-name { font-size: 12px; text-align: center; }

.theme-close {
  width: 100%;
  padding: 8px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  cursor: pointer;
  font-family: 'Tahoma', sans-serif;
  font-weight: bold;
  transition: all 0.1s;
}

.theme-close:active {
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  box-shadow: inset 1px 1px 0 0 #000;
}
.theme-close:hover { background: #dfdfdf; }

.pdf-modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  justify-content: center;
  align-items: center;
}

.pdf-modal-backdrop.active { display: flex; }

.pdf-modal-content {
  position: relative;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  box-shadow: 1px 1px 0 0 #000000, inset 1px 1px 0 0 #ffffff;
  width: 95vw;
  height: 95vh;
  display: flex;
  flex-direction: column;
}

.pdf-modal-header {
  background: linear-gradient(to right, #000080, #1084d7);
  color: white;
  padding: 4px 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
  border-bottom: 2px solid #c0c0c0;
}

.pdf-modal-close {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  width: 26px;
  height: 23px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #000080;
}

.pdf-modal-close:hover { background: #dfdfdf; }
.pdf-modal-close:active {
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  box-shadow: inset 1px 1px 0 0 #000;
}

.pdf-iframe-container {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.pdf-iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.cv-pdf-button {
  display: inline-block;
  margin-top: 15px;
  padding: 8px 16px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  cursor: pointer;
  font-family: 'Tahoma', sans-serif;
  font-weight: bold;
  color: #000080;
  transition: all 0.1s;
}

.cv-pdf-button:hover { background: #dfdfdf; }
.cv-pdf-button:active {
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  box-shadow: inset 1px 1px 0 0 #000;
}

/* Tablet/Small Desktop Optimization */
@media (max-width: 768px) {
  body { padding: 8px; }
  .main-window { max-width: 95vw; }

  nav ul { flex-direction: column; gap: 0; padding: 8px 0; }
  nav ul li { width: 100%; }
  nav ul li a { display: block; padding: 8px; border-bottom: 1px solid #c0c0c0; font-size: 13px; }
  nav ul li:last-child a { border-bottom: none; }

  .profile-container { padding: 8px; margin-bottom: 15px; }
  .projects-grid, .skills-container, .platforms-grid, .expertise-grid, .cv-container {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .skill-category, .platform-card, .expertise-card, .project-item, .cert-item { padding: 12px; }
  .theme-modal-content { min-width: auto; max-width: calc(100vw - 20px); padding: 15px; }
  .theme-options { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .theme-option { padding: 12px 8px; gap: 6px; }
  .lang-switch-btn { min-width: 65px; font-size: 11px; padding: 6px 8px; margin-right: 5px; }
}

/* Mobile Optimization */
@media (max-width: 480px) {
  body { padding: 4px; }
  .main-window { max-width: 100%; width: 100%; }
  .window-body { padding: 10px !important; }
  .profile-container { padding: 4px; margin-bottom: 12px; }

  h2 { font-size: 14px; }
  h3 { font-size: 13px; }
  nav { margin: 8px 0; }

  nav ul { padding: 4px 0; gap: 0; flex-direction: column; }
  nav ul li { width: 100%; }
  nav ul li a { font-size: 11px; padding: 6px; border-bottom: 1px solid #c0c0c0; display: block; }
  nav ul li:last-child a { border-bottom: none; }

  .projects-grid, .skills-container, .platforms-grid, .expertise-grid, .cv-container, .certifications-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .skill-category, .platform-card, .expertise-card, .project-item, .cert-item, .cv-section {
    padding: 10px;
    border: 1px solid;
    border-color: #dfdfdf #808080 #808080 #dfdfdf;
    box-shadow: none;
  }

  .project-item p { font-size: 11px; margin: 6px 0; }
  .project-item a { padding: 4px 8px; font-size: 10px; margin-top: 8px; }
  .platform-link { padding: 5px 12px; font-size: 10px; margin-top: 8px; }

  .lang-switch-btn {
    min-width: 55px;
    font-size: 9px;
    padding: 4px 6px;
    margin-right: 3px;
    margin-bottom: 4px;
  }

  /* Theme Modal Mobile */
  .theme-modal {
    position: fixed;
    top: auto;
    bottom: 20px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-height: 70vh;
    overflow-y: auto;
  }
  .theme-modal-content { min-width: auto; max-width: calc(100vw - 16px); width: calc(100vw - 16px); padding: 12px; }

  /* PDF Modal Mobile */
  .pdf-modal-content { width: 100vw; height: 100vh; border: none; box-shadow: none; }
  .pdf-modal-header { font-size: 12px; padding: 3px 2px; }
  .pdf-modal-close { width: 24px; height: 24px; font-size: 14px; }
}

@media (hover: none) and (pointer: coarse) {
  .profile-img:hover { transform: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
  .skill-category:hover, .platform-card:hover, .expertise-card:hover, .project-item:hover, .cert-item:hover {
    transform: none;
  }
  .project-item a:active, .platform-link:active, .theme-option:active, .theme-close:active, .lang-switch-btn:active {
    border-color: #808080 #dfdfdf #dfdfdf #808080;
    box-shadow: inset 1px 1px 0 0 #000;
  }
}