:root{--bg:#121212;--surface:#1e1e1e;--surface-elevated:#252525;--text:#fff;--text-muted:#a3a3a3;--border:#2a2a2a;--cyan:#00e5ff;--yellow:#ffd600;--purple:#bb86fc;--pink:#ff4081;--green:#69f0ae;--orange:#ff9100;--radius-lg:28px;--radius-md:18px;--radius-sm:12px;--shadow-card:0 8px 32px #00000059;--font-ui:"Poppins", system-ui, sans-serif;--font-script:"Dancing Script", cursive;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-ui);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;margin:0;font-size:14px;line-height:1.45}#root{min-height:100%}button{cursor:pointer;font-family:inherit}input{font-family:inherit}.app{background:var(--bg);min-height:100%;display:flex}.sidebar{border-right:1px solid var(--border);background:#161616;flex-direction:column;flex-shrink:0;align-items:center;gap:8px;width:72px;padding:20px 0;display:flex}.sidebar__logo{background:#ffffff0f;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;margin-bottom:12px;display:flex;overflow:hidden}.sidebar__logo img{object-fit:contain;object-position:center;width:100%;height:100%}a.sidebar__logo{color:inherit;text-decoration:none}.sidebar__nav{flex-direction:column;flex:1;gap:6px;display:flex}.sidebar__btn{border-radius:var(--radius-sm);width:48px;height:48px;color:var(--text-muted);background:0 0;border:none;place-items:center;transition:background .2s,color .2s;display:grid}a.sidebar__btn{box-sizing:border-box;text-decoration:none}.sidebar__btn:hover{color:var(--text);background:var(--surface)}.sidebar__btn--active{color:var(--text);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}.sidebar__btn svg{width:22px;height:22px}.main-wrap{flex-direction:column;flex:1;min-width:0;display:flex;overflow-x:auto}.topbar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;padding:16px 28px;display:flex}.search{background:var(--surface);border:1px solid var(--border);border-radius:999px;flex:1;align-items:center;gap:10px;min-width:200px;max-width:320px;padding:10px 18px;display:flex}.search input{color:var(--text);background:0 0;border:none;outline:none;flex:1;font-size:13px}.search input::placeholder{color:var(--text-muted)}.topbar__title{font-family:var(--font-script);color:var(--text);letter-spacing:.02em;font-size:2rem;font-weight:700}.profile{flex-shrink:0;align-items:center;gap:12px;display:flex}.profile__text{text-align:right}.profile__name{font-size:14px;font-weight:600}.profile__email{color:var(--text-muted);font-size:12px}.profile__avatar{background:linear-gradient(135deg, var(--purple), var(--cyan));border:2px solid var(--border);border-radius:50%;width:44px;height:44px}.profile__chevron{color:var(--text-muted)}.content{flex-direction:column;flex:1;gap:20px;min-height:0;padding:24px 28px 32px;display:flex}.content__dashboard{flex-wrap:wrap;flex:1;align-items:stretch;gap:20px;min-height:0;display:flex}.content__center{flex-direction:column;flex:1;gap:20px;min-width:0;display:flex}.greeting{letter-spacing:-.02em;font-size:1.75rem;font-weight:600}.cards-row{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}@media (width<=1200px){.cards-row{grid-template-columns:1fr}}.stat-card{border-radius:var(--radius-lg);min-height:158px;box-shadow:var(--shadow-card);border:1px solid #ffffff0f;padding:22px 24px;position:relative;overflow:hidden}.stat-card:before{content:"";border-radius:inherit;pointer-events:none;z-index:0;background:repeating-linear-gradient(-32deg,#0000,#0000 18px,#ffffff0e 18px 20px);position:absolute;inset:0}.stat-card__content{z-index:1;flex-direction:column;align-items:flex-start;max-width:58%;min-height:108px;display:flex;position:relative}.stat-card__illustration{object-fit:contain;object-position:right bottom;pointer-events:none;z-index:1;filter:drop-shadow(0 12px 24px #0003);width:auto;max-width:55%;height:clamp(118px,22vw,142px);position:absolute;bottom:-18px;right:-6px}.stat-card__illustration--tall{height:clamp(132px,24vw,168px);bottom:-28px;right:-12px}.stat-card__label{opacity:.95;margin-bottom:6px;font-size:13px;font-weight:500}.stat-card__value{letter-spacing:-.03em;font-size:1.85rem;font-weight:700}.stat-card__link{text-underline-offset:3px;opacity:.9;color:inherit;background:0 0;border:none;margin-top:14px;padding:0;font-size:12px;font-weight:500;text-decoration:underline}.stat-card__link:hover{opacity:1}.stat-card--cyan{color:#0d1a1c;background:linear-gradient(135deg,#006064 0%,#00acc1 45%,#00e5ff 100%)}.stat-card--yellow{color:#1a1400;background:linear-gradient(135deg,#f57f17 0%,#ffab00 50%,#ffd600 100%)}.stat-card--purple{color:#fff;background:linear-gradient(135deg,#4a148c 0%,#7b1fa2 50%,#ce93d8 100%)}@media (width<=1200px){.stat-card__content{max-width:52%}}@media (width<=600px){.stat-card__content{max-width:100%;padding-right:0}.stat-card__illustration{opacity:.92;height:100px;bottom:-12px;right:-4px}.stat-card__illustration--tall{height:112px;bottom:-16px}}.mid-row{grid-template-columns:1.6fr 1fr;align-items:stretch;gap:16px;display:grid}@media (width<=1100px){.mid-row{grid-template-columns:1fr}}.card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-card);padding:20px 22px}.card__head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;display:flex}.card__title{font-size:1.05rem;font-weight:600}.select{background:var(--surface-elevated);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:8px 14px;font-size:12px}.btn-yellow{background:var(--yellow);color:#111;border:none;border-radius:999px;padding:8px 18px;font-size:12px;font-weight:600;transition:filter .2s,transform .15s}.btn-yellow:hover{filter:brightness(1.05)}.btn-yellow:active{transform:scale(.98)}.btn-ghost{color:var(--text-muted);border:1px solid var(--border);background:0 0;border-radius:999px;padding:8px 16px;font-size:12px;font-weight:500}.btn-ghost:hover{color:var(--text);border-color:#444}.chart-wrap{width:100%;height:260px}.calendar-card .card__head{margin-bottom:12px}.calendar-nav{align-items:center;gap:8px;font-size:13px;font-weight:500;display:flex}.calendar-month{flex-direction:column;gap:5px;display:flex}.calendar-month__dow{text-align:center;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:2px;display:grid}.calendar-month__dow-cell{color:var(--text-muted);padding:2px 0 6px;font-size:11px;font-weight:600}.calendar-month__row{grid-template-columns:repeat(7,1fr);gap:4px;display:grid}.calendar-cell{text-align:center;color:var(--text);border-radius:8px;padding:9px 0;font-size:12px;font-weight:500;line-height:1}.calendar-cell--muted{color:#6b6580;font-weight:500}.calendar-cell--hl{color:#141109;background:#ffd6006b;border-radius:0;font-weight:600}.calendar-cell--hl-start{border-radius:12px 0 0 12px}.calendar-cell--hl-end{border-radius:0 12px 12px 0}.calendar-cell--hl.calendar-cell--hl-start.calendar-cell--hl-end{border-radius:12px}.calendar-month__footer{color:var(--text-muted);margin:14px 0 0;font-size:12px;line-height:1.45}.bottom-row{grid-template-columns:1fr 1.4fr;gap:16px;display:grid}@media (width<=1100px){.bottom-row{grid-template-columns:1fr}}.bar-chart-wrap{height:220px}.bar-chart-wrap--3d{height:236px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;color:var(--text-muted);border-bottom:1px solid var(--border);padding:10px 8px;font-weight:500}td{border-bottom:1px solid var(--border);padding:12px 8px}.badge{border-radius:999px;padding:4px 10px;font-size:11px;font-weight:600;display:inline-block}.badge--green{color:var(--green);background:#69f0ae26}.badge--orange{color:var(--orange);background:#ff910026}.badge--blue{color:var(--cyan);background:#00e5ff1f}.panel{flex-direction:column;flex-shrink:0;align-self:stretch;gap:16px;width:300px;display:flex}@media (width>=1401px){.panel>.card:nth-child(2){flex:1;min-height:0}}@media (width<=1400px){.panel{flex-flow:wrap;flex-basis:100%;width:100%}.panel>*{flex:280px}}.pie-wrap{height:200px}.pie-wrap--3d{height:auto;min-height:200px}.pie-3d-layout{align-items:center;gap:10px;min-height:200px;display:flex}.pie-3d-tilt{perspective:560px;flex:1;min-width:0;max-width:64%;height:200px}.pie-3d-tilt .recharts-responsive-container{transform-style:preserve-3d;transform-origin:50% 62%;transform:rotateX(52deg)scale(1.04)}.pie-3d-legend{flex-direction:column;flex-shrink:0;gap:11px;min-width:112px;margin:0;padding:0 6px 0 0;font-size:12px;list-style:none;display:flex}.pie-3d-legend li{color:var(--text);align-items:center;gap:8px;display:flex}.pie-3d-legend__swatch{border-radius:3px;flex-shrink:0;width:11px;height:11px;box-shadow:0 1px 3px #00000059}@media (width<=1400px){.pie-3d-tilt{max-width:55%}}@media (width<=520px){.pie-3d-layout{flex-direction:column;align-items:stretch}.pie-3d-tilt{max-width:100%}.pie-3d-legend{flex-flow:wrap;min-width:0}}.metrics-list{flex-direction:column;gap:12px;display:flex}.metrics-list__row{justify-content:space-between;align-items:baseline;font-size:13px;display:flex}.metrics-list__label{color:var(--text-muted)}.metrics-list__value{font-weight:600}.metrics-list__delta{color:var(--green);margin-left:6px;font-size:12px}.progress-block{margin-top:4px}.progress-block__label{justify-content:space-between;margin-bottom:6px;font-size:12px;display:flex}.progress-block__label span:last-child{font-weight:600}.progress-bar{background:var(--surface-elevated);border-radius:999px;height:10px;overflow:hidden}.progress-bar__fill{border-radius:999px;height:100%}.progress-bar__fill--online{background:linear-gradient(90deg,#7c4dff,#00b0ff);width:72%}.progress-bar__fill--offline{background:linear-gradient(90deg,#0288d1,#4fc3f7);width:45%}.recharts-default-legend{font-size:11px!important}.recharts-cartesian-grid-horizontal line,.recharts-cartesian-grid-vertical line{stroke:#333!important}.tooltip-chart{background:#2a2a2a!important;border:1px solid #444!important;border-radius:8px!important;font-size:12px!important}.link-muted{color:var(--cyan);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;font-weight:500;text-decoration:underline}
