:root{--color-primary:#7c3aed;--color-primary-hover:#6d28d9;--color-primary-active:#5b21b6;--color-accent:#ec4899;--color-accent-hover:#db2777;--color-background:#fff;--color-surface:#f9fafb;--color-border:#e5e7eb;--color-text:#111827;--color-text-secondary:#6b7280;--color-danger:#ef4444;--color-danger-hover:#dc2626;--color-success:#10b981;--color-watched:#059669;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;--radius:8px;--radius-lg:12px;--spacing-xs:.5rem;--spacing-sm:.75rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--color-background);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6}#root{min-height:100vh}.app{max-width:1200px;padding:var(--spacing-lg);margin:0 auto}button{cursor:pointer;border:none;outline:none;font-family:inherit;transition:all .2s}button:disabled{opacity:.5;cursor:not-allowed}.btn{padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius);justify-content:center;align-items:center;gap:var(--spacing-xs);font-size:.875rem;font-weight:500;display:inline-flex}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover)}.btn-primary:active{background:var(--color-primary-active)}.btn-secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-border)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover{background:var(--color-danger-hover)}.btn-small{padding:var(--spacing-xs) var(--spacing-md);font-size:.75rem}.btn-back{color:var(--color-primary);padding:var(--spacing-xs) var(--spacing-md);background:0 0;font-size:.875rem}.btn-back:hover{background:var(--color-surface)}.movie-list-screen{gap:var(--spacing-xl);flex-direction:column;display:flex}.movie-list-header{justify-content:space-between;align-items:center;gap:var(--spacing-md);flex-wrap:wrap;display:flex}.movie-list-header h1{color:var(--color-text);font-size:2rem;font-weight:700}.sort-controls{gap:var(--spacing-md);align-items:center;display:flex}.sort-controls label{align-items:center;gap:var(--spacing-sm);color:var(--color-text-secondary);font-size:.875rem;display:flex}.sort-controls select{padding:var(--spacing-xs) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-background);color:var(--color-text);cursor:pointer;font-size:.875rem}.sort-controls select:hover{border-color:var(--color-primary)}.empty-state{text-align:center;padding:var(--spacing-xl);background:var(--color-surface);border-radius:var(--radius-lg);gap:var(--spacing-md);flex-direction:column;align-items:center;display:flex}.empty-state p{color:var(--color-text);font-size:1.125rem;font-weight:600}.empty-state-subtitle{color:var(--color-text-secondary);font-size:.875rem;font-weight:400}.movie-grid{gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}@media (width<=640px){.movie-grid{grid-template-columns:1fr}}.movie-card{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;transition:transform .2s,box-shadow .2s;display:flex;overflow:hidden}.movie-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.movie-poster-container{aspect-ratio:2/3;background:var(--color-surface);width:100%;position:relative;overflow:hidden}.movie-poster{object-fit:cover;width:100%;height:100%}.watched-badge{top:var(--spacing-sm);right:var(--spacing-sm);background:var(--color-watched);color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius);box-shadow:var(--shadow-md);font-size:.75rem;font-weight:600;position:absolute}.movie-info{padding:var(--spacing-md);gap:var(--spacing-sm);flex-direction:column;flex:1;display:flex}.movie-title{color:var(--color-text);font-size:1.125rem;font-weight:600;line-height:1.4}.movie-genre{color:var(--color-text-secondary);font-size:.875rem}.movie-rating{align-items:center;gap:var(--spacing-xs);display:flex}.rating-stars{color:var(--color-accent);letter-spacing:2px;font-size:1rem}.rating-number{color:var(--color-text-secondary);font-size:.875rem;font-weight:500}.movie-actions{gap:var(--spacing-xs);margin-top:var(--spacing-sm);display:flex}.movie-actions .btn{flex:1}.add-movie-screen{gap:var(--spacing-xl);flex-direction:column;max-width:600px;margin:0 auto;display:flex}.screen-header{align-items:center;gap:var(--spacing-md);display:flex}.screen-header h1{color:var(--color-text);font-size:2rem;font-weight:700}.movie-form{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);gap:var(--spacing-lg);flex-direction:column;display:flex}.form-group{gap:var(--spacing-xs);flex-direction:column;display:flex}.form-group label{color:var(--color-text);align-items:center;gap:var(--spacing-xs);font-size:.875rem;font-weight:500;display:flex}.form-input{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);background:var(--color-background);font-size:1rem;transition:border-color .2s}.form-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #7c3aed1a}.form-input::placeholder{color:var(--color-text-secondary)}.form-range{border-radius:var(--radius);background:var(--color-surface);-webkit-appearance:none;outline:none;width:100%;height:8px}.form-range::-webkit-slider-thumb{appearance:none;background:var(--color-primary);cursor:pointer;border-radius:50%;width:20px;height:20px;transition:transform .2s}.form-range::-webkit-slider-thumb:hover{transform:scale(1.1)}.form-range::-moz-range-thumb{background:var(--color-primary);cursor:pointer;border:none;border-radius:50%;width:20px;height:20px;transition:transform .2s}.form-range::-moz-range-thumb:hover{transform:scale(1.1)}.poster-preview{margin-top:var(--spacing-sm);border-radius:var(--radius);max-width:200px;box-shadow:var(--shadow-md);overflow:hidden}.poster-preview img{width:100%;display:block}.form-actions{gap:var(--spacing-md);margin-top:var(--spacing-md);display:flex}.form-actions .btn{flex:1}@media (width<=640px){.app{padding:var(--spacing-md)}.movie-list-header h1,.screen-header h1{font-size:1.5rem}.movie-form{padding:var(--spacing-lg)}}