:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Segoe UI,Inter,Arial,sans-serif}*{box-sizing:border-box}body{color:#111b2a;background:linear-gradient(#f5f7fb 0%,#edf1f8 100%);margin:0}#root{min-height:100vh}.page{max-width:860px;margin:0 auto;padding:24px 16px 40px}.pageHeader h1{margin:0;font-size:2rem}.pageHeader p{color:#606a78;margin-top:6px}.pageHeader{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.headerTitleWrap{flex-grow:1}.addMovieButton{color:#fff;cursor:pointer;white-space:nowrap;background:#2a6bf2;border:none;border-radius:8px;flex-shrink:0;padding:10px 16px;font-size:.95rem;font-weight:600;transition:all .2s}.addMovieButton:hover{background:#1f52d4;box-shadow:0 2px 8px #2a6bf233}.addMovieButton:active{transform:scale(.98)}.searchWrap{margin-top:16px}.searchLabel{color:#425166;margin-bottom:6px;font-size:.92rem;display:block}.searchInput{color:#111b2a;background:#fff;border:1px solid #b6c0cf;border-radius:10px;width:100%;padding:10px 12px;font-size:1rem}.searchInput:focus{outline-offset:1px;border-color:#2a6bf2;outline:2px solid #2a6bf2}.state{margin-top:16px}.state.error{color:#ad1f1f}.state.duplicateNotice{color:#1c4eb8;background:#eaf2ff;border:1px solid #bdd3ff;border-radius:10px;padding:10px 12px}.emptyState{background:#f7f8fa;border:1px dashed #bfc7d3;border-radius:14px;margin-top:20px;padding:20px}.emptyState h2{margin:0;font-size:1.2rem}.emptyState p{color:#606a78;margin-top:6px}.listSection{gap:12px;margin-top:18px;display:grid}.virtualListViewport{border-radius:14px;height:min(78vh,1100px);margin-top:18px;padding-right:4px;overflow:auto}.virtualListInner{width:100%;position:relative}.virtualRow{box-sizing:border-box;width:100%;padding-bottom:12px;position:absolute;top:0;left:0}.movieCard{cursor:pointer;content-visibility:auto;contain-intrinsic-size:160px;background:#fff;border:1px solid #d9dde4;border-radius:14px;grid-template-columns:34px 60px 92px 1fr;align-items:center;gap:12px;padding:10px;transition:all .2s;display:grid}.movieCard:hover{border-color:#2a6bf2;box-shadow:0 2px 8px #2a6bf21f}.sortableMovieCard{cursor:default}.sortableMovieCard.dragging{opacity:.85;border-color:#2a6bf2;box-shadow:0 8px 18px #2a6bf233}.sortableMovieCard.dropTarget{border-color:#2a6bf2;position:relative;box-shadow:inset 0 0 0 2px #2a6bf238}.sortableMovieCard.dropTarget:before{content:"";background:linear-gradient(90deg,#2a6bf226,#2a6bf2,#2a6bf226);border-radius:999px;height:4px;position:absolute;top:-8px;left:12px;right:12px}.sortableMovieCard.dropTarget:after{content:"";filter:blur(1px);pointer-events:none;background:radial-gradient(#2a6bf252 0%,#2a6bf21f 42%,#2a6bf200 75%);border-radius:999px;height:12px;position:absolute;bottom:-14px;left:16px;right:16px}.movieCard:focus-visible{outline-offset:1px;outline:2px solid #2a6bf2}.movieCard.duplicateHighlight{border-color:#2a6bf2;animation:2.2s ease-out pulseHighlight;box-shadow:0 0 0 2px #2a6bf247}.dragHandle{color:#61738f;cursor:grab;touch-action:none;background:#f5f8fc;border:1px solid #c9d4e5;border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;line-height:1;display:flex}.dragHandle:active{cursor:grabbing}.dragHandle:hover{color:#2a6bf2;background:#eaf2ff;border-color:#2a6bf2}.dragHint{color:#5d6c84;background:#f5f8fc;border:1px solid #d9e3f2;border-radius:10px;margin-top:12px;padding:10px 12px;font-size:.92rem;display:none}@keyframes pulseHighlight{0%{box-shadow:0 0 #2a6bf27a}35%{box-shadow:0 0 0 10px #2a6bf200}to{box-shadow:0 0 0 2px #2a6bf247}}.rank{color:#1e334f;text-align:center;font-size:1.1rem;font-weight:700}.poster{object-fit:cover;background:#e8ebf0;border-radius:10px}.movieInfo h2{margin:0;font-size:1rem;line-height:1.35}.movieInfo p{color:#606a78;margin:4px 0 0;font-size:.95rem}@media (width<=640px){.page{padding:16px 10px 28px}.movieCard{grid-template-columns:30px 46px 72px 1fr;gap:10px;padding:8px}.virtualListViewport{height:min(74vh,900px)}.poster{width:72px;height:108px}.dragHandle{width:34px;height:34px;font-size:15px}.dragHint{margin-top:10px;font-size:.88rem;display:block}}.detailOverlay{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;padding:16px;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.detailOverlayContent{background:#fff;border-radius:12px;width:100%;max-width:500px;max-height:90vh;animation:.3s ease-out slideUp;position:relative;overflow-y:auto;box-shadow:0 10px 40px #0000004d}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.posterSection{text-align:center;padding:24px 24px 16px}.detailPoster{border-radius:8px;max-width:100%;height:auto;max-height:400px;box-shadow:0 4px 12px #00000026}.posterPlaceholder{color:#999;text-align:center;background:#f0f0f0;border-radius:8px;padding:60px 20px}.movieInfo{padding:0 24px 24px}.movieTitle{color:#1a1a1a;margin:0 0 12px;font-size:24px;font-weight:700;line-height:1.3}.movieDirector,.movieReleaseDate,.movieRank,.lastWatchedAt{color:#555;margin:8px 0;font-size:14px}.movieDirector strong,.movieReleaseDate strong,.movieRank strong,.lastWatchedAt strong{color:#333;font-weight:600}.synopsisSection{border-top:1px solid #eee;margin-top:16px;padding-top:16px}.synopsisSection strong{color:#333;margin-bottom:8px;font-weight:600;display:block}.synopsis{color:#666;margin:0;font-size:14px;line-height:1.6}.reviewSection{border-top:1px solid #eee;margin-top:16px;padding-top:16px}.reviewSection strong{color:#333;margin-bottom:8px;font-weight:600;display:block}.review{color:#666;margin:0;font-size:14px;font-style:italic;line-height:1.6}.editableSection{border-top:1px solid #eee;margin-top:20px;padding-top:16px}.formGroup{margin-bottom:14px}.formLabel{color:#333;margin-bottom:6px;font-size:14px;font-weight:600;display:block}.rankHelpText{color:#606a78;margin-top:6px;font-size:12px;display:block}.dateInput,.reviewTextarea{color:#111b2a;box-sizing:border-box;background:#fff;border:1px solid #b6c0cf;border-radius:8px;width:100%;padding:10px 12px;font-family:inherit;font-size:14px;transition:all .2s}.dateInput:focus,.reviewTextarea:focus{outline-offset:1px;border-color:#2a6bf2;outline:2px solid #2a6bf2}.dateInput:disabled,.reviewTextarea:disabled{cursor:not-allowed;opacity:.6;background:#f5f5f5}.reviewTextarea{resize:vertical;min-height:100px}.errorMessage{color:#ad1f1f;background:#ffe8e8;border-left:3px solid #ad1f1f;border-radius:6px;margin:8px 0;padding:8px 12px;font-size:13px}.successMessage{color:#186b20;background:#e8f5e9;border-left:3px solid #186b20;border-radius:6px;margin:8px 0;padding:8px 12px;font-size:13px;font-weight:600}.saveButton{color:#fff;cursor:pointer;background:#2a6bf2;border:none;border-radius:8px;width:100%;margin-top:12px;padding:12px 16px;font-size:14px;font-weight:600;transition:all .2s;box-shadow:0 2px 8px #2a6bf233}.saveButton:hover:not(:disabled){background:#1f52d4;box-shadow:0 4px 12px #2a6bf24d}.saveButton:active:not(:disabled){transform:scale(.98)}.saveButton:disabled{cursor:not-allowed;opacity:.7;background:#ccc}@media (width<=640px){.detailOverlay{padding:0}.detailOverlayContent{border-radius:16px 16px 0 0;max-height:100vh}.movieTitle{font-size:20px}.movieInfo{padding:0 16px 16px}.posterSection{padding:16px 16px 12px}.closeButton{width:36px;height:36px;font-size:20px;top:8px;right:8px}.formLabel{font-size:13px}.dateInput,.reviewTextarea{font-size:16px}.saveButton{padding:12px 14px;font-size:14px}}.searchInputWrap{align-items:center;margin-bottom:20px;display:flex;position:relative}.searchInputField{color:#111b2a;background:#fff;border:1px solid #b6c0cf;border-radius:10px;width:100%;padding:12px 40px 12px 16px;font-size:1rem;transition:all .2s}.searchInputField:focus{outline-offset:1px;border-color:#2a6bf2;outline:2px solid #2a6bf2}.searchInputField:disabled{cursor:not-allowed;opacity:.6;background:#f5f5f5}.searchInputField::placeholder{color:#999}.loadingSpinner{border:2px solid #ddd;border-top-color:#2a6bf2;border-radius:50%;width:20px;height:20px;animation:.6s linear infinite spin;position:absolute;right:12px}@keyframes spin{to{transform:rotate(360deg)}}.clearButton{color:#999;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px 6px;font-size:18px;transition:color .2s;display:flex;position:absolute;right:12px}.clearButton:hover{color:#333}@media (width<=640px){.searchInputField{font-size:16px}}.searchResultsCenter{text-align:center;color:#606a78;padding:40px 20px;font-size:1rem}.searchResultsCenter.error{color:#ad1f1f;background:#ffe8e8;border-radius:10px;padding:20px}.searchResultsGrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:20px;display:grid}.searchResultCard{cursor:pointer;background:#fff;border:1px solid #d9dde4;border-radius:12px;flex-direction:column;transition:all .2s;display:flex;position:relative;overflow:hidden}.searchResultCard:hover{border-color:#2a6bf2;box-shadow:0 4px 12px #2a6bf226}.searchResultCard.selected{border-color:#2a6bf2;box-shadow:0 0 0 2px #2a6bf240}.searchResultCard:focus-visible{outline-offset:1px;outline:2px solid #2a6bf2}.rankBadge{color:#fff;z-index:10;background:#2a6bf2;border-radius:6px;padding:4px 8px;font-size:13px;font-weight:600;position:absolute;top:8px;right:8px;box-shadow:0 2px 6px #2a6bf24d}.posterContainer{aspect-ratio:2/3;background:#f0f0f0;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.resultPoster{object-fit:cover;width:100%;height:100%}.posterPlaceholder{color:#999;text-align:center;padding:20px;font-size:12px}.resultInfo{flex-direction:column;flex-grow:1;padding:12px;display:flex}.resultTitle{color:#1a1a1a;word-break:break-word;margin:0;font-size:14px;font-weight:600;line-height:1.3}.resultYear{color:#606a78;margin:4px 0 0;font-size:13px}.resultDirector{color:#32415b;margin:4px 0 0;font-size:12px;font-weight:600}.resultSynopsis{color:#556074;line-clamp:4;-webkit-line-clamp:4;-webkit-box-orient:vertical;margin:6px 0 0;font-size:12px;line-height:1.35;display:-webkit-box;overflow:hidden}.alreadyAdded{color:#2a6bf2;margin-top:auto;margin-bottom:0;padding-top:8px;font-size:12px;font-weight:600}@media (width<=1024px){.searchResultsGrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}}@media (width<=640px){.searchResultsGrid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}.searchResultCard{border-radius:10px}.searchResultTitle{font-size:13px}.resultYear{font-size:12px}.resultDirector,.resultSynopsis{font-size:11px}.rankBadge{padding:3px 6px;font-size:12px}}.addMovieOverlay{z-index:2000;background-color:#00000080;justify-content:center;align-items:center;padding:16px;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.addMovieContent{background:#fff;border-radius:12px;width:100%;max-width:700px;max-height:90vh;padding:24px;animation:.3s ease-out slideUp;position:relative;overflow-y:auto;box-shadow:0 10px 40px #0000004d}.closeButton{cursor:pointer;z-index:2001;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:24px;transition:all .2s;display:flex;position:absolute;top:12px;right:12px;box-shadow:0 2px 8px #0000001a}.closeButton:hover{background:#fff;box-shadow:0 4px 12px #0003}.closeButton:active{transform:scale(.95)}.addMovieTitle{color:#1a1a1a;margin:0 0 20px;font-size:24px;font-weight:700;line-height:1.3}.addMovieActionPanel{background:#f7faff;border:1px solid #d8e3fb;border-radius:10px;margin-top:20px;padding:14px}.selectedMovieLabel{color:#1a2d57;margin:0 0 10px}.selectedMovieMeta{color:#32415b;margin:0 0 6px;font-size:13px;font-weight:600}.selectedMovieSynopsis{color:#556074;margin:0 0 10px;font-size:13px;line-height:1.4}.rankPickerRow{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px;display:flex}.rankPickerRow label{color:#24324a;font-weight:600}.rankStepButton{color:#2a58b5;cursor:pointer;background:#eef4ff;border:1px solid #b8c7e1;border-radius:50%;width:28px;height:28px;font-size:18px;line-height:1}.rankStepButton:hover{background:#dfeaff}.rankWheelList{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#9bb7f4 transparent;background:linear-gradient(#fff 0%,#f4f8ff 100%);border:1px solid #c4cfe2;border-radius:16px;gap:8px;width:100%;max-width:160px;max-height:180px;padding:8px;display:grid;overflow-y:auto}.rankWheelList::-webkit-scrollbar{width:10px}.rankWheelList::-webkit-scrollbar-thumb{background:#9bb7f4;border:2px solid #f4f8ff;border-radius:999px}.rankWheelItem{color:#2a3b5a;cursor:pointer;background:#fff;border:1px solid #d4def0;border-radius:999px;height:34px;font-weight:600}.rankWheelItem:hover{border-color:#2a6bf2}.rankWheelItem.selected{color:#fff;background:#2a6bf2;border-color:#2a6bf2;box-shadow:0 4px 12px #2a6bf22e}.rankPickerMeta{align-items:center;gap:10px;width:100%;display:flex}.rankCurrentValue{color:#24324a;font-weight:600}.rankHint{color:#5d6c84;font-size:13px}.submitError{color:#b12121;margin:0 0 10px;font-size:14px}.confirmAddButton{color:#fff;cursor:pointer;background:#2a6bf2;border:none;border-radius:8px;padding:10px 14px;font-size:14px;font-weight:600}.confirmAddButton:hover:not(:disabled){background:#245bd0}.confirmAddButton:disabled{opacity:.7;cursor:default}@media (width<=640px){.addMovieOverlay{padding:0}.addMovieContent{border-radius:16px 16px 0 0;max-height:100vh;padding:16px}.addMovieTitle{margin-bottom:16px;font-size:20px}.rankPickerRow{flex-wrap:wrap;gap:8px}.rankWheelList{max-width:100%;max-height:160px}.rankPickerMeta{justify-content:space-between}.closeButton{width:36px;height:36px;font-size:20px;top:8px;right:8px}}