:root{--color-primary:#4a7cff;--color-secondary:#6ed3cf;--color-background:#f7f9fc;--color-accent:#ffd166;--font-sans:"Inter", ui-sans-serif, system-ui, sans-serif;--font-display:"Nunito", ui-sans-serif, system-ui, sans-serif;--font-heading:"Poppins", ui-sans-serif, system-ui, sans-serif}*{box-sizing:border-box}body{font-family:var(--font-sans);background-color:var(--color-background);min-height:100vh;margin:0}.app{min-height:100vh;padding:16px 16px 88px}.app.loading{justify-content:center;align-items:center;display:flex}.app.error{color:#c00;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex}.cards-grid{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.card-wrap{flex-direction:column;align-items:center;gap:6px;display:flex}.card-toolbar{flex-wrap:wrap;justify-content:center;gap:4px;max-width:180px;display:flex}.card-tool-btn{cursor:pointer;color:#444;background:#fff;border:1px solid #0000001f;border-radius:8px;min-width:32px;height:32px;padding:0 6px;font-size:14px;line-height:1}.card-tool-btn:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary);background:#eef2ff}.card-tool-btn:disabled{opacity:.35;cursor:not-allowed}.card-tool-danger:hover:not(:disabled){color:#c00;background:#fde8e8;border-color:#c00}.card{cursor:pointer;min-width:120px;max-width:180px;font:inherit;background:#fff;border:none;border-radius:16px;flex-direction:column;flex:1;align-items:center;padding:16px;transition:transform .1s,box-shadow .1s;display:flex;box-shadow:0 2px 8px #00000014}.card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001f}.card:active{transform:translateY(0)}.card-image{object-fit:cover;background:#eee;border-radius:12px;width:80px;height:80px;margin-bottom:12px}.card-label{color:#222;text-align:center;font-size:18px;font-weight:600;font-family:var(--font-heading)}.how-it-works-btn{color:#666;cursor:pointer;z-index:10;background:#fff;border:1px solid #00000026;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;font-weight:600;line-height:1;display:flex;position:fixed;top:16px;right:16px;box-shadow:0 2px 6px #00000014}.how-it-works-btn:hover{color:#333;background:#f0f0f0}.modal-box.how-it-works{max-width:420px}.modal-box.how-it-works .how-it-works-intro{color:#444;margin:0 0 16px;line-height:1.5}.modal-box.how-it-works .how-it-works-steps{color:#333;margin:0 0 16px;padding-left:20px;line-height:1.6}.modal-box.how-it-works .how-it-works-steps li{margin-bottom:8px}.fab{background:var(--color-primary);color:#fff;cursor:pointer;border:none;border-radius:28px;justify-content:center;align-items:center;width:56px;height:56px;font-size:28px;font-weight:700;line-height:1;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 4px 12px #4a7cff66}.fab:hover{background:#3d6ae6}.modal-backdrop{z-index:100;background:#00000040;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-box{background:#fff;border-radius:16px;width:100%;max-width:400px;padding:24px;box-shadow:0 8px 32px #00000026}.modal-box h2{font-family:var(--font-heading);margin:0 0 16px;font-size:20px}.modal-box input,.modal-box textarea{border:1px solid #ddd;border-radius:8px;width:100%;margin-bottom:12px;padding:10px 12px;font-family:inherit;font-size:16px}.modal-box .file-label{text-align:center;cursor:pointer;background:#eee;border-radius:8px;margin-bottom:12px;padding:10px 12px;font-size:14px;display:block}.modal-box .file-label:hover{background:#e0e0e0}.modal-box input[type=file]{display:none}.modal-box .preview{object-fit:cover;border-radius:8px;width:80px;height:80px;margin-bottom:12px;display:block}.modal-actions{gap:12px;margin-top:16px;display:flex}.modal-actions button{cursor:pointer;border:none;border-radius:8px;flex:1;padding:10px 16px;font-family:inherit;font-size:16px;font-weight:600}.modal-actions .primary{background:var(--color-primary);color:#fff}.modal-actions .primary:disabled{cursor:not-allowed;background:#ccc}.modal-actions .secondary{color:#333;background:#eee}.modal-actions .secondary:hover{background:#e0e0e0}.modal-actions .primary.danger{background:#c62828}.modal-actions .primary.danger:hover:not(:disabled){background:#b71c1c}.modal-inline-error{color:#8b0000;background:#fde8e8;border-radius:8px;margin-bottom:12px;padding:10px 12px;font-size:14px}.modal-inline-error p{margin:0 0 6px}.linkish{color:var(--color-primary);cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit;font-size:14px;text-decoration:underline}.remove-image-btn{width:100%;margin-bottom:12px}.app-action-banner{color:#5d4037;background:#fff3e0;border:1px solid #ffcc80;border-radius:10px;justify-content:space-between;align-items:flex-start;gap:12px;margin:0 0 12px;padding:10px 12px;font-size:14px;display:flex}.app-action-banner p{flex:1;margin:0}.app-action-banner button{color:#5d4037;cursor:pointer;background:0 0;border:none;flex-shrink:0;font-family:inherit;font-weight:600}.btn-primary{cursor:pointer;background:var(--color-primary);color:#fff;border:none;border-radius:8px;padding:10px 20px;font-family:inherit;font-size:16px;font-weight:600}