:root {
    --bg-main: #f4f7f6;
    --bg-card: #ffffff;
    --bg-filters: #ffffff;
    --border-color: #e0e0e0;
    --text-primary: #1a1a1a;
    --text-secondary: #555555;
    --accent-blue: #007aff;
    --color-featured: #ff9500;
    
    --tag-writing: #007aff;
    --tag-organizing: #34c759;
    --tag-planning: #ff9500;
    --tag-creating: #af52de;
    --tag-audio: #5856d6;
    --tag-coders: #8e8e93;
    --tag-price: #8e8e93;
}

body { 
    font-family: 'Inter', sans-serif; 
    margin: 0; 
    padding: 0;
    background-color: var(--bg-main); 
    color: var(--text-primary); 
}

.container { 
    max-width: 900px; 
    margin: 0 auto; 
    background-color: transparent;
    padding: 20px; 
    padding-bottom: 60px;
    border-radius: 0; 
    border: none; 
    box-shadow: none; 
}

h1 { 
    border-bottom: 2px solid var(--border-color); 
    padding-bottom: 10px; 
    color: var(--text-primary); 
}

.filter-section { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 25px; padding: 20px; background-color: var(--bg-filters); border-radius: 12px; border: 1px solid var(--border-color); }
.filter-group { display: flex; flex-direction: column; }
label { font-weight: 600; margin-bottom: 8px; font-size: 0.9em; color: var(--text-secondary); }
select, input[type="text"] { padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1em; box-sizing: border-box; background-color: #fdfdfd; color: var(--text-primary); -webkit-appearance: none; appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23888888%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 12px top 50%; background-size: .65em auto; }
.search-group { grid-column: 1 / -1; }
#tool-list { list-style-type: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.tool-item { background: var(--bg-card); border: 1px solid var(--border-color); padding: 20px; margin-bottom: 0; border-radius: 12px; transition: all 0.2s ease-in-out; display: flex; flex-direction: column; box-shadow: 0 4px 12px rgba(0,0,0,0.05); position: relative; overflow: hidden; }
.tool-item:hover { border-color: #c0c0c0; transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.featured-badge { position: absolute; top: 10px; right: -30px; background-color: var(--color-featured); color: white; padding: 4px 30px; font-size: 0.8em; font-weight: 600; transform: rotate(45deg); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.tool-item.is-featured { border-color: var(--color-featured); box-shadow: 0 6px 20px rgba(255, 149, 0, 0.2); }
.tool-item.is-featured:hover { border-color: #e68a00; }
.tool-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.tool-header { display: flex; align-items: center; margin-bottom: 12px; }
.tool-icon { width: 36px; height: 36px; border-radius: 8px; margin-right: 12px; background-color: #ffffff; border: 1px solid var(--border-color); }
.tool-item h3 { margin: 0; color: var(--accent-blue); }
.tool-item p { margin: 0; font-size: 0.95em; color: var(--text-secondary); line-height: 1.6; flex-grow: 1; }
.tags { margin-top: 15px; }
.tag { display: inline-block; color: #ffffff; padding: 5px 10px; border-radius: 5px; font-size: 0.8em; font-weight: 600; margin-right: 8px; text-transform: capitalize; }
.tag-writing-emails { background-color: var(--tag-writing); }
.tag-organizing-my-life { background-color: var(--tag-organizing); }
.tag-planning-ideas { background-color: var(--tag-planning); }
.tag-creating-images-art { background-color: var(--tag-creating); }
.tag-audio-video { background-color: var(--tag-audio); }
.tag-for-coders { background-color: var(--tag-coders); }
.tag-price { background-color: #f0f0f0; color: #555; border: 1px solid #ddd; }

@media (max-width: 800px) {
    .filter-section {
        grid-template-columns: 1fr;
    }
}

.footer {
    width: 100%;
    padding: 30px 0;
    text-align: center;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-card);
    margin-top: 40px;
}
.footer-content {
    max-width: 900px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: 0.9em;
}
.footer-content a {
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: none;
    margin: 0 10px;
}
.footer-content a:hover {
    text-decoration: underline;
}
.footer-content p {
    margin: 0 0 10px 0;
}