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

body {
  font-family: 'Tahoma', 'Segoe UI', sans-serif;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  cursor: default;
  user-select: none;
}


@media (pointer: fine) {
  * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0 0 L0 16 L4 12 L7 18 L9 17 L6 11 L11 11 Z' fill='white' stroke='black' stroke-width='1'/%3E%3C/svg%3E") 0 0, default; }
}


#login-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #4a78cc 0%, #3d6abf 60%, #3060b8 100%);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: opacity 0.6s ease;
  overflow: hidden;
  font-family: 'Tahoma', Arial, sans-serif;
}

#login-screen.fade-out { opacity: 0; pointer-events: none; }

.xp-top-stripe {
  flex-shrink: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #1a3488 0%, #1a3488 2%,
    #5590e8 8%, #70aaff 15%,
    #c8d8f8 25%, #ffffff 30%,
    #c8d8f8 35%, #70aaff 45%,
    #5590e8 55%, #70aaff 62%,
    #c8d8f8 68%, #ffffff 72%,
    #c8d8f8 76%, #70aaff 84%,
    #5590e8 90%, #1a3488 98%, #1a3488 100%
  );
}

.xp-login-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.xp-left {
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  position: relative;
  padding: 0 40px;
}

.xp-left::after {
  content: '';
  position: absolute;
  right: 0; top: 8%; bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.40) 15%,
    rgba(255,255,255,0.40) 85%,
    rgba(255,255,255,0) 100%
  );
}


.xp-tagline {
  font-size: 13px;
  color: #c0d8f8;
  text-align: center;
  margin-top: 2px;
}

.xp-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 60px;
  gap: 10px;
}

