/* ================================================
   WIN95 ARCHIVE — win95.css
   Para trocar as cores, edite apenas as variáveis
   dentro de :root abaixo!
   ================================================ */

:root {
  /* ── TROQUE AS CORES AQUI ── */
  --desktop-bg:     #008080;   /* fundo do desktop */
  --taskbar-bg:     #c0c0c0;   /* cor da taskbar */
  --win-bg:         #c0c0c0;   /* fundo das janelas */
  --win-titlebar:   #000080;   /* barra de título */
  --win-title-text: #ffffff;   /* texto da barra de título */
  --win-border-lt:  #ffffff;   /* borda clara (efeito 3D) */
  --win-border-dk:  #808080;   /* borda escura */
  --win-border-dk2: #404040;   /* borda mais escura */
  --btn-bg:         #c0c0c0;   /* fundo dos botões */
  --text:           #000000;   /* texto principal */
  --text-lt:        #444444;   /* texto secundário */
  --link:           #000080;   /* links */
  --grid-bg:        #ffffff;   /* fundo do grid de fotos */
  --separator:      #808080;   /* linhas separadoras */
  --taskbar-btn:    #c0c0c0;   /* botões da taskbar */
  --scrollbar:      #c0c0c0;   /* scrollbar */
  --icon-bg:        #008080;   /* fundo dos ícones */
  --icon-text:      #ffffff;   /* texto dos ícones */
  --profile-border: #000000;   /* borda da foto de perfil */
  --tab-active:     #c0c0c0;   /* aba ativa */
  --tab-inactive:   #a0a0a0;   /* aba inativa */

  --font-ui:    'MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-height: 100vh; }

/* ── DESKTOP ── */
body {

  background-image: url('assets/img/background/tumblr_ncy3l63iwx1rpmwhjo4_640.jpg');
  background-size: 200px 200px;
  background-repeat: repeat;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 16px 48px;
  min-height: 100vh;
  position: relative;
}

/* ── ÍCONES DO DESKTOP ── */
.desktop-icons {
  position: fixed;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 1;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  width: 64px;
  text-decoration: none;
}

.desktop-icon:hover .icon-img { outline: 1px dotted var(--icon-text); }

.icon-img {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.icon-label {
  font-size: 11px;
  color: var(--icon-text);
  text-align: center;
  text-shadow: 1px 1px 0 #000;
  line-height: 1.2;
}

/* ── JANELA ── */
.window {
  width: 500px;
  background: var(--win-bg);
  border-top: 2px solid var(--win-border-lt);
  border-left: 2px solid var(--win-border-lt);
  border-right: 2px solid var(--win-border-dk2);
  border-bottom: 2px solid var(--win-border-dk2);
  box-shadow: 1px 1px 0 var(--win-border-dk) inset,
              -1px -1px 0 var(--win-border-dk) inset;
  position: relative;
  z-index: 10;
  margin-top: 8px;
}

/* ── TITLEBAR ── */
.titlebar {
  background: var(--win-titlebar);
  padding: 3px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.titlebar-icon { font-size: 14px; }

.titlebar-text {
  flex: 1;
  color: var(--win-title-text);
  font-size: 11px;
  font-weight: bold;
}

.titlebar-btns { display: flex; gap: 2px; }

.tbtn {
  width: 16px;
  height: 14px;
  background: var(--btn-bg);
  border-top: 1px solid var(--win-border-lt);
  border-left: 1px solid var(--win-border-lt);
  border-right: 1px solid var(--win-border-dk2);
  border-bottom: 1px solid var(--win-border-dk2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  cursor: pointer;
  font-weight: bold;
  color: var(--text);
}

.tbtn:active {
  border-top: 1px solid var(--win-border-dk2);
  border-left: 1px solid var(--win-border-dk2);
  border-right: 1px solid var(--win-border-lt);
  border-bottom: 1px solid var(--win-border-lt);
}

/* ── MENUBAR ── */
.menubar {
  background: var(--win-bg);
  padding: 2px 4px;
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--separator);
  font-size: 11px;
}

.menu-item { padding: 2px 6px; cursor: pointer; }
.menu-item:hover { background: var(--win-titlebar); color: #fff; }

/* ── PERFIL ── */
.profile-section {
  padding: 10px 12px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-bottom: 1px solid var(--separator);
}

.profile-pic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--profile-border);
  flex-shrink: 0;
  background: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
}

.profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile-stats { flex: 1; }

.stats-row {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}

.stat { text-align: center; }
.stat-num { font-weight: bold; font-size: 13px; display: block; }
.stat-label { font-size: 10px; color: var(--text-lt); }

.follow-btn {
  width: 100%;
  padding: 3px;
  background: var(--btn-bg);
  border-top: 1px solid var(--win-border-lt);
  border-left: 1px solid var(--win-border-lt);
  border-right: 1px solid var(--win-border-dk2);
  border-bottom: 1px solid var(--win-border-dk2);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.follow-btn:active {
  border-top: 1px solid var(--win-border-dk2);
  border-left: 1px solid var(--win-border-dk2);
  border-right: 1px solid var(--win-border-lt);
  border-bottom: 1px solid var(--win-border-lt);
}

.follow-btn-arrow {
  border-left: 1px solid var(--win-border-dk);
  padding: 0 4px;
  font-size: 9px;
}

/* ── BIO ── */
.profile-bio {
  padding: 6px 12px 10px;
  border-bottom: 1px solid var(--separator);
  font-size: 11px;
  line-height: 1.6;
}

.profile-bio strong { display: block; margin-bottom: 2px; }
.profile-bio a { color: var(--link); }

/* ── ABAS ── */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--separator);
}

.tab {
  flex: 1;
  padding: 5px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  background: var(--tab-inactive);
  border-right: 1px solid var(--separator);
  border-top: 1px solid var(--win-border-lt);
}

.tab:last-child { border-right: none; }
.tab.active { background: var(--tab-active); border-top: 2px solid var(--win-titlebar); }

/* ── GRID DE FOTOS ── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--separator);
  max-height: 360px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--win-border-dk) var(--scrollbar);
}

.photo-grid::-webkit-scrollbar { width: 14px; }
.photo-grid::-webkit-scrollbar-track {
  background: var(--scrollbar);
  border-left: 1px solid var(--win-border-dk);
}
.photo-grid::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-top: 1px solid var(--win-border-lt);
  border-left: 1px solid var(--win-border-lt);
  border-right: 1px solid var(--win-border-dk2);
  border-bottom: 1px solid var(--win-border-dk2);
}

.photo-item {
  aspect-ratio: 1;
  background: var(--grid-bg);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #aaa;
}

.photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-item:hover::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,128,0.2); }

/* ── NAVEGAÇÃO INFERIOR ── */
.bottom-nav { display: flex; border-top: 1px solid var(--separator); }

.bottom-nav-btn {
  flex: 1;
  padding: 6px 4px;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  background: var(--win-bg);
  border-right: 1px solid var(--separator);
  border-top: 1px solid var(--win-border-lt);
  border-bottom: 1px solid var(--win-border-dk);
}

.bottom-nav-btn:last-child { border-right: none; }
.bottom-nav-btn:hover { background: #d4d4d4; }
.bottom-nav-btn.active { border-top: 2px solid var(--win-titlebar); }

/* ── TASKBAR ── */
#taskbar {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  height: 30px;
  background: var(--taskbar-bg);
  border-top: 2px solid var(--win-border-lt);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  z-index: 9999;
}

#start-btn {
  height: 22px;
  padding: 0 8px;
  background: var(--btn-bg);
  border-top: 1px solid var(--win-border-lt);
  border-left: 1px solid var(--win-border-lt);
  border-right: 1px solid var(--win-border-dk2);
  border-bottom: 1px solid var(--win-border-dk2);
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

#start-btn:active {
  border-top: 1px solid var(--win-border-dk2);
  border-left: 1px solid var(--win-border-dk2);
  border-right: 1px solid var(--win-border-lt);
  border-bottom: 1px solid var(--win-border-lt);
}

