/* ============================================
   FARMING SYSTEM STYLES
   ============================================ */

.farming-container {
    padding: 20px;
    padding-bottom: 120px;
    max-width: 1400px;
    margin: 0 auto;
    background: linear-gradient(to bottom,
        #87CEEB 0%,
        #87CEEB 30%,
        #90EE90 30%,
        #228B22 100%
    );
    min-height: 100vh;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.btn-back-home {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 10px 20px;
    border: 2px solid #4a4a4a;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-back-home:hover {
    background: white;
    transform: translateX(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Sky and grass background effect */
.farming-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
    pointer-events: none;
}

.farming-container::after {
    content: '☀️';
    position: absolute;
    top: 30px;
    right: 50px;
    font-size: 60px;
    animation: sun-rays 3s ease-in-out infinite;
}

@keyframes sun-rays {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* Decorative clouds */
.farm-clouds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30%;
    pointer-events: none;
    z-index: 1;
}

.cloud {
    position: absolute;
    font-size: 40px;
    opacity: 0.7;
    animation: float-cloud linear infinite;
}

.cloud1 {
    top: 50px;
    left: -100px;
    animation-duration: 60s;
}

.cloud2 {
    top: 100px;
    left: -150px;
    animation-duration: 80s;
    animation-delay: -20s;
}

.cloud3 {
    top: 80px;
    left: -200px;
    animation-duration: 70s;
    animation-delay: -40s;
}

@keyframes float-cloud {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100vw + 200px)); }
}

.farming-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(139, 90, 43, 0.95) 0%, rgba(101, 67, 33, 0.95) 100%);
    border-radius: 12px;
    border: 3px solid #654321;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 10;
}

.farming-header::before {
    content: '🚜';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    opacity: 0.3;
}

.farming-header h2 {
    margin: 0;
    font-size: 24px;
}

.farming-stats {
    display: flex;
    gap: 20px;
}

.farming-stats .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.farming-stats .stat-label {
    font-size: 12px;
    opacity: 0.7;
}

.farming-stats .stat-value {
    font-size: 18px;
    font-weight: bold;
}

/* Seed Inventory Section */
.seed-inventory {
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(139, 90, 43, 0.8) 0%, rgba(101, 67, 33, 0.8) 100%);
    border-radius: 12px;
    border: 3px solid #8B4513;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 10;
}

.seed-inventory::before {
    content: '🌱';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 32px;
    opacity: 0.4;
}

.seed-inventory h3 {
    margin-top: 0;
}

.seed-inventory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin-bottom: 15px;
}

.seed-inventory-header:hover {
    opacity: 0.8;
}

.toggle-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.seed-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 15px;
}

.seed-list.collapsed {
    display: none;
}

/* Soil Quality Panel */
.soil-quality-panel {
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(101, 67, 33, 0.9) 0%, rgba(62, 39, 20, 0.9) 100%);
    border-radius: 12px;
    border: 3px solid #654321;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 10;
}

.soil-quality-panel::before {
    content: '🌍';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 32px;
    opacity: 0.3;
}

.soil-quality-panel h3 {
    margin-top: 0;
    color: #FFD700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.soil-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.soil-level {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.soil-level-badge {
    padding: 8px 16px;
    background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
    border: 2px solid #FFD700;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    color: #FFD700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.soil-level-name {
    font-size: 18px;
    font-weight: bold;
    color: #FFF;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.booster-active {
    padding: 6px 12px;
    background: linear-gradient(135deg, #9C27B0 0%, #673AB7 100%);
    border: 2px solid #E1BEE7;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    animation: booster-pulse 2s ease-in-out infinite;
}

@keyframes booster-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(156, 39, 176, 0.5); }
    50% { box-shadow: 0 0 20px rgba(156, 39, 176, 0.8); }
}

.soil-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 8px;
}

.soil-stat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.soil-stat-label {
    font-size: 14px;
    color: #CCC;
}

.soil-stat-value {
    font-size: 18px;
    font-weight: bold;
    color: #4CAF50;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.soil-stat-value.boosted {
    color: #E1BEE7;
    animation: boosted-glow 2s ease-in-out infinite;
}

@keyframes boosted-glow {
    0%, 100% { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6), 0 0 10px rgba(156, 39, 176, 0.5); }
    50% { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6), 0 0 20px rgba(156, 39, 176, 0.8); }
}

