/* 1. БАЗОВИЙ КОНТЕЙНЕР ДЛЯ ВСІХ ІНСТРУМЕНТІВ (Числа, Списки і т.д.) */
.random-box {
    max-width: 500px !important;
    margin: 30px auto !important;
    padding: 30px 20px !important;
    background: #ffffff !important;
    border-radius: 30px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    text-align: center !important;
    border: 1px solid #edf0f3 !important;
    box-sizing: border-box !important;
}

/* 2. ВЕЛИКА СИНЯ КНОПКА (Для Чисел, Списків, YouTube) */
.btn-primary {
    width: 100% !important;
    background: linear-gradient(180deg, #007bff 0%, #0056b3 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 18px !important;
    border-radius: 15px !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    box-shadow: 0 5px 0 #004085 !important;
    transition: all 0.1s !important;
    display: block !important;
    margin: 10px 0 !important;
}

.btn-primary:active {
    transform: translateY(3px) !important;
    box-shadow: 0 2px 0 #004085 !important;
}

/* 3. СТИЛІ ДЛЯ ГОРІЗОНТАЛЬНОГО ХАБА (Головна сторінка) */
.rdm-hub-outer {
    width: 100% !important;
    margin: 20px 0 !important;
}

.rdm-hub-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

.rdm-hub-card {
    flex: 0 1 calc(20% - 15px) !important; /* 5 в ряд на десктопі */
    min-width: 130px !important;
    background: #ffffff !important;
    border: 1px solid #eef1f5 !important;
    border-radius: 20px !important;
    padding: 20px 5px !important;
    text-align: center !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
}

/* 4. СПЕЦІАЛЬНО ДЛЯ КОЛЕСА (Щоб не ламалося) */
.wheel-container {
    max-width: 500px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.spin-button {
    width: 100% !important;
    background: linear-gradient(180deg, #007bff 0%, #0056b3 100%) !important;
    color: #fff !important;
    padding: 18px !important;
    border-radius: 15px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 5px 0 #004085 !important;
    border: none !important;
}

/* Мобільна адаптація для Хаба */
@media (max-width: 768px) {
    .rdm-hub-card { flex: 0 1 calc(33.33% - 15px) !important; }
}
@media (max-width: 480px) {
    .rdm-hub-card { flex: 0 1 calc(50% - 10px) !important; }
}

/* 1. ВИПРАВЛЕННЯ ДЛЯ ПОЛІВ ВВОДУ ТА ТЕКСТОВИХ ОБЛАСТЕЙ */
.random-box textarea, 
.random-box input[type="text"], 
.random-box input[type="number"] {
    width: 100% !important;        /* Розтягуємо на всю ширину */
    max-width: 100% !important;    /* Забороняємо вихід за межі */
    box-sizing: border-box !important; /* Враховуємо внутрішні відступи */
    border: 2px solid #edf0f3 !important;
    border-radius: 15px !important;
    padding: 15px !important;
    font-size: 16px !important;
    background: #f8f9fa !important;
    display: block !important;
    margin-bottom: 20px !important;
}

/* 2. СПЕЦІАЛЬНО ДЛЯ ГРУПИ ВВОДУ (Числа: Мінімум/Максимум) */
.random-box .input-group {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}

.random-box .input-item {
    flex: 1 !important; /* Робимо поля однакової ширини в ряду */
}

.random-box .input-item input {
    margin-bottom: 0 !important; /* Прибираємо нижній відступ всередині групи */
}

/* 3. ДЛЯ КОНТЕЙНЕРА В СПИСКАХ (Результат) */
#listDisplay, #display, #decisionDisplay, #coinDisplay {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #f8f9fa !important;
    border-radius: 20px !important;
    border: 1px solid #edf0f3 !important;
}