/* ===== BASE / RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-primary:    #0a0a0a;
  --bg-secondary:  rgba(18,18,18,0.62);
  --bg-card:       rgba(24,24,24,0.38);
  --bg-hover:      rgba(255,255,255,0.08);
  --bg-active:     rgba(255,255,255,0.1);
  --border:        rgba(255,255,255,0.10);
  --border-hover:  rgba(255,255,255,0.18);
  --text-primary:  #ffffff;
  --text-secondary:#a0a0a0;
  --text-muted:    #555555;
  --accent:        #ffffff;
  --accent-dim:    rgba(255,255,255,0.12);
  --danger:        #ff4444;
  --success:       #44ff88;
  --warning:       #ffaa44;
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:     0 4px 24px rgba(0,0,0,0.6);
  --shadow-lg:     0 8px 48px rgba(0,0,0,0.8);
  --font:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nav-height:    52px;
  --transition:    0.2s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.4s cubic-bezier(0.4,0,0.2,1);
}

html, body { width:100%; height:100%; overflow:hidden; background:var(--bg-primary); color:var(--text-primary); font-family:var(--font); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
body { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }

a { color:var(--text-secondary); text-decoration:none; transition:color var(--transition); }
a:hover { color:var(--text-primary); }
button { cursor:pointer; border:none; background:none; font-family:var(--font); font-size:14px; color:var(--text-primary); transition:all var(--transition); }
input { font-family:var(--font); font-size:14px; color:var(--text-primary); background:none; border:none; outline:none; }
input, textarea, iframe, [contenteditable="true"] { user-select:text; -webkit-user-select:text; }
input::placeholder { color:var(--text-muted); }
.hidden { display:none !important; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.2); }

/* Toggle */
.toggle { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:var(--bg-active); border:1px solid var(--border); border-radius:12px; cursor:pointer; transition:all var(--transition); }
.toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:2px; top:2px; background:var(--text-muted); border-radius:50%; transition:all var(--transition); }
.toggle input:checked + .toggle-slider { background:var(--accent); border-color:var(--accent); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); background:var(--bg-primary); }

/* Page layout */
#app { display:flex; flex-direction:column; height:100vh; overflow:hidden; position:relative; }
/* Navbar is position:absolute, so main-content fills full height */
#main-content { flex:1; overflow:hidden; position:relative; height:100%; }
.page { position:absolute; inset:0; overflow-y:auto; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity var(--transition-slow), transform var(--transition-slow); }
.page.active { opacity:1; pointer-events:all; transform:translateY(0); }
/* Scrollable pages: home gets padding-top for navbar */
#page-home { padding-top: var(--nav-height); }

/* Buttons */
.btn-primary { padding:8px 20px; background:var(--accent); color:var(--bg-primary); border-radius:var(--radius-sm); font-size:13px; font-weight:600; transition:all var(--transition); }
.btn-primary:hover { opacity:0.85; transform:translateY(-1px); }
.btn-secondary { padding:8px 16px; background:var(--bg-active); color:var(--text-secondary); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-weight:500; transition:all var(--transition); }
.btn-secondary:hover { color:var(--text-primary); border-color:var(--border-hover); }
.view-more-btn { 
  font-size: 13px; 
  font-weight: 600; 
  color: var(--text-secondary); 
  padding: 8px 16px; 
  border-radius: 10px; 
  border: 1px solid var(--border); 
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%); 
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.view-more-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bg-hover) 0%, transparent 100%);
  opacity: 0;
  transition: opacity var(--transition);
}
.view-more-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, 
    transparent 30%, 
    color-mix(in srgb, var(--accent) 15%, transparent) 50%, 
    transparent 70%);
  opacity: 0;
  transition: opacity var(--transition);
}
.view-more-btn:hover { 
  color: var(--text-primary); 
  border-color: var(--border-hover); 
  background: var(--bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.view-more-btn:hover::before { opacity: 1; }
.view-more-btn:hover::after { 
  opacity: 1;
  animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.view-more-btn:active {
  transform: scale(0.97);
}

/* Toast */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 16px; font-size:13px; color:var(--text-primary); box-shadow:var(--shadow-md); animation:toastIn 0.3s ease forwards; max-width:300px; }
.toast.success { border-color:rgba(68,255,136,0.3); }
.toast.error   { border-color:rgba(255,68,68,0.3); }
.toast.warning { border-color:rgba(255,170,68,0.3); }
.toast.fade-out { animation:toastOut 0.3s ease forwards; }
@keyframes toastIn  { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(20px)} }

/* Modal overlay */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); backdrop-filter:blur(10px); z-index:400; display:flex; align-items:center; justify-content:center; animation:fadeIn 0.2s ease; }
.modal-box { background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); animation:modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes modalIn { from{opacity:0;transform:scale(0.9) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }

/* Welcome modal */
.welcome-box { width:420px; max-width:calc(100vw - 32px); padding:36px 32px; display:flex; flex-direction:column; gap:20px; align-items:center; text-align:center; }
.welcome-logo { display:flex; align-items:center; gap:12px; }
.welcome-title { font-size:22px; font-weight:800; color:var(--text-primary); letter-spacing:-0.5px; }
.welcome-desc { font-size:14px; color:var(--text-muted); margin-top:-8px; }
.welcome-input { width:100%; background:var(--bg-active); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 16px; font-size:15px; color:var(--text-primary); font-family:var(--font); transition:border-color var(--transition); text-align:center; }
.welcome-input:focus { border-color:rgba(255,255,255,0.3); outline:none; }

/* Welcome back notification */
.welcome-back { position:fixed; top:68px; right:20px; z-index:500; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 16px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-md); animation:wbIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; max-width:260px; }
.welcome-back.hide { animation:wbOut 0.3s ease forwards; }
@keyframes wbIn  { from{opacity:0;transform:translateX(20px) scale(0.95)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes wbOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(20px)} }
.wb-icon { width:32px; height:32px; background:rgba(255,255,255,0.06); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent); }
.wb-text { display:flex; flex-direction:column; gap:1px; }
.wb-title { font-size:12px; color:var(--text-muted); }
.wb-name { font-size:14px; font-weight:700; color:var(--text-primary); }