.soil-base {
    font-size: 12px;
    color: #999;
    font-weight: normal;
}

.soil-xp {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.soil-xp-bar {
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.soil-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 100%);
    border-radius: 8px;
    transition: width 0.5s ease;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.soil-xp-text {
    font-size: 12px;
    color: #CCC;
    text-align: center;
}

.soil-max {
    font-size: 16px;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.soil-booster-btn {
    padding: 12px 20px;
    background: linear-gradient(135deg, #9C27B0 0%, #673AB7 100%);
    color: white;
    border: 2px solid #E1BEE7;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: all 0.2s;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.soil-booster-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #8E24AA 0%, #5E35B1 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
}

.soil-booster-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.soil-booster-desc {
    font-size: 12px;
    color: #BBB;
    margin: 8px 0 0 0;
    font-style: italic;
}

.seed-pack {
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.seed-icon {
    font-size: 28px;
}

.seed-info {
    flex: 1;
}

.seed-name {
    font-weight: bold;
    font-size: 14px;
}

.seed-count {
    font-size: 12px;
    opacity: 0.8;
}

.seed-note {
    margin: 0;
    font-size: 13px;
    opacity: 0.7;
    font-style: italic;
}

/* Shop Section */
.farming-shop {
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.farming-shop h3 {
    margin-top: 0;
}

.crop-shop {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.crop-item {
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    gap: 10px;
    align-items: center;
    transition: all 0.2s;
}

.crop-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.crop-icon {
    font-size: 32px;
}

.crop-info {
    flex: 1;
}

.crop-name {
    font-weight: bold;
    margin-bottom: 5px;
}

.crop-details {
    font-size: 12px;
    opacity: 0.8;
}

.crop-details > div {
    margin: 2px 0;
}

/* Fertilizer Shop */
.fertilizer-shop {
    padding: 15px;
    background: rgba(100, 200, 100, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(100, 200, 100, 0.3);
}

.fertilizer-shop h4 {
    margin-top: 0;
}

.fertilizer-shop input {
    width: 80px;
    padding: 5px;
    margin-right: 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: inherit;
}

.fertilizer-shop button {
    padding: 8px 16px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.fertilizer-shop button:hover {
    background: #45a049;
}

/* Farm Upgrade */
.farm-upgrade {
    margin-bottom: 20px;
    text-align: center;
}

.farm-upgrade button {
    padding: 12px 24px;
    font-size: 16px;
    background: #ff9800;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.farm-upgrade button:hover:not(:disabled) {
    background: #f57c00;
    transform: scale(1.05);
}

.farm-upgrade button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Plots Section */
/* Disease Management Section */
.disease-management-section {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 102, 0, 0.1) 0%, rgba(255, 140, 0, 0.1) 100%);
    border: 2px solid rgba(255, 102, 0, 0.3);
    border-radius: 12px;
}

.disease-management-section h3 {
    color: #ff8800;
    margin-bottom: 15px;
    font-size: 20px;
    text-shadow: 0 0 10px rgba(255, 136, 0, 0.3);
}

.disease-management-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.disease-action-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.disease-action-selector .toggle-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 10px;
}

.disease-action-selector .toggle-btn {
    flex: 1;
    min-width: 150px;
    padding: 12px 24px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.disease-action-selector .toggle-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.disease-action-selector .toggle-btn.active {
    background: linear-gradient(135deg, var(--primary) 0%, #0097a7 100%);
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.5);
}

.disease-action-selector .toggle-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.plots-container {
    margin-top: 30px;
    padding: 25px;
    background: rgba(34, 139, 34, 0.2);
    border-radius: 16px;
    position: relative;
    z-index: 10;
}

.plots-container h3 {
    margin-bottom: 15px;
    color: #2F4F2F;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
    font-size: 24px;
}

/* Add decorative fence */
.plots-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        #8B4513 0px,
        #8B4513 20px,
        transparent 20px,
        transparent 25px,
        #654321 25px,
        #654321 30px,
        transparent 30px,
        transparent 35px
    );
}

.plots-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

/* Plot Wrapper */
.plot-wrapper {
    position: relative;
    width: 100%;
}

/* Individual Plot */
.plot {
    background: linear-gradient(135deg,
        rgba(101, 67, 33, 0.9) 0%,
        rgba(139, 90, 43, 0.9) 50%,
        rgba(101, 67, 33, 0.9) 100%
    );
    border: 3px solid #654321;
    border-radius: 8px;
    padding: 8px 10px;
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    align-items: start;
    gap: 8px;
    transition: all 0.3s;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

/* Add wooden sign effect to plot */
.plot::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 2px solid rgba(139, 90, 43, 0.3);
    border-radius: 14px;
    pointer-events: none;
}

/* Left column container */
.plot-left-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-column: 1;
    grid-row: 1;
}

/* Empty plot specific left column - horizontal layout */
.plot.empty .plot-left-column {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    gap: 8px;
    align-items: start;
}

/* Planted plot specific left column - horizontal layout */
.plot.planted .plot-left-column {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    gap: 8px;
    align-items: start;
}

.plot-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.plot-title {
    font-weight: bold;
    font-size: 14px;
    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.plot-title::before {
    content: '🏷️ ';
    font-size: 14px;
}

.plot-spaces {
    font-size: 11px;
    opacity: 0.9;
    color: #FFD700;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.plot.empty {
    background: linear-gradient(135deg,
        rgba(139, 90, 43, 0.6) 0%,
        rgba(101, 67, 33, 0.6) 100%
    );
    border-style: dashed;
}

.plot.planted {
    background: linear-gradient(135deg,
        rgba(34, 139, 34, 0.7) 0%,
        rgba(76, 175, 80, 0.7) 50%,
        rgba(34, 139, 34, 0.7) 100%
    );
    border-color: #2F8B45;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        0 0 20px rgba(76, 175, 80, 0.3);
}

.plot.ready {
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.8) 0%,
        rgba(255, 193, 7, 0.8) 50%,
        rgba(255, 215, 0, 0.8) 100%
    );
    border-color: #FFD700;
    animation: pulse-glow 2s infinite;
    box-shadow:
        0 8px 20px rgba(255, 215, 0, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        0 0 30px rgba(255, 215, 0, 0.5);
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow:
            0 8px 20px rgba(255, 215, 0, 0.6),
            inset 0 2px 4px rgba(255, 255, 255, 0.3),
            0 0 30px rgba(255, 215, 0, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 8px 25px rgba(255, 215, 0, 0.8),
            inset 0 2px 4px rgba(255, 255, 255, 0.4),
            0 0 40px rgba(255, 215, 0, 0.7);
        transform: scale(1.02);
    }
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    }
}

.plot.watered {
    background: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.6);
}

.plot.fertilized::before {
    content: '🧪';
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
}

.plot.water-target {
    border-color: #2196F3;
    background: rgba(33, 150, 243, 0.3);
    transform: scale(1.05);
}

/* Plot Spaces Grid */
.plot-spaces-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 4px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    max-height: 96px; /* 2 rows: (40px * 2) + 4px gap + (6px * 2) padding = 96px */
    overflow: visible;
    grid-column: 2;
    grid-row: 1;
    align-content: flex-start;
    max-width: 100%;
    contain: layout;
}

