NeuralNodeAI/Freelance_Elite

1/* style.css */2@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');3 4body {5    background: #f1f5f9;6    font-family: 'Inter', sans-serif;7    margin: 0;8    padding: 40px 20px;9    color: #0f172a;10}11 12.container { max-width: 900px; margin: 0 auto; }13 14header { text-align: center; margin-bottom: 40px; }15header h1 { font-size: 2.5rem; margin: 0; color: #4f46e5; font-weight: 800; }16header p { color: #64748b; margin-top: 10px; font-size: 1.1rem; }17 18.task-form {19    display: flex; gap: 12px; margin-bottom: 40px;20    background: white; padding: 20px; border-radius: 16px;21    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);22}23 24.task-form input {25    flex: 1; padding: 12px 16px; border: 1px solid #e2e8f0;26    border-radius: 10px; font-size: 1rem; outline: none; transition: 0.2s;27}28 29.task-form input:focus { border-color: #4f46e5; ring: 2px #4f46e5; }30 31.task-form button {32    background: #4f46e5; color: white; border: none;33    padding: 0 24px; border-radius: 10px; cursor: pointer;34    font-weight: 600; transition: background 0.2s;35}36 37.task-form button:hover { background: #4338ca; }38 39.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }40 41.task-card {42    background: white; padding: 24px; border-radius: 16px;43    border-top: 4px solid #4f46e5; transition: transform 0.2s;44    box-shadow: 0 2px 4px rgba(0,0,0,0.05);45}46 47.task-card:hover { transform: translateY(-5px); }48.task-card.completed { border-top-color: #10b981; opacity: 0.7; }49.task-card.completed h3 { text-decoration: line-through; color: #94a3b8; }50 51.card-content h3 { margin: 0 0 12px 0; font-size: 1.25rem; font-weight: 700; }52.client-badge { 53    font-size: 0.85rem; background: #f8fafc; color: #64748b; 54    padding: 4px 10px; border-radius: 20px; border: 1px solid #e2e8f0;55}56 57.card-actions { margin-top: 24px; display: flex; gap: 10px; }58.btn { 59    text-decoration: none; font-size: 0.85rem; padding: 8px 12px; 60    border-radius: 8px; font-weight: 600; flex: 1; text-align: center;61}62 63.complete { background: #dcfce7; color: #166534; }64.delete { background: #fee2e2; color: #991b1b; }65 66.empty-msg { text-align: center; color: #94a3b8; font-size: 1.1rem; margin-top: 50px; }67 68@media (max-width: 600px) { .task-form { flex-direction: column; } }