.taskbar-sep {
  width: 1px; height: 20px;
  background: var(--win-border-dk);
  margin: 0 2px;
  box-shadow: 1px 0 0 var(--win-border-lt);
}

.taskbar-item {
  height: 22px;
  padding: 0 8px;
  background: var(--taskbar-btn);
  border-top: 1px solid var(--win-border-lt);
  border-left: 1px solid var(--win-border-lt);
  border-right: 1px solid var(--win-border-dk2);
  border-bottom: 1px solid var(--win-border-dk2);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.taskbar-clock {
  margin-left: auto;
  padding: 2px 8px;
  border-top: 1px solid var(--win-border-dk);
  border-left: 1px solid var(--win-border-dk);
  border-right: 1px solid var(--win-border-lt);
  border-bottom: 1px solid var(--win-border-lt);
  font-size: 11px;
}

/* ── VOLTAR AO SITE ── */
.back-link {
  position: fixed;
  top: 16px; right: 16px;
  background: var(--btn-bg);
  border-top: 1px solid var(--win-border-lt);
  border-left: 1px solid var(--win-border-lt);
  border-right: 1px solid var(--win-border-dk2);
  border-bottom: 1px solid var(--win-border-dk2);
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  z-index: 100;
}

.back-link:hover { background: #d4d4d4; }