/* ========================================
   Умный Дом — Базовые стили
   ======================================== */

:root {
    --accent: #6c63ff;
    --accent-hover: #5a52d5;
    --accent-rgb: 108,99,255;
    --green-light: #44d4aa;
    --red-light: #ff6b6b;
    --green: #00d4aa;
    --muted: #666;
    --bg-dark: #0f0f23;
    --bg-card: rgba(255,255,255,.04);
    --border-card: rgba(255,255,255,.06);
    --text-primary: #e0e0e0;
    --text-muted: #666;
    --text-white: #ffffff;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --shadow-card: 0 8px 25px rgba(0,0,0,.3);
    --transition: .3s ease;
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: rgba(108,99,255,.3); border-radius: 4px; }

/* Typography */
h1 { font-size: 1.6rem; color: var(--text-white); }
h3 { font-size: 1.2rem; color: var(--text-white); }

/* Utility classes */
.text-center { text-align: center; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }

/* Base button */
.btn {
    padding: 10px 20px; border-radius: var(--radius-sm); border: none;
    cursor: pointer; font-size: .95rem; transition: var(--transition);
}
.btn:hover { transform: translateY(-2px); }

/* Toast */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 768px) {
    .toast-container { top: auto; bottom: 20px; left: 50%; transform: translateX(-50%); }
}

.toast { padding: 12px 20px; border-radius: var(--radius-sm); background: rgba(0,0,0,.7); color: var(--text-white); font-size: .9rem; animation: toastIn .3s ease; white-space: nowrap; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

.toast-ok { border-left: 4px solid var(--green-light) !important; }
.toast-s   { border-left: 4px solid var(--red-light) !important; }

/* Glow animation */
@keyframes glowPulse {
    0%, 100% { box-shadow: inset 0 0 5px rgba(var(--accent-rgb), .2); }
    50%      { box-shadow: inset 0 0 20px rgba(var(--accent-rgb), .4); }
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn .5s ease forwards; }