:root{--bg-color: #0f1115;--sidebar-bg: #161b22;--card-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--primary-accent: #6c5ce7;--secondary-accent: #00cec9;--text-primary: #ffffff;--text-secondary: #a0a0a0;--hover-bg: rgba(255, 255, 255, .08);--font-heading: "Outfit", sans-serif;--font-body: "Inter", sans-serif;--sidebar-width: 260px;--header-height: 70px}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-body);font-size:16px;overflow-x:hidden;height:100vh;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{transform:scale(1);opacity:.5}50%{transform:scale(1.05);opacity:.8}to{transform:scale(1);opacity:.5}}@keyframes textGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.sidebar{width:var(--sidebar-width);background-color:var(--sidebar-bg);height:100vh;display:flex;flex-direction:column;border-right:1px solid var(--glass-border);position:fixed;left:0;top:0;transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:100}.logo{padding:24px;font-family:var(--font-heading);font-size:1.5rem;font-weight:700;display:flex;align-items:center;gap:12px;color:var(--primary-accent)}.logo-icon{width:24px;height:24px;background:linear-gradient(45deg,var(--primary-accent),var(--secondary-accent));border-radius:6px}.nav-links{list-style:none;padding:20px;flex:1}.nav-links li{margin-bottom:8px}.nav-links a{text-decoration:none;color:var(--text-secondary);padding:12px 16px;display:block;border-radius:8px;transition:all .2s ease;font-weight:500}.nav-links a:hover,.nav-links li.active a{background-color:var(--hover-bg);color:var(--text-primary)}.sidebar-footer{padding:24px;border-top:1px solid var(--glass-border);color:var(--text-secondary);font-size:.8rem}.main-content{flex:1;margin-left:var(--sidebar-width);display:flex;flex-direction:column;min-height:100vh;position:relative;transition:margin-left .3s cubic-bezier(.4,0,.2,1);z-index:1;min-width:0}.app-header{height:var(--header-height);padding:0 32px;display:flex;align-items:center;justify-content:space-between;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:50}.menu-btn{background:none;border:none;color:var(--text-primary);cursor:pointer;display:none;padding:8px;border-radius:4px;transition:background-color .2s}.menu-btn:hover{background-color:var(--hover-bg)}.page-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:500}.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#a8c0ff,#3f2b96);border:2px solid var(--glass-border)}.dashboard{flex:1;padding:32px;position:relative;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;min-width:0}.bg-indicator-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;z-index:-1;pointer-events:none;-webkit-user-select:none;user-select:none}.device-text{font-family:var(--font-heading);font-size:15vw;font-weight:800;text-transform:uppercase;color:#ffffff08;letter-spacing:-.05em;white-space:nowrap;transition:opacity .5s ease,transform .5s ease;background:linear-gradient(90deg,#ffffff05,#ffffff0f,#ffffff05);background-size:200% auto;-webkit-background-clip:text;background-clip:text;animation:textGradient 8s linear infinite}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;max-width:1200px;margin:0 auto;width:100%}.show-mobile,.show-tablet,.show-desktop{display:none}body[data-device=MOBILE] .show-mobile,body[data-device=TABLET] .show-tablet,body[data-device=DESKTOP] .show-desktop{display:block}@media(max-width:600px){.info-grid{grid-template-columns:1fr;max-width:100%}.glass-panel{padding:20px;overflow-wrap:break-word;word-break:break-word;max-width:100%}}.glass-panel{background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:20px;padding:32px;box-shadow:0 8px 32px #0000004d;transition:transform .3s ease,box-shadow .3s ease;animation:fadeIn .6s ease-out forwards}.glass-panel:hover{transform:translateY(-5px);box-shadow:0 12px 40px #0006;border-color:#fff3}.glass-panel h3{font-family:var(--font-heading);font-size:.9rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}.glass-panel p{font-size:2rem;font-weight:600;color:var(--primary-accent)}.status-dot{width:10px;height:10px;background-color:var(--secondary-accent);border-radius:50%;margin-top:16px;box-shadow:0 0 12px var(--secondary-accent);animation:pulse 2s infinite ease-in-out}.overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:all .3s ease;z-index:90}.overlay.active{opacity:1;visibility:visible}@media(max-width:1024px){:root{--sidebar-width: 0px}.sidebar{width:260px;transform:translate(-100%);box-shadow:5px 0 30px #00000080}.sidebar.active{transform:translate(0)}.menu-btn{display:block}.main-content{margin-left:0}}@media(max-width:768px){.glass-panel p{font-size:1.5rem}.device-text{font-size:20vw}.app-header{padding:0 20px}.dashboard{padding:20px}}@media(max-height:600px){.dashboard{justify-content:flex-start;padding-top:20px}}