.smarthome-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
    gap: 20px; 
    width: 100%; 
    max-width: 900px; 
    font-family: system-ui, -apple-system, sans-serif;
}
.smarthome-card { 
    background: #161b22; 
    border: 1px solid #30363d; 
    border-radius: 16px; 
    padding: 20px; 
    color: #c9d1d9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    min-height: 110px; 
}

.smarthome-top { display: flex; justify-content: space-between; align-items: center; }
.smarthome-title { font-weight: 500; font-size: 1.05rem; color: #f9fafb; }
    
/* Переключатель типа тумблер */
.sh-switch { position: relative; display: inline-block; width: 46px; height: 24px; }
.sh-switch input { opacity: 0; width: 0; height: 0; }
.sh-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #374151; transition: .2s; border-radius: 24px; border: 1px solid #30363d; }
.sh-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; transition: .2s; border-radius: 50%; }
.sh-switch input:checked + .sh-slider { background: #10b981; border-color: #10b981; }
.sh-switch input:checked + .sh-slider:before { transform: translateX(22px); }

/* Ползунок ШИМ */
.sh-pwm-container { margin-top: 15px; display: flex; align-items: center; gap: 10px; }
.sh-pwm-slider { -webkit-appearance: none; width: 100%; height: 6px; background: #21262d; border-radius: 5px; outline: none; border: 1px solid #30363d; }
.sh-pwm-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #10b981; cursor: pointer; }
.sh-pwm-val { font-size: 0.85rem; color: #8b949e; min-width: 35px; text-align: right; }

/*Рамка в центре*/
.main-card {
    width: 80%;
    background: #090d16;
    margin: 90px auto 0 auto; /* Центрируем по горизонтали, отступ сверху 90px */
    position: relative;
    border-radius: 15px;
    padding: 30px;            /* Внутренние отступы, чтобы контент не лип к краям */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Красивая мягкая тень */
    box-sizing: border-box;
}

.name-card {
    margin-bottom: 25px;      /* Отступ до начала карточек */
    color: #ffffff;
    font-family: Monotype Corsiva;
	font-weight:bold;
	font-size: 34px;
}