:root{--text:#f4f8ff;--muted:#aebbd0;--blue:#35a8ff;--line:rgba(255,255,255,.13)}
*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;min-height:100%;font-family:"Segoe UI",Arial,sans-serif;color:var(--text);background:#070b12}body{min-height:100vh;overflow-x:hidden}.app{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:24px}.dashboard{position:relative;width:min(1500px,96vw);min-height:min(850px,92vh);border-radius:24px;overflow:hidden;background:#101721;box-shadow:0 30px 100px rgba(0,0,0,.55)}.hero-image{width:100%;height:100%;min-height:min(850px,92vh);display:flex;justify-content:center;align-items:center}.hero-image img{width:100%;height:100%;object-fit:cover;display:block}.hero-image{position:relative;}
.hotspot{position:absolute;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:18px;text-decoration:none;cursor:pointer;transition:.2s ease;}
.hotspot:hover{border-color:rgba(53,168,255,.75);background:rgba(53,168,255,.10);box-shadow:0 0 28px rgba(53,168,255,.20);}
.hotspot span{opacity:0;transform:translateY(6px);padding:7px 12px;border-radius:10px;color:#fff;background:rgba(5,15,29,.88);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);font-size:13px;transition:.2s ease;pointer-events:none;}
.hotspot:hover span{opacity:1;transform:translateY(0);}
/* Hotspot positions match the current 1672x941 illustration. */
.hotspot-monitor{left:35.5%;top:35%;width:29%;height:27%;}
.hotspot-nas{left:63.5%;top:44%;width:15%;height:25%;}
.hotspot-printer{left:77%;top:31%;width:20%;height:45%;}
.sidebar{position:absolute;left:0;top:0;bottom:0;width:285px;padding:28px 20px;z-index:5;background:linear-gradient(90deg,rgba(5,15,29,.93),rgba(5,15,29,.74),rgba(5,15,29,.35));border-right:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.location{color:var(--muted);font-size:14px;margin-bottom:10px}.clock{font-size:48px;font-weight:300;letter-spacing:-2px}.date{color:var(--muted);font-size:15px;margin-top:3px}.weather{margin-top:25px;padding-bottom:22px;border-bottom:1px solid var(--line)}.weather-row{display:flex;align-items:center;gap:13px}.weather-icon{font-size:38px}.temperature{font-size:29px;font-weight:300}.weather-description,.high-low{color:var(--muted);font-size:13px;margin-top:2px}.menu{margin-top:24px;display:flex;flex-direction:column;gap:8px}.menu a{width:100%;border:0;color:var(--text);background:transparent;border-radius:14px;padding:14px 15px;display:flex;align-items:center;gap:15px;text-align:left;font-size:17px;text-decoration:none;transition:.2s ease}.menu a:hover{background:rgba(255,255,255,.10);transform:translateX(3px)}.menu a.active{background:linear-gradient(90deg,rgba(30,145,255,.38),rgba(30,145,255,.12));box-shadow:inset 3px 0 0 var(--blue),0 0 22px rgba(53,168,255,.12)}.menu-icon{width:30px;font-size:22px;text-align:center}.arrow{margin-left:auto;opacity:.75}.page{position:absolute;left:285px;right:0;top:0;bottom:0;z-index:3;padding:55px;display:flex;align-items:center;justify-content:center;background:rgba(5,10,18,.48);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.panel{width:min(900px,90%);padding:30px;border:1px solid var(--line);border-radius:22px;background:rgba(10,18,30,.82);backdrop-filter:blur(18px);box-shadow:0 25px 80px rgba(0,0,0,.35)}.panel h1{font-size:32px;margin-bottom:10px}.panel>p{color:var(--muted);margin-bottom:24px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{padding:20px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.055)}.card h3{margin-bottom:8px}.card p{color:var(--muted);font-size:14px;line-height:1.5}.online{color:#6de49a!important;margin-top:8px}.home-page{background:transparent;backdrop-filter:none;pointer-events:none}.home-page .panel{display:none}.hotspot{z-index:20;pointer-events:auto}.hotspot:focus-visible{outline:2px solid rgba(53,168,255,.95);outline-offset:3px}@media(max-width:850px){.app{padding:0}.dashboard{width:100vw;min-height:100vh;border-radius:0}.hero-image{min-height:100vh}.sidebar{width:220px}.clock{font-size:38px}.page{left:220px;padding:20px}.grid{grid-template-columns:1fr}}