*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0f0f14;--surface: #1a1a24;--card: #22222e;--border: #2a2a3a;--text: #e4e4ed;--text-dim: #8888a0;--primary: #6366f1;--primary-hover: #818cf8;--danger: #ef4444;--gold: #f59e0b;--radius: 12px;--radius-sm: 8px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6}#root{max-width:1200px;margin:0 auto;padding:0 20px}.app{padding:40px 0}.header{text-align:center;padding:40px 0 32px}.header h1{font-size:2.8rem;background:linear-gradient(135deg,var(--primary),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px}.subtitle{color:var(--text-dim);margin-top:8px;font-size:1.1rem}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:32px;flex-wrap:wrap}.search-form{display:flex;gap:8px;flex:1;max-width:500px}.search-input{flex:1;padding:10px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.95rem;outline:none;transition:border-color .2s}.search-input:focus{border-color:var(--primary)}.btn{padding:10px 20px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);cursor:pointer;font-size:.9rem;transition:all .2s;white-space:nowrap}.btn:hover{background:var(--card)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-search{background:var(--primary);border-color:var(--primary);color:#fff}.btn-back{background:transparent;border-color:transparent;color:var(--primary);padding-left:0;font-size:1rem;margin-bottom:24px}.btn-back:hover{background:transparent;color:var(--primary-hover)}.movie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.movie-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .2s,border-color .2s}.movie-card:hover{transform:translateY(-4px);border-color:var(--primary)}.card-poster{aspect-ratio:2 / 3;background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden}.card-poster img{width:100%;height:100%;object-fit:cover}.placeholder-poster{font-size:3rem;opacity:.3}.placeholder-poster.large{font-size:6rem}.card-info{padding:16px}.card-title{font-size:1.05rem;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-meta{font-size:.82rem;color:var(--text-dim);margin-bottom:8px}.card-genre{display:inline-block;padding:2px 10px;background:#6366f126;color:var(--primary-hover);border-radius:20px;font-size:.75rem;margin-bottom:8px}.stars{display:inline-flex;align-items:center;gap:2px}.star{color:var(--border);font-size:.85rem}.star.filled{color:var(--gold)}.rating-num{margin-left:6px;font-size:.85rem;color:var(--text-dim)}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:40px;padding-bottom:40px}.page-info{color:var(--text-dim);font-size:.9rem}.detail-view{padding-top:20px}.detail-content{display:flex;gap:40px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px}.detail-poster{width:280px;flex-shrink:0;aspect-ratio:2 / 3;background:var(--surface);border-radius:var(--radius-sm);overflow:hidden;display:flex;align-items:center;justify-content:center}.detail-poster img{width:100%;height:100%;object-fit:cover}.detail-info{flex:1}.detail-info h2{font-size:2rem;margin-bottom:8px}.detail-meta{display:flex;gap:20px;margin:20px 0;color:var(--text-dim);font-size:.95rem}.detail-desc{margin:20px 0 28px;color:var(--text-dim);line-height:1.8}.detail-actions{display:flex;gap:12px}.form-view{max-width:640px;margin:0 auto;padding-top:20px}.form-view h2{margin-bottom:32px;font-size:1.6rem}.movie-form{display:flex;flex-direction:column;gap:20px}.movie-form label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--text-dim)}.required{color:var(--danger)}.movie-form input,.movie-form textarea{padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.95rem;outline:none;transition:border-color .2s}.movie-form input:focus,.movie-form textarea:focus{border-color:var(--primary)}.movie-form textarea{resize:vertical;font-family:inherit}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.movie-form .btn-primary{margin-top:8px;padding:12px;font-size:1rem}.loading,.empty{text-align:center;padding:80px 20px;color:var(--text-dim);font-size:1.1rem}.error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:var(--danger);padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:20px;font-size:.9rem}.external-section{margin-top:32px;margin-bottom:32px}.external-heading{font-size:1.1rem;margin-bottom:16px;color:var(--text-dim);font-weight:500}.external-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.external-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .2s}.external-card:hover{border-color:var(--primary)}.external-poster{aspect-ratio:2 / 3;background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden}.external-poster img{width:100%;height:100%;object-fit:cover}.external-info{padding:12px}.external-title{font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.external-sub{font-size:.78rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}.external-year{font-size:.82rem;color:var(--text-dim);margin-bottom:10px}.external-info .btn-primary{padding:6px 14px;font-size:.82rem}.external-empty p{margin:0}@media(max-width:768px){.detail-content{flex-direction:column;padding:20px}.detail-poster{width:100%;max-width:240px;margin:0 auto}.form-row{grid-template-columns:1fr}.toolbar{flex-direction:column}.search-form{max-width:100%}}
