:root{--color-primary-raw:#6366f1;--color-primary-2-raw:#a855f7;--color-primary-3-raw:#ec4899;--color-primary:color-mix(in srgb, var(--color-primary-raw) 85%, white);--color-primary-hover:color-mix(in srgb, var(--color-primary) 85%, black);--color-primary-light:color-mix(in srgb, var(--color-primary-raw) 15%, transparent);--color-primary-2:color-mix(in srgb, var(--color-primary-2-raw) 85%, white);--color-primary-3:color-mix(in srgb, var(--color-primary-3-raw) 85%, white);--color-success:#34c759;--color-warning:#fc0;--color-danger:#ff3b30;--color-background-base:#f2f2f7;--color-surface-base:#fff;--color-background:color-mix(in srgb, var(--color-primary-raw) 3%, var(--color-background-base));--color-surface:color-mix(in srgb, var(--color-primary-raw) 4%, var(--color-surface-base));--color-text-main:#1c1c1e;--color-text-muted:#8e8e93;--color-border:#e5e5ea;--shadow-glow:0 4px 16px color-mix(in srgb, var(--color-primary-raw) 35%, transparent);--shadow-glow-hover:0 8px 24px color-mix(in srgb, var(--color-primary-raw) 50%, transparent);--glass-bg-base:#ffffffb3;--glass-bg:color-mix(in srgb, var(--color-primary-raw) 4%, var(--glass-bg-base));--glass-border:#fffc;--glass-shadow:0 12px 32px #0000001a;--elevation-1:0 4px 12px #0000001a;--elevation-2:0 8px 24px #00000026;--elevation-3:0 12px 40px #0003;--font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--spacing-1:.25rem;--spacing-2:.5rem;--spacing-3:.75rem;--spacing-4:1rem;--spacing-6:1.5rem;--spacing-8:2rem;--border-radius-sm:8px;--border-radius-md:12px;--border-radius-lg:20px;--border-radius-xl:28px;--border-radius-pill:9999px;--transition-fast:.2s cubic-bezier(.2, 0, 0, 1);--transition-normal:.4s cubic-bezier(.2, 0, 0, 1)}[data-theme=dark]{--color-primary:color-mix(in srgb, var(--color-primary-raw) 80%, black);--color-primary-hover:color-mix(in srgb, var(--color-primary) 85%, white);--color-primary-light:color-mix(in srgb, var(--color-primary-raw) 25%, transparent);--color-primary-2:color-mix(in srgb, var(--color-primary-2-raw) 80%, black);--color-primary-3:color-mix(in srgb, var(--color-primary-3-raw) 80%, black);--color-background-base:#000;--color-surface-base:#1c1c1e;--color-background:color-mix(in srgb, var(--color-primary-raw) 4%, var(--color-background-base));--color-surface:color-mix(in srgb, var(--color-primary-raw) 6%, var(--color-surface-base));--color-text-main:#f2f2f7;--color-text-muted:#8e8e93;--color-border:#38383a;--shadow-glow:0 4px 16px color-mix(in srgb, var(--color-primary-raw) 45%, transparent);--shadow-glow-hover:0 8px 24px color-mix(in srgb, var(--color-primary-raw) 65%, transparent);--glass-bg-base:#1c1c1ea6;--glass-bg:color-mix(in srgb, var(--color-primary-raw) 5%, var(--glass-bg-base));--glass-border:#ffffff14;--glass-shadow:0 8px 32px color-mix(in srgb, var(--color-primary-raw) 15%, transparent);--elevation-1:0 4px 16px color-mix(in srgb, var(--color-primary-raw) 30%, transparent);--elevation-2:0 8px 32px color-mix(in srgb, var(--color-primary-raw) 50%, transparent);--elevation-3:0 12px 40px color-mix(in srgb, var(--color-primary-raw) 60%, transparent)}*{box-sizing:border-box;margin:0;padding:0}html{background-color:var(--color-background-base);font-size:13px}body{font-family:var(--font-family);background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary-raw) 6%, var(--color-background-base)), var(--color-background-base));color:var(--color-text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior-y:none;background-attachment:fixed;line-height:1.5}[data-color-mode=duo] body{background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary-raw) 3%, var(--color-background-base)), color-mix(in srgb, var(--color-primary-2-raw) 3%, var(--color-background-base)));background-attachment:fixed}[data-color-mode=trio] body{background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary-raw) 3%, var(--color-background-base)), color-mix(in srgb, var(--color-primary-2-raw) 3%, var(--color-background-base)), color-mix(in srgb, var(--color-primary-3-raw) 3%, var(--color-background-base)));background-attachment:fixed}h1,h2,h3,h4,h5,h6{color:var(--color-text-main);margin-bottom:var(--spacing-4);font-weight:700}a{color:var(--color-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-primary-hover)}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--border-radius-xl);padding:var(--spacing-6);transition:all .3s cubic-bezier(.25,.8,.25,1);position:relative;overflow:hidden}.glass-panel:before{content:"";pointer-events:none;opacity:0;background:linear-gradient(135deg,#ffffff1a 0%,#fff0 100%);transition:opacity .3s;position:absolute;inset:0}.glass-panel:hover:before{opacity:1}[data-color-mode=duo] .glass-panel{background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary-raw) 4%, var(--glass-bg-base)), color-mix(in srgb, var(--color-primary-2-raw) 4%, var(--glass-bg-base)))}[data-color-mode=trio] .glass-panel{background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary-raw) 4%, var(--glass-bg-base)), color-mix(in srgb, var(--color-primary-2-raw) 4%, var(--glass-bg-base)), color-mix(in srgb, var(--color-primary-3-raw) 4%, var(--glass-bg-base)))}.btn{font-size:var(--font-size-lg);border-radius:var(--border-radius-pill);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:.5rem;padding:.8rem 1.5rem;font-weight:700;display:inline-flex}.page-header{justify-content:space-between;align-items:center;gap:var(--spacing-4);margin-bottom:var(--spacing-6);z-index:50;height:84px;padding-left:max(var(--spacing-8), calc(50% - 600px + var(--spacing-8)));padding-right:max(var(--spacing-8), calc(50% - 600px + var(--spacing-8)));margin-left:calc(-1 * var(--spacing-8));margin-right:calc(-1 * var(--spacing-8));border-bottom:1px solid var(--color-border);flex-wrap:wrap;margin-top:0;display:flex;position:sticky;top:0;background-color:var(--color-surface)!important}.btn-primary{background:var(--color-primary);color:var(--color-on-primary,#111);box-shadow:var(--shadow-glow)}[data-theme=dark] .btn-primary{color:var(--color-on-primary,#fff)}[data-color-mode=duo] .btn-primary{background:linear-gradient(135deg, var(--color-primary), var(--color-primary-2))}[data-color-mode=trio] .btn-primary{background:linear-gradient(135deg, var(--color-primary), var(--color-primary-2), var(--color-primary-3))}.btn-primary:hover{box-shadow:var(--shadow-glow-hover);filter:brightness(1.15);transform:translateY(-2px)scale(1.02)}[data-color-mode=mono] .btn-primary:hover{background:var(--color-primary-hover);filter:brightness(1.1)}.btn-secondary{background-color:var(--color-primary-light);color:var(--color-primary);border:none}.btn-secondary:hover{filter:brightness(.95);transform:scale(1.02)}.input-field{width:100%;font-size:var(--font-size-lg);border:2px solid var(--color-border);border-radius:var(--border-radius-pill);background-color:var(--color-surface);color:var(--color-text-main);transition:all var(--transition-fast);padding:1rem 1.25rem}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light), var(--shadow-glow);outline:none}.form-group{margin-bottom:var(--spacing-4)}.form-label{font-size:var(--font-size-sm);margin-bottom:var(--spacing-2);color:var(--color-text-main);font-weight:500;display:block}.responsive-grid{gap:var(--spacing-4);grid-template-columns:1fr 1fr;display:grid}.grid-auto-fit{gap:var(--spacing-4);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));display:grid}.dashboard-stats-grid{gap:var(--spacing-4);grid-template-columns:repeat(4,1fr);display:grid}.dashboard-lists-grid{gap:var(--spacing-4);grid-template-columns:repeat(auto-fit,minmax(400px,1fr));display:grid}.dashboard-list-scroll-area{max-height:350px;padding-right:var(--spacing-2);overflow-y:auto}.app-container{height:100vh;display:flex;overflow:hidden}.sidebar{border-right:1px solid var(--color-border);background-color:var(--color-surface);z-index:100;border-radius:0;flex-direction:column;flex-shrink:0;width:210px;display:flex}.logo-container{height:84px;padding:0 var(--spacing-3);border-bottom:1px solid var(--color-border);flex-direction:column;flex-shrink:0;justify-content:center;display:flex}.logo-container h2{color:var(--color-primary);text-align:center;-webkit-line-clamp:2;text-overflow:ellipsis;-webkit-box-orient:vertical;margin:0;font-size:1.5rem;line-height:1.15;display:-webkit-box;overflow:hidden}.nav-menu{padding:var(--spacing-4) 0;gap:var(--spacing-2);flex-direction:column;flex-grow:1;display:flex}.nav-link{padding:var(--spacing-3) calc(var(--spacing-6) - var(--spacing-2));margin:0 var(--spacing-2);border-radius:var(--border-radius-md);color:var(--color-text-muted);transition:all var(--transition-fast);align-items:center;gap:var(--spacing-2);border-left:3px solid #0000;font-weight:500;display:flex}.nav-link:hover,.nav-link.active{box-shadow:var(--shadow-glow);color:#fff!important;background-color:var(--color-primary)!important;border-left-color:#0000!important}[data-theme=light] .nav-link:hover,[data-theme=light] .nav-link.active{color:#111!important}.main-content{padding:0 var(--spacing-8);flex-grow:1;height:100vh;padding-bottom:100px;overflow-y:auto}.page-container{width:100%}.page-container>:not(.page-header,.modal-overlay){max-width:1200px;margin-left:auto;margin-right:auto}.mobile-header,.mobile-overlay{display:none}.page-header .input-field{width:auto;max-width:250px}@media (width<=768px){.app-container{flex-direction:column}.mobile-header{padding:var(--spacing-4);background-color:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:999;justify-content:space-between;align-items:center;width:100%;height:60px;display:flex;position:fixed;top:0;left:0;box-shadow:0 2px 10px #0000000d}.mobile-overlay{z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#00000080;width:100vw;height:100vh;display:block;position:fixed;top:0;left:0}.sidebar{z-index:1001;background-color:var(--color-surface);width:250px;height:100vh;transition:transform .3s ease-in-out;position:fixed;top:0;left:-250px;box-shadow:4px 0 15px #0000001a}.sidebar.mobile-open{transform:translate(250px)}.logo-container,.user-info{display:flex!important}.user-info{flex-direction:column}.nav-menu,.sidebar-nav{padding:var(--spacing-4) 0;flex-direction:column;flex:1;width:100%;height:auto;display:flex;overflow:hidden auto}.nav-link{padding:var(--spacing-3) calc(var(--spacing-6) - var(--spacing-2));margin:0 var(--spacing-2);border-radius:var(--border-radius-md);font-size:var(--font-size-base);min-width:auto;height:auto;color:var(--color-text-muted);text-align:left;white-space:normal;box-sizing:border-box;justify-content:flex-start;align-items:center;gap:var(--spacing-3);border-top:none;border-left:3px solid #0000;flex-direction:row;display:flex}.nav-link svg{flex-shrink:0;margin:0;display:block;width:20px!important;height:20px!important}.nav-link span{font-weight:500;line-height:1.5;display:block}.nav-link:hover,.nav-link.active{box-shadow:var(--shadow-glow);background-color:var(--color-primary)!important;color:#fff!important;border-top-color:#0000!important;border-left-color:#0000!important}[data-theme=light] .nav-link:hover,[data-theme=light] .nav-link.active{color:#111!important}.main-content{padding:var(--spacing-3);padding-top:60px;padding-bottom:var(--spacing-6);max-width:100vw;overflow-x:hidden}.page-header{align-items:flex-start;gap:var(--spacing-3);height:auto;margin-left:calc(-1 * var(--spacing-3));margin-right:calc(-1 * var(--spacing-3));padding-left:var(--spacing-3);padding-right:var(--spacing-3);padding-top:var(--spacing-4);padding-bottom:var(--spacing-4);border-bottom:none;flex-direction:column;background-color:var(--color-surface)!important}.page-header>div{flex-wrap:wrap;width:100%}.page-header .input-field{min-width:0!important;max-width:100%!important}.modal-content{margin:0 auto;max-width:95vw!important}.glass-panel{padding:var(--spacing-4)}.responsive-grid,.grid-auto-fit,.dashboard-stats-grid,.dashboard-lists-grid{grid-template-columns:1fr}.form-row{flex-direction:column}.form-group.half-width{width:100%}.help-floating-btn{width:48px!important;height:48px!important;bottom:1rem!important;right:1rem!important}.help-floating-btn svg{width:24px!important;height:24px!important}}.table-responsive{-webkit-overflow-scrolling:touch;width:100%;overflow-x:auto}@media (width<=768px){table{font-size:.85rem}th,td{padding:var(--spacing-2) var(--spacing-1)!important}td .btn{width:100%;margin-bottom:.2rem;padding:.4rem;font-size:.75rem}td div{flex-direction:column;gap:.2rem}}.login-container{background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative}[data-theme=dark] .login-container{background:linear-gradient(135deg,#2b5876 0%,#4e4376 100%)}.login-panel{z-index:1;width:100%;max-width:400px;padding:var(--spacing-8);position:relative}.login-panel .form-label{color:var(--color-text-main);font-weight:600}.login-panel .input-field{-webkit-backdrop-filter:blur(10px);color:var(--color-text-main);background:#fff6;border:1px solid #fff9;font-weight:500}[data-theme=dark] .login-panel .input-field{color:var(--color-text-main);background:#0000004d;border:1px solid #ffffff1a}.login-panel .input-field:focus{border-color:var(--color-primary);background:#fff9}[data-theme=dark] .login-panel .input-field:focus{background:#00000080}.alert-error{color:var(--color-danger);padding:var(--spacing-3);border-radius:var(--border-radius-md);margin-bottom:var(--spacing-4);font-size:var(--font-size-sm);background-color:#ef44441a;border:1px solid #ef444433}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.page-container>div{animation:.4s ease-out forwards fadeIn}.glass-panel{transition:transform .4s cubic-bezier(.175,.885,.32,1.275),box-shadow .4s,border-color .4s}.glass-panel:hover{box-shadow:0 20px 40px #0000001f, 0 0 20px color-mix(in srgb, var(--color-primary-raw) 20%, transparent);border-color:var(--color-primary-light)}button{position:relative;overflow:hidden}button:after{content:"";opacity:0;transform-origin:50%;background:#ffffff80;border-radius:100%;width:5px;height:5px;position:absolute;top:50%;left:50%;transform:scale(1)translate(-50%)}@keyframes ripple{0%{opacity:.5;transform:scale(0)}to{opacity:0;transform:scale(20)}}button:focus:not(:active):after{animation:1s ease-out ripple}tr{transition:background-color .2s}tr:hover{background-color:#6366f108}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;padding:var(--spacing-4);background-color:#0f172a99;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background-color:var(--color-surface);border-radius:var(--border-radius-xl);max-height:90vh;overflow-y:auto}.modal-wide{width:100%;max-width:900px}.split-layout{gap:var(--spacing-6);grid-template-columns:1.5fr 1fr;display:grid}.split-column{gap:var(--spacing-3);flex-direction:column;display:flex}.form-row{gap:var(--spacing-3);display:flex}.half-width,.third-width{flex:1}@media (width<=768px){.split-layout{grid-template-columns:1fr}}.slide-in{animation:.4s cubic-bezier(.16,1,.3,1) forwards slideInUp}@keyframes slideInUp{0%{opacity:0;transform:translateY(40px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.fade-in{animation:.3s ease-out forwards fadeIn}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}*{scrollbar-width:thin;scrollbar-color:var(--color-border) transparent}.theme-switching,.theme-switching *,.theme-switching :before,.theme-switching :after{transition:none!important}.help-floating-btn{width:64px;height:64px;box-shadow:var(--elevation-3);z-index:1000;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex;position:fixed;bottom:2rem;right:2rem}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}