.plot-spaces-grid::-webkit-scrollbar {
    height: 4px;
}

.plot-spaces-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.plot-spaces-grid::-webkit-scrollbar-thumb {
    background: rgba(101, 67, 33, 0.5);
    border-radius: 2px;
}

.plot-space {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.empty-space {
    background: linear-gradient(135deg,
        rgba(101, 67, 33, 0.6) 0%,
        rgba(139, 90, 43, 0.5) 100%
    );
    border: 2px dashed rgba(101, 67, 33, 0.8);
    position: relative;
}

.empty-space::after {
    content: '🌱';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    opacity: 0.2;
}

.planted-space {
    background: linear-gradient(135deg,
        rgba(34, 139, 34, 0.5) 0%,
        rgba(76, 175, 80, 0.6) 100%
    );
    border: 2px solid rgba(46, 125, 50, 0.8);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.planted-space.ready-space {
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.7) 0%,
        rgba(255, 193, 7, 0.8) 100%
    );
    border: 2px solid rgba(255, 215, 0, 1);
    animation: space-glow 2s infinite;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        0 0 8px rgba(255, 215, 0, 0.6);
}

@keyframes space-glow {
    0%, 100% {
        box-shadow:
            inset 0 2px 4px rgba(255, 255, 255, 0.3),
            0 0 8px rgba(255, 215, 0, 0.6);
        transform: scale(1);
    }
    50% {
        box-shadow:
            inset 0 2px 4px rgba(255, 255, 255, 0.4),
            0 0 12px rgba(255, 215, 0, 0.9);
        transform: scale(1.05);
    }
}

