*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary:#0a0a0a;--bg-secondary:#111;--bg-card:#171717;--bg-card-hover:#1e1e1e;--border:#262626;--border-hover:#404040;--text-primary:#ededed;--text-secondary:#a1a1a1;--text-muted:#666;--accent:#0070f3;--accent-hover:#0060df;--danger:#ef4444;--danger-hover:#dc2626;--success:#22c55e;--radius:12px;--radius-sm:8px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container,body{min-height:100vh}.container{max-width:720px;margin:0 auto;padding:3rem 1.5rem;display:flex;flex-direction:column}.header{margin-bottom:3rem}.header h1{font-size:2rem;font-weight:700;letter-spacing:-.03em;margin-bottom:.75rem}.header p{font-size:.85rem;display:flex;gap:.5rem;flex-wrap:wrap}.header p,.tech-badge{color:var(--text-secondary);align-items:center}.tech-badge{display:inline-flex;padding:.2rem .55rem;font-size:.75rem;font-weight:500;background:var(--bg-secondary);border:1px solid var(--border);border-radius:100px;letter-spacing:.01em}.form-wrapper{flex-direction:column;margin-bottom:2.5rem}.form-row,.form-wrapper{display:flex;gap:.75rem}.form-input{flex:1 1;padding:.75rem 1rem;font-size:.95rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);outline:none;transition:border-color .15s ease}.form-input::placeholder{color:var(--text-muted)}.form-input:focus{border-color:var(--accent)}.btn{padding:.75rem 1.25rem;font-size:.9rem;font-weight:500;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;white-space:nowrap}.btn-primary{background:var(--text-primary);color:var(--bg-primary)}.btn-primary:hover{background:#fff}.btn-delete{background:transparent;color:var(--text-muted);padding:.5rem;border-radius:6px;display:flex;align-items:center;justify-content:center}.btn-delete:hover{background:rgba(239,68,68,.1);color:var(--danger)}.color-picker{display:flex;gap:.5rem;align-items:center}.color-dot{border:none;cursor:pointer;border-radius:50%;background:var(--dot-color);transition:all .15s ease;padding:0;position:relative}.color-dot-sm{width:18px;height:18px}.color-dot:after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;transition:border-color .15s ease}.color-dot-selected:after{border-color:var(--dot-color)}.color-dot:hover{transform:scale(1.15)}.form-options-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.file-input-row{display:flex;align-items:center;gap:.5rem}.file-input-hidden{display:none}.btn-file,.file-input-label{cursor:pointer}.btn-file{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;font-size:.78rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);transition:border-color .15s ease}.btn-file:hover{border-color:var(--border-hover)}.file-name{font-size:.78rem;color:var(--text-secondary);display:flex;align-items:center;gap:.3rem;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-remove{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem;line-height:1;padding:0 .15rem;flex-shrink:0}.file-remove:hover{color:var(--danger)}.items-list{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.item-card{display:flex;align-items:center;padding:.875rem 1.25rem;background:var(--bg-card);transition:background .15s ease;gap:1rem}.item-card:hover{background:var(--bg-card-hover)}.item-color-bar{width:4px;height:32px;border-radius:2px;flex-shrink:0;transition:background-color .15s ease}.item-info{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1 1}.item-name{font-size:.95rem;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-date{font-size:.75rem;color:var(--text-muted)}.item-attachment{font-size:.75rem;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:.25rem;margin-top:.1rem}.item-attachment:hover{text-decoration:underline}.item-actions{flex-shrink:0}.empty-state{text-align:center;padding:3rem 1.5rem;border:1px dashed var(--border);border-radius:var(--radius);color:var(--text-secondary)}.empty-state p{font-size:.95rem}.error-banner{padding:.75rem 1rem;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-sm);color:var(--danger);font-size:.85rem;margin-bottom:1.5rem}.loading{text-align:center;padding:3rem}.item-count,.loading{color:var(--text-muted)}.item-count{font-size:.8rem;margin-bottom:.75rem}.footer{margin-top:auto;padding-top:3rem;text-align:center;font-size:.75rem;color:var(--text-muted);display:flex;justify-content:center;gap:.4rem}.footer-dot{opacity:.4}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .2s ease-out}