@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

* { margin:0; padding:0; box-sizing:border-box; font-family:Tahoma,'Noto Sans',sans-serif; }
body { width:100vw; height:100vh; overflow:hidden; }

/* ══════════════════════════════════════════
   LOGIN / PERFIL
══════════════════════════════════════════ */
.login-screen {
  width:100%; height:100%;
  background:linear-gradient(to bottom,#1b3f7e 0%,#2563c8 40%,#1b3f7e 100%);
  display:flex; justify-content:center; align-items:center; flex-direction:column;
  color:white; position:relative; overflow:hidden;
}
.login-screen::before {
  content:''; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:200px; background:rgba(0,0,0,.15); pointer-events:none;
}
.logo { font-size:64px; font-weight:bold; letter-spacing:2px; text-shadow:2px 2px 0 rgba(0,0,0,.4); position:relative; z-index:1; }
.sub  { font-size:13px; opacity:.75; margin-top:6px; margin-bottom:30px; position:relative; z-index:1; letter-spacing:1px; }
.login-box {
  position:relative; z-index:1; width:360px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.35);
  border-radius:10px; display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 28px;
}
.login-tabs { display:flex; width:100%; border-bottom:1px solid rgba(255,255,255,.3); margin-bottom:4px; }
.tab-btn {
  flex:1; padding:10px; background:transparent; border:none;
  color:rgba(255,255,255,.65); font-size:13px; font-family:Tahoma,sans-serif;
  cursor:pointer; border-bottom:2px solid transparent; width:auto; border-radius:0; font-weight:normal;
}
.tab-btn.active { color:white; font-weight:bold; border-bottom:2px solid #ffcc00; }
#tab-entrar, #tab-cadastrar { display:flex; flex-direction:column; gap:10px; width:100%; }
.login-box input[type="email"],
.login-box input[type="password"],
.login-box input[type="text"] {
  width:100%; padding:12px; border:1px solid rgba(255,255,255,.4); border-radius:3px;
  font-size:15px; font-family:Tahoma,sans-serif; background:rgba(255,255,255,.9); color:#000; outline:none;
}
.login-box input:focus { border-color:#ffcc00; background:white; }
.login-box button:not(.tab-btn):not(.cor) {
  width:100%; padding:12px; border:none; border-radius:3px;
  background:linear-gradient(to bottom,#5aad5a,#3a8c3a); color:white; font-weight:bold;
  font-size:15px; font-family:Tahoma,sans-serif; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 4px rgba(0,0,0,.3);
}
.login-box button:not(.tab-btn):not(.cor):hover { background:linear-gradient(to bottom,#6bbf6b,#4a9c4a); }
.auth-msg { font-size:12px; color:#ffddaa; min-height:16px; text-align:center; }

.social-divider { width: 100%; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.2); line-height: 0.1em; margin: 15px 0 10px; }
.social-divider span { background: #235cb6; padding: 0 10px; font-size: 11px; color: rgba(255,255,255,0.7); }
.social-btns { display: flex; gap: 8px; width: 100%; }
.social-btn {
  flex: 1; padding: 8px 4px; border: 1px solid; border-radius: 3px;
  font-size: 11px; font-weight: bold; cursor: pointer; color: #333;
  background: linear-gradient(to bottom, #f0f0e8 0%, #e0d8c8 50%, #d4ccc0 100%);
  border-top-color: #fff; border-left-color: #fff; border-right-color: #888; border-bottom-color: #888;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.social-btn:hover { background: linear-gradient(to bottom, #f8f8f0, #e8e0d0); }
.social-btn:active { border-top-color: #888; border-left-color: #888; border-right-color: #fff; border-bottom-color: #fff; }

.social-btn.google::before { content: 'G '; color: #4285F4; }

/* Estilos para a janela de complemento */
.up-field-group { padding: 15px; display: flex; flex-direction: column; gap: 12px; background: #f0f0e8; }
.up-field-group label { font-size: 11px; font-weight: bold; color: #333; margin-bottom: -8px; }
.up-field-group input[type="text"], 
.up-field-group input[type="date"] {
  padding: 5px; border: 1px solid #7f9db9; font-size: 13px; outline: none;
}
.up-btn-save { margin-top: 10px; padding: 10px; background: linear-gradient(to bottom, #5aad5a, #3a8c3a); color: white; border: 1px solid #3a6ec8; border-radius: 3px; font-weight: bold; cursor: pointer; }

/* perfil */
.perfil-box { width:380px; }
.avatar-upload {
  width:100px; height:100px; border-radius:6px;
  background:rgba(255,255,255,.2); border:2px dashed rgba(255,255,255,.5);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; font-size:13px; text-align:center; color:white; overflow:hidden;
}
.avatar-upload:hover { border-color:#ffcc00; }
.avatar-upload img { width:100%; height:100%; object-fit:cover; }
.cor-label { font-size:12px; color:rgba(255,255,255,.8); align-self:flex-start; }
.cores { display:flex; gap:8px; flex-wrap:wrap; }
.cor { width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .15s; }
.cor:hover { transform:scale(1.15); }
.cor.selected { border:3px solid white; box-shadow:0 0 0 2px rgba(0,0,0,.4); }

/* ══════════════════════════════════════════
   DESKTOP
══════════════════════════════════════════ */
.desktop {
  width:100vw; height:100vh;
  background-color: #3a6ec8;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position:relative; overflow:hidden;
  transition: background-image 0.5s ease-in-out; /* Adicionado para uma transição suave */
}
.icons { padding:14px 10px; display:flex; flex-direction:column; gap:8px; }
.icon {
  width:72px; display:flex; flex-direction:column; align-items:center; color:white;
  cursor:pointer; text-shadow:1px 1px 2px black,0 0 4px black; gap:4px;
  padding:5px 4px; border-radius:3px; border:1px solid transparent; user-select:none;
}
.icon:hover { background:rgba(49,106,197,.4); border-color:rgba(49,106,197,.8); }
.icon img  { width:48px; height:48px; object-fit:contain; }
.icon span { font-size:11px; text-align:center; line-height:1.3; }

/* taskbar */
.taskbar {
  position:fixed; bottom:0; width:100%; height:38px;
  background:linear-gradient(to bottom,#3a6ec8 0%,#2f5db7 4%,#2459b3 8%,#235ab5 50%,#1e4fa0 94%,#1a4396 100%);
  display:flex; align-items:center; box-shadow:0 -1px 0 #0c2d7e; z-index:100;
}
.taskbar::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right,#5080d0,#7aabf0,#5080d0); pointer-events:none;
}
.start {
  height:100%; padding:0 14px 0 10px;
  background:linear-gradient(to bottom,#5cbf5c 0%,#3da63d 45%,#2d8f2d 50%,#3da63d 100%);
  color:white; font-weight:bold; font-size:14px; cursor:pointer;
  display:flex; align-items:center; gap:6px; border-radius:0 14px 14px 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),2px 0 6px rgba(0,0,0,.4);
  font-style:italic; flex-shrink:0; user-select:none;
}
.start::before { content:'⊞'; font-style:normal; font-size:18px; }
.taskbar-xp {
  margin-left:12px; color:white; font-size:11px;
  text-shadow:1px 1px 0 rgba(0,0,0,.5); white-space:nowrap;
}
.taskbar-right {
  margin-left:auto; display:flex; align-items:center; height:100%;
  background:linear-gradient(to bottom,#1a4aac,#153d93);
  border-left:1px solid #0c2d7e; padding:0 12px;
}
.clock { color:white; font-size:11px; text-shadow:1px 1px 0 rgba(0,0,0,.5); }

/* ══════════════════════════════════════════
   JANELA XP GENÉRICA
══════════════════════════════════════════ */
.xp-window {
  position:absolute; display:flex; flex-direction:column;
  border:2px solid #0831a0; border-top-color:#6b9de8; border-left-color:#6b9de8;
  box-shadow:2px 2px 8px rgba(0,0,0,.6),inset 1px 1px 0 rgba(255,255,255,.4);
  border-radius:8px 8px 4px 4px; overflow:hidden; z-index:50;
}
.xp-titlebar {
  height:30px;
  background:linear-gradient(to bottom,#4a90e8 0%,#1464d8 8%,#1258c8 50%,#1054c0 93%,#0c44a8 100%);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 4px 0 8px; flex-shrink:0; position:relative; user-select:none;
}
.xp-titlebar::after {
  content:''; position:absolute; top:0; left:0; right:80px; height:12px;
  background:linear-gradient(to bottom,rgba(255,255,255,.25),transparent); pointer-events:none;
}
.xp-title-left { display:flex; align-items:center; gap:6px; color:white; font-size:12px; font-weight:bold; text-shadow:1px 1px 2px rgba(0,0,0,.5); }
.xp-title-left img { width:16px; height:16px; object-fit:contain; }
.title-btns { display:flex; gap:2px; position:relative; z-index:1; }
.tbtn {
  width:21px; height:21px; border-radius:3px; border:1px solid;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:11px; font-weight:bold; color:black;
  background:linear-gradient(to bottom,#f0f0e8,#d8d0c0);
  border-top-color:#fff; border-left-color:#fff; border-right-color:#888; border-bottom-color:#888; user-select:none;
}
.tbtn:hover { background:linear-gradient(to bottom,#f8f8f0,#e8e0d0); }
.tbtn.fechar {
  background:linear-gradient(to bottom,#e85050,#c03030);
  border-top-color:#f08080; border-left-color:#f08080; border-right-color:#800000; border-bottom-color:#800000; color:white;
}
.tbtn.fechar:hover { background:linear-gradient(to bottom,#f06060,#d04040); }

/* ══════════════════════════════════════════
   MSN
══════════════════════════════════════════ */
.msn-userbar {
  height:60px; background:linear-gradient(to bottom,#dceeff,#c4dcf8);
  border-bottom:1px solid #8ab0e0; display:flex; align-items:center; padding:0 10px; gap:10px; flex-shrink:0;
}
.msn-main-container { display: flex; flex: 1; overflow: hidden; }
.msn-left-col { width: 72%; display: flex; flex-direction: column; border-right: 1px solid #8ab0e0; }
.msn-right-col { width: 28%; background: #eff7ff; border-left: 1px solid #8ab0e0; overflow: hidden; }

.avatar {
  width:44px; height:44px; border-radius:4px;
  background:linear-gradient(135deg,#4a90e8,#1464d8); border:2px solid #a0c0e8;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:bold; color:white; flex-shrink:0;
}
.avatar-img { width:44px; height:44px; border-radius:4px; border:2px solid #a0c0e8; object-fit:cover; flex-shrink:0; }

/* Status Borders */
.status-online  { border-color: #22AA22 !important; }
.status-ausente { border-color: #FF6A00 !important; }
.status-ocupado { border-color: #D94F00 !important; }
.status-offline { border-color: #AAAAAA !important; }

.msn-userinfo h3  { font-size:13px; font-weight:bold; }
.msn-userinfo span{ font-size:11px; color:#3070c0; }
.msn-toolbar {
  height:28px; background:linear-gradient(to bottom,#f0f4fc,#dce8f8);
  border-bottom:1px solid #a0b8d8; display:flex; align-items:center; padding:0 6px; gap:2px; flex-shrink:0;
}
.tool-btn {
  height:22px; padding:0 8px; background:transparent; border:1px solid transparent;
  border-radius:2px; font-size:11px; font-family:Tahoma,sans-serif; cursor:pointer; color:#000; width:auto;
}
.tool-btn:hover { background:linear-gradient(to bottom,#e8f0fc,#d0e0f4); border-color:#8aacdc; }
.toolbar-sep { width:1px; height:18px; background:#a0b8d8; margin:0 3px; }
.msn-body { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.messages {
  flex:1; background:white; padding:10px 12px; overflow-y:auto;
  display:flex; flex-direction:column; gap:6px; font-size:13px;
  min-height:0;
}
.messages::-webkit-scrollbar { width:17px; }
.messages::-webkit-scrollbar-track { background:#f0f0f0; border-left:1px solid #c0c0c0; }
.messages::-webkit-scrollbar-thumb {
  background:linear-gradient(to right,#e0e0e0,#c8c8c8); border:1px solid;
  border-top-color:#fff; border-left-color:#fff; border-right-color:#808080; border-bottom-color:#808080;
}
.msg-system { text-align:center; color:#888; font-size:11px; font-style:italic; padding:2px 0; }
.msg-bloco  { display:flex; align-items:flex-start; gap:8px; max-width:90%; }
.msg-bloco.minha { align-self:flex-end; flex-direction:row-reverse; }
.msg-avatar { width:32px; height:32px; border-radius:3px; object-fit:cover; border:1px solid #c0d0e8; flex-shrink:0; }
.msg-avatar-inicial {
  width:32px; height:32px; border-radius:3px; display:flex; align-items:center;
  justify-content:center; font-size:15px; font-weight:bold; color:white; flex-shrink:0; border:1px solid rgba(0,0,0,.15);
}
.msg-conteudo {
  display:flex; flex-direction:column; gap:1px;
  background:#f4f8ff; border:1px solid #d0e0f4; border-radius:2px; padding:4px 8px;
  max-width:100%; word-break:break-word;
}
.msg-bloco.minha .msg-conteudo { background:#e8f0fe; border-color:#b8ccf0; }
.nick { font-weight:bold; font-size:11px; }
.msg-text { font-size:13px; color:#111; line-height:1.5; }
.send-area { border-top:2px solid #8ab0e0; background:#dfe8f6; display:flex; flex-direction:column; flex-shrink:0; }
.send-toolbar {
  height:28px; background:linear-gradient(to bottom,#f0f4fc,#dce8f8);
  border-bottom:1px solid #a0b8d8; display:flex; align-items:center; padding:0 6px; gap:3px;
}
.emote-btn { height:20px; padding:0 4px; background:transparent; border:1px solid transparent; border-radius:2px; cursor:pointer; font-size:14px; color:#000; width:auto; display:flex; align-items:center; }
.emote-btn:hover { background:#c8daf0; border-color:#7090c0; }

/* Painel de Emoticons */
.emoticons-panel {
  position: absolute; bottom: 85px; left: 10px; background: white; border: 1px solid #7090c0;
  padding: 5px; display: none; grid-template-columns: repeat(4, 1fr); gap: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); z-index: 1000;
}
.emoticons-panel.aberto { display: grid; }
.emoticons-panel span { cursor: pointer; font-size: 20px; padding: 2px; text-align: center; }
.emoticons-panel span:hover { background: #e8f0fc; }

.send-box { display:flex; align-items:center; gap:6px; padding:6px 8px; background:white; }
.send-box input {
  flex:1; padding:5px 8px; border:1px solid; border-top-color:#6080b0; border-left-color:#6080b0;
  border-right-color:#a0c0e0; border-bottom-color:#a0c0e0; border-radius:2px;
  font-size:13px; font-family:Tahoma,sans-serif; background:white; outline:none; height:32px; width:auto;
}
.send-box input:focus { border-color:#2060c0; }
.send-box button {
  height:32px; padding:0 16px;
  background:linear-gradient(to bottom,#f0f0e8 0%,#e0d8c8 50%,#d4ccc0 100%); color:#000;
  border:1px solid; border-top-color:#fff; border-left-color:#fff; border-right-color:#888; border-bottom-color:#888;
  font-size:12px; font-family:Tahoma,sans-serif; cursor:pointer; border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7); width:auto;
}
.send-box button:hover { background:linear-gradient(to bottom,#f8f8f0,#e8e0d0); }
.send-box button:active { border-top-color:#888; border-left-color:#888; border-right-color:#fff; border-bottom-color:#fff; }

/* Coluna Direita MSN */
.msn-right-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #eff7ff;
  height: 100%;
}

.msn-frame {
  width: 150px;
  height: 150px;
  padding: 4px;
  background: #d4d0c8;
  border: 1px solid #808080;
  position: relative;
  border-radius: 8px;
}

.msn-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.banner-frame {
  background: #22AA22 !important; /* Verde MSN mais vibrante */
  border: 1px solid #808080 !important;
  padding: 4px; /* Igual ao avatar */
}

/* Moldura colorida do avatar conforme status */
.avatar-frame.status-online  { padding: 4px; background: #00b300; }
.avatar-frame.status-ausente { padding: 4px; background: #ff8c00; }
.avatar-frame.status-ocupado { padding: 4px; background: #cc0000; }
.avatar-frame.status-offline { padding: 4px; background: #aaaaaa; }

/* Bolinha verde fixa no banner */
.msn-status-dot.online {
  width: 10px;
  height: 10px;
  background: #00b300;
  border: 2px solid white;
  border-radius: 50%;
  position: absolute;
  bottom: 2px;
  right: 2px;
  z-index: 2;
}

.btn-admin-banner {
  font-size: 9px; padding: 2px 4px; background: #eee; border: 1px solid #ccc; cursor: pointer;
  opacity: 0.6; margin-top: 2px;
}
.btn-admin-banner:hover { opacity: 1; }

/* Seletor de Status */
.status-select { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: white; font-size: 10px; padding: 2px; border-radius: 3px; outline: none; cursor: pointer; }
.status-select option { background: #245edb; color: white; }

/* ══════════════════════════════════════════
   FOTOLOG
══════════════════════════════════════════ */
.fl-header {
  background: #000;
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  flex-shrink: 0;
}
.fl-logo-text {
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 22px;
  letter-spacing: -1.5px;
  text-transform: lowercase;
}
.fotolog-body {
  flex:1; display:flex; overflow:hidden; background:#f0f0e8;
  min-height:0;
}

/* sidebar esquerda */
.fotolog-sidebar {
  width:200px; flex-shrink:0; background:#222; border-right:2px solid #111; /* Fundo escuro */
  display:flex; flex-direction:column; gap:0; overflow-y:auto;
}
.fotolog-meu-perfil {
  background:#000; /* Fundo preto para o perfil */
  padding:12px; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.fl-avatar { width:64px; height:64px; border-radius:4px; object-fit:cover; border:2px solid rgba(255,255,255,.5); }
.fl-avatar-inicial {
  width:64px; height:64px; border-radius:4px; display:flex; align-items:center;
  justify-content:center; font-size:28px; font-weight:bold; color:white; border:2px solid rgba(255,255,255,.4);
}
.fl-nick   { font-size:13px; font-weight:bold; color:white; text-shadow:1px 1px 2px rgba(0,0,0,.4); text-align:center; }
.fl-level  { font-size:10px; color:rgba(255,255,255,.85); text-align:center; }
.fl-cupom  { font-size:10px; color:#ffddaa; text-align:center; background:rgba(0,0,0,.2); padding:2px 6px; border-radius:3px; }

/* caixa de post */
.fl-post-box {
  padding:10px; display:flex; flex-direction:column; gap:6px;
  border-bottom:1px solid #c0b090;
}
.fl-post-title-input {
  width:100%; padding:6px; border:1px solid #c0b090; border-radius:3px;
  font-size:12px; font-family:Tahoma,sans-serif; background:#fffdf8;
  font-weight:bold;
}
.fl-post-foto {
  width:100%; height:100px; background:#fff;
  border:2px dashed #c0a060; border-radius:4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; font-size:11px; text-align:center; color:#888; overflow:hidden;
}
.fl-post-foto:hover { border-color:#ff6600; color:#ff6600; }
.fl-post-box textarea {
  width:100%; padding:6px; border:1px solid #c0b090; border-radius:3px;
  font-size:11px; font-family:Tahoma,sans-serif; resize:none; background:#fffdf8;
}
.fl-btn-postar {
  width:100%; padding:7px; 
  background: linear-gradient(to bottom, #ffe066 0%, #ffcc00 50%, #cca300 100%);
  color:#000; border:1px solid #a08000; border-radius:3px; font-size:11px; font-weight:bold; cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.2);
}
.fl-btn-postar:hover { background: linear-gradient(to bottom, #fff088 0%, #ffd700 50%, #e6b800 100%); }
.fl-btn-postar:disabled { opacity:.6; cursor:not-allowed; }

/* ── CORREÇÃO SCROLL FOTOLOG ── */
.fotolog-feed {
  flex:1;
  overflow-y:scroll;          /* força barra sempre visível */
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;               /* essencial: deixa o flex encolher */
}
.fotolog-feed::-webkit-scrollbar { width:14px; }
.fotolog-feed::-webkit-scrollbar-track { background:#e0d8c8; }
.fotolog-feed::-webkit-scrollbar-thumb { background:#b0a080; border:1px solid #d0c8b0; }

.fl-loading { text-align:center; color:#888; font-size:12px; padding:20px; }

/* card de post */
.fl-card {
  background:white; border:1px solid #c0b090; border-radius:4px;
  box-shadow:1px 2px 4px rgba(0,0,0,.1); overflow:hidden;
  flex-shrink:0; /* evita que o card seja comprimido */
}
.fl-card-header { display:flex; align-items:center; gap:8px; padding:8px 10px; background:#fffdf5; border-bottom:1px solid #e8e0d0; }
.fl-card-avatar { width:32px; height:32px; border-radius:3px; object-fit:cover; border:1px solid #d0c0a0; }
.fl-card-avatar-inicial {
  width:32px; height:32px; border-radius:3px; display:flex; align-items:center;
  justify-content:center; font-size:15px; font-weight:bold; color:white; border:1px solid rgba(0,0,0,.1);
}
.fl-card-nick { font-size:12px; font-weight:bold; }
.fl-card-data { font-size:10px; color:#888; }
.fl-card-title { 
  padding:10px 10px 5px; 
  font-size:16px; 
  font-weight:bold; 
  color:#000; 
  text-align:center;
  font-family: Arial, Helvetica, sans-serif;
}
.fl-card-img  { width:100%; display:block; max-height:400px; object-fit:contain; }
.fl-card-caption { padding:8px 10px; font-size:12px; color:#333; line-height:1.5; border-top:1px solid #f0e8d8; }
.fl-card-actions { display:flex; gap:8px; padding:6px 10px; border-top:1px solid #f0e8d8; background:#fffdf5; }
.fl-like-btn, .fl-comment-btn {
  padding:3px 10px; border:1px solid #c0b090; border-radius:10px;
  background:white; font-size:12px; cursor:pointer; display:flex; align-items:center; gap:4px;
  width:auto;
}
.fl-like-btn:hover    { background:#fff0e8; border-color:#ff8800; }
.fl-comment-btn:hover { background:#e8f0ff; border-color:#8888cc; }
.fl-like-btn.liked    { background:#fff0e8; border-color:#ff4444; }

/* comentários */
.fl-comments-area { display:none; border-top:1px solid #e0d8c8; background:#f8f5f0; padding:8px 10px; }
.fl-comments-area.aberto { display:block; }
.fl-comments-list { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; max-height:120px; overflow-y:auto; }
.fl-comment { font-size:11px; color:#333; line-height:1.4; }
.fl-comment-nick { font-weight:bold; margin-right:4px; }
.fl-comment-input-row { display:flex; gap:6px; }
.fl-comment-input-row input {
  flex:1; padding:4px 8px; border:1px solid #c0b090; border-radius:10px;
  font-size:11px; font-family:Tahoma,sans-serif; outline:none; background:white; width:auto;
}
.fl-comment-input-row input:focus { border-color:#ff6600; }
.fl-comment-input-row button {
  padding:4px 12px; background:#ff6600; color:white; border:none; border-radius:10px;
  font-size:11px; cursor:pointer; width:auto;
}
.fl-comment-input-row button:hover { background:#cc4400; }

/* ══════════════════════════════════════════
   MENU INICIAR
══════════════════════════════════════════ */
.start-menu {
  position:absolute; bottom:38px; left:0; width:420px;
  background:#245edb; border:1px solid #0c2d7e; border-radius:8px 8px 0 0;
  box-shadow:3px -3px 12px rgba(0,0,0,.5); display:none; flex-direction:column; z-index:999; overflow:hidden;
}
.start-menu.aberto { display:flex; }
.start-menu-header {
  background:linear-gradient(to right,#1a3a9a,#2a5ae0);
  padding:12px 14px; display:flex; align-items:center; gap:12px; border-bottom:2px solid #0c2d7e;
}
.start-menu-avatar { width:48px; height:48px; border-radius:4px; border:2px solid rgba(255,255,255,.4); overflow:hidden; flex-shrink:0; }
.start-menu-avatar img { width:100%; height:100%; object-fit:cover; }
.start-menu-inicial {
  width:100%; height:100%; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:bold; color:white;
}
.start-menu-nick { font-size:14px; font-weight:bold; color:white; text-shadow:1px 1px 2px rgba(0,0,0,.4); }
.start-menu-body { display:flex; background:white; min-height:200px; }
.start-menu-col { display:flex; flex-direction:column; padding:8px 0; }
.start-menu-col.left  { flex:1; background:white; }
.start-menu-col.right { width:160px; background:#d8e4f8; padding:8px 0; }
.start-menu-divider { width:1px; background:#b0c4e8; margin:8px 0; }
.menu-item { display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; transition:background .1s; }
.menu-item:hover { background:#316ac5; }
.menu-item:hover .menu-item-title,
.menu-item:hover .menu-item-sub { color:white; }
.menu-item img { width:32px; height:32px; object-fit:contain; flex-shrink:0; }
.menu-item-title { font-size:12px; font-weight:bold; color:#000; }
.menu-item-sub   { font-size:10px; color:#666; }
.menu-item-right { padding:6px 14px; font-size:12px; color:#000; cursor:pointer; white-space:nowrap; }
.menu-item-right:hover { background:#316ac5; color:white; }

/* ══════════════════════════════════════════
   NOTIFICAÇÃO XP
══════════════════════════════════════════ */
.notificacao {
  position:fixed; bottom:50px; right:16px; z-index:9999;
  background:linear-gradient(to bottom,#2a5ae0,#1a3a9a);
  color:white; padding:10px 18px; border-radius:6px;
  font-size:13px; font-weight:bold; box-shadow:0 4px 12px rgba(0,0,0,.4);
  opacity:0; transform:translateY(10px); transition:opacity .3s,transform .3s;
  pointer-events:none;
}
.notificacao.visivel { opacity:1; transform:translateY(0); }

/* Popup estilo MSN */
.msn-popup {
  position: fixed;
  bottom: 40px;
  right: 10px;
  width: 240px;
  background: linear-gradient(to bottom, #f3f7fd 0%, #cfdff5 100%);
  border: 1px solid #6d96d9;
  border-radius: 3px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  z-index: 10001;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: msnSlideUp 0.5s ease-out;
}

/* ══════════════════════════════════════════
   JANELA DE TAREFAS
══════════════════════════════════════════ */
.task-tabs { display: flex; background: #e0dfe3; padding: 4px 4px 0; border-bottom: 1px solid #999; }
.task-tab { 
  padding: 4px 12px; font-size: 11px; cursor: pointer; background: #d6d6d6; 
  border: 1px solid #999; border-bottom: none; border-radius: 4px 4px 0 0; margin-right: 2px;
}
.task-tab.active { background: #fff; font-weight: bold; border-bottom: 1px solid #fff; margin-bottom: -1px; z-index: 2; }

.task-list-container { padding: 12px; display: flex; flex-direction: column; gap: 10px; background: #fff; height: 100%; overflow-y: auto; }

.task-card, .event-share-card {
  border: 1px solid #c0b090; border-radius: 4px; background: #fdfcf7; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}
.task-card.done { opacity: 0.7; background: #f0f0f0; border-color: #ccc; }
.task-info, .event-share-header { flex: 1; }
.task-title, .event-share-title { font-size: 12px; font-weight: bold; color: #333; display: flex; align-items: center; gap: 6px; }
.task-desc { font-size: 11px; color: #666; margin-top: 2px; }
.xp-badge { 
  background: #ffcc00; color: #000; font-size: 9px; font-weight: bold; 
  padding: 1px 6px; border-radius: 10px; border: 1px solid #d4a017;
}
.task-btn {
  background: linear-gradient(to bottom, #f0f0e8, #d8d0c0); border: 1px solid;
  border-top-color: #fff; border-left-color: #fff; border-right-color: #888; border-bottom-color: #888;
  font-size: 11px; padding: 4px 10px; cursor: pointer; border-radius: 3px;
}
.task-btn:hover { background: #e8e0d0; }
.task-btn.mini { font-size: 10px; padding: 2px 6px; }
.task-done-label { font-size: 11px; color: #5aad5a; font-weight: bold; }

.share-upload-box {
  background: #f0f4fc; border: 1px dashed #7090c0; border-radius: 4px; padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.share-upload-box label { font-size: 10px; font-weight: bold; color: #003399; }
.share-file-input { font-size: 10px; }
.share-upload-box textarea { 
  width: 100%; padding: 4px; font-size: 11px; border: 1px solid #7f9db9; 
  resize: none; font-family: inherit;
}
.share-status-box {
  text-align: center; padding: 10px; background: #fffbe8; border: 1px solid #ffe066;
  border-radius: 4px; font-size: 11px; font-weight: bold; color: #856404;
}

.link-preview-auto {
  min-height: 20px;
  cursor: pointer;
}

/* ══════════════════════════════════════════
   NOTIFICAÇÃO XP
══════════════════════════════════════════ */
@keyframes msnSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes msnSlideDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(100%); opacity: 0; }
}
.msn-popup.saindo {
  animation: msnSlideDown 0.5s ease-in forwards;
}
.msn-popup-header { font-size: 10px; font-weight: bold; color: #003399; display: flex; align-items: center; gap: 5px; border-bottom: 1px solid rgba(0,51,153,0.1); padding-bottom: 3px; }
.msn-popup-body { font-size: 11px; color: #333; line-height: 1.2; }
.msn-popup-btns { display: flex; gap: 5px; margin-top: 5px; }
.msn-popup-btns button {
  flex: 1; padding: 3px; font-size: 10px; cursor: pointer;
  background: #f0f0f0; border: 1px solid #999; border-radius: 3px;
}
.msn-popup-btns button.accept { background: #e1f5fe; border-color: #039be5; font-weight: bold; }

/* ══════════════════════════════════════════
   MOBILE
══════════════════════════════════════════ */
@media (max-width:768px) {
  .logo { font-size:42px; }
  .sub  { font-size:12px; margin-bottom:20px; }
  .login-box  { width:92vw; padding:20px 18px; }
  .perfil-box { width:92vw; }

  .notificacao { bottom:54px; right:10px; left:10px; text-align:center; }
}

@media (max-width: 600px) {
  #janela-msn .messages {
    height: 250px !important;
    overflow-y: auto !important;
    flex-shrink: 0 !important;
  }

  #janela-msn .msn-right-panel img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ══════════════════════════════════════════
   BOOT SCREEN XP
══════════════════════════════════════════ */
.boot-screen {
  width: 100vw;
  height: 100vh;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.boot-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0; left: 0;
  opacity: 0.15;
  pointer-events: none;
}

.boot-titulo {
  position: relative;
  z-index: 1;
  color: white;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 1px;
  font-family: Tahoma, sans-serif;
}

.boot-sub {
  position: relative;
  z-index: 1;
  color: #aac4ff;
  font-size: 14px;
  font-family: Tahoma, sans-serif;
  margin-top: -10px;
}

.boot-barra-container {
  position: relative;
  z-index: 1;
  width: 260px;
  height: 10px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 20px;
}

.boot-barra {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, #1a6bc7, #4a9de8, #1a6bc7);
  background-size: 200% 100%;
  border-radius: 5px;
  transition: width 0.2s ease;
  animation: barra-shimmer 1.2s linear infinite;
}

@keyframes barra-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.boot-copy {
  position: relative;
  z-index: 1;
  color: #555;
  font-size: 11px;
  font-family: Tahoma, sans-serif;
  margin-top: 30px;
}

/* ══════════════════════════════════════════
   MEU PERFIL
══════════════════════════════════════════ */
.up-body {
  flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; background: #f0f0e8; display: block;
}
.up-header {
  background:linear-gradient(to bottom,#3a6ec8,#1a4aac);
  padding:16px; display:flex; align-items:center; gap:14px;
}
.up-avatar-wrap {
  position:relative; flex-shrink:0;
}
.up-avatar-img {
  width:72px; height:72px; border-radius:6px; object-fit:cover;
  border:3px solid rgba(255,255,255,.5);
}
.up-avatar-inicial {
  width:72px; height:72px; border-radius:6px; display:flex; align-items:center;
  justify-content:center; font-size:32px; font-weight:bold; color:white;
  border:3px solid rgba(255,255,255,.4);
}
.up-avatar-edit {
  position:absolute; bottom:-6px; right:-6px; width:22px; height:22px;
  background:#ffcc00; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:11px; cursor:pointer; border:2px solid white;
}
.up-avatar-edit:hover { background:#ffdd44; }
.up-info { flex:1; }
.up-nick  { font-size:18px; font-weight:bold; color:white; text-shadow:1px 1px 2px rgba(0,0,0,.4); }
.up-level { font-size:12px; color:rgba(255,255,255,.85); margin:3px 0 8px; }
.up-barra-wrap { display:flex; flex-direction:column; gap:3px; }
.up-barra-bg   { height:8px; background:rgba(0,0,0,.3); border-radius:4px; overflow:hidden; }
.up-barra-fill { height:100%; background:linear-gradient(to right,#ffcc00,#ffaa00); border-radius:4px; transition:width .4s; }
.up-barra-txt  { font-size:10px; color:rgba(255,255,255,.75); }

/* cupom */
.up-cupom-box {
  margin:12px; background:white; border:1px solid #c0b090; border-radius:6px;
  padding:12px 14px; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.up-cupom-label { font-size:11px; color:#888; }
.up-cupom-code  {
  font-size:22px; font-weight:bold; color:#cc4400; letter-spacing:3px;
  font-family:Courier New, monospace; background:#fff8f0;
  padding:6px 16px; border-radius:4px; border:1px dashed #ffaa66;
}
.up-cupom-sub  { font-size:11px; color:#666; }
.up-cupom-copy {
  padding:5px 16px; background:linear-gradient(to bottom,#ff8800,#cc5500);
  color:white; border:none; border-radius:3px; font-size:11px; cursor:pointer;
  font-family:Tahoma,sans-serif;
}
.up-cupom-copy:hover { background:linear-gradient(to bottom,#ffaa00,#dd6600); }

/* ranking */
.up-ranking-box { margin:0 12px 12px; background:white; border:1px solid #c0b090; border-radius:6px; overflow:hidden; }
.up-ranking-title { padding:8px 12px; background:#e8e0d0; font-size:12px; font-weight:bold; border-bottom:1px solid #c0b090; }
.up-ranking-lista { display:flex; flex-direction:column; }
.up-ranking-loading { padding:16px; text-align:center; color:#888; font-size:12px; }
.up-rank-row {
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  border-bottom:1px solid #f0e8d8;
}
.up-rank-row:last-child { border-bottom:none; }
.up-rank-row.mine { background:#fffbe8; }
.up-rank-medal { width:24px; text-align:center; font-size:16px; flex-shrink:0; }
.up-rank-num   { font-size:12px; font-weight:bold; color:#888; }
.up-rank-avatar { width:28px; height:28px; border-radius:3px; object-fit:cover; border:1px solid #d0c0a0; flex-shrink:0; }
.up-rank-avatar-inicial {
  width:28px; height:28px; border-radius:3px; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:bold; color:white; flex-shrink:0;
}
.up-rank-info  { flex:1; display:flex; flex-direction:column; gap:1px; }
.up-rank-nick  { font-size:12px; font-weight:bold; }
.up-rank-level { font-size:10px; color:#888; }
.up-rank-xp    { font-size:11px; font-weight:bold; color:#cc4400; flex-shrink:0; }

@media (max-width:768px) {
  .up-header { padding:12px; gap:10px; }
  .up-avatar-img, .up-avatar-inicial { width:56px; height:56px; font-size:24px; }
  .up-nick { font-size:15px; }
  .up-cupom-code { font-size:18px; }
}

/* Estilos para editor do perfil Orkut dentro do Meu Perfil */
.up-orkut-fields { display: flex; flex-direction: column; gap: 8px; }
.up-orkut-fields label { font-size: 10px; font-weight: bold; color: #6D84B4; margin-bottom: 2px; display: block; }
.up-orkut-fields input, .up-orkut-fields select, .up-orkut-fields textarea {
  width: 100%; padding: 4px; border: 1px solid #7f9db9; font-size: 11px; background: #fff; outline: none;
}
.up-orkut-fields textarea { height: 55px; resize: none; font-family: inherit; }
.up-orkut-save-btn {
  width: 100%; margin-top: 12px; padding: 6px; background: #6B90C0; color: white; border: 1px solid #3B5998; 
  cursor: pointer; font-weight: bold; font-size: 11px; border-radius: 2px;
}
.up-orkut-save-btn:hover { background: #5577a8; }

/* ── xp-body para janelas simples ── */
.xp-body {
  flex: 1;
  overflow: auto;
  background: white;
}

#webamp-container {
  width: 100%;
  height: 100%;
}
#webamp {
  min-height: 0; /* Evita aviso de regra vazia */
}

#webamp-host {
  position: absolute;
  top: 50px;
  left: 50px;
  pointer-events: none; /* Permite clicar nos ícones "através" do container vazio */
}

#webamp-host > * {
  pointer-events: auto; /* Mas permite interagir com o player em si */
}

/* IE HUB STYLES */
.ie-browser-container { display: flex; flex-direction: column; height: 100%; background: #fff; }
.ie-toolbar { background: #ece9d8; padding: 4px; border-bottom: 1px solid #999; display: flex; align-items: center; gap: 10px; }
.ie-btn-nav { 
  background: transparent; border: 1px solid transparent; padding: 2px 6px; 
  font-size: 11px; cursor: pointer; border-radius: 3px;
}
.ie-btn-nav:hover { background: #fff; border-color: #316ac5; }
.ie-address-bar { background: #ece9d8; padding: 2px 8px 5px; border-bottom: 1px solid #999; display: flex; align-items: center; gap: 5px; font-size: 11px; }
.ie-address-input { 
  flex: 1; background: #fff; border: 1px solid #7f9db9; padding: 2px 6px; 
  font-family: Arial; font-size: 12px; color: #000;
}
.ie-content { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }

.ie-event-card { 
  display: flex; gap: 15px; border-bottom: 1px solid #eee; padding-bottom: 20px;
  animation: fadeIn 0.5s ease;
}
.ie-event-img-container { 
  width: 180px; height: 101px; flex-shrink: 0; background: #000; 
  border: 1px solid #ccc; border-radius: 4px; overflow: hidden;
}
.ie-event-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ie-event-name { font-size: 16px; font-weight: bold; color: #003399; }
.ie-event-date { font-size: 12px; color: #666; text-transform: capitalize; }
.ie-badge { font-size: 9px; font-weight: bold; padding: 2px 6px; border-radius: 3px; width: fit-content; }
.ie-badge.open { background: #e6f4ea; color: #1e7e34; border: 1px solid #c3e6cb; }
.ie-badge.soon { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.ie-event-actions { display: flex; gap: 8px; margin-top: 8px; }
.ie-action-btn { 
  padding: 4px 12px; font-size: 11px; cursor: pointer; background: #f0f0f0; 
  border: 1px solid #7f9db9; border-radius: 3px;
}
.ie-action-btn.primary { background: #316ac5; color: white; border-color: #0831a0; font-weight: bold; }
.ie-event-xp-hint { font-size: 9px; color: #999; margin-top: 4px; font-style: italic; }

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

@media (max-width: 600px) {
  .ie-event-card { flex-direction: column; gap: 10px; }
  .ie-event-img-container { width: 100%; height: auto; aspect-ratio: 16/9; }
  .ie-toolbar-btns { display: none; }
}