:root{--rose: #f4a0a0;--lavender: #c4b5fd;--sky: #93c5fd;--mint: #86efac;--amber: #fcd34d;--peach: #fdba74;--pink-light: #fce7f3;--bg: #faf5f0;--bg-card: #ffffff;--text: #3d2e2e;--text-muted: #8a7575;--border: rgba(0, 0, 0, .06);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .03);--shadow-md: 0 4px 12px rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .04);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .08), 0 4px 8px rgba(0, 0, 0, .04);--radius: 14px;--radius-sm: 8px;--transition: .2s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6;color:var(--text);background:linear-gradient(145deg,#fdf2f8,#f0f4ff,#f5f0eb 70%,#fef3c7);background-attachment:fixed;-webkit-font-smoothing:antialiased}#root{min-height:100vh}.app{max-width:1200px;margin:0 auto;padding:0 1.25rem 3rem}.header{position:sticky;top:0;z-index:50;padding:1.25rem 0 .75rem;background:linear-gradient(180deg,#faf5f0 70%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.header-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}.brand-title{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,#c084fc,#f472b6,#fb923c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.brand-sub{font-size:.875rem;color:var(--text-muted);margin-top:.1rem}.header-actions{display:flex;gap:.5rem;align-items:center}.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border:none;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition);white-space:nowrap}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#c084fc,#f472b6);color:#fff;box-shadow:0 2px 8px #c084fc4d}.btn-primary:hover:not(:disabled){box-shadow:0 4px 16px #c084fc73;transform:translateY(-1px)}.btn-accent{background:linear-gradient(135deg,#fcd34d,#fb923c);color:#5c3d0a;box-shadow:0 2px 8px #fb923c40}.btn-accent:hover:not(:disabled){box-shadow:0 4px 16px #fb923c66;transform:translateY(-1px)}.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}.btn-ghost:hover{background:#00000008;color:var(--text)}.btn-sm{padding:.35rem .7rem;font-size:.78rem}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:6px;background:transparent;color:var(--text-muted);cursor:pointer;transition:all var(--transition)}.icon-btn:hover{background:#0000000f;color:var(--text)}.icon-btn-danger:hover{background:#fef2f2;color:#ef4444}.filter-bar{display:flex;gap:.4rem;padding:.75rem 0 .25rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.filter-bar::-webkit-scrollbar{display:none}.filter-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .85rem;border:1.5px solid var(--border);border-radius:100px;background:#ffffffb3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-size:.8rem;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all var(--transition);white-space:nowrap}.filter-chip:hover{border-color:#0000001f;background:#ffffffe6}.filter-chip.active{background:#fff;border-color:#0000001f;color:var(--text);box-shadow:var(--shadow-sm)}.filter-chip[data-cat=career].active{border-color:var(--lavender);background:#f5f3ff}.filter-chip[data-cat=travel].active{border-color:var(--sky);background:#eff6ff}.filter-chip[data-cat=health].active{border-color:var(--mint);background:#f0fdf4}.filter-chip[data-cat=relationships].active{border-color:var(--rose);background:#fff1f2}.filter-chip[data-cat=personal-growth].active{border-color:var(--amber);background:#fffbeb}.filter-count{font-size:.7rem;font-weight:700;background:#0000000f;padding:.1rem .4rem;border-radius:100px;min-width:18px;text-align:center}.form-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-items:center;background:#3d2e2e40;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn .15s ease}.form-modal{width:min(480px,calc(100vw - 2rem));background:var(--bg-card);border-radius:var(--radius);padding:1.75rem;box-shadow:var(--shadow-lg);animation:slideUp .2s ease}.form-modal h2{font-size:1.15rem;font-weight:700;margin-bottom:1rem;color:var(--text)}.form-type-toggle{display:flex;gap:.35rem;background:#f5f0eb;border-radius:var(--radius-sm);padding:.25rem;margin-bottom:.85rem}.form-type-toggle button{flex:1;padding:.45rem;border:none;border-radius:6px;background:transparent;font-size:.82rem;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all var(--transition)}.form-type-toggle button.active{background:#fff;color:var(--text);box-shadow:var(--shadow-sm)}.form-input{width:100%;padding:.65rem .85rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:#faf8f6;font-size:.9rem;font-family:inherit;color:var(--text);resize:vertical;transition:border-color var(--transition);line-height:1.5}.form-input::placeholder{color:#c4b5b5}.form-input:focus{outline:none;border-color:var(--lavender);box-shadow:0 0 0 3px #c4b5fd26}.form-categories{display:flex;flex-wrap:wrap;gap:.35rem;margin:.85rem 0}.cat-chip{padding:.35rem .7rem;border:1.5px solid var(--border);border-radius:100px;background:transparent;font-size:.78rem;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all var(--transition)}.cat-chip:hover{border-color:#0000001f}.cat-chip.active[data-cat=career]{background:#f5f3ff;border-color:var(--lavender);color:#6d28d9}.cat-chip.active[data-cat=travel]{background:#eff6ff;border-color:var(--sky);color:#1d4ed8}.cat-chip.active[data-cat=health]{background:#f0fdf4;border-color:var(--mint);color:#15803d}.cat-chip.active[data-cat=relationships]{background:#fff1f2;border-color:var(--rose);color:#be123c}.cat-chip.active[data-cat=personal-growth]{background:#fffbeb;border-color:var(--amber);color:#b45309}.form-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}.board{padding-top:.5rem}.masonry{columns:3;column-gap:1rem}@media(max-width:900px){.masonry{columns:2}}@media(max-width:560px){.masonry{columns:1}}.vision-card{break-inside:avoid;margin-bottom:1rem;background:var(--bg-card);border-radius:var(--radius);border:1.5px solid var(--border);overflow:hidden;transition:box-shadow var(--transition),transform var(--transition);cursor:grab;box-shadow:var(--shadow-sm)}.vision-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.vision-card:active{cursor:grabbing;box-shadow:var(--shadow-lg);transform:scale(1.01)}.vision-card[draggable=true]{-webkit-user-select:none;user-select:none}.vision-card[data-cat=career]{border-top:3px solid var(--lavender)}.vision-card[data-cat=travel]{border-top:3px solid var(--sky)}.vision-card[data-cat=health]{border-top:3px solid var(--mint)}.vision-card[data-cat=relationships]{border-top:3px solid var(--rose)}.vision-card[data-cat=personal-growth]{border-top:3px solid var(--amber)}.card-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem .85rem 0}.card-category{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}.card-actions{display:flex;gap:.15rem;opacity:0;transition:opacity var(--transition)}.vision-card:hover .card-actions{opacity:1}.card-text{padding:.5rem .85rem .85rem;font-size:.92rem;line-height:1.6;color:var(--text)}.vision-card.text{background:linear-gradient(145deg,#fffbf5,#fdf8ff)}.card-image-wrap{padding:0}.card-image-wrap img{width:100%;display:block;object-fit:cover;max-height:350px}.card-edit{padding:.5rem .85rem .85rem}.card-edit-actions{display:flex;justify-content:flex-end;gap:.35rem;margin-top:.5rem}.empty-state{text-align:center;padding:5rem 2rem}.empty-icon{font-size:3rem;margin-bottom:1rem}.empty-state h2{font-size:1.35rem;font-weight:700;color:var(--text);margin-bottom:.5rem}.empty-state p{font-size:.92rem;color:var(--text-muted);margin-bottom:1.5rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:560px){.header-top{flex-direction:column;gap:.6rem}.header-actions{width:100%;justify-content:flex-end}.brand-title{font-size:1.4rem}.btn{padding:.5rem .8rem;font-size:.8rem}.form-modal{padding:1.25rem;margin:0 .5rem}.card-actions{opacity:1}}