.crop-in-space {
    font-size: 24px; /* Larger to match 40px spaces */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    animation: crop-sway 3s ease-in-out infinite;
}

@keyframes crop-sway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

/* Plot Controls */
.plot-controls {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 4px;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px;
    border-radius: 6px;
    align-items: stretch;
    min-width: 0;
}

/* Plot Info (for planted plots) */
.plot-info {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
    text-align: left;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 0;
}

.plot-info .crop-name {
    font-weight: bold;
    font-size: 12px;
    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.plot-info .crop-yield {
    font-size: 11px;
    color: #FFD700;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.plot-info .plot-time {
    font-size: 10px;
    opacity: 0.9;
    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

.plot-info .plot-status {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.plot-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/* Empty plot controls */
.plot-controls select {
    padding: 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: inherit;
    font-size: 11px;
    min-width: 0;
    flex: 1;
}

.plot-controls button {
    padding: 6px 8px;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    border: 2px solid #388E3C;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    flex: 1;
    min-width: 0;
}

.plot-controls button:hover {
    background: linear-gradient(135deg, #45a049 0%, #388E3C 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
}

.plot-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.plot-controls .upgrade-btn {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    border-color: #E65100;
}

.plot-controls .upgrade-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #F57C00 0%, #E65100 100%);
    transform: translateY(-2px);
}

.plot-controls .max-level {
    display: block;
    text-align: center;
    font-size: 11px;
    opacity: 0.6;
    font-style: italic;
    padding: 6px 8px;
}

.plot-controls .greenhouse-btn {
    background: linear-gradient(135deg, #8BC34A 0%, #689F38 100%);
    border-color: #558B2F;
    font-size: 10px;
    margin-top: 5px;
}

.plot-controls .greenhouse-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #689F38 0%, #558B2F 100%);
    transform: translateY(-2px);
}

.greenhouse-active {
    display: block;
    text-align: center;
    font-size: 11px;
    color: #8BC34A;
    font-weight: 600;
    padding: 6px 8px;
    background: rgba(139, 195, 74, 0.1);
    border-radius: 4px;
    margin-top: 5px;
}

/* Status indicators */
.water-indicator,
.fertilizer-indicator,
.greenhouse-indicator {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
}

.water-indicator {
    background: rgba(33, 150, 243, 0.3);
    border: 1px solid rgba(33, 150, 243, 0.5);
}

.fertilizer-indicator {
    background: rgba(100, 200, 100, 0.3);
    border: 1px solid rgba(100, 200, 100, 0.5);
}

.greenhouse-indicator {
    background: rgba(139, 195, 74, 0.3);
    border: 1px solid rgba(139, 195, 74, 0.5);
}

/* Plot actions */
.plot-actions {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 4px;
    align-items: stretch;
    min-width: 0;
}

.plot-actions button {
    padding: 6px 8px;
    background: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.2s;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.plot-actions button:hover {
    background: #1976D2;
}

.plot-actions button:first-child {
    background: #FF9800;
}

.plot-actions button:first-child:hover {
    background: #F57C00;
}

/* Water Bucket */
.water-bucket {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 22px;
    background: linear-gradient(135deg,
        #4FC3F7 0%,
        #2196F3 50%,
        #1976D2 100%
    );
    border-radius: 50%;
    font-size: 52px;
    cursor: grab;
    box-shadow:
        0 6px 20px rgba(33, 150, 243, 0.6),
        inset 0 2px 6px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    z-index: 1000;
    user-select: none;
    animation: bucket-float 3s ease-in-out infinite;
    -webkit-user-drag: none;
    border: 3px solid rgba(255, 255, 255, 0.4);
}

/* Add water ripple effect */
.water-bucket::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: ripple 2s ease-in-out infinite;
}

@keyframes ripple {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.2; }
}

@keyframes bucket-float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.water-bucket:hover {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 8px 20px rgba(33, 150, 243, 0.7);
    animation: none;
}

.water-bucket.dragging {
    cursor: grabbing;
    opacity: 0.8;
    transform: scale(1.2) rotate(-10deg);
    animation: bucket-pour 0.5s ease-in-out infinite;
    transition: none;
}

@keyframes bucket-pour {
    0%, 100% {
        transform: scale(1.2) rotate(-10deg);
    }
    50% {
        transform: scale(1.2) rotate(-15deg);
    }
}

/* Watering animation for plots */
.plot.watering-animation {
    animation: water-splash 0.6s ease-out;
}

@keyframes water-splash {
    0% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.8);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(33, 150, 243, 0.4);
        border-color: rgba(33, 150, 243, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
    }
}

/* Water Droplet Particles */
.water-droplet {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    animation: droplet-fall linear forwards;
}

@keyframes droplet-fall {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(80px) scale(0.3) rotate(180deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .farming-container {
        padding-bottom: 140px;
    }

    .plots-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
    }

    .plot-wrapper {
        min-width: 100%;
        width: 100%;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .plot {
        display: flex;
        flex-direction: column;
        padding: 10px;
        gap: 10px;
        grid-template-columns: none;
        min-height: 70vh; /* Allow taller plots in mobile */
    }

    .plot-left-column,
    .plot.empty .plot-left-column,
    .plot.planted .plot-left-column {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        display: flex !important; /* Override grid */
        flex-direction: column !important; /* Force vertical */
        grid-template-columns: none;
        grid-template-rows: none;
        gap: 10px;
    }

    /* Reorder elements: header first, spaces in middle, controls/buttons at bottom */
    .plot-header {
        order: 1;
        padding: 4px 8px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        min-width: auto;
        width: 100%;
    }

    .plot-spaces-grid {
        order: 2;
        gap: 4px;
        padding: 10px;
        max-width: 100%;
        max-height: none;
        overflow: visible;
        flex-wrap: wrap;
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        min-height: 200px; /* Ensure adequate space for crops */
        justify-content: flex-start;
        align-content: flex-start;
    }

    .plot-controls {
        order: 3;
    }

    .plot-actions {
        order: 3;
    }

    .plot-title {
        font-size: 13px;
    }

    .plot-spaces {
        font-size: 11px;
        padding: 2px 6px;
    }

    .plot-space {
        width: 60px;
        height: 60px;
    }

    /* Force 4 plants per row in mobile */
    .plot-spaces-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 60px);
        justify-content: center;
    }

    .empty-space::after {
        font-size: 12px;
    }

    .crop-in-space {
        font-size: 36px; /* Larger for 60px mobile spaces */
    }

    .diseased-space::before {
        font-size: 10px;
        top: -2px;
        right: -2px;
    }

    .plot-info {
        order: 3; /* Show info at bottom with actions */
        padding: 6px;
        gap: 3px;
        width: 100%;
    }

    .plot-info .crop-name {
        font-size: 14px;
    }

    .plot-info .crop-yield {
        font-size: 12px;
    }

    .plot-info .plot-time {
        font-size: 11px;
    }

    .plot-controls {
        padding: 6px;
        gap: 6px;
    }

    .plot-controls select,
    .plot-controls button {
        font-size: 12px;
        padding: 6px;
    }

    .plot-actions {
        flex-direction: row;
        gap: 4px;
        min-width: auto;
        width: 100%;
    }

    .plot-actions button {
        flex: 1;
        padding: 6px;
        font-size: 11px;
    }

    .water-indicator,
    .fertilizer-indicator,
    .disease-indicator {
        font-size: 10px;
        padding: 2px 6px;
    }

    .disease-warning {
        padding: 6px;
        font-size: 11px;
        margin-top: 4px;
    }

    .farming-stats {
        gap: 10px;
    }

    .crop-shop {
        grid-template-columns: 1fr;
    }

    .water-bucket {
        bottom: 100px;
        right: 15px;
        padding: 12px;
        font-size: 32px;
    }

    .disease-dialog,
    .plant-all-dialog {
        min-width: 90%;
        padding: 20px;
        max-height: calc(100vh - 180px);
        overflow-y: auto;
    }

    .perks-grid,
    .achievements-grid {
        grid-template-columns: 1fr;
    }

    .dialog-overlay {
        padding-bottom: 120px;
        align-items: flex-start;
        padding-top: 40px;
    }

    .plant-all-dialog,
    .disease-dialog {
        min-width: 85%;
        padding: 20px;
        margin-top: 20px;
    }

    .disease-dialog-icon {
        font-size: 48px;
    }
}

