.dashboard-mockup{width:100%;max-width:900px;background:var(--dash-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--dash-border);border-radius:var(--radius-lg);box-shadow:var(--dash-shadow);overflow:hidden;position:relative;z-index:10;display:flex;flex-direction:column}.dashboard-mockup:after{content:"";position:absolute;bottom:0;left:0;right:0;height:100px;background:linear-gradient(to bottom,transparent,var(--dash-bg));z-index:20;pointer-events:none}.dashboard-mockup:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);opacity:.5}.window-dots{display:flex;align-items:center;gap:8px;margin-right:12px}.window-dots span{width:12px;height:12px;border-radius:50%;display:inline-block}.dot-close{background:#ff5f57}.dot-minimize{background:#febc2e}.dot-expand{background:#28c840}.dash-header{padding:1rem 1.5rem;justify-content:space-between;border-bottom:1px solid var(--dash-border);background:rgba(255,255,255,.4);position:relative}.dash-header,.dash-logo{display:flex;align-items:center}.dash-logo{gap:.5rem;font-weight:700;font-size:1.1rem;color:var(--text-main);width:200px}.logo-icon{width:24px;height:24px;background:var(--gradient-1);border-radius:6px;display:inline-block}.dash-title{font-weight:600;font-size:1.1rem;color:var(--text-main);position:absolute;left:50%;transform:translateX(-50%)}.dash-header-right{gap:1rem}.dash-header-right,.search-bar{display:flex;align-items:center}.search-bar{background:var(--dash-surface);border:1px solid var(--dash-border);border-radius:var(--radius-xl);padding:.4rem 1rem;gap:.5rem}.search-bar input{border:none;background:transparent;outline:none;font-size:.85rem;color:var(--text-main);width:150px}.search-icon{font-size:.8rem;opacity:.5}.icon-btn{display:flex;align-items:center;justify-content:center;background:var(--dash-surface);font-size:.85rem;cursor:pointer}.avatar,.icon-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--dash-border)}.avatar{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f3f4f6'/%3E%3Ccircle cx='50' cy='38' r='22' fill='%2387939f'/%3E%3Ccircle cx='50' cy='112' r='55' fill='%2387939f'/%3E%3C/svg%3E");background-position:50%;background-size:cover}.notification-wrapper{position:relative;display:inline-block}.notification-btn{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.notification-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;background:#ef4444;border:2px solid var(--dash-surface);border-radius:50%;animation:pulse-dot 2s infinite}@keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(239,68,68,.7)}70%{box-shadow:0 0 0 6px rgba(239,68,68,0)}to{box-shadow:0 0 0 0 rgba(239,68,68,0)}}.notification-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:320px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--dash-border);border-radius:var(--radius-md);box-shadow:0 10px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);z-index:100;overflow:hidden}.notif-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--dash-border);background:rgba(249,250,251,.5)}.notif-header h4{font-size:.85rem;font-weight:600;color:var(--text-main);margin:0}.close-btn{background:none;border:none;font-size:1.25rem;line-height:1;color:var(--text-muted);cursor:pointer;padding:0 .25rem;transition:color .2s}.close-btn:hover{color:var(--text-main)}.notif-body{padding:1rem}.notif-body p{font-size:.85rem;color:var(--text-main);line-height:1.4;margin-bottom:1rem}.notif-body strong{color:var(--primary)}.notif-action-btn{display:block;width:100%;padding:.6rem;text-align:center;background:var(--gradient-1);color:white;font-weight:600;font-size:.85rem;border-radius:var(--radius-sm);text-decoration:none;transition:opacity .2s}.notif-action-btn:hover{opacity:.9}.dash-body{display:flex}.dash-body.full-width .dash-content{padding:1.5rem 1.5rem .5rem;width:100%}.line-pulse{stroke-dasharray:6 30;animation:flow-run 2s linear infinite}@keyframes flow-run{0%{stroke-dashoffset:36}to{stroke-dashoffset:0}}.sidebar-menu li{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all .2s ease}.sidebar-menu li:hover{background:rgba(99,102,241,.05);color:var(--text-main)}.sidebar-menu li.active{background:rgba(99,102,241,.1);color:var(--primary)}.menu-icon{font-size:1rem}.dash-content{flex:1 1;padding:1.5rem;background:rgba(255,255,255,.6)}.content-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:1rem;gap:1rem;margin-bottom:1rem}.kpi-card{background:var(--dash-surface);border:1px solid var(--dash-border);border-radius:var(--radius-md);padding:1rem;display:flex;flex-direction:column;gap:.25rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.05)}.kpi-title{font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.kpi-value{font-size:1.75rem;font-weight:700;color:var(--text-main);line-height:1}.kpi-trend{font-size:.8rem;font-weight:500;color:var(--text-muted);margin-top:.25rem}.kpi-trend.positive{color:#10b981}.chart-container{background:var(--dash-surface);border:1px solid var(--dash-border);border-radius:var(--radius-lg);padding:1rem 1.5rem;margin-bottom:1rem}.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.chart-header h3{font-size:1rem;font-weight:600;color:var(--text-main)}.chart-legend{display:flex;gap:1rem;font-size:.8rem;color:var(--text-muted)}.legend-item{display:flex;align-items:center;gap:.4rem}.legend-item .dot{width:8px;height:8px;border-radius:50%}.legend-item .dot.primary{background:var(--primary)}.legend-item .dot.secondary{background:var(--secondary)}.chart-area{position:relative;width:100%;margin-bottom:.5rem}.animated-chart{width:100%;height:auto;overflow:visible}.chart-x-axis{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-muted);font-weight:500;padding-top:.5rem;border-top:1px solid var(--dash-border)}@media (max-width:768px){.dash-header-right input,.dash-sidebar{display:none}.kpi-grid{grid-template-columns:1fr;gap:1rem}.chart-container{padding:1rem}.chart-x-axis{font-size:.65rem;gap:2px}.chart-x-axis span:after{content:none!important}}@media (max-width:426px){.chart-x-axis{font-size:.6rem}.dash-logo,.window-dots{display:none}.dash-header{justify-content:space-between;padding:.75rem 1rem}.dash-title{position:static;transform:none;margin-right:auto;font-size:.95rem}.dash-body.full-width .dash-content{padding:1rem}.kpi-grid{grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:.75rem}.kpi-card:nth-child(3){display:none}.kpi-card{padding:.85rem}.kpi-title{font-size:.7rem}.kpi-value{font-size:1.4rem}.kpi-trend{font-size:.7rem}.chart-container{padding:.85rem}.chart-header h3{font-size:.85rem}}