.xp-user {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px 8px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
  width: fit-content;
}
.xp-user:hover { background: rgba(255,255,255,0.16); }
.xp-user:hover .xp-uname { color: #ffe87a; }

.xp-avatar {
  width: 64px; height: 64px;
  border-radius: 8px;
  border: 3px solid rgba(255,255,255,0.65);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
  background: #5580c8;
}
.xp-avatar svg { width: 100%; height: 100%; display: block; }

.xp-uname {
  font-size: 17px;
  font-weight: bold;
  color: #ffffff;
  transition: color 0.1s;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  line-height: 1.2;
}

.xp-ustatus {
  font-size: 11.5px;
  color: #90c0f0;
  font-style: italic;
  margin-top: 3px;
  line-height: 1;
}

.xp-bottom-bar {
  flex-shrink: 0;
  height: 56px;
  background: linear-gradient(180deg, #1848a8 0%, #0e3898 100%);
  border-top: 1px solid rgba(255,255,255,0.20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.xp-turnoff {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 13px;
  font-family: 'Tahoma', Arial, sans-serif;
  cursor: pointer;
  padding: 4px 10px 4px 4px;
  border-radius: 4px;
}
.xp-turnoff:hover { background: rgba(255,255,255,0.12); }

.xp-power-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #f86020, #b82000);
  border: 2px solid #ff7040;
  box-shadow: 0 0 8px rgba(220,60,0,0.7), inset 0 1px 2px rgba(255,200,150,0.4);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.xp-power-icon svg { width: 14px; height: 14px; }

.xp-help {
  font-size: 11px;
  color: #8ab0e0;
  font-family: 'Tahoma', Arial, sans-serif;
  text-align: right;
  line-height: 1.55;
}


#desktop {
  position: fixed;
  inset: 0;
  background: url('../img/background.jpg') center center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

#desktop.visible {
  opacity: 1;
  pointer-events: all;
}



.desktop-icons {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border-radius: 3px;
  cursor: pointer;
  width: 72px;
}
.desktop-icon:hover { background: rgba(49,106,197,0.4); }
.desktop-icon.selected { background: rgba(49,106,197,0.55); outline: 1px dotted rgba(255,255,255,0.6); }

.desktop-icon .icon-img { width: 32px; height: 32px; }

.desktop-icon span {
  font-size: 11px;
  color: white;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  line-height: 1.2;
}


#taskbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30px;
  background: linear-gradient(180deg, #245edc 0%, #1a4fbf 40%, #1a4fbf 60%, #1041b0 100%);
  border-top: 1px solid #3b7fff;
  display: flex;
  align-items: center;
  z-index: 9999;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.4);
}

#start-btn {
  height: 30px;
  padding: 0 10px 0 6px;
  background: linear-gradient(180deg, #3a78e0 0%, #2259c8 40%, #1a4fbf 60%, #1041b0 100%);
  border: none;
  border-right: 1px solid #0d35a0;
  border-radius: 0 12px 12px 0;
  color: white;
  font-weight: bold;
  font-style: italic;
  font-size: 13px;
  font-family: 'Tahoma', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 1px 0 3px rgba(0,0,0,0.3);
  margin-right: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
#start-btn:hover {
  background: linear-gradient(180deg, #5090f0 0%, #3370e0 40%, #2860d0 60%, #1a50c0 100%);
}

.start-win-icon {
  width: 16px; height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.taskbar-tasks {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  overflow: hidden;
  min-width: 0;
}

.task-btn {
  height: 22px;
  padding: 0 8px;
  background: linear-gradient(180deg, #3d7bd4 0%, #2a5fbe 100%);
  border: 1px solid #1a3fa0;
  border-radius: 3px;
  color: white;
  font-size: 11px;
  font-family: 'Tahoma', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  flex-shrink: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.task-btn.active {
  background: linear-gradient(180deg, #1a3fa0 0%, #2a5fbe 100%);
  border-color: #0a2f90;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}
.task-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}


.task-btn[style*="display: none"],
.task-btn[style*="display:none"] { display: none !important; }

.taskbar-tray {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  height: 100%;
  background: linear-gradient(180deg, #1241c0 0%, #0d35aa 100%);
  border-left: 1px solid #0a2f90;
  font-size: 11px;
  color: white;
  flex-shrink: 0;
}

.tray-icon {
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tray-icon:hover { background: rgba(255,255,255,0.18); }

#clock {
  padding: 2px 5px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}
#clock:hover { background: rgba(255,255,255,0.18); }


#start-menu {
  position: absolute;
  bottom: 30px; left: 0;
  width: 380px;
  background: white;
  border: 1px solid #0a2a7a;
  border-radius: 8px 8px 0 0;
  box-shadow: 3px -3px 12px rgba(0,0,0,0.5);
  z-index: 99999;
  display: none;
  overflow: hidden;
  font-family: 'Tahoma', Arial, sans-serif;
}
#start-menu.open { display: block; }

.sm-header {
  background: linear-gradient(90deg, #1a5fa8 0%, #3a8fe8 100%);
  height: 54px;
  display: flex; align-items: center;
  gap: 10px;
  padding: 0 14px;
}
.sm-header-avatar {
  width: 40px; height: 40px;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.5);
  overflow: hidden; background: #3a6fba; flex-shrink: 0;
}
.sm-header-avatar svg { width: 100%; height: 100%; display: block; }
.sm-header-name { font-size: 14px; font-weight: bold; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }

.sm-body { display: flex; height: 340px; }
.sm-left { width: 190px; background: white; border-right: 1px solid #d8d0c8; display: flex; flex-direction: column; }
.sm-pinned { flex: 1; overflow: hidden; }
.sm-divider { height: 1px; background: #d8d0c8; margin: 2px 0; }

.sm-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; cursor: pointer;
  font-size: 11.5px; color: #000; text-decoration: none;
}
.sm-item:hover { background: #316ac5; color: white; }
.sm-item:hover .sm-sub { color: rgba(255,255,255,0.8); }

.sm-icon {
  width: 26px; height: 26px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.sm-icon-noBg { background: transparent !important; border: none !important; }
.sm-icon-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
}
.sm-label { flex: 1; line-height: 1.2; }
.sm-label strong { display: block; font-weight: bold; }
.sm-sub { font-size: 10px; color: #555; }

.sm-allprograms {
  height: 28px;
  background: linear-gradient(180deg, #e8e4d8 0%, #d8d4c8 100%);
  display: flex; align-items: center; padding: 0 8px; gap: 6px;
  cursor: pointer; font-size: 11.5px; font-weight: bold;
  border-top: 1px solid #b8b4a8;
}
.sm-allprograms:hover { background: #316ac5; color: white; }

.sm-arrow-green {
  width: 20px; height: 20px;
  background: linear-gradient(180deg, #5cb85c, #2d8c2d);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 12px;
}

.sm-right {
  flex: 1; background: #d8e8f8;
  border-left: 1px solid #a8c8e8;
  display: flex; flex-direction: column;
}
.sm-right-section { padding: 4px 0; }
.sm-right-divider { height: 1px; background: #a8c0d8; margin: 3px 8px; }

.sm-right-item {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px; cursor: pointer; font-size: 11.5px; color: #000;
}
.sm-right-item:hover { background: #316ac5; color: white; }
.sm-right-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.sm-right-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  image-rendering: pixelated;
}

.sm-footer {
  background: linear-gradient(180deg, #1848a8 0%, #0e3898 100%);
  height: 32px; display: flex; align-items: center;
  justify-content: flex-end; padding: 0 10px; gap: 8px;
}
.sm-footer-btn {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; color: white;
  font-size: 11px; font-family: 'Tahoma', Arial, sans-serif;
  cursor: pointer; padding: 3px 7px; border-radius: 3px;
}
.sm-footer-btn:hover { background: rgba(255,255,255,0.15); }


.tray-popup {
  position: absolute;
  bottom: 34px; right: 6px;
  background: #fffbe8;
  border: 1px solid #9a8060;
  border-radius: 4px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.35);
  z-index: 99999;
  display: none;
  font-family: 'Tahoma', Arial, sans-serif;
  font-size: 11px;
}
.tray-popup.open { display: block; }

#popup-volume {
  width: 52px; padding: 10px 8px;
  display: none; flex-direction: column; align-items: center; gap: 6px;
  bottom: 34px; right: 80px;
  background: #f0f0f0; border: 1px solid #808080; border-radius: 4px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.35);
}
#popup-volume.open { display: flex; }

.vol-title { font-size: 10px; color: #333; font-family: 'Tahoma', Arial, sans-serif; text-align: center; }
.vol-slider-wrap { display: flex; flex-direction: column; align-items: center; height: 80px; justify-content: center; }

input[type=range].vol-slider {
  writing-mode: vertical-lr; direction: rtl;
  appearance: slider-vertical; width: 20px; height: 70px; cursor: pointer;
}

.vol-mute {
  width: 20px;
  height: 20px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vol-mute:hover { border-color: #8ea3c5; background: #e4ebf6; }
.mini-volume-icon {
  width: 14px;
  height: 14px;
  display: block;
}

#popup-internet {
  width: 200px; padding: 8px 10px;
  bottom: 34px; right: 54px;
  background: #fffbe8; border: 1px solid #9a8060;
}
#popup-internet .pi-title {
  font-weight: bold; font-size: 11px; margin-bottom: 5px;
  color: #333; border-bottom: 1px solid #d0c0a0; padding-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
#popup-internet .pi-title-icon { width: 13px; height: 13px; flex-shrink: 0; }
.tray-network-icon { width: 14px; height: 14px; display: block; }
#popup-internet .pi-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 11px; color: #333; }
#popup-internet .pi-status { color: #008000; font-weight: bold; }

#popup-clock {
  width: 220px; padding: 8px;
  bottom: 34px; right: 6px;
  background: #f0f0f0; border: 1px solid #808080;
  border-radius: 4px; box-shadow: 2px 2px 8px rgba(0,0,0,0.35);
}
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-month { font-size: 12px; font-weight: bold; color: #003399; font-family: 'Tahoma', Arial, sans-serif; }
.cal-nav {
  background: none; border: 1px solid #a0a0a0; border-radius: 2px;
  cursor: pointer; font-size: 10px; padding: 1px 5px; font-family: 'Tahoma', Arial, sans-serif;
}
.cal-nav:hover { background: #e0e0e0; }
.cal-grid { width: 100%; border-collapse: collapse; font-size: 11px; font-family: 'Tahoma', Arial, sans-serif; }
.cal-grid th { color: #003399; text-align: center; padding: 2px; font-size: 10px; }
.cal-grid td { text-align: center; padding: 2px 4px; cursor: pointer; border-radius: 2px; color: #000; }
.cal-grid td:hover { background: #316ac5; color: white; }
.cal-grid td.today { background: #316ac5; color: white; font-weight: bold; }
.cal-grid td.other-month { color: #aaa; }
.cal-time-display { text-align: center; font-size: 22px; font-weight: bold; color: #003399; margin-top: 8px; font-family: 'Tahoma', Arial, sans-serif; letter-spacing: 2px; }
.cal-date-full { text-align: center; font-size: 10px; color: #555; margin-top: 2px; font-family: 'Tahoma', Arial, sans-serif; }


.xp-window {
  position: absolute;
  min-width: 200px; min-height: 100px;
  border-radius: 8px 8px 0 0;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.1);
  z-index: 100;
  overflow: hidden;
  border: 1px solid #0a2a7a;
}

.resize-handle {
  position: absolute;
  bottom: 0; right: 0;
  width: 14px; height: 14px;
  cursor: nwse-resize;
  z-index: 10;
  background:
    linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.18) 50%) no-repeat 2px 2px / 4px 4px,
    linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.18) 50%) no-repeat 6px 6px / 4px 4px,
    linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.18) 50%) no-repeat 10px 10px / 4px 4px;
}
.xp-window.focused {
  z-index: 200;
  box-shadow: 3px 3px 15px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.15);
}

.xp-titlebar {
  height: 28px;
  background: linear-gradient(180deg, #4d9ff0 0%, #2170d8 8%, #1a5fce 50%, #1254c4 92%, #0a3ab0 100%);
  display: flex; align-items: center;
  padding: 0 4px 0 8px;
  cursor: grab;
  border-radius: 7px 7px 0 0;
  position: relative;
  user-select: none;
}
.xp-titlebar:active { cursor: grabbing; }
.xp-titlebar::before {
  content: '';
  position: absolute;
  top: 1px; left: 0; right: 76px; height: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent);
  border-radius: 7px 7px 0 0;
  pointer-events: none;
}

.title-icon { width: 16px; height: 16px; margin-right: 4px; flex-shrink: 0; }
.title-text {
  flex: 1; font-size: 11px; font-weight: bold; color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.title-buttons {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.tb {
  width: 21px; height: 21px; border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: bold; color: white;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  box-sizing: border-box;
  overflow: hidden;
}
.tb-min { background: linear-gradient(180deg, #68b0f8 0%, #3880d8 50%, #2060c0 100%); }
.tb-min:hover { background: linear-gradient(180deg, #80c8ff 0%, #5098f0 50%, #3878d8 100%); }
.tb-max { background: linear-gradient(180deg, #68b0f8 0%, #3880d8 50%, #2060c0 100%); }
.tb-max:hover { background: linear-gradient(180deg, #80c8ff 0%, #5098f0 50%, #3878d8 100%); }
.tb-close { background: linear-gradient(180deg, #f87070 0%, #e83838 50%, #c82020 100%); }
.tb-close:hover { background: linear-gradient(180deg, #ff9090 0%, #ff5050 50%, #e03030 100%); }

.window-body {
  background: #ece9d8;
  height: calc(100% - 28px);
  overflow: auto;
}


#win-identity {
  width: 260px; height: 420px;
  top: 45px; left: 310px;
}

#win-trajetoria {
  width: 390px; height: 330px;
  top: 370px; left: 170px;
}

#win-habilidades {
  width: 240px; height: 250px;
  top: 95px; left: 775px;
}

#win-contato {
  width: 360px; height: 360px;
  top: 365px; left: 755px;
}

#win-cs {
  width: 560px; height: 390px;
  top: 150px; left: 390px;
}

.cs-game-body {
  display: flex;
  flex-direction: column;
  background: #ece9d8;
  overflow: hidden;
}

.cs-menu-bar {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 8px;
  background: #ece9d8;
  border-bottom: 1px solid #aca899;
  color: #222;
  font-size: 11px;
  flex-shrink: 0;
}

.cs-menu-bar span {
  cursor: default;
}

.cs-game-screen {
  flex: 1;
  min-height: 0;
  background: #050505;
  border: 2px inset #d4d0c8;
  margin: 4px;
  overflow: hidden;
}

.cs-game-screen img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


.identity-body { background: #ece9d8; height: 100%; display: flex; flex-direction: column; }
.identity-avatar-col {
  width: 100%; height: 220px; background: #2a2a2a;
  flex-shrink: 0; overflow: hidden; position: relative;
  border-bottom: 2px solid #808080;
}
.identity-avatar {
  width: 100%; height: 100%; overflow: hidden; background: #7a9dc8;
}
.identity-avatar img { object-position: center 15%; }
.identity-content { padding: 10px 12px; flex: 1; min-height: 0; overflow-y: auto; }
.identity-name { font-size: 13px; font-weight: bold; color: #003399; margin-bottom: 2px; }
.identity-title { font-size: 11px; color: #555; margin-bottom: 8px; }
.identity-bio { font-size: 10.5px; color: #333; line-height: 1.4; }

.explorer-toolbar {
  height: 24px;
  background: linear-gradient(180deg, #f0ede4 0%, #e0ddd4 100%);
  border-bottom: 1px solid #a0a0a0;
  display: flex; align-items: center; padding: 0 4px; gap: 2px;
}
.explorer-btn {
  height: 20px; padding: 0 6px;
  background: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 100%);
  border: 1px solid #a0a0a0; border-radius: 2px;
  font-size: 10px; font-family: 'Tahoma', sans-serif; cursor: pointer; color: #333;
}
.explorer-btn:hover { background: linear-gradient(180deg, #fff 0%, #f0f0f0 100%); }
.explorer-address {
  flex: 1; height: 18px; background: white; border: 1px solid #7a7a7a;
  border-radius: 1px; font-size: 10px; padding: 0 4px;
  font-family: 'Tahoma', sans-serif;
  display: flex; align-items: center; gap: 4px; overflow: hidden;
}
.addr-folder-icon { width: 14px; height: 14px; flex-shrink: 0; }

.explorer-item {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; font-size: 11px; color: #000; cursor: pointer;
}
.explorer-item:hover { background: #316ac5; color: white; }
.folder-icon-16 { width: 16px; height: 14px; flex-shrink: 0; }
.doc-icon-16 { width: 14px; height: 16px; flex-shrink: 0; }


.skill-item {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; font-size: 11px; cursor: pointer;
}
.skill-item:hover { background: #316ac5; color: white; }
.skill-item:hover .skill-bar-bg { background: rgba(255,255,255,0.2); }
.skill-item:hover .skill-bar-fill { background: white; }
.skill-bar-bg { flex: 1; height: 6px; background: #c8c0b4; border-radius: 3px; overflow: hidden; max-width: 80px; }
.skill-bar-fill { height: 100%; background: linear-gradient(90deg, #316ac5, #5090f0); border-radius: 3px; transition: width 1s ease; }

.section-header-gap { margin-top: 4px; }
.section-header-exp {
  font-size: 10px; font-weight: bold; color: #003399;
  padding: 4px 8px 2px; background: #d4d0c8; border-bottom: 1px solid #b8b4ac;
  display: flex;
  align-items: center;
  gap: 4px;
}
.section-header-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.xp-window.minimized { display: none; }

.win-body-col { display: flex; flex-direction: column; }
.win-body-col-overflow { flex: 1; overflow: hidden; }
.explorer-main-flex { flex: 1; }

.explorer-layout { display: flex; height: 100%; }
.explorer-sidebar {
  width: 85px;
  background: linear-gradient(180deg, #7a9dc8 0%, #5a7db8 100%);
  padding: 6px; border-right: 1px solid #4a6da8; flex-shrink: 0;
}
.sidebar-section { margin-bottom: 8px; }
.sidebar-title { font-size: 9px; font-weight: bold; color: white; text-transform: uppercase; margin-bottom: 4px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.sidebar-link { font-size: 9px; color: #cce0ff; cursor: pointer; padding: 1px 2px; display: block; }
.sidebar-link:hover { color: white; text-decoration: underline; }
.explorer-main { flex: 1; overflow-y: auto; }


@keyframes windowOpen {
  from { opacity: 0; transform: scale(0.82) translateY(8px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}
.xp-window.opening {
  animation: windowOpen 0.22s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}


::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track { background: #f0ede4; }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #c8c4b8 0%, #e8e4d8 50%, #c8c4b8 100%); border: 1px solid #808080; }
::-webkit-scrollbar-button { background: linear-gradient(180deg, #e8e4d8 0%, #c8c4b8 100%); border: 1px solid #808080; height: 16px; }


#win-jobinfo {
  width: 340px; height: 420px;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.jobinfo-body {
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
  height: calc(100% - 28px) !important;
  overflow: hidden;
  box-sizing: border-box;
}
.jobinfo-text {
  font-size: 11px; font-family: 'Tahoma', sans-serif;
  color: #222; line-height: 1.6; white-space: pre-wrap;
  background: white; border: 1px solid #c0c0c0;
  padding: 8px; border-radius: 2px;
  flex: 1; overflow-y: auto; min-height: 0;
}
.jobinfo-header {
  display: flex; align-items: center; gap: 10px;
}
.jobinfo-icon { width: 32px; height: 32px; flex-shrink: 0; }
.jobinfo-company {
  font-size: 12px; font-weight: bold; color: #003399;
  font-family: 'Tahoma', sans-serif;
}
.jobinfo-period {
  font-size: 10px; color: #666; font-family: 'Tahoma', sans-serif;
  margin-top: 2px;
}
.jobinfo-divider {
  height: 1px; background: #a0a0a0; margin: 2px 0;
}
.jobinfo-footer {
  display: flex; justify-content: flex-end; margin-top: 4px;
}
.jobinfo-ok-btn {
  width: 72px; height: 23px;
  background: linear-gradient(180deg, #f0f0f0 0%, #d8d8d8 100%);
  border: 1px solid #808080; border-radius: 3px;
  font-size: 11px; font-family: 'Tahoma', sans-serif;
  cursor: pointer; color: #000;
}
.jobinfo-ok-btn:hover { background: linear-gradient(180deg, #dde8f8 0%, #c0d4f0 100%); border-color: #316ac5; }
.jobinfo-ok-btn:active { background: linear-gradient(180deg, #c0d4f0 0%, #a8c4e8 100%); }


.oe-body {
  display: flex; flex-direction: column;
  height: calc(100% - 28px); overflow: hidden;
}
.oe-menubar {
  height: 20px; background: #ece9d8;
  border-bottom: 1px solid #a0a0a0;
  display: flex; align-items: center; gap: 0; padding: 0 2px;
  flex-shrink: 0;
}
.oe-menu-item {
  padding: 1px 8px; font-size: 11px; cursor: pointer;
  font-family: 'Tahoma', sans-serif;
}
.oe-menu-item:hover { background: #316ac5; color: white; }

.oe-toolbar {
  height: 34px; background: linear-gradient(180deg, #f0ede4 0%, #dedad0 100%);
  border-bottom: 1px solid #a0a0a0;
  display: flex; align-items: center; gap: 1px; padding: 0 4px;
  flex-shrink: 0;
}
.oe-tool-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-width: 38px; height: 30px; padding: 2px 4px;
  background: transparent; border: 1px solid transparent;
  cursor: pointer; border-radius: 2px; font-size: 9px;
  font-family: 'Tahoma', sans-serif; color: #333;
}
.oe-tool-btn:hover { background: #d4e4f8; border-color: #6a9fd8; }
.oe-tool-btn:active { background: #b8d0f0; }
.oe-send-btn { min-width: 48px; font-weight: bold; }
.oe-send-btn span { color: #003399; }
.oe-sep {
  width: 1px; height: 24px; background: #b0a898;
  margin: 0 3px; flex-shrink: 0;
}

.oe-fields {
  background: #ece9d8; border-bottom: 2px solid #a0a0a0;
  flex-shrink: 0;
}
.oe-field-row {
  display: flex; align-items: center;
  border-bottom: 1px solid #c8c4bc; min-height: 20px;
}
.oe-label {
  width: 54px; min-width: 54px; font-size: 11px; font-weight: bold;
  color: #333; padding: 2px 6px; background: #dedad0;
  border-right: 1px solid #b0a898; font-family: 'Tahoma', sans-serif;
  flex-shrink: 0;
}
.oe-field-val {
  flex: 1; font-size: 11px; color: #003399; padding: 2px 6px;
  font-family: 'Tahoma', sans-serif;
}
.oe-input {
  flex: 1; border: none; outline: none; background: white;
  font-size: 11px; font-family: 'Tahoma', sans-serif; color: #000;
  padding: 2px 6px; height: 100%;
}
.oe-input:focus { background: #f0f4ff; }

.oe-formatbar {
  height: 24px; background: #f0ede4; border-bottom: 1px solid #c0bcb4;
  display: flex; align-items: center; gap: 2px; padding: 0 4px;
  flex-shrink: 0;
}
.oe-font-sel, .oe-size-sel {
  height: 18px; border: 1px solid #a0a0a0; background: white;
  font-size: 10px; font-family: 'Tahoma', sans-serif; cursor: pointer;
}
.oe-font-sel { width: 80px; }
.oe-size-sel { width: 38px; }
.oe-fmt-btn {
  width: 20px; height: 18px; border: 1px solid transparent;
  background: transparent; cursor: pointer; font-size: 11px;
  font-family: 'Tahoma', sans-serif; border-radius: 2px; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.oe-fmt-btn:hover { background: #d4e4f8; border-color: #6a9fd8; }

.oe-textarea {
  flex: 1; width: 100%; border: none; outline: none; resize: none;
  background: white; font-size: 12px; font-family: 'Tahoma', sans-serif;
  padding: 6px 8px; color: #000; min-height: 0;
  box-sizing: border-box;
}
.oe-textarea:focus { background: #fefefe; }
.oe-textarea::placeholder { color: #aaa; font-style: italic; }

.oe-statusbar {
  height: 18px; background: #d4d0c8; border-top: 1px solid #a0a0a0;
  font-size: 10px; font-family: 'Tahoma', sans-serif; color: #333;
  display: flex; align-items: center; padding: 0 8px; flex-shrink: 0;
}
.oe-statusbar.success { color: #006600; background: #d4f0d4; }
.oe-statusbar.error   { color: #990000; background: #f0d4d4; }
.oe-statusbar.sending { color: #003399; }
.oe-required { color: #cc0000; font-weight: bold; }
.oe-input.invalid { background: #fff0f0; border-bottom: 1px solid #cc0000; }
.oe-textarea.invalid { outline: 1px solid #cc0000; }
.oe-msg-label { font-size: 10px; font-weight: bold; color: #555; padding: 2px 8px 0; font-family: 'Tahoma', sans-serif; flex-shrink: 0; }

@media (min-width: 1600px) {
  .desktop-icons {
    top: 24px;
    left: 24px;
    gap: 10px;
  }

  .desktop-icon {
    width: 88px;
    padding: 6px 5px;
  }

  .desktop-icon .icon-img {
    width: 40px;
    height: 40px;
  }

  .desktop-icon span {
    font-size: 12px;
  }

  #win-identity {
    width: 300px;
    height: 440px;
    top: 72px;
    left: calc(50vw - 700px);
  }

  #win-trajetoria {
    width: 470px;
    height: 360px;
    top: 72px;
    left: calc(50vw - 365px);
  }

  #win-habilidades {
    width: 300px;
    height: 300px;
    top: 72px;
    left: calc(50vw + 140px);
  }

  #win-contato {
    width: 430px;
    height: 380px;
    top: 410px;
    left: calc(50vw + 140px);
  }

  #win-cs {
    width: 680px;
    height: 450px;
    top: 470px;
    left: calc(50vw - 365px);
  }

  .task-btn {
    max-width: 180px;
  }
}


@media (max-width: 900px) and (min-width: 600px) {
  #win-identity  { width: 270px; height: 270px; top: 40px; left: 4vw; }
  #win-trajetoria{ width: 270px; height: 210px; top: 40px; left: calc(50% + 4px); }
  #win-habilidades{ width: 248px; height: 220px; top: 248px; left: 4vw; }
  #win-contato   { width: 360px; height: 320px; top: 268px; left: calc(50% - 40px); }
  #win-cs        { width: 520px; height: 340px; top: 600px; left: 4vw; }

  .identity-name { font-size: 11px; }
  .identity-bio  { font-size: 9.5px; }

  .desktop-icons { gap: 4px; }
  .desktop-icon  { width: 60px; }
  .desktop-icon span { font-size: 10px; }

  .task-btn { max-width: 100px; font-size: 10px; padding: 0 5px; }
  #start-btn { font-size: 12px; padding: 0 8px 0 5px; }

  #start-menu { width: 320px; }
  .sm-body    { height: 280px; }
  .sm-left    { width: 155px; }
}


@media (max-width: 599px) {
  
  body {
    overflow: auto;
    height: auto;
    min-height: 100vh;
    width: 100%;
  }

  
  #login-screen { position: fixed; height: 100vh; }

  .xp-login-body { flex-direction: column; align-items: center; }

  .xp-left {
    flex: 0 0 auto;
    width: 100%;
    padding: 24px 20px 16px;
    align-items: center;
    gap: 12px;
  }
  .xp-left img {
    width: min(320px, 86vw) !important;
    max-width: 100%;
  }
  .xp-left::after { display: none; }


  .xp-right {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 24px 24px;
    align-items: center;
  }

  .xp-user { width: 100%; justify-content: center; }

  .xp-bottom-bar { padding: 0 14px; }
  .xp-help { display: none; }

  
  #desktop {
    position: relative;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 48px;
  }

  
  .desktop-icons {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    top: auto; left: auto;
    padding: 8px 6px 6px;
    gap: 4px;
    z-index: 10;
    background: rgba(0,0,0,0.08);
    backdrop-filter: blur(2px);
  }

  .desktop-icon {
    width: 100%;
    min-height: 56px;
    justify-content: flex-start;
    padding: 4px 2px;
  }

  .desktop-icon .icon-img { width: 28px; height: 28px; }
  .desktop-icon span {
    width: 100%;
    font-size: 9px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }


  
  .xp-window {
    position: relative !important;
    width: calc(100vw - 16px) !important;
    height: auto !important;
    left: 8px !important;
    top: auto !important;
    margin: 8px 0 0;
    border-radius: 6px 6px 0 0;
    z-index: 10 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
  }

  .xp-window.focused { z-index: 10 !important; }

  
  .window-body {
    height: auto !important;
    max-height: 62vh;
    overflow-y: auto;
  }

  
  .xp-titlebar { cursor: default !important; }

  
  .identity-body { flex-direction: column; }
  .identity-avatar-col { width: 100%; height: 200px; }
  .identity-avatar { width: 100%; height: 100%; }
  .identity-content { flex: none; padding: 8px 12px 10px; }
  .identity-name { font-size: 12px; }
  .identity-bio  { font-size: 10px; }
  #win-identity .window-body { max-height: none; height: auto !important; }
  .identity-content { padding: 8px 12px; }
  .identity-name { font-size: 12px; }
  .identity-bio  { font-size: 10px; }
  #win-cs .window-body {
    height: 56vh !important;
    max-height: 56vh;
  }

  .cs-menu-bar {
    gap: 12px;
    overflow-x: auto;
  }

  .oe-toolbar {
    overflow-x: auto;
  }

  .oe-field-row {
    min-height: 24px;
  }

  .oe-label {
    width: 62px;
    min-width: 62px;
  }

  
  .explorer-sidebar { display: none; }
  .explorer-main { width: 100%; }

  
  .skill-bar-bg { max-width: 100px; }

  

  
  #taskbar {
    position: fixed;
    height: 40px;
  }

  #start-btn {
    height: 40px;
    font-size: 12px;
    padding: 0 10px 0 6px;
    margin-right: 2px;
  }

  .taskbar-tasks {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 3px;
    scrollbar-width: none;
  }

  .taskbar-tasks::-webkit-scrollbar { display: none; }

  .task-btn {
    height: 28px;
    max-width: none;
    width: 112px;
    flex: 0 0 112px;
    font-size: 10px;
    padding: 0 6px;
  }

  .taskbar-tray { padding: 0 4px; }
  .tray-icon { padding: 2px 3px; }

  
  #start-menu {
    width: 100%;
    bottom: 40px;
    border-radius: 8px 8px 0 0;
  }
  .sm-body { height: auto; flex-direction: column; }
  .sm-left { width: 100%; border-right: none; border-bottom: 1px solid #d8d0c8; }
  .sm-pinned { max-height: 200px; overflow-y: auto; }
  .sm-right { width: 100%; }
  .sm-right-section { display: grid; grid-template-columns: 1fr 1fr; }

  
  #popup-clock, #popup-internet { display: none !important; }
  #popup-volume {
    width: 52px;
    z-index: 100000;
  }
  #popup-volume.open { display: flex !important; }
  #clock { display: none; }
}


@media (max-width: 359px) {

  .desktop-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .desktop-icon { min-height: 58px; }
  .task-btn {
    width: 96px;
    flex-basis: 96px;
    font-size: 9px;
  }
}


@keyframes clippyIn {
  from { transform: translateY(180px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes clippyWiggle {
  0%,100% { transform: rotate(0deg); }
  20%      { transform: rotate(-6deg); }
  40%      { transform: rotate(6deg); }
  60%      { transform: rotate(-4deg); }
  80%      { transform: rotate(4deg); }
}

#clippy-wrap {
  position: fixed;
  bottom: 38px;
  right: 18px;
  z-index: 99998;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0;
  animation: clippyIn 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
#clippy-wrap.visible { display: flex; }

#clippy-svg {
  width: 150px;
  height: auto;
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
  cursor: pointer;
  animation: clippyWiggle 0.6s ease 0.45s 1;
}
#clippy-svg:hover { animation: clippyWiggle 0.5s ease infinite; }

#clippy-bubble {
  position: relative;
  background: #fffde7;
  border: 1px solid #b8960c;
  border-radius: 8px;
  padding: 10px 32px 10px 14px;
  max-width: 240px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
  margin-bottom: 6px;
}
#clippy-bubble::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: #b8960c;
}
#clippy-bubble::before {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #fffde7;
  z-index: 1;
}
#clippy-text {
  font-family: 'Tahoma', sans-serif;
  font-size: 13px;
  color: #333;
  line-height: 1.4;
  margin: 0;
}
#clippy-close {
  position: absolute;
  top: 3px; right: 4px;
  background: none;
  border: none;
  font-size: 14px;
  color: #888;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
  font-family: Arial, sans-serif;
}
#clippy-close:hover { color: #c00; }