/* Disease Styles */
.plot.diseased {
    border: 2px solid #d32f2f;
    background: linear-gradient(135deg, rgba(211, 47, 47, 0.1), rgba(255, 152, 0, 0.1));
}

.diseased-space {
    border-color: #ff6600 !important;
    background: linear-gradient(135deg, rgba(255, 102, 0, 0.4), rgba(255, 140, 0, 0.4)) !important;
    animation: disease-pulse 2s ease-in-out infinite !important;
    position: relative;
    cursor: pointer;
}

.diseased-space::before {
    content: '🦠';
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 16px;
    z-index: 10;
    filter: drop-shadow(0 0 3px rgba(255, 102, 0, 0.8));
    animation: disease-bounce 1s ease-in-out infinite;
}

@keyframes disease-pulse {
    0%, 100% {
        background: linear-gradient(135deg, rgba(255, 102, 0, 0.4), rgba(255, 140, 0, 0.4)) !important;
        border-color: #ff6600 !important;
    }
    50% {
        background: linear-gradient(135deg, rgba(255, 102, 0, 0.6), rgba(255, 140, 0, 0.6)) !important;
        border-color: #ff8800 !important;
    }
}

@keyframes disease-bounce {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
}

.disease-overlay {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 12px;
    opacity: 0.8;
}

