:root {

    --primary-color: #58cc02;

    --primary-hover: #4aaf01;

    --secondary-color: #fff;

    --accent-color: #ff4b4b;

    --text-color: #3c3c3c;

    --light-gray: #f5f5f5;

    --border-color: #e1e1e1;

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

    --transition: all 0.3s ease;

    --border-radius: 12px;

}



/* Base styles and typography */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}



body {

    background-color: var(--light-gray);

    color: var(--text-color);

    line-height: 1.6;

    padding: 20px;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

}



/* Header and search bar */

header {

    margin-bottom: 30px;

    text-align: center;

}



h1 {

    margin-bottom: 20px;

    color: var(--primary-color);

}



.search-container {

    position: relative;

    max-width: 600px;

    margin: 0 auto;

}



#search-input {

    width: 100%;

    padding: 15px 20px;

    padding-right: 50px;

    border-radius: var(--border-radius);

    border: 2px solid var(--border-color);

    font-size: 18px;

    transition: var(--transition);

}



#search-input:focus {

    outline: none;

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

    box-shadow: 0 0 0 3px rgba(88, 204, 2, 0.2);

}



.search-icon {

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 20px;

    color: #aaa;

    pointer-events: none;

}



/* Tiles container and tile styles */

#tiles-container {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    justify-content: center;

}



.tile {

    background-color: var(--secondary-color);

    border-radius: var(--border-radius);

    box-shadow: var(--shadow);

    padding: 20px;

    width: 100%;

    max-width: 350px;

    transition: var(--transition);

    display: flex;

    flex-direction: column;

    position: relative;

    border: 2px solid transparent;

    overflow: hidden;

    animation: fadeIn 0.5s ease;

}



@keyframes fadeIn {

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

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

}



.tile:hover {

    transform: translateY(-3px);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

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

}



.tile-header {

    display: flex;

    align-items: center;

    margin-bottom: 15px;

    gap: 10px;

}



.tile-icon {

    font-size: 24px;

    background-color: var(--light-gray);

    border-radius: 50%;

    width: 45px;

    height: 45px;

    display: flex;

    justify-content: center;

    align-items: center;

}



.tile-title {

    flex: 1;

    font-size: 18px;

    font-weight: 600;

}



.tile-category {

    background-color: var(--primary-color);

    color: white;

    padding: 4px 8px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 600;

}



.tile-description {

    margin-bottom: 15px;

    font-size: 14px;

    color: #666;

}



/* Inline prompt styling */

.tile-prompt-inline {

    font-family: monospace;

    font-size: 14px;

    line-height: 1.4;

    margin-bottom: 15px;

}

.tile-prompt-inline textarea,

.tile-prompt-inline input {

    font-family: monospace;

    font-size: 14px;

    padding: 3px;

    margin: 0 2px;

    vertical-align: middle;

    border: 1px solid var(--border-color);

    border-radius: 4px;

}



/* Form styles within each tile */

.tile-form {

    margin-top: auto;

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.submit-btn {

    background-color: var(--primary-color);

    color: white;

    border: none;

    padding: 12px;

    border-radius: 8px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

}



.submit-btn:hover {

    background-color: var(--primary-hover);

    transform: translateY(-2px);

}



.submit-btn:active {

    transform: translateY(0);

}



.highlight {

    background-color: rgba(255, 217, 0, 0.5);

    border-radius: 3px;

    padding: 0 2px;

}



.no-results {

    text-align: center;

    width: 100%;

    padding: 40px;

    font-size: 18px;

    color: #666;

}



@media screen and (max-width: 768px) {

    .tile {

        max-width: 100%;

    }

    

    body {

        padding: 10px;

    }

}