@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap");.layout-container,.modal-overlay{--background:#f8fafc;--foreground:#0f172a;--primary:#8b5cf6;--primary-glow:rgba(139,92,246,.15);--secondary:#fff;--secondary-bg:#f1f5f9;--accent:#d946ef;--muted:#64748b;--border:rgba(15,23,42,.08);--glass:hsla(0,0%,100%,.7);--glass-border:rgba(15,23,42,.06);--card-bg:#fff;--sidebar-bg:#fff;--sidebar-text:#475569;--sidebar-active-bg:rgba(139,92,246,.08);--sidebar-active-text:#8b5cf6;--sidebar-border:rgba(15,23,42,.08);--input-bg:#fff;--input-text:#0f172a;--success:#10b981;--warning:#f59e0b;--error:#ef4444;font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased;color:var(--foreground);background:var(--background);box-sizing:border-box}.dark .layout-container,.dark .modal-overlay,:global(.dark) .layout-container,:global(.dark) .modal-overlay{--background:#0a0a0c;--foreground:#f0f0f2;--primary-glow:rgba(139,92,246,.3);--secondary:#1e1e22;--secondary-bg:#151518;--muted:#6b7280;--border:hsla(0,0%,100%,.1);--glass:hsla(0,0%,100%,.03);--glass-border:hsla(0,0%,100%,.05);--card-bg:rgba(15,15,18,.8);--sidebar-bg:#0f0f12;--sidebar-text:#94a3b8;--sidebar-active-bg:rgba(139,92,246,.1);--sidebar-active-text:#fff;--sidebar-border:hsla(0,0%,100%,.1);--input-bg:hsla(0,0%,100%,.05);--input-text:#f0f0f2}.layout-container *,.modal-overlay *{box-sizing:border-box;padding:0;margin:0}.layout-container h1,.layout-container h2,.layout-container h3,.layout-container h4,.layout-container h5,.layout-container h6,.modal-overlay h1,.modal-overlay h2,.modal-overlay h3,.modal-overlay h4,.modal-overlay h5,.modal-overlay h6{font-family:Outfit,sans-serif;font-weight:600;letter-spacing:-.02em}.layout-container a,.modal-overlay a{color:inherit;text-decoration:none}.layout-container .glass-panel,.modal-overlay .glass-panel{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:16px}.layout-container .form-group,.modal-overlay .form-group{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.layout-container .form-group label,.modal-overlay .form-group label{font-size:.875rem;font-weight:500;color:var(--muted);padding-left:.25rem}.layout-container .input-field,.modal-overlay .input-field{width:100%;padding:.875rem 1rem;background:var(--input-bg);border:1px solid var(--border);border-radius:12px;color:var(--input-text);font-size:1rem;font-family:inherit;transition:all .2s ease;outline:none}.layout-container .input-field:focus,.modal-overlay .input-field:focus{border-color:var(--primary);background:hsla(0,0%,100%,.08);box-shadow:0 0 0 4px rgba(139,92,246,.1)}.layout-container .input-field::-moz-placeholder,.modal-overlay .input-field::-moz-placeholder{color:hsla(0,0%,100%,.2)}.layout-container .input-field::placeholder,.modal-overlay .input-field::placeholder{color:hsla(0,0%,100%,.2)}.layout-container textarea.input-field,.modal-overlay textarea.input-field{min-height:120px;line-height:1.5}.layout-container select.input-field,.modal-overlay select.input-field{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:1.25rem;padding-right:3rem}.layout-container .card,.modal-overlay .card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:1.5rem;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease}.layout-container .card:hover,.modal-overlay .card:hover{transform:translateY(-4px);box-shadow:0 12px 24px -8px rgba(0,0,0,.5);border-color:rgba(139,92,246,.2)}.layout-container .btn,.modal-overlay .btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border-radius:8px;font-weight:500;transition:all .2s ease;cursor:pointer;border:none;font-family:Inter,sans-serif}.layout-container .btn-primary,.modal-overlay .btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 4px 12px var(--primary-glow)}.layout-container .btn-primary:hover,.modal-overlay .btn-primary:hover{opacity:.9;transform:scale(1.02)}.layout-container .btn-secondary,.modal-overlay .btn-secondary{background:hsla(0,0%,100%,.05);color:var(--foreground);border:1px solid var(--border);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.layout-container .btn-secondary:hover,.modal-overlay .btn-secondary:hover{background:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.2)}.layout-container .error-banner,.modal-overlay .error-banner{background:rgba(239,68,68,.1);border:1px solid var(--error);color:var(--error);padding:1rem;border-radius:12px;margin-bottom:2rem;display:flex;align-items:center;gap:.75rem;font-size:.875rem}.layout-container .mobile-header{display:none;position:fixed;top:0;left:0;right:0;height:70px;background:rgba(10,10,12,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 1.5rem;align-items:center;justify-content:space-between;z-index:100}.layout-container .menu-toggle{background:var(--secondary);border:1px solid var(--border);color:var(--foreground);cursor:pointer;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.layout-container .sidebar{width:280px;height:100vh;background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;position:sticky;top:0;z-index:110;transition:transform .4s cubic-bezier(.4,0,.2,1)}.layout-container .sidebar-inner{display:flex;flex-direction:column;height:100%;padding:2.5rem 1.25rem}.layout-container .sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:3.5rem}.layout-container .logo{display:flex;align-items:center;gap:.875rem;font-size:1.5rem;font-weight:700;font-family:Outfit,sans-serif;color:#fff}.layout-container .logo-icon{color:var(--primary);filter:drop-shadow(0 0 8px var(--primary-glow))}.layout-container .close-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:.5rem}.layout-container .nav{flex:1;display:flex;flex-direction:column;gap:.625rem}.layout-container .nav-item{display:flex;align-items:center;gap:1.25rem;padding:.875rem 1.25rem;border-radius:16px;color:var(--sidebar-text);transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;text-decoration:none;font-weight:500;font-size:.9375rem;border:1px solid transparent}.layout-container .nav-item:hover{color:var(--sidebar-active-text);background:var(--sidebar-active-bg);transform:translateX(8px);border-color:rgba(139,92,246,.1)}.layout-container .nav-item.active{color:var(--sidebar-active-text);background:var(--sidebar-active-bg);border-color:rgba(139,92,246,.2);box-shadow:0 4px 20px -5px var(--primary-glow)}.layout-container .nav-icon{transition:all .4s cubic-bezier(.175,.885,.32,1.275);color:#64748b}.layout-container .nav-item:hover .nav-icon{transform:scale(1.2) rotate(-5deg);color:var(--primary)}.layout-container .nav-item.active .nav-icon{color:var(--primary);filter:drop-shadow(0 0 8px var(--primary-glow))}.layout-container .active-indicator{position:absolute;left:-4px;width:6px;height:6px;background:var(--primary);border-radius:50%;box-shadow:0 0 15px var(--primary),0 0 5px var(--primary)}.layout-container .sidebar-footer{margin-top:auto;border-top:1px solid var(--border);padding-top:1.5rem;display:flex;flex-direction:column;gap:.5rem}.layout-container .logout-btn{width:100%;background:transparent!important;border:none!important;cursor:pointer;font-family:inherit}.layout-container .logout-btn:hover{color:var(--error)!important;background:rgba(239,68,68,.08)!important;transform:translateX(0)!important}.layout-container .mobile-only{display:none}.layout-container{display:flex;min-height:100vh}.layout-container .main-content{flex:1;padding:2rem;width:100%}@media (max-width:768px){.layout-container{flex-direction:column}.layout-container .main-content{padding-top:6rem;padding-left:1rem;padding-right:1rem}.layout-container .mobile-header,.layout-container .mobile-only{display:flex}.layout-container .sidebar{position:fixed;left:0;top:0;bottom:0;background:rgba(15,15,18,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transform:translateX(-100%);width:85%;max-width:320px;box-shadow:20px 0 80px rgba(0,0,0,.8)}.layout-container .sidebar.open{transform:translateX(0)}.layout-container .sidebar-inner{padding:2rem 1.5rem}}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-overlay .task-modal{background:var(--secondary);width:100%;max-width:768px;max-height:90vh;border-radius:16px;border:1px solid var(--border);box-shadow:0 20px 40px rgba(0,0,0,.4);overflow-y:auto;position:relative}.modal-overlay .modal-header{padding:1.5rem 2rem;display:flex;align-items:flex-start;gap:1rem;position:sticky;top:0;background:var(--secondary);z-index:10}.modal-overlay .modal-body{padding:0 2rem 2rem;display:grid;grid-template-columns:1fr 180px;gap:2rem}.modal-overlay .modal-sidebar{display:flex;flex-direction:column;gap:1.5rem}.modal-overlay .sidebar-btn{width:100%;padding:.5rem .75rem;background:hsla(0,0%,100%,.05);border:none;border-radius:6px;color:#f0f0f2;display:flex;align-items:center;gap:.75rem;font-size:.875rem;margin-bottom:.5rem;cursor:pointer;transition:all .2s;font-weight:500}.modal-overlay .sidebar-btn:hover{background:hsla(0,0%,100%,.1)}.modal-overlay .section-icon{color:var(--muted);flex-shrink:0}.modal-overlay .subtask-item{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:8px;transition:all .2s}.modal-overlay .subtask-item:hover{background:hsla(0,0%,100%,.03)}.modal-overlay .subtask-item input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--primary)}.modal-overlay .subtask-item span.completed{color:var(--muted);text-decoration:line-through}.modal-overlay .spinner{width:40px;height:40px;border:3px solid rgba(139,92,246,.1);border-top:3px solid var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}@keyframes spin{to{transform:rotate(1turn)}}.layout-container .page-container{animation:fadeIn .5s ease-out forwards}.layout-container .page-container.narrow{width:100%}.layout-container .subtitle{color:var(--muted);margin-top:.5rem;font-size:1rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.role-badge{font-weight:600;letter-spacing:.05em;text-transform:uppercase}.role-badge-admin{background:rgba(16,185,129,.15)!important;color:var(--success)!important}.role-badge-client{background:rgba(139,92,246,.15)!important;color:var(--primary)!important}.role-badge-referrer{background:rgba(245,158,11,.15)!important;color:var(--warning)!important}