.disease-indicator {
    background: #d32f2f;
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    display: inline-block;
    margin-left: 5px;
}

.disease-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 10px;
    color: #856404;
    white-space: nowrap;
    flex-shrink: 0;
}

.cure-btn {
    background: #4caf50;
    color: white;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-right: 5px;
}

.cure-btn:hover:not(:disabled) {
    background: #45a049;
}

.cure-btn:disabled {
    background: #cccccc;
    cursor: not-allowed;
}

.dig-out-btn {
    background: #f44336;
    color: white;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.dig-out-btn:hover {
    background: #da190b;
}

/* Perks Styles */
.farming-perks {
    background: linear-gradient(135deg, rgba(103, 58, 183, 0.05), rgba(156, 39, 176, 0.05));
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    border: 2px solid rgba(103, 58, 183, 0.2);
}

.farming-perks h3 {
    color: #673ab7;
    margin-bottom: 15px;
    font-size: 20px;
}

.perks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.perk-card {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s ease;
}

.perk-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.perk-card.unlocked {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(129, 199, 132, 0.1));
    border-color: #4caf50;
}

.perk-icon {
    font-size: 36px;
    text-align: center;
    margin-bottom: 10px;
}

.perk-name {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    text-align: center;
    margin-bottom: 8px;
}

.perk-description {
    font-size: 13px;
    color: #666;
    text-align: center;
    margin-bottom: 12px;
    line-height: 1.4;
}

.perk-buy-btn {
    width: 100%;
    background: #673ab7;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.perk-buy-btn:hover:not(:disabled) {
    background: #5e35b1;
}

.perk-buy-btn:disabled {
    background: #cccccc;
    cursor: not-allowed;
}

.perk-status {
    display: block;
    text-align: center;
    color: #4caf50;
    font-weight: bold;
    font-size: 14px;
}

.perk-locked {
    display: block;
    text-align: center;
    color: #f44336;
    font-size: 12px;
    margin-top: 5px;
}

/* Achievements Styles */
.farming-achievements {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.05), rgba(255, 193, 7, 0.05));
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    border: 2px solid rgba(255, 152, 0, 0.2);
}

.farming-achievements h3 {
    color: #ff9800;
    margin-bottom: 15px;
    font-size: 20px;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.achievement-card {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.achievement-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.achievement-card.unlocked {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 235, 59, 0.15));
    border-color: #ffc107;
    opacity: 1;
}

.achievement-icon {
    font-size: 36px;
    text-align: center;
    margin-bottom: 10px;
}

.achievement-name {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    text-align: center;
    margin-bottom: 8px;
}

.achievement-description {
    font-size: 13px;
    color: #666;
    text-align: center;
    margin-bottom: 8px;
    line-height: 1.4;
}

