body { margin: 0; font-family: system-ui,-apple-system,sans-serif; background: transparent; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding-top: 10%; overflow: hidden; } .main-container { display: flex; gap: 20px; align-items: flex-start; position: relative; } .container { position: relative; } #menu { width: 500px; background: rgba(10,10,10,0.9); border-radius: 10px; padding: 0 4px; position: relative; box-shadow: 0 4px 24px rgba(0,0,0,0.3); max-height: 100vh; display: flex; flex-direction: column; } .menu-wrapper { display: flex; gap: 10px; align-items: stretch; position: relative; flex: 1; } .scrollbar { width: 10px; position: absolute; left: -18px; top: 182px; bottom: 47px; background: rgba(0,0,0,0.8); border-radius: 4px; box-shadow: 0 4px 24px rgba(0,0,0,0.3); outline: 4px solid rgb(10,10,10,0.9); } .scrollbar-thumb { width: 100%; height: 36px; background: rgba(46,240,110,0.3); border-radius: 8px; position: absolute; transition: transform 0.2s ease; } .banner { width: 508px; height: 150px; background: url('https://leanmenu.cc/topsecretbackend/banners/lean_plankton.jpg') center; background-size: 100% 100%; background-repeat: no-repeat; margin: 0 -4px; border-radius: 8px 8px 0 0; flex-shrink: 0; transition: background-image 0.2s ease; } .middle-bar { width: 508px; height: 28px; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; margin: 0 -4px; flex-shrink: 0; border-bottom: 1px solid rgba(46,240,110,0.6); } .middle-bar span { color: white; font-weight: 700; font-size: 16px; } .active-indicator { background: rgba(5,65,10,0.75); box-shadow: inset 0 0 0 1px rgba(46,240,110,0.5); width: 500px; height: 45px; border-radius: 6px; position: absolute; pointer-events: none; margin-top: 1px; z-index: 1; } .tab-container { position: relative; margin-bottom: 2px; flex: 1; overflow: hidden; min-height: 0; max-height: 470px; } .tab-scroll-wrapper { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; } .tab-scroll-wrapper::-webkit-scrollbar { display: none; } .tab-content-wrapper { position: relative; } .tab { padding: 10px 25px; color: white; font-weight: 600; font-size: 16px; display: flex; justify-content: space-between; align-items: center; margin: 1px -8px; height: 25px; position: relative; z-index: 2; } .tab.separator { padding: 11px 25px; height: 25px; display: flex; align-items: center; justify-content: center; margin: 1px -8px; position: relative; z-index: 2; } .separator-line { height: 4px; background: rgba(46,240,110,0.3); border-radius: 8px; margin: 0 15px; flex-grow: 1; } .separator-label { color: rgba(255, 255, 255); font-size: 14px; padding: 0 2px; white-space: nowrap; } .tab-content { display: flex; align-items: center; gap: 14px; width: 100%; } .tab span { color: rgba(255,255,255,0.85); } .tab-icon { width: 24px; height: 24px; opacity: 0.85; color: white; } .tab-icon img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); } .arrow { width: 12px; height: 10px; opacity: 1; color: white; } .bottom-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; font-size: 14px; background: rgba(0,0,0,0.8); margin: 0 -4px; border-radius: 0 0 8px 8px; flex-shrink: 0; border-top: 1px solid rgba(46,240,110,0.6); } .version-container { display: flex; align-items: center; gap: 6px; } .version-logo { height: 24px; width: auto; filter: drop-shadow(0 0 5px rgba(255,255,255,0.4)); } .version { color: rgba(255,255,255,0.85); font-weight: 500; } .position { color: rgba(255,255,255); font-weight: 500; } .toggle-switch { position: relative; width: 48px; height: 24px; background-color: transparent; border-radius: 24px; border: 2px solid rgba(255,255,255,0.3); transition: border-color 0.2s ease; } .toggle-switch.active { border-color: rgb(34,197,94); } .toggle-handle { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background-color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: left 0.2s ease; } .toggle-switch.active .toggle-handle { left: 26px; } .toggle-icon { width: 14px; height: 14px; stroke-width: 4; stroke: currentColor; fill: none; } .toggle-handle .check { color: rgb(0,109,20); display: none; } .toggle-handle .x { color: black; display: block; } .toggle-switch.active .toggle-handle .check { display: block; } .toggle-switch.active .toggle-handle .x { display: none; } .slider-container { display: flex; align-items: center; gap: 15px; margin-left: auto; } .slider { width: 120px; height: 6px; background: rgba(255,255,255,0.25); border-radius: 10px; position: relative } .slider-fill { height: 100%; background: rgba(46,240,110,0.5); border-radius: 10px; transition: width 0.3s ease; } .slider-value { color: rgba(46,240,110,0.9); font-size: 14px; min-width: 36px; text-align: right; } .option-selector { display: flex; align-items: center; margin-left: auto; gap: 8px; } .option-value { color: rgba(46,240,110,0.9); font-size: 14px; } .option-arrow { color: white; opacity: 0.7; width: 16px; height: 16px; } .option-arrow.active { color: rgba(46,240,110,0.9); opacity: 1; } .selector-container { display: flex; align-items: center; gap: 8px; margin-left: auto; } .selector-value { color: rgba(46,240,110,0.9); font-size: 14px; min-width: 90px; text-align: center; } .selector-arrows { display: flex; align-items: center; gap: 2px; } .option-toggle-container { display: flex; align-items: center; gap: 8px; margin-left: auto; } .option-toggle-value { color: rgba(255,255,255,0.9); font-size: 14px; min-width: 90px; text-align: center; } .option-toggle-state { width: 8px; height: 8px; border-radius: 50%; margin-left: 4px; background-color: rgba(255,255,255,0.3); } .option-toggle-state.active { background-color: rgba(46,240,110,0.9); } .slidertoggle-container { display: flex; align-items: center; gap: 12px; margin-left: auto; } .slidertoggle-value { color: rgba(46,240,110,0.9); font-size: 14px; min-width: 36px; text-align: right; } .toggle-container { display: flex; align-items: center; margin-left: auto; } .keybind-button { color: rgba(46,240,110,0.9); font-size: 13px; margin-left: auto; cursor: pointer; } .banner-credit-container { display: flex; align-items: center; gap: 12px; margin-left: auto; } .banner-credit { color: rgba(46,240,110,0.9); font-size: 13px; background: rgba(46,240,110,0.1); border: 1px solid rgba(46,240,110,0.3); border-radius: 8px; padding: 4px 8px; font-weight: 500; } .textbox-container { display: flex; align-items: center; gap: 12px; margin-left: auto; } .textbox-input { background: rgba(46,240,110,0.1); border: 2px solid rgba(46,240,110,0.3); border-radius: 6px; padding: 6px 12px; color: rgba(46,240,110,0.95); font-size: 14px; font-weight: 500; min-width: 150px; text-align: center; outline: none; transition: all 0.2s ease; } .textbox-input:focus { border-color: rgba(46,240,110,0.6); background: rgba(46,240,110,0.15); box-shadow: 0 0 8px rgba(46,240,110,0.2); } .textbox-input.typing { border-color: rgba(46,240,110,0.8); background: rgba(46,240,110,0.2); animation: textboxPulse 1.5s infinite; } .textbox-input::placeholder { color: rgba(46,240,110,0.5); } @keyframes textboxPulse { 0%, 100% { box-shadow: 0 0 8px rgba(46,240,110,0.2); } 50% { box-shadow: 0 0 12px rgba(46,240,110,0.4); } } .description-box { width: 508px; min-height: 45px; background: rgba(15,15,15,0.98); border: 2px solid rgba(46,240,110,0.3); margin-top: 10px; border-radius: 16px; padding: 20px; color: rgba(255,255,255,0.9); font-size: 15px; line-height: 1.5; font-weight: 500; box-sizing: border-box; box-shadow: 0 4px 14px rgba(0,0,0,0.4); display: none; text-align: center; } .description-box.visible { display: block; } .description-title { color: rgba(46,240,110,1); font-weight: 600; font-size: 16px; margin-bottom: 12px; } .description-content { color: rgba(255,255,255,0.9); margin-top: 12px; } .keybind-prompt { position: absolute; left: 100%; width: 0; height: 150px; background: linear-gradient(145deg, rgba(15,20,15,0.98), rgba(10,15,10,0.98)); border: 2px solid rgba(46,240,110,0.4); border-radius: 10px; padding: 0; z-index: 1000; opacity: 0; transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 6px 24px rgba(0,0,0,0.6), 0 0 0 1px rgba(46,240,110,0.1); font-family: 'Karla', sans-serif; margin-left: 4px; overflow: hidden; white-space: nowrap; } .keybind-prompt.visible { width: 260px; opacity: 1; } .keybind-prompt-header { background: linear-gradient(90deg, rgba(46,240,110,0.15), rgba(34,197,94,0.1)); padding: 8px 12px; border-bottom: 1px solid rgba(46,240,110,0.2); border-radius: 8px 8px 0 0; } .keybind-prompt h2 { color: rgba(46,240,110,1); margin: 0; font-size: 14px; font-weight: 600; text-align: center; letter-spacing: 0.3px; } .keybind-prompt-body { padding: 12px; } .keybind-prompt p { color: rgba(255,255,255,0.9); margin: 0 0 8px 0; text-align: center; font-size: 11px; line-height: 1.2; } .keybind-key-container { background: rgba(0,0,0,0.4); border: 2px solid rgba(46,240,110,0.3); border-radius: 6px; padding: 8px; margin-bottom: 8px; text-align: center; position: relative; overflow: hidden; } .keybind-key-container::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(46,240,110,0.1), transparent); transition: left 0.6s ease; } .keybind-key-container.shine::before { left: 100%; } .keybind-key { color: rgba(46,240,110,1); font-weight: 700; font-size: 14px; letter-spacing: 1px; margin: 0; text-transform: uppercase; text-shadow: 0 0 6px rgba(46,240,110,0.3); } .keybind-instructions { color: rgba(255,255,255,0.7); font-size: 10px; text-align: center; margin: 0; padding: 7px; background: rgba(0,0,0,0.2); border-radius: 4px; border-left: 2px solid rgba(46,240,110,0.4); } .keybind-error { color: #ff6b6b; font-size: 10px; margin: 6px 0 0 0; font-weight: 500; display: none; text-align: center; padding: 6px; background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.3); border-radius: 4px; } .keybind-error.visible { display: block; animation: errorPulse 0.5s ease; } @keyframes errorPulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } #menu-audio { display: none; } .player-info-panel { width: 310px; background: rgba(15,20,15,0.985); border-radius: 8px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.4); border: 1px solid rgba(34,197,94,0.15); font-family: 'Karla',sans-serif; color: white; position: absolute; left: 100%; top: 0; margin-left: 20px; opacity: 0; transform: translateX(-3px); pointer-events: none; transition: opacity 0.2s ease,transform 0.2s ease; } .player-info-panel.visible { opacity: 1; transform: translateX(0); pointer-events: all; } .player-header { background: linear-gradient(130deg,rgba(41, 52, 45, 0.5) 0%,rgba(34,197,94,0.1) 100%); padding: 16px; position: relative; border-bottom: 1px solid rgba(34,197,94,0.2); } .player-info-name { font-size: 20px; font-weight: 800; color: white; margin: 0; letter-spacing: 0.3px; text-align: center; } .player-stats-list { padding: 12px 0; display: grid; gap: 4px; } .player-stat-item { padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .player-stat-label { font-size: 14px; color: rgba(255,255,255,0.9); flex-grow: 1; text-transform: uppercase; font-weight: 500; letter-spacing: 0.5px; } .player-stat-value { background: rgba(34,197,94,0.15); padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 400; color: rgb(255,255,255); border: 1px solid rgba(34,197,94,0.2); min-width: 50px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .player-stat-value[data-status="high"] { color: #4ade80; background: rgba(74,222,128,0.15); border-color: rgba(74,222,128,0.2); } .player-stat-value[data-status="medium"] { color: #fbbf24; background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.2); } .player-stat-value[data-status="low"] { color: #f87171; background: rgba(248,113,113,0.15); border-color: rgba(248,113,113,0.2); } .vehicle-preview-panel { width: 375px; height: 275px; background: rgba(15,20,15,0.95); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.4); border: 2px solid rgba(46,240,110,0.2); font-family: 'Karla',sans-serif; color: white; position: absolute; left: 100%; top: 150px; margin-left: 10px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } .vehicle-preview-panel.visible { opacity: 1; transform: translateX(0); pointer-events: all; } .vehicle-preview-image-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; } .vehicle-preview-image { max-width: 100%; max-height: 100%; transition: opacity 0.3s ease; object-fit: contain; border-radius: 6px; } .vehicle-preview-loading { color: rgba(255,255,255,0.7); text-align: center; font-size: 18px; } .vehicle-preview-error { color: rgba(255,107,107,0.8); text-align: center; font-size: 12px; } .weapon-preview-panel { width: 275px; height: 200px; background: rgba(15,20,15,0.95); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.4); border: 2px solid rgba(46,240,110,0.2); font-family: 'Karla',sans-serif; color: white; position: absolute; left: 100%; top: 150px; margin-left: 10px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } .weapon-preview-panel.visible { opacity: 1; transform: translateX(0); pointer-events: all; } .weapon-preview-image-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; } .weapon-preview-image { max-width: 100%; max-height: 100%; transition: opacity 0.3s ease; object-fit: contain; border-radius: 6px; } .weapon-preview-loading { color: rgba(255,255,255,0.7); text-align: center; font-size: 18px; } .weapon-preview-error { color: rgba(255,107,107,0.8); text-align: center; font-size: 12px; } .search-input { padding: 10px 25px; color: rgba(255, 255, 255, 0.9); background: rgba(46,240,110,0.05); border: 2px solid rgba(46,240,110,0.3); border-radius: 5px; font-weight: 600; font-size: 16px; height: 46px; position: relative; z-index: 2; font-family: system-ui, -apple-system, sans-serif; width: 100%; box-sizing: border-box; outline: none; } .search-input:focus { border-color: rgba(46,240,110,0.6); background: rgba(46,240,110,0.1); } .search-input::placeholder { color: rgba(46,240,110,0.5); } .search-result { padding: 10px 25px; color: rgba(255,255,255,0.85); font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; margin: 0px -8px; height: 25px; position: relative; z-index: 2; cursor: pointer; transition: background-color 0.2s ease; } .search-path { color: rgba(46,240,110,0.85); font-size: 12px; font-weight: 500; } .no-results { padding: 20px 25px; color: rgba(255,255,255,0.5); font-size: 14px; text-align: center; font-style: italic; }