* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; font-weight: 600; }
body { font-family: 'Inter', sans-serif; font-weight: 600; background: #0a0a0a; color: #ffffff; padding-top: 0; line-height: 1.6; }
.calculator-container { max-width: 1000px; margin: 0 auto; padding: 1rem; }
.header-section { text-align: left; margin: 1rem 0 2rem 0; }
.main-title { font-size: 1.8rem; font-weight: 600; color: #ffffff; margin-bottom: 0.5rem; }
.description { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; max-width: 600px; }
.search-section { margin-bottom: 2rem; }
.search-container { position: relative; max-width: 100%; }
.search-input { width: 100%; padding: 0.6rem 1rem 0.6rem 3rem; background: #0d0d0d; border: 1px solid #151515; border-radius: 12px; color: #fff; font-size: 0.95rem; }
.search-input:focus { outline: none; border-color: #5048E5; }
.search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.6); font-size: 1rem; }
.rarity-slider { margin: 2rem 0; }
.toggle-buttons { display: flex; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 6px; position: relative; overflow: hidden; backdrop-filter: blur(10px); }
.toggle-btn { flex: 1; padding: 0.6rem 1.2rem; background: none; border: none; color: rgba(255, 255, 255, 0.6); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 2; border-radius: 8px; }
.toggle-btn.active { color: #ffffff; text-shadow: 0 0 15px rgba(80, 72, 229, 0.8); }
.toggle-buttons::before { content: ''; position: absolute; top: 6px; left: 6px; width: calc(14.28% - 6px); height: calc(100% - 12px); background: linear-gradient(135deg, #5048E5 0%, #4338CA 100%); border-radius: 8px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; }
.toggle-buttons[data-active="1"]::before { transform: translateX(100%); }
.toggle-buttons[data-active="2"]::before { transform: translateX(200%); }
.toggle-buttons[data-active="3"]::before { transform: translateX(300%); }
.toggle-buttons[data-active="4"]::before { transform: translateX(400%); }
.toggle-buttons[data-active="5"]::before { transform: translateX(500%); }
.toggle-buttons[data-active="6"]::before { transform: translateX(600%); }
.items-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; }
.item-card { background: #0d0d0d; border: 1px solid #151515; border-radius: 12px; padding: 0.8rem; cursor: pointer; transition: all 0.3s ease; }
.item-card:hover { border-color: #5048E5; }
.item-card.selected { border-color: #5048E5; background: rgba(80, 72, 229, 0.05); }
.item-content { display: flex; align-items: center; gap: 1rem; }
.item-image { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.item-image img { width: 100%; height: 100%; object-fit: cover; }
.item-info h3 { font-size: 0.9rem; font-weight: 500; color: #ffffff; margin-bottom: 0.25rem; }
.item-rarity { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); }
.pagination { display: flex; justify-content: center; gap: 0.5rem; margin: 2rem 0; }
.page-btn { padding: 0.5rem 1rem; background: #0d0d0d; border: 1px solid #151515; border-radius: 8px; color: #fff; cursor: pointer; transition: all 0.3s ease; }
.page-btn:hover, .page-btn.active { background: #5048E5; border-color: #5048E5; }
.input-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; }
.mutation-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.mutation-group { background: #0d0d0d; border: 1px solid #151515; border-radius: 12px; padding: 0.75rem; }
.mutation-group h4 { margin-bottom: 0.75rem; color: #fff; font-size: 0.9rem; }
.mutation-buttons { display: flex; gap: 0.5rem; }
.mutation-button { flex: 1; padding: 0.5rem 0.8rem; background: #1a1a1a; border: none; border-radius: 8px; color: rgba(255, 255, 255, 0.7); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.8rem; cursor: pointer; transition: all 0.3s ease; }
.mutation-button:hover { background: #2a2a2a; }
.mutation-button.active { background: #5048E5; color: #ffffff; }
.environmental-section { background: #0d0d0d; border: 1px solid #151515; border-radius: 12px; padding: 0.75rem; margin: 1rem 0; }
.environmental-section h4 { margin-bottom: 0.75rem; color: #fff; font-size: 0.9rem; }
.mutations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.4rem; }
.mutation-option { background: #1a1a1a; border: none; border-radius: 6px; padding: 0.5rem 0.6rem; cursor: pointer; transition: all 0.3s ease; font-size: 0.8rem; text-align: center; color: rgba(255, 255, 255, 0.8); line-height: 1.2; }
.mutation-option:hover { background: #2a2a2a; }
.mutation-option.selected { background: #5048E5; color: #ffffff; box-shadow: 0 0 10px rgba(80, 72, 229, 0.3); }
.conclusion-section { background: #0d0d0d; border: 1px solid #151515; border-radius: 12px; padding: 1rem; margin: 2rem 0; }
.conclusion-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.conclusion-header h3 { color: #fff; font-size: 1rem; }
.sheckles-img { width: 24px; height: 24px; }
.price-display { font-size: 1.5rem; font-weight: 600; color: #5048E5; display: flex; align-items: center; gap: 0.5rem; }
.price-display .sheckles-img { width: 28px; height: 28px; }
.price-suffix { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); margin-top: 0.25rem; }
.multiplier-info { margin-top: 1rem; }
.multiplier-text { font-size: 0.9rem; color: #fff; }
.selected-mutations { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); margin-top: 0.25rem; }
.input-group { background: #0d0d0d; border: 1px solid #151515; border-radius: 12px; padding: 0.6rem; }
.input-group h4 { margin-bottom: 0.6rem; color: #fff; font-size: 0.9rem; }
.input-field { width: 100%; padding: 0.5rem; background: #111111; border: none; border-radius: 6px; color: #fff; font-size: 0.85rem; }
.input-field:focus { outline: none; border-color: #5048E5; }
.friends-boost-container { display: flex; align-items: center; gap: 0.3rem; }
.friends-boost-input { flex: 1; padding: 0.4rem; background: #111111; border: none; border-radius: 6px; color: #fff; font-size: 0.85rem; text-align: left; margin-right: 0.3rem; }
.mutation-toggle { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 4px; position: relative; overflow: hidden; display: flex; }
.mutation-btn { flex: 1; padding: 0.5rem 1rem; background: none; border: none; color: rgba(255, 255, 255, 0.6); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.4s ease; position: relative; z-index: 2; border-radius: 6px; }
.mutation-btn.active { color: #ffffff; }
.mutation-toggle::before { content: ''; position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); background: linear-gradient(135deg, #5048E5 0%, #4338CA 100%); border-radius: 6px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; }
.mutation-toggle.yes-active::before { transform: translateX(calc(100%)); }
.scroll-notification { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #5048E5; color: #ffffff; padding: 0.75rem 1.5rem; border-radius: 25px; font-size: 0.9rem; font-weight: 600; z-index: 1000; display: none; cursor: pointer; border: none; transition: all 0.3s ease; }
.scroll-notification:hover { background: #4338CA; }
@media (max-width: 768px) {
    .calculator-container { padding: 1rem; }
    .main-title { font-size: 1.5rem; }
    .items-grid { grid-template-columns: 1fr; }
    .input-fields { grid-template-columns: 1fr; }
    .toggle-buttons { flex-wrap: wrap; }
    .toggle-btn { font-size: 0.75rem; padding: 0.5rem 0.8rem; }
}