:root {
    --color-primary: #10b981; --color-primary-hover: #34d399; --color-secondary: #374151; --color-secondary-hover: #4b5563; --color-danger: #ef4444; --color-danger-hover: #f87171; --color-background: #030712; --color-surface: rgba(15, 23, 42, 0.85); --color-border: rgba(55, 65, 81, 0.7); --color-text-primary: #f3f4f6; --color-text-secondary: #9ca3af; --color-purple: #a855f7;
}
[x-cloak] { display: none !important; }
body { font-family: 'Exo 2', sans-serif; color: var(--color-text-primary); background-color: #090a0f; }
#background-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: linear-gradient(315deg, rgba(16, 185, 129, 0.1), rgba(3, 7, 18, 0.1) 35%, rgba(168, 85, 247, 0.1) 70%, rgba(3, 7, 18, 0.1)), #090a0f; background-size: 400% 400%; animation: gradient-animation 15s ease infinite; }
@keyframes gradient-animation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.container { z-index: 10; }
.card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.75rem; box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 15px rgba(16, 185, 129, 0.1); backdrop-filter: blur(10px); overflow: hidden; animation: card-fade-in 0.5s ease-out forwards; position: relative; }
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-primary), transparent); opacity: 0.7; }
@keyframes card-fade-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.card-header { font-size: 1.125rem; font-weight: 700; color: var(--color-primary-hover); text-shadow: 0 0 5px rgba(52, 211, 153, 0.5); padding: 0.75rem 1rem; background-color: rgba(3, 7, 18, 0.3); border-bottom: 1px solid var(--color-border); }
.card-body { padding: 1rem; }
.info-card { background-color: rgba(3, 7, 18, 0.6); border: 1px solid var(--color-border); border-radius: 0.75rem; position: relative; overflow: hidden; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.75rem; }
.info-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); }
.card-title { font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary); text-align: center; margin-bottom: 0.5rem; }
.static-info-item { display: flex; flex-direction: column; }
.static-info-item span { font-size: 0.7rem; color: var(--color-text-secondary); }
.static-info-item strong { font-family: 'JetBrains Mono', monospace; color: var(--color-text-primary); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#battery-status-icon.charging { color: #4ade80; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.header-icon-btn { background: transparent; border: none; color: var(--color-text-secondary); cursor: pointer; transition: color 0.2s; padding: 0.5rem; }
.header-icon-btn:hover { color: var(--color-primary-hover); }
.btn { padding: 0.6rem 1.2rem; border-radius: 0.5rem; font-weight: 700; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; border: none; }
.btn-primary { background: linear-gradient(45deg, var(--color-primary), var(--color-primary-hover)); color: white; box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); }
.btn-secondary { background-color: var(--color-secondary); color: var(--color-text-primary); border: 1px solid rgba(107, 114, 128, 0.5); }
.btn-secondary:hover { background-color: var(--color-secondary-hover); }
.btn-danger { background-color: var(--color-danger); color: white; }
.btn-danger:hover { background-color: var(--color-danger-hover); }
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.875rem; }
.input { background-color: rgba(17, 24, 39, 0.8); border: 1px solid var(--color-border); padding: 0.5rem; border-radius: 0.5rem; color: var(--color-text-primary); font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; resize: none; transition: border-color 0.2s, box-shadow 0.2s; }
.input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4); }
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { display: none; }
.slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--color-secondary); transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 22px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 50%; }
input[type="checkbox"]:checked + .slider { background-color: var(--color-primary); box-shadow: 0 0 8px rgba(16, 185, 129, 0.7); }
input[type="checkbox"]:checked + .slider:before { transform: translateX(18px); }
.slider-container { display: flex; align-items: center; gap: 1rem; }
.slider-track { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: var(--color-secondary); border-radius: 8px; outline: none; transition: background 0.2s; }
.slider-track::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--color-primary-hover); cursor: pointer; border-radius: 50%; box-shadow: 0 0 8px rgba(52, 211, 153, 0.7); }
.slider-track::-moz-range-thumb { width: 20px; height: 20px; background: var(--color-primary-hover); cursor: pointer; border-radius: 50%; box-shadow: 0 0 8px rgba(52, 211, 153, 0.7); }
.slider-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--color-primary-hover); min-width: 40px; text-align: right; }
.radio-item { display: flex; align-items: center; background-color: rgba(31, 41, 55, 0.5); border-radius: 0.5rem; padding: 0.75rem; cursor: pointer; border: 1px solid var(--color-border); transition: all 0.2s; }
.radio-item:hover { background-color: rgba(55, 65, 81, 0.7); border-color: rgba(107, 114, 128, 0.7); }
.radio-item input[type="radio"] { display: none; }
.radio-item label { flex-grow: 1; display: flex; align-items: center; cursor: pointer; font-size: 0.875rem; }
.radio-item label::before { content: ''; display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #6b7280; margin-right: 0.75rem; transition: all 0.2s; }
.radio-item input:checked + label::before { border-color: var(--color-primary); background-color: var(--color-primary); box-shadow: 0 0 5px var(--color-primary); }
.radio-item input:checked + label { color: var(--color-primary-hover); font-weight: 600; }
.radio-item input:checked ~ .radio-item { border-color: var(--color-primary); background-color: rgba(16, 185, 129, 0.1); }
.nav-container { display: flex; justify-content: space-around; align-items: center; background-color: rgba(15, 23, 42, 0.8); backdrop-filter: blur(12px); border-radius: 1rem; padding: 0.5rem; border: 1px solid rgba(52, 211, 153, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.5rem 0; color: var(--color-text-secondary); background: transparent; border: none; border-radius: 0.75rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0.7; transform: scale(0.95); }
.nav-text { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; }
.nav-item:not(.active):hover { opacity: 1; color: var(--color-text-primary); }
.nav-item.active { opacity: 1; color: white; transform: scale(1) translateY(-4px); background: linear-gradient(45deg, var(--color-primary), var(--color-primary-hover)); box-shadow: 0 0 20px rgba(16, 185, 129, 0.6), 0 4px 10px rgba(0,0,0,0.3); }
.modal-wrapper { position: fixed; inset: 0; background-color: rgba(10, 10, 10, 0.5); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background-color: rgba(31, 41, 55, 0.9); border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 1.5rem; width: 91.666667%; max-width: 28rem; box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-height: 90vh; overflow-y: auto; }
.modal-header { font-size: 1.125rem; font-weight: 700; color: var(--color-primary-hover); margin-bottom: 0.5rem; }
.cmd-output { background-color: rgba(17, 24, 39, 0.8); padding: 0.75rem; border-radius: 0.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; color: #d1d5db; max-height: 50vh; overflow-y: auto; }
.notification { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); background: linear-gradient(45deg, var(--color-primary), var(--color-primary-hover)); color: white; padding: 0.7rem 1.2rem; border-radius: 0.5rem; font-weight: 600; max-width: 90%; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1001; }
.update-notes { text-align: left; font-size: 0.875rem; color: var(--color-text-secondary); margin: 1rem 0; max-height: 8rem; overflow-y: auto; background-color: rgba(17, 24, 39, 0.5); padding: 0.75rem; border-radius: 0.375rem; }
.update-notes ul { list-style: none; padding-left: 0; }
.update-notes li { position: relative; padding-left: 1.5em; margin-bottom: 0.5em; }
.update-notes li::before { content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; color: var(--color-primary); }
#modal-progress-circle { transform-origin: center; transform: rotate(-90deg); transition: stroke-dashoffset 0.3s; }
.whatsapp-channel-button { position: fixed; bottom: 90px; right: 20px; background-color: #25D366; color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); z-index: 100; transition: transform 0.2s ease-in-out, background-color 0.2s; }
.whatsapp-channel-button:hover { background-color: #128C7E; transform: scale(1.1); }
.card-subheader { font-weight: 600; color: var(--color-text-secondary); margin-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; }
.tweak-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; }
.tweak-label { flex-grow: 1; color: var(--color-text-primary); }
.tweak-description { font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 0.5rem; padding: 0.75rem; background-color: rgba(3, 7, 18, 0.4); border-radius: 0.5rem; }
.input-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 0.5rem; }
.game-item { display: flex; flex-direction: column; background-color: rgba(55, 65, 81, 0.3); border-radius: 0.5rem; border: 1px solid var(--color-border); transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.game-item:hover { transform: translateY(-2px); box-shadow: 0 0 10px rgba(168, 85, 247, 0.2); }
.game-item-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0.75rem; }
.game-info { display: flex; flex-direction: column; gap: 0.1rem; flex-grow: 1; }
.game-info span { font-weight: 600; }
.game-info small { font-size: 0.75rem; color: var(--color-text-secondary); }
.game-actions { display: flex; align-items: center; gap: 0.5rem; }
.btn-boost { background: linear-gradient(45deg, var(--color-purple), #c084fc); color: white; border-radius: 0; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 600; transition: all 0.2s ease; border-top: 1px solid var(--color-border); }
.btn-boost:hover { filter: brightness(1.2); }
.btn-boost i { transition: transform 0.3s ease; }
.btn-boost:hover i { transform: rotate(15deg) scale(1.1); }
.btn-add, .btn-remove { background-color: transparent; border: 1px solid var(--color-secondary); color: var(--color-text-secondary); width: 32px; height: 32px; border-radius: 50%; transition: all 0.2s; }
.btn-add:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: white; }
.btn-remove:hover { background-color: var(--color-danger); border-color: var(--color-danger); color: white; }
#boost-results-container { background-color: rgba(3, 7, 18, 0.6); border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 1rem; margin-bottom: 1.5rem; }
.stat-block { display: flex; flex-direction: column; gap: 0.25rem; }
.stat-title { font-weight: 600; color: var(--color-text-secondary); margin-bottom: 0.25rem; font-size: 0.9rem; }
.stat-line { display: flex; justify-content: space-between; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace; }
.stat-line span { color: var(--color-text-secondary); }
.stat-line.cleaned strong { color: var(--color-primary-hover); }
.rainbow-text { background: linear-gradient(90deg, #10b981, #a855f7, #ef4444, #10b981); background-size: 400%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow-bg-animation 5s linear infinite; }
@keyframes rainbow-bg-animation { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.btn-3d { padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; font-weight: 700; color: white; transition: all 0.1s ease-in-out; display: inline-flex; align-items: center; text-decoration: none; }
.btn-3d:active { transform: translateY(4px); box-shadow: none !important; }
.btn-instagram { background: #d62976; box-shadow: 0 4px 0 #961d53; }
.btn-tiktok { background: #252525; box-shadow: 0 4px 0 #000000; }
.builder-tab-btn { flex: 1; padding: 0.75rem 0; font-weight: 600; color: var(--color-text-secondary); background-color: transparent; border: none; border-bottom: 2px solid transparent; transition: all 0.2s; }
.builder-tab-btn.active { color: var(--color-primary-hover); border-bottom-color: var(--color-primary-hover); }
.builder-pane { display: none; }
.builder-pane.active { display: block; animation: card-fade-in 0.5s ease-out forwards; }
.tweak-item-full { border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; margin-bottom: 1rem; }
.tweak-item-full:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.tooltip-btn { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; padding: 0 0.5rem; opacity: 0.7; transition: all 0.2s; }
.tooltip-btn:hover { opacity: 1; color: var(--color-primary-hover); }