:root{--bg:#0e1116;--surface:#161a21;--surface-2:#1b2029;--line:#232936;--line-soft:#1e232c;--text:#eceef2;--text-2:#a4acba;--text-3:#6b7384;--accent:#34d399;--accent-soft:#103226;--blue:#8bb4ff;--blue-soft:#1a2440;--yellow:#f2c94c;--red:#f47c7c;--radius-xl:17px;--radius-l:10px;--radius-m:7px;--radius-s:8px}html,body{color:var(--text);-webkit-font-smoothing:antialiased;background:0 0;margin:0;padding:0;font-family:Greycliff CF,Greycliff,Manrope,Helvetica Neue,Helvetica,Arial,sans-serif}body{padding:48px}.app{background:var(--bg);border-radius:var(--radius-xl);border:1px solid #1d2230;grid-template-columns:260px 1fr 340px;width:1820px;height:1024px;display:grid;overflow:hidden;box-shadow:0 40px 80px #0000008c,0 8px 24px #00000073,inset 0 1px #ffffff0a}.sidebar{background:var(--bg);border-right:1px solid var(--line-soft);flex-direction:column;padding:28px 16px 24px;display:flex}.brand{align-items:center;gap:10px;padding:4px 8px 28px;display:flex}.brand-lockup{width:auto;height:40px;display:block}.logo{background:linear-gradient(135deg,#34d399 0%,#0ea371 100%);border-radius:5px;width:28px;height:28px;position:relative}.logo:after{content:"";background:var(--bg);clip-path:polygon(0 0,100% 0,100% 60%,60% 100%,0 100%);border-radius:4px;position:absolute;inset:6px}.brand-name{letter-spacing:-.01em;font-size:22px;font-weight:600}.nav{flex-direction:column;gap:4px;display:flex}.nav-item{border-radius:var(--radius-m);color:var(--text-2);align-items:center;gap:14px;padding:12px 14px;font-size:15px;font-weight:500;display:flex;position:relative}.nav-item .ico{width:22px;height:22px;color:var(--text-3);justify-content:center;align-items:center;display:inline-flex}.nav-item.active{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}.nav-item.active .ico{color:var(--accent)}.badge{background:var(--accent);color:#06231a;border-radius:999px;justify-content:center;align-items:center;width:20px;height:20px;margin-left:auto;font-size:11px;font-weight:700;display:inline-flex}.sidebar-foot{border-top:1px solid var(--line-soft);flex-direction:column;gap:4px;margin-top:auto;padding-top:16px;display:flex}.main{padding:28px;overflow:hidden}.topbar{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.crumbs{color:var(--text-3);align-items:center;gap:10px;font-size:14px;display:flex}.crumbs .here{color:var(--text)}.avatar{object-fit:cover;border:2px solid #232936;border-radius:50%;width:40px;height:40px;display:block}.status{background:var(--surface);border:1px solid var(--line);border-radius:7px;align-items:center;gap:10px;padding:9px 16px;font-size:14px;font-weight:500;display:flex}.status .dot{background:var(--accent);border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #34d3992e}.topbar-right{align-items:center;gap:16px;display:flex}.welcome{border-radius:var(--radius-l);background:var(--surface);border:1px solid var(--line);align-items:center;gap:20px;margin-bottom:20px;padding:22px 24px;display:flex}.welcome .conf{width:64px;height:64px;color:var(--accent);background:#34d3991a;border-radius:8px;flex:0 0 64px;justify-content:center;align-items:center;display:flex}.welcome h2{letter-spacing:-.01em;margin:0;font-size:26px;font-weight:600}.welcome p{color:var(--text-2);margin:4px 0 0;font-size:14px}.welcome .cta{background:var(--accent);color:#06231a;border:none;border-radius:7px;align-items:center;gap:10px;margin-left:auto;padding:14px 22px;font-size:15px;font-weight:600;display:inline-flex;box-shadow:0 8px 24px #34d3992e}.grid{grid-template-columns:1fr 1fr;gap:20px;display:grid}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:22px 24px}.card h3{letter-spacing:-.005em;margin:0 0 6px;font-size:18px;font-weight:600}.card p.sub{color:var(--text-2);margin:0;font-size:13.5px;line-height:1.55}.ghost-btn{background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:6px;align-items:center;gap:10px;margin-top:18px;padding:11px 16px;font-size:13.5px;font-weight:500;display:inline-flex}.ring-card{flex-direction:column;display:flex}.ring-wrap{align-items:center;gap:18px;display:flex}.ring{--p:50;background:conic-gradient(var(--accent) calc(var(--p)*1%), #ffffff0f 0);border-radius:50%;justify-content:center;align-items:center;width:78px;height:78px;display:flex;position:relative}.ring:after{content:"";background:var(--surface);border-radius:50%;position:absolute;inset:8px}.ring span{z-index:1;color:var(--accent);font-size:18px;font-weight:600;position:relative}.appts h3{justify-content:space-between;align-items:center;display:flex}.month{color:var(--text-2);justify-content:space-between;align-items:center;margin-top:8px;font-size:14px;display:flex}.arrows{gap:6px;display:flex}.arrow{background:var(--surface-2);border:1px solid var(--line);width:28px;height:28px;color:var(--text-2);border-radius:5px;justify-content:center;align-items:center;display:inline-flex}.week{border-bottom:1px solid var(--line-soft);grid-template-columns:repeat(7,1fr);gap:6px;margin:14px 0 4px;padding-bottom:14px;display:grid}.day{text-align:center;border-radius:6px;padding:10px 0}.day .dow{color:var(--text-3);margin-bottom:6px;font-size:12px}.day .n{color:var(--text);font-size:16px;font-weight:600}.day.sel{background:#0f1a33}.day.sel .dow,.day.sel .n{color:var(--blue)}.event{border:1px solid var(--line-soft);background:var(--surface-2);border-radius:7px;align-items:flex-start;gap:12px;margin-top:12px;padding:14px 16px;display:flex;position:relative}.event .title{font-size:15px;font-weight:600}.event .who{color:var(--text-3);margin-top:2px;font-size:13px}.event .time{letter-spacing:.04em;text-transform:uppercase;font-size:12px;font-weight:600}.event.now{background:linear-gradient(0deg, #34d3991a, #34d3991a), var(--surface);border-color:#34d3994d}.event.now .time{color:var(--accent)}.event.next{background:linear-gradient(0deg, #8bb4ff1a, #8bb4ff1a), var(--surface);border-color:#8bb4ff4d}.event.next .time{color:var(--blue)}.event .body{flex:1}.event .actions{gap:8px;display:flex}.icon-btn{border:1px solid var(--line);width:32px;height:32px;color:var(--text-2);background:#ffffff0a;border-radius:5px;justify-content:center;align-items:center;display:inline-flex}.rail{border-left:1px solid var(--line-soft);background:var(--bg);flex-direction:column;gap:16px;padding:28px 22px;display:flex;overflow:hidden}.rail .card{padding:18px 20px}.rail h4{margin:0 0 4px;font-size:16px;font-weight:600}.rail p.muted{color:var(--text-2);margin:2px 0 0;font-size:13px}.pill-btn{background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:6px;align-items:center;margin-top:14px;padding:9px 14px;font-size:13px;font-weight:500;display:inline-flex}.device{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:7px;align-items:center;gap:12px;margin-top:12px;padding:12px;display:flex}.device .d-logo{border:1px solid var(--line);width:38px;height:38px;color:var(--text);letter-spacing:-.04em;background:#0a0d12;border-radius:50%;justify-content:center;align-items:center;font-size:14px;font-weight:700;display:inline-flex}.device .nm{font-size:14px;font-weight:600}.device .sm{color:var(--text-3);font-size:12px}.add-device{border:1px dashed var(--line);color:var(--text-2);border-radius:6px;align-items:center;gap:8px;margin-top:12px;padding:11px 14px;font-size:13px;font-weight:500;display:flex}.metric{padding:20px 22px;overflow:hidden}.metric .row{align-items:baseline;gap:8px;display:flex}.metric .label{font-size:14.5px;font-weight:600}.metric .val{font-size:13px}.metric .val .k{font-weight:600}.metric .chart{width:100%;height:56px;margin-top:14px;display:block}.tag-high{color:var(--yellow);font-weight:600}.tag-low{color:var(--red);font-weight:600}.tag-normal{color:var(--accent);font-weight:600}svg{display:block}.app{--bg:transparent;--surface:#ffffff0d;--surface-2:#ffffff12;--line:#ffffff1a;--line-soft:#ffffff14;background:linear-gradient(160deg,#141820c7,#080a0eb3)!important;border:1px solid #ffffff24!important;box-shadow:inset 0 1px #ffffff29!important}.app [class*=card],.app .welcome,.app .panel{box-shadow:inset 0 1px #ffffff1a}.topbar-right .avatar{object-position:50% 22%}.ring-card .ring{background:0 0!important}.ring-card .ring:after{display:none!important}.ring-card .ring:before{content:"";background:conic-gradient(var(--accent) calc(var(--p)*1%),#ffffff14 0);border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 calc(100% - 3.5px));mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 calc(100% - 3.5px))}.ring-card .ring span{z-index:1;position:relative}@property --p{syntax:"<number>";inherits:true;initial-value:0}@keyframes sa-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes sa-fade{0%{opacity:0}to{opacity:1}}@keyframes sa-ring{0%{--p:0}}@keyframes sa-breathe{0%,to{box-shadow:0 0 #34d39959}50%{box-shadow:0 0 0 5px #34d39900}}@keyframes sa-glow{0%,to{border-color:#34d39938}50%{border-color:#34d39973}}.sa .sa-i{opacity:0;animation:.9s cubic-bezier(.2,.7,.2,1) forwards sa-in;animation-delay:var(--d,0s)}.sa .sa-f{opacity:0;animation:1.2s forwards sa-fade;animation-delay:var(--d,0s)}.sa .ring{animation:1.8s cubic-bezier(.3,.7,.2,1) .6s backwards sa-ring}.sa .sa-line{transition:stroke-dashoffset 2s cubic-bezier(.4,.1,.2,1)}.dot,.top .on:before,.status .dot{animation:2.6s ease-in-out infinite sa-breathe}.event.now,.ev.now{animation:3.2s ease-in-out infinite sa-glow}@media (prefers-reduced-motion:reduce){.sa .sa-i,.sa .sa-f{opacity:1;animation:none}.sa .ring,.dot,.event.now,.ev.now{animation:none}}.app{background:#10131bb3!important}.logo{background:#34d399!important}.wel,.new{background-image:none!important}
