@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

:root { color-scheme: dark; font-family: Manrope, Arial, sans-serif; background: #8244f4; color: #f7f5f9; }
* { box-sizing: border-box; }
html { min-width: 320px; }
body { min-height: 100vh; margin: 0; padding: clamp(18px, 3.5vw, 36px); background: radial-gradient(circle at 50% 0, #ab75ff 0, #8649ef 47%, #7936e6 100%); }
button, input { font: inherit; }
button { cursor: default; }
.dashboard { display: grid; grid-template-columns: 84px minmax(0, 1fr); min-height: min(696px, calc(100vh - 72px)); max-width: 1160px; margin: auto; overflow: hidden; background: #242424; box-shadow: 0 16px 30px #43218d9c; }
.sidebar { display: flex; flex-direction: column; align-items: center; padding: 34px 0 35px; background: #3a3a3a; }
.sidebar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand { color: #f4f3f4; }
.brand svg { fill: currentColor; stroke: none; width: 25px; height: 25px; }
.sidebar nav { display: grid; gap: 28px; margin-top: 45px; }
.sidebar nav a, .settings { display: grid; width: 40px; height: 40px; place-items: center; color: #f3f3f3; border-radius: 8px; }
.sidebar nav a.active { color: #a65dff; background: #484848; }
.settings { margin-top: 16px; }
.help { display: grid; width: 20px; height: 20px; place-items: center; margin-top: auto; border: 2px solid #f6f6f6; border-radius: 50%; color: #f7f7f7; font-size: 13px; font-weight: 700; }
.content { padding: 34px clamp(22px, 3.3vw, 36px) 30px; background: #262626; }
.topbar { display: flex; align-items: center; gap: 21px; margin-bottom: 36px; }
h1, h2, p { margin: 0; }
h1 { margin-right: auto; font-size: 18px; font-weight: 600; }
.status { display: flex; gap: 12px; color: #c9c9c9; font-size: 10px; }
.search { display: flex; align-items: center; width: 170px; padding: 0 12px; border-radius: 6px; background: #414141; color: #a15bff; }
.search span { font-size: 26px; font-weight: 400; line-height: 1; transform: rotate(-20deg); }
.search input { width: 100%; padding: 10px 6px; border: 0; outline: 0; background: transparent; color: white; font-size: 10px; }
.search input::placeholder { color: #bebebe; }
.add-device { padding: 10px 19px; border: 0; border-radius: 6px; background: #9250f2; color: white; font-size: 11px; font-weight: 700; box-shadow: inset 0 0 0 1px #ad73ff; }
.main-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(250px, .92fr); gap: 17px; }
.camera { position: relative; height: 197px; overflow: hidden; border-radius: 29px; background: linear-gradient(135deg, #b7b4aa 0%, #e3e3df 42%, #8e9cb3 42%, #547097 68%, #d0b6a2 68%); }
.camera::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0 34%, #3d3d3d90 34.2% 35%, transparent 35.2%), linear-gradient(20deg, transparent 0 55%, #eef0f3bd 55.2% 60%, transparent 60.2%); }
.live, .camera-room { position: absolute; z-index: 1; padding: 8px 10px; border-radius: 7px; background: #444b; font-size: 12px; }
.live { top: 17px; left: 23px; } .live i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #fa1741; }
.camera-room { right: 18px; bottom: 15px; background: #161616a8; font-size: 10px; } .camera-room span { color: #a65cff; }
.rooms { display: flex; justify-content: space-between; padding: 31px 0 17px; }
.rooms a { color: #999; font-size: 12px; text-decoration: none; } .rooms a.selected { color: #eee; font-weight: 700; }
.device-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.device-card { position: relative; min-height: 86px; padding: 15px 16px; border-radius: 16px; background: #3a3a3a; }
.device-card h2, .widget h2 { font-size: 15px; font-weight: 500; }
.device-card p { margin-top: 11px; color: #c4c4c4; font-size: 10px; }
.device-icon { position: absolute; top: 15px; right: 16px; color: #f4f4f4; font-size: 23px; line-height: 1; }
.switch { position: absolute; right: 16px; bottom: 16px; width: 34px; height: 18px; padding: 2px; border: 0; border-radius: 99px; background: #757575; } .switch.on { background: #9550f1; } .switch i { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translateX(14px); }
.pills { display: flex; gap: 4px; margin-top: 12px !important; }.pills span { padding: 2px 11px; border-radius: 9px; background: #999; color: #e8e8e8; font-size: 9px; }.pills .selected-pill { background: #9855f5; color: white; }
.widgets { display: grid; grid-template-rows: 1.35fr .84fr .37fr; gap: 17px; min-width: 0; }
.widget { padding: 23px 24px; border-radius: 29px; background: #3a3a3a; }.widget header { display: flex; justify-content: space-between; }.widget header button { padding: 0; border: 0; background: transparent; color: white; letter-spacing: 1px; }
.chart { position: relative; height: 174px; margin-top: 20px; padding-left: 18px; }.grid-lines { position: absolute; inset: 0 0 24px 18px; background: repeating-linear-gradient(to bottom, transparent 0 37px, #525252 38px 39px); }.axis { position: absolute; left: 0; z-index: 1; color: #ccc; font-size: 8px; }.a300 { top: -4px; }.a200 { top: 58px; }.a100 { top: 119px; }
.chart svg { position: absolute; top: -4px; left: 18px; width: calc(100% - 18px); height: 146px; overflow: visible; }.chart polyline { fill: none; stroke-width: 2; }.line-gray { stroke: #999; }.line-tan { stroke: #c9a664; }.line-green { stroke: #58b943; }
.weeks { position: absolute; right: 0; bottom: 0; left: 18px; display: flex; justify-content: space-between; color: #ddd; font-size: 8px; }
.connection-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 28px; }.connection-cards > div { display: grid; height: 80px; place-items: center; border-radius: 11px; }.wifi { background: #9751f2; }.wifi strong { font-size: 45px; font-weight: 400; line-height: .6; }.wifi span, .bluetooth small { margin-top: -5px; font-size: 11px; }.bluetooth { background: #999; font-size: 42px; }.bluetooth small { font-size: 10px; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.gallery div { min-height: 62px; border-radius: 16px; background: linear-gradient(135deg, #bcbfc0, #444 53%, #d4c2ae); }.gallery div:nth-child(2) { background: linear-gradient(135deg, #e5e2d9, #6e6d67 55%, #aa9581); }.gallery div:nth-child(3) { background: linear-gradient(135deg, #9b8072, #e4e1dc 60%, #786858); }.gallery div:nth-child(4) { background: linear-gradient(135deg, #d8c0a5, #d0d1c9 55%, #776f68); }
@media (max-width: 800px) { body { padding: 0; }.dashboard { grid-template-columns: 60px minmax(0, 1fr); min-height: 100vh; }.sidebar { padding-top: 24px; }.sidebar nav { gap: 18px; margin-top: 35px; }.content { padding: 24px 18px; }.topbar { flex-wrap: wrap; gap: 13px; margin-bottom: 25px; }.topbar h1 { width: 100%; }.status { margin-right: auto; }.search { width: 135px; }.main-grid { grid-template-columns: 1fr; }.widgets { grid-template-rows: auto auto 62px; }.camera { height: 180px; } }
@media (max-width: 520px) { .sidebar { display: none; }.dashboard { display: block; }.content { padding: 22px 15px; }.topbar { gap: 10px; }.add-device { padding: 9px 12px; }.search { width: 130px; }.device-grid { grid-template-columns: 1fr; }.rooms { overflow-x: auto; gap: 22px; }.rooms a { white-space: nowrap; }.camera { height: 165px; }.widget { padding: 20px; } }