*{margin: 0;padding: 0;box-sizing: border-box} html{font-size: 16px;line-height: 1.5;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale} body{font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;background-color: #f5f7fa;color: #1a202c;min-height: 100vh} .app-container{display: flex;flex-direction: column;min-height: 100vh} h1,h2,h3,h4,h5,h6{font-weight: 600;line-height: 1.25;margin-bottom: 0.5em} h1{font-size: 2.25rem} h2{font-size: 1.875rem} h3{font-size: 1.5rem} h4{font-size: 1.25rem} h5{font-size: 1.125rem} h6{font-size: 1rem} p{margin-bottom: 1em;line-height: 1.6} a{color: #4285f4;text-decoration: none;transition: color 0.2s ease} a:hover{color: #3367d6;text-decoration: underline} .btn{display: inline-flex;align-items: center;justify-content: center;padding: 0.75rem 1.5rem;border: none;border-radius: 8px;font-size: 0.875rem;font-weight: 500;text-decoration: none;cursor: pointer;transition: all 0.2s ease;white-space: nowrap;user-select: none} .btn:disabled{opacity: 0.6;cursor: not-allowed} .btn-primary{background-color: #4285f4;color: white} .btn-primary:hover:not(:disabled){background-color: #3367d6;transform: translateY(-1px);box-shadow: 0 4px 8px rgba(66,133,244,0.3)} .btn-secondary{background-color: #34a853;color: white} .btn-secondary:hover:not(:disabled){background-color: #2d8e47;transform: translateY(-1px);box-shadow: 0 4px 8px rgba(52,168,83,0.3)} .btn-outline{background-color: transparent;color: #4285f4;border: 2px solid #4285f4} .btn-outline:hover:not(:disabled){background-color: #4285f4;color: white} .btn-danger{background-color: #ea4335;color: white} .btn-danger:hover:not(:disabled){background-color: #d23b2f;transform: translateY(-1px);box-shadow: 0 4px 8px rgba(234,67,53,0.3)} .btn-small{padding: 0.5rem 1rem;font-size: 0.75rem} .btn-large{padding: 1rem 2rem;font-size: 1rem} .form-group{margin-bottom: 1.5rem} .form-label{display: block;margin-bottom: 0.5rem;font-weight: 500;color: #374151} .form-input,.form-select,.form-textarea{width: 100%;padding: 0.75rem;border: 2px solid #e5e7eb;border-radius: 8px;font-size: 0.875rem;transition: border-color 0.2s ease,box-shadow 0.2s ease;background-color: white} .form-input:focus,.form-select:focus,.form-textarea:focus{outline: none;border-color: #4285f4;box-shadow: 0 0 0 3px rgba(66,133,244,0.1)} .form-input:invalid,.form-select:invalid,.form-textarea:invalid{border-color: #ea4335} .form-error{color: #ea4335;font-size: 0.75rem;margin-top: 0.25rem} .form-help{color: #6b7280;font-size: 0.75rem;margin-top: 0.25rem} .card{background: white;border-radius: 12px;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);overflow: hidden;transition: box-shadow 0.2s ease,transform 0.2s ease} .card:hover{box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);transform: translateY(-2px)} .card-header{padding: 1.5rem;border-bottom: 1px solid #f3f4f6} .card-body{padding: 1.5rem} .card-footer{padding: 1.5rem;border-top: 1px solid #f3f4f6;background-color: #f9fafb} .modal-overlay{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.5);display: flex;align-items: center;justify-content: center;z-index: 1000;opacity: 0;visibility: hidden;transition: opacity 0.3s ease,visibility 0.3s ease} .modal-overlay.active{opacity: 1;visibility: visible} .modal{background: white;border-radius: 12px;max-width: 500px;width: 90%;max-height: 90vh;overflow-y: auto;box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);transform: scale(0.95) translateY(-10px);transition: transform 0.3s ease} .modal-overlay.active .modal{transform: scale(1) translateY(0)} .modal-header{padding: 1.5rem;border-bottom: 1px solid #f3f4f6;display: flex;align-items: center;justify-content: space-between} .modal-title{font-size: 1.25rem;font-weight: 600;margin: 0} .modal-close{background: none;border: none;font-size: 1.5rem;cursor: pointer;color: #6b7280;padding: 0} .modal-close:hover{color: #374151} .modal-body{padding: 1.5rem} .modal-footer{padding: 1.5rem;border-top: 1px solid #f3f4f6;display: flex;gap: 1rem;justify-content: flex-end} .notification-container{position: fixed;top: 1rem;right: 1rem;z-index: 1100;max-width: 400px} .notification{background: white;border-radius: 8px;padding: 1rem;margin-bottom: 0.5rem;box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);border-left: 4px solid #4285f4;animation: slideIn 0.3s ease} .notification.success{border-left-color: #34a853} .notification.error{border-left-color: #ea4335} .notification.warning{border-left-color: #fbbc05} @keyframes slideIn{from{transform: translateX(100%);opacity: 0} to{transform: translateX(0);opacity: 1} } .loading-spinner{width: 40px;height: 40px;border: 4px solid #f3f3f3;border-top: 4px solid #4285f4;border-radius: 50%;animation: spin 1s linear infinite} @keyframes spin{0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } .page-loading{display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: 400px;gap: 1rem} .page-error{text-align: center;padding: 2rem} .page-error h2{color: #ea4335;margin-bottom: 1rem} .retry-button{margin-top: 1rem} .container{max-width: 1200px;margin: 0 auto;padding: 0 1rem} .text-center{text-align: center} .text-left{text-align: left} .text-right{text-align: right} .mt-1{margin-top: 0.25rem} .mt-2{margin-top: 0.5rem} .mt-3{margin-top: 0.75rem} .mt-4{margin-top: 1rem} .mt-5{margin-top: 1.25rem} .mt-6{margin-top: 1.5rem} .mb-1{margin-bottom: 0.25rem} .mb-2{margin-bottom: 0.5rem} .mb-3{margin-bottom: 0.75rem} .mb-4{margin-bottom: 1rem} .mb-5{margin-bottom: 1.25rem} .mb-6{margin-bottom: 1.5rem} .p-1{padding: 0.25rem} .p-2{padding: 0.5rem} .p-3{padding: 0.75rem} .p-4{padding: 1rem} .p-5{padding: 1.25rem} .p-6{padding: 1.5rem} .flex{display: flex} .flex-col{flex-direction: column} .flex-wrap{flex-wrap: wrap} .items-center{align-items: center} .items-start{align-items: flex-start} .items-end{align-items: flex-end} .justify-center{justify-content: center} .justify-between{justify-content: space-between} .justify-end{justify-content: flex-end} .gap-1{gap: 0.25rem} .gap-2{gap: 0.5rem} .gap-3{gap: 0.75rem} .gap-4{gap: 1rem} .gap-5{gap: 1.25rem} .gap-6{gap: 1.5rem} .hidden{display: none} .block{display: block} .inline{display: inline} .inline-block{display: inline-block} .w-full{width: 100%} .h-full{height: 100%} .rounded{border-radius: 0.25rem} .rounded-md{border-radius: 0.375rem} .rounded-lg{border-radius: 0.5rem} .rounded-xl{border-radius: 0.75rem} .shadow{box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1)} .shadow-md{box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1)} .shadow-lg{box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1)} @media (max-width: 768px){.container{padding: 0 0.5rem} .modal{width: 95%} .notification-container{left: 1rem;right: 1rem;max-width: none} h1{font-size: 1.875rem} h2{font-size: 1.5rem} h3{font-size: 1.25rem} } @media (max-width: 480px){.btn{padding: 0.625rem 1.25rem;font-size: 0.75rem} .card-header,.card-body,.card-footer{padding: 1rem} .modal-header,.modal-body,.modal-footer{padding: 1rem} } .main-navigation{background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);box-shadow: 0 2px 10px rgba(0,0,0,0.1);position: sticky;top: 0;z-index: 1000;border-bottom: 1px solid rgba(255,255,255,0.1)} .nav-container{max-width: 1200px;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;padding: 0 1rem;height: 60px} .nav-brand .brand-link{text-decoration: none;color: white;font-weight: 700;font-size: 1.5rem;display: flex;align-items: center;transition: opacity 0.2s ease} .nav-brand .brand-link:hover{opacity: 0.9} .nav-menu{display: flex;align-items: center;gap: 1rem} .nav-dropdown{position: relative} .nav-dropdown-btn{background: none;border: none;color: white;padding: 0.75rem 1rem;border-radius: 6px;cursor: pointer;font-size: 0.95rem;font-weight: 500;display: flex;align-items: center;gap: 0.5rem;transition: all 0.2s ease;white-space: nowrap} .nav-dropdown-btn:hover{background: rgba(255,255,255,0.1);transform: translateY(-1px)} .dropdown-arrow{font-size: 0.8rem;transition: transform 0.2s ease} .nav-dropdown:hover .dropdown-arrow{transform: rotate(180deg)} .nav-dropdown-content{position: absolute;top: 100%;left: 0;background: white;border-radius: 8px;box-shadow: 0 10px 25px rgba(0,0,0,0.15);padding: 1rem;min-width: 280px;opacity: 0;visibility: hidden;transform: translateY(-10px);transition: all 0.3s ease;display: flex;gap: 1.5rem;z-index: 1001} .nav-dropdown:hover .nav-dropdown-content{opacity: 1;visibility: visible;transform: translateY(0)} .dropdown-section{flex: 1} .dropdown-section h4{color: #4a5568;font-size: 0.85rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;margin-bottom: 0.75rem;padding-bottom: 0.5rem;border-bottom: 2px solid #e2e8f0} .dropdown-section a{display: block;color: #2d3748;text-decoration: none;padding: 0.5rem 0;font-size: 0.9rem;font-weight: 500;transition: all 0.2s ease;border-radius: 4px;padding-left: 0.5rem;margin-left: -0.5rem} .dropdown-section a:hover{color: #667eea;background: #f7fafc;transform: translateX(4px)} .nav-link{color: white;text-decoration: none;padding: 0.75rem 1rem;border-radius: 6px;font-weight: 500;font-size: 0.95rem;transition: all 0.2s ease;white-space: nowrap} .nav-link:hover{background: rgba(255,255,255,0.1);transform: translateY(-1px)} @media (max-width: 768px){.nav-container{padding: 0 0.75rem;height: 50px} .nav-brand .brand-link{font-size: 1.25rem} .nav-menu{gap: 0.5rem} .nav-dropdown-btn,.nav-link{padding: 0.5rem 0.75rem;font-size: 0.85rem} .nav-dropdown-content{left: -50px;min-width: 250px;flex-direction: column;gap: 1rem} .dropdown-section{flex: none} } @media (max-width: 640px){.nav-menu{gap: 0.25rem} .nav-dropdown-btn,.nav-link{padding: 0.4rem 0.6rem;font-size: 0.8rem} .nav-dropdown-content{left: -75px;min-width: 220px;padding: 0.75rem} }