{'role': 'assistant', 'content': '<function_calls>\n<create-file file_path="nexusship/static/css/style.css">\n/* NexusShip - Complete Courier Website CSS */\n\n:root {\n    --primary-color: #4D148C;\n    --secondary-color: #660099;\n    --accent-color: #FF6600;\n    --success-color: #00CC66;\n    --warning-color: #FF9900;\n    --error-color: #FF0000;\n    --dark-color: #333333;\n    --light-color: #F5F5F5;\n    --white: #FFFFFF;\n    --border-color: #DDDDDD;\n    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: \'FedEx Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif;\n    line-height: 1.6;\n    color: var(--dark-color);\n    background-color: var(--white);\n}\n\n/* Header & Navigation */\n.header {\n    background: var(--primary-color);\n    color: var(--white);\n    padding: 0;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.header-top {\n    background: var(--secondary-color);\n    padding: 10px 0;\n    font-size: 12px;\n}\n\n.header-top .container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 20px;\n}\n\n.header-main {\n    padding: 15px 0;\n}\n\n.header-main .container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 20px;\n}\n\n.logo {\n    font-size: 28px;\n    font-weight: bold;\n    color: var(--white);\n    text-decoration: none;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.logo span {\n    color: var(--accent-color);\n}\n\n.nav-menu {\n    display: flex;\n    list-style: none;\n    gap: 30px;\n}\n\n.nav-menu a {\n    color: var(--white);\n    text-decoration: none;\n    font-weight: 500;\n    transition: color 0.3s;\n    padding: 10px 15px;\n}\n\n.nav-menu a:hover {\n    color: var(--accent-color);\n}\n\n.nav-menu a.active {\n    background: rgba(255, 255, 255, 0.1);\n    border-radius: 5px;\n}\n\n/* Hero Section */\n.hero {\n    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);\n    color: var(--white);\n    padding: 80px 0;\n    text-align: center;\n}\n\n.hero .container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 20px;\n}\n\n.hero h1 {\n    font-size: 48px;\n    margin-bottom: 20px;\n}\n\n.hero p {\n    font-size: 20px;\n    margin-bottom: 30px;\n    opacity: 0.9;\n}\n\n/* Tracking Section */\n.tracking-section {\n    background: var(--white);\n    padding: 60px 0;\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n    margin-top: -40px;\n    position: relative;\n    z-index: 10;\n}\n\n.tracking-section .container {\n    max-width: 900px;\n    margin: 0 auto;\n    padding: 0 20px;\n}\n\n.tracking-box {\n    background: var(--white);\n    border-radius: 10px;\n    padding: 40px;\n    box-shadow: var(--shadow);\n}\n\n.tracking-box h2 {\n    color: var(--primary-color);\n    margin-bottom: 20px;\n    font-size: 32px;\n}\n\n.tracking-form {\n    display: flex;\n    gap: 15px;\n    margin-bottom: 20px;\n}\n\n.tracking-input {\n    flex: 1;\n    padding: 15px 20px;\n    border: 2px solid var(--border-color);\n    border-radius: 5px;\n    font-size: 16px;\n    transition: border-color 0.3s;\n}\n\n.tracking-input:focus {\n    outline: none;\n    border-color: var(--primary-color);\n}\n\n.tracking-button {\n    background: var(--accent-color);\n    color: var(--white);\n    border: none;\n    padding: 15px 40px;\n    border-radius: 5px;\n    font-size: 16px;\n    font-weight: bold;\n    cursor: pointer;\n    transition: background 0.3s;\n}\n\n.tracking-button:hover {\n    background: #E65C00;\n}\n\n/* Tracking Results */\n.tracking-results {\n    margin-top: 30px;\n    display: none;\n}\n\n.tracking-results.active {\n    display: block;\n}\n\n.tracking-header {\n    background: var(--light-color);\n    padding: 20px;\n    border-radius: 5px;\n    margin-bottom: 20px;\n}\n\n.tracking-info {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 20px;\n    margin-bottom: 20px;\n}\n\n.info-box {\n    background: var(--white);\n    padding: 15px;\n    border-left: 4px solid var(--primary-color);\n    border-radius: 5px;\n    box-shadow: var(--shadow);\n}\n\n.info-box h4 {\n    color: var(--primary-color);\n    margin-bottom: 10px;\n    font-size: 14px;\n    text-transform: uppercase;\n}\n\n.info-box p {\n    font-size: 16px;\n    font-weight: 500;\n}\n\n.tracking-timeline {\n    margin-top: 30px;\n}\n\n.timeline-item {\n    display: flex;\n    gap: 20px;\n    padding: 20px;\n    border-bottom: 1px solid var(--border-color);\n    position: relative;\n}\n\n.timeline-item::before {\n    content: \'\';\n    position: absolute;\n    left: 30px;\n    top: 60px;\n    bottom: -20px;\n    width: 2px;\n    background: var(--border-color);\n}\n\n.timeline-item:last-child::before {\n    display: none;\n}\n\n.timeline-icon {\n    width: 60px;\n    height: 60px;\n    background: var(--primary-color);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--white);\n    font-weight: bold;\n    flex-shrink: 0;\n    position: relative;\n}\n\n.timeline-icon::before {\n    content: \'\';\n    position: absolute;\n    left: 50%;\n    bottom: -10px;\n    transform: translateX(-50%);\n    border: 10px solid transparent;\n    border-top-color: var(--primary-color);\n}\n\n.timeline-content {\n    flex: 1;\n}\n\n.timeline-content h4 {\n    color: var(--primary-color);\n    margin-bottom: 5px;\n    font-size: 18px;\n}\n\n.timeline-content p {\n    color: var(--dark-color);\n    margin-bottom: 5px;\n}\n\n.timeline-date {\n    color: #666;\n    font-size: 14px;\n}\n\n.timeline-backcode {\n    display: inline-block;\n    background: var(--light-color);\n    padding: 5px 10px;\n    border-radius: 3px;\n    font-size: 12px;\n    color: #666;\n    margin-top: 10px;\n}\n\n.status-badge {\n    display: inline-block;\n    padding: 8px 16px;\n    border-radius: 20px;\n    font-weight: bold;\n    font-size: 14px;\n    text-transform: uppercase;\n}\n\n.status-processing {\n    background: #E3F2FD;\n    color: #1976D2;\n}\n\n.status-transit {\n    background: #FFF3E0;\n    color: #F57C00;\n}\n\n.status-delivered {\n    background: #E8F5E9;\n    color: #388E3C;\n}\n\n.status-hold {\n    background: #FFEBEE;\n    color: #D32F2F;\n}\n\n/* Services Section */\n.services {\n    padding: 80px 0;\n    background: var(--light-color);\n}\n\n.services .container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 20px;\n}\n\n.section-title {\n    text-align: center;\n    margin-bottom: 50px;\n}\n\n.section-title h2 {\n    color: var(--primary-color);\n    font-size: 42px;\n    margin-bottom: 15px;\n}\n\n.section-title p {\n    color: #666;\n    font-size: 18px;\n    max-width: 700px;\n    margin: 0 auto;\n}\n\n.services-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 30px;\n}\n\n.service-card {\n    background: var(--white);\n    padding: 30px;\n    border-radius: 10px;\n    box-shadow: var(--shadow);\n    transition: transform 0.3s, box-shadow 0.3s;\n}\n\n.service-card:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n}\n\n.service-icon {\n    width: 70px;\n    height: 70px;\n    background: var(--primary-color);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--white);\n    font-size: 32px;\n    margin-bottom: 20px;\n}\n\n.service-card h3 {\n    color: var(--primary-color);\n    margin-bottom: 15px;\n    font-size: 22px;\n}\n\n.service-card p {\n    color: #666;\n    line-height: 1.8;\n}\n\n/* About & Contact Pages */\n.page-header {\n    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);\n    color: var(--white);\n    padding: 60px 0;\n    text-align: center;\n}\n\n.page-header h1 {\n    font-size: 42px;\n    margin-bottom: 15px;\n}\n\n.page-content {\n    padding: 60px 0;\n}\n\n.page-content .container {\n    max-width: 900px;\n    margin: 0 auto;\n    padding: 0 20px;\n}\n\n.page-content h2 {\n    color: var(--primary-color);\n    margin-bottom: 20px;\n    font-size: 32px;\n}\n\n.page-content p {\n    margin-bottom: 20px;\n    line-height: 1.8;\n    color: #666;\n}\n\n.contact-form {\n    background: var(--white);\n    padding: 40px;\n    border-radius: 10px;\n    box-shadow: var(--shadow);\n}\n\n.form-group {\n    margin-bottom: 20px;\n}\n\n.form-group label {\n    display: block;\n    margin-bottom: 8px;\n    font-weight: 500;\n    color: var(--dark-color);\n}\n\n.form-control {\n    width: 100%;\n    padding: 12px 15px;\n    border: 2px solid var(--border-color);\n    border-radius: 5px;\n    font-size: 16px;\n    transition: border-color 0.3s;\n}\n\n.form-control:focus {\n    outline: none;\n    border-color: var(--primary-color);\n}\n\n.btn-primary {\n    background: var(--primary-color);\n    color: var(--white);\n    border: none;\n    padding: 15px 40px;\n    border-radius: 5px;\n    font-size: 16px;\n    font-weight: bold;\n    cursor: pointer;\n    transition: background 0.3s;\n}\n\n.btn-primary:hover {\n    background: var(--secondary-color);\n}\n\n.btn-success {\n    background: var(--success-color);\n    color: var(--white);\n    border: none;\n    padding: 10px 20px;\n    border-radius: 5px;\n    font-size: 14px;\n    cursor: pointer;\n    margin-right: 10px;\n}\n\n.btn-danger {\n    background: var(--error-color);\n    color: var(--white);\n    border: none;\n    padding: 10px 20px;\n    border-radius: 5px;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.btn-secondary {\n    background: #666;\n    color: var(--white);\n    border: none;\n    padding: 10px 20px;\n    border-radius: 5px;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n/* Footer */\n.footer {\n    background: var(--dark-color);\n    color: var(--white);\n    padding: 60px 0 30px;\n}\n\n.footer .container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 20px;\n}\n\n.footer-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 40px;\n    margin-bottom: 40px;\n}\n\n.footer h3 {\n    margin-bottom: 20px;\n    font-size: 18px;\n    color: var(--accent-color);\n}\n\n.footer ul {\n    list-style: none;\n}\n\n.footer ul li {\n    margin-bottom: 10px;\n}\n\n.footer ul a {\n    color: #ccc;\n    text-decoration: none;\n    transition: color 0.3s;\n}\n\n.footer ul a:hover {\n    color: var(--accent-color);\n}\n\n.footer-bottom {\n    text-align: center;\n    padding-top: 30px;\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\n    color: #999;\n}\n\n/* Admin Panel */\n.admin-login {\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--light-color);\n}\n\n.admin-login-box {\n    background: var(--white);\n    padding: 50px;\n    border-radius: 10px;\n    box-shadow: var(--shadow);\n    max-width: 400px;\n    width: 100%;\n}\n\n.admin-login-box h2 {\n    color: var(--primary-color);\n    margin-bottom: 30px;\n    text-align: center;\n}\n\n.admin-dashboard {\n    display: flex;\n    min-height: 100vh;\n}\n\n.admin-sidebar {\n    width: 250px;\n    background: var(--primary-color);\n    color: var(--white);\n    padding: 20px;\n}\n\n.admin-sidebar h2 {\n    margin-bottom: 30px;\n    font-size: 24px;\n}\n\n.admin-menu {\n    list-style: none;\n}\n\n.admin-menu li {\n    margin-bottom: 10px;\n}\n\n.admin-menu a {\n    display: block;\n    color: var(--white);\n    text-decoration: none;\n    padding: 15px;\n    border-radius: 5px;\n    transition: background 0.3s;\n}\n\n.admin-menu a:hover,\n.admin-menu a.active {\n    background: rgba(255, 255, 255, 0.1);\n}\n\n.admin-content {\n    flex: 1;\n    padding: 30px;\n    background: var(--light-color);\n}\n\n.admin-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 30px;\n}\n\n.admin-header h1 {\n    color: var(--primary-color);\n}\n\n.admin-card {\n    background: var(--white);\n    padding: 30px;\n    border-radius: 10px;\n    box-shadow: var(--shadow);\n    margin-bottom: 30px;\n}\n\n.admin-card h3 {\n    color: var(--primary-color);\n    margin-bottom: 20px;\n}\n\n.admin-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.admin-table th,\n.admin-table td {\n    padding: 15px;\n    text-align: left;\n    border-bottom: 1px solid var(--border-color);\n}\n\n.admin-table th {\n    background: var(--light-color);\n    color: var(--primary-color);\n    font-weight: bold;\n}\n\n.admin-table tr:hover {\n    background: var(--light-color);\n}\n\n.btn-generate {\n    background: var(--success-color);\n    color: var(--white);\n    border: none;\n    padding: 15px 30px;\n    border-radius: 5px;\n    font-size: 16px;\n    font-weight: bold;\n    cursor: pointer;\n    margin-bottom: 20px;\n}\n\n.btn-generate:hover {\n    background: #00B359;\n}\n\n/* Modal */\n.modal {\n    display: none;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0.5);\n    z-index: 1000;\n    justify-content: center;\n    align-items: center;\n}\n\n.modal.active {\n    display: flex;\n}\n\n.modal-content {\n    background: var(--white);\n    padding: 30px;\n    border-radius: 10px;\n    max-width: 600px;\n    width: 90%;\n    max-height: 90vh;\n    overflow-y: auto;\n}\n\n.modal-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n}\n\n.modal-close {\n    background: none;\n    border: none;\n    font-size: 24px;\n    cursor: pointer;\n}\n\n.modal-body {\n    margin-bottom: 20px;\n}\n\n.modal-footer {\n    display: flex;\n    justify-content: flex-end;\n    gap: 10px;\n}\n\n/* Status Colors */\n.status-badge {\n    display: inline-block;\n    padding: 5px 12px;\n    border-radius: 15px;\n    font-size: 12px;\n    font-weight: bold;\n    text-transform: uppercase;\n}\n\n.status-Processing {\n    background: #E3F2FD;\n    color: #1976D2;\n}\n\n.status-InTransit {\n    background: #FFF3E0;\n    color: #F57C00;\n}\n\n.status-OutforDelivery {\n    background: #E8F5E9;\n    color: #388E3C;\n}\n\n.status-Delivered {\n    background: #C8E6C9;\n    color: #2E7D32;\n}\n\n.status-OnHold {\n    background: #FFEBEE;\n    color: #D32F2F;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n    .header-main .container {\n        flex-direction: column;\n        gap: 20px;\n    }\n    \n    .nav-menu {\n        flex-wrap: wrap;\n        justify-content: center;\n        gap: 15px;\n    }\n    \n    .hero h1 {\n        font-size: 32px;\n    }\n    \n    .hero p {\n        font-size: 16px;\n    }\n    \n    .tracking-form {\n        flex-direction: column;\n    }\n    \n    .tracking-button {\n        width: 100%;\n    }\n    \n    .admin-dashboard {\n        flex-direction: column;\n    }\n    \n    .admin-sidebar {\n        width: 100%;\n    }\n    \n    .admin-table {\n        display: block;\n        overflow-x: auto;\n    }\n}\n\n/* Loading Spinner */\n.loading {\n    text-align: center;\n    padding: 20px;\n}\n\n.loading::after {\n    content: \'\';\n    display: inline-block;\n    width: 40px;\n    height: 40px;\n    border: 4px solid var(--light-color);\n    border-top-color: var(--primary-color);\n    border-radius: 50%;\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n/* Alert Messages */\n.alert {\n    padding: 15px 20px;\n    border-radius: 5px;\n    margin-bottom: 20px;\n}\n\n.alert-success {\n    background: #D4EDDA;\n    color: #155724;\n    border: 1px solid #C3E6CB;\n}\n\n.alert-error {\n    background: #F8D7DA;\n    color: #721C24;\n    border: 1px solid #F5C6CB;\n}\n\n.alert-info {\n    background: #D1ECF1;\n    color: #0C5460;\n    border: 1px solid #BEE5EB;\n}\n\n/* Receipt Styles */\n.receipt-preview {\n    background: var(--white);\n    padding: 30px;\n    border: 2px solid var(--border-color);\n    border-radius: 10px;\n    margin-bottom: 20px;\n}\n\n.receipt-preview h3 {\n    color: var(--primary-color);\n    margin-bottom: 20px;\n    text-align: center;\n}\n\n.receipt-actions {\n    display: flex;\n    gap: 10px;\n    justify-content: center;\n    margin-top: 20px;\n}\n\n/* Print Styles */\n@media print {\n    .no-print {\n        display: none;\n    }\n    \n    .receipt-preview {\n        border: none;\n        box-shadow: none;\n    }\n}\n</create-file>\n</function_calls>'}