feat: implement library.rs, types.ts, api.ts, and extract CSS

- library.rs: full video library management (1948 lines, 10 tests)
  folder scanning, progress tracking, playlists, subtitle integration,
  background duration scanning
- types.ts: all TypeScript interfaces for Tauri command responses
- api.ts: typed wrappers for all 26 Tauri invoke commands
- 6 CSS files extracted from Python HTML into src/styles/

src/styles/playlist.css

@@ -0,0 +1,100 @@
+.listWrap{
+  flex:1 1 auto; min-height:0; position:relative; overflow:hidden;
+}
+.list{
+  position:absolute; inset:0;
+  overflow-y:scroll; overflow-x:hidden;
+  --fade-top:75px; --fade-bottom:75px;
+  mask-image:linear-gradient(180deg, transparent 0%, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
+  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
+  transition:--fade-top 0.8s ease, --fade-bottom 0.8s ease;
+  scrollbar-width:none;
+}
+.list::-webkit-scrollbar{display:none;}
+@property --list-fade-top {
+  syntax: '<length>';
+  initial-value: 30px;
+  inherits: false;
+}
+@property --list-fade-bottom {
+  syntax: '<length>';
+  initial-value: 30px;
+  inherits: false;
+}
+.list.at-top{--fade-top:0px;}
+.list.at-bottom{--fade-bottom:0px;}
+
+.listScrollbar{
+  position:absolute;
+  top:12px; right:6px; bottom:12px;
+  width:3px;
+  border-radius:2px;
+  pointer-events:none;
+  opacity:0;
+  transition:opacity .4s ease;
+  z-index:10;
+}
+.listWrap:hover .listScrollbar, .listScrollbar.active{opacity:1;}
+.listScrollbarThumb{
+  position:absolute;
+  top:0; left:0; right:0;
+  min-height:24px;
+  background:linear-gradient(180deg, rgba(95,175,255,.3), rgba(95,175,255,.15));
+  border:1px solid rgba(95,175,255,.2);
+  border-radius:2px;
+  box-shadow:0 2px 8px rgba(0,0,0,.2);
+  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
+  cursor:grab;
+}
+.listScrollbarThumb:hover{
+  background:linear-gradient(180deg, rgba(95,175,255,.45), rgba(95,175,255,.25));
+  border-color:rgba(95,175,255,.35);
+}
+.listScrollbarThumb:active{
+  cursor:grabbing;
+}
+.listScrollbar.active .listScrollbarThumb{
+  background:linear-gradient(180deg, rgba(95,175,255,.5), rgba(95,175,255,.3));
+  border-color:rgba(95,175,255,.4);
+  box-shadow:0 2px 12px rgba(95,175,255,.15);
+}
+
+.row{position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:11px 12px; border-bottom:1px solid var(--strokeLight); cursor:pointer; user-select:none; transition:background .2s ease, box-shadow .2s ease; box-shadow:inset 3px 0 0 transparent;}
+.row:hover{background:var(--surfaceHover); box-shadow:inset 3px 0 0 rgba(95,175,255,.45);}
+.row:active{transform:none;}
+.row.active{background:linear-gradient(90deg, var(--accentBg), transparent); box-shadow:inset 3px 0 0 rgba(95,175,255,.7), 0 0 0 1px var(--accentGlow) inset;}
+.row.dragging{opacity:.55;}
+
+.left{min-width:0; display:flex; align-items:flex-start; gap:10px; flex:1 1 auto;}
+.numBadge{flex:0 0 auto; min-width:38px; height:22px; padding:0 8px; border-radius:999px; border:1px solid var(--strokeMed); background:radial-gradient(200px 60px at 20% 0%, var(--accentGlow), transparent 55%), var(--surface); box-shadow:var(--shadow2); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11.8px; letter-spacing:.08px; color:var(--text); font-variant-numeric:tabular-nums; margin-top:1px; transition:all .2s ease; transform:translateX(0);}
+.row:hover .numBadge{border-color:var(--accentBorder); background:radial-gradient(200px 60px at 20% 0%, var(--accentGlow), transparent 50%), var(--surfaceHover); transform:translateX(4px);}
+
+.treeSvg{flex:0 0 auto; margin-top:1px; overflow:visible;}
+.treeSvg line{stroke:rgb(65,75,95); stroke-width:1.5;}
+.treeSvg circle{fill:rgba(230,240,255,.70); stroke:rgba(100,180,255,.22); stroke-width:1; transition:all .15s ease;}
+.row:hover .treeSvg circle{fill:rgba(240,250,255,.85); stroke:rgba(100,180,255,.35);}
+
+.textWrap{min-width:0; flex:1 1 auto; transition:transform .2s ease; transform:translateX(0);}
+.row:hover .textWrap{transform:translateX(4px);}
+.name{font-size:12.9px; font-weight:820; letter-spacing:.12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s ease;}
+.row:hover .name{color:rgba(255,255,255,.98);}
+.small{margin-top:4px; font-size:11.4px; color:var(--textMuted); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s ease;}
+.row:hover .small{color:rgba(175,185,210,.85);}
+
+.tag{flex:0 0 auto; display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; border:1px solid var(--stroke); background:var(--surface); color:var(--textMuted); font-size:11px; font-weight:820; letter-spacing:.12px; text-transform:uppercase; margin-top:2px; transition:all .15s ease;}
+.tag.now{border-color:var(--accentBorder); color:rgba(215,240,255,.90); background:var(--accentBg);}
+.tag.done{border-color:var(--successBorder); color:rgba(210,255,230,.88); background:var(--successBg);}
+.tag.hidden{display:none;}
+.row:hover .tag{transform:scale(1.02);}
+
+.row.drop-before::before,.row.drop-after::after{
+  content:""; position:absolute; left:10px; right:10px; border-top:2px solid var(--accent);
+  pointer-events:none; filter:drop-shadow(0 0 10px var(--accentGlow));
+}
+.row.drop-before::before{top:-1px;}
+.row.drop-after::after{bottom:-1px;}
+
+.empty{padding:14px 12px; color:var(--textMuted); font-size:12.5px; line-height:1.4;}
+
+.playlistHeader{font-weight:900; letter-spacing:.16px; font-size:13.8px; cursor:help; display:flex; align-items:center; gap:10px;}
+.playlistHeader .fa{color:var(--iconStrong)!important; opacity:.92;}