:root{--bg-page: #ffffff;--text-primary: #1d1d1f;--text-secondary: #86868b;--text-tertiary: #a1a1a6;--muted: rgba(29, 29, 31, .04);--glass-bg: rgba(255, 255, 255, .55);--glass-bg-hover: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .18);--glass-border-hover: rgba(255, 255, 255, .3);--glass-shadow: 0 25px 50px -12px rgba(0, 0, 0, .12);--glass-shadow-hover: 0 32px 64px -12px rgba(0, 0, 0, .18);--glass-blur: saturate(180%) blur(25px);--glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);--glass-reflection: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, transparent 50%);--glass-reflection-hover: linear-gradient(135deg, rgba(255, 255, 255, .4) 0%, transparent 60%);--accent-blue: #007aff;--accent-blue-light: rgba(0, 122, 255, .1);--accent-cyan: #32d74b;--accent-orange: #ff9500;--primary-gradient: linear-gradient(135deg, rgba(0, 122, 255, .1) 0%, rgba(50, 215, 75, .1) 100%);--secondary-gradient: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);--success-gradient: linear-gradient(135deg, #32d74b 0%, #30d158 100%);--sidebar-width: 280px;--header-height: 88px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-medium: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg-page: #000000;--text-primary: #f5f5f7;--text-secondary: #86868b;--text-tertiary: #6e6e73;--muted: rgba(245, 245, 247, .04);--glass-bg: rgba(29, 29, 31, .5);--glass-bg-hover: rgba(29, 29, 31, .65);--glass-border: rgba(255, 255, 255, .13);--glass-border-hover: rgba(255, 255, 255, .2);--glass-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6);--glass-shadow-hover: 0 32px 64px -12px rgba(0, 0, 0, .8);--glass-blur: saturate(180%) blur(25px);--glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);--glass-reflection: linear-gradient(135deg, rgba(255, 255, 255, .1) 0%, transparent 50%);--glass-reflection-hover: linear-gradient(135deg, rgba(255, 255, 255, .15) 0%, transparent 60%);--accent-blue: #0a84ff;--accent-blue-light: rgba(10, 132, 255, .15);--accent-cyan: #64d2ff;--accent-orange: #ff9f0a;--primary-gradient: linear-gradient(135deg, rgba(10, 132, 255, .1) 0%, rgba(100, 210, 255, .1) 100%);--secondary-gradient: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);--success-gradient: linear-gradient(135deg, #30d158 0%, #64d2ff 100%)}.app{display:flex;min-height:100vh;background:var(--bg-page);color:var(--text-primary);background-image:radial-gradient(ellipse at top,rgba(0,122,255,.02) 0%,transparent 70%)}.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-right:1px solid var(--glass-border);transform:translate(-100%);transition:transform var(--transition-medium),box-shadow var(--transition-medium);z-index:1100;display:flex;flex-direction:column;box-shadow:var(--glass-shadow),var(--glass-inner-shadow)}.app-header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);padding:0 2rem;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--glass-shadow);z-index:1000;transition:margin-left var(--transition-medium),width var(--transition-medium)}.app-content{flex-grow:1;display:flex;flex-direction:column;min-height:100vh;padding-top:var(--header-height);transition:margin-left var(--transition-medium)}.app-main{flex-grow:1;padding:2rem}@media (max-width: 1023px){.sidebar.sidebar-open{transform:translate(0)}}@media (min-width: 1024px){.sidebar{transform:translate(0);box-shadow:none}.app-header{width:calc(100% - var(--sidebar-width));left:auto;margin-left:var(--sidebar-width)}.app-content{margin-left:var(--sidebar-width)}.sidebar:not(.sidebar-open){transform:translate(-100%)}.app-header.sidebar-open,.app-content.sidebar-open{margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width))}.app-header:not(.sidebar-open),.app-content:not(.sidebar-open){margin-left:0;width:100%}.app-header:not(.sidebar-open){width:100%}}.section-placeholder{padding:2rem;background:var(--muted);border-radius:20px;text-align:center}.section-placeholder h2{font-size:2rem;margin-bottom:.5rem;color:var(--text-primary)}.section-placeholder p{font-size:1rem;color:var(--text-secondary)}.sidebar:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--glass-reflection);pointer-events:none;opacity:.6;transition:opacity var(--transition-fast)}.sidebar:hover:before{background:var(--glass-reflection-hover);opacity:.8}.sidebar-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1099;opacity:0;pointer-events:none;transition:opacity var(--transition-fast)}.sidebar-backdrop.visible{opacity:1;pointer-events:auto}@keyframes fadeIn{to{opacity:1}}.sidebar-header{padding:2rem 1.5rem;border-bottom:1px solid var(--glass-border);background:rgba(255,255,255,.08);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);position:relative;flex-shrink:0}.sidebar-header:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--glass-border),transparent)}.sidebar-logo{display:flex;align-items:center;gap:1rem}.logo-icon{width:40px;height:40px;background:var(--secondary-gradient);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 8px 25px #007aff40,inset 0 1px #ffffff4d;position:relative;overflow:hidden}.logo-icon:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%,to{transform:translate(-100%) translateY(-100%) rotate(45deg)}50%{transform:translate(100%) translateY(100%) rotate(45deg)}}.logo-text{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.sidebar-nav{flex-grow:1;padding:1rem 0;overflow-y:auto}.sidebar-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;margin:.25rem .75rem;border-radius:12px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);position:relative;text-align:left;border:none;background:transparent}.sidebar-item:hover{color:var(--text-primary);background:var(--muted)}.sidebar-item.active{background:var(--secondary-gradient);color:#fff;font-weight:600;box-shadow:0 8px 25px #007aff4d,var(--glass-inner-shadow)}.sidebar-item.active:after{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:24px;width:4px;background:white;border-radius:0 2px 2px 0}.sidebar-item-icon{font-size:1.25rem;width:24px;text-align:center}.sidebar-item-label{font-size:1rem;font-weight:500}.sidebar-footer{padding:1.5rem;border-top:1px solid var(--glass-border);background:rgba(255,255,255,.05);flex-shrink:0}.user-profile{display:flex;align-items:center;gap:1rem}.user-avatar{width:48px;height:48px;background:var(--secondary-gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 8px 25px #007aff33,inset 0 2px #ffffff4d;position:relative;overflow:hidden}.user-avatar:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:conic-gradient(from 0deg,var(--accent-blue),var(--accent-cyan),var(--accent-blue));border-radius:inherit;z-index:-1;animation:rotate 4s linear infinite;opacity:.3}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.user-info{flex:1}.user-name{color:var(--text-primary);font-weight:600;font-size:.875rem;margin-bottom:.25rem}.user-role{color:var(--text-secondary);font-size:.75rem}.app-header:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--glass-border),transparent)}.app-header:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--glass-reflection);pointer-events:none;opacity:.4}.header-left{display:flex;align-items:center;gap:1.5rem}.menu-toggle{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;padding:.75rem;color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-inner-shadow);position:relative;overflow:hidden}.menu-toggle:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--glass-reflection);opacity:0;transition:opacity var(--transition-fast)}.menu-toggle:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-hover);transform:scale(1.05);box-shadow:var(--glass-shadow-hover),var(--glass-inner-shadow)}.menu-toggle:hover:before{opacity:.6}.menu-toggle:active{transform:scale(.98)}.header-title h1{font-size:1.75rem;font-weight:700;margin-bottom:.25rem;color:var(--text-primary)}.header-title p{font-size:.875rem;opacity:.8;color:var(--text-secondary);margin:0}.header-right{display:flex;align-items:center;gap:1rem}.header-status{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;color:var(--text-primary);font-size:.875rem;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-inner-shadow);position:relative;overflow:hidden}.header-status:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--glass-reflection);opacity:.3;pointer-events:none}.status-indicator{width:8px;height:8px;background:var(--accent-cyan);border-radius:50%;box-shadow:0 0 8px #32d74b99,inset 0 1px #ffffff4d;animation:pulse 2s infinite;position:relative}.status-indicator:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;background:radial-gradient(circle,rgba(50,215,75,.3) 0%,transparent 70%);animation:pulse-ring 2s infinite}@keyframes pulse-ring{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.3}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.app-main{flex:1;padding:1rem 2rem 2rem;max-width:1200px;margin:0 auto;width:100%}.section-placeholder{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:20px;padding:4rem 2rem;text-align:center;box-shadow:var(--glass-shadow);color:var(--text-primary)}.section-placeholder h2{font-size:2.5rem;margin-bottom:1rem;color:var(--text-primary)}.section-placeholder p{font-size:1.125rem;opacity:.8;max-width:600px;margin:0 auto;color:var(--text-secondary)}.dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:2rem}.dashboard-grid{display:grid;gap:2rem}.dashboard-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.dashboard-card{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:24px;padding:2rem;box-shadow:var(--glass-shadow);transition:all var(--transition-medium);position:relative;overflow:hidden}.dashboard-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--glass-reflection);pointer-events:none;opacity:.4;transition:all var(--transition-medium)}.dashboard-card:hover{transform:translateY(-8px) scale(1.02);background:var(--glass-bg-hover);border-color:var(--glass-border-hover);box-shadow:var(--glass-shadow-hover),var(--glass-inner-shadow)}.dashboard-card:hover:before{background:var(--glass-reflection-hover);opacity:.6}@keyframes liquid-morph{0%,to{border-radius:20px;transform:scale(1)}50%{border-radius:24px;transform:scale(1.01)}}.dashboard-card:active{animation:liquid-morph .6s ease-in-out}.card-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.card-icon{padding:1rem;border-radius:16px;background:var(--secondary-gradient);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 25px #007aff4d,var(--glass-inner-shadow);position:relative;overflow:hidden}.card-icon:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);animation:icon-shimmer 4s ease-in-out infinite}@keyframes icon-shimmer{0%,to{transform:translate(-100%) translateY(-100%) rotate(45deg)}50%{transform:translate(100%) translateY(100%) rotate(45deg)}}.card-title{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.card-content{color:var(--text-secondary);line-height:1.6}.metric-value{font-size:2.5rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.metric-label{font-size:.875rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.data-list{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:20px;padding:2rem;box-shadow:var(--glass-shadow);position:relative;overflow:hidden}.data-list:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}.data-list h3{color:var(--text-primary);margin-bottom:1.5rem;font-size:1.5rem;font-weight:600}.data-item{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.1);transition:all var(--transition-fast)}.data-item:last-child{border-bottom:none}.data-item:hover{background:rgba(255,255,255,.05);padding-left:1rem;padding-right:1rem;margin:0 -1rem;border-radius:8px}.data-item-name{font-weight:500;color:var(--text-primary)}.data-item-value{color:#0ea5e9;font-weight:600}.loading{display:flex;align-items:center;justify-content:center;padding:4rem}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.2);border-left-color:#0ea5e9;border-radius:50%;animation:spin 1s linear infinite;box-shadow:0 0 20px #0ea5e940}@keyframes spin{to{transform:rotate(360deg)}}.error{background:rgba(245,87,108,.2);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid rgba(245,87,108,.3);color:#ff6b8a;padding:1.5rem;border-radius:16px;border-left:4px solid #f5576c;margin:1rem 0;box-shadow:var(--glass-shadow)}.theme-toggle{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:999px;cursor:pointer;color:var(--text-primary);transition:all var(--transition-fast);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-inner-shadow);position:relative;overflow:hidden}.theme-toggle:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--glass-reflection);opacity:0;transition:opacity var(--transition-fast);border-radius:inherit}.theme-toggle:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-hover);transform:scale(1.05);box-shadow:var(--glass-shadow-hover),var(--glass-inner-shadow)}.theme-toggle:hover:before{opacity:.5}.theme-toggle:active{transform:scale(.98)}.theme-toggle-label{font-size:.8rem;opacity:.8;font-weight:500}@media (max-width: 768px){.sidebar{width:100vw;top:0;height:100vh;z-index:1100}.app-header{padding:0 1rem}.header-title h1{font-size:1.25rem}.header-title p{display:none}.app-main{padding:1rem}.dashboard{grid-template-columns:1fr;gap:1rem}.dashboard-card{padding:1.5rem}.metric-value{font-size:2rem}.section-placeholder{padding:2rem 1rem}.section-placeholder h2{font-size:2rem}}@media (min-width: 1024px){.app-content.sidebar-open{margin-left:var(--sidebar-width);transition:margin-left var(--transition-medium)}.sidebar-backdrop{display:none}.sidebar{top:var(--header-height);height:calc(100vh - var(--header-height));z-index:95}}