.achievement-progress {
    font-size: 14px;
    color: #ff9800;
    text-align: center;
    font-weight: bold;
    margin-bottom: 8px;
}

.achievement-reward {
    font-size: 12px;
    color: #4caf50;
    text-align: center;
    font-weight: bold;
}

.achievement-status {
    display: block;
    text-align: center;
    color: #ffc107;
    font-weight: bold;
    font-size: 14px;
    margin-top: 8px;
}

/* Fungicide Shop Styles */
.fungicide-shop {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.05), rgba(3, 169, 244, 0.05));
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    border: 2px solid rgba(33, 150, 243, 0.2);
}

.fungicide-shop h3 {
    color: #2196f3;
    margin-bottom: 15px;
    font-size: 20px;
}

.fungicide-info {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.fungicide-info p {
    margin: 8px 0;
    font-size: 14px;
    color: #333;
}

.fungicide-buy-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}

.fungicide-buy-controls input {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.fungicide-buy-controls button {
    background: #2196f3;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.fungicide-buy-controls button:hover:not(:disabled) {
    background: #1976d2;
}

.fungicide-buy-controls button:disabled {
    background: #cccccc;
    cursor: not-allowed;
}

/* Plant All Button */
.plant-all-btn {
    background: #8bc34a;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    margin-left: 10px;
    transition: background 0.3s ease;
}

.plant-all-btn:hover {
    background: #7cb342;
}

/* Plant All Dialog */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
    padding-bottom: 100px;
    box-sizing: border-box;
}

.plant-all-dialog {
    background: linear-gradient(135deg,
        rgba(101, 67, 33, 0.95) 0%,
        rgba(139, 90, 43, 0.95) 50%,
        rgba(101, 67, 33, 0.95) 100%
    );
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border: 3px solid #654321;
    min-width: 400px;
    max-width: 90%;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.plant-all-dialog h3 {
    color: #FFD700;
    margin-bottom: 15px;
    font-size: 22px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.plant-all-dialog p {
    color: #FFF;
    margin-bottom: 15px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.plant-all-dialog select {
    width: 100%;
    padding: 10px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.3);
    color: #FFF;
}

.dialog-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.dialog-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.dialog-buttons button:first-child {
    background: #4caf50;
    color: white;
}

.dialog-buttons button:first-child:hover {
    background: #45a049;
}

.dialog-buttons button:last-child {
    background: #f44336;
    color: white;
}

.dialog-buttons button:last-child:hover {
    background: #da190b;
}

/* Disease Dialog */
.disease-dialog {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    min-width: 400px;
    max-width: 90%;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    text-align: center;
}

.disease-dialog h3 {
    color: #d32f2f;
    margin-bottom: 15px;
    font-size: 22px;
}

.disease-dialog-icon {
    font-size: 64px;
    margin: 15px 0;
    animation: disease-icon-pulse 2s ease-in-out infinite;
}

@keyframes disease-icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.disease-dialog-type {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
}

.disease-dialog-desc {
    color: #666;
    margin: 10px 0 15px 0;
    font-size: 14px;
}

.disease-dialog-penalty {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 10px;
    margin: 15px 0;
    color: #856404;
    font-size: 14px;
}

.no-fungicide {
    background: #ffebee;
    border: 1px solid #ef5350;
    border-radius: 8px;
    padding: 10px;
    margin: 10px 0;
    color: #c62828;
    font-size: 13px;
}

.cure-dialog-btn {
    background: #4caf50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    width: 100%;
    margin-bottom: 10px;
}

.cure-dialog-btn:hover {
    background: #45a049;
}

.dig-dialog-btn {
    background: #ff9800;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    width: 100%;
    margin-bottom: 10px;
}

.dig-dialog-btn:hover {
    background: #f57c00;
}

.disease-dialog .dialog-buttons {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.disease-dialog .dialog-buttons button:last-child {
    background: #9e9e9e;
    margin-top: 10px;
}

.disease-dialog .dialog-buttons button:last-child:hover {
    background: #757575;
}

/* Disease action toggle */
.disease-action-toggle {
    margin: 15px 0;
}

.toggle-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.toggle-btn {
    flex: 1;
    padding: 10px 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.toggle-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.toggle-btn.active {
    background: linear-gradient(135deg, var(--primary) 0%, #0097a7 100%);
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.5);
}

.toggle-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}