:root {

    /* Western Tractor / John Deere Brand Colors */

    --primary-green: #367C2B; /* John Deere Green */

    --accent-yellow: #FFCC00; /* John Deere Yellow */

    --dark-green: #1E4A1A;

    --light-green: #E8F5E6;

    --dark-gray: #2C3E50;

    --medium-gray: #7F8C8D;

    --light-gray: #ECF0F1;

    --white: #FFFFFF;

    --text-dark: #2C3E50;

    --text-light: #7F8C8D;

}


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


body {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

    background: #f8f9fa;

    color: var(--text-dark);

    line-height: 1.6;

    min-height: 100vh;

}


.container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 20px;

}


/* Header */

header {

    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);

    color: var(--white);

    padding: 40px 0;

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    margin-bottom: 40px;

    position: relative;

    overflow: hidden;

}


header::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: url('images/638a7d3e57859f84a9bcf309_John-Deere-8R-Autonomous-Tractor.jpg') center/cover;

    opacity: 0.15;

    z-index: 0;

}


.header-content {

    position: relative;

    z-index: 1;

}


.logo-container {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 20px;

    gap: 20px;

}


.logo-container img {

    max-height: 100px;

    width: auto;

    height: auto;

    display: block;

    transition: transform 0.3s ease;

    background: rgba(255, 255, 255, 0.1);

    padding: 10px;

    border-radius: 2px;

}


.logo-container img:hover {

    transform: scale(1.05);

}


header h1 {

    font-size: 2.8em;

    margin-bottom: 10px;

    text-align: center;

    font-weight: 700;

    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);

}


header p {

    text-align: center;

    font-size: 1.3em;

    opacity: 0.95;

    font-weight: 300;

}


.author-info {

    font-size: 0.9em;

    line-height: 1.3;

    margin: 8px 0;

    opacity: 0.9;

}


.author-info p {

    margin: 2px 0;

    font-size: inherit;

}


/* Navigation Tabs */

.tabs {

    display: flex;

    justify-content: center;

    gap: 8px;

    margin-bottom: 40px;

    flex-wrap: wrap;

    background: var(--white);

    padding: 15px;

    border-radius: 12px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.08);

}


.tab-button,

a.tab-button {

    background: var(--white);

    color: var(--primary-green);

    border: 2px solid var(--primary-green);

    padding: 10px 20px;

    font-size: 0.95em;

    cursor: pointer;

    transition: all 0.3s ease;

    font-weight: 600;

    border-radius: 2px;

    text-align: center;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}


a.tab-button {

    text-decoration: none;

}


.tab-button:hover {

    background: var(--primary-green);

    color: var(--white);

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(54, 124, 43, 0.3);

}


.tab-button.active {

    background: var(--primary-green);

    color: var(--white);

    box-shadow: 0 4px 12px rgba(54, 124, 43, 0.3);

}


/* Tab Content */

.tab-content {

    display: none;

    animation: fadeIn 0.5s;

}


.tab-content.active {

    display: block;

}


@keyframes fadeIn {

    from { opacity: 0; transform: translateY(10px); }

    to { opacity: 1; transform: translateY(0); }

}


/* Prompt Builder */

.prompt-builder {

    background: var(--white);

    border-radius: 12px;

    padding: 40px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.08);

    margin-bottom: 30px;

    border: 1px solid rgba(54, 124, 43, 0.1);

}


.prompt-builder h2 {

    color: var(--primary-green);

    margin-bottom: 20px;

    font-size: 1.8em;

}


.form-group {

    margin-bottom: 20px;

}


.form-group label {

    display: block;

    margin-bottom: 8px;

    color: var(--text-dark);

    font-weight: 600;

}


.form-group input,

.form-group textarea,

.form-group select {

    width: 100%;

    padding: 12px;

    border: 2px solid var(--light-gray);

    border-radius: 2px;

    font-size: 1em;

    font-family: inherit;

    transition: border-color 0.3s;

}


.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus {

    outline: none;

    border-color: var(--primary-green);

}


.form-group textarea {

    min-height: 100px;

    resize: vertical;

}


.formula-reminder {

    background: var(--light-green);

    padding: 15px;

    border-radius: 2px;

    margin-bottom: 20px;

    border-left: 4px solid var(--primary-green);

}


.formula-reminder h3 {

    color: var(--primary-green);

    margin-bottom: 10px;

}


.formula-reminder p {

    color: var(--text-dark);

    margin-bottom: 5px;

}


.button-group {

    display: flex;

    gap: 10px;

    margin-top: 20px;

}


.btn {

    padding: 12px 24px;

    border: none;

    border-radius: 2px;

    font-size: 1em;

    cursor: pointer;

    transition: all 0.3s ease;

    font-weight: 600;

}


