* { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: Arial, sans-serif; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .login-container {
            background: white;
            padding: 3rem;
            border-radius: 10px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 400px;
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .login-logo {
            font-size: 2rem;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }
        
        .login-subtitle {
            color: #666;
            font-size: 1rem;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #e0e0e0;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .btn {
            width: 100%;
            background: #667eea;
            color: white;
            padding: 0.75rem;
            border: none;
            border-radius: 5px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .btn:hover {
            background: #5a6fd8;
        }
        
        .alert {
            padding: 1rem;
            border-radius: 5px;
            margin-bottom: 1.5rem;
            background: #fee;
            border: 1px solid #fcc;
            color: #c00;
        }
        
        .back-link {
            text-align: center;
            margin-top: 1.5rem;
        }
        
        .back-link a {
            color: #667eea;
            text-decoration: none;
            font-size: 0.9rem;
        }
        
        .back-link a:hover {
            text-decoration: underline;
        }
        
        .security-note {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 5px;
            padding: 1rem;
            margin-top: 1.5rem;
            font-size: 0.9rem;
            color: #666;
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; }
        .container { max-width: 800px; margin: 0 auto; padding: 0 20px; }
        
        header { background: #2c3e50; color: white; padding: 1rem 0; }
        .header-content { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.8rem; font-weight: bold; }
        .nav { display: flex; gap: 20px; }
        .nav a { color: white; text-decoration: none; padding: 5px 10px; border-radius: 3px; }
        .nav a:hover { background: rgba(255,255,255,0.1); }
        
        .quote-header { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); color: white; padding: 3rem 0; text-align: center; }
        .quote-header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
        .quote-header p { font-size: 1.2rem; opacity: 0.9; }
        
        .quote-card { background: white; margin: -2rem auto 2rem; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; }
        
        .order-summary { padding: 2rem; border-bottom: 1px solid #e9ecef; }
        .summary-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }
        .order-details h3 { color: #2c3e50; margin-bottom: 1rem; }
        .detail-item { margin-bottom: 1rem; }
        .detail-label { font-weight: bold; color: #495057; margin-bottom: 0.25rem; }
        .detail-value { color: #666; }
        
        .price-breakdown { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; }
        .price-breakdown h3 { color: #2c3e50; margin-bottom: 1rem; text-align: center; }
        .price-item { display: flex; justify-content: space-between; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e9ecef; }
        .price-item:last-child { border-bottom: 2px solid #28a745; font-weight: bold; font-size: 1.1rem; }
        .price-label { }
        .price-amount { font-weight: bold; }
        .total-price { color: #28a745; }
        
        .project-description { padding: 2rem; border-bottom: 1px solid #e9ecef; }
        .project-description h3 { color: #2c3e50; margin-bottom: 1rem; }
        .description-text { background: #f8f9fa; padding: 1.5rem; border-left: 4px solid #007bff; border-radius: 4px; white-space: pre-line; }
        
        .service-features { padding: 2rem; border-bottom: 1px solid #e9ecef; }
        .service-features h3 { color: #2c3e50; margin-bottom: 1rem; }
        .features-list { list-style: none; }
        .features-list li { padding: 0.5rem 0; color: #666; }
        .features-list li:before { content: "✓ "; color: #28a745; font-weight: bold; margin-right: 0.5rem; }
        
        .approval-section { padding: 2rem; }
        .approval-buttons { display: flex; gap: 1rem; margin-bottom: 2rem; }
        .btn { padding: 0.75rem 2rem; border: none; border-radius: 5px; font-size: 1.1rem; cursor: pointer; text-decoration: none; display: inline-block; text-align: center; }
        .btn-success { background: #28a745; color: white; }
        .btn-warning { background: #ffc107; color: #212529; }
        .btn-secondary { background: #6c757d; color: white; }
        .btn:hover { opacity: 0.9; transform: translateY(-1px); }
        .btn:disabled { opacity: 0.6; cursor: not-allowed; }
        
        .change-request { display: none; background: #fff3cd; border: 1px solid #ffeaa7; padding: 1.5rem; border-radius: 8px; margin-top: 1rem; }
        .change-request.active { display: block; }
        .form-group { margin-bottom: 1rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #2c3e50; }
        .form-control { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; }
        .form-control:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1); }
        textarea.form-control { height: 120px; resize: vertical; }
        
        .alert { padding: 1rem; border-radius: 4px; margin-bottom: 1.5rem; }
        .alert-error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
        .alert-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
        .alert-info { background: #e7f3ff; border: 1px solid #b8daff; color: #004085; }
        
        .terms-section { background: #f8f9fa; padding: 1.5rem; margin-top: 2rem; border-radius: 8px; }
        .terms-section h4 { color: #2c3e50; margin-bottom: 1rem; }
        .terms-section ul { margin-left: 1.5rem; }
        .terms-section li { margin-bottom: 0.5rem; color: #666; }
        
        .back-link { color: #007bff; text-decoration: none; margin-bottom: 2rem; display: inline-block; }
        .back-link:hover { text-decoration: underline; }
        
        @media (max-width: 768px) {
            .summary-grid { grid-template-columns: 1fr; }
            .approval-buttons { flex-direction: column; }
            .quote-header h1 { font-size: 2rem; }
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        
        header { background: #2c3e50; color: white; padding: 1rem 0; }
        .header-content { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.8rem; font-weight: bold; }
        .nav { display: flex; gap: 20px; }
        .nav a { color: white; text-decoration: none; padding: 5px 10px; border-radius: 3px; }
        .nav a:hover { background: rgba(255,255,255,0.1); }
        
        .page-header { background: white; padding: 2rem 0; margin-bottom: 2rem; }
        .page-title { font-size: 2rem; margin-bottom: 0.5rem; color: #2c3e50; }
        .breadcrumb { color: #666; }
        .breadcrumb a { color: #007bff; text-decoration: none; }
        
        .summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
        .summary-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; }
        .summary-number { font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem; }
        .summary-label { color: #666; font-size: 0.9rem; }
        .summary-spent .summary-number { color: #28a745; }
        .summary-paid .summary-number { color: #007bff; }
        .summary-pending .summary-number { color: #ffc107; }
        
        .billing-table { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; }
        .table-header { padding: 1.5rem; border-bottom: 1px solid #e9ecef; background: #f8f9fa; display: flex; justify-content: space-between; align-items: center; }
        .table-title { font-size: 1.25rem; font-weight: bold; color: #2c3e50; }
        .export-btn { background: #6c757d; color: white; padding: 0.5rem 1rem; border: none; border-radius: 4px; text-decoration: none; font-size: 0.9rem; }
        .export-btn:hover { background: #545b62; }
        
        .table-responsive { overflow-x: auto; }
        .table { width: 100%; border-collapse: collapse; }
        .table th, .table td { padding: 1rem; text-align: left; border-bottom: 1px solid #e9ecef; }
        .table th { background: #f8f9fa; font-weight: bold; color: #2c3e50; }
        .table tbody tr:hover { background: #f8f9fa; }
        .table .text-right { text-align: right; }
        .table .text-center { text-align: center; }
        
        .order-title { font-weight: bold; margin-bottom: 0.25rem; }
        .order-meta { font-size: 0.9rem; color: #666; }
        
        .payment-list { margin-top: 0.5rem; }
        .payment-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; background: #f8f9fa; border-radius: 4px; margin-bottom: 0.25rem; font-size: 0.9rem; }
        .payment-details { }
        .payment-amount { font-weight: bold; }
        
        .badge { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: bold; }
        .badge-success { background: #d4edda; color: #155724; }
        .badge-warning { background: #fff3cd; color: #856404; }
        .badge-danger { background: #f8d7da; color: #721c24; }
        .badge-info { background: #e7f3ff; color: #004085; }
        .badge-secondary { background: #e9ecef; color: #495057; }
        
        .empty-state { text-align: center; padding: 3rem; color: #666; }
        .empty-state-icon { font-size: 4rem; margin-bottom: 1rem; opacity: 0.5; }
        
        .filters { display: flex; gap: 1rem; margin-bottom: 2rem; align-items: end; }
        .filter-group { }
        .filter-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #2c3e50; }
        .form-control, .form-select { padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; }
        .btn { padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; }
        .btn-primary { background: #007bff; color: white; }
        
        .invoice-link { color: #007bff; text-decoration: none; font-size: 0.9rem; }
        .invoice-link:hover { text-decoration: underline; }
        
        @media (max-width: 768px) {
            .summary-cards { grid-template-columns: repeat(2, 1fr); }
            .filters { flex-direction: column; }
            .table-header { flex-direction: column; gap: 1rem; align-items: start; }
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        
        header { background: #2c3e50; color: white; padding: 1rem 0; }
        .header-content { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.8rem; font-weight: bold; }
        .nav { display: flex; gap: 20px; }
        .nav a { color: white; text-decoration: none; padding: 5px 10px; border-radius: 3px; }
        .nav a:hover { background: rgba(255,255,255,0.1); }
        
        .welcome-section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem 0; }
        .welcome-content { display: flex; justify-content: space-between; align-items: center; }
        .welcome-text h1 { font-size: 2rem; margin-bottom: 0.5rem; }
        .welcome-text p { opacity: 0.9; }
        .quick-action { }
        .btn { background: rgba(255,255,255,0.2); color: white; padding: 0.75rem 1.5rem; border: 2px solid white; border-radius: 5px; text-decoration: none; font-weight: bold; transition: all 0.3s; }
        .btn:hover { background: white; color: #667eea; }
        .btn-primary { background: #007bff; border-color: #007bff; }
        .btn-success { background: #28a745; border-color: #28a745; }
        .btn-warning { background: #ffc107; border-color: #ffc107; color: #212529; }
        .btn-info { background: #17a2b8; border-color: #17a2b8; }
        .btn-sm { padding: 0.5rem 1rem; font-size: 0.9rem; }
        
        .dashboard-content { padding: 2rem 0; }
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
        .stat-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; }
        .stat-number { font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem; }
        .stat-label { color: #666; font-size: 0.9rem; }
        .stat-total .stat-number { color: #667eea; }
        .stat-active .stat-number { color: #ffc107; }
        .stat-completed .stat-number { color: #28a745; }
        .stat-spent .stat-number { color: #17a2b8; }
        
        .content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }
        .main-content { }
        .sidebar { }
        
        .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 1.5rem; }
        .card-header { padding: 1rem 1.5rem; border-bottom: 1px solid #e9ecef; font-weight: bold; background: #f8f9fa; display: flex; justify-content: space-between; align-items: center; }
        .card-body { padding: 1.5rem; }
        
        .order-item { padding: 1rem; border-bottom: 1px solid #e9ecef; transition: background 0.3s; }
        .order-item:last-child { border-bottom: none; }
        .order-item:hover { background: #f8f9fa; }
        .order-item.urgent { border-left: 4px solid #dc3545; }
        
        .order-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem; }
        .order-number { font-weight: bold; color: #2c3e50; }
        .order-date { font-size: 0.9rem; color: #666; }
        .order-title { margin-bottom: 0.5rem; color: #333; }
        .order-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
        .order-service { font-size: 0.9rem; color: #666; }
        .order-price { font-weight: bold; color: #28a745; }
        .order-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
        
        .badge { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: bold; }
        .badge-primary { background: #007bff; color: white; }
        .badge-success { background: #28a745; color: white; }
        .badge-warning { background: #ffc107; color: #212529; }
        .badge-danger { background: #dc3545; color: white; }
        .badge-info { background: #17a2b8; color: white; }
        .badge-secondary { background: #6c757d; color: white; }
        
        .empty-state { text-align: center; padding: 3rem; color: #666; }
        .empty-state-icon { font-size: 4rem; margin-bottom: 1rem; opacity: 0.5; }
        
        .profile-card { }
        .profile-info { margin-bottom: 1rem; }
        .profile-item { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
        .profile-label { font-weight: bold; color: #2c3e50; }
        .profile-value { color: #666; }
        
        .quick-links { }
        .link-item { display: block; padding: 0.75rem; border: 1px solid #e9ecef; border-radius: 4px; text-decoration: none; color: #333; margin-bottom: 0.5rem; transition: all 0.3s; }
        .link-item:hover { background: #f8f9fa; border-color: #007bff; color: #007bff; }
        .link-icon { margin-right: 0.5rem; }
        
        .alert { padding: 1rem; border-radius: 4px; margin-bottom: 1rem; }
        .alert-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
        .alert-info { background: #e7f3ff; border: 1px solid #b8daff; color: #004085; }
        
        @media (max-width: 768px) {
            .content-grid { grid-template-columns: 1fr; }
            .welcome-content { flex-direction: column; gap: 1rem; text-align: center; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .order-header, .order-meta { flex-direction: column; align-items: start; gap: 0.5rem; }
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: Arial, sans-serif; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
        }
        
        .error-container {
            background: white;
            padding: 3rem;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 500px;
            width: 90%;
        }
        
        .error-code {
            font-size: 6rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 1rem;
            line-height: 1;
        }
        
        .error-title {
            font-size: 2rem;
            color: #2c3e50;
            margin-bottom: 1rem;
        }
        
        .error-message {
            font-size: 1.1rem;
            color: #666;
            margin-bottom: 2rem;
            line-height: 1.6;
        }
        
        .error-actions {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            align-items: center;
        }
        
        .btn {
            background: #667eea;
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: 8px;
            text-decoration: none;
            font-size: 1.1rem;
            transition: all 0.3s;
            display: inline-block;
        }
        
        .btn:hover {
            background: #5a6fd8;
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background: #6c757d;
        }
        
        .btn-secondary:hover {
            background: #545b62;
        }
        
        .search-box {
            width: 100%;
            max-width: 300px;
            padding: 0.75rem;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1rem;
            margin-bottom: 1rem;
        }
        
        .search-box:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .helpful-links {
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid #e0e0e0;
        }
        
        .helpful-links h3 {
            color: #2c3e50;
            margin-bottom: 1rem;
        }
        
        .links-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 1rem;
        }
        
        .link-item {
            color: #667eea;
            text-decoration: none;
            padding: 0.5rem;
            border-radius: 5px;
            transition: background 0.3s;
        }
        
        .link-item:hover {
            background: #f8f9ff;
        }
        
        @media (max-width: 768px) {
            .error-code { font-size: 4rem; }
            .error-title { font-size: 1.5rem; }
            .error-container { padding: 2rem; }
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: Arial, sans-serif; 
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
        }
        
        .error-container {
            background: white;
            padding: 3rem;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 500px;
            width: 90%;
        }
        
        .error-code {
            font-size: 6rem;
            font-weight: bold;
            color: #dc3545;
            margin-bottom: 1rem;
            line-height: 1;
        }
        
        .error-title {
            font-size: 2rem;
            color: #2c3e50;
            margin-bottom: 1rem;
        }
        
        .error-message {
            font-size: 1.1rem;
            color: #666;
            margin-bottom: 2rem;
            line-height: 1.6;
        }
        
        .btn {
            background: #dc3545;
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: 8px;
            text-decoration: none;
            font-size: 1.1rem;
            transition: all 0.3s;
            display: inline-block;
            margin: 0.5rem;
        }
        
        .btn:hover {
            background: #c82333;
            transform: translateY(-2px);
        }
        
        .support-info {
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid #e0e0e0;
            color: #666;
        }
        
        @media (max-width: 768px) {
            .error-code { font-size: 4rem; }
            .error-title { font-size: 1.5rem; }
            .error-container { padding: 2rem; }
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: Arial, sans-serif; 
            background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
        }
        
        .error-container {
            background: white;
            padding: 3rem;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 500px;
            width: 90%;
        }
        
        .error-code {
            font-size: 6rem;
            font-weight: bold;
            color: #ffc107;
            margin-bottom: 1rem;
            line-height: 1;
        }
        
        .error-title {
            font-size: 2rem;
            color: #2c3e50;
            margin-bottom: 1rem;
        }
        
        .error-message {
            font-size: 1.1rem;
            color: #666;
            margin-bottom: 2rem;
            line-height: 1.6;
        }
        
        .btn {
            background: #ffc107;
            color: #212529;
            padding: 1rem 2rem;
            border: none;
            border-radius: 8px;
            text-decoration: none;
            font-size: 1.1rem;
            transition: all 0.3s;
            display: inline-block;
            margin: 0.5rem;
            font-weight: bold;
        }
        
        .btn:hover {
            background: #e0a800;
            transform: translateY(-2px);
        }
        
        @media (max-width: 768px) {
            .error-code { font-size: 4rem; }
            .error-title { font-size: 1.5rem; }
            .error-container { padding: 2rem; }
        }

body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; max-width: 1000px; margin: auto; }
        h1 { color: #2c3e50; }
        p { margin-bottom: 15px; }
        .cta { margin-top: 30px; padding: 15px; background-color: #f4f4f4; border-left: 5px solid #3498db; }
        .cta a { color: #3498db; text-decoration: none; font-weight: bold; }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; background: #f4f4f4; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        
        header { background: #2c3e50; color: white; padding: 1rem 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .header-content { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.8rem; font-weight: bold; }
        .nav { display: flex; gap: 20px; }
        .nav a { color: white; text-decoration: none; padding: 8px 15px; border-radius: 5px; transition: all 0.3s; }
        .nav a:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }
        
        .hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 5rem 0; text-align: center; position: relative; overflow: hidden; }
        .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="white" opacity="0.1"/></svg>') repeat; }
        .hero-content { position: relative; z-index: 2; }
        .hero h1 { font-size: 3.5rem; margin-bottom: 1rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.2); }
        .hero-subtitle { font-size: 1.4rem; margin-bottom: 1rem; opacity: 0.95; }
        .hero-description { font-size: 1.1rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; opacity: 0.9; }
        
        .trust-indicators { background: rgba(255,255,255,0.1); padding: 2rem; border-radius: 15px; margin-top: 2rem; backdrop-filter: blur(10px); }
        .trust-stats { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; }
        .trust-stat { text-align: center; }
        .trust-number { font-size: 2.2rem; font-weight: bold; display: block; margin-bottom: 0.25rem; }
        .trust-label { font-size: 0.9rem; opacity: 0.9; }
        
        .urgency-banner { background: linear-gradient(45deg, #ff6b6b, #ee5a24); color: white; padding: 1rem; text-align: center; font-weight: bold; animation: urgencyPulse 3s infinite; }
        .urgency-banner .flash { animation: flash 2s infinite; }
        @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.7; } }
        @keyframes urgencyPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
        
        .social-proof { background: white; padding: 2rem 0; text-align: center; border-bottom: 1px solid #e0e0e0; }
        .client-logos { display: flex; justify-content: center; align-items: center; gap: 2rem; flex-wrap: wrap; opacity: 0.7; }
        .client-logo { font-weight: bold; color: #666; padding: 0.5rem 1rem; border: 1px solid #e0e0e0; border-radius: 5px; }
        
        .value-props { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); padding: 4rem 0; }
        .value-props h2 { text-align: center; margin-bottom: 3rem; color: #2c3e50; font-size: 2.5rem; }
        .value-props-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
        .value-prop { padding: 2.5rem; text-align: center; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); transition: transform 0.3s; background: white; }
        .value-prop:hover { transform: translateY(-8px); }
        .value-prop-icon { font-size: 3.5rem; margin-bottom: 1.5rem; }
        .value-prop h3 { margin-bottom: 1rem; color: #2c3e50; font-size: 1.4rem; }
        .value-prop p { color: #666; line-height: 1.8; }
        
        .main-content { background: white; margin: -3rem auto 3rem; border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); overflow: hidden; max-width: 1000px; position: relative; }
        
        .service-tiers { padding: 3rem 2rem; }
        .service-tiers h2 { margin-bottom: 0.5rem; color: #2c3e50; font-size: 2.2rem; text-align: center; }
        .service-tiers .subtitle { text-align: center; color: #666; margin-bottom: 3rem; font-size: 1.1rem; }
        .tiers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-bottom: 3rem; }
        .tier-card { border: 3px solid #e0e0e0; border-radius: 15px; padding: 2.5rem; cursor: pointer; transition: all 0.4s; position: relative; overflow: hidden; background: linear-gradient(145deg, #ffffff, #f8f8f8); }
        .tier-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(45deg, #667eea, #764ba2); transform: scaleX(0); transition: transform 0.4s; }
        .tier-card:hover::before { transform: scaleX(1); }
        .tier-card:hover { border-color: #667eea; transform: translateY(-8px); box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2); }
        .tier-card.selected { border-color: #667eea; background: linear-gradient(145deg, #f8f9ff, #ffffff); box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2); }
        .tier-card.selected::before { transform: scaleX(1); }
        .tier-card.popular { border-color: #ffd700; position: relative; }
        .tier-card.popular::after { content: '🔥 MOST POPULAR'; position: absolute; top: -12px; right: 25px; background: #ffd700; color: #333; padding: 8px 20px; border-radius: 25px; font-size: 0.8rem; font-weight: bold; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); }
        .tier-name { font-weight: bold; font-size: 1.4rem; color: #2c3e50; margin-bottom: 0.75rem; }
        .tier-price { font-size: 2.2rem; color: #667eea; font-weight: bold; margin-bottom: 0.5rem; }
        .tier-savings { color: #28a745; font-size: 0.95rem; font-weight: bold; margin-bottom: 1.25rem; }
        .tier-description { color: #666; margin-bottom: 1.5rem; line-height: 1.6; }
        .tier-features { list-style: none; margin-bottom: 1.5rem; }
        .tier-features li { padding: 0.6rem 0; color: #555; }
        .tier-features li:before { content: "✅ "; margin-right: 0.75rem; }
        .tier-guarantee { background: linear-gradient(145deg, #e8f5e8, #f0f8f0); padding: 1.25rem; border-radius: 8px; margin-top: 1.5rem; text-align: center; font-size: 0.9rem; color: #155724; border-left: 4px solid #28a745; }
        
        .order-form { padding: 3rem 2rem; border-top: 2px solid #e0e0e0; background: linear-gradient(145deg, #f9f9f9, #ffffff); }
        .form-section-title { font-size: 2rem; margin-bottom: 1.5rem; color: #2c3e50; text-align: center; }
        .form-group { margin-bottom: 2rem; }
        .form-group label { display: block; margin-bottom: 0.75rem; font-weight: bold; color: #2c3e50; font-size: 1.1rem; }
        .form-control { width: 100%; padding: 1.2rem; border: 2px solid #ddd; border-radius: 10px; font-size: 1rem; transition: all 0.3s; }
        .form-control:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1); }
        textarea.form-control { height: 140px; resize: vertical; }
        
        .file-upload { border: 3px dashed #ddd; border-radius: 15px; padding: 3.5rem; text-align: center; transition: all 0.3s; background: linear-gradient(145deg, #ffffff, #f8f8f8); margin-bottom: 2rem; }
        .file-upload:hover { border-color: #667eea; background: linear-gradient(145deg, #f8f9ff, #ffffff); }
        .file-upload input[type="file"] { display: none; }
        .file-upload label { cursor: pointer; color: #667eea; font-weight: bold; font-size: 1.2rem; }
        .file-upload-icon { font-size: 3.5rem; margin-bottom: 1.5rem; }
        
        .guest-info { background: linear-gradient(145deg, #fff, #f8f8f8); border: 2px solid #e0e0e0; border-radius: 15px; padding: 2.5rem; margin-bottom: 2rem; }
        .guest-info h3 { margin-bottom: 1.5rem; color: #2c3e50; font-size: 1.3rem; }
        .guest-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
        
        .btn { background: linear-gradient(45deg, #667eea, #764ba2); color: white; padding: 1.4rem 3rem; border: none; border-radius: 10px; font-size: 1.3rem; cursor: pointer; text-decoration: none; display: inline-block; text-align: center; transition: all 0.3s; font-weight: bold; position: relative; overflow: hidden; }
        .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; }
        .btn:hover::before { left: 100%; }
        .btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(102, 126, 234, 0.3); }
        .btn-large { padding: 1.6rem 3.5rem; font-size: 1.4rem; }
        .btn-pulse { animation: pulse 2s infinite; }
        @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); } 70% { box-shadow: 0 0 0 25px rgba(102, 126, 234, 0); } 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); } }
        
        .alert { padding: 1.25rem; border-radius: 8px; margin-bottom: 1.5rem; }
        .alert-error { background: #fee; border: 1px solid #fcc; color: #c00; }
        .alert-success { background: #efe; border: 1px solid #cfc; color: #060; }
        
        .testimonials { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 5rem 0; color: white; }
        .testimonials h2 { text-align: center; margin-bottom: 3rem; font-size: 2.5rem; }
        .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2.5rem; }
        .testimonial { background: rgba(255,255,255,0.1); padding: 2.5rem; border-radius: 15px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); }
        .testimonial-text { margin-bottom: 1.5rem; font-style: italic; font-size: 1.1rem; line-height: 1.8; }
        .testimonial-author { font-weight: bold; margin-bottom: 0.25rem; }
        .testimonial-company { opacity: 0.8; font-size: 0.9rem; }
        .stars { color: #ffd700; margin-bottom: 1rem; font-size: 1.2rem; }
        
        .roi-section { background: #2c3e50; color: white; padding: 4rem 0; text-align: center; }
        .roi-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 2rem; }
        .roi-stat { padding: 2rem; background: rgba(255,255,255,0.1); border-radius: 10px; }
        .roi-number { font-size: 3rem; font-weight: bold; color: #ffd700; margin-bottom: 0.5rem; }
        .roi-label { font-size: 1.1rem; }
        
        .process-section { background: white; padding: 5rem 0; }
        .process-title { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: #2c3e50; }
        .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
        .process-step { text-align: center; padding: 2rem; position: relative; }
        .process-step::after { content: '→'; position: absolute; top: 50%; right: -1rem; font-size: 2rem; color: #667eea; }
        .process-step:last-child::after { display: none; }
        .step-number { background: #667eea; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin: 0 auto 1rem; }
        .step-title { font-size: 1.2rem; margin-bottom: 0.5rem; color: #2c3e50; }
        .step-description { color: #666; line-height: 1.6; }
        
        .features { padding: 5rem 0; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
        .features h2 { text-align: center; margin-bottom: 3rem; color: #2c3e50; font-size: 2.5rem; }
        .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; }
        .feature { text-align: center; padding: 2.5rem; background: white; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); transition: transform 0.3s; }
        .feature:hover { transform: translateY(-5px); }
        .feature-icon { font-size: 3.5rem; margin-bottom: 1.5rem; }
        .feature h3 { margin-bottom: 1rem; color: #2c3e50; font-size: 1.3rem; }
        .feature p { color: #666; line-height: 1.8; }
        
        .guarantee-section { background: linear-gradient(45deg, #28a745, #20c997); color: white; padding: 4rem 0; text-align: center; }
        .guarantee-content { max-width: 700px; margin: 0 auto; }
        .guarantee-icon { font-size: 5rem; margin-bottom: 1.5rem; }
        .guarantee-section h2 { margin-bottom: 1.5rem; font-size: 2.5rem; }
        .guarantee-section p { font-size: 1.2rem; margin-bottom: 2rem; line-height: 1.8; }
        .guarantee-points { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; margin-top: 2rem; }
        .guarantee-point { background: rgba(255,255,255,0.1); padding: 1rem 1.5rem; border-radius: 10px; }
        
        .pricing-transparency { background: white; padding: 4rem 0; text-align: center; }
        .pricing-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 2rem; }
        .pricing-item { padding: 2rem; border: 2px solid #e0e0e0; border-radius: 10px; }
        .pricing-item.highlight { border-color: #28a745; background: #f8fff8; }
        .pricing-title { font-size: 1.3rem; margin-bottom: 1rem; color: #2c3e50; }
        .pricing-amount { font-size: 2rem; font-weight: bold; color: #667eea; margin-bottom: 1rem; }
        .pricing-description { color: #666; }
        
        .faq-section { background: #f8f9fa; padding: 5rem 0; }
        .faq-title { text-align: center; margin-bottom: 3rem; color: #2c3e50; font-size: 2.5rem; }
        .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem; }
        .faq-item { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        .faq-question { font-weight: bold; margin-bottom: 1rem; color: #2c3e50; font-size: 1.1rem; }
        .faq-answer { color: #666; line-height: 1.7; }
        
        .cta-section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 5rem 0; text-align: center; }
        .cta-content { max-width: 600px; margin: 0 auto; }
        .cta-section h2 { margin-bottom: 1rem; font-size: 2.8rem; }
        .cta-section p { font-size: 1.2rem; margin-bottom: 2rem; line-height: 1.8; }
        
        footer { background: #2c3e50; color: white; text-align: center; padding: 4rem 0; }
        .footer-content { margin-bottom: 2rem; }
        .footer-links { display: flex; justify-content: center; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap; }
        .footer-links a { color: white; text-decoration: none; opacity: 0.8; }
        .footer-links a:hover { opacity: 1; }
        
        @media (max-width: 768px) {
            .hero h1 { font-size: 2.5rem; }
            .tiers-grid { grid-template-columns: 1fr; }
            .header-content { flex-direction: column; gap: 1rem; }
            .trust-stats { gap: 1.5rem; }
            .guest-info-grid { grid-template-columns: 1fr; }
            .guarantee-points { flex-direction: column; gap: 1rem; }
            .process-step::after { display: none; }
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; background: #f8f9fa; line-height: 1.6; color: #333; }
        .container { max-width: 800px; margin: 2rem auto; padding: 0 20px; }
        .install-card { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }
        .install-header { background: #667eea; color: white; padding: 2rem; text-align: center; }
        .install-body { padding: 2rem; }
        .step-nav { display: flex; justify-content: center; margin-bottom: 2rem; }
        .step { padding: 0.5rem 1rem; margin: 0 0.5rem; border-radius: 4px; background: #e9ecef; color: #666; }
        .step.active { background: #667eea; color: white; }
        .step.completed { background: #28a745; color: white; }
        .form-group { margin-bottom: 1.5rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
        .form-control { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; }
        .btn { padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
        .btn-primary { background: #667eea; color: white; }
        .btn-success { background: #28a745; color: white; }
        .btn:hover { opacity: 0.9; }
        .alert { padding: 1rem; border-radius: 4px; margin-bottom: 1rem; }
        .alert-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
        .alert-error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
        .alert-warning { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; }
        .requirements-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
        .requirements-table th, .requirements-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #e9ecef; }
        .requirements-table th { background: #f8f9fa; }
        .status-ok { color: #28a745; font-weight: bold; }
        .status-error { color: #dc3545; font-weight: bold; }
        .code-block { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 4px; padding: 1rem; margin: 1rem 0; font-family: monospace; }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: Arial, sans-serif; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .login-container {
            background: white;
            padding: 3rem;
            border-radius: 10px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 450px;
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .login-logo {
            font-size: 2rem;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }
        
        .login-subtitle {
            color: #666;
            font-size: 1rem;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #e0e0e0;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .form-check {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }
        
        .form-check input[type="checkbox"] {
            width: auto;
        }
        
        .form-check label {
            margin-bottom: 0;
            font-weight: normal;
            cursor: pointer;
        }
        
        .btn {
            width: 100%;
            background: #667eea;
            color: white;
            padding: 0.75rem;
            border: none;
            border-radius: 5px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .btn:hover {
            background: #5a6fd8;
        }
        
        .alert {
            padding: 1rem;
            border-radius: 5px;
            margin-bottom: 1.5rem;
            background: #fee;
            border: 1px solid #fcc;
            color: #c00;
        }
        
        .form-links {
            display: flex;
            justify-content: space-between;
            margin-top: 1.5rem;
            font-size: 0.9rem;
        }
        
        .form-links a {
            color: #667eea;
            text-decoration: none;
        }
        
        .form-links a:hover {
            text-decoration: underline;
        }
        
        .divider {
            text-align: center;
            margin: 2rem 0;
            position: relative;
            color: #666;
        }
        
        .divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: #e0e0e0;
        }
        
        .divider span {
            background: white;
            padding: 0 1rem;
        }
        
        .guest-option {
            text-align: center;
            padding: 1.5rem;
            background: #f8f9fa;
            border-radius: 5px;
            margin-top: 1.5rem;
        }
        
        .guest-option h3 {
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }
        
        .guest-option p {
            color: #666;
            margin-bottom: 1rem;
        }
        
        .btn-secondary {
            background: #6c757d;
        }
        
        .btn-secondary:hover {
            background: #5a6268;
        }

* {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                font-family: Arial, sans-serif;
                line-height: 1.6;
                color: #333;
                background: #f8f9fa;
            }
            .container {
                max-width: 1000px;
                margin: 0 auto;
                padding: 0 20px;
            }

            header {
                background: #2c3e50;
                color: white;
                padding: 1rem 0;
            }
            .header-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .logo {
                font-size: 1.8rem;
                font-weight: bold;
            }
            .nav {
                display: flex;
                gap: 20px;
            }
            .nav a {
                color: white;
                text-decoration: none;
                padding: 5px 10px;
                border-radius: 3px;
            }
            .nav a:hover {
                background: rgba(255,255,255,0.1);
            }

            .page-header {
                background: white;
                padding: 2rem 0;
                margin-bottom: 2rem;
            }
            .page-title {
                font-size: 2rem;
                margin-bottom: 0.5rem;
                color: #2c3e50;
            }
            .breadcrumb {
                color: #666;
            }
            .breadcrumb a {
                color: #007bff;
                text-decoration: none;
            }

            .content-grid {
                display: grid;
                grid-template-columns: 250px 1fr;
                gap: 2rem;
            }
            .sidebar {
            }
            .main-content {
            }

            .nav-menu {
                background: white;
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .nav-item {
                display: block;
                padding: 1rem 1.5rem;
                text-decoration: none;
                color: #333;
                border-bottom: 1px solid #e9ecef;
            }
            .nav-item:last-child {
                border-bottom: none;
            }
            .nav-item:hover {
                background: #f8f9fa;
            }
            .nav-item.active {
                background: #007bff;
                color: white;
            }

            .card {
                background: white;
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                margin-bottom: 2rem;
            }
            .card-header {
                padding: 1.5rem;
                border-bottom: 1px solid #e9ecef;
            }
            .card-title {
                font-size: 1.25rem;
                font-weight: bold;
                color: #2c3e50;
            }
            .card-body {
                padding: 1.5rem;
            }

            .form-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1rem;
            }
            .form-group {
                margin-bottom: 1.5rem;
            }
            .form-group.full-width {
                grid-column: 1 / -1;
            }
            .form-group label {
                display: block;
                margin-bottom: 0.5rem;
                font-weight: bold;
                color: #2c3e50;
            }
            .form-control {
                width: 100%;
                padding: 0.75rem;
                border: 1px solid #ddd;
                border-radius: 4px;
                font-size: 1rem;
            }
            .form-control:focus {
                outline: none;
                border-color: #007bff;
                box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
            }
            .form-help {
                font-size: 0.9rem;
                color: #666;
                margin-top: 0.25rem;
            }

            .btn {
                background: #007bff;
                color: white;
                padding: 0.75rem 1.5rem;
                border: none;
                border-radius: 4px;
                font-size: 1rem;
                cursor: pointer;
                text-decoration: none;
                display: inline-block;
            }
            .btn:hover {
                background: #0056b3;
            }
            .btn-success {
                background: #28a745;
            }
            .btn-success:hover {
                background: #1e7e34;
            }
            .btn-warning {
                background: #ffc107;
                color: #212529;
            }
            .btn-warning:hover {
                background: #d39e00;
            }
            .btn-danger {
                background: #dc3545;
            }
            .btn-danger:hover {
                background: #c82333;
            }
            .btn-secondary {
                background: #6c757d;
            }
            .btn-secondary:hover {
                background: #545b62;
            }

            .alert {
                padding: 1rem;
                border-radius: 4px;
                margin-bottom: 1.5rem;
            }
            .alert-success {
                background: #d4edda;
                border: 1px solid #c3e6cb;
                color: #155724;
            }
            .alert-error {
                background: #f8d7da;
                border: 1px solid #f5c6cb;
                color: #721c24;
            }
            .alert-warning {
                background: #fff3cd;
                border: 1px solid #ffeaa7;
                color: #856404;
            }
            .alert-info {
                background: #e7f3ff;
                border: 1px solid #b8daff;
                color: #004085;
            }

            .stats-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 1rem;
                margin-bottom: 2rem;
            }
            .stat-card {
                background: #f8f9fa;
                padding: 1rem;
                border-radius: 6px;
                text-align: center;
            }
            .stat-number {
                font-size: 1.5rem;
                font-weight: bold;
                color: #007bff;
            }
            .stat-label {
                font-size: 0.9rem;
                color: #666;
            }

            .danger-zone {
                border: 2px solid #dc3545;
                border-radius: 8px;
                padding: 1.5rem;
                background: #fff5f5;
            }
            .danger-zone h3 {
                color: #dc3545;
                margin-bottom: 1rem;
            }

            .password-requirements {
                background: #f8f9fa;
                border: 1px solid #e9ecef;
                border-radius: 4px;
                padding: 1rem;
                margin-top: 0.5rem;
            }
            .password-requirements ul {
                margin-left: 1.5rem;
            }
            .password-requirements li {
                font-size: 0.9rem;
                color: #666;
            }

            @media (max-width: 768px) {
                .content-grid {
                    grid-template-columns: 1fr;
                }
                .form-grid {
                    grid-template-columns: 1fr;
                }
            }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #f4f4f4; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        
        header { background: #2c3e50; color: white; padding: 1rem 0; }
        .header-content { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.8rem; font-weight: bold; }
        .nav { display: flex; gap: 20px; }
        .nav a { color: white; text-decoration: none; padding: 5px 10px; border-radius: 3px; }
        .nav a:hover { background: rgba(255,255,255,0.1); }
        
        .page-header { background: white; padding: 2rem 0; margin-bottom: 2rem; text-align: center; }
        .page-title { font-size: 2rem; margin-bottom: 0.5rem; color: #2c3e50; }
        .page-subtitle { color: #666; }
        
        .form-container { background: white; max-width: 600px; margin: 0 auto; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .form-group { margin-bottom: 1.5rem; }
        .form-group.full-width { grid-column: 1 / -1; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #2c3e50; }
        .form-control { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; }
        .form-control:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1); }
        .form-help { font-size: 0.9rem; color: #666; margin-top: 0.25rem; }
        
        .password-requirements { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 4px; padding: 1rem; margin-top: 0.5rem; }
        .password-requirements h4 { margin-bottom: 0.5rem; color: #2c3e50; }
        .password-requirements ul { margin-left: 1.5rem; }
        .password-requirements li { font-size: 0.9rem; color: #666; }
        
        .btn { background: #667eea; color: white; padding: 0.75rem 2rem; border: none; border-radius: 4px; font-size: 1.1rem; cursor: pointer; width: 100%; }
        .btn:hover { background: #5a6fd8; }
        
        .alert { padding: 1rem; border-radius: 4px; margin-bottom: 1.5rem; }
        .alert-error { background: #fee; border: 1px solid #fcc; color: #c00; }
        .alert-success { background: #efe; border: 1px solid #cfc; color: #060; }
        
        .login-link { text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e0e0e0; }
        .login-link a { color: #667eea; text-decoration: none; }
        .login-link a:hover { text-decoration: underline; }
        
        .benefits { background: #f8f9fa; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; }
        .benefits h3 { color: #2c3e50; margin-bottom: 1rem; }
        .benefits-list { list-style: none; }
        .benefits-list li { padding: 0.5rem 0; color: #666; }
        .benefits-list li:before { content: "✓ "; color: #27ae60; font-weight: bold; margin-right: 0.5rem; }
        
        @media (max-width: 768px) {
            .form-grid { grid-template-columns: 1fr; }
            .header-content { flex-direction: column; gap: 1rem; }
        }

body { font-family: Arial, sans-serif; margin: 0; background: #f5f5f5; }
        .header { background: #333; color: white; padding: 15px 20px; }
        .nav a { color: white; text-decoration: none; margin-right: 15px; }
        .container { max-width: 1000px; margin: 20px auto; padding: 0 20px; }
        .card { background: white; padding: 20px; margin: 20px 0; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .stats { display: flex; gap: 20px; flex-wrap: wrap; }
        .stat { flex: 1; min-width: 150px; text-align: center; padding: 20px; background: #e9ecef; border-radius: 5px; }
        .stat-number { font-size: 2em; font-weight: bold; color: #007bff; }
        table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; }
        th { background: #f8f9fa; }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; }
        
        .admin-header { background: #343a40; color: white; padding: 1rem 0; }
        .header-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
        .admin-logo { font-size: 1.5rem; font-weight: bold; }
        .admin-nav { display: flex; gap: 20px; }
        .admin-nav a { color: white; text-decoration: none; padding: 5px 10px; border-radius: 3px; }
        .admin-nav a:hover { background: rgba(255,255,255,0.1); }
        
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .page-title { font-size: 2rem; margin-bottom: 1rem; color: #2c3e50; }
        .page-subtitle { color: #666; margin-bottom: 2rem; }
        
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
        .stat-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; }
        .stat-number { font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem; }
        .stat-label { color: #666; font-size: 0.9rem; }
        .stat-disk .stat-number { color: #17a2b8; }
        .stat-files .stat-number { color: #28a745; }
        .stat-orders .stat-number { color: #007bff; }
        .stat-warning .stat-number { color: #ffc107; }
        .stat-danger .stat-number { color: #dc3545; }
        
        .cleanup-section { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 2rem; }
        .section-header { padding: 1.5rem; border-bottom: 1px solid #e9ecef; background: #f8f9fa; }
        .section-title { font-size: 1.25rem; font-weight: bold; color: #2c3e50; }
        .section-body { padding: 1.5rem; }
        
        .cleanup-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
        .cleanup-action { border: 1px solid #e9ecef; border-radius: 8px; padding: 1.5rem; }
        .action-title { font-weight: bold; color: #2c3e50; margin-bottom: 0.5rem; }
        .action-description { color: #666; margin-bottom: 1rem; font-size: 0.9rem; }
        .action-meta { background: #f8f9fa; padding: 0.75rem; border-radius: 4px; margin-bottom: 1rem; font-size: 0.9rem; }
        
        .btn { padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; text-decoration: none; display: inline-block; }
        .btn-primary { background: #007bff; color: white; }
        .btn-success { background: #28a745; color: white; }
        .btn-warning { background: #ffc107; color: #212529; }
        .btn-danger { background: #dc3545; color: white; }
        .btn-info { background: #17a2b8; color: white; }
        .btn:hover { opacity: 0.9; }
        .btn:disabled { opacity: 0.6; cursor: not-allowed; }
        
        .alert { padding: 1rem; border-radius: 4px; margin-bottom: 1.5rem; }
        .alert-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
        .alert-error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
        .alert-warning { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; }
        
        .results-section { background: #e7f3ff; border: 1px solid #b8daff; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; }
        .results-title { color: #004085; font-weight: bold; margin-bottom: 1rem; }
        .results-list { list-style: none; }
        .results-list li { padding: 0.25rem 0; color: #004085; }
        .results-list li:before { content: "✓ "; color: #28a745; font-weight: bold; }
        
        .settings-section { background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; }
        .settings-title { color: #856404; font-weight: bold; margin-bottom: 1rem; }
        .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
        .setting-item { }
        .setting-label { font-weight: bold; color: #856404; }
        .setting-value { color: #856404; }
        
        .danger-zone { background: #fff5f5; border: 2px solid #feb2b2; border-radius: 8px; padding: 1.5rem; margin-top: 2rem; }
        .danger-title { color: #dc3545; font-weight: bold; margin-bottom: 1rem; }
        
        @media (max-width: 768px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .cleanup-actions { grid-template-columns: 1fr; }
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; }
        
        .admin-header { background: #343a40; color: white; padding: 1rem 0; }
        .header-content { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
        .admin-logo { font-size: 1.5rem; font-weight: bold; }
        .admin-nav { display: flex; gap: 20px; }
        .admin-nav a { color: white; text-decoration: none; padding: 5px 10px; border-radius: 3px; }
        .admin-nav a:hover { background: rgba(255,255,255,0.1); }
        
        .container { max-width: 1400px; margin: 0 auto; padding: 20px; }
        .page-title { font-size: 2rem; margin-bottom: 1rem; color: #2c3e50; }
        .page-subtitle { color: #666; margin-bottom: 2rem; }
        
        .summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
        .summary-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; }
        .summary-number { font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem; }
        .summary-label { color: #666; font-size: 0.9rem; }
        .summary-clients .summary-number { color: #007bff; }
        .summary-registered .summary-number { color: #28a745; }
        .summary-guest .summary-number { color: #17a2b8; }
        .summary-value .summary-number { color: #ffc107; }
        
        .filters-section { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 2rem; }
        .filters-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 1rem; align-items: end; }
        .filter-group { }
        .filter-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #2c3e50; }
        .form-control, .form-select { padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; width: 100%; }
        .btn { padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
        .btn-primary { background: #007bff; color: white; }
        .btn-secondary { background: #6c757d; color: white; }
        .btn:hover { opacity: 0.9; }
        
        .main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }
        .main-content { }
        .sidebar { }
        
        .clients-table { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; }
        .table-header { padding: 1.5rem; border-bottom: 1px solid #e9ecef; background: #f8f9fa; display: flex; justify-content: space-between; align-items: center; }
        .table-title { font-size: 1.25rem; font-weight: bold; color: #2c3e50; }
        
        .table-responsive { overflow-x: auto; }
        .table { width: 100%; border-collapse: collapse; }
        .table th, .table td { padding: 1rem; text-align: left; border-bottom: 1px solid #e9ecef; }
        .table th { background: #f8f9fa; font-weight: bold; color: #2c3e50; position: sticky; top: 0; }
        .table tbody tr:hover { background: #f8f9fa; }
        .table .text-right { text-align: right; }
        .table .text-center { text-align: center; }
        
        .client-info { }
        .client-name { font-weight: bold; margin-bottom: 0.25rem; }
        .client-email { color: #666; font-size: 0.9rem; margin-bottom: 0.25rem; }
        .client-company { color: #666; font-size: 0.9rem; }
        
        .badge { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: bold; margin-right: 0.25rem; }
        .badge-success { background: #d4edda; color: #155724; }
        .badge-info { background: #e7f3ff; color: #004085; }
        .badge-warning { background: #fff3cd; color: #856404; }
        .badge-secondary { background: #e9ecef; color: #495057; }
        .badge-gold { background: #ffd700; color: #856404; }
        .badge-silver { background: #c0c0c0; color: #495057; }
        .badge-bronze { background: #cd7f32; color: white; }
        
        .sort-link { color: #2c3e50; text-decoration: none; }
        .sort-link:hover { color: #007bff; }
        .sort-active { color: #007bff; font-weight: bold; }
        
        .stats-card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 1.5rem; }
        .stats-header { padding: 1rem 1.5rem; border-bottom: 1px solid #e9ecef; font-weight: bold; background: #f8f9fa; }
        .stats-body { padding: 1.5rem; }
        
        .service-list { list-style: none; }
        .service-item { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #e9ecef; }
        .service-item:last-child { border-bottom: none; }
        .service-name { font-weight: bold; }
        .service-stats { font-size: 0.9rem; color: #666; }
        
        .client-actions { display: flex; gap: 0.25rem; }
        .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
        
        .empty-state { text-align: center; padding: 3rem; color: #666; }
        
        @media (max-width: 768px) {
            .main-grid { grid-template-columns: 1fr; }
            .filters-grid { grid-template-columns: 1fr; }
            .summary-cards { grid-template-columns: repeat(2, 1fr); }
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; }
        
        .admin-header { background: #343a40; color: white; padding: 1rem 0; }
        .header-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
        .admin-logo { font-size: 1.5rem; font-weight: bold; }
        .admin-nav { display: flex; gap: 20px; }
        .admin-nav a { color: white; text-decoration: none; padding: 5px 10px; border-radius: 3px; }
        .admin-nav a:hover { background: rgba(255,255,255,0.1); }
        
        .container { max-width: 800px; margin: 0 auto; padding: 20px; }
        .page-title { font-size: 2rem; margin-bottom: 1rem; color: #2c3e50; }
        .page-subtitle { color: #666; margin-bottom: 2rem; }
        
        .export-form { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
        .form-group { margin-bottom: 1.5rem; }
        .form-group.full-width { grid-column: 1 / -1; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #2c3e50; }
        .form-control, .form-select { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; }
        .form-control:focus, .form-select:focus { outline: none; border-color: #007bff; }
        
        .format-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
        .format-option { border: 2px solid #e0e0e0; border-radius: 8px; padding: 1rem; text-align: center; cursor: pointer; transition: all 0.3s; }
        .format-option:hover { border-color: #007bff; }
        .format-option.selected { border-color: #007bff; background: #f8f9ff; }
        .format-option input[type="radio"] { display: none; }
        .format-icon { font-size: 2rem; margin-bottom: 0.5rem; }
        .format-name { font-weight: bold; margin-bottom: 0.25rem; }
        .format-desc { font-size: 0.9rem; color: #666; }
        
        .checkbox-group { display: flex; align-items: center; gap: 0.5rem; }
        .checkbox-group input[type="checkbox"] { width: auto; }
        
        .btn { background: #007bff; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }
        .btn:hover { background: #0056b3; }
        .btn-secondary { background: #6c757d; }
        .btn-secondary:hover { background: #545b62; }
        
        .export-info { background: #e7f3ff; border: 1px solid #b8daff; border-radius: 8px; padding: 1rem; margin-bottom: 2rem; }
        .export-info h3 { color: #004085; margin-bottom: 0.5rem; }
        .export-info ul { margin-left: 1.5rem; color: #004085; }
        
        @media (max-width: 768px) {
            .form-grid { grid-template-columns: 1fr; }
            .format-options { grid-template-columns: 1fr; }
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: white; }
        .container { max-width: 800px; margin: 0 auto; padding: 2rem; }
        
        .invoice-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 3rem; border-bottom: 2px solid #667eea; padding-bottom: 1rem; }
        .company-info h1 { color: #667eea; font-size: 2rem; margin-bottom: 0.5rem; }
        .company-info p { color: #666; margin-bottom: 0.25rem; }
        .invoice-meta { text-align: right; }
        .invoice-meta h2 { font-size: 1.5rem; color: #2c3e50; margin-bottom: 0.5rem; }
        .invoice-meta p { margin-bottom: 0.25rem; }
        
        .billing-section { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
        .billing-info h3 { color: #2c3e50; margin-bottom: 1rem; font-size: 1.1rem; }
        .billing-info p { margin-bottom: 0.5rem; }
        
        .invoice-details { background: #f8f9fa; padding: 1rem; border-radius: 8px; margin-bottom: 2rem; }
        .invoice-details h3 { color: #2c3e50; margin-bottom: 1rem; }
        .details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
        .detail-item { }
        .detail-label { font-weight: bold; color: #2c3e50; }
        .detail-value { color: #666; }
        
        .line-items { margin-bottom: 2rem; }
        .items-table { width: 100%; border-collapse: collapse; }
        .items-table th { background: #f8f9fa; padding: 1rem; text-align: left; border-bottom: 2px solid #e9ecef; font-weight: bold; color: #2c3e50; }
        .items-table td { padding: 1rem; border-bottom: 1px solid #e9ecef; }
        .items-table .amount { text-align: right; font-weight: bold; }
        .item-description { font-weight: bold; margin-bottom: 0.25rem; }
        .item-details { color: #666; font-size: 0.9rem; }
        
        .totals-section { max-width: 300px; margin-left: auto; }
        .totals-table { width: 100%; }
        .totals-table td { padding: 0.5rem 0; border-bottom: 1px solid #e9ecef; }
        .totals-table .total-row { font-weight: bold; font-size: 1.1rem; border-top: 2px solid #2c3e50; }
        .totals-table .label { text-align: left; }
        .totals-table .amount { text-align: right; font-weight: bold; }
        
        .payment-info { background: #e7f3ff; border: 1px solid #b8daff; border-radius: 8px; padding: 1.5rem; margin: 2rem 0; }
        .payment-info h3 { color: #004085; margin-bottom: 1rem; }
        .payment-info p { margin-bottom: 0.5rem; color: #004085; }
        
        .terms { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e9ecef; }
        .terms h3 { color: #2c3e50; margin-bottom: 1rem; }
        .terms ul { margin-left: 1.5rem; }
        .terms li { margin-bottom: 0.5rem; color: #666; }
        
        .footer { text-align: center; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e9ecef; color: #666; font-size: 0.9rem; }
        
        .status-badge { padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.9rem; font-weight: bold; }
        .status-paid { background: #d4edda; color: #155724; }
        .status-pending { background: #fff3cd; color: #856404; }
        .status-overdue { background: #f8d7da; color: #721c24; }
        
        .print-button { background: #667eea; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 2rem; }
        .print-button:hover { background: #5a6fd8; }
        
        @media print {
            .print-button, .no-print { display: none !important; }
            body { background: white; }
            .container { padding: 0; max-width: none; }
        }
        
        @media (max-width: 768px) {
            .invoice-header, .billing-section { grid-template-columns: 1fr; gap: 1rem; }
            .invoice-header { flex-direction: column; }
            .invoice-meta { text-align: left; margin-top: 1rem; }
            .details-grid { grid-template-columns: 1fr; }
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; }
        
        .admin-header { background: #343a40; color: white; padding: 1rem 0; }
        .header-content { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
        .admin-logo { font-size: 1.5rem; font-weight: bold; }
        .admin-nav { display: flex; gap: 20px; }
        .admin-nav a { color: white; text-decoration: none; padding: 5px 10px; border-radius: 3px; }
        .admin-nav a:hover { background: rgba(255,255,255,0.1); }
        
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .breadcrumb { margin-bottom: 1rem; color: #666; }
        .breadcrumb a { color: #007bff; text-decoration: none; }
        .page-title { font-size: 2rem; margin-bottom: 1rem; color: #2c3e50; }
        
        .quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
        
        .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .card-header { padding: 1.5rem; border-bottom: 1px solid #e9ecef; background: #f8f9fa; font-weight: bold; }
        .card-body { padding: 1.5rem; }
        
        .order-info { margin-bottom: 2rem; }
        .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
        .info-item { }
        .info-label { font-weight: bold; color: #495057; margin-bottom: 0.25rem; }
        .info-value { color: #666; }
        
        .form-group { margin-bottom: 1.5rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #2c3e50; }
        .form-control, .form-select { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; }
        .form-control:focus, .form-select:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 2px rgba(0,123,255,0.25); }
        
        .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .price-breakdown { background: #f8f9fa; padding: 1rem; border-radius: 6px; margin-top: 1rem; }
        .price-item { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
        .price-total { font-weight: bold; border-top: 1px solid #dee2e6; padding-top: 0.5rem; margin-top: 0.5rem; }
        
        .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.5rem; }
        .service-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; }
        .service-item input[type="checkbox"] { margin: 0; }
        
        .btn { padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; text-decoration: none; display: inline-block; }
        .btn-primary { background: #007bff; color: white; }
        .btn-success { background: #28a745; color: white; }
        .btn-secondary { background: #6c757d; color: white; }
        .btn:hover { opacity: 0.9; }
        
        .alert { padding: 1rem; border-radius: 4px; margin-bottom: 1.5rem; }
        .alert-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
        .alert-error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
        
        .file-list { margin-top: 1rem; }
        .file-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; border: 1px solid #dee2e6; border-radius: 4px; margin-bottom: 0.5rem; }
        .file-name { font-weight: bold; }
        .file-size { color: #666; font-size: 0.9rem; }
        
        .tier-reference { background: #e7f3ff; padding: 1rem; border-radius: 6px; margin-bottom: 1rem; }
        
        @media (max-width: 768px) {
            .quote-grid { grid-template-columns: 1fr; }
            .pricing-grid { grid-template-columns: 1fr; }
            .services-grid { grid-template-columns: 1fr; }
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; background: #f8f9fa; color: #333; }
        
        .header { background: #343a40; color: white; padding: 1rem 0; }
        .header-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
        .logo { font-size: 1.5rem; font-weight: bold; }
        .nav { display: flex; gap: 15px; flex-wrap: wrap; }
        .nav a { color: white; text-decoration: none; padding: 8px 12px; border-radius: 4px; transition: background 0.3s; }
        .nav a:hover, .nav a.active { background: rgba(255,255,255,0.1); }
        
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .page-title { font-size: 2rem; margin-bottom: 0.5rem; color: #2c3e50; }
        .page-subtitle { color: #666; margin-bottom: 2rem; }
        
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
        .stat-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; }
        .stat-number { font-size: 2.5rem; font-weight: bold; margin-bottom: 0.5rem; }
        .stat-label { color: #666; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; }
        
        .stat-revenue .stat-number { color: #28a745; }
        .stat-orders .stat-number { color: #007bff; }
        .stat-active .stat-number { color: #ffc107; }
        .stat-completed .stat-number { color: #6f42c1; }
        
        .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .card-header { padding: 1.5rem; border-bottom: 1px solid #e9ecef; background: #f8f9fa; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
        .card-body { padding: 1.5rem; }
        
        .table { width: 100%; border-collapse: collapse; }
        .table th, .table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #e9ecef; }
        .table th { background: #f8f9fa; font-weight: bold; font-size: 0.9rem; }
        .table tbody tr:hover { background: #f8f9fa; }
        
        .badge { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: bold; }
        .badge-success { background: #d4edda; color: #155724; }
        .badge-warning { background: #fff3cd; color: #856404; }
        .badge-primary { background: #cce7ff; color: #004085; }
        .badge-secondary { background: #e2e3e5; color: #383d41; }
        
        .btn { padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 0.9rem; }
        .btn-primary { background: #007bff; color: white; }
        .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
        
        .empty-state { text-align: center; padding: 3rem; color: #666; }
        .empty-state h3 { margin-bottom: 0.5rem; }
        
        @media (max-width: 768px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .header-content { flex-direction: column; gap: 1rem; }
            .nav { justify-content: center; }
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; }
        
        .admin-header { background: #343a40; color: white; padding: 1rem 0; }
        .header-content { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
        .admin-logo { font-size: 1.5rem; font-weight: bold; }
        .admin-nav { display: flex; gap: 20px; }
        .admin-nav a { color: white; text-decoration: none; padding: 5px 10px; border-radius: 3px; }
        .admin-nav a:hover { background: rgba(255,255,255,0.1); }
        
        .container { max-width: 1400px; margin: 0 auto; padding: 20px; }
        .page-title { font-size: 2rem; margin-bottom: 1rem; color: #2c3e50; }
        .page-subtitle { color: #666; margin-bottom: 2rem; }
        
        .filters-section { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 2rem; }
        .filters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
        .search-form { display: flex; gap: 1rem; align-items: end; }
        .form-group { }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #2c3e50; }
        .form-control { padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; }
        .btn { padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 0.9rem; }
        .btn-primary { background: #007bff; color: white; }
        .btn-success { background: #28a745; color: white; }
        .btn-warning { background: #ffc107; color: #212529; }
        .btn-danger { background: #dc3545; color: white; }
        .btn-secondary { background: #6c757d; color: white; }
        .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
        .btn:hover { opacity: 0.9; }
        
        .status-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
        .status-tab { padding: 0.5rem 1rem; border: 1px solid #dee2e6; border-radius: 4px; text-decoration: none; color: #333; background: #f8f9fa; font-size: 0.9rem; }
        .status-tab:hover { background: #e9ecef; }
        .status-tab.active { background: #007bff; color: white; border-color: #007bff; }
        .status-tab .count { background: rgba(255,255,255,0.2); padding: 0.1rem 0.3rem; border-radius: 3px; margin-left: 0.5rem; font-size: 0.8rem; }
        
        .orders-table { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; }
        .table { width: 100%; border-collapse: collapse; }
        .table th, .table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #e9ecef; }
        .table th { background: #f8f9fa; font-weight: bold; }
        .table tbody tr:hover { background: #f8f9fa; }
        .table-responsive { overflow-x: auto; }
        
        .badge { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: bold; }
        .badge-primary { background: #007bff; color: white; }
        .badge-success { background: #28a745; color: white; }
        .badge-warning { background: #ffc107; color: #212529; }
        .badge-danger { background: #dc3545; color: white; }
        .badge-info { background: #17a2b8; color: white; }
        .badge-secondary { background: #6c757d; color: white; }
        
        .priority-high { border-left: 4px solid #dc3545; }
        .priority-medium { border-left: 4px solid #ffc107; }
        
        .order-actions { display: flex; gap: 0.25rem; }
        
        .pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 2rem; }
        .pagination a, .pagination span { padding: 0.5rem 0.75rem; border: 1px solid #dee2e6; text-decoration: none; color: #333; }
        .pagination a:hover { background: #f8f9fa; }
        .pagination .current { background: #007bff; color: white; border-color: #007bff; }
        
        .empty-state { text-align: center; padding: 3rem; color: #666; }
        
        .stats-bar { display: flex; gap: 1rem; margin-bottom: 1rem; }
        .stat-item { background: #e9ecef; padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.9rem; }
        
        .bulk-actions { display: none; background: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem; margin-bottom: 1rem; border-radius: 4px; }
        .bulk-actions.active { display: block; }
        
        @media (max-width: 768px) {
            .search-form { flex-direction: column; }
            .status-tabs { flex-direction: column; }
            .order-actions { flex-direction: column; }
            .table { font-size: 0.9rem; }
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; }
        
        .admin-header { background: #343a40; color: white; padding: 1rem 0; }
        .header-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
        .admin-logo { font-size: 1.5rem; font-weight: bold; }
        .admin-nav { display: flex; gap: 20px; }
        .admin-nav a { color: white; text-decoration: none; padding: 5px 10px; border-radius: 3px; }
        .admin-nav a:hover { background: rgba(255,255,255,0.1); }
        
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .page-title { font-size: 2rem; margin-bottom: 1rem; color: #2c3e50; }
        .breadcrumb { margin-bottom: 2rem; font-size: 0.9rem; color: #666; }
        .breadcrumb a { color: #007bff; text-decoration: none; }
        
        .order-header { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 2rem; }
        .order-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
        .meta-item { }
        .meta-label { font-weight: bold; color: #2c3e50; margin-bottom: 0.25rem; }
        .meta-value { color: #666; }
        
        .content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }
        .main-content { }
        .sidebar { }
        
        .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 1.5rem; }
        .card-header { padding: 1rem 1.5rem; border-bottom: 1px solid #e9ecef; font-weight: bold; background: #f8f9fa; }
        .card-body { padding: 1.5rem; }
        
        .form-group { margin-bottom: 1rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #2c3e50; }
        .form-control, .form-select { width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; }
        .form-control:focus, .form-select:focus { outline: none; border-color: #007bff; }
        
        .btn { padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 0.9rem; }
        .btn-primary { background: #007bff; color: white; }
        .btn-success { background: #28a745; color: white; }
        .btn-warning { background: #ffc107; color: #212529; }
        .btn-danger { background: #dc3545; color: white; }
        .btn-secondary { background: #6c757d; color: white; }
        .btn:hover { opacity: 0.9; }
        
        .badge { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: bold; }
        .badge-primary { background: #007bff; color: white; }
        .badge-success { background: #28a745; color: white; }
        .badge-warning { background: #ffc107; color: #212529; }
        .badge-danger { background: #dc3545; color: white; }
        .badge-info { background: #17a2b8; color: white; }
        .badge-secondary { background: #6c757d; color: white; }
        
        .alert { padding: 1rem; border-radius: 4px; margin-bottom: 1rem; }
        .alert-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
        .alert-error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
        
        .message { padding: 1rem; border-bottom: 1px solid #e9ecef; }
        .message:last-child { border-bottom: none; }
        .message-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
        .message-sender { font-weight: bold; }
        .message-date { font-size: 0.9rem; color: #666; }
        .message-content { color: #555; }
        .message.admin { background: #f8f9ff; }
        .message.client { background: #fff; }
        .message.internal { background: #fff9e6; border-left: 4px solid #ffc107; }
        
        .file-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; border: 1px solid #e9ecef; border-radius: 4px; margin-bottom: 0.5rem; }
        .file-info { }
        .file-name { font-weight: bold; margin-bottom: 0.25rem; }
        .file-meta { font-size: 0.9rem; color: #666; }
        .file-actions { }
        
        .status-timeline { }
        .timeline-item { display: flex; align-items: center; margin-bottom: 1rem; }
        .timeline-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; margin-right: 1rem; }
        .timeline-content { flex: 1; }
        .timeline-title { font-weight: bold; margin-bottom: 0.25rem; }
        .timeline-date { font-size: 0.9rem; color: #666; }
        
        textarea { resize: vertical; min-height: 100px; }
        
        @media (max-width: 768px) {
            .content-grid { grid-template-columns: 1fr; }
            .order-meta { grid-template-columns: 1fr; }
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; }
        
        .admin-header { background: #343a40; color: white; padding: 1rem 0; }
        .header-content { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
        .admin-logo { font-size: 1.5rem; font-weight: bold; }
        .admin-nav { display: flex; gap: 20px; }
        .admin-nav a { color: white; text-decoration: none; padding: 5px 10px; border-radius: 3px; }
        .admin-nav a:hover { background: rgba(255,255,255,0.1); }
        
        .container { max-width: 1400px; margin: 0 auto; padding: 20px; }
        .page-title { font-size: 2rem; margin-bottom: 1rem; color: #2c3e50; }
        
        .filters-section { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 2rem; }
        .date-filters { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; }
        .filter-group { }
        .filter-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #2c3e50; }
        .form-control, .form-select { padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; }
        .btn { padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
        .btn-primary { background: #007bff; color: white; }
        .btn-success { background: #28a745; color: white; }
        .btn-secondary { background: #6c757d; color: white; }
        .btn:hover { opacity: 0.9; }
        
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
        .stat-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; }
        .stat-number { font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem; }
        .stat-label { color: #666; font-size: 0.9rem; }
        .stat-revenue .stat-number { color: #28a745; }
        .stat-orders .stat-number { color: #007bff; }
        .stat-avg .stat-number { color: #17a2b8; }
        .stat-time .stat-number { color: #ffc107; }
        
        .charts-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; margin-bottom: 2rem; }
        .chart-card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .chart-header { padding: 1rem 1.5rem; border-bottom: 1px solid #e9ecef; font-weight: bold; background: #f8f9fa; }
        .chart-body { padding: 1.5rem; }
        
        .table-responsive { overflow-x: auto; }
        .table { width: 100%; border-collapse: collapse; }
        .table th, .table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #e9ecef; }
        .table th { background: #f8f9fa; font-weight: bold; }
        .table tbody tr:hover { background: #f8f9fa; }
        .table .text-right { text-align: right; }
        .table .text-center { text-align: center; }
        
        .progress-bar { background: #e9ecef; border-radius: 4px; height: 20px; margin: 0.5rem 0; overflow: hidden; }
        .progress-fill { background: #007bff; height: 100%; border-radius: 4px; transition: width 0.3s; }
        
        .metric-trend { display: flex; align-items: center; gap: 0.5rem; }
        .trend-up { color: #28a745; }
        .trend-down { color: #dc3545; }
        .trend-neutral { color: #6c757d; }
        
        .kpi-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
        
        .export-buttons { margin-bottom: 2rem; }
        .export-buttons .btn { margin-right: 0.5rem; }
        
        @media (max-width: 768px) {
            .charts-grid { grid-template-columns: 1fr; }
            .date-filters { flex-direction: column; align-items: stretch; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; }
        
        .admin-header { background: #343a40; color: white; padding: 1rem 0; }
        .header-content { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
        .admin-logo { font-size: 1.5rem; font-weight: bold; }
        .admin-nav { display: flex; gap: 20px; }
        .admin-nav a { color: white; text-decoration: none; padding: 5px 10px; border-radius: 3px; }
        .admin-nav a:hover { background: rgba(255,255,255,0.1); }
        
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .page-title { font-size: 2rem; margin-bottom: 1rem; color: #2c3e50; }
        .page-subtitle { color: #666; margin-bottom: 2rem; }
        
        .settings-nav { display: flex; gap: 0.5rem; margin-bottom: 2rem; background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .nav-tab { padding: 0.75rem 1.5rem; border: none; background: transparent; cursor: pointer; border-radius: 4px; }
        .nav-tab:hover { background: #f8f9fa; }
        .nav-tab.active { background: #007bff; color: white; }
        
        .settings-section { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 2rem; display: none; }
        .settings-section.active { display: block; }
        .section-header { padding: 1.5rem; border-bottom: 1px solid #e9ecef; background: #f8f9fa; }
        .section-title { font-size: 1.25rem; font-weight: bold; color: #2c3e50; }
        .section-body { padding: 1.5rem; }
        
        .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
        .form-group { margin-bottom: 1rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #2c3e50; }
        .form-control, .form-select { width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; }
        .form-control:focus, .form-select:focus { outline: none; border-color: #007bff; }
        
        .btn { padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }
        .btn-primary { background: #007bff; color: white; }
        .btn-primary:hover { background: #0056b3; }
        .btn-success { background: #28a745; color: white; }
        .btn-success:hover { background: #1e7e34; }
        .btn-warning { background: #ffc107; color: #212529; }
        .btn-warning:hover { background: #e0a800; }
        .btn-danger { background: #dc3545; color: white; }
        .btn-danger:hover { background: #c82333; }
        .btn-secondary { background: #6c757d; color: white; }
        .btn-secondary:hover { background: #545b62; }
        .btn-sm { padding: 0.5rem 1rem; font-size: 0.9rem; }
        
        .checkbox-group { display: flex; align-items: center; gap: 0.5rem; }
        .checkbox-group input[type="checkbox"] { width: auto; }
        
        .alert { padding: 1rem; border-radius: 4px; margin-bottom: 1.5rem; }
        .alert-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
        .alert-error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
        .alert-warning { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; }
        
        .badge { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: bold; }
        .badge-success { background: #d4edda; color: #155724; }
        .badge-warning { background: #fff3cd; color: #856404; }
        .badge-danger { background: #f8d7da; color: #721c24; }
        .badge-secondary { background: #e9ecef; color: #495057; }
        
        /* Service Tier Styles */
        .tier-item { border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; background: #f8f9fa; }
        .tier-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
        .tier-name { font-size: 1.1rem; font-weight: bold; color: #2c3e50; }
        .tier-price { font-size: 1.2rem; font-weight: bold; color: #28a745; }
        
        /* Admin User Styles */
        .admin-user-item { border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; background: #f8f9fa; }
        .user-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #dee2e6; }
        .user-name { font-size: 1.1rem; font-weight: bold; color: #2c3e50; }
        .user-meta { color: #666; font-size: 0.9rem; }
        .password-section { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #dee2e6; }
        .password-section h5 { margin-bottom: 1rem; color: #2c3e50; font-size: 1rem; }
        .password-grid { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: end; }
        
        @media (max-width: 768px) {
            .form-grid { grid-template-columns: 1fr; }
            .settings-nav { flex-direction: column; }
            .tier-header, .user-header { flex-direction: column; gap: 1rem; align-items: start; }
            .password-grid { grid-template-columns: 1fr; }
        }

body { font-family: Arial, sans-serif; margin: 0; background: #f8f9fa; }
        .header { background: #343a40; color: white; padding: 15px 20px; }
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .nav a { color: white; text-decoration: none; margin-right: 20px; padding: 5px 10px; border-radius: 3px; }
        .nav a:hover { background: rgba(255,255,255,0.1); }
        .stats { background: white; padding: 30px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .stats h2 { color: #2c3e50; margin-bottom: 20px; }
        .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; }
        .stat-card { background: #f8f9fa; padding: 20px; border-radius: 6px; text-align: center; }
        .stat-number { font-size: 2rem; font-weight: bold; color: #007bff; }
        .stat-label { color: #666; margin-top: 5px; }
        table { width: 100%; border-collapse: collapse; background: white; }
        th, td { padding: 12px; border: 1px solid #dee2e6; text-align: left; }
        th { background: #f8f9fa; font-weight: bold; }
        .orders-section { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .section-title { color: #2c3e50; margin-bottom: 15px; }

body { font-family: Arial, sans-serif; margin: 50px; }
        .login-box { max-width: 400px; margin: 0 auto; padding: 30px; border: 1px solid #ddd; border-radius: 8px; }
        input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; }
        button { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        .error { color: red; margin: 10px 0; }