/* Setting input */
.setting-input { 
  background: linear-gradient(135deg, var(--bg-active) 0%, var(--bg-card) 100%); 
  border: 1px solid var(--border); 
  border-radius: 10px; 
  padding: 10px 14px; 
  font-size: 13px; 
  color: var(--text-primary); 
  font-family: var(--font); 
  width: 220px; 
  transition: all var(--transition);
  font-weight: 500;
}
.setting-input:focus { 
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); 
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateY(-1px);
}
.setting-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

/* Wallpaper glass mode */
body.wallpaper-active #navbar,
body.wallpaper-active .apps-page-header,
body.wallpaper-active .games-page-header,
body.wallpaper-active .settings-filter-wrap,
body.wallpaper-active .settings-nav,
body.wallpaper-active .search-container,
body.wallpaper-active .home-footer,
body.wallpaper-active .app-card,
body.wallpaper-active .game-card,
body.wallpaper-active .setting-row,
body.wallpaper-active .profile-menu,
body.wallpaper-active .proxy-tabs-bar,
body.wallpaper-active .proxy-toolbar,
body.wallpaper-active .proxy-devtools-panel,
body.wallpaper-active .ai-header,
body.wallpaper-active .ai-sidebar,
body.wallpaper-active .ai-input-area,
body.wallpaper-active .music-sidebar,
body.wallpaper-active .music-topbar,
body.wallpaper-active .music-player-bar {
  background: color-mix(in srgb, var(--bg-secondary) 56%, transparent) !important;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

body.wallpaper-active .app-card,
body.wallpaper-active .game-card,
body.wallpaper-active .setting-row,
body.wallpaper-active .profile-menu {
  border-color: color-mix(in srgb, var(--border-hover) 60%, transparent);
}

/* AI + Music: fundo transparente quando wallpaper ativo */
body.wallpaper-active .ai-page,
body.wallpaper-active .music-page {
  background: transparent !important;
}

body.wallpaper-active .ai-chat-panel,
body.wallpaper-active .ai-chat-messages {
  background: transparent !important;
}

body.wallpaper-active .ai-msg-bubble {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.wallpaper-active .ai-msg-row.user .ai-msg-bubble {
  background: color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,0.35)) !important;
}

body.wallpaper-active .ai-msg-row.assistant .ai-msg-bubble {
  background: rgba(0,0,0,0.35) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

body.wallpaper-active .ai-input-bar {
  background: rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-color: rgba(255,255,255,0.15) !important;
}

body.wallpaper-active .ai-thread-item.active {
  background: color-mix(in srgb, var(--accent) 20%, rgba(0,0,0,0.4)) !important;
}

body.wallpaper-active .music-main,
body.wallpaper-active .music-content-wrap {
  background: transparent !important;
}

body.wallpaper-active .music-card {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,0.1) !important;
}

body.wallpaper-active .music-track-row:hover {
  background: rgba(255,255,255,0.08) !important;
}