.btn-primary {

    background: var(--primary-green);

    color: var(--white);

}


.btn-primary:hover {

    background: var(--dark-green);

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0,0,0,0.2);

}


.btn-secondary {

    background: var(--accent-yellow);

    color: var(--text-dark);

}


.btn-secondary:hover {

    background: #E6B800;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.4);

}


.btn-copy {

    background: var(--medium-gray);

    color: var(--white);

}


.btn-copy:hover {

    background: var(--dark-gray);

}


/* Generated Prompt Display */

.generated-prompt {

    background: var(--light-gray);

    border: 2px solid var(--primary-green);

    border-radius: 2px;

    padding: 20px;

    margin-top: 20px;

    min-height: 100px;

}


.generated-prompt h3 {

    color: var(--primary-green);

    margin-bottom: 10px;

}


.prompt-text {

    background: var(--white);

    padding: 15px;

    border-radius: 2px;

    font-family: 'Courier New', monospace;

    white-space: pre-wrap;

    word-wrap: break-word;

    border: 1px solid var(--light-gray);

}


/* Examples Grid */

.examples-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 20px;

    margin-top: 20px;

}


.example-card {

    background: var(--white);

    border-radius: 12px;

    padding: 25px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.08);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border-top: 4px solid var(--primary-green);

    border: 1px solid rgba(54, 124, 43, 0.1);

}


.example-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 16px rgba(54, 124, 43, 0.15);

}


.example-card h3 {

    color: var(--primary-green);

    margin-bottom: 10px;

    font-size: 1.2em;

}


.example-card .department {

    display: inline-block;

    background: var(--accent-yellow);

    color: var(--text-dark);

    padding: 4px 12px;

    border-radius: 2px;

    font-size: 0.85em;

    font-weight: 600;

    margin-bottom: 10px;

}


.example-card .scenario {

    color: var(--text-dark);

    margin-bottom: 15px;

    line-height: 1.5;

}


.example-card .prompt-preview {

    background: var(--light-gray);

    padding: 10px;

    border-radius: 2px;

    font-family: 'Courier New', monospace;

    font-size: 0.9em;

    margin-bottom: 15px;

    max-height: 150px;

    overflow-y: auto;

}


.example-card .btn {

    width: 100%;

    margin-top: 10px;

}


/* Filter Buttons */

.filter-buttons {

    display: flex;

    gap: 10px;

    margin-bottom: 20px;

    flex-wrap: wrap;

}


.filter-btn {

    padding: 8px 16px;

    background: var(--white);

    border: 2px solid var(--primary-green);

    color: var(--primary-green);

    border-radius: 2px;

    cursor: pointer;

    transition: all 0.3s ease;

    font-size: 0.9em;

}


.filter-btn:hover,

.filter-btn.active {

    background: var(--primary-green);

    color: var(--white);

}


/* Quick Reference */

.quick-ref-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;

}


.ref-card {

    background: var(--white);

    border-radius: 12px;

    padding: 25px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.08);

    border-left: 4px solid var(--accent-yellow);

    border: 1px solid rgba(54, 124, 43, 0.1);

    transition: transform 0.3s ease;

}


.ref-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 4px 12px rgba(0,0,0,0.12);

}


.ref-card h3 {

    color: var(--primary-green);

    margin-bottom: 15px;

}


.ref-card ul {

    list-style: none;

}


.ref-card li {

    padding: 8px 0;

    border-bottom: 1px solid var(--light-gray);

}


.ref-card li:last-child {

    border-bottom: none;

}


/* Resources */

.resource-list {

    list-style: none;

}


.resource-list li {

    background: var(--white);

    padding: 20px;

    margin-bottom: 15px;

    border-radius: 12px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.08);

    border-left: 4px solid var(--primary-green);

    border: 1px solid rgba(54, 124, 43, 0.1);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}


.resource-list li:hover {

    transform: translateX(5px);

    box-shadow: 0 4px 12px rgba(54, 124, 43, 0.15);

}


.resource-list a {

    color: var(--primary-green);

    text-decoration: none;

    font-weight: 600;

    font-size: 1.1em;

}


.resource-list a:hover {

    text-decoration: underline;

}


.resource-list p {

    color: var(--text-light);

    margin-top: 5px;

    font-size: 0.9em;

}


/* Toast Notification */

.toast {

    position: fixed;

    bottom: 20px;

    right: 20px;

    background: var(--primary-green);

    color: var(--white);

    padding: 15px 20px;

    border-radius: 2px;

    box-shadow: 0 4px 8px rgba(0,0,0,0.2);

    display: none;

    z-index: 1000;

    animation: slideIn 0.3s ease;

}


.toast.show {

    display: block;

}


@keyframes slideIn {

    from {

        transform: translateX(100%);

        opacity: 0;

    }

    to {

        transform: translateX(0);

        opacity: 1;

    }

}


/* Documents Viewer */

.document-selector {

    margin-bottom: 20px;

}


.document-selector select {

    width: 100%;

    padding: 12px;

    border: 2px solid var(--primary-green);

    border-radius: 2px;

    font-size: 1em;

    background: var(--white);

    color: var(--text-dark);

    cursor: pointer;

}


.document-selector select:focus {

    outline: none;

    border-color: var(--dark-green);

}


.markdown-content {

    background: var(--white);

    padding: 30px;

    border-radius: 10px;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    max-height: 70vh;

    overflow-y: auto;

    line-height: 1.8;

}


.markdown-content h1 {

    color: var(--primary-green);

    border-bottom: 3px solid var(--accent-yellow);

    padding-bottom: 10px;

    margin-bottom: 20px;

    font-size: 2em;

}


.markdown-content h2 {

    color: var(--primary-green);

    margin-top: 30px;

    margin-bottom: 15px;

    font-size: 1.6em;

    border-bottom: 2px solid var(--light-green);

    padding-bottom: 8px;

}


.markdown-content h3 {

    color: var(--dark-green);

    margin-top: 25px;

    margin-bottom: 12px;

    font-size: 1.3em;

}


.markdown-content h4 {

    color: var(--text-dark);

    margin-top: 20px;

    margin-bottom: 10px;

    font-size: 1.1em;

}


.markdown-content p {

    margin-bottom: 15px;

    color: var(--text-dark);

}


.markdown-content ul,

.markdown-content ol {

    margin-bottom: 15px;

    padding-left: 30px;

}


.markdown-content li {

    margin-bottom: 8px;

    color: var(--text-dark);

}


.markdown-content code {

    background: var(--light-gray);

    padding: 2px 6px;

    border-radius: 2px;

    font-family: 'Courier New', monospace;

    font-size: 0.9em;

    color: var(--primary-green);

}


.markdown-content pre {

    background: var(--light-gray);

    padding: 15px;

    border-radius: 2px;

    overflow-x: auto;

    margin-bottom: 15px;

    border-left: 4px solid var(--primary-green);

}


.markdown-content pre code {

    background: transparent;

    padding: 0;

    color: var(--text-dark);

}


.markdown-content blockquote {

    border-left: 4px solid var(--accent-yellow);

    padding-left: 20px;

    margin: 20px 0;

    color: var(--text-light);

    font-style: italic;

}


.markdown-content table {

    width: 100%;

    border-collapse: collapse;

    margin: 20px 0;

}


.markdown-content table th,

.markdown-content table td {

    border: 1px solid var(--light-gray);

    padding: 10px;

    text-align: left;

}


.markdown-content table th {

    background: var(--primary-green);

    color: var(--white);

    font-weight: 600;

}


.markdown-content table tr:nth-child(even) {

    background: var(--light-green);

}


.markdown-content hr {

    border: none;

    border-top: 2px solid var(--light-gray);

    margin: 30px 0;

}


.markdown-content strong {

    color: var(--primary-green);

    font-weight: 600;

}


.markdown-content a {

    color: var(--primary-green);

    text-decoration: none;

}


.markdown-content a:hover {

    text-decoration: underline;

}


.markdown-content input[type="checkbox"] {

    margin-right: 8px;

    cursor: pointer;

}


.loading {

    text-align: center;

    padding: 40px;

    color: var(--text-light);

}


/* Hero Image Section */

.hero-section {

    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);

    border-radius: 12px;

    padding: 40px;

    margin-bottom: 40px;

    color: var(--white);

    text-align: center;

    position: relative;

    overflow: hidden;

}


.hero-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: url('images/621d8b8a444813397d4d2af7_60eee63ecb46a54841e73fb6_westerntractor-cta1.jpg') center/cover;

    opacity: 0.2;

    z-index: 0;

}


.hero-content {

    position: relative;

    z-index: 1;

}


/* Responsive */

@media (max-width: 768px) {

    header h1 {

        font-size: 1.8em;

    }


    .logo-container img {

        max-height: 60px;

    }


    .tabs {

        flex-direction: column;

        padding: 10px;

    }


    .tab-button {

        width: 100%;

    }


    .examples-grid {

        grid-template-columns: 1fr;

    }


    .button-group {

        flex-direction: column;

    }


    .btn {

        width: 100%;

    }


    .markdown-content {

        padding: 20px;

        max-height: 60vh;

    }


    .prompt-builder {

        padding: 20px;

    }


    section > div[style*="grid-template-columns: 1fr 1fr"] {

        grid-template-columns: 1fr !important;

    }


    section > div[style*="grid-template-columns: 1fr 300px"] {

        grid-template-columns: 1fr